Դուք հավանաբար նախկինում եղել եք այնտեղ: Ինչպե՞ս ենք մենք ընտրում օգտատերերին մոդալ ցուցադրելու միջև և ե՞րբ ենք նրանց տեղափոխում առանձին, նոր էջ: Եվ դա ընդհանրապես նշանակություն ունի՞: Իրականում դա անում է: Որոշումն ազդում է օգտատերերի հոսքի, նրանց համատեքստի, մանրամասներ փնտրելու նրանց կարողության վրա, ինչպես նաև սխալների հաճախականության և առաջադրանքների կատարման վրա: Երկու տարբերակներն էլ կարող են խանգարել և հիասթափեցնել՝ սխալ պահին և սխալ տեղում: Այսպիսով, մենք ավելի լավ է դա ճիշտ հասկանանք: Դե, եկեք տեսնենք, թե ինչպես դա անել: Մոդալներ ընդդեմ Dialogs ընդդեմ Overlays ընդդեմ Lightboxes Թեև մենք հաճախ խոսում ենք մեկ մոդալ UI բաղադրիչի մասին, մենք հաճախ անտեսում ենք բոլոր տարբեր տեսակի մոդալների միջև նուրբ, բարդ նրբերանգները: Իրականում ամեն մոդալ չէ, որ նույնն է: Մոդալները, երկխոսությունները, ծածկույթները և լուսատուփերը՝ բոլորը նման են հնչում, բայց իրականում դրանք բավականին տարբեր են.
Dialog «Խոսակցություն» ընդհանուր տերմին (օգտագործողի ↔ համակարգ): OverlayՄի փոքր բովանդակության վահանակ, որը ցուցադրվում է էջի վերևում: ModalUser-ը պետք է փոխազդի ծածկույթի + ֆոնի անջատման հետ: NonmodalUser-ը պետք է փոխազդի միացված ծածկույթի + ֆոնի հետ: Lightbox Dimmed ֆոն՝ ուշադրությունը մոդալի վրա կենտրոնացնելու համար:
Ինչպես նշում է Աննա Քեյլին, ծածկույթների մեծ մասը հայտնվում է սխալ ժամանակ, ընդհատում է օգտատերերին կարևոր առաջադրանքների ժամանակ, վատ լեզու է օգտագործում և խախտում օգտատերերի հոսքը: Դրանք իրենց բնույթով ընդհատող են և, որպես կանոն, բարձր խստությամբ, առանց դրա խիստ անհրաժեշտության:
Անշուշտ, օգտվողները պետք է դանդաղեցվեն և ընդհատվեն, եթե նրանց գործողությունների հետևանքները մեծ ազդեցություն ունենան, բայց սցենարների մեծ մասի համար ոչ մոդալները շատ ավելի նուրբ են և ավելի ընկերական տարբերակ՝ ինչ-որ բան օգտատիրոջ ուշադրությունը հրավիրելու համար: Եթե ինչ-որ բան, ես միշտ առաջարկում եմ, որ այն լինի լռելյայն: Մոդալներ → Միայնակ, ինքնամփոփ առաջադրանքների համար Որպես դիզայներներ, մենք հաճախ մերժում ենք մոդալները որպես անտեղի և նյարդայնացնող, և հաճախ դրանք այդպես են: — սակայն դրանք նույնպես ունեն իրենց արժեքը։ Դրանք կարող են շատ օգտակար լինել օգտատերերին պոտենցիալ սխալների մասին զգուշացնելու կամ տվյալների կորստից խուսափելու համար: Նրանք կարող են նաև օգնել կատարել առնչվող գործողություններ կամ մանրամասնել՝ առանց էջի ընթացիկ վիճակի ընդհատման: Բայց մոդալների ամենամեծ առավելությունն այն է, որ նրանք օգնում են օգտվողներին պահպանել ընթացիկ էկրանի համատեքստը: Դա չի նշանակում միայն միջերես, այլ նաև խմբագրված մուտքագրում, ոլորման դիրք, ակորդեոնների վիճակ, ֆիլտրերի ընտրություն, տեսակավորում և այլն:
Երբեմն օգտատերերը պետք է արագ հաստատեն ընտրությունը (օրինակ՝ զտիչները, ինչպես ցույց է տրված վերևում), այնուհետև անմիջապես անցնեն այնտեղից: Ավտոմատ պահպանումը, իհարկե, կարող է հասնել նույնը, բայց դա միշտ չէ, որ անհրաժեշտ կամ ցանկալի է: Իսկ UI-ի արգելափակումը հաճախ լավ գաղափար չէ: Այնուամենայնիվ, մոդալները չեն օգտագործվում որևէ առաջադրանքի համար: Սովորաբար, մենք դրանք օգտագործում ենք առանձին, ինքնուրույն առաջադրանքների համար, որտեղ օգտվողները պետք է ցատկեն, կատարեն առաջադրանքը և հետո վերադառնան այնտեղ, որտեղ եղել են: Զարմանալի չէ, որ դրանք լավ են աշխատում բարձր առաջնահերթ, կարճ փոխազդեցությունների դեպքում (օրինակ՝ ահազանգեր, կործանարար գործողություններ, արագ հաստատումներ): Երբ մոդալներն օգնում են. 🚫 Մոդալները հաճախ խանգարող, ինվազիվ և շփոթեցնող են: ✅ Ցուցադրել մոդալը միայն այն դեպքում, եթե օգտվողները գնահատում են խափանումը:✅ Լռելյայն նախընտրում են չարգելափակող երկխոսություններ («ոչ մոդալներ»): ✅ Թույլատրել օգտվողներին նվազագույնի հասցնել, թաքցնել կամ վերականգնել երկխոսությունը ավելի ուշ:✅ Օգտագործեք մոդալ՝ օգտվողներին դանդաղեցնելու համար, օրինակ՝ ստուգել բարդ մուտքագրումը: Էջեր → Բարդ, բազմաքայլ աշխատանքային հոսքերի համար Վիզարդները կամ ներդիրներով նավարկությունը մոդալների ներսում այնքան էլ լավ չեն աշխատում, նույնիսկ բարդ ձեռնարկության արտադրանքներում. այնտեղ կողային վահանակները կամ գզրոցները սովորաբար ավելի լավ են աշխատում: Խնդիրները սկսվում են այն ժամանակ, երբ օգտատերերը պետք է համեմատեն կամ հղում կատարեն տվյալների կետերին, սակայն մոդալներն արգելափակում են այս վարքագիծը, ուստի փոխարենը նրանք նորից բացում են նույն էջը բազմաթիվ ներդիրներում:
Ավելի բարդ հոսքերի և բազմաքայլ գործընթացների համար անկախ էջերը լավագույնս աշխատում են: Էջերը նաև ավելի լավ են աշխատում, երբ նրանք պահանջում են օգտատիրոջ ամբողջական ուշադրությունը, և նախորդ էկրանին հղումն այնքան էլ օգտակար չէ: Իսկ գզրոցներն աշխատում են ենթաառաջադրանքների համար, որոնք չափազանց բարդ են պարզ մոդալի համար, բայց կարիք չունեն ամբողջական էջով նավարկելու: Երբ խուսափել մոդալներից. 🚫 Խուսափեք մոդալներից սխալների հաղորդագրությունների համար։🚫 Խուսափեք մոդալներից՝ գործառույթների ծանուցումների համար։🚫 Խուսափեք մոդալներից՝ ներբեռնման փորձի համար։🚫 Խուսափեք մոդալներից բարդ, երկար բազմաքայլ առաջադրանքների համար։🚫 Խուսափեք բազմակի ներդիր մոդալներից և փոխարենը օգտագործեք նախորդ/հաջորդը։🚫 Խուսափեք բացարձակապես չգործարկվող մոդալներից։ Խուսափեք երկուսիցԿրկնվող առաջադրանքների համար Բազմաթիվ բարդ, առաջադրանքների ծանրաբեռնված արտադրանքներում օգտվողները կհայտնաբերեն, որ իրենք կատարում են նույն առաջադրանքները բազմիցս, նորից ու նորից: Այնտեղ և՛ մոդալները, և՛ նոր էջի նավիգացիան ավելացնում են շփումը, քանի որ դրանք ընդհատում են հոսքը կամ ստիպում օգտվողներին հավաքել բացակայող տվյալներ բոլոր տարբեր ներդիրների կամ դիտումների միջև: Շատ հաճախ օգտվողներն ավարտվում են կոտրված փորձով, լի անվերջ հաստատումներով, չափազանցված նախազգուշացումներով, մանրամասն հրահանգներով կամ պարզապես բացակայում են հղման կետերը: Ինչպես նշեց Սաուլիուս Ստեբուլիսը, այս սցենարներում ընդլայնվող բաժինները կամ տեղում խմբագրումը հաճախ ավելի լավ են աշխատում. նրանք առաջադրանքը խարսխված են պահում ընթացիկ էկրանին: Գործնականում, շատ սցենարներում, օգտվողները չեն կատարում իրենց առաջադրանքները առանձին: Նրանք պետք է փնտրեն տվյալներ, copy-paste արժեքներ, ճշգրտեն գրառումները տարբեր վայրերում կամ պարզապես վերանայեն նմանատիպ գրառումները, երբ նրանք կատարում են իրենց առաջադրանքները: Ծածկույթները և գզրոցներն ավելի օգտակար են առաջադրանքի ընթացքում ֆոնային տվյալների հասանելիությունը պահպանելու համար: Արդյունքում, կոնտեքստը միշտ մնում է իր տեղում՝ հասանելի հղումների կամ copy-paste-ի համար։ Պահպանեք մոդալները և էջի նավարկությունը այն պահերի համար, երբ ընդհատումն իսկապես արժեք է ավելացնում, հատկապես կարևոր սխալները կանխելու համար: Մոդալներ ընդդեմ էջերի. որոշումների ծառ Որոշ ժամանակ առաջ Ռայան Նոյֆելդը հավաքեց շատ օգտակար ուղեցույց, որը կօգնի դիզայներներին ընտրել մոդալների և էջերի միջև: Այն գալիս է հարմար PNG թերթիկով և Google Doc ձևանմուշով, որտեղ հարցերը բաժանված են 7 բաժիններով: Այն երկար է, չափազանց մանրակրկիտ, բայց շատ հեշտ է հետևել.
Դա կարող է սարսափելի թվալ, բայց դա բավականին պարզ 4 քայլ գործընթաց է.
Էկրանի ենթատեքստը: Նախ, մենք ստուգում ենք, արդյոք օգտվողները պետք է պահպանեն հիմքում ընկած էկրանի համատեքստը: Առաջադրանքի բարդությունը և տևողությունը: Ավելի պարզ, կենտրոնացված, ուշադրությունը չշեղող առաջադրանքները կարող են օգտագործել մոդալ, բայց երկար, բարդ հոսքերի համար անհրաժեշտ է էջ: Հղում հիմքում ընկած էջին: Այնուհետև մենք ստուգում ենք, արդյո՞ք օգտատերերը հաճախ կարիք ունեն հղում կատարել ֆոնային տվյալներին, թե առաջադրանքը պարզ հաստատում կամ ընտրություն է: Ընտրելով ճիշտ ծածկույթը: Ի վերջո, եթե ծածկույթն իսկապես լավ տարբերակ է, այն մեզ առաջնորդում է ընտրել մոդալ կամ ոչ մոդալ (թեքվելով դեպի ոչ մոդալ):
Փաթաթում Հնարավորության դեպքում խուսափեք ամբողջ UI-ի արգելափակումից: Ունեցեք լողացող երկխոսություն, որը մասամբ ծածկում է միջերեսը, բայց թույլ է տալիս նավիգացիա, ոլորում և պատճենահանում: Կամ ցույց տվեք մոդալի բովանդակությունը որպես կողային դարակ: Կամ փոխարենը օգտագործեք ուղղահայաց ակորդեոն: Կամ օգտատերերին բերեք առանձին էջ, եթե ձեզ անհրաժեշտ է շատ մանրամասներ ցույց տալ: Բայց եթե ցանկանում եք բարձրացնել օգտվողների արդյունավետությունն ու արագությունը, ամեն գնով խուսափեք մոդալներից: Օգտագործեք դրանք օգտատերերին դանդաղեցնելու, նրանց ուշադրությունը միավորելու, սխալները կանխելու համար: Ինչպես նշել է Թերեզ Ֆեսենդենը, ոչ ոք չի սիրում իրեն ընդհատել, բայց եթե պետք է, համոզվեք, որ դա միանգամայն արժե ծախսել: Հանդիպեք «Խելացի ինտերֆեյսի դիզայնի նախշերով» Դուք կարող եք գտնել մի ամբողջ բաժին մոդալների և այլընտրանքների մասին Smart Interface Design Patterns-ում, մեր 15 ժամ տևողությամբ տեսանյութերի դասընթացը իրական կյանքի նախագծերից 100 գործնական օրինակներով. Ամեն ինչ՝ մեգա բացվող ցուցակներից մինչև ձեռնարկությունների բարդ աղյուսակներ. ամեն տարի ավելացվում են 5 նոր հատվածներ: Անցնել անվճար նախադիտման: Օգտագործեք BIRDIE կոդը՝ 15% զեղչով խնայելու համար: Ծանոթացեք Smart Interface Design Patterns-ին, մեր տեսադասընթացին ինտերֆեյսի դիզայնի և UX-ի վերաբերյալ:
Տեսանյութ + UX ուսուցումՏեսանյութ միայնՏեսանյութ + UX ուսուցում$495,00$ 699,00$
Ստացեք Video + UX Training25 վիդեո դասեր (15ժ) + Ուղիղ UX ուսուցում։ 100 օր գումարի վերադարձի երաշխիք։ Միայն տեսանյութը$ 300,00$ 395,00$
Ստացեք վիդեո դասընթաց40 վիդեո դասեր (15ժ): Թարմացվում է ամեն տարի: Նաև հասանելի է որպես UX փաթեթ՝ 2 տեսադասընթացներով:
Օգտակար ռեսուրսներ
Տարբեր տեսակի թռուցիկներ, Աննա Քեյլի կողմից Լավագույն պրակտիկա UI մոդալների նախագծման համար, Uxcel-ի կողմից Մենք օգտագործում ենք չափազանց շատ անիծյալ մոդալներ. UX ուղեցույցներ, Ադրիան Էգգերի կողմից Modal & Nonmodal Dialogs, Թերեզ Ֆեսսենդենի կողմից Ժամանակակից ձեռնարկությունների UI դիզայն. մոդալ երկխոսություններ, Ջեյմս Ջեյքոբսի կողմից Մոդալներ նախագծման համակարգերում
