Ux Дизайн
По-добро UX чрез микровзаимодействия
Когато проектирате продукт, има много начини за подобряване на потребителското изживяване, включително дефиниране на персони, добре структурирана информационна архитектура и внимателно написано съдържание. Но след като тази структура на високо ниво е зададена, създаването на наслада за потребителя идва в по-малкото взаимодействие подробности за дизайна .
Тези подробности, известни като микровзаимодействия , са отделни моменти в продукта, предназначени да изпълнят една-единствена задача, като същевременно засилят естествения продуктов поток. Плъзгане нагоре за опресняване на данни, харесване на съдържание или промяна на настройка са всички микровзаимодействия. Те могат да включват и прости анимации на потребителския интерфейс - например начинът, по който менюто се плъзга при докосване или картата се плъзга от екрана, когато се плъзга.
Често микровзаимодействията дори не се забелязват съзнателно от потребителя, но техните фини детайли правят продукта повече приятно и по-лесен за използване и следователно да подобри потребителското си изживяване.
Ползи от микровзаимодействията
Микровзаимодействията и анимацията на потребителския интерфейс са толкова важни, че могат да направят или разбият дизайн - или като Чарлз Иймс , за дизайн на мебели и архитектурна слава, каза:
Детайлите не са подробности. Те правят дизайна.
Някои ключови предимства от включването на микровзаимодействия в даден продукт са:
- Създаване на положителен емоционален ефект върху потребителя поради по-плавни взаимодействия с потребителския интерфейс
- Предоставяне на незабавна обратна връзка на потребителя въз основа на предприетите от тях действия
- Насочване на потребителя през приложение по по-плавен, интуитивен начин
- Насърчаване на потребителите да взаимодействат с приложение чрез отговор на известие или при споделяне на съдържание
- Предотвратяване на потребителски грешки
Най-добри практики за дизайн на микровзаимодействие
След като установихме определение и контекст около това, което правят микровзаимодействията, и дадохме пример за това как те подобряват потребителското изживяване, нека обсъдим най-добрите практики за създаване на микровзаимодействия.
Идентифицирайте и разберете проблема на потребителя
Първото правило във всеки потребителски опит дизайнът е да разкрие и разбере потребителските проблеми - не е по-различно при микровзаимодействията. Най-добрият начин да разберете от какво се нуждае потребителят е да провеждате анкети или интервюта или да наблюдавате поведението чрез проучване на потребителя. ApeeScape дизайнер Иван Анников се задълбочава в разбирането на нуждите на потребителите в статията си, “ Going Guerrilla: Достъпни съвети и алтернативи за UX изследвания . '
Поддържайте Microinteractions Natural
Целта е да се преодолее пропастта между потребителя и продукта по начини, които се чувстват интуитивни и естествени, така че избягвайте странни анимации, които се зареждат твърде дълго или могат да разсеят потребителя. Вместо това създайте дизайни, които безпроблемно се съчетават с продукта. Тънкостта е ключова за микровзаимодействията. Не оставяйте потребителя озадачен и си мисли: „Какво беше това?“
Тествайте и повторете изводите от потребителското тестване
Дори опитен дизайнери рядко получавате дизайни напълно правилно от първия опит. Ето защо използването на процес на потребителско тестване и итеративният дизайн е прост начин за намаляване на недостатъците на използваемостта преди пускането на продукта.
По време на фазата на тестване на потребителя микровзаимодействията се тестват и анализират за използваемост и се ревизират по време на следващата фаза на проектиране. Този процес се повтаря, докато проблемите с използваемостта и точките за болка не бъдат коригирани.
Следвайте структурата на микровзаимодействията
Според Дан Сафър , старши продуктов дизайнер на персонала в Twitter и авторът на „Микровзаимодействия: Проектиране с детайли“, има четири части на микровзаимодействие.
- Задействане - Тригер инициира микровзаимодействията. Един тип задействане е превключвател, който включва и изключва функционалността.
- Правила - Правило определя как микровзаимодействието реагира на задействане и определя какво се случва по време на взаимодействието. Например приложението с фенер използва бутон като спусък, който включва и изключва светлината.
- Обратна връзка - Обратната връзка казва на потребителя какво се случва по време на микровзаимодействието. Пример за обратна връзка е формуляр за регистрация с вградена проверка - цветът на контура става зелен, ако полето е попълнено правилно, и червен, ако нещо е неправилно. По този начин потребителят незабавно знае, че нещо е правилно или не.
- Цикли и режими - Цикли и режими определят мета-правилата на микровзаимодействието и как се променя микровзаимодействието при многократно използване. Например в електронната търговия бутонът „Купете го сега“ може да се промени на „Купете друг“, когато потребителят е закупил артикула преди това.
Деконструиране на дизайн за микровзаимодействие
За да покажем мисловния процес, който стои зад проектирането на микровзаимодействия, нека деконструираме микровзаимодействие чрез Google : микроинтеракция за предложение за име на файл в Гугъл документи .
Това микровзаимодействие заема първия ред на документ и предлага тази част от текста като име на документа, което прави процеса на създаване на име по-интуитивен.
Процесът на проектиране на микровзаимодействие е същият като при всяка дизайнерска задача: идентифициране на точката на болка на потребителя и фиксирането му. Като имаме предвид предишните най-добри практики, нека започнем да идентифицираме проблема.
Потребителски проблем
Лесен и интуитивен начин за организиране на документите е просто да ги назовете описателно. В повечето текстови редактори полето „Назовете вашия документ“ остава празно, въпреки че има голяма вероятност името на файла в крайна сметка да корелира със съдържанието на документа. Това е процес, на който си струва да се обърне внимание чрез микровзаимодействие.
Google’s Solution
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 прости микровзаимодействия за подобряване на вашите прототипи .
Кажете ни какво мислите! Моля, оставете вашите мисли, коментари и отзиви по-долу.
• • •
