Разумевање микроинтеракција у дизајну мобилних апликација

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

Дигитални интерфејси су посредници између корисника и њихови жељени циљеви. Дизајнери интерфејса стварају искуства која помажу корисницима обављање одређених задатака. На пример, апликација листе задатака има интерфејс који помаже корисницима да организују своје задатке. Баш као и Фацебоок апликација даје корисницима интерфејс за интеракцију са својим Фацебоок налогом.

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

Моћ микроинтеракција

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

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

Нашао сам невероватан цитат у овом посту који говори о огромној вредности микроинтеракција за мобилне апликације:

“Најбоље производе чине двије ствари: значајке и детаљи. Значајке су оно што привлачи људе на ваш производ. Детаљи су оно што их задржава тамо. И детаљи су оно што заправо чини нашу апликацију истакнутом од конкуренције.”

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

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

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

Овде су најчешће коришћене анимације и кретање у мобилном УИ / УКС дизајну:

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

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

Како функционишу микроинтеракције

Једна микроинтеракција се јавља кад год се корисник укључи у један дио сучеља. Већина микроинтеракција је анимирани одговори на гесту корисника. Дакле, покрет за кретање ће реаговати другачије него тапкање или помак.

Блинк УКС је направио одличан пост о малим детаљима микроинтеракција. Ове мале анимације треба да следе а предвидљив процес које корисник може да научи за сваку интеракцију у апликацији.

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

Према УКСПин-у, свака основна микроинтеракција може се подијелити на четири корака, али сам сам сумирао процес три корака.

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

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

Потражите детаље

Гледајући мање делове дизајна, разумећете како апликација треба да одговори на одређено понашање.

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

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

Поглед на неке примјере

Мислим да је најбољи начин да се нешто научи то што радимо, а други најбољи начин је проучавање рада других. Сакупио сам малу шаку УИ / УКС анимације микроинтеракција од талентованих Дрибббле корисника да вам покажу како то изгледа у правом моделу.

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

1. Анимирани кориснички интерфејс апликације

Први пример је изванредна анимирана картица коју је креирао Иван Мартиненко. Приметићете неколико микроинтеракција у овом дизајну, посебно картицу свипинг и кретање кроз детаље.

Када додирнете картицу, она постаје већа. А када притиснете дугме „Претплати се“ фотографија профила корисника клизи у листу претплатника. Све је веома интуитивно и сасвим природно за интерфејс.

2. Екран интерактивне вежбе

Ова креативна мобилна анимација за вежбање долази од дизајнера Виталија Рубцова. Демонстрира корисника који спрема тренинг за један сет чучњева.

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

3. Сеарцх Апп Мицроинтерацтионс

Кратко, слатко и до тачке. Мислим да ово најбоље описује микроинтеракције апликација за претраживање које је дизајнирао Лукас Хорак. Свака анимација је брзо, али и даље приметно.

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

4. Фитнесс Гоал Мицроинтерацтион

Мислим да је Јакуб АнталА ?? а € œк стварно погодио овог из парка са својом микроинтеракцијом у циљу фитнеса. Сви екрани имају тај осећај јиггли јелл-о зато што облици се крећу тако флуидно.

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

5. Повуците да бисте освежили анимацију

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

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

6. Таб Мицроинтерацтион

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

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

7. Пре-анимација

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

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

Окончање

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

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