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

1) Ի՞ նչ է «իրական ֆիբեկը»

Իրական ֆիդբեքը ժամանակին, կոնկրետ և կապված է հետադարձ կապի հետ, որն օգնում է օգտագործողին հասկանալ, թե ինչ է կատարվում հիմա և ինչ կլինի հետո։ Այն նվազեցնում է ճանաչողական բեռը, նվազեցնում սխալները և բարձրացնում վերահսկման զգացումը։

Նպատակները

Նվազեցնել անորոշությունը և սպասել։

Կանխել սխալները և արագ շտկել դրանք։

Հաստատել հաջողությունը և ցույց տալ հաջորդ քայլը։

2) Հետադարձ կապի տեսակները

Ակնթարթային (100-200 մզ) 'hover/focus/pressed վիճակ, ակտիվ տարրերի լուսավորություն։

Կարճ (551 s) 'սպիններներ/կմախքներ, միկրոպոդենիա, «Պահպանված»։

Առաջընթացը (վայրկյաններ-րոպե) 'determinate/indeterminate-ազդանշաններ, ET/քայլեր։

Հաստատումներ ՝ «Պատրաստ» + հղում արդյունքին/undo։

Զգուշացումներ. Փափուկ կանխում են վնասը (մինչև ուղարկումը)։

Սխալները բացատրում են «որ սխալ է գնացել» և «ինչպես շտկել»։

Համակարգային կարգավիճակը 'առցանց/օֆլայնը, համաժամացումը, հակամարտությունները։

Կոնտենտային ֆիդբեկ 'փոփոխությունների լուսավորություն, տարբերակների համեմատություն, բեյջ «նոր»։

3) Բարձրորակ ֆիդբեկի սկզբունքները

1. Ժամանակին

միկրոշրջան անմիջապես; երկար վիրահատություններ 'առաջընթացի հետ։

2. Կապված համատեքստին

գործողության/դաշտի կողքին։ մի թաքցրեք ընդհանուր բանկին։

3. Կոնկրետ և գործողություն

"Գաղտնաբառը չափազանց կարճ է (388)։ Շտկել"։ «400-ի սխալի» փոխարեն։

4. Փոխկապակցվածությունը

«Չեղարկել «/» Վերադարձնել »փոփոխության մասին ծանուցման մեջ։

5. Կանխատեսելիությունը

հաջողության/սխալների նույն ձևանմուշները ամբողջ ապրանքում։

6. Հասանելիություն

հակադրություն, ոչ միայն գույնը, ARIA-ը, ֆոկուսի կառավարումը։

7. Ուշադրության խնայողություն

նվազագույն բավարար ազդանշան; առանց որևէ մոդալի և «ճիչ»։

4) «կենդանի» ֆիդբեկի պատրանքները

4. 1 Տեսողական տարրերի վիճակներ

Hover/focus/pressed/wwww.abled - տեսանելի հիերարխիա։

Կոճակը սեղմելիս «loading» (կրկին կլիկաբելինա)։

4. 2 Inault-validation (հենց դաշտերում)

Սինթաքսիսի ստուգումը ֆոկուսի կորստի կամ մուտքի դադարեցման ժամանակ (debounce 300-500 ms)։

Դաշտի տակ հաղորդագրություն, կարգավիճակի իկոնիկա, օրինակ/դիմակ («+ 38 (0XX) XXX-XX-XX-XX-XX»)։

Կարգը 'նախ կանխել, հետո շտկել։

4. 3 Skeletons и Empty States

Skeletons-ը «ցատկող» բովանդակության փոխարեն։

Դատարկ վիճակները հրահանգների/դեմո տվյալների և CTA-ի հետ։

4. 4 Optimistic UI (արձագանքով)

Անմիջապես ցույց ենք տալիս արդյունքը փոփոխված, միաժամանակ ուղարկելով սերվերին։

Խնայողությունների դեպքում 'փափուկ արձագանք + հստակ պատճառ + «Կրկնել»։

Լոգներն ու նետաձիգները պարտադիր են։

4. 5 Ավտոմեքենաների պահպանումը և անջատիչները

«Պահպանված 18: 42 »/« Համաժամեցում» .../« Օֆլինը 'տեղական պատճենը »։

Հակամարտությունները 'ցույց տալ diff-ը և ընտրել տարբերակը/փակցնել փոփոխությունները։

4. 6 Նոտիֆիկացում և ինբոքս

Կարևոր իրադարձությունները 3-5-ի ատելություն են գործողության կոճակից։

Ֆոնային առաջադրանքների համար ծանուցման կենտրոնն է/պատմությունը։

5) Սխալներ ՝ դասակարգում և պատասխաններ

Վալիդացիոն (օգտագործողը) 'դաշտի մոտ; ինչպես շտկել; օրինակ։

Բիզնես կանոնները 'բացատրել կանոն/շեմն; առաջարկել այլընտրանքը։

Տեխնիկական 'ցանցը/սերվերը' "Կապի խնդիրը։ Կրկնել"։ + Օֆֆլայնի ռեժիմը։

Կրիտիկական, չփչացնել բոլոր մոդալները 'պահպանել համատեքստը, վերականգնել ճանապարհը։

Միկրոկոպիրայթ 'հակիրճ, խոսակցական, առանց կոդի և օգտագործողի մեղքի։

6) Երկար վիրահատություններ և հերթեր

Determinate առաջընթացը 'հայտնի ծավալը' ցույց տալ տոկոսներ/քայլեր։

Indeterminate: Անհայտ է 'իմպուլսացիա + գնահատումը «Սովորաբար 5-10 s»։

Ֆոնային առաջադրանքները 'առաջադրանքների ցուցակում կարգավիճակը + 108/tost պատրաստակամորեն։

Վերացում/Դադա 'որտեղ պաշտպանությունը պարտադիր է։

Ռուսական առաջընթացը 'շատ քայլեր են կատարվում մինի քայլերով («Քայլ 2/4: Ստուգում»...)։

7) Օֆլինը, կոտրվածքները և հակամարտությունները

Տեղեկացրեք '«Օֆլայն», «Մենք կապում ենք»...

Տեղական քեշինգը 'առանց ցանցի աշխատանք; հերթը ուղարկելու համար։

Տարբերակների հակամարտությունները 'գերազանցելով տարբերությունները, ընտրությունը կամ merge ռազմավարությունը։

Թայմաուտներ. <<Չկարողացանք 30-ից, փորձենք ևս>>։ + «Տեղեկացրեք ավելի ուշ»։

8) Հասանելիություն և ներառականություն

ARIA edregions: թոստերի/սխալների համար։

Ֆոկուս-մենեջմենթ 'սխալմամբ' ֆոկուս դաշտում։ հաջողության 'արդյունքի։

Ոչ միայն գույնը 'իկոնկա/տեքստ/pattern։

Շարժման նախընտրությունները 'հարգել «wwww.fers-reduced-motion»։

Ձայնը/մարտավարությունը (altaile) 'փափուկ hapt.ru, անջատիչ։

9) Ֆիդբեկի որակի մետրերը

TTF (Time-to-Feedback): ժամանակը առաջին ազդանշանից հետո։

Error Rate/Corrance Rate: Սխալների մասնաբաժինը և հաջողությամբ շտկված N-ի համար։

Rage-Clicks/Dead-Ends: Բազմաթիվ բուժական կլինիկաներ։

Rollback Rate (optimistic) 'արձագանքների տոկոսը և նրանց պատճառները։

Success Acknowledged-ը «Պատրաստ» ակնհայտ ապացույցների մասն է։

SuperSignals: բողոքներ անհասկանալի սխալների/կարգավիճակի կորստի մասին։

Task Completion/TTFV 'ֆիդբեկի ազդեցությունը առաջադրանքների ավարտին և առաջին արժեքը։

10) Գործիքներ և իրադարձություններ

Լոգարանների նվազագույն սխեմա

ui_action {type, target_id, context}
ui_feedback_shown {type: success    warning    error    progress, target_id, latency_ms}
ui_error {category: validation    business    network    system, field, code, retriable}
sync_state {online    offline    syncing, queued_ops, conflicts}
optimistic_tx {entity, op, committed    rolled_back, reason}

Ատրիբուտները ՝ սեգմենտը, սարքը, ալիքը, հավելվածի/տոմդի տարբերակը։

11) Չեկ թերթերը

11. 1 Դիզայն

• Յուրաքանչյուր գործողություն ունի ակնթարթային տեսողական արձագանք։
• Սխալներ 'խնդրի վայրի մոտ, շտկման օրինակով։
• Հաջողությունը ակնհայտ հաստատում է + հաջորդ քայլը/հղում։
• Երկար վիրահատություններ 'առաջընթաց/ETA/վերացում։
• Օֆլինի վիճակը և համաժամացումը նկարագրված են։
• Optimistic UI-ն անվտանգ արձագանքով և լոգարաններով։
• Հասանելիություն ՝ հակադրություն, ARIA, ֆոկուս, առանց «միայն գույն»։

11. 2 Բովանդակություն/միկրոկոպի

• Կարճ, առանց տեխնիկական ժարգոնի։
• Մի մեղադրեք օգտագործողին. առաջարկել ուղղման ճանապարհը։
• Կոնսիստենտային ձևանմուշները («Պահպանված», «Չհաջողվեց կրկնել»)։

11. 3 Տեխնոլոգիա

• Idempotency/deduplication CTA-ում։
• Վերացում/ուղարկման խոհարար, թայմաուտներ և հետքեր backoff-ից։
• TTF լոգները, սխալները, արձագանքները և օֆլայնային հերթը։
• Վատ ցանցով թեստեր/երկար պատասխան/հակամարտություններ։

12) Միկրոկոպիրիտի օրինակներ

Հաջողությունը

"Պահպանված 19: 07։ Բացել մրցույթի քարտը"

Վալիդացիայի սխալը

«Գաղտնաբառը շատ կարճ է 'առնվազն 8 նիշ»։

Ցանցը/սերվերը

"Կապը կորած է։ Փոփոխությունները պահպանված են տեղական։ Կրկնել ուղարկումը"։

Երկար վիրահատություն

"Մենք մշակում ենք ֆայլը (քայլ 2/3)... Սովորաբար տևում է մինչև 30 էջ: Չեղարկել"

Հակամարտություն

"Այս փաստաթղթի նոր տարբերակ կա։ Համեմատել և ընտրել փոփոխությունները"։

Լավատես արձագանքը

"Չի կարող փոխել փոփոխությունը։ Վերադարձանք նույնը։ Կրկնել"։

13) Քեյսներ «մինչև/հետո»

Համազգեստ առանց նախատիպերի

Մինչև 'սխալները միայն ուղարկելուց հետո։ բարձր մերժում։

Այնուհետև, երբ դրանք մուտքագրվեն, ձևաչափի օրինակները, դաշտի լուսավորությունը Completion Rate-ի աճն է և Error Rate-ի նվազումը։

Երկար բեռնումը wwww.skeleton + առաջընթացը

Դո 'դատարկ էկրանը սպինների հետ; rage տեսահոլովակներ։

Հետո 'կմախքները, դետերմինացված առաջընթացը, վերացումը' Rage-Clicks-ի նվազումը։

Լռության պահպանումը ակնհայտ հաջողություն է + հաջորդ քայլը

Մինչև 'օգտագործողը համոզված չէ, կրկին կլիկացվում է։

Հետո '«Պահպանված» + հղում «Բացել» - ավելի քիչ կրկնօրինակներ և սխալներ։

Ցանցը անկայուն է ֆիքսված հերթով

Մինչև 'տվյալների կորուստ։

Հետո 'տեղական bakap, ուղարկման խոհարար, բեյջ կարգավիճակը վստահության բարձրացումն է։

14) Իրականացման գործընթացը

1. Քայլերի և սխալների քարտեզը 'որտեղ պետք է հակառակ կապ և ինչ տեսակի։

2. Ֆիդբեկի ձևանմուշները 'հաջողություն/սխալ/առաջընթաց/օֆլայնը մեկ հավաքածու է։

3. Նախատիպն ու թեստերը 'ձգումները արհեստականորեն ավելանում են։ հասանելիության ստուգում։

4. Գործիքներ 'իրադարձություններ, TTF, արձագանքներ, rage-տեսահոլովակներ։

5. Փորձարկումներ ՝ A/B ձևակերպումների և արտոնագրերի վրա (inronvs post-intit)։

6. Ռոլլաուտը դրոշներով և հետադարձ հայացքով է լցվում։

15) Ռեզյումե

Իրական ֆիդբեքը ճիշտ ազդանշան է ճիշտ պահին 'ակնթարթային արձագանք, հասկանալի սխալներ, ազնիվ առաջընթաց և տեսանելի վերջնական կետ։ Դարձրեք ֆիբեկ տեղական և արդյունավետ, աջակցեք օֆլայնին և արձագանքներին, պահպանեք հասանելիությունը և չափեք Time-to-Feedback-ը Error Rate-ի և Rage-Clicks-ի հետ միասին։ Այսպիսով, ինտերֆեյսը դառնում է կանխատեսելի, իսկ օգտագործողը 'վստահ յուրաքանչյուր գործողության մեջ։