UX ფიტბეკი ცარიელ მდგომარეობაში

1) რა არის ცარიელი მდგომარეობა და რატომ არის ეს აუცილებელი?

ცარიელი მდგომარეობა არის ეკრანი/ვიჯეტი, სადაც მთავარი შინაარსი დროებით არ არსებობს: პირველ მოქმედებამდე, გაწმენდის შემდეგ, ნულოვანი შედეგით, დატვირთვის შეცდომით, უფლებების/დაშვების არარსებობის შემთხვევაში.

• ახსნა „რატომ არის ცარიელი აქ“;
• აჩვენეთ განყოფილების ღირებულება;
• შესთავაზეთ მკაფიო შემდეგი ნაბიჯი (ან ოდნავ არჩევანი);
• შეამცირეთ შფოთვა და თავიდან აიცილეთ ზრუნვა.

კარგი ცარიელი მდგომარეობა = კონტექსტი + სარგებელი + მოქმედება.

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

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

3) დიზაინის პრინციპები

კონტექსტი: ჩვენ ვსაუბრობთ სიცარიელის კონკრეტულ მიზეზზე.
ღირებულება - მოქმედება: ჯერ რატომ არის ეს განყოფილება, შემდეგ რა უნდა გავაკეთოთ.
ერთი მთავარი CTA: საჭიროების შემთხვევაში - მეორადი (learn more/FAQ).
მოკლე და სპეციფიკა: 1-2 წინადადება + მკაფიო ღილაკი.
ვიზუალური მხარდაჭერა: ხატი/ილუსტრაცია მხარს უჭერს მნიშვნელობას, არ ყურადღებას აქცევს.
ჩიხების თავიდან აცილება: ყოველთვის არის წინსვლის გზა.
თანმიმდევრულობა: მეგობრული და მშვიდი; კრიტიკულ ნაბიჯებში ხუმრობის გარეშე (გადახდა, უსაფრთხოება).
A11y და ლოკალიზაცია: იკითხება ეკრანის დირიჟორის მიერ, სწორად არის მიდრეკილი, ითვალისწინებს ხაზების სიგრძეს.

4) ცარიელი მდგომარეობის ჩარჩო (შაბლონი)

სათაური (სურვილისამებრ, 1 სტრიქონი) - ღირებულების ან მიზეზის დამტკიცება.
ტექსტი (1-2 წინადადება) - „რატომ არის ცარიელი“ + „რა შემდეგ“.
პირველადი CTA არის მთავარი სამიზნე მოქმედება.
მეორადი STA/ბმული - დახმარება/წესები/დოკუმენტაცია.
ვიზუალური (არა აუცილებელი) - მსუბუქი ილუსტრაცია 24-96 px, არ გადატვირთოთ.

5) ნიმუშები სცენარების მიხედვით

5. 1 ონბორდინგი/პირველი ნული

მიზანი: გამოიწვიოს პირველი წარმატებული მოქმედება.

ტექსტი: „პირადი რეკომენდაციების სანახავად, შეავსეთ პროფილი და შეარჩიეთ ინტერესები.“

CTA: „შეავსეთ პროფილი “/„ აირჩიე ინტერესები“.
რჩევა: დაამატეთ ძალისხმევის/დროის მიკრო ინდიკატორი: „ამას 1 წუთი დასჭირდება“.

5. 2 ძებნა/ფილტრები = ნულოვანი შედეგი

მიზანი: დაეხმაროს მოთხოვნის კორექტირებას.

ტექსტი: „ვერაფერი იპოვნეს Live blackjack“. შეეცადეთ "blackjack" ან ამოიღოთ Provider: X ფილტრი. "

CTA: „ფილტრების ამოღება“ მეორეხარისხოვანია: „კატალოგის გახსნა“.

5. 3 გადახდა/საფულე ცარიელია

მიზანი: მეთოდის დამატების სტიმულირება/პირველი შევსება.
ტექსტი: „შეინახეთ გადახდის მეთოდი - შევსება და დასკვნები უფრო სწრაფად გაივლის“.
CTA: „დაამატეთ გადახდის მეთოდი“ მეორეხარისხოვანი: „წესები და საკომისიო“.

5. 4 გადამოწმება/წვდომა

მიზანი: გამჭვირვალედ ახსნას შეზღუდვა და მოხსნის გზა.

ტექსტი: "ეს განყოფილება ხელმისაწვდომია პიროვნების დადასტურების შემდეგ. ჩვეულებრივ, ამას 2 წუთი სჭირდება"

CTA: გადამოწმება მეორეხარისხოვანია: „რატომ გჭირდებათ ეს?“

5. 5 მონაცემები გზაზე/დროებითი სიცარიელე

მიზანი: ლოდინის შფოთვის შემცირება.

ტექსტი: "ჩვენ შევაგროვებთ თქვენს მონაცემებს. ჩვეულებრივ, ამას 30 წამი სჭირდება. თქვენ შეგიძლიათ დატოვოთ გვერდი - ჩვენ ვაცნობებთ, როდის იქნება ყველაფერი მზად"

CTA: „გასაგებია“ მეორეხარისხოვანი: „რა მოხდება შემდეგ?“

5. 6 გაწმენდის/მოცილების შემდეგ

მიზანი: მოქმედების დადასტურება და შემდეგი ნაბიჯის შეთავაზება.

ტექსტი: "ისტორია გაიწმინდა. ახალი ოპერაციები გამოჩნდება შემდეგი შევსების შემდეგ"

CTA: „ანგარიშის შევსება“.

5. 7 შეცდომა/რეაგირება

მიზანი: აღდგენის ნათელი გზა.

ტექსტი: "მონაცემების ჩამოტვირთვა ვერ მოხერხდა. შეამოწმეთ ქსელი ან შეეცადეთ"

CTA: მეორეხარისხოვანი „განმეორება“: „სისტემის სტატუსი“.

6) მიკროტექსტები: მზა შაბლონები

• "აქ იქნება შერჩეული თამაშები, როდესაც დაამატებთ პირველს. [დაამატეთ არჩეული]"

• "მოთხოვნით "{query}" ვერაფერი იპოვნეს. შეამოწმეთ მოთხოვნა ან ჩამოაგდეთ ფილტრები. [ფილტრების ამოღება]"

• "თქვენ ჯერ არ გაქვთ შენახული მეთოდები. დაამატეთ ბარათი ან საფულე, რომ დააჩქაროთ გადახდები. [დაამატეთ გზა]"

• "ფუნქცია არ არის ხელმისაწვდომი ასაკის დადასტურების გარეშე. ამას 2 წუთი დასჭირდება. [ასაკის დასადასტურებლად]

• "ჩვენ სტატისტიკას განვიხილავთ ბოლო 24 საათის განმავლობაში... ჩვეულებრივ, ეს 30 წამამდეა. ჩვენ ვაჩვენებთ შეტყობინებას, როდესაც ყველაფერი მზად არის"

• "მომსახურება მიუწვდომელია. ჩვენ უკვე წმინდები ვართ. შეეცადეთ მოგვიანებით ან შეამოწმოთ სტატუსი. [სისტემის სტატუსი]"

7) ვიზუალური ენა და ილუსტრაციები

გამოიყენეთ მსუბუქი მონოქრომული/ორი ფერის ილუსტრაციები ისე, რომ არ იჩხუბოთ CTA- სთან.
ზომები და უკან დახევა - შინაარსის ბარათის მსგავსად (ვიზუალური კოორდინაცია).
არ წარმოიდგინოთ იუმორისტული სცენები სტრესულ სცენარებში (გადახდა/უსაფრთხოება).

8) ლოკალიზაცია და წვდომა

ჩადეთ რეზერვი ხაზების სიგრძეზე (DE/TR უფრო გრძელია).
თარგმნეთ რიცხვითი ფორმატები, ვალუტა, ადგილობრივად თარიღები.
ეკრანიზატორებისთვის: role = „status“, aria-live = „polite/assertive“ დინამიკისთვის.
ნუ გამოიყენებთ აზრს მხოლოდ გამოსახულებაში: დუბლიკატი ტექსტით.
შეამოწმეთ 320 px და WCAG- ის კონტრასტი.

9) მეტრიკა და ექსპერიმენტები

• CTR ცარიელი მდგომარეობის მთავარ CTA- ში;
• „პირველი წარმატების“ კონვერტაცია;
• პირველი მოქმედების დრო;
• ეკრანზე დაბრუნების სიხშირე პროგრესის გარეშე;
• ძიების ნულოვანი შედეგების წილი;
• მიმართვები სცენარის მხარდასაჭერად.

• კონკრეტული სათაური;
• CTA მოქმედების ზმნა არის ნეიტრალური;
• დროის შეფასების დამატება;
• მეორადი CTA (FAQ) და ღილაკების შეკვეთის არსებობა;
• vs ხატის ილუსტრაცია ვიზუალის გარეშე.

10) ანტი შაბლონები

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

11) ჩეკის სია გამოქვეყნებამდე

გასაგებია, რატომ არის ცარიელი?

• არსებობს ერთ წინადადებაში დაყოფის მნიშვნელობა?
• არსებობს ერთი მთავარი CTA და, საჭიროების შემთხვევაში, მეორეხარისხოვანი?
• ტექსტი მოკლეა (140 სიმბოლო) და კონკრეტული?

შესაფერისი დრო/ძალისხმევა დაემატა?

• ტონი შეესაბამება სცენარს (მშვიდი/დამხმარე)?
• შემოწმებულია ლოკალიზაცია და A11y (aria ატრიბუტები, კონტრასტი)?
• სურათი არ დომინირებს CTA- ზე?

12) მაგალითები „დაწყებამდე“

თამაშების კატალოგი (პირველი ნული)

ადრე: „აქ არაფერია“

შემდეგ: "შეაგროვეთ თქვენი ფირზე. შეარჩიეთ 3 საყვარელი ჟანრი - დავიწყოთ რეკომენდაცია. [ჟანრების არჩევა]"

ნულოვანი ძებნა

მანამდე: „ვერაფერი იპოვნეს“

შემდეგ: „High-limit Roulette“ - ის თანახმად, შედეგი არ არის. ამოიღეთ High-limit ფილტრი ან შეეცადეთ roulette. [ფილტრების ამოღება]"

გადახდა

ადრე: „არ არსებობს გადახდის გზა“

შემდეგ: "შეინახეთ ბარათი ან საფულე - შევსება და დასკვნები უფრო სწრაფი გახდება. [დაამატეთ გზა] [კომისია და ვადები]"

გადამოწმება

ადრე: „არ არის წვდომა“

შემდეგ: "სექცია ხელმისაწვდომია პიროვნების დადასტურების შემდეგ. ამას 2 წუთი სჭირდება. [გადამოწმება]

13) დიზაინის სისტემაში ინტეგრაცია

• 'title' (სტრიქონი სურვილისამებრ)
• 'body' (მოკლე ტექსტი 1-2 წინადადება)
• `primaryAction { label, onClick }`
• `secondaryAction { label, href/onClick }`
• 'icon/illustration' (სურვილისამებრ)

შეინახეთ ტექსტები i18n ფაილებში კომპონენტის გვერდით, შეინარჩუნეთ გასაღებები და აღწერილობები, დააკავშიროთ tone-map (სიტუაციების ტონი და ლექსიკა).

14) სწრაფი დიზაინერი (კოპირება და გამოყენება)

• სათაური: „დაიწყეთ პირველი ნაბიჯით“
• ტექსტი: „იქნება რეკომენდაციები, როგორც კი აირჩევთ ინტერესებს.“
• CTA: „აირჩიე ინტერესები“
• მეორადი: „როგორ მუშაობს ეს?“

• ტექსტი: „{query}“ ვერაფერი იპოვნეს. ჩამოიბანეთ ფილტრები ან დააკონკრეტეთ მოთხოვნა"
• CTA: ფილტრების ჩამორთმევა
• მეორადი: „კატალოგი“

• ტექსტი: "ფუნქცია ხელმისაწვდომია ასაკის დადასტურების შემდეგ. ჩვეულებრივ, ეს 2 წუთამდეა"
• CTA: „ასაკის დადასტურება“
• მეორადი: „რატომ არის ეს საჭირო?“

• ტექსტი: "ჩვენ შევაგროვებთ მონაცემებს დღეში. ჩვეულებრივ, ეს 30 წამამდეა. ჩვენ ვაცნობებთ, როდის არის ყველაფერი მზად"
• CTA: „კარგი“

საბოლოო ყალბი ფურცელი

კონტექსტი + ღირებულება + მოქმედება - ერთ „გაჩერებაში“.
ერთი მთავარი CTA ვიზუალური წონის კონკურენციის გარეშე.
მოკლედ და კონკრეტულად: 1-2 წინადადება.
ყოველთვის გამოსავალია ჩიხიდან: არ არის ჩიხი ეკრანები.
ლოკალიზაცია და A11y მოცემულია კომპონენტის დონეზე.