Как да проектирате микро-взаимодействия с едно докосване
Микроинтерациите са „тайният сос“, който кара приложенията и уебсайтовете да блестят за потребителите. Тези малки подробности улесняват настройката на алармата, натискане на бутон или просто по-добре да разберете как да работите с дигитален продукт.
Тайната е, че най-добрите микро взаимодействия са елементи, за които потребителят вероятно дори не мисли. Те се случват в миг - често само с едно докосване на мобилен екран. Въпреки малкия характер на взаимодействието, оттук и „микро”, стойността е огромна за потребителите, тъй като тези ангажименти стават все по-интегрирани с ежедневната дейност.
Как да проектирате микро-взаимодействия с едно докосване, които да зарадват потребителите? Ето няколко идеи.
Разгледайте елементи Envato
Анимиране на бутон
Спомняте ли си първия път, когато забелязахте Facebook като в Messenger? Докоснали сте иконата „палец нагоре“ и тя се разрасна в полето до човека, с когото разговаряте. Накара ли да се усмихнеш? Това малко движение ви достави малко удоволствие?
Простата анимация, преди натискането, за да я насърчи или след докосването, за да покаже, че микроинтеракцията работи, е сигурен начин да създадете нещо, което потребителите искат да чукат. Малките анимации предоставят информация за случващото се, така че потребителите да се чувстват комфортно и уверени за своите роли в цикъла за обратна връзка.
не
Анимацията трябва да бъде толкова проста, колкото и самото микро-взаимодействие. Дръжте движенията прости и течни и, бързо да започнете и завършите. Добавянето на рейтинг на IMDb следва този принцип; задръжте курсора на мишката над рейтинга и бързо видите броя звезди, които да добавите, когато преминавате върху всяка. Докоснете, за да щракнете, за да завършите и потвърдите действието.
Предоставяне на опции
Това е урок по UX, който се връща към училищните училища и детските любовни писма. Харесваш ли ме? Проверете да или не.
Страхотните микроинтеракции могат да бъдат проектирани, като се използва същата концепция. Дайте на потребителите два бързи избора. Докоснете, за да инициирате (или спрете) действие; докоснете, за да превключвате. Потребителите искат да направят избор и да се чувстват под контрол на цифровите преживявания, но не искат да бъдат затънали с множество екрани, за да стигнат до там.
Създайте незабавно действие
Най-добрият начин да гарантирате, че потребителите взаимодействат с вашето микро взаимодействие? Резултатът трябва да бъде незабавен. Желаният резултат трябва:
- Случва се с едно докосване
- Осигурете желаното действие в рамките на 0, 1 секунди
Непосредствеността на микровзаимодействията е жизненоважна за техния успех. Тъй като естеството на тези елементи е малко, всяко забавяне на действията ще дразни потребителите. (Помислете само колко би било разочароващо, ако бяха необходими три докосвания, за да изключите алармата или ако имаше 2-секундно закъснение, за да заглушите звънеца при разговор по време на среща.)
Бързото превключване между подобно (или за разлика) или следване в Instagram е перфектен пример. Ето колко бързо трябва да бъде вашето микроинтеграция.
Дизайн за повторение
Едно от нещата, което прави микро-взаимодействието различно от някои други интерактивни елементи в потребителския ви интерфейс, е, че те ще се използват отново и отново. Микро взаимодействията обикновено не са предназначени за еднократна употреба. (Колко пъти сте натискали Instagram бутона във формата на сърце в последния час?)
Дизайн за това повтарящо се действие, но действието не трябва да се чувства като повтарящо се движение. Макар че това може да звучи много за поемане, това се свежда до интуитивната природа на крана. Очевидно и естествено ли е? Ако потребителят не трябва да мисли за дадено действие, той никога няма да го намери за повтарящ се.
Използването на общоприети потребителски модели, анимации и стилове на икони ще ви помогне да ръководите начина, по който проектирате микро взаимодействията. Не преоткривайте колелото тук; улесняват потребителите да изпълняват задачи с едно докосване и без да се налага да надраскат главите си как да го правят.
Направете го четлив и удобен
Ето стъпката, която се забравя твърде често - инструкциите във вътрешността на микровзаимодействията трябва да бъдат четими и да могат да бъдат предавани.
Четене се отнася до всеки текст или инструкции, тъй като те се отнасят до микровзаимодействието. Думите трябва да бъдат лесни за гледане и сканиране. От гледна точка на дизайна, изборът на добър шрифт и осигуряването на достатъчно пространство около думите и много контраст между буквите и фона са от ключово значение. Стойте далеч от кондензирани, тънки или новообразувани шрифтове, които не са лесни за четене с един поглед.
Относимо се отнася до текст, който се чете по същия начин, по който хората говорят. Трябва да се избягва нечестият език или неудобните фрази. Инструкциите вътре в полетата на формуляра, които изчезват, когато потребителят започне да пише, е чудесен пример. Това е особено вярно, когато формулировката използва тон или глас, които потребителят очаква от марката или уебсайта, с който взаимодействат.
Съсредоточете се върху подробности
Микро взаимодействието е една от многото детайли на дизайна, които ще съставят вашия интерфейс. Трябва да се погрижите особено за всеки един от тях.
Микро взаимодействията трябва да се чувстват като част от цялостния дизайн. Но трябва да мислите за тези мънички действия и по други начини. От избора на цвят до размера на елементите, с които потребителят трябва да взаимодейства, тези подробности ще насърчат действията или ще накарат потребителите да се откажат от дизайна за нещо друго.
Както бихте направили с всеки друг дизайнерски елемент, създайте набор от стилови и дизайнерски правила за микровзаимодействия в приложение или уебсайт, така че действията да са последователни по време на целия дизайн и лесно за потребителите да намерят и ангажират. Колкото по-тънък става елементът - или взаимодействието - толкова по-важните детайли стават.
Не го усложнявай
Да го кажеш милион пъти, не е достатъчно - не забравяйте. Има твърде много дизайни, които са твърде трудни за използване. Може да мислите, че е готино, но потребителите няма. Харесват предсказуемостта, последователността и простотата.
Колкото по-лесно е да си взаимодействат с нещо, толкова по-вероятно е потребителите действително да натиснат бутон. Ето защо действията с едно докосване са толкова важни. Как да разберете дали вашият дизайн е достатъчно прост? Тя се нуждае от дефинирана структура с обратна връзка за действия, прости инструкции и визуализации и съобщение, което се предава ясно и е лесно за разбиране.
Не спирайте да се развивате
Проектирането на микроинтеракции е еволюционен процес. Тъй като това е толкова нова концепция, тя се променя непрекъснато. Има нови идеи и нови начини да създадете нещо, което потребителите искат да докоснат.
Продължаването на пътя с развитието на микровзаимодействията се връща към основите, които Дан Сафър за първи път определи. (Той също така написа една от най-авторитетните книги по темата, „Микро взаимодействия: Проектиране с подробности.“) Микро взаимодействията включват процес в четири стъпки, започващ с действие на задействане, правила за това как работи взаимодействието, цикъл за обратна връзка, така че потребителят знае нещо се случи и цикли и режими, които диктуват как ще работят бъдещите взаимодействия или какво следва. Имайте това предвид и ще сте на пътя към успеха в микроинтеграцията.
заключение
Има много парчета за проектиране на нещо толкова малко. Така че, не мислете, че можете да създадете микровзаимодействие за пет минути и да продължите напред. Проектирането на микровзаимодействие взема специално внимание и планиране.
Не забравяйте, че най-добрите микро взаимодействия обикновено работят с едно докосване и са елементи, с които потребителите дори не се замислят да се ангажират, въпреки че ще се правят редовно.
