Empty states և UX հուշումներ

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

Դատարկ վիճակը ուսուցման պահն է, ոչ միայն «տվյալներ չկան»։ Լավ empty

բացատրում է, թե ինչու է դատարկ

ցույց է տալիս, թե ինչ անել հաջորդը,

առաջարկում է ապահով առաջին քայլը,

նվազեցնում է անհանգստությունը և խնայում աջակցության ժամանակը։

2) empty-պետությունների տիոպոգիա

1. Առաջին (first-time) - օգտագործողը դեռ ոչինչ չի արել։

2. Տվյալներ չկան (zero) - իրականում չի ստեղծվել կամ փամփուշտների ցանկը։

3. Ֆիլտրերը/որոնումը (resulae), պայմանները բացառեցին ամեն ինչ։

4. Սխալ/ժամանակավոր անհասանելիությունը ցանցն է/սերվերը, բայց տվյալները սկզբունքորեն են։

5. Ոչ ճիշտ/սահմանափակումը արգելված է, պահանջվում է KUS/դեր/լիմիտ։

6. Պահպանումը պլանավորված աշխատանք է, սպասարկում։

3) Empty քարտի կառուցվածքը

Իկոնկա/նկարազարդում (մի ծանրաբեռնեք; հակաբիոտիկ AA)։

Վերնագիրը մեկ տողի մեջ. <<Այստեղ դեռ դատարկ է>>։

Պատճառն այն է, որ «Դուք դեռ չեք ավելացրել» .../« Ֆիլտրը չի գտել համընկնումներ »։

1-2 գործողություն (CTA) 'առաջնային (հիմնական սցենարը), կամայական (այլընտրանքը)։

Լինկը օգնության համար (oporational)։

Էջի մակարդակը 'պահպանեք սովորական ռոտացիան և ֆիլտրերը, մի դարձրեք էկրանը փակուղի։

html
<section class="empty" role="region" aria-labelledby="empty-title">
<svg aria-hidden="true" class="empty__icon"><!-- … --></svg>
<h2 id = "empty-title "> It's empty for now </h2>
<p> Create the first campaign or change the filters. </p>
<div class="actions">
<button class =" btn btn--primary "> Create campaign </button>
<button class =" btn btn--ghost "> Reset Filters </button>
</div>
<a class =" help" href = "/help/campaigns "> How it works </a>
</section>

4) Թոն և տեքստը (UX-copirayting)

Հստակ և բարեսիրտ։ Խուսափեք «Սխալ 0x»...

Պատճառը հետևյալն է։ «VIP ֆիլտրը» բացառեց բոլոր գրառումները։ Գցե՞ լ ֆիլտրը"։

Առանց մեղքի։ Մի մեղադրեք օգտագործողին դատարկության մեջ։

Մի միտք մի առաջարկ է։

Տեղայնացում 'խուսափեք մշակութային փոխաբերություններից։ դրեք տեքստի երկարության + 20-30 տոկոսը։

5) Նկարազարդումներ և տեսողություններ

Չեզոք, ատելի։ dark-թեմայում բարձրացրեք նկարների պայծառությունը։

Մի օգտագործեք նկարները որպես իմաստի միակ կրող։

Ֆիքսված մասշտաբը։ մի կոտրեք ցանցը և հիմնական գիծը։

6) CTA և այլընտրանքներ

Առաջնային CTA-ը հիմնական հաջորդ քայլն է (ստեղծել/դեպոզիտ/ստորագրվել)։

Արբիտրաժային '«դիտեք դեմոն», «ստանդարտ», «ֆիլտրեր նետել»։

Ընտրության սահմանը 'մինչև 2 CTA; մնացածը '«Դեռ» -ում։

Ռիսկերի/ռիսկի դեպքում թափանցիկ տեքստը հետևանքների և վերացման մասին է։

7) Դատարկ պայմանները սցենարներով

7. 1 Առաջին մեկնարկը

«Ավելացրեք վճարման մեթոդը», «Ընտրեք պրովայդերը»։

«Բաց թողեք» կոճակը + հղում d- ին։

7. 2 Տվյալներ չկան

Կարճ բացատրություն «Ինչու է դատարկ» + CTA «Ստեղծել »/« Ներխուժել»։

Հուշում. <<Կարող եք ներբեռնել CSV>> (ոսպնյակի վրա)։

7. 3 Ֆիլտրեր/որոնում

Ցույց տվեք, թե ինչ ֆիլտրեր են ակտիվ և «Խնայիր» կոճակը։

Առաջարկեք մոտիկ համընկնումներ կամ այլընտրանքային հարցումներ։

7. 4 Սխալ/անհասանելի

"Մենք բախվեցինք խնդրի հետ։ Փորձեք ավելի ուշ" + "Կրկնել "/" Համակարգի վիճակը"։