Þú hefur líklega verið þarna áður. Hvernig veljum við á milli þess að sýna notendum form og hvenær förum við þá á sérstaka, nýja síðu? Og skiptir það einhverju máli? Reyndar gerir það það. Ákvörðunin hefur áhrif á flæði notenda, samhengi þeirra, getu þeirra til að fletta upp smáatriðum og þar með villutíðni og verklok. Báðir valkostir geta verið truflandi og pirrandi - á röngum tíma og á röngum stað. Svo við ættum að hafa það rétt. Jæja, við skulum sjá hvernig á að gera einmitt það. Modals vs. Dialogs vs. Yfirlögn vs. Lightboxes Þó að við tölum oft um einn módel notendaviðmót, hunsum við oft fína, flókna blæbrigði á milli allra mismunandi gerða aðferða. Reyndar eru ekki allir gerðir eins. Módel, gluggar, yfirlög og ljósakassar - allt hljóma svipað, en þeir eru í raun mjög mismunandi:
DialogAlmennt orð fyrir „samtal“ (notandi ↔ kerfi). Yfirborð Lítið efnispjald sem birtist efst á síðu. ModalUser verður að hafa samskipti við yfirborð + bakgrunn óvirkt. Nonmodal User verður að hafa samskipti við yfirborð + bakgrunn virkt. Ljóskassi Dempaður bakgrunnur til að beina athyglinni að forminu.
Eins og Anna Kaley undirstrikar birtast flestar yfirlögn á röngum tíma, trufla notendur við mikilvæg verkefni, nota lélegt tungumál og brjóta flæði notenda. Þeir eru truflandi að eðlisfari, og venjulega með mikilli alvarleika án þess að mikil þörf sé á því.
Vissulega verður að hægja á notendum og trufla ef afleiðingar aðgerða þeirra hafa mikil áhrif, en í flestum tilfellum eru óviðmiðunaraðferðir miklu lúmskari og vingjarnlegri kostur til að vekja athygli notandans á einhverju. Ef eitthvað er þá legg ég alltaf til að það sé sjálfgefið. Modals → Fyrir einstök, sjálfstætt verkefni Sem hönnuðir höfnum við aðferðum oft sem óviðkomandi og pirrandi - og oft eru þau það! — samt hafa þeir sitt gildi líka. Þeir geta verið mjög gagnlegir til að vara notendur við hugsanlegum mistökum eða hjálpa þeim að forðast gagnatap. Þeir geta einnig hjálpað til við að framkvæma tengdar aðgerðir eða kafað niður í smáatriði án þess að trufla núverandi stöðu síðunnar. En stærsti kosturinn við modals er að þeir hjálpa notendum að halda samhengi núverandi skjás. Það þýðir ekki bara notendaviðmótið, heldur einnig breytt inntak, flettastöðu, ástand harmonikku, val á síum, flokkun og svo framvegis.
Stundum þurfa notendur að staðfesta val fljótt (t.d. síur eins og sýnt er hér að ofan) og halda síðan strax áfram þaðan. Sjálfvirk vistun getur auðvitað náð því sama, en það er ekki alltaf þörf eða óskað. Og oft er ekki góð hugmynd að loka á notendaviðmótið. Hins vegar eru gerðir ekki notaðar fyrir nein verkefni. Venjulega notum við þau fyrir stök, sjálfstætt verkefni þar sem notendur ættu að hoppa inn, klára verkefni og fara svo aftur þangað sem þeir voru. Það kemur ekki á óvart að þau virka vel fyrir stuttar samskipti í háum forgangi (t.d. viðvaranir, eyðileggjandi aðgerðir, skjótar staðfestingar). Þegar gerðir hjálpa: 🚫 Tillögur eru oft truflandi, ífarandi og ruglingslegar.🚫 Þeir gera það erfitt að bera saman og afrita-líma.✅ Samt gera aðferðirnar notendum kleift að viðhalda mörgum samhengi.✅ Gagnlegar til að koma í veg fyrir óafturkræfar villur og gagnatap.✅ Gagnlegt ef að senda notendur á nýja síðu væri truflandi. ✅ Sýna aðeins form ef notendur munu meta truflunina.✅ Sjálfgefið er að kjósa ekki-blokkandi glugga („nonmodals“).✅ Leyfa notendum að lágmarka, fela eða endurheimta svargluggann síðar.✅ Notaðu aðferð til að hægja á notendum, t.d. staðfesta flókið inntak.✅ Gefðu leið út með „Close“, ESC. Síður → Fyrir flókin, fjölþrepa verkflæði Wizards eða flipaleiðsögn innan forms virkar ekki of vel, jafnvel í flóknum fyrirtækjavörum - þar virka hliðarspjöld eða skúffur venjulega betur. Vandræði byrja þegar notendur þurfa að bera saman eða vísa til gagnapunkta - samt hindra aðgerðir þessa hegðun, svo þeir opna sömu síðu aftur á mörgum flipa í staðinn.
Fyrir flóknari flæði og fjölþrepa ferla virka sjálfstæðar síður best. Síður virka líka betur þegar þær krefjast fullrar athygli notandans og tilvísun í fyrri skjá er ekki mjög gagnleg. Og skúffur virka fyrir undirverkefni sem eru of flókin fyrir einfalda aðferð, en þurfa ekki yfirlit yfir alla síðu. Hvenær á að forðast aðferðir: 🚫 Forðastu gerðir fyrir villuskilaboð.🚫 Forðastu gerðir fyrir eiginleikatilkynningar.🚫 Forðastu aðferðir fyrir upplifun um borð.🚫 Forðastu aðferðir fyrir flókin, löng fjölþrepa verkefni.🚫 Forðastu mörg hreiður aðferð og notaðu fyrri/næsta í staðinn.🚫 Forðastu sjálfvirka ræsingu Forðastu bæðiFyrir endurtekin verkefni Í mörgum flóknum, verkþungum vörum munu notendur lenda í því að framkvæma sömu verkefnin ítrekað, aftur og aftur. Þar bæta bæði aðferðirnar og nýjar síðuleiðsagnir núningi vegna þess að þær trufla flæðið eða neyða notendur til að safna gögnum sem vantar á milli allra mismunandi flipa eða skoðana. Of oft lenda notendur með bilaða upplifun, fulla af endalausum staðfestingum, ýktum viðvörunum, margorðum leiðbeiningum eða vantar bara viðmiðunarpunkta. Eins og Saulius Stebulis nefndi, í þessum aðstæðum, virka stækkanlegir hlutar eða klipping á staðnum oft betur - þeir halda verkefninu festu við núverandi skjá. Í reynd, í mörgum tilfellum, klára notendur ekki verkefni sín í einangrun. Þeir þurfa að fletta upp gögnum, afrita og líma gildi, betrumbæta færslur á mismunandi stöðum eða bara skoða svipaðar færslur þegar þeir vinna í verkefnum sínum. Yfirlög og skúffur eru gagnlegri til að viðhalda aðgangi að bakgrunnsgögnum meðan á verkefninu stendur. Þar af leiðandi helst samhengið alltaf á sínum stað, tiltækt til tilvísunar eða copy-paste. Vistaðu gerðir og síðuleiðsögn fyrir augnablik þar sem truflunin bætir raunverulega gildi - sérstaklega til að koma í veg fyrir mikilvæg mistök. Modals vs. Pages: A Decision Tree Fyrir nokkru setti Ryan Neufeld saman mjög hjálpsaman leiðbeiningar til að hjálpa hönnuðum að velja á milli forms og síðna. Það kemur með handhægt PNG svindlblað og Google Doc sniðmát með spurningum skipt niður í 7 hluta. Það er langt, mjög ítarlegt, en mjög auðvelt að fylgja eftir:
Það gæti litið skelfilega út, en þetta er frekar einfalt fjögurra þrepa ferli:
Samhengi skjásins. Í fyrsta lagi athugum við hvort notendur þurfi að viðhalda samhengi undirliggjandi skjás. Flækjustig og lengd verkefnisins. Einfaldari, einbeitt, ekki truflandi verkefni gætu notað aðferð, en löng, flókin flæði þurfa síðu. Tilvísun í undirliggjandi síðu. Síðan athugum við hvort notendur þurfi oft að vísa til gagna í bakgrunni eða hvort verkefnið sé einföld staðfesting eða val. Að velja rétta yfirlögn. Að lokum, ef yfirlag er örugglega góður kostur, þá leiðir það okkur til að velja á milli forms eða nonmodal (hallast í átt að nonmodal).
Umbúðir Forðastu að loka öllu notendaviðmótinu þegar mögulegt er. Hafa glugga fljótandi, sem nær yfir notendaviðmótið að hluta, en leyfir flakk, skrun og afrita-líma. Eða sýndu innihald modalsins sem hliðarskúffu. Eða notaðu lóðrétta harmonikku í staðinn. Eða færðu notendur á sérstaka síðu ef þú þarft að sýna mikið af smáatriðum. En ef þú vilt efla skilvirkni og hraða notenda, forðastu aðgerðir hvað sem það kostar. Notaðu þær til að hægja á notendum, til að safna athygli þeirra, til að koma í veg fyrir mistök. Eins og Therese Fessenden benti á, finnst engum gaman að láta trufla sig, en ef þú verður, vertu viss um að það sé algjörlega þess virði. Kynntu þér „Smart Interface Design Patterns“ Þú getur fundið heilan kafla um snið og valkosti í Smart Interface Design Patterns, 15 klst myndbandanámskeiðinu okkar með 100s af hagnýtum dæmum úr raunverulegum verkefnum - með lifandi UX þjálfun síðar á þessu ári. Allt frá risastórum fellilistanum til flókinna fyrirtækjatafla – með 5 nýjum hlutum bætt við á hverju ári. Farðu í ókeypis forskoðun. Notaðu kóðann BIRDIE til að spara 15% afslátt. Kynntu þér Smart Interface Design Patterns, myndbandsnámskeiðið okkar um viðmótshönnun og UX.
Myndband + UX þjálfun Aðeins myndskeið + UX þjálfun$ 495.00 $ 699.00
Fáðu myndband + UX þjálfun 25 myndskeiðskennslu (15 klst.) + UX þjálfun í beinni.100 daga peningaábyrgð. Aðeins 300,00 $ 395,00 $ vídeó
Fáðu myndbandsnámskeiðið40 myndbandstímar (15klst). Uppfært árlega. Einnig fáanlegt sem UX búnt með 2 myndbandsnámskeiðum.
Gagnlegar auðlindir
Mismunandi gerðir sprettiglugga, eftir Önnu Kaley Bestu starfsvenjur til að hanna notendaviðmót, eftir Uxcel We Use Too Many Damn Modals: UX Guidelines, eftir Adrian Egger Modal & Nonmodal Dialogs, eftir Therese Fessenden Modern Enterprise UI Design: Modal Dialogs, eftir James Jacobs Modals í hönnunarkerfum
