Дызайн - гэта не толькі пікселі і ўзоры. Гэта таксама тэмп і пачуцці. Некаторыя прадукты выглядаюць кінематаграфічнымі, калі праводзяць нас праз няўпэўненасць, палёгку, упэўненасць і спакой, не тузаючы. Гэта Emotion in Flow. Іншыя скарачаюць свае ўласныя моманты жартам у неналежным месцы, нечаканым усплываючым акном або рэзкім пераходам. Гэта эмоцыі ў канфлікце. Гэта ідэі не толькі для UX. Вы можаце ўбачыць іх усюды ў забаўляльных установах. І самы дакладны спосаб адчуць розніцу - параўнаць, як анімэ спраўляецца з эмацыянальнымі зрухамі і як спатыкаюцца фільмы Marvel і DC. Мы выкарыстаем два канкрэтныя прыклады, адзін з Dan da Dan (анімэ-серыял на Netflix) і адзін з фільма Джэймса Ганна «Супермэн», каб вызначыць гэтыя дзве канцэпцыі, а затым перавядзём іх у практычныя шаблоны дызайну прадукту, якія можна адразу прымяніць. Заўвага: мы сканцэнтруемся на лічбавых прадуктах, у тым ліку праграмах, SaaS і вэб. Эмоцыі ў плыні (анімэ: Dan da Dan) У Dan da Dan танальны дыяпазон дзікі, жах, камедыя, пяшчота, але ён цячэ. Прыклад: у адной арцы героі знаходзяцца ў дзіўным камедыйным квэсты з удзелам «залатых геніталій» аднаго з галоўных герояў (так, сапраўды), а ў другой мы ўцягнутыя ў душэўную гісторыю маці, чыё дзіця выкралі. На паперы гэты зрух павінен быць аўтакатастрофай. На экране ён звязны і эмацыянальна разборлівы. Чаму гэта працуе на экране?
Бесперапыннасць ставак. Нават калі трапляецца кляп, мэты і небяспека персанажаў застаюцца некранутымі. Гумар здымае напружанне пасля міні-дазволу; гэта не адмаўляе пагрозу. Ясныя сігналы настрою. Музыка, апраўленне, тэмп і рэакцыя персанажаў выклікаюць наступнае пачуццё. Вы падрыхтаваны да змены, таму лепш едзеце, чым вас тузануць. Адзін эмацыянальны якар. Адносіны застаюцца Палярнай зоркай, таму сутнасць сцэны не губляецца пры змене тону.
Як гэта перакладаецца на UX? Добрыя прадукты робяць тое ж самае: падрыхтоўка, пераход, рашэнне, так што карыстальнікі застаюцца пагружанымі, калі эмацыйны тон змяняецца.
Эмоцыі ў канфлікце (Marvel/DC: Супермэн Джэймса Ганна) Лоіс і Кларк вядуць шчырую, інтымную размову, павольны, чалавечы момант, у той час як на заднім плане гучыць бягучы кляп (монстра, якога збіваюць гіганцкай бейсбольнай бітай). Гэг крадзе ўвагу адразу, калі сцэна просіць вас адчуць нешта сапраўднае. У выніку атрымліваецца тонкае сутыкненне, якое прабівае эмоцыю, а не вызваляе яе. Чаму гэта не атрымліваецца на экране?
Падвышаная кагнітыўная нагрузка. Тое, што тут адбываецца, непасрэдна адпавядае тэорыі кагнітыўнай нагрузкі. Калі сцэна (або інтэрфейс) просіць карыстальнікаў апрацаваць два канкуруючыя эмацыянальныя сігналы адначасова, гэта ўводзіць староннія кагнітыўныя нагрузкі, разумовыя намаганні, якія не маюць нічога агульнага з задачай або момантам. Замест таго, каб засяродзіцца на эмацыйным рытме, увага размяркоўваецца паміж сігналамі, якія не вырашаюць адзін аднаго. У прадуктах гэта тое, што адбываецца, калі гумар, акцыі або нечаканыя змены карыстальніцкага інтэрфейсу ўрываюцца ў важныя моманты: карыстальнікі вымушаныя інтэрпрэтаваць тон і намер у той жа час, калі яны спрабуюць дзейнічаць, што запавольвае разуменне і павялічвае стрэс. Канкуруючыя рытмы адначасова. Жарт перакрывае кульмінацыю сур'ёзнага рытму; аўдыторыя звяртае ўвагу на пераключэнне, а не на пачуццё. Ніякага танальнага пераключэння. Няма пераходу, які стварае блізкасць да таго, як з'явіцца гумар, таму гэты момант хутчэй здаецца недарэчным, чым вырашаным.
Як гэта перакладаецца на UX? У прадуктах гэта праблема канфеці перад пацвярджэннем, дзёрзкая памылка ў грашовым патоку або рэкламны рэжым, які з'яўляецца прама ў цэнтры важнай задачы. Гэта таксама павялічвае кагнітыўную нагрузку: карыстальнікі павінны апрацоўваць гумар, спрабуючы вырашыць праблему, што запавольвае іх працу і павялічвае стрэс.
Хуткія азначэнні Эмоцыі ў FlowEmotional зрухі адчуваюць сябе заслужанымі, тэлеграфнымі і прымеркаванымі, каб яны вырашалі папярэднія ўдары. Пагружэнне трымаецца. Эмоцыя ў канфлікце Рэзкі пераключальнік (або цвёрдая рэзкасць), які прабівае жывы эмацыйны рытм. Перапынкі на апусканне.
Цяпер, калі мы назвалі гэта: як гэта звязана з UX? Як эмоцыі фармуюць запамінальнасць прадукту Людзі не памятаюць сярэдні вопыт; яны памятаюць вяршыні і канцоўку. Калі пік вашага патоку - гэта расчараванне або ваш канец бязладны, гэта тое, што застаецца. Так што распрацуйце эмацыянальную крывую наўмысна. Эмоцыі жывуць на трох слаях (з Emotional Design Дона Нормана), і ваш прадукт павінен іх выбудоўваць:
Вісцаральная (кішачнік): сігналы першага ўражання: візуальныя выявы, рух, тактыльныя адчуванні, гук. Прыклады: устойлівы загрузчык шкілета супакойвае больш, чым нервовыблешня; мяккі гук поспеху/тактыльны націск дазваляе выйгрышу прызямліцца без крыкаў; паслядоўнае паслабленне/кірунак паказвае воку, што змянілася. Паводніцкі (выкананне): Ці магу я выканаць сваю задачу гладка? Трэнне тут азначае стрэс. Прыклады: тры дакладныя этапы аплаты з прадказальным прагрэсам; стану памылак, якія тлумачаць, што здарылася і як аднавіць; убудаваная праверка замест выбухаў у канцы формы. Які адлюстроўвае (значыць): гісторыя, якую я распавядаю сабе пасля: "Ці варта было гэта таго? Ці давяраю я гэтаму?" невялікае рэзюмэ («Вы зэканомілі €18 у гэтым годзе») выклікае гонар без феерверкаў.
Мікраўзаемадзеянне - гэта эмацыйны клей. Кожны з іх мае трыгер (я націскаю «Аплаціць»), правілы (што робіць сістэма), зваротную сувязь (прагрэс і дакладны вынік) і цыклы або рэжымы (што адбудзецца, калі карыстальнік паспрабуе яшчэ раз). Зрабіце гэта правільна, і вашы пераходы пераадолеюць пачуцці. Зразумейце іх няправільна, і яны парушаюць паток.
Эмацыйны біт-ліст дакладна адлюстроўвае ўзровень вопыту Нормана:
Няўпэўненасць жыве ва ўнутраным і раннім паводніцкіх пластах, дзе карыстальнікі спадзяюцца на сэнсарныя сігналы (рух, яснасць, зваротная сувязь), каб зразумець, што адбываецца. Яснасць моцна ўваходзіць у паводніцкі ўзровень, у той момант, калі намер сістэмы і наступнае дзеянне карыстальніка звязваюцца. Прадчуванне - гэта сумесь паводніцкіх (карыстальнік робіць нешта мэтанакіравана) і рэфлексіўнага (карыстальнік ужо прадказвае вынік і ўяўляе, што будзе далей). Дасягненне - гэта рэфлексіўная вяршыня, дзе карыстальнік ацэньвае поспех, давер і тое, ці "адчуваў сябе правільным" вопыт. Calm/Closure у першую чаргу адлюстроўвае, дапамагаючы карыстальнікам зразумець сэнс узаемадзеяння і вырашыць, ці варты прадукт даверу і ці варта да яго вяртацца.
У рэальных прадуктах гэтая паслядоўнасць не знікае, калі нешта ідзе не так. Памылкі, затрымкі і дэградаваныя стану не з'яўляюцца выключэннем з эмацыйнай дугі - яны з'яўляюцца яе часткай. Гледзячы праз прызму апавядання, гэтыя моманты з'яўляюцца перашкодамі на шляху героя. Добра спланаваны стан выздараўлення прызнае няўдачу, удакладняе, што здарылася, і накіроўвае да наступнага кроку, не ўносячы новага эмацыйнага шуму. Калі да няўдачы ставяцца як да ўдару, а не да разрыву, эмацыйны паток можна захаваць нават у стрэсе. Прыклады UX: эмоцыі ў плыні супраць эмоцый у канфлікце Эмоцыі ў плыні Афармленне аплаты зроблена правільна (стыль Stripe/Apple Pay): кароткія крокі, выразны прагрэс і дакладны стан паспяховасці (галачка з дадатковым мяккім тактыльным сігналам). Пік (поспех) прызямляецца, а канец дае закрыццё (атрыманне або наступны крок).
Статус самавывазу (праграмы для выкліку паездкі, напрыклад, Uber, Free Now або Bolt): прагрэсіўныя абнаўленні падтрымліваюць арыентацыю і зніжаюць трывогу («Кіроўца прыбыў», «2 хвіліны», «Прыбыў»). Няўпэўненасць ператвараецца ў яснасць, а мяккі рух рыхтуе кожны пераход.
Эмоцыі ў канфлікце Заўвага: мы не называем тут канкрэтныя прадукты — мы паважаем працу, якая стаіць за імі. Замест гэтага мы паказваем шаблоны, якія выклікаюць эмацыянальны канфлікт, і тое, як іх выправіць.
Жарты ў сур'ёзныя моманты. Нахабныя копіі памылак для грошай/здароўя/бяспекі. Карыстальнікі знаходзяцца ў стрэсе; гумар ўзмацняе раздражненне. Святкаванне перад рашэннем. Канфеці, феерверкі або гучныя гукі перад пацвярджэннем. Вечарына перапыняе кульмінацыю. Скачкі ў цяжкім стане. Нечаканыя мадыфікацыі/рэкламы ў сярэдзіне задачы, поўнаэкранныя захопы без падрыхтоўкі. Адчуваецца, як рэзкі перапынак падчас эмацыйнага рытму.
Што вы можаце зрабіць, каб забяспечыць паток эмоцый Вось старонка Notion з поўным шаблонам, які можна дубляваць:
Шаблон для эмацыйнага рытму.
1. Спачатку напішыце эмацыйны аркуш Для кожнай асноўнай плыні (падрыхтоўка, аплата, аднаўленне) адзначце адчуванні за крок: няўпэўненасць → яснасць → чаканне → дасягненне → спакой. Дадайце копію, рух і мікраўзаемадзеянне да кожнага такту. (Хто куды нясе эмоцыю?) 2. Сумясціце тон з рызыкай задачы Стварыце матрыцу тонаў (узровень рызыкі × стан). Пры памылках з высокай рызыкай будзьце спакойныя, адкрытыя і арыентаваныя на рашэнні. Захавайце гуллівасць для кантэкстаў з нізкім узроўнем рызыкі. Фрагменты шаблонаў:
Памылка высокай рызыкі: «Мы не змаглі спраўдзіць вашу асобу. Паўтарыце спробу або звярніцеся ў службу падтрымкі». Пусты стан з нізкім узроўнем рызыкі: "Пакуль нічога. Хочаце пачаць з узору?"
Тут многія сталыя прадукты ціха пераходзяць у эмацыйны канфлікт. З часам каманды дадаюць задавальненне па звычцы, а не па намеру. Карысная самаправерка - спытаць: калі б мы выдалілі кожны гуллівы або святочны элемент з гэтага кроку, ці адчуваўся б паток гуманным - цітыя элементы, якія маскіруюць трэнне? Добры эмацыйны дызайн удакладняе вопыт; выдатны эмацыйны дызайн не патрабуе ўпрыгожванняў, каб кампенсаваць блытаніну. 3. Дызайн пік і канец наўмысна Стварыце адзін выразны пік (момант поспеху) і адзін чысты канец (пацверджанне і тое, што будзе далей). Вымерайце запамінанне і задаволенасць у абодвух пунктах. 4. Выкарыстоўвайце мікраўзаемадзеянне ў якасці мастоў, а не пражэктараў
Падрыхтоўка: невялікія паслядоўныя падказкі руху перад вялікай зменай стану. Пацверджанне: поспех атрымлівае тонкую ўстаноўку, з крыху больш павольным паслабленнем і дадатковым лёгкім тактыльным адчуваннем. Аднаўленне: паўторная няўдача вытанчана змяняе тон з бадзёрага на падтрымку і накіроўвае да наступнага кроку.
5. Тэст на эмацыйную пераемнасць Падчас заняткаў па юзабіліці не проста пытайцеся: "Гэта было лёгка?" Замест гэтага вы можаце спытаць: "Якое пачуццё тут змянілася?" Калі вы чуеце «збянтэжаны → забаўлены → збіты з панталыку», у вас канфлікт, а не паток. Ітэрацыя пераходаў, а не толькі экранаў. Як пазбегнуць эмоцый у канфлікце: хуткі кантрольны спіс Чырвоныя сцягі → выпраўленні:
Жарты ў сур'ёзныя моманты → заменіце на спакойную, прамую мову і выразны шлях выздараўлення. Святкаванне перад дазволам → перанесці святкаванне пасля пацверджання; змякчыць яго для задач высокай рызыкі. Пераходы ў цвёрдым стане → пераходы з папярэднім аб'явай; захоўвайце паслядоўнасць апраўлення; выкарыстоўваць значны рух, каб захаваць пераемнасць. Дрэйф тону паміж камандамі → цэнтралізуйце рэкамендацыі па голасе і тону з прыкладамі для ўзроўню рызыкі і стану.
Бываюць моманты, калі перапынак эмацыйнага патоку наўмысны і неабходны. Папярэджанні бяспекі, юрыдычныя пацверджанні і важныя для бяспекі абвесткі часта прыносяць карысць ад рэзкіх змяненняў тону. У гэтых выпадках зрыў сведчыць аб важнасці і патрабуе ўвагі. Праблема не ў самім эмацыйным канфлікце; гэта выпадковы канфлікт. Калі дызайнеры наўмысна выбіраюць зрыў, карыстальнікі разумеюць стаўкі замест таго, каб адчуваць удар хлыстом. Заключэнне Вялікі вопыт - гэта накіраваны вопыт. Dan da Dan паказвае, як рухацца праз пачуцці, не губляючы нас: ён рыхтуе, пераходзіць і вырашае. Сцэна Супермэна паказвае адваротнае: кляп сутыкаецца з шчырым біццём сэрца. Зрабіце першае. Адлюструйце свае эмацыянальныя ўдары, настройце тон на рызыку выканання задачы і дазвольце мікраўзаемадзеянням пераадолець пачуцці, каб карыстальнікі запомнілі правільны пік і правільны канец, а не ўдар хлыстом пасярэдзіне.
