Когато проектирате продукт, има много начини за подобряване на потребителското изживяване, включително дефиниране на персони, добре структурирана информационна архитектура и внимателно написано съдържание. Но след като тази структура на високо ниво е зададена, създаването на наслада за потребителя идва в по-малкото взаимодействие подробности за дизайна .
Тези подробности, известни като микровзаимодействия , са отделни моменти в продукта, предназначени да изпълнят една-единствена задача, като същевременно засилят естествения продуктов поток. Плъзгане нагоре за опресняване на данни, харесване на съдържание или промяна на настройка са всички микровзаимодействия. Те могат да включват и прости анимации на потребителския интерфейс - например начинът, по който менюто се плъзга при докосване или картата се плъзга от екрана, когато се плъзга.
Често микровзаимодействията дори не се забелязват съзнателно от потребителя, но техните фини детайли правят продукта повече приятно и по-лесен за използване и следователно да подобри потребителското си изживяване.
Микровзаимодействията и анимацията на потребителския интерфейс са толкова важни, че могат да направят или разбият дизайн - или като Чарлз Иймс , за дизайн на мебели и архитектурна слава, каза:
Детайлите не са подробности. Те правят дизайна.
Някои ключови предимства от включването на микровзаимодействия в даден продукт са:
След като установихме определение и контекст около това, което правят микровзаимодействията, и дадохме пример за това как те подобряват потребителското изживяване, нека обсъдим най-добрите практики за създаване на микровзаимодействия.
Първото правило във всеки потребителски опит дизайнът е да разкрие и разбере потребителските проблеми - не е по-различно при микровзаимодействията. Най-добрият начин да разберете от какво се нуждае потребителят е да провеждате анкети или интервюта или да наблюдавате поведението чрез проучване на потребителя. ApeeScape дизайнер Иван Анников се задълбочава в разбирането на нуждите на потребителите в статията си, “ Going Guerrilla: Достъпни съвети и алтернативи за UX изследвания . '
Целта е да се преодолее пропастта между потребителя и продукта по начини, които се чувстват интуитивни и естествени, така че избягвайте странни анимации, които се зареждат твърде дълго или могат да разсеят потребителя. Вместо това създайте дизайни, които безпроблемно се съчетават с продукта. Тънкостта е ключова за микровзаимодействията. Не оставяйте потребителя озадачен и си мисли: „Какво беше това?“
Дори опитен дизайнери рядко получавате дизайни напълно правилно от първия опит. Ето защо използването на процес на потребителско тестване и итеративният дизайн е прост начин за намаляване на недостатъците на използваемостта преди пускането на продукта.
По време на фазата на тестване на потребителя микровзаимодействията се тестват и анализират за използваемост и се ревизират по време на следващата фаза на проектиране. Този процес се повтаря, докато проблемите с използваемостта и точките за болка не бъдат коригирани.
Според Дан Сафър , старши продуктов дизайнер на персонала в Twitter и авторът на „Микровзаимодействия: Проектиране с детайли“, има четири части на микровзаимодействие.
За да покажем мисловния процес, който стои зад проектирането на микровзаимодействия, нека деконструираме микровзаимодействие чрез Google : микроинтеракция за предложение за име на файл в Гугъл документи .
Това микровзаимодействие заема първия ред на документ и предлага тази част от текста като име на документа, което прави процеса на създаване на име по-интуитивен.
Процесът на проектиране на микровзаимодействие е същият като при всяка дизайнерска задача: идентифициране на точката на болка на потребителя и фиксирането му. Като имаме предвид предишните най-добри практики, нека започнем да идентифицираме проблема.
Лесен и интуитивен начин за организиране на документите е просто да ги назовете описателно. В повечето текстови редактори полето „Назовете вашия документ“ остава празно, въпреки че има голяма вероятност името на файла в крайна сметка да корелира със съдържанието на документа. Това е процес, на който си струва да се обърне внимание чрез микровзаимодействие.
Google Docs се справя с това по два начина, в зависимост от избора на потребителя: 1) Потребителите могат да кликнат в полето за име и да променят името на документа веднага, преди да въведат каквото и да е съдържание, и да променят „Неозаглавен документ“ на името по свой избор, или 2 ) След като потребителят напише първия ред текст, Google автоматично го попълва като име на документа. Потребителят може да запази това както е или да го промени.
Нека разгледаме подробностите:
Възможно е да има няколко възможни задействания за именуване на документа с помощта на Файл> Запазване като функция на менюто или натискане cmd + s на Mac ( ctrl + s на Windows) на клавиатурата, както при настолни приложения. Но никой от тях не се възползва от интерактивната природа на мрежата и не подобрява особено потребителския поток.
Вместо това основният спусък на Google Docs е просто да щракнете върху полето с името на документа. Състоянието на мишката в полето показва подсказка „Преименуване“. Вторичният спусък е Файл> Преименуване , което подчертава полето за въвеждане на име.
Правилата определят какво се случва след щракване върху спусъка. В този случай първият ред текст ще се появи като име на документа. Но какво, ако потребителят не иска да има първия ред текст като име? Когато потребителят щракне върху полето за въвеждане на име, целият текст е избран и ще бъде изтрит с всяко натискане на клавиш, което улеснява потребителя при създаването на ново име.
Промяната на цвета на границата на полето за въвеждане е често срещан модел на взаимодействие и това е, което Google Docs използва тук, за да даде на потребителя незабавна обратна връзка.
Потребителят успешно създаде името на документа и задействането остава на място с една ключова разлика: Документът вече е наименуван.
На този етап потребителят може да иска само да промени само няколко букви или да добави дата към името, вместо да променя цялото име, което предварително е дефинирал. В този случай, за разлика от предишното правило, правилото за маркиране на цялото име на документ е деактивирано.
След като дефинираме проблема и се съсредоточим върху всичките четири части на микровзаимодействието, резултатът е по-естествено, удобно за потребителя изживяване. Решението за именуване на файлове на Google Docs помага на потребителя да се организира с правилно именувани файлове и опростява процеса на именуване на документи.
Напомняния за Apple iOS помогнете на потребителите да останат организирани и да премахнат няколко стъпки, като им позволите да докосват, задържат и плъзгат елемент от списъка, за да променят мястото му в реда на списъка.
„Харесване“ на съдържание чрез щракване върху палец или върху икона се превърна в често срещан модел на UX дизайн в много приложения и уебсайтове. Facebook изграден върху това взаимодействие чрез добавяне на множество опции отвъд „харесването“ чрез фино микровзаимодействие.
В повечето браузъри , възможно е да се замени цветът за избор на текст по подразбиране. IKEA използва този модел на взаимодействие, за да добави фин детайл за брандиране, като подчертава текста в неговите емблематични жълти и сини цветове.
Google Hangouts предполага, че един от случаите, в които потребителят може да иска да сподели местоположението си, е когато някой изпрати съобщение „Къде си?“
Когато потребителят разглежда това съобщение, бутон „Споделяне на вашето местоположение“ се показва като контекстна опция. След това те могат да докоснат този бутон, за да изпратят автоматично карта на местоположението си на другия потребител.
Микровзаимодействията могат да се използват за отговор на прости въпроси с да или не в приложение. Тиндер прави това, като накара потребителя да прекара пръст наляво или надясно (не / да) в зависимост от това дали харесва или не харесва евентуалното им съвпадение.
The Google Inbox приложение не само интелигентно групира поща с пакети , той също е проектиран да позволява гласово търсене или да избирате от най-новите контакти с едно докосване.
SeatGeek опростява процеса на попълване на формуляра, като автоматично попълва информацията от контактите на потребителя с докосване на бутон „Добавяне от контакти“.
Микровзаимодействията са ключова част от подобряването на потребителски опит и има много налични ресурси, за да научите повече за тях, някои от които са изброени по-долу.
За да научите повече за микровзаимодействията като цяло, посетете Микровзаимодействия , уебсайтът, създаден като спътник на споменатата по-горе книга „Микровзаимодействия: Проектиране с детайли“ от Дан Сафър. На сайта има подробни обяснения на микровзаимодействията, както и информация за произхода на добре познатите микровзаимодействия, като автокорекция, автодовършване и изрязване и поставяне. Първата глава на книгата е достъпна и като безплатно изтегляне.
За вдъхновение за микровзаимодействие посетете Малки големи детайли , подбрана колекция от микровзаимодействия в цифрови продукти. Показва примери за това как компаниите харесват Apple , Трело , и Преливане на стека внедряване на микровзаимодействия и анимация на потребителския интерфейс.
За да научите как да създавате микровзаимодействия в Фреймър , Прочети ApeeScape Designer, Wojciech Dobry's статия, Урок за Framer: 7 прости микровзаимодействия за подобряване на вашите прототипи .
Кажете ни какво мислите! Моля, оставете вашите мисли, коментари и отзиви по-долу.
• • •