Olet todennäköisesti ollut siellä aiemmin. Kuinka valitsemme modaalin näyttämisen käyttäjille ja milloin siirrämme heidät erilliselle uudelle sivulle? Ja onko sillä mitään väliä? Itse asiassa se tekee. Päätös vaikuttaa käyttäjien kulkuun, kontekstiin, heidän kykyynsä etsiä yksityiskohtia ja sen myötä virheiden esiintymistiheyteen ja tehtävien suorittamiseen. Molemmat vaihtoehdot voivat olla häiritseviä ja turhauttavia – väärään aikaan ja väärässä paikassa. Joten meidän on parempi tehdä se oikein. No, katsotaan kuinka se tehdään. Modaalit vs. valintaikkunat vs. peittokuvat vs. valolaatikot Vaikka puhumme usein yhdestä modaalisesta käyttöliittymäkomponentista, jätämme usein huomiotta hienot, monimutkaiset vivahteet kaikkien erityyppisten modaalien välillä. Itse asiassa kaikki modaalit eivät ole samanlaisia. Modaalit, valintaikkunat, peittokuvat ja valolaatikot – kaikki kuulostavat samanlaisilta, mutta ne ovat itse asiassa melko erilaisia:
DialogYleinen termi "keskustelulle" (käyttäjä ↔ -järjestelmä). PeittoPieni sisältöpaneeli, joka näkyy sivun yläosassa. ModalUserin on oltava vuorovaikutuksessa peittokuvan ja taustan kanssa. NonmodalUserin on oltava vuorovaikutuksessa peittokuvan ja taustan kanssa. LightboxDimmed background to focus attention on the modal.
Kuten Anna Kaley korostaa, useimmat peittokuvat ilmestyvät väärään aikaan, keskeyttävät käyttäjiä kriittisten tehtävien aikana, käyttävät huonoa kieltä ja häiritsevät käyttäjien kulkua. Ne ovat luonteeltaan häiritseviä ja tyypillisesti erittäin vakavia ilman voimakasta tarvetta siihen.
Varmasti käyttäjiä on hidastettava ja keskeytettävä, jos heidän toiminnan seurauksilla on suuri vaikutus, mutta useimmissa skenaarioissa ei-modaalit ovat paljon hienovaraisempia ja ystävällisempi vaihtoehto tuoda jotain käyttäjän tietoon. Jos jotain, suosittelen aina, että se on oletusarvo. Modaalit → Yksittäisiin itsenäisiin tehtäviin Suunnittelijoina pidämme modaalit usein merkityksettöminä ja ärsyttävinä – ja usein ne ovatkin! – kuitenkin niillä on myös arvonsa. Ne voivat olla erittäin hyödyllisiä varoittamaan käyttäjiä mahdollisista virheistä tai auttavat heitä välttämään tietojen menetystä. Ne voivat myös auttaa suorittamaan liittyviä toimintoja tai perehtymään yksityiskohtiin keskeyttämättä sivun nykyistä tilaa. Mutta modaalien suurin etu on, että ne auttavat käyttäjiä pitämään nykyisen näytön kontekstin. Se ei tarkoita vain käyttöliittymää, vaan myös muokattua syöttöä, vierityskohtaa, haitarien tilaa, suodattimien valintaa, lajittelua ja niin edelleen.
Toisinaan käyttäjien on vahvistettava valinta nopeasti (esim. suodattimet yllä olevan kuvan mukaisesti) ja edettävä sitten välittömästi sieltä. Automaattinen tallennus voi tietysti saavuttaa saman, mutta sitä ei aina tarvita tai haluta. Ja käyttöliittymän estäminen ei useinkaan ole hyvä idea. Modaaleja ei kuitenkaan käytetä mihinkään tehtäviin. Yleensä käytämme niitä yksittäisiin itsenäisiin tehtäviin, joissa käyttäjien tulee hypätä mukaan, suorittaa tehtävä ja palata sitten sinne, missä he olivat. Ei ole yllättävää, että ne toimivat hyvin korkean prioriteetin ja lyhyen vuorovaikutuksen yhteydessä (esim. hälytykset, tuhoavat toimet, nopeat vahvistukset). Kun modaalit auttavat: 🚫 Modaalit ovat usein häiritseviä, invasiivisia ja hämmentäviä.🚫 Ne vaikeuttavat vertailua ja kopiointia ja liittämistä.✅ Modaalien avulla käyttäjät voivat kuitenkin ylläpitää useita konteksteja.✅ Hyödyllinen estämään peruuttamattomia virheitä ja tietojen menetystä.✅ Hyödyllistä, jos käyttäjien lähettäminen uudelle sivulle häiritsee. ✅ Näytä modaali vain, jos käyttäjät arvostavat häiriötä.✅ Valitse oletuksena estämättömät valintaikkunat ("ei-modaalit").✅ Salli käyttäjien minimoida, piilottaa tai palauttaa valintaikkuna myöhemmin.✅ Käytä modaalia hidastaaksesi käyttäjiä, esim. tarkista monimutkainen syöte.✅ Anna ulospääsy "Sulje"- tai klikkaa ESC-näppäimellä. Sivut → Monimutkaisia, monivaiheisia työnkulkuja varten Ohjatut toiminnot tai välilehdillä navigointi modaalien sisällä eivät toimi liian hyvin edes monimutkaisissa yritystuotteissa – sivupaneelit tai laatikot toimivat yleensä paremmin. Ongelmat alkavat, kun käyttäjien on verrattava tai viitattava tietopisteisiin – mutta modaalit estävät tämän toiminnan, joten he avaavat saman sivun uudelleen useilla välilehdillä.
Yksinkertaiset sivut toimivat parhaiten monimutkaisemmissa työnkuluissa ja monivaiheisissa prosesseissa. Sivut toimivat myös paremmin, kun ne vaativat käyttäjän täyden huomion, eikä viittaus edelliseen näyttöön ole kovin hyödyllinen. Vetolaatikot toimivat myös alitehtävissä, jotka ovat liian monimutkaisia yksinkertaiselle modaalille, mutta jotka eivät vaadi koko sivun navigointia. Milloin modaaleja kannattaa välttää: 🚫 Vältä modaaleja virheilmoituksille.🚫 Vältä modaaleja ominaisuusilmoituksissa.🚫 Vältä modaaleja perehdyttämiskokemuksen saamiseksi.🚫 Vältä modaaleja monimutkaisissa, pitkissä monivaiheisissa tehtävissä.🚫 Vältä useita sisäkkäisiä modaaleja ja käytä sen sijaan prev/next A absoluuttinen autos.less. Vältä molempiaToistuviin tehtäviin Monissa monimutkaisissa ja vaativissa tuotteissa käyttäjät huomaavat suorittavansa samoja tehtäviä toistuvasti, yhä uudelleen ja uudelleen. Siellä sekä modaalit että uudet sivunavigaatiot lisäävät kitkaa, koska ne keskeyttävät kulun tai pakottavat käyttäjät keräämään puuttuvia tietoja kaikkien eri välilehtien tai näkymien välillä. Liian usein käyttäjät päätyvät rikkinäiseen kokemukseen, joka on täynnä loputtomia vahvistuksia, liioiteltuja varoituksia, yksityiskohtaisia ohjeita tai vain puuttuvia viitepisteitä. Kuten Saulius Stebulis mainitsi, näissä skenaarioissa laajennettavat osiot tai paikan päällä tapahtuva muokkaus toimivat usein paremmin – ne pitävät tehtävän ankkuroituna nykyiseen näyttöön. Käytännössä monissa skenaarioissa käyttäjät eivät suorita tehtäviään eristyksissä. Heidän on etsittävä tietoja, kopioitava ja liitettävä arvoja, tarkennettava merkintöjä eri paikoista tai vain tarkasteltava samanlaisia tietueita tehdessään tehtäviä. Peittokuvat ja laatikot ovat hyödyllisempiä taustatietojen käytön ylläpitämisessä tehtävän aikana. Tämän seurauksena konteksti pysyy aina paikoillaan, käytettävissä viitettä tai kopioi-liitä varten. Säästä modaalit ja sivunavigointi hetkiä varten, jolloin keskeytys tuo aidosti lisäarvoa – erityisesti välttääksesi kriittiset virheet. Modals vs. Pages: A Decision Tree Jonkin aikaa sitten Ryan Neufeld kokosi erittäin hyödyllisen oppaan, joka auttaa suunnittelijoita valitsemaan modaalien ja sivujen välillä. Sen mukana tulee kätevä PNG-huijaustaulukko ja Google Doc -malli, jossa on 7 osioon jaoteltuja kysymyksiä. Se on pitkä, erittäin perusteellinen, mutta erittäin helppo seurata:
Se saattaa näyttää pelottavalta, mutta se on melko yksinkertainen 4-vaiheinen prosessi:
Context of the screen.First, we check if users need to maintain the context of the underlying screen. Tehtävän monimutkaisuus ja kesto. Yksinkertaisemmissa, kohdistetuissa, häiritsemättömissä tehtävissä voitaisiin käyttää modaalista, mutta pitkät ja monimutkaiset työt tarvitsevat sivun. Viittaus taustalla olevalle sivulle. Tarkistamme sitten, tarvitseeko käyttäjien usein viitata taustalla oleviin tietoihin vai onko tehtävä pelkkä vahvistus tai valinta. Oikean peittokuvan valitseminen. Lopuksi, jos peittokuva on todella hyvä vaihtoehto, se ohjaa meitä valitsemaan modaalisen tai ei-modaalisen (nojautuu ei-modaaliseen).
Päätös Aina kun mahdollista, vältä koko käyttöliittymän estämistä. Valitse kelluva valintaikkuna, joka peittää osittain käyttöliittymän, mutta sallii navigoinnin, vierityksen ja kopioinnin ja liittämisen. Tai näytä modaalin sisältö sivulaatikona. Tai käytä sen sijaan pystysuoraa harmonikkaa. Tai tuo käyttäjät erilliselle sivulle, jos haluat näyttää paljon yksityiskohtia. Mutta jos haluat lisätä käyttäjien tehokkuutta ja nopeutta, vältä modaaleja hinnalla millä hyvänsä. Käytä niitä hidastaaksesi käyttäjiä, yhdistämään heidän huomionsa ja estämään virheitä. Kuten Therese Fessenden totesi, kukaan ei pidä keskeytyksestä, mutta jos sinun on pakko, varmista, että se on ehdottomasti hintansa arvoinen. Tapaa "älykkäiden käyttöliittymien suunnittelumallit" Löydät kokonaisen osion modaaleista ja vaihtoehdoista Smart Interface Design Patterns -osiosta, 15 tunnin videokurssiltamme, jossa on 100 käytännön esimerkkejä tosielämän projekteista – live UX -koulutuksella myöhemmin tänä vuonna. Kaikkea mega-pudotusvalikosta monimutkaisiin yritystaulukoihin – 5 uutta segmenttiä lisätään joka vuosi. Siirry ilmaiseen esikatseluun. Käytä koodia BIRDIE säästääksesi 15 %. Tutustu Smart Interface Design Patterns -videokurssiimme käyttöliittymäsuunnittelusta ja käyttökokemuksesta.
Video + UX-koulutus VainVideoVideo + UX-koulutus 495,00 $ 699,00 $
Hanki video + UX-koulutus25 videotuntia (15h) + Live UX-koulutus. 100 päivän rahat takaisin -takuu. Vain video 300,00 $ 395,00
Hanki videokurssi40 videotuntia (15h). Päivitetään vuosittain. Saatavilla myös UX-pakettina, jossa on 2 videokurssia.
Hyödyllisiä resursseja
Erityyppiset ponnahdusikkunat, kirjoittanut Anna Kaley Uxcelin parhaat käytännöt käyttöliittymämodaalien suunnitteluun Käytämme liian monia pirun modaaleja: UX-ohjeet, kirjoittanut Adrian Egger Modaaliset ja ei-modaaliset dialogit, kirjoittanut Therese Fessenden Moderni yrityskäyttöliittymäsuunnittelu: Modal Dialogs, James Jacobs Modaalit suunnittelujärjestelmissä
