Сәттілік хабарламалары және эмоциялық жауап

1) Неге табыс хабарламалары қажет

UX-фидбек «табыс» (success state feedback) - бұл пайдаланушы сәтті әрекеттен кейін алатын оң кері байланыс: нысанды жіберу, төлемді аяқтау, тіркелуді растау, күйге келтіруді сақтау және т.б.
Бұл микромоменттер - UX-психологияның қуатты құралы: олар бақылау сезімін күшейтеді, күш-жігерді сыйлайды және мінез-құлық әдетін нығайтады. Мінез-құлық дизайны терминдерінде - бұл өнімге сенім мен адалдықты қалыптастыратын «фаминге дейінгі жауап беру сәті».

1. Нәтижені растайды. Пайдаланушы бәрі дұрыс аяқталғанына күмән келтірмейді.

2. Эмоция тудырады. Қуаныш, қанағаттану, аяқталу сезімі.

3. Келесі қадамды орнатады. Енді не істеуге болады - бөлісу, қайту, жалғастыру.

2) Жетістік хабарламаларының түрлері

3) Жетістіктің UX-хабарламаларының негізгі қағидаттары

1. Нақтылығы. Не сәтті болды: «Құжаттар тексерілді», «Төлем қабылданды».
2. Мазмұн. Пайдаланушының қадамын ескеріңіз: тіркеу ≠ шығару ≠ сақтау.
3. Уақтылығы. Хабар кешіктірілмей, расталғаннан кейін бірден пайда болады.
4. Қысқалығы. Мәтіннің 1-2 жолдары + түсінікті CTA.
5. Көзбен шолып бекіту. Түсі, анимациясы, «қанатшалар» белгішесі, дыбыстық немесе діріл сигналы.
6. Эмоциялық теңгерім. Егер іс-әрекет дағдылы болса, шамадан тыс «мерекеліксіз».
7. Келесі қадам. Пайдаланушыны «тұйықта» қалдырмаңыз - логикалық жалғасын ұсыныңыз.

4) Табыс хабарының құрылымы

• Тақырып (қосымша): қысқаша растау ("Дайын! ", "Сәтті сақталды").
• Мәтін: нәтижені нақтылау.
• CTA: келесі релевантты әрекет.
• Визуализация: оң нәтижені көрсететін жеңіл анимация/иконка.
• Көрсету уақыты: тост үшін 2-4 секунд немесе модальді терезені басу.

5) Әртүрлі сценарийлерге арналған паттерндер

5. 1 Тіркеу/авторизациялау

"Қош келдіңіз/дер! Тіркелгі құрылды. Растау үшін поштаны тексеріңіз"

"Сіз сәтті кірдіңіз. Тоқтаған жеріңізден жалғастырыңыз"

5. 2 Төлемдер/толықтырулар

"Төлем қабылданды! Қаражат 15 минут ішінде аударылады"

"Толықтыру сәтті өтті. Теңгерім жаңартылды"

5. 3 KYC/верификация

"Құжаттар тексерілді. Барлық мүмкіндіктер енді қол жетімді"

"Құттықтаймыз! Тіркелгіңіз толығымен расталды"

5. 4 Параметрлер/сақтау

«Өзгерістер сақталды.»

"параметрлері жаңартылды. Жаңа мәндер қайта іске қосылғаннан кейін күшіне енеді"

5. 5 Бонустар/жетістіктер

"Құттықтаймыз! Сіз 50 FS бонус алдыңыз"

"Сіз "Ойын апталығы" тапсырмасын орындадыңыз! [Сыйлық алу]"

6) Хабарламалардың эмоциялық дизайны

Табыс хабары - интерфейстің эмоциялық ландшафтының бір бөлігі. Олар жүйенің «тіршілік» сезімін қалыптастырады.

• Микроанимациялар: қанатшаның, конфетидің біртіндеп пайда болуы, жұмсақ жылтырауы.
• Түсі: жасыл/көгілдір - қауіпсіздік және қабылдау қауымдастығы.
• Дыбыс/діріл (mobile): көрнекі фазаға сәйкес келетін қысқа сигнал.
• Тон: маркетинг эйфориясының орнына тыныш сенімділік.

7) UX-теңгерім: ұтымды және эмоционалды

• Ұтымды UX: «Мен әрекеттің аяқталғанын көріп отырмын».
• Эмоциялық UX: «жүйе менің үлесімді бағалады/мен қанағаттанамын».

• күнделікті әрекеттер → бейтарап-оң сигналдар;
• маңызды жетістіктер → эмоциялық екпін (иллюстрация, дыбыс, бонус).

Ең бастысы - «әсердің» мәнін өзгертпеу: эмоция алаңдатпай, табысты түсінуді күшейтуі тиіс.

8) Эмоцияларды оқшаулау және мәдениет

Әр тілде қуаныш пен «формальдылық» әр түрлі көрінеді.
Ағылшын тіліндегі «Well done!» әрине; неміс тілінде «Erfolgreich abgeschlossen».
Түрік және араб тілдерінде көп жағдайда шектен тыс айқайлардан қашады.
Жергілікті жерлерде маңызды: жолдардың ұзындығы бірдей, эмоцияның күші бірдей.
Аудармашылар үшін tone-map сақтаңыз: сценарийлер бойынша рұқсат етілген «қуаныш» деңгейлері.

9) Тиімділік метрикасы

CTR бойынша CTA сәтті хабар (қанша пайдаланушы одан әрі барады).
Реакция уақыты: хабарлама авто-жасырудан бұрын жабыла ма.
Қайталанған әрекеттер саны (функцияны қайталап пайдалану).
Келесі қадамдағы қателер деңгейі - фидбектің айқындылық көрсеткіші.
UX-сұхбат: "Әрекеттің аяқталғанын түсіндіңіз бе? ”.

• Сөз тіркестерінің вариациялары («Дайын» vs «Сәтті орындалды»).
• Иллюстрацияның/иконаның болуы.
• CTA болуы.
• Эмоционалдық тон (бейтарап vs қолдау).

10) Қарсы үлгілер

Ағынды бұғаттайтын шамадан тыс жүктелген анимациялар.
Маңызды қадамдардағы артық қуанышты немесе «балалар» үні.
Нені аяқтағаны көрсетілмеген бейтарап «ОК».
Егер анық жалғасы болса, CTA жоқ хабар.
Түстің мәртебеге сәйкес келмеуі (мысалы, табысты болғанда қызыл түс).
Ұзақ операциялар кезінде растаудың болмауы (пайдаланушы сенімді емес).

11) Шығарылым алдындағы чек-парақ

• Әрекеттің аяқталғаны анық ма?
• Нақты не орындалды?
• Хабар артық эмоцияларды тудырмай ма?
• Келесі қадам үшін CTA бар ма?
• Түсі мен белгішесі жетістік үлгісіне сәйкес келе ме?
• Хабар 2-4 секундта (немесе әрекетке дейін) көрінеді ме?
• Қараңғы тақырып пен ұялы телефондарда тексерілді ме?
• Локализация мағынасы мен үнін өзгерткен жоқ па?

12) «дейін/кейін» мысалдары

• Дейін: «Жарайды»
• Кейін: "+ Төлем қабылданды! Қаражат шотқа аударылды. [Тарихты көру]"

• Дейін: «Тіркеу аяқталды»
• "Қош келдіңіздер! Тіркелгі құрылды. Растау үшін поштаны тексеріңіз"

• Дейін: «Өзгерістер сақталды»
• Кейін: "+ Параметрлер жаңартылды. Жаңа параметрлер қолданылған"

• Дейін: «Құжаттар тексерілді»
• Кейін: "+ Бәрі дайын! Тексеру өтті. Енді қорытындылар мен бонустар қолжетімді"

13) Дизайн жүйесі үшін үлгі

jsx
<SuccessMessage title = "Done!"
message =" Your payment was successful."
icon="check-circle"
duration={3000}
primaryAction = {{label: "View history," onClick: openHistory}}
tone="positive"
/>

14) Жылдам сөз тіркестері

Қысқаша шпаргалка

Табысты растаңыз.
Жеңіл эмоцияны қосыңыз - артық ойнамай.
Позитивті көзбен шолып және мәтінмен белгілеңіз.
Келесі қадамды ұсыныңыз.
Жылдамдықты, оқылуды және мәдени теңгерімді тексеріңіз.