Разбиране на микроинтеграциите в дизайна на мобилните приложения

Ползваемостта е един от ключовите компоненти на дизайн на мобилен потребителски интерфейс. Голямата използваемост често включва microinteractions които са малки отговори и поведение от интерфейс диктува как да се използва потребителския интерфейс. Тези микро взаимодействия определят поведението, насърчават ангажираността и помагат на потребителите да си представят как трябва да работи интерфейсът.

Цифрови интерфейси са посредниците между потребителите и техните желани цели. Дизайнерите на интерфейси създават опит, който помага на потребителите изпълнява определени задачи. Например приложение за списък със задачи има интерфейс, който помага на потребителите да организират задачите си. Точно както приложението на Facebook дава на потребителите интерфейс за взаимодействие с профила си във Facebook.

В това ръководство ще потърся по-нататък микро взаимодействия за мобилни приложения. Малките взаимодействия могат да изглеждат тривиални, но те могат да имат огромно въздействие относно качеството на опита на потребителя. Когато се извършат правилно, микро взаимодействията се чувстват като истинска част от всеобщото мобилно потребителско изживяване.

Силата на микро-взаимодействията

В повечето случаи целта на микро взаимодействието е към предоставят обратна връзка въз основа на действието на потребителя. Това може да помогне на потребителите визуализирате как се движи или се държи интерфейсът, въпреки че е чисто цифров на плосък екран.

Микро взаимодействията имат сила, защото те създайте илюзорно преживяване. Плъзгачите за включване / изключване не се движат като физически превключватели, но могат да се появят, за да се движат по този начин чрез анимации.

Открих невероятна цитат в тази публикация, в която се дискутира огромната стойност на микроинтерфейсите за мобилните приложения:

“Най-добрите продукти правят две неща: характеристики и детайли. Характеристиките са това, което привлича хората към вашия продукт. Детайлите са това, което ги задържа там. А подробностите са това, което всъщност прави приложението ни от нас.”

Най- малки детайли може да изглежда незначително от гледна точка на развитието, но от гледна точка на потребителския опит те наистина са направи разликата между потребителския интерфейс за ОК приложение и изключителния интерфейс на приложението.

Големите микро взаимодействия правят потребителя Чувствайте се възнаградени за предприемане на действие. Тези действия могат да бъдат повторен и вкоренено в поведението на потребителя. Те могат да се научат как да използват приложение, базирано на тези малки взаимодействия. Когато потребителят извърши поведение, тези малки взаимодействия сигнализират "да, можете да взаимодействате с мен!"

Обърнете внимание на примерите, намерени в спецификациите на Google за дизайн на материали. Документацията действително има цял раздел, посветен на материалното движение. Пространствени отношения са голяма част от това уравнение, но движението може да диктува повече от просто пространствени отношения.

Тук са най-често използваните анимации и движения в дизайна на мобилния UI / UX:

• Ръководството на потребителите между различните страници
• Насочване на потребителите чрез интерфейса за преподаване на определени поведения
• Предлагане на действия / поведения, които могат да бъдат предприети на всяка страница

Мобилните приложения имат много по-малко пространство на екрана от уебсайтове. Това може да доведе до някои трудности при преподаването на потребителите как да използват приложение. Но това може да е изненадващо просто, ако знаете как да приложите правилно микро взаимодействия.

Как работят микро взаимодействия

Единична микро взаимодействие се включва, когато потребителят се ангажира с една част от интерфейса. Повечето микроинтерктации са анимирани отговори на жеста на потребителя. Така че придвижването с приплъзване ще реагира различно от натискане или лек удар.

Blink UX направи голям пост, обсъждайки незначителните детайли на микро взаимодействия. Тези малки анимации трябва да следват a предсказуем процес които потребителят може да научи за всяко взаимодействие в приложението.

Микро взаимодействията водят потребителите чрез интерфейс чрез предлагане на отговори на поведението. След като потребителят знае, че плъзгачът за включване / изключване може да се движи, те знаят, че той е интерактивен. Въз основа на отговора, те също така ще знаят дали дадена настройка е включена или изключена. Когато бутонът изглежда, че може да се кликне върху потребителя инстинктивно знае те могат да взаимодействат с него.

Според UXPin, всяко основно микро взаимодействие може да се раздели на четири стъпки, но аз съм обобщил процеса три стъпки.

1. действие - на Потребителят прави нещо като лек удар, тласък, докоснете и задръжте, или някакво друго взаимодействие.
2. реакция - на интерфейсът отговаря въз основа на това, което трябва да се случи. Плъзгането на екрана може да се върне в историята на браузъра или да натиснете слайдър ВКЛ. / ИЗКЛ., Може да изключите настройката.
3. Обратна връзка - това е, което потребителят вижда като резултат от взаимодействието. Когато потребителят се върне обратно в мобилен браузър, той може да изплува на предишната страница, за да се появи "отгоре" на екрана. Плъзгачът за включване / изключване може да се плъзга плавно или да стане по-голям, когато се приложи натиск върху екрана.

Тези много малки действия могат да бъдат осъществени без анимация, но големи микроинтерктакти предлагат a реалистично усещане към плоския цифров интерфейс, който най-вече е под формата на реалистични анимационни ефекти. Те вдъхват живот в интерфейса и насърчават повече взаимодействие с потребителите.

Търсете детайлите

Като погледнете по-малките части от дизайна, ще разберете как приложението трябва да реагира на определено поведение.

Издърпайте, за да опресните е добър пример за сега популярно микро взаимодействие. Той не беше неразделна част от iOS, когато за първи път стартира, но много приложения взеха тази идея и започнаха да се движат с нея. Сега изтеглете за обновяване е добре познато поведение, което повечето потребители знаят, за да използват при сърфиране в потребителския интерфейс на емисията. Същото може да се каже и за мобилните менюта за хамбургери, които са нараснали по популярност.

Направете всяко микро взаимодействие реалистични и прости. Не прекалявайте с анимациите, защото те могат става досаден ако са твърде подробни и често се използват. Потребителят не иска искри да се появяват всеки път, когато докоснат икона на менюто. Направете баланс с истинска стойност, която комуникира как трябва да работи интерфейсът без да излизат извън борда.

Поглед към някои примери

Мисля, че най-добрият начин да научите нещо е да го направите, а вторият най-добър начин е да изучавате работата на другите. Събрах малка шепа UI / UX анимации за микро взаимодействие от талантливи потребители на Dribbble, за да ви покажат как те изглеждат в истинска макет.

Всяко заявление ще бъде различно и има различни нужди въз основа на това, което прави приложението. В крайна сметка повечето потребители искат едно и също нещо: приложение, което е интуитивен и предоставя качествено потребителско изживяване с микро взаимодействия по отношение на потребителското поведение.

1. Анимиран потребителски интерфейс за събития

Първият пример е изящна функция за анимация на карти, създадена от Иван Мартиненко. Ще забележите няколко микро взаимодействия в този дизайн, по-специално чрез плъзгане на карти и преместване през детайлите.

Когато докосвате картата, тя се увеличава. При натискане на бутона Абонамент снимката на потребителския профил се премества в списъка на абонатите. Всичко се чувства много интуитивно и съвсем естествено за интерфейса.

2. Интерактивен екран за упражнения

Тази творческа анимация за мобилни упражнения идва от дизайнера Виталий Рубцов. Той демонстрира потребител, който запазва тренировката си за един набор от клякам.

Забележете, че всяка анимация има същото еластичен ефект когато менютата се отварят и затварят. Това е вярно и когато активността е поставена като „Готово“. съгласуваност е ключът към микроинтерктациите, защото всички те трябва да се чувстват свързан към същия интерфейс.

3. Търсене на микро-взаимодействия

Кратко, сладко и до точката. Мисля, че това най-добре описва тези микроинтерфейси на приложенията за търсене, проектирани от Лукас Хорак. Всяка анимация е бърз, но все пак забележим.

Ето как трябва да проектирате микро взаимодействия избягвайте свръх сложността. Ако интерфейсът се зареди по-бързо без анимация, тогава защо се притеснява да го добавите? Бързи анимации поддържате потребителя да се движи, без да затъквате опита.

4. Микроинтерфейс на фитнес целта

Мисля, че Jakub Antalà ??  ?? Ã'Â-к наистина удари този един от парка с неговата фитнес цел microinteraction. Екраните имат това усещане за джигъл джил, защото фигурите се движат толкова плавно.

Но интерфейсът също се усеща солидна и използваема. Това показва, че микро взаимодействията, създадени с цел, все още могат да бъдат забавни и забавни, но и функционални и прагматични.

5. Издърпайте, за да обновите анимацията

Ето един от най-любимите ми анимации, които са създадени от екипа на Ramotion. Това не само имитира течност с дръпване, но анимацията на отговора плавно се свързва от впръскване на течност в кръг на натоварване.

Това много внимание към детайла е това, което изважда истинската красота в мобилните приложения.

6. Tab Microinteraction

Уиджети с раздели са доста често срещани за мобилните приложения поради по-малките екрани. Наистина ми харесва това микро взаимодействие, създадено от John Noussis, въпреки че мисля, че ще бъде по-ефективно при по-бърза скорост, но самата анимация е славна и добре обмислена..

Стрелката за закрепване на раздела се плъзга надясно, точно както новото съдържание се отваря отдясно. Той дава илюзията на целият екран физически се движи надясно. Анимацията е изискана, но тъй като е толкова бавна, мисля, че повечето потребители ще се дразнят след няколко дни.

7. Предварително зареждане на анимация

Не съм казал много за това барове за зареждане в тази публикация, но те са също толкова ценни за цялостния опит. Повечето потребители не искат да чакат данните да се заредят, но определено не искат да гледат на празен екран, докато се зареждат.

Bret Kurtz направи този невероятен презареждащ екран, който е забавен и информативен. Потребителят всъщност може да бъде забавляваха гледане на тази малка анимация се повтаря. Те също могат да бъдат успокоен че заявлението е все още зареждат техните данни и не се разби.

Обобщавайки

Всички тези примери блестящо демонстрират стойността на микро взаимодействията. Мобилните приложения получават много по-голяма полза от микро-взаимодействията, тъй като потребителите физически докосвайте екраните с пръсти. Потребителите не докосват своите настолни монитори или екраните на лаптопите си, но всички подслушват смартфоните си, защото това е състояние на интерактивност по подразбиране.

Това е много по-личен опит, Ето защо дизайнът на мобилните приложения може да бъде такъв нюансиран процес. Когато се направи правилно, добавянето на големи мобилни микро взаимодействия може да изгради a мощно илюзорно потребителско изживяване от нищо друго освен пиксели и движение.