Jūs droši vien esat tur bijis agrāk. Kā mēs izvēlamies, vai lietotājiem rādīt modālu, un kad mēs viņus novirzām uz atsevišķu jaunu lapu? Un vai tam vispār ir nozīme? Patiesībā tā dara. Lēmums ietekmē lietotāju plūsmu, kontekstu, spēju meklēt informāciju un līdz ar to kļūdu biežumu un uzdevumu izpildi. Abas iespējas var būt traucējošas un nomāktas — nepareizā laikā un nepareizā vietā. Tāpēc mēs labāk to nokārtosim. Nu, redzēsim, kā to izdarīt. Modāļi salīdzinājumā ar dialoglodziņu un pārklājumu un gaismas kastēm Lai gan mēs bieži runājam par vienu modālu lietotāja interfeisa komponentu, mēs bieži ignorējam smalkas, sarežģītas nianses starp visiem dažādajiem modālu veidiem. Patiesībā ne katrs veids ir vienāds. Modāļi, dialoglodziņi, pārklājumi un gaismas kastes — visi izklausās līdzīgi, taču patiesībā tie ir diezgan atšķirīgi:
Dialogs Vispārīgs termins “sarunai” (lietotāja ↔ sistēma). PārklājumsNeliels satura panelis, kas tiek parādīts lapas augšpusē. ModalUser ir jāsadarbojas ar atspējotu pārklājumu un fonu. NonmodalUser ir jāsadarbojas ar iespējotu pārklājumu + fonu. Lightbox Aptumšots fons, lai koncentrētu uzmanību uz modālu.
Kā uzsver Anna Keilija, lielākā daļa pārklājumu parādās nepareizā laikā, pārtrauc lietotājus kritisku uzdevumu laikā, lieto sliktu valodu un pārtrauc lietotāju plūsmu. Tās pēc būtības ir traucējošas un parasti ar augstu smaguma pakāpi bez lielas nepieciešamības.
Protams, lietotāji ir jābremzē un jāpārtrauc, ja viņu rīcības sekas ir ļoti spēcīgas, taču vairumā gadījumu nemodālie modeļi ir daudz smalkāki un draudzīgāki, lai pievērstu lietotāja uzmanību. Ja kas, es vienmēr iesaku to izmantot pēc noklusējuma. Modāļi → Atsevišķiem, patstāvīgiem uzdevumiem Kā dizaineri mēs bieži noraidām modālus kā neatbilstošus un kaitinošus — un tas bieži vien ir! — tomēr tiem ir arī sava vērtība. Tie var būt ļoti noderīgi, lai brīdinātu lietotājus par iespējamām kļūdām vai palīdzētu izvairīties no datu zuduma. Tie var arī palīdzēt veikt saistītas darbības vai detalizēti izpētīt informāciju, nepārtraucot lapas pašreizējo stāvokli. Taču lielākā modālu priekšrocība ir tā, ka tie palīdz lietotājiem saglabāt pašreizējā ekrāna kontekstu. Tas nenozīmē tikai lietotāja interfeisu, bet arī rediģēto ievadi, ritināšanas pozīciju, akordeonu stāvokli, filtru izvēli, kārtošanu un tā tālāk.
Dažkārt lietotājiem ir ātri jāapstiprina atlase (piemēram, filtri, kā parādīts iepriekš), un pēc tam nekavējoties jāturpina. Protams, automātiskā saglabāšana var sasniegt to pašu, taču tas ne vienmēr ir vajadzīgs vai vēlams. Un lietotāja interfeisa bloķēšana bieži vien nav laba ideja. Tomēr modāļi netiek izmantoti nevienam uzdevumam. Parasti mēs tos izmantojam atsevišķiem, patstāvīgiem uzdevumiem, kuros lietotājiem ir jāiesaistās, jāpabeidz uzdevums un pēc tam jāatgriežas tur, kur viņi bija. Nav pārsteidzoši, ka tie labi darbojas augstas prioritātes, īsas mijiedarbības gadījumā (piemēram, brīdinājumi, destruktīvas darbības, ātri apstiprinājumi). Kad modāļi palīdz: 🚫 Modāļi bieži ir traucējoši, invazīvi un mulsinoši.🚫 Tie apgrūtina salīdzināšanu un kopēšanu un ielīmēšanu.✅ Tomēr modāļi ļauj lietotājiem uzturēt vairākus kontekstus.✅ Noder, lai novērstu neatgriezeniskas kļūdas un datu zudumu.✅ Noder, ja lietotāju nosūtīšana uz jaunu lapu varētu traucēt. ✅ Rādīt modālu tikai tad, ja lietotāji novērtēs traucējumus.✅ Pēc noklusējuma dodiet priekšroku nebloķējošiem dialoglodziņiem (“nemodāliem”).✅ Ļaujiet lietotājiem vēlāk minimizēt, paslēpt vai atjaunot dialogu.✅ Izmantojiet modālu, lai palēninātu lietotāju darbību, piemēram, pārbaudītu sarežģītu ievadi.✅ Dodiet izeju ārpus lodziņa “Aizvērt”, vai noklikšķiniet uz ESC. Lapas → Sarežģītām, daudzpakāpju darbplūsmām Vedņi vai navigācija ar cilnēm modālos nedarbojas pārāk labi pat sarežģītos uzņēmuma produktos — tur sānu paneļi vai atvilktnes parasti darbojas labāk. Problēmas sākas, kad lietotājiem ir jāsalīdzina vai jāatsaucas uz datu punktiem, taču modāļi bloķē šo darbību, tāpēc viņi atkārtoti atver to pašu lapu vairākās cilnēs.
Sarežģītākām plūsmām un daudzpakāpju procesiem vislabāk darbojas atsevišķas lapas. Lapas darbojas arī labāk, ja tās prasa visu lietotāja uzmanību, un atsauce uz iepriekšējo ekrānu nav īpaši noderīga. Un atvilktnes darbojas apakšuzdevumiem, kas ir pārāk sarežģīti vienkāršam modālam, bet kuriem nav nepieciešama pilna lapas navigācija. Kad izvairīties no modāliem: 🚫 Izvairieties no modāliem kļūdu ziņojumiem. 🚫 Izvairieties no modāliem funkciju paziņojumiem.🚫 Izvairieties no modāliem, lai iegūtu pieredzi.🚫 Izvairieties no modāliem sarežģītiem, gariem daudzpakāpju uzdevumiem.🚫 Izvairieties no vairākiem ligzdotiem modāliem un tā vietā izmantojiet iepriekšējo/nākamo A absolūti nepieciešams automātiskais. Izvairieties no abiemAtkārtotiem uzdevumiem Daudzos sarežģītos produktos, kas prasa lielus uzdevumus, lietotāji atkal un atkal veic vienus un tos pašus uzdevumus. Tur gan modāļi, gan jaunas lapas navigācijas rada berzi, jo tās pārtrauc plūsmu vai liek lietotājiem apkopot trūkstošos datus starp visām dažādajām cilnēm vai skatiem. Pārāk bieži lietotājiem rodas neveiksmīga pieredze, kas ir pilna ar nebeidzamiem apstiprinājumiem, pārspīlētiem brīdinājumiem, detalizētiem norādījumiem vai vienkārši trūkstošiem atskaites punktiem. Kā minēja Sauļus Stebulis, šajos scenārijos paplašināmas sadaļas vai rediģēšana uz vietas bieži darbojas labāk — tie saglabā uzdevumu noenkurotu ar pašreizējo ekrānu. Praksē daudzos gadījumos lietotāji savus uzdevumus neveic atsevišķi. Viņiem ir jāmeklē dati, jākopē un jāielīmē vērtības, jāprecizē ieraksti dažādās vietās vai vienkārši jāpārskata līdzīgi ieraksti, veicot savus uzdevumus. Pārklājumi un atvilktnes ir noderīgākas, lai uzdevuma laikā saglabātu piekļuvi fona datiem. Rezultātā konteksts vienmēr paliek savā vietā, pieejams atsaucei vai kopēšanai-ielīmēšanai. Saglabājiet modālus un lapas navigāciju brīžiem, kad pārtraukums patiešām rada pievienoto vērtību — īpaši, lai novērstu kritiskas kļūdas. Modāļi pret lapām: lēmumu koks Kādu laiku atpakaļ Raiens Noifelds izveidoja ļoti noderīgu rokasgrāmatu, lai palīdzētu dizaineriem izvēlēties starp modāliem vai lapām. Tam ir ērta PNG cheatsheet un Google dokumenta veidne ar jautājumiem, kas sadalīti 7 sadaļās. Tas ir garš, ļoti rūpīgi, bet ļoti viegli izpildāms:
Tas varētu šķist biedējoši, taču tas ir diezgan vienkāršs 4 pakāpju process:
Ekrāna konteksts.Vispirms mēs pārbaudām, vai lietotājiem ir jāsaglabā pamatā esošā ekrāna konteksts. Uzdevuma sarežģītība un ilgums. Vienkāršākiem, mērķtiecīgiem un netraucējošiem uzdevumiem varētu izmantot modālu, bet garām, sarežģītām plūsmām ir nepieciešama lapa. Atsauce uz pamatā esošo lapu.Pēc tam mēs pārbaudām, vai lietotājiem bieži ir jāatsaucas uz datiem fonā, vai arī uzdevums ir vienkāršs apstiprinājums vai atlase. Pareiza pārklājuma izvēle. Visbeidzot, ja pārklājums patiešām ir labs risinājums, tas palīdz mums izvēlēties starp modālu vai nemodālu (sliecoties uz nemodālu).
Iesaiņošana Kad vien iespējams, nebloķējiet visu lietotāja interfeisu. Izveidojiet peldošu dialoglodziņu, kas daļēji aptver lietotāja interfeisu, bet ļauj pārvietoties, ritināt un kopēt un ielīmēt. Vai arī parādiet modāla saturu kā sānu atvilktni. Vai arī izmantojiet vertikālo akordeonu. Vai arī novirziet lietotājus uz atsevišķu lapu, ja nepieciešams parādīt daudz detaļu. Bet, ja vēlaties palielināt lietotāju efektivitāti un ātrumu, izvairieties no modāliem par katru cenu. Izmantojiet tos, lai palēninātu lietotāju darbību, piesaistītu viņu uzmanību un novērstu kļūdas. Kā atzīmēja Terēze Fesendena, nevienam nepatīk, ka viņus traucē, taču, ja nepieciešams, pārliecinieties, ka tas ir absolūti izmaksu vērts. Iepazīstieties ar “viedās saskarnes dizaina modeļiem” Jūs varat atrast veselu sadaļu par modāliem un alternatīvām sadaļā Smart Interface Design Patterns — mūsu 15 stundu video kursā ar 100 praktiskiem piemēriem no reāliem projektiem — ar tiešraides UX apmācību vēlāk šogad. Viss, sākot no lielizmēra nolaižamām izvēlnēm līdz sarežģītām uzņēmuma tabulām — katru gadu tiek pievienoti 5 jauni segmenti. Pāriet uz bezmaksas priekšskatījumu. Izmantojiet kodu BIRDIE, lai ietaupītu 15% atlaidi. Iepazīstieties ar Smart Interface Design Patterns — mūsu video kursu par saskarnes dizainu un lietotāja pieredzi.
Video + UX apmācība tikai videoVideo + UX apmācība 495,00 USD 699,00
Saņemiet video + UX apmācību 25 video nodarbības (15 h) + tiešraides UX apmācību. 100 dienu naudas atdošanas garantija. Tikai video 300,00 $ 395,00
Iegūstiet video kursu40 video nodarbības (15h). Atjaunina katru gadu. Pieejams arī kā UX komplekts ar 2 video kursiem.
Noderīgi resursi
Dažādi uznirstošo logu veidi, Anna Keilija Uxcel lietotāja interfeisa moduļu izstrādes paraugprakse Mēs izmantojam pārāk daudz sasodītu modālu: UX vadlīnijas, Adrians Egers Modālie un nemodālie dialogi, autors Terēze Fesendena Mūsdienu uzņēmuma lietotāja interfeisa dizains: Modal Dialogs, Džeimss Džeikobs Modāļi projektēšanas sistēmās
