Оживљавање микро-интеракције и корисничке сучеље кроз сурадњу програмера и дизајнера

Корисницима можемо створити угодно искуство путем микро-интеракције и УИ анимације!

Здраво, ја се зовем Кио Ким и радим као дизајнер производа у Цапитал Онеу око две године. Користим микро интеракције и анимацију током свог рада овде, укључујући неке мобилне пројекте које бисте и сами могли користити. Пре него што сам почео да радим у техници, моја позадина је била у филму. У филму се фокус ставља на приповиједање и монтажу како би се створила прича која привлачи публику; а много тога се постиже коришћењем прелаза. Данас су ми те вештине корисне док стварам искуства и приче за дигиталне алате.

Приликом дизајнирања размишљам о факторима који би корисницима пружили сјајно и дражесно искуство у транзицији и приповиједању прича.

Да би производ понудио својим корисницима одушевљено искуство, мора понудити више него естетски угодан дизајн и импресивне анимацијске ефекте.

Без обзира да ли је производ базиран на апликацијама, веб локацији или било који други облик дигиталног производа, он мора привући кориснике, бити им пријатан за употребу и пружити им могућност да се с њим директно и смислено баве начин.

Микро интеракције имају моћ да корисничко искуство учине допадљивим и задовољавајућим на начин на који многи елементи дизајна не могу. Пре него што уђемо у микро-интеракције у контексту дизајна производа, кренимо од основа.

Шта су они? Зашто је то добро за корисничко искуство? Зашто би дизајнери и програмери требали да их укључе у свој посао? Како дизајнерски тимови производа могу заједно да раде на побољшању?

Шта су микро-интеракције и зашто их треба бринути?

Шта су микро интеракције или УИ анимације? Људи их често називају лепим анимацијама, графиком покрета или дизајном покретних слика. Међутим, они су много више од тога.

За разлику од других облика анимације који постоје искључиво како би се створила илузија кретања, микро-интеракције директно ангажују корисника, омогућавајући му / јој да обавља различите задатке и да интерактивно дјелује с производом на интуитиван и ефикасан начин.

Ако бисмо ово повезали са принципима доброг дизајна система, ово побољшава и омогућава повратне информације о систему за корисника. Ако се правилно изврши, корисници ће узимати микро-интеракције као поруку корисника да систем (систем) ради оно што би требао радити као одговор на оно што кориснику треба.

Чак и ако не знате шта су микро-интеракције, с њима се редовно бавите. Сваки пут када користите апликацију или веб-базирани производ да бисте извршили одређени задатак - било да је читање вести, куповина, играње игре, креирање профила или прилагођавање подешавања и подешавања обавештења - свака појединачна акција коју направите представља микро-интеракција. Микро-интеракције су неприметно уклопљене у платформу производа, чинећи њихове функције транспарентним и доступним, ефикасно побољшавајући целокупни доживљај корисника.

Иако ове „акције“ имају неколико различитих облика, неки уобичајени примери укључују:

  • Када „преместимо“ ставку у виртуелну корпу за куповину.
  • Када изаберемо између две опције на преклопном тастеру сличном ЦТА.
  • Када се „повучемо“ да освежимо вест и видимо најновије ажурирање.
  • Када се „померамо према горе и доле“ у дугом фееду или на страници.

Када дизајнирамо микро-интеракцију, морамо испитати да ли је заиста неопходна и од виталног значаја за корисничко искуство. У супротном, он може потенцијално ефикасно одвратити кориснички образац користећи ваш производ или постати визуелни шум.

Принципи микро-интеракција

Постоје три принципа која увек узимам у обзир приликом дизајнирања микро интеракција.

  1. Континуитет (и суптилност)

Елементи микро-интеракције требају бити суптилни тако да када корисник изврши акцију, непрекидно слиједи његово искуство. На пример, ако стварамо анимацију за помицање у дугом фееду, корисник би требао бити у стању да се фокусира на садржај странице, а не на саму анимацију за помицање.

2. Предвидљивост

Квалитетне микро-интеракције имају елемент предвидљивости који кориснику омогућава ефикасно и ефикасно кретање по производу. Корисник може тачно предвидети ефекте својих поступака, осећати се угодно преокренувши их и уверен у своју способност да изведеју онако како се очекује.

3. Трансформабилност

Прелази течности између више екрана и добро дефинисане трансформације различитих објеката унутар њих кључни су аспекти квалитетних микро интеракција. Омогућују кориснику да развије интуитивно разумевање односа између екрана и елемената унутар њих.

Када су дизајниране на основу ових принципа, микро-интеракције пружају контекст за дизајн помажући корисницима да знају како да комуницирају с њим. Микро-интеракција је тренутни догађај који употпуњава један задатак. Наводно најмањи интерактивни елементи веб странице или дизајна апликација, микро-интеракције су неке од најважнијих ствари јер служе различитим основним функцијама.

Окидачи (додирните, превуците, превуците итд.) Покрећу све акције наведене у горњем делу (континуитет, предвидљивост и трансформабилност). Корисник врши радњу на веб локацији или апликацији за покретање поступка (чак и ако се настави након почетног корака). Ово следи образац позива корисника на радњу, правила за ангажовање како је одређено интерфејсом (шта ће се догодити и како), повратне информације од корисника (је ли то радило или не) и обрасци или петље (да ли радња догодити се једном или поновити у распореду).

-Како програмери и дизајнери могу заједно да раде на оживљавању микро-интеракција

Као што видите, микро-интеракције имају критичну улогу у обликовању корисничког искуства. Због тога су постале све важнији део мог рада као дизајнера производа. Радећи на различитим пројектима на више платформи и примена, приметио сам да не препознају сви вредности ових елемената или како их ефикасно створити. Оно што је још важније, често чланови тима не знају како да искажу идеје другима о дизајнирању прелаза и микро интеракција.

Схватио сам да се све сводило на комуникацију - нешто се изгубило у преводу када сам објаснио своје дизајнерске идеје својим програмерима. Можда сте чули овај Конфуцијев цитат и раније: „Реци ми и заборавићу. Покажите ми, и можда се сећам. Укључите ме и ја ћу схватити. “И управо кроз укључивање ми као тим дизајнера и програмера стварамо сјајна искуства.

Прво да прођемо кроз кратак опис процеса дизајнирања ...

У идеалној ситуацији, када дизајнер дође до идеје за микро-интеракцију, традиционални ток рада одвија се следећим редоследом:

  1. Дизајнер развија визуелне елементе и ефекте анимације неопходне за активирање своје идеје.
  2. Дизајнер представља коначни модел и његове концепте осталим члановима тима.

Али шта ако се процес дизајнирања не одвија у пракси као у теорији? Шта ако представљамо плочу с књигама или некомплетни модел? Или неко други из тима прави модел?

Када се то догоди, вероватно ће се појавити проблеми у презентацији или развоју. Ови проблеми обично спадају у једну од три категорије:

  1. Идеја о анимацији није довољно јасно саопштена.

Ако покушавате да опишете концепт анимације речима или фотографијама, на лицима ваше публике можете видети гримасе. То значи да се труде најбоље да разумеју вашу идеју, али заправо је не схваћају. Чак и ако разумеју основни концепт, слика коју су им причали у глави вероватно није у складу са оним што замислите. Будући да људи имају тенденцију да виде покретне слике, фотографије и вербалне описе на различите начине, ослањање на речи или слике за преношење идеје о анимацији ствара простор за неразумевање и често непотребну напетост међу члановима вашег тима.

2. Дизајнер не зна да ли анимација добро функционише док не провере и тестирају прототип програмера.

Када дизајнери немају вештине за израду прототипа, они су ограничени на то да идеје представе програмерима путем плоче са књигама. Чак и ако дизајнер снажно верује у модел микро-интеракције, он или она не могу рећи да ли ради на свој пуни потенцијал све док програмер не доврши прототип. То је проблематично из више разлога, од којих је главни вјероватноћа погрешне комуникације да такав приступ уведе у процес. Осим тога, то отвара врата за сумњу код чланова тима и доводи до питања о изводљивости идеје. Из перспективе развоја ово може бити скупо са временом.

3. Дизајнер и програмер нису на истој страници

Када дизајнери праве УИ анимације или микро-интеракције, они покушавају да укључе сложене детаље дизајна попут прилагођених олакшица, скрипти, израза и других ефеката. Приликом представљања ових идеја програмерима, они би могли чути: „Није могуће да се ово постигне у нашој временској линији“, или „Не можемо то учинити потпуно исто, али покушаћемо.“ У овом тренутку, они би могли да покушају да усмере открити разне детаље и техничке проблеме са програмерима. Међутим, ове дискусије могу завршити бесплодно ако дизајнер нема добро знање о алатима или језицима које програмери користе. Ове факторе треба узети у обзир при формулисању и расправи идеја како би микро-интеракције биле компатибилне са подразумеваним подешавањима програмера, повећавајући вероватноћу да ће коначни производ удовољити стандардима дизајнера (и свих осталих).

Која су решења за ова питања?

Иако сви дизајнери и програмери имају свој начин комуницирања о својим анимацијским концептима, желим да поделим један од метода које користи мој тим. Ова метода је била прилично успешна и резултирала је мањим бројем састанака и драстично је побољшала комуникацију нашег тима.

Сада се више не свађамо око тога да ли треба укључити или не микро интеракције, истражујемо начине како да их учинимо још бољим!

Концепт интеракције скелета и водич за интеракцију

„Концепт интеракције костура и водич за интеракцију не оставља простора за интерпретацију која ми омогућава да одмах започнем рад и будем сигурна у усклађивање са визијом дизајнера.“ –Јессе М Мајцхер / Леад ИОС инжењер

Стандардни поступак који користимо за комуникацију о УКС дизајну не значи добро за УИ анимације. Као прво, УКС дизајни и токови су и даље дизајнирани по екрану и статички су. УИ анимације су токови сами по себи, флуидни су и заснивају се на времену. Када стварамо статички дизајн, направимо груби жични оквир како бисмо разумели идеју и расправљали о току. То нам омогућава да лако ревидирамо и прецизирамо дизајн пре него што креирамо коначну верзију. Једном када се сваки члан тима сложи да је дизајн спреман да преда програмерима, дизајнер пружа програмеру водич за стилове и црвену линију која садржи детаље, спецификације и друге важне информације о дизајну.

Ако бисмо користили сличан процес за анимације, наш процес би могао бити много бржи и бољи.

  1. Концепт интеракције скелета (студија покрета)

Концепт интеракције костура сличан је жичаном оквиру који бисте креирали приликом дизајнирања протока, главна разлика је у томе што је то прототип прототипа који се може играти / на који се може кликнути. Ако то доведемо на састанак, чланови нашег тима неће морати да користе своје маште да би разумели концепт. Дизајнер може да користи демо или статичку причу плоче која се може кликнути да би се директно позивали на визуелне и анимационе елементе дизајна. Ово ће сваком дати јасан и тачан осећај његове идеје. Заузврат, партнери могу пружити повратне информације које су врло специфичне и, самим тим, веома вредне за дизајнера. У исто време, тимови за управљање производима и развојни тимови ће добити информације које ће им омогућити да побољшају своју унутрашњу комуникацију и процене времена за пројекат.

2. Водич за интеракцију

Једном када се тим сложи око концепта, дизајнер креира водич за интеракцију. То је слично стилском водичу по томе што описује положај, ротацију, скали и временски распоред елемената. Можемо додати сваки детаљ о анимацијама, што ће помоћи нашим партнерима да то јасно разумеју. Када дизајнер покаже водич за интеракцију својим партнерима, он или она могу бити још јаснији у погледу кретања и мерења концепта анимације. Ово је веома корисно за финализирање рада кроз сарадњу. Такође помаже дизајнерима да буду пажљивији у дизајну анимација / микро-интеракција.

3. Вештине израде прототипа за дизајнере

По мом искуству, да бисте се поставили за успешну сарадњу у дизајну, дизајнер производа требало би да буде покретач анимације, а програмер треба да пружа подршку. То значи да дизајнер производа сноси највећи део одговорности у партнерству. Не само да су одговорни за објашњавање својих идеја врло јасно, већ морају показати да су изведиви пружањем доказа о концепту. То такође значи да дизајнери производа морају бити способни да праве сопствене прототипове анимација. Ако дизајнер производа може креирати прототип и представити га током састанка, расправа која следи биће јаснија и мање времена, што ће водити ка укупном ефикаснијем процесу комуникације.

Дакле, са којим врстама алата за израду прототипа би се требало упознати дизајнери? Много је алата тамо, али не знају сви који најбоље раде за одређене задатке микро-интеракције. Ево мојих препорука заснованих на мом личном искуству у дизајнирању ових елемената.

Ако сте упознати са кодирањем:

  • Мобилни телефон: Ксцоде, Андроид студио
  • Мобилни или веб: Фрамер
  • Веб: ЦСС анимација

Ако желите да дизајнирате интеракцију између тастера налик екрану и модула:

  • Инвисион и Марбел

Ако желите да направите детаљније интеракције:

  • Принцип, Адобе ЦЦ, оригами Студио и Пикате

Ако желите да направите детаљне интеракције + анимацију:

  • После ефекта

Тренутно сам љубитељ коришћења Афтер Еффецт-а за израду прототипа. Чак и ако није интерактиван (тј. Који се може кликнути), то је савршен начин представљања концепта анимације. Такође, не постоји ограничење ефекта и ви сте у могућности да контролишете кретање детаља. Чак је могуће и да га употребите за интеракцију у 3Д простору, као што су АР и ВР.

Пријатне тимске интеракције чине одлицан производ

Микро-интеракције постају све важнији - ако не и критични - елемент веба, мобилног дизајна и још много тога. Чак и ако и дизајнери и програмери препознају вредност УИ анимација и буду мотивисани да их креирају, често се труде да сарађују на ефикасан, ефикасан начин. Потребан је снажан тим да на време испоручи сјајне микро-интеракције; такви тимови захтевају јасно одређивање улога, ефективне комуникационе вештине и праве алате за израду прототипа за задатке који се обављају.

Да бисте микро-интеракције поставили за успех, побрините се да ваш тим поседује ове карактеристике и да се бави тим процесима. Срећно у вашем микро-интерактивном путовању!

ИЗЈАВА О ИЗЛАГАЊУ: Ова мишљења су мишљења аутора. Ако у овом посту није другачије наведено, Цапитал Оне није повезан са нити једном од наведених компанија. Сви жигови и друга интелектуална својина која се користе или приказују власништво су њихових власника. Овај чланак је © 2017 Цапитал Оне.

Да бисте сазнали више о АПИ-јевима, отвореном извору, догађајима у заједници и култури програмера у Цапитал Оне-у, посетите ДевЕкцханге, наш портал за оне-стоп програмере: девелопер.цапиталоне.цом.