UX ֆիդբեքը դատարկ պայմաններում

1) Ի՞ նչ է դատարկ վիճակը, և ինչո՞ ւ են դրանք անհրաժեշտ

Դատարկ վիճակը էկրան է/տեսանելի, որտեղ հիմնական բովանդակությունը ժամանակավորապես բացակայում է, մինչև առաջին գործողությունը, մաքրումից հետո, զրոյական արդյունքով, բեռնման սխալով, ճիշտ/հասանելիության բացակայության դեպքում։

Դատարկ վիճակի նպատակները

«Ինչու՞ այստեղ դատարկ է»։

ցույց տալ արժեքները։

առաջարկել հստակ հաջորդ քայլը (կամ մի քանիսը ընտրության համար);

նվազեցնել անհանգստությունը և կանխել հեռանալը։

Լավ դատարկ վիճակ = ենթատեքստ + օգուտներ + գործողություն։

2) Դատարկ պետությունների տիոգիա

1. Առաջնային զրո (first-time empty), օգտագործողը դեռ ոչինչ չի ստեղծել/չի տրամադրվել։

2. Զրոյական որոնում/ֆիլտրում, հարցումը արդյունք չի տվել։

3. Ժամանակավոր դատարկություն 'տվյալները բեռնվում են կամ հերթը կատարվում է։

4. Սահմանափակում/իրավունք 'չկա հասանելիություն, բավարար չէ ստուգման մակարդակը։

5. Մաքրված է օգտագործողին 'զամբյուղը/պատմությունը մաքրված է։

6. Տեխնիկական խնդիրներ 'ցանցի/ցանցի ձախողում, ռետրա։

3) Դիզայնի սկզբունքները

Համատեքստություն 'խոսում ենք դատարկության կոնկրետ պատճառի մասին։

Արժեքն իրականացվում է գործողությամբ 'սկզբում ինչու է այս բաժինը, ապա ինչ անել։

Մեկ հիմնական CTA 'անհրաժեշտության դեպքում' ստացիոնար (learn more/FAQ)։

Հակիրճ և հստակեցում ՝ 1-2 նախադասություն + պարզ կոճակ։

Տեսողական առանցքը 'իկոնկա/նկարազարդումը իմաստն է, չի շեղում։

Փակուղիների կանխումը 'միշտ կա առաջ ճանապարհ։

Tona-ի համաձայն 'ընկերական և հանգիստ։ առանց կատակների կրիտիկական քայլերում (վճարումներ, անվտանգություն)։

A1y-ը և տեղայնացումը 'կարդալով սկրինիդեր, ճիշտ հակված, հաշվի է առնում տողերի երկարությունը։

4) Դատարկ վիճակի շրջանակը (ձևանմուշ)

Վերնագիրը (oporational, 1 տող) արժեքն կամ պատճառն է։

Տեքստը (1-2 նախադասություն) "ինչու է դատարկ +" ինչ է հաջորդը "։

Առաջնային CTA-ը հիմնական նպատակային գործողությունն է։

ՍՏԱ/հղում - օգնություն/կանոններ/։

Տեսողությունը (պարտադիր չէ) 24-96 px-ի թեթև նկարն է, մի ծանրաբեռնեք։

Ձևանմուշներ

5) Patterns-ը սցենարներով

5. 1 Onbording/առաջին զրո

Նպատակը 'բերել առաջին հաջողակ գործողությունը։

Տեքստը ՝ «Անձնական առաջարկություններ տեսնելու, լրացրեք պրոֆիլը և ընտրեք հետաքրքրությունները»։

CTA: «Լրացնել պրոֆիլը »/« Ընտրել շահերը»։

Խորհուրդ 'ավելացրեք ջանքերի/ժամանակի միկրո ցուցիչը. <<Դա կտևի 361 րոպե>>։

5. 2 Որոնում/ֆիլտրեր = զրոյական արդյունք

Նպատակը 'օգնել կարգավորել հարցումը։

Տեքստը. <<Ոչինչ չի հայտնաբերվել>>։ Փորձեք «blackjack» կամ հեռացնել «Պրովայդեր: X» ֆիլտրը։

CTA '«Խնայիր ֆիլտրերը» ստացիոնար' «Բացել կատալոգը»։

5. 3 Վճարումներ/դրամապանակ դատարկ

Նպատակը 'խթանել մեթոդի ավելացումը/առաջին համալրումը։

Տեքստը ՝ «Պահպանեք վճարման մեթոդը 'համալրումը և եզրակացությունները ավելի արագ կանցնեն»։

CTA: «Ավելացրեք վճարման մեթոդը» բյուջետային ՝ «Կանոններ և վճարումներ»։

5. 4 Վերիֆիկացում/հասանելիություն

Նպատակը 'թափանցիկ բացատրել սահմանափակումն ու հեռացման ճանապարհը։

Տեքստը ՝ "Այս բաժինը հասանելի է անհատականության հաստատումից հետո։ Սովորաբար դա տևում է մինչև 2 րոպե"։

CTA '«Անցնել հավատալիքները» ոչ պաշտոնական. <<Ինչու՞ է դա անհրաժեշտ>>։

5. 5 Տվյալներ ճանապարհին/ժամանակավոր դատարկ

Նպատակը 'նվազեցնել սպասման անհանգստությունը։

Տեքստը ․ "Մենք հավաքում ենք ձեր տվյալները։ Սովորաբար դա տևում է մինչև 30 վայրկյան։ Կարող եք թողնել էջը, մենք կսովորենք, երբ ամեն ինչ պատրաստ լինի"։

CTA '«Պարզ» ոչ պաշտոնական. <<Ի՞ նչ կլինի հետո>>։

5. 6 Մաքրումից հետո/2019

Նպատակը 'հաստատել գործողությունը և առաջարկել հաջորդ քայլը։

Տեքստը ՝ "Պատմությունը մաքրված է։ Նոր վիրահատությունները կհայտնվեն հաջորդ համալրումից հետո"։

CTA '«Համալրեք հաշիվը»։

5. 7 Սխալ/retray

Նպատակը 'վերականգնման պարզ ճանապարհ։

Տեքստը ՝ "Չհաջողվեց հավաքել տվյալները։ Ռուսական ցանցը կամ փորձել"։

CTA: «Կրկնել» հիբրիդային '«Համակարգի վիճակը»։

6) Միկրո տեքստեր 'պատրաստի ձևանմուշներ

Առաջին զրո (կատալոգը/ընտրված)

"Այստեղ կհայտնվեն ընտրված խաղեր, երբ ավելացնեք առաջինը։ [Ավելացնել ընտրված]"

Փնտրել

«Իմ query com» -ի խնդրանքով ոչինչ չկար։ Նշեք հարցումը կամ ֆիլտրերը։ [Գցեք ֆիլտրերը]"

Դրամապանակ/վճարումներ

"Դուք դեռ չունեք պահպանված մեթոդներ։ Ավելացնել քարտեզը կամ դրամապանակը, որպեսզի արագացնի վճարումները։ [Ավելացնել մեթոդը]"

Հասանելիություն/հավատարմագրում

"Ֆունկցիան անհասանելի է առանց տարիքի հաստատման։ Դա կպահանջի 242 րոպե։ [Հաստատել տարիքը] [Ինչու՞ է դա անհրաժեշտ]"։

Ժամանակավոր դատարկություն

"Մենք համարում ենք վիճակագրությունը վերջին 24 ժամվա ընթացքում... Սովորաբար դա մինչև 30 վայրկյան է։ Մենք ցույց կտանք ծանուցում, երբ ամեն ինչ պատրաստ է"։

Ձախողումներ

"Ծառայությունը անհասանելի է։ Մենք արդեն մաքրում ենք։ Փորձեք ավելի ուշ կամ ռուսական կարգավիճակը։ [Կրկնել] [Համակարգի կարգավիճակը]"

7) Տեսողական լեզուն և նկարագրությունը

Օգտագործեք թեթև մոնոխրոմային/երկու գունավոր նկարներ, որպեսզի չխոսեն CTA-ի հետ։

Չափերն ու նահանջները բովանդակության քարտի (տեսողական համաձայնություն) նման են։

Մի պատկերացրեք հումորային տեսարաններ սթրեսային սցենարներում (108/անվտանգություն)։

8) Տեղայնացումը և հասանելիությունը

Տեղադրեք երկար տողերի (DE/TR ավելի երկար)։

Թարգմանեք թվային վճարները, արժույթը, ամսաթվերը տեղական։

Սկրինդերների համար ՝ role = «status», aria-104 = «polite/assertive» դինամիկայի համար։

Իմաստը մի դրեք միայն պատկերի մեջ 'կրկնօրինակեք տեքստը։

Ստուգեք ընթերցանությունը 320 px-ով և WCAG-ի հակադրությամբ։

9) Մետրիկի և փորձարկումների

Հիմնական մետրերը

CTR-ը դատարկ վիճակում CTA-ի գլխավոր վիճակով։

հակադարձում «առաջին հաջողության» (activation event);

ժամանակը մինչև առաջին գործողությունը.

էկրանի հաճախականությունը առանց առաջընթացի;

զրոյական որոնման արդյունքների մասնաբաժինը;

դիմումներ 'ի պաշտպանություն սցենարի։

A/B գաղափարները

հատուկ vs ընդհանուր վերնագիր;

CTA-բայը vs գործողության չեզոք է։

ժամանակի գնահատման ավելացում;

ստացիոնար CTA (FAQ) և կոճակների կարգը։

պատկերացում vs icon vs առանց տեսողության։

10) Anti-patternes

«Այստեղ դատարկ է» առանց բացատրության և բացատրության։

Կատակները կրիտիկական քայլերում (ռուսական, անվտանգություն)։

Մեկ CTA «Ավելին իմանալ» առանց համատեքստի։

Պասիվ գրավը '«պետք է ավելացվի»։ Գրեք ակտիվ '«Ավելացրեք»...

Երկար պարբերություններ ՝ 1-2 նախադասություն առավելագույնը։

Պլեյշոլդերը պիտակի փոխարեն ձևերով վատացնում է A1y-ը և հասկացողությունը։

Թաքնված սահմանափակումները («անմիջապես», չնայած հնարավոր է ուշացում)։

11) Չեկի թուղթը նախքան թողարկումը

• Հասկանալի է, թե ինչու է դատարկ։
• Մի նախադասության արժեքը կա՞։
• Կա մեկ հիմնական CTA, և եթե անհրաժեշտ է, ստացիոնար։
• Տեքստը կարճ է (140 նիշ) և կոնկրետ։
• Ավելացված է ժամանակի/ջանքերի գնահատումը, եթե տեղին է։
• Թոնը համապատասխանում է սցենարին (հանգիստ/աջակցող)։
• Ստուգված է տեղայնացումը և A1y (aria-ատրիբուտներ, հակադրություն)։
• Պատկերը չի գերակշռում CTA-ի վրա։

12) «Մինչև/հետո» օրինակները

Խաղերի կատալոգ (առաջին զրո)

«Այստեղ դեռ ոչինչ չկա»

Հետո ․ "Հավաքեք ձեր ժապավենը։ Ընտրեք 3 սիրելի ժանր, եկեք սկսենք խորհուրդ տալ։ [Ընտրել ժանրեր]"

Զրոյական որոնում

Առաջ ՝ «Ոչինչ չի հայտնաբերվել»

Հետո '«high-limit roulette» արդյունքներ չկան։ Հանեք «High-limit» ֆիլտրը կամ փորձեք «roulette»։ [Գցեք ֆիլտրերը]"

Վճարումներ

Մինչ «Վճարման մեթոդներ չկան»

Հետո. <<Պահպանեք քարտեզը կամ դրամապանակը 'համալրումը և եզրակացությունները ավելի արագ կդառնան։ [Ավելացնել մեթոդը] [Մոսկվան և ժամանակը]"

Վերիֆիկացում

Առաջ ՝ «Ոչ մի հասանելիություն»

Հետո. <<Բաժինը հասանելի է անհատականության հաստատումից հետո։ Դա տևում է 242 րոպե։ [Հավատալ] [Ինչու՞ է դա կարևոր]"

13) Դիզայնի համակարգ կառուցելը

Ավելացրեք UI-kite բաղադրիչները EmptyState-ի բաղադրիչներով 'բացթողումներով

«title» (տող, oporational)

«body» (կարճ տեքստը 1-2 նախադասություն)

`primaryAction { label, onClick }`

`secondaryAction { label, href/onClick }`

«icon/illustration» (oporation)

Պահեք տեքստերը i18n ֆայլերի կողքին, աջակցեք բանալիները և նկարագրությունները, միացրեք tone-map (տոն և բառապաշար իրավիճակներում)։

14) Արագ դիզայներ (պատճենել և օգտագործել)

Express 1 - Առաջին nul

Վերնագիր ՝ «Սկսեք առաջին հոդվածից»

Տեքստը ․ «Այստեղ առաջարկություններ կլինեն, հենց որ ընտրեք հետաքրքրությունները»։

CTA '«Ընտրել շահերը»

Ոչ պաշտոնական. <<Ինչպե՞ ս է դա աշխատում>>։

Express 2 - Որոնում

Տեքստը: <<Համաձայն>> ոչինչ չկար։ Խնայեք ֆիլտրերը կամ պարզաբանեք հարցումը"։

CTA '«Խնայիր ֆիլտրերը»

Արբիտրաժային ՝ «Կատալոգ»

Express 3 - Կլյուչի ֆունկցիան արգելափակված է

Տեքստը ՝ "Ֆունկցիան հասանելի է տարիքը հաստատելուց հետո։ Սովորաբար սա մինչև երկու րոպե է"։

CTA '«Հաստատել տարիքը»

Ոչ պաշտոնական. <<Ինչո՞ ւ է դա անհրաժեշտ>>։

Express 4 - Տվյալները ճանապարհին

Տեքստը ՝ "Մենք հավաքում ենք տվյալները օրվա ընթացքում։ Սովորաբար դա մինչև 30 վայրկյան է։ Մենք կխոսենք, երբ ամեն ինչ պատրաստ է"։

CTA: «Լավ»

Ալյումինե գնդակը

Համատեքստը + արժեքը + գործողությունը մեկ «ոտքի» մեջ է։

Մեկ հիմնական CTA առանց տեսողական քաշի մրցակցության։

Կարճ և հատուկ '1-2 նախադասություն։

Միշտ դուրս է գալիս փակուղուց 'չկա փակուղային էկրաններ։

Տեղայնացումը և A1y-ը տեղադրված են բաղադրիչի մակարդակում։