Empty states და UX მინიშნებები

1) რატომ გვჭირდება ცარიელი მდგომარეობა?

• განმარტავს, თუ რატომ არის ცარიელი
• აჩვენებს რა უნდა გააკეთოს შემდეგ
• გთავაზობთ უსაფრთხო პირველ ნაბიჯს
• ამცირებს შფოთვას და დაზოგავს დახმარების დროს.

2) იმპერიის სახელმწიფოების ტიპოლოგია

1. პირველი გაშვება (პირველი დრო) - მომხმარებელს ჯერ არაფერი გაუკეთებია.
2. არ არსებობს მონაცემები (zero data) - არსება არ შეიქმნა ან ცარიელი სია.
3. ფილტრები/ძებნა - პირობები გამორიცხავს ყველაფერს.
4. შეცდომა/დროებითი მიუწვდომლობა - ქსელი/სერვერი, მაგრამ მონაცემები პრინციპში არსებობს.
5. არ არსებობს უფლებები/შეზღუდვები - დაშვება აკრძალულია, საჭიროა KUS/როლი/ლიმიტი.
6. მოვლა - დაგეგმილი სამუშაოები, ლოდინი.

3) ბარათის სტრუქტურა

ხატი/ილუსტრაცია (არ გადატვირთოთ; კონტრასტი - AA).
სათაური ერთ სტრიქონში: „აქ ჯერ კიდევ ცარიელია“.
მიზეზი/კონტექსტი: „თქვენ ჯერ არ დაამატეთ“ .../„ ფილტრი ვერ იპოვა დამთხვევა “.
1-2 მოქმედება (CTA): პირველადი (მთავარი სცენარი), მეორადი (ალტერნატივა).
ლინკი დასახმარებლად (სურვილისამებრ).
გვერდის დონე: შეინარჩუნეთ ჩვეულებრივი ნავიგაცია და ფილტრები - არ გადააქციოთ ეკრანი ჩიხში.

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 საავტორო უფლებები)

ნათლად და მეგობრულად. თავიდან აიცილეთ „შეცდომა 0x“....

მიზეზი არის მოქმედება. VIP ფილტრი გამორიცხავს ყველა ჩანაწერს. ჩამოიბანეთ ფილტრი?"

დანაშაულის გარეშე. ნუ დაადანაშაულებთ მომხმარებელს სიცარიელეში.
ერთი აზრი ერთი წინადადებაა.
ლოკალიზაცია: თავიდან აიცილეთ კულტურული მეტაფორა; განათავსეთ ტექსტის სიგრძის + 20-30%.

5) სურათები და ვიზუალები

ნეიტრალური, დაუცველი; dark თემაში გაზარდეთ ილუსტრაციების სიმსუბუქე.
არ გამოიყენოთ ილუსტრაციები, როგორც მნიშვნელობის ერთადერთი მატარებელი.
მასშტაბი ფიქსირდება; ნუ დაარღვევთ ბადეს და საბაზო ხაზს.

6) CTA და ალტერნატივები

პირველადი CTA არის მთავარი შემდეგი ნაბიჯი (შექმნა/ანაბარი/ხელმოწერა).
მეორადი - „უყურეთ დემოს“, „იმპორტს“, „ფილტრების ჩამორთმევა“.
არჩევანის ზღვარი: 2 CTA- მდე; დანარჩენი ისევ.
რისკების/გადახდების შემთხვევაში - გამჭვირვალე ტექსტი შედეგებისა და გაუქმების შესახებ.

7) ცარიელი პირობები სცენარების მიხედვით

7. 1 პირველი გაშვება

ჰაიდ-ჩამწერი 3-5 ნაბიჯიდან: „დაამატეთ გადახდის მეთოდი“, „შეარჩიეთ პროვაიდერი“.
ღილაკი „გამოტოვეთ“ + ბმული ჰაიდზე.

7. 2 მონაცემები არ არსებობს

მოკლე ახსნა „რატომ არის ცარიელი“ + CTA „შექმნა “/„ იმპორტი“.
მინიშნება: „თქვენ შეგიძლიათ ჩამოტვირთოთ CSV“ (ლინკი შაბლონისთვის).

7. 3 ფილტრები/ძებნა

აჩვენეთ რომელი ფილტრები აქტიურია და ღილაკი „გამოტოვება“.
შესთავაზეთ ახლო დამთხვევები ან ალტერნატიული მოთხოვნები.

7. 4 შეცდომა/მიუწვდომლობა

"პრობლემას შევხვდით. შეეცადეთ მოგვიანებით" + "გაიმეოროთ "/" სისტემის სტატუსი".