Tõenäoliselt olete seal varem käinud. Kuidas me valime kasutajatele modaali näitamise ja millal me nad eraldi uuele lehele suuname? Ja kas see on üldse oluline? Tegelikult teeb küll. Otsus mõjutab kasutajate voogu, nende konteksti, nende võimet otsida üksikasju ning koos sellega vigade sagedust ja ülesannete täitmist. Mõlemad võimalused võivad olla häirivad ja masendavad – valel ajal ja vales kohas. Nii et teeme parem selle õigeks. Noh, vaatame, kuidas seda teha. Modaalid vs. dialoogid vs. ülekatted vs. valguskastid Kuigi me räägime sageli ühest modaalsest kasutajaliidese komponendist, eirame sageli peeneid ja keerulisi nüansse kõigi erinevat tüüpi modaalide vahel. Tegelikult ei ole iga modaal ühesugune. Modaalid, dialoogid, ülekatted ja valguskastid – kõik kõlavad sarnaselt, kuid tegelikult on need üsna erinevad:
DialoogÜldmõiste "vestluse" jaoks (kasutaja ↔ süsteem). ÜlekateVäike sisupaneel, mis kuvatakse lehe ülaosas. ModalUser peab suhtlema ülekatte ja taustaga keelatud. NonmodalUser peab suhtlema nii, et ülekate + taust on lubatud. Valguskast Tumendatud taust, et suunata tähelepanu modaalile.
Nagu Anna Kaley rõhutab, ilmuvad enamik ülekatteid valel ajal, segavad kasutajaid kriitiliste toimingute ajal, kasutavad kehva keelt ja rikuvad kasutajate voogu. Need on oma olemuselt segavad ja tavaliselt kõrge raskusastmega ilma tugeva vajaduseta.
Kindlasti tuleb kasutajaid aeglustada ja katkestada, kui nende tegevuse tagajärjed avaldavad suurt mõju, kuid enamiku stsenaariumide puhul on mittemodaalid palju peenem ja sõbralikum võimalus kasutaja tähelepanu juhtida. Kui midagi, siis soovitan alati, et see oleks vaikeseade. Modaalid → Üksikute, iseseisvate ülesannete jaoks Disaineritena peame sageli modaale ebaolulisteks ja tüütuteks – ja sageli on see nii! — ometi on neil ka oma väärtus. Need võivad olla väga kasulikud kasutajate hoiatamisel võimalike vigade eest või aidata neil vältida andmete kadumist. Need võivad aidata ka seotud toiminguid teha või üksikasjadesse süveneda ilma lehe praegust olekut katkestamata. Kuid modaalide suurim eelis on see, et need aitavad kasutajatel hoida praeguse ekraani konteksti. See ei tähenda ainult kasutajaliidest, vaid ka muudetud sisendit, kerimisasendit, akordionide olekut, filtrite valikut, sorteerimist ja nii edasi.
Mõnikord peavad kasutajad valiku kiiresti kinnitama (nt filtrid, nagu ülal näidatud) ja seejärel kohe sealt edasi jätkama. Automaatne salvestamine võib loomulikult saavutada sama, kuid seda pole alati vaja ega soovita. Ja kasutajaliidese blokeerimine pole sageli hea mõte. Kuid modaale ei kasutata ühegi ülesande jaoks. Tavaliselt kasutame neid üksikute iseseisvate ülesannete jaoks, kus kasutajad peaksid vahele hüppama, ülesande täitma ja seejärel oma asukohta naasta. Pole üllatav, et need toimivad hästi kõrge prioriteediga lühiajaliste suhtluste korral (nt hoiatused, hävitavad toimingud, kiired kinnitused). Kui modaalid aitavad: 🚫 Modaalid on sageli häirivad, invasiivsed ja segadust tekitavad.🚫 Need muudavad võrdlemise ja kopeerimise-kleepimise keeruliseks.✅ Kuid modaalid võimaldavad kasutajatel säilitada mitut konteksti.✅ Kasulik pöördumatute vigade ja andmete kadumise vältimiseks.✅ Kasulik, kui kasutajate uuele lehele saatmine häiriks. ✅ Näidake modaali ainult siis, kui kasutajad hindavad häireid.✅ Vaikimisi eelistage mitteblokeerivaid dialooge ("mittemodaalseid").✅ Lubage kasutajatel dialoogi hiljem minimeerida, peita või taastada.✅ Kasutage modaali kasutajate aeglustamiseks, nt kontrollige keerukat sisendit.✅ Andke väljapääs klahviga "Sulge" või klõpsake väljast ESC. Lehed → Keeruliste mitmeastmeliste töövoogude jaoks Modaalide viisardid või vahekaartidega navigeerimine ei tööta liiga hästi isegi keerukates ettevõttetoodetes – seal töötavad külgpaneelid või sahtlid tavaliselt paremini. Probleemid algavad siis, kui kasutajatel on vaja andmepunkte võrrelda või viidata, kuid modaalid blokeerivad selle käitumise, nii et nad avavad sama lehe uuesti mitmel vahelehel.
Keerulisemate voogude ja mitmeastmeliste protsesside jaoks sobivad kõige paremini eraldiseisvad lehed. Lehed töötavad paremini ka siis, kui nad nõuavad kasutaja täit tähelepanu, ja eelmisele ekraanile viitamine pole eriti kasulik. Ja sahtlid töötavad alamülesannete jaoks, mis on lihtsa modaali jaoks liiga keerulised, kuid ei vaja täisleheküljelist navigeerimist. Millal modaale vältida: 🚫 Vältige tõrketeadete jaoks modaale.🚫 Vältige funktsioonide märguannete jaoks modaale.🚫 Vältige modaale sisseelamiskogemuse jaoks.🚫 Vältige modaale keerukate ja pikkade mitmeastmeliste ülesannete jaoks.🚫 Vältige mitut pesastatud modaali ja kasutage selle asemel eelmist/järgmist A absoluutselt vajalik automaatne. Vältige mõlematKorduvate ülesannete jaoks Paljude keerukate ja töömahukate toodete puhul avastavad kasutajad, et täidavad samu ülesandeid korduvalt, ikka ja jälle. Seal lisavad nii modaalid kui ka uute lehtede navigeerimine hõõrdumist, kuna need katkestavad voo või sunnivad kasutajaid koguma puuduvaid andmeid kõigi erinevate vahekaartide või vaadete vahel. Liiga sageli saavad kasutajad katkise kogemuse, mis on täis lõputuid kinnitusi, liialdatud hoiatusi, üksikasjalikke juhiseid või lihtsalt puuduvad võrdluspunktid. Nagu Saulius Stebulis mainis, toimivad nendes stsenaariumides sageli paremini laiendatavad jaotised või kohapealne redigeerimine – need hoiavad ülesande praeguse ekraaniga ankurdatuna. Praktikas ei täida kasutajad paljudes stsenaariumides oma ülesandeid isoleeritult. Oma ülesannete täitmisel peavad nad otsima andmeid, kopeerima ja kleepima väärtusi, viimistlema erinevates kohtades olevaid kirjeid või lihtsalt üle vaatama sarnaseid kirjeid. Ülekatted ja sahtlid aitavad ülesande ajal taustandmetele juurdepääsu säilitamisel rohkem abi. Selle tulemusel jääb kontekst alati oma kohale, mis on saadaval viitamiseks või kopeerimiseks-kleebimiseks. Salvestage modaalid ja lehel navigeerimine hetkedeks, mil katkestus annab tõeliselt lisaväärtust – eriti kriitiliste vigade vältimiseks. Modaalid vs. leheküljed: otsustuspuu Mõni aeg tagasi koostas Ryan Neufeld väga kasuliku juhendi, mis aitab disaineritel valida modaalide ja lehtede vahel. Kaasas on mugav PNG-petuleht ja Google Doci mall küsimustega, mis on jaotatud 7 jaotisse. See on pikk, väga põhjalik, kuid väga lihtne järgida:
See võib tunduda hirmutav, kuid see on üsna lihtne neljaastmeline protsess:
Ekraani kontekst.Esmalt kontrollime, kas kasutajad peavad säilitama aluseks oleva ekraani konteksti. Ülesande keerukus ja kestus. Lihtsamad, keskendunud ja mitte segavad ülesanded võiksid kasutada modaalset, kuid pikad ja keerulised vood vajavad lehte. Viide aluseks olevale lehele.Seejärel kontrollime, kas kasutajad peavad sageli viitama taustal olevatele andmetele või on ülesanne lihtne kinnitus või valik. Õige ülekatte valimine. Lõpuks, kui ülekate on tõepoolest hea valik, juhendab see meid valima modaalse või mittemodaalse (mittemodaalse poole) vahel.
Pakkimine Võimaluse korral vältige kogu kasutajaliidese blokeerimist. Laske dialoogiaknal hõljuda, mis katab osaliselt kasutajaliidese, kuid võimaldab navigeerimist, kerimist ja kopeerimist-kleepimist. Või näidata modaali sisu külgsahtlina. Või kasutage selle asemel vertikaalset akordioni. Või viige kasutajad eraldi lehele, kui peate näitama palju detaile. Kuid kui soovite suurendada kasutajate tõhusust ja kiirust, vältige iga hinna eest modaale. Kasutage neid kasutajate aeglustamiseks, nende tähelepanu koondamiseks ja vigade vältimiseks. Nagu Therese Fessenden märkis, ei meeldi kellelegi, kui teda segatakse, kuid kui peate, veenduge, et see on oma kulu täiesti väärt. Tutvuge nutika liidese disaini mustritega Leiate terve jaotise modaalide ja alternatiivide kohta jaotisest Smart Interface Design Patterns, meie 15-tunnine videokursus 100 praktiliste näidetega päriseluprojektidest – koos reaalajas UX-i koolitusega selle aasta lõpus. Kõik alates tohututest rippmenüüdest kuni keerukate ettevõttetabeliteni – igal aastal lisatakse 5 uut segmenti. Hüppa tasuta eelvaatele. Kasutage koodi BIRDIE, et säästa 15% allahindlust. Tutvuge Smart Interface Design Patterns, meie videokursusega liidese disaini ja kasutajakogemuse kohta.
Video + UX-koolitus Ainult videovideo + UX-koolitus 495,00 $ 699,00
Hankige video + UX-koolitus25 videotundi (15 tundi) + reaalajas UX-koolitus. 100-päevane raha tagasi garantii. Ainult video 300,00 395,00 dollarit
Hankige videokursus40 videotundi (15h). Värskendatakse igal aastal. Saadaval ka kahe videokursusega UX-i komplektina.
Kasulikud ressursid
Erinevat tüüpi hüpikaknad, autor Anna Kaley Uxceli kasutajaliidese modaalide kujundamise parimad tavad Me kasutame liiga palju neetud modaale: UX-i juhised, autor Adrian Egger Modaalsed ja mittemodaalsed dialoogid, autor Therese Fessenden Kaasaegne ettevõtte kasutajaliidese disain: modaalsed dialoogid, autor James Jacobs Modaalid projekteerimissüsteemides
