Valmynd á vefsíðu: skýr leið að næsta skrefi

Valmyndin er ákvörðun um forgang, ekki listi yfir allt á vefnum

Valmynd virðist oft vera lítið hönnunarverkefni sem leysist með því að raða núverandi síðum í hausinn. Í raun segir hún gestinum hvað fyrirtækið býður, hvernig efnið hangir saman og hvaða leið er líklegust að réttu næsta skrefi. Ef hún endurspeglar innra skipurit, óljós vörunöfn eða allar síður sem hafa einhvern tíma verið búnar til þarf gesturinn að læra fyrirtækið áður en hann getur notað vefinn.

Stutta svarið: byrjaðu á verkefnunum sem mikilvægustu gestirnir þurfa að klára, ekki á síðulistanum. Hafðu aðalvalmyndina afmarkaða, notaðu skýr heiti sem lýsa áfangastaðnum og láttu þjónustur, vörur eða önnur lykilverk eiga sýnilega leið. Prófaðu svo sömu verkefni í síma, með lyklaborði og frá innri síðu — ekki aðeins frá forsíðunni.

Þessi grein fjallar um valmynd, leiðarkerfi og forgang milli síðna. Hún er ekki almenn leið um hvað á að vera á forsíðu, tæknileg heildarúttekt á vefaðgengi eða uppskrift að því að setja fleiri leitarorð í hausinn. Markmiðið er að hjálpa fólki að komast á réttan stað með sem minnstum núningi.

Byrjaðu á verkum notenda, ekki deildum fyrirtækisins

Skráðu fyrst hvaða erindi vefurinn þarf að leysa. Fyrir þjónustufyrirtæki gætu mikilvægustu verkin verið að skilja þjónustu, sjá dæmi, meta verðforsendur og senda hæft erindi. Í netverslun gætu þau verið að finna vöruflokk, þrengja val, skilja sendingu og ljúka kaupum. Fyrir bókunarvef gætu þau verið að sjá framboð, bera saman valkosti og staðfesta bókun.

Flokkaðu síðan núverandi síður eftir því hvaða verki þær hjálpa. Þá verður fljótt sýnilegt:

• hvaða síður eru raunverulegir áfangastaðir
• hvaða síður eru stuðningsefni innan leiðar
• hvar tvær síður reyna að vinna sama starf
• hvaða mikilvægu verkefni eiga enga skýra síðu
• hvaða gamlar síður þurfa ekki pláss í aðalvalmynd þó þær haldist á vefnum

Þetta er önnur vinna en að teikna fallegan haus. Ef síðueignarhald er óskýrt mun ný valmynd aðeins færa ruglinginn til.

Veldu hvað fær pláss í aðalvalmyndinni

Aðalvalmyndin á að leiða að stærstu, endurteknu verkefnunum. Hún þarf ekki að vera heildaryfirlit yfir allan vefinn. Veldu efstu liði með því að spyrja:

• Er þetta algengt eða mikilvægt erindi fyrir markhópinn?
• Er til skýr síða sem leysir erindið?
• Skilur gestur heitið án þess að þekkja innra orðalag fyrirtækisins?
• Er þessi leið mikilvægari en það sem hún myndi ýta út eða fela?
• Virkar hún jafnt frá forsíðu og djúpri innri síðu?

Þjónusta, vörur, lausnir eða bókun þurfa oft sýnilega stöðu. Blogg, fréttir, starfsfólk og samstarf geta verið mikilvæg en eiga ekki sjálfkrafa sama forgang. Sumt getur farið í aukavalmynd eða fót, annað tengist betur í samhengi frá viðeigandi síðu.

Ekki festa tölu á borð við „alltaf fimm liðir“ sem algilda reglu. Lítið þjónustufyrirtæki og stór netverslun hafa ólík verkefni. Raunverulega markmiðið er að hver efsti liður hafi skýrt hlutverk og að gesturinn þurfi ekki að skanna langa röð jafnrétthárra valkosta.

Heitin eiga að lýsa áfangastaðnum

Valmyndarheiti eru loforð um hvað gerist eftir smell. „Þjónusta“, „Vörur“ og „Verð“ geta verið skýr þegar þau passa efnið. Orð á borð við „Heimur okkar“, „Lausnir framtíðarinnar“ eða innra deildarheiti geta hljómað vel en sagt lítið um áfangastaðinn.

Prófaðu heitin án hönnunar:

• Getur nýr viðskiptavinur sagt hvað er á bak við hvert orð?
• Greinast tveir nálægir liðir skýrt að?
• Passar fyrirsögn áfangasíðunnar við væntinguna sem heitið bjó til?
• Myndi sama orð merkja það sama í síma, leit og samtali við söluteymið?

Lýsandi heiti hjálpa líka leitarvélum að skilja samhengi tenglanna. Google leggur áherslu á að innri tenglar séu venjulegir, skriðanlegir hlekkir og að tenglatexti sé lýsandi í leiðbeiningum um crawlable links og anchor text. Þetta er þó ekki leyfi til að troða leitarorðum í hvern lið. Heitið þarf fyrst að vera eðlilegt fyrir fólk.

Veldu stigveldi eftir efni, ekki eftir plássinu í hausnum

Undirvalmynd á rétt á sér þegar hún afhjúpar raunverulegt stigveldi. Þjónustuflokkur getur til dæmis opnað þrjár skýrar sérþjónustur. Vöruflokkur getur opnað nokkra undirflokka sem kaupandi þekkir. En ef undirvalmynd verður geymsla fyrir tugi óskyldra tengla er vandinn líklega efnisarkitektúrinn sjálfur.

Einföld aðalvalmynd

Hentar þegar vefurinn hefur fáa sterka áfangastaði og stutta kaupferð. Gesturinn sér leiðirnar strax og þarf ekki að opna millilag.

Undirvalmynd með einum skýrum hópi

Hentar þegar einn efsti liður hefur nokkur eðlileg börn. Foreldrasíðan þarf samt að hafa hlutverk: yfirlit, samanburð eða leið að réttu vali. Hún á ekki að vera tóm millilending sem aðeins endurtekur undirvalmyndina.

Stærri yfirlitsvalmynd

Getur hentað stórum vef með mörgum stöðugum flokkum, en aðeins ef hópar, fyrirsagnir og röð hjálpa gestinum að þrengja valið. Stórt spjald með öllum mögulegum tenglum er ekki sjálfkrafa „mega menu“ sem bætir upplifunina.

Leit og sérleiðir

Vefleit verður gagnleg þegar safnið er nógu stórt og fólk þekkir heiti eða hugtak sem það vill finna. Hún leysir ekki óskýra grunnuppbyggingu. Brauðmolar, tengdir kaflar og veftré geta einnig veitt aðra leið inn í efnið. W3C bendir á að ólíkir notendur geti þurft fleiri en eina leið að síðum í skýringum á WCAG 2.4.5, Multiple Ways.

Fóturinn hefur annað hlutverk en aðalvalmyndin

Fótur getur geymt stöðugar hjálparleiðir: samskipti, skilmála, persónuvernd, starfsumsóknir, samfélagsmiðla og ítarlegra vefyfirlit. Hann má líka endurtaka mikilvægar aðalleiðir. Hann á hins vegar ekki að vera felustaður fyrir þjónustu sem fyrirtækið vill selja en fann ekki pláss fyrir ofar.

Spyrðu um hvern fóttengil hvort hann hjálpi fólki sem er komið neðarlega á síðu að ljúka verki, sannreyna upplýsingar eða skipta um leið. Ef svarið er nei gæti tengillinn verið óþarfur eða átt heima í samhengi annars staðar.

Sími er sérstakt próf, ekki minnkuð útgáfa af skjáborði

Á litlum skjá breytist bæði pláss og samskipti. Fellivalmynd sem virkar með músarbendli getur orðið erfið með snertingu. Langur listi getur fyllt allan skjáinn og falið hvort notandi opnaði réttan flokk. Prófa þarf raunveruleg verkefni, ekki bara hvort hamborgaratáknið opnist.

Staðfestu meðal annars að:

• opnunarhnappur hafi skýrt heiti og sýnilegt opið eða lokað ástand
• hægt sé að loka valmynd án þess að missa stað eða festast
• foreldri og undirflokkur séu aðskildar aðgerðir ef bæði þurfa að vera virk
• snertiflötur sé nægur og liðir liggi ekki of þétt
• langur listi skrolli án þess að bakgrunnur og valmynd keppi um snertingu
• fókus fari á rökréttan stað þegar valmynd opnast og lokast
• mikilvæg aðgerð, til dæmis bókun eða fyrirspurn, verði ekki eina sjáanlega leiðin á kostnað þess að skilja þjónustuna

W3C lýsir valmyndum sem lykilhluta af nothæfi vefs og leggur áherslu á uppbyggingu, skýr stöðumerki og notkun með lyklaborði í leiðbeiningum um aðgengilegar valmyndir. Einföld, merkingarbær HTML-uppsetning er oft traustari en flókið viðmót sem reynir að líkja eftir skjáborðsforriti.

Aðgengi þarf að fylgja hönnuninni frá byrjun

Góð valmynd þarf að virka án músar og án þess að reiða sig eingöngu á sjónræna staðsetningu. Það þýðir meðal annars:

• merkingarbært leiðarkerfi með skýru heiti þegar fleiri en eitt nav-svæði er á síðunni
• hlekki fyrir áfangastaði og hnappa fyrir aðgerðir eins og að opna undirvalmynd
• sýnilegan lyklaborðsfókus
• rökrétta fókus- og lesröð
• rétt stöðumerki fyrir opna fellihluta
• sýnilegt merki um núverandi síðu eða hluta
• möguleika á að sleppa endurtekinni valmynd og fara í meginefni

Endurtekin leiðarkerfi eiga líka að halda sömu hlutfallslegu röð milli sambærilegra síðna. Það hjálpar notendum að byggja upp væntingar og er hluti af WCAG 2.2 skýringum um samræmt leiðarkerfi.

Ekki bíða þar til lokaprófun hefst með að laga þetta. Ef hönnunin gerir ráð fyrir aðgerðum sem birtast aðeins þegar mús svífur yfir, óskýrum táknum eða mörgum falnum lögum verður tæknileg viðgerð seint í ferlinu bæði dýrari og verri.

Innri tenglar eiga að taka við þar sem valmyndin sleppir

Aðalvalmyndin getur ekki borið allar tengingar á vefnum. Inni á þjónustusíðu þarf gesturinn kannski að sjá verkefnadæmi, verðforsendur, algengar spurningar og næsta skref. Á blogggrein þarf hann tengingu í viðeigandi þjónustu eða dýpri leiðbeiningu. Þetta er hlutverk samhengi-tengla, tengdra korta og skýrra kalla til aðgerða.

Innri tenglar fyrir SEO eiga því að vinna með valmyndinni en ekki afrita hana á hverri síðu. Valmyndin heldur utan um meginleiðir. Innri tenglar svara því hvað sé gagnlegt næst miðað við efnið sem gesturinn er að lesa.

Prófaðu verkefni áður en þú prófar smelli

Fyrsta notendaprófið þarf ekki stórt rannsóknarverkefni. Skrifaðu fimm til átta raunveruleg verkefni án þess að nota orðalag valmyndarinnar, til dæmis:

• „Þú þarft að sjá hvort fyrirtækið geti tekið að sér ákveðna þjónustu. Hvert ferð þú?“
• „Þú vilt vita hvaða kostnaður eða forsendur ráða verðinu. Hvar leitar þú?“
• „Þú ert búinn að lesa grein og vilt sjá hvort fyrirtækið geti hjálpað. Hvað gerir þú næst?“
• „Þú þarft að finna persónuverndarupplýsingar áður en þú sendir gögn. Hvar eru þær?“

Láttu fólk sem þekkir ekki innra orðalag fyrirtækisins velja leið á einföldu síðukorti eða frumgerð. Biddu það að hugsa upphátt. Skráðu hvar það hikar, hvaða heiti það túlkar öðruvísi og hvort það fer aftur á bak. Prófaðu síðan sama verkefni í síma og með lyklaborði á virku viðmóti.

Ef þrír velja „Um okkur“ til að finna þjónustu er ekki nóg að segja að þeir hafi misskilið vefinn. Merkið eða uppbyggingin er líklega að senda rangt loforð.

Mældu hvort leiðin hjálpar réttu fólki áfram

Smellir á valmynd segja ekki einir hvort hún virkar. Mikill smellafjöldi getur þýtt áhuga, en líka að gestir séu að reyna margar leiðir vegna óvissu.

Tengdu mælingu við verkefni:

• hlutfall gesta sem komast frá yfirliti á rétta þjónustu eða vöruflokk
• notkun vefleitar og leitarskilmálar sem gefa til kynna að eitthvað sé falið
• endurtekin hopp milli tveggja svipaðra liða
• leið frá lykilsíðu í fyrirspurn, bókun eða kaup
• villusmellir, lokun og enduropnun í farsímavalmynd
• spurningar í sölu eða þjónustu sem vefurinn hefði átt að svara

Berðu saman fyrir og eftir með sömu skilgreiningu á árangri. Ekki breyta valmynd, fyrirsögnum, tilboði og mælingum samtímis og eigna síðan valmyndinni allan muninn.

Gátlisti fyrir birtingu

• Mikilvægustu notendaverkin hafa verið skráð.
• Hver efsti valmyndarliður hefur skýrt hlutverk og raunverulegan áfangastað.
• Heitin lýsa efni síðnanna án innra orðalags eða leitarorðastöflunar.
• Undirvalmyndir endurspegla raunverulega hópa, ekki bara plássþörf.
• Lykilþjónusta eða vara er ekki falin í fæti eða óskyldum flokki.
• Hlekkir eru skriðanlegir og virka án sértækrar JavaScript-aðgerðar.
• Valmynd opnast, lokast og skrollar rétt í síma.
• Allir liðir og stjórntæki virka með lyklaborði og hafa sýnilegan fókus.
• Núverandi síða og opið eða lokað ástand eru skiljanleg.
• Brauðmolar, leit eða önnur leið er til staðar þegar stærð vefsins krefst þess.
• Innri tenglar leiða áfram í viðeigandi næsta efni eða aðgerð.
• Verkefnapróf hefur verið gert með fólki sem þekkir ekki innra skipulagið.
• Mælingar tengjast því hvort fólk ljúki verki, ekki aðeins fjölda smella.

Byggðu leiðarkerfið áður en þú skreytir hausinn

Sterk valmynd verður til þegar fyrirtækið velur hvaða verkefni skipta mestu, hvaða síður eiga þau og hvaða orð gesturinn skilur. Hönnun og hreyfing geta síðan gert leiðina skýra og þægilega, en þær geta ekki leyst óákveðið síðuhlutverk.

Byrjaðu því á notendaverkum og áfangasíðum. Hafðu meginleiðir sýnilegar, notaðu undirflokka aðeins þegar stigveldið er raunverulegt og láttu innri tengla, brauðmola, leit og fót taka við þar sem aðalvalmyndin á ekki að bera meira. Prófaðu sömu leiðir í síma, með lyklaborði og frá djúpri síðu áður en vefurinn er samþykktur.

Ef valmyndin hefur vaxið upp úr innra skipuriti eða nýr vefur þarf skýrara leiðarkerfi getur 55.is kortlagt síður, notendaverk og næstu skref sem hluta af vefsíðugerð áður en útlitið er læst.