Дизайн тек пикселдер мен үлгілер ғана емес. Бұл темп пен сезім. Кейбір өнімдер кинематографиялық сезінеді, өйткені олар бізді белгісіздікке, жеңілдікке, сенімділікке және тыныштыққа бағыттайды. Бұл Ағындағы эмоция. Басқалары дұрыс емес жерде әзілмен, тосын қалқымалы тереземен немесе жылдам ауысумен өз сәттерін қысқартады. Бұл жанжалдағы эмоция. Бұл тек UX идеялары емес. Оларды ойын-сауықта кез келген жерде көруге болады. Айырмашылықты сезінудің ең айқын жолы - анименің эмоционалды өзгерістерді қалай басқаратынын және Marvel және DC фильмдерінің қалай сүрінетінін салыстыру. Біз екі нақты мысалды қолданамыз, біреуі Дэн да Даннан (Netflix-тегі аниме сериясы) және екіншісі Джеймс Ганнның «Супермен» фильмінен екі ұғымды анықтау үшін, содан кейін оларды бірден қолдануға болатын практикалық өнім дизайны үлгілеріне аударамыз. Ескертпе: Біз сандық өнімдерге, соның ішінде қолданбаларға, SaaS және вебке назар аударамыз. Эмоция ағыны (аниме: Дан да Дан) Дан да Данда тональдық диапазон жабайы, қорқынышты, комедия, нәзіктік, бірақ ол ағып жатыр. Мысал: Бір доғада кейіпкерлер басты кейіпкерлердің бірінің «алтын жыныс мүшелерін» қамтитын таңғаларлық, комедиялық ізденіс үстінде (иә, шынымен), ал екіншісінде біз баласы ұрланған ананың жүрегін жаралайтын оқиғаға тартыламыз. Қағаз жүзінде бұл ауысым көлік апаты болуы керек. Экранда ол үйлесімді және эмоционалды түрде оқылады. Неліктен бұл экранда жұмыс істейді?
Үлестердің үздіксіздігі. Тіптен тітіркенген кезде де кейіпкерлердің мақсаттары мен қауіп-қатері өзгеріссіз қалады. Әзіл шағын ажыратымдылықтан кейін шиеленісті босатады; бұл қауіпті жоққа шығармайды. Көңіл-күйдің анық белгілері. Музыка, кадр, темп және кейіпкер реакциялары келесі сезімді телеграф арқылы жеткізеді. Сіз ауысымға дайындалдыңыз, сондықтан сіз жұлуға емес, онымен жүресіз. Бір эмоционалды зәкір. Қарым-қатынастар Солтүстік жұлдыз болып қала береді, сондықтан тон қозғалғанда сахнаның жүрегі жоғалмайды.
Бұл UX тіліне қалай аударылады? Жақсы өнімдер де солай істейді: дайындайды, ауыстырады, шешеді, сондықтан эмоционалды реңк өзгерген сайын пайдаланушылар суға батырылады.
Қақтығыстағы эмоция (Marvel/DC: Джеймс Ганнның супермені) Лоис пен Кларк шын жүректен, жақын әңгімелесуде, баяу, адами сәттерде, ал фонда жүгіріп келе жатқан гаг ойнайды (құбыжықтың алып бейсбол таяғымен ұрып-соғуы). Сахна нақты бірдеңені сезінуді сұрағанда, гаг назарды бірден аударады. Нәтижесінде эмоцияны босатудың орнына тесетін тональды қақтығыс пайда болады. Неліктен бұл экранда сәтсіздікке ұшырайды?
Когнитивтік жүктеменің артуы. Мұнда болып жатқан жайт когнитивті жүктеме теориясына тікелей сәйкес келеді. Көрініс (немесе интерфейс) пайдаланушылардан бірден екі бәсекелес эмоционалдық сигналды өңдеуді сұрағанда, ол сыртқы когнитивті жүктемені, тапсырмаға немесе сәттің өзіне ешқандай қатысы жоқ психикалық күш-жігерді енгізеді. Эмоционалды соққыға назар аударудың орнына, назар бір-бірін шешпейтін сигналдар арасында бөлінеді. Өнімдерде бұл әзіл-оспақ, жарнамалық акциялар немесе күтпеген UI өзгерістері маңызды сәттерде орын алған кезде болады: пайдаланушылар әрекет етуге тырысып жатқан уақытта үн мен ниетті түсіндіруге мәжбүр болады, бұл түсінуді баяулатады және стрессті арттырады. Бір уақытта бәсекелес бит.Әзіл елеулі соққының шарықтау шегін қайталайды; аудитория сезімнен гөрі қосқышқа назар аударады. Әзіл-қалжың келгенге дейін жақындықты тудыратын ешқандай ауысу жоқ, сондықтан сәт шешілгеннен гөрі қысқартылған болып көрінеді.
Бұл UX тіліне қалай аударылады? Өнімдерде бұл растау алдындағы конфетти мәселесі, ақша ағынындағы жағымсыз қате немесе маңызды тапсырманың дәл ортасында пайда болатын жарнамалық модаль. Бұл сонымен қатар когнитивті жүктемені арттырады: пайдаланушылар мәселені шешуге тырысқанда әзілді өңдеуі керек, бұл оларды баяулатады және стрессті арттырады.
Жылдам анықтамалар Flow кезіндегі эмоцияЭмоционалды ауысулар бұрынғы соққыларды шешу үшін алынған, телеграф арқылы және уақытпен белгіленген сезінеді. Конфликтке батыру. Эмоция жанды эмоционалды ырғақты тесіп жіберетін тітіркендіргіш қосқыш (немесе қатты кесу). Батыру үзілістері.
Енді біз оны атадық: бұл UX-ке қалай қосылады? Эмоциялар өнімнің есте қалуын қалай қалыптастырады Адамдар тәжірибенің орташа мәнін есіне түсірмейді; олар шыңдар мен аяқталуды есте сақтайды. Егер сіздің ағыныңыздың шыңы көңілсіздік болса немесе сіздің аяқталуыңыз бей-берекет болса, дәл солай болады. Сондықтан эмоционалды қисық сызықты мақсатты түрде жасаңыз. Эмоциялар үш қабатта өмір сүреді (Дон Норманның эмоционалдық дизайнынан) және сіздің өніміңіз оларды бір қатарға қоюы керек:
Висцеральды (ішек): Алғашқы әсер сигналдары: визуалды бейнелер, қозғалыс, гаптика, дыбыс. Мысалдар: Тұрақты қаңқа жүктегіш дірілден гөрі тыныштандырады.спиннер; жұмсақ сәтті қоңырау/гаптикалық түрту жеңіске айғайсыз жерге мүмкіндік береді; дәйекті жеңілдету/бағыт көзге не өзгергенін айтады. Мінез-құлық (орындау): Мен тапсырмамды бірқалыпты орындай аламын ба? Мұндағы үйкеліс стрессті білдіреді. Мысалдар: Болжалды прогрессі бар үш анық төлем қадамы; не болғанын және қалай қалпына келтіруге болатынын түсіндіретін қате жағдайлары; пішіннің соңындағы жарылыстардың орнына кірістірілген тексеру. Рефлексиялық (мағынасы): «Бұл тұрды ма? Мен бұған сенемін бе?» деген әңгімеден кейін өзім айтамын. Мысалдар: ұқыпты қортынды экран («Дайын. Жұмаға дейін X аласыз.») жабылады; шағын қорытынды («Сіз осы жылы €18 үнемдедіңіз») отшашусыз мақтаныш тудырады.
Микроинтеракциялар эмоционалды желім болып табылады. Олардың әрқайсысында триггер (төлеуді түртемін), ережелер (жүйе не істейді), кері байланыс (прогресс және нақты нәтиже) және циклдар немесе режимдер (пайдаланушы қайта әрекеттенсе не болады) бар. Осыларды дұрыс қабылдаңыз және сіздің ауысуларыңыз сезімдерді біріктіреді. Оларды қателесіп, олар ағынды бұзады.
Эмоционалды соққы парағы Норманның тәжірибесінің қабаттарына таза түрде сәйкес келеді:
Белгісіздік висцеральды және ерте мінез-құлық қабаттарында өмір сүреді, мұнда пайдаланушылар не болып жатқанын түсіну үшін сенсорлық белгілерге (қозғалыс, айқындық, кері байланыс) сүйенеді. Айқындық мінез-құлық деңгейінде, жүйенің ниеті мен пайдаланушының келесі әрекетінің орнында құлыпталатын сәтінде берік болады. Болжау - бұл мінез-құлық (пайдаланушы мақсатты түрде бірдеңе істеп жатыр) және рефлексиялық (пайдаланушы нәтижені болжап, әрі қарай не болатынын елестетуде) қоспасы. Жетістік – бұл рефлексиялық шың, мұнда пайдаланушы табысқа, сенімділікке және тәжірибенің «дұрыс сезілгенін» бағалайды. Calm/Closure, ең алдымен, рефлексия болып табылады, бұл пайдаланушыларға өзара әрекеттестіктің мәнін қорытындылауға және өнімнің сенімді және қайтаруға тұрарлық екенін шешуге көмектеседі.
Нақты өнімдерде бұл дәйектілік сәтсіздікке ұшыраған кезде жоғалмайды. Қателер, кідіріс және бұзылған күйлер эмоционалдық доғадан ерекшелік емес - олар оның бөлігі. Баяндау объектісі арқылы қарасақ, бұл сәттер кейіпкердің саяхатындағы кедергілер болып табылады. Жақсы ойластырылған қалпына келтіру күйі сәтсіздікті мойындайды, не болғанын түсіндіреді және жаңа эмоционалдық шуды енгізбестен келесі қадамды бағыттайды. Сәтсіздік бұзылудың орнына соққы ретінде қарастырылса, эмоционалды ағын стресс жағдайында да сақталуы мүмкін. UX мысалдары: ағындағы эмоция және жанжалдағы эмоция Ағындағы эмоция Төлем дұрыс орындалды (Stripe/Apple Pay стилі): қысқа қадамдар, нақты орындалу барысы және айқын сәтті күй (қосымша жұмсақ сенсоры бар құсбелгі). Шың (табыс) қонады, ал соңы жабуды береді (түбіртек немесе келесі қадам).
Алып кету күйі (жөнелту қолданбалары, мысалы, Uber, Free Now немесе Bolt): прогрессивті жаңартулар бағдарды сақтайды және алаңдаушылықты азайтады («Жүргізуші келеді», «2 минут жерде», «Келді»). Белгісіздік айқындыққа айналады, әрбір ауысуды дайындап жатқан жұмсақ қозғалыс.
Жанжалдағы эмоция Ескерту: Біз мұнда нақты өнімдерді атамаймыз - біз олардың артындағы жұмысты құрметтейміз. Оның орнына біз эмоционалды қақтығыстарды тудыратын үлгілерді және оларды қалай түзетуге болатынын көрсетеміз.
Маңызды сәттердегі әзілдер. Ақша/денсаулық/қауіпсіздік үшін қателіктерді көшіру. Пайдаланушылар стресске ұшырайды; юмор тітіркенуді күшейтеді. Шешім қабылдау алдындағы мереке. Растау алдында конфетти, отшашу немесе қатты дыбыстар. Кеш шарықтау шегін үзеді. Қатты күйдегі секірулер. Тосын модальдар/орта тапсырмадағы жарнамалар, дайындықсыз толық экранды қабылдау. Эмоционалды соққы кезінде кенеттен кесілгендей сезінеді.
Ағында эмоцияны қамтамасыз ету үшін не істей аласыз Мұнда көшіруге болатын толық үлгісі бар Notion беті берілген:
Эмоционалды соққы парағының үлгісі.
1. Алдымен эмоционалды соққы парағын жазыңыз Әрбір негізгі ағын үшін (қондыру, төлем, қалпына келтіру) әр қадамдағы сезімдерді картаға түсіріңіз: белгісіздік → айқындық → күту → жетістік → тыныштық. Әрбір соққыға көшіруді, қозғалысты және микроәсерлесуді тіркеңіз. (Кім эмоцияны қайда жеткізеді?) 2. Тонды тапсырма қаупімен туралаңыз Тондық матрицаны жасаңыз (қауіп деңгейі × күй). Қауіпті қателіктерде сабырлы, қарапайым және шешімге бағытталған болыңыз. Төмен қауіпті контексттер үшін ойнауды сақтаңыз. Үлгі үзінділері:
Қауіпті қате: "Сіздің жеке куәлігіңізді растай алмадық. Қайталап көріңіз немесе қолдау қызметіне хабарласыңыз." Төмен қауіпті бос күй: "Бұл жерде әлі ештеңе жоқ. Үлгіден бастағыңыз келе ме?"
Дәл осы жерде көптеген жетілген өнімдер эмоционалды қақтығыстарға үнсіз түседі. Уақыт өте келе командалар ниеттен гөрі әдеті бойынша ләззат қосады. Пайдалы өзін-өзі тексеру мынаны сұрау: егер біз осы қадамнан әрбір ойнақы немесе мерекелік элементті алып тастасақ, ағын әлі де адамгершілікті сезіне ме еді немесеүйкелісті жасыратын элементтер? Жақсы эмоционалды дизайн тәжірибені түсіндіреді; керемет эмоционалды дизайн шатасулардың орнын толтыру үшін безендіруді қажет етпейді. 3. Дизайн шыңы және мақсаты Инженер бір айқын шың (табысқа жету сәті) және бір таза шеті (растау және одан әрі не болады). Екі нүктеде де еске түсіру мен қанағаттануды өлшеңіз. 4. Микроинтеракцияларды прожектор емес, көпір ретінде пайдаланыңыз
Дайындаңыз: үлкен күй өзгерісі алдында шағын, дәйекті қозғалыс туралы кеңестер. Растау: Сәттілік аздап баяулау және қосымша жарық хаптикасы бар нәзік реттеледі. Қалпына келтіру: Қайталанатын сәтсіздік тонды жақсы күйден қолдаушыға ауыстырады және келесі қадамды бағыттайды.
5. Эмоционалды үздіксіздікке арналған тест Ыңғайлылық сессияларында «Бұл оңай болды ма?» деп сұрамаңыз. Оның орнына сіз «Бұл жерде қандай сезім өзгерді?» Деп сұрай аласыз. Егер сіз «шатасып кетті → көңілді → абдырап қалды» дегенді естісеңіз, сізде ағым емес, жанжал бар. Тек экрандарды емес, ауысуларды қайталаңыз. Қақтығыс кезінде эмоцияны қалай болдырмауға болады: жылдам тексеру тізімі Қызыл жалаулар → түзетілді:
Маңызды сәттердегі әзілдер → сабырлы, тіке тілге және нақты қалпына келтіру жолына ауысыңыз. Шешім қабылдағанға дейін мерекелеу → мерекені растаудан кейін ауыстыру; тәуекелі жоғары тапсырмалар үшін оны азайтыңыз. Қатты күйдегі секірулер → өтулерді алдын ала хабарлау; жақтауды біркелкі ұстау; үздіксіздікті сақтау үшін мағыналы қозғалысты пайдаланыңыз. Топтар арасындағы дыбыстың дрейфі → тәуекел деңгейі мен күйіне байланысты мысалдармен дауыс пен үн нұсқауларын орталықтандырыңыз.
Эмоционалдық ағымды бұзу әдейі және қажет болатын сәттер болады. Қауіпсіздік ескертулері, заңды растаулар және қауіпсіздікке қатысты маңызды ескертулер жиі тоналды күрт ауысулардан пайда көреді. Мұндай жағдайларда бұзылу маңыздылықты білдіреді және назар аударуды талап етеді. Мәселе эмоционалды қақтығыстың өзінде емес; бұл кездейсоқ қақтығыс. Дизайнерлер бұзылуды әдейі таңдағанда, пайдаланушылар қамшыны сезінудің орнына ставкаларды түсінеді. Қорытынды Үлкен тәжірибе - бұл бағытталған тәжірибе. Дан да Дан сезімдер арқылы бізді жоғалтпай қалай өту керектігін көрсетеді: ол дайындайды, ауысады және шешеді. Супермен сахнасы керісінше көрсетеді: жүрек соғуымен соқтығысқан гаг. Бұрынғысын жасаңыз. Эмоционалды соққыларыңызды картаға түсіріңіз, тонды тапсырма қаупіне сәйкестендіріңіз және пайдаланушылар ортадағы соққыны емес, дұрыс шың мен оң жақты есте сақтауы үшін микро әрекеттестіктерге сезімдерді біріктіруге мүмкіндік беріңіз.
