Hvað einkennir góða vefhönnun?

Góð vefhönnun er hönnun sem lætur notandann ná markmiði sínu án þess að hann þurfi að hugsa um vefinn sjálfan. Hún er skýr í uppbyggingu, hröð í notkun, aðgengileg öllum og trú vörumerkinu sem hún þjónar. Fallegt útlit er hluti af þessu, en það er afleiðing af góðum ákvörðunum, ekki upphafspunkturinn.

Hjá Flóru höfum við hannað yfir 35 vefi á einu ári og dæmt í Íslensku vefverðlaununum. Sama mynstrið kemur upp aftur og aftur: vefir sem virka vel eiga nokkur sameiginleg einkenni, og þau má læra að þekkja. Hér eru þau.

Skýrt markmið á hverri síðu

Hver síða á góðum vef svarar einni spurningu: hvað á notandinn að gera hér? Forsíða ferðaþjónustufyrirtækis á að koma fólki í bókun. Þjónustusíða ráðgjafarstofu á að koma fólki í samtal. Þegar síða reynir að gera allt í einu, með fjórum jafnstórum tökkum og þremur skilaboðum sem keppa um athygli, gerir hún ekkert vel.

Góð hönnun byrjar því á forgangsröðun. Ein aðalaðgerð, ein skýr fyrirsögn, og allt annað styður við hana. Þetta er einfalt að segja og erfitt að gera, því hver deild í fyrirtækinu vill fá sitt efni ofarlega. Hönnuðurinn þarf að hafa umboð til að segja nei. Við höfum skrifað meira um þetta í greininni Hvernig hannar maður vefsíðu sem selur?.

Sjónrænt stigveldi sem leiðir augað

Þegar notandi opnar síðu skannar hann hana á innan við tveimur sekúndum. Augað leitar að stærstu fyrirsögninni, síðan að myndinni, síðan að takkanum. Góð vefhönnun nýtir þetta og raðar hlutum þannig að augað fari í réttri röð: fyrirsögn, stuðningstexti, aðgerð.

Stigveldi er búið til með stærð, lit, þyngd leturs og bili. Fyrirsögn sem er 48 punktar og undirtexti sem er 18 punktar segja notandanum strax hvað skiptir mestu máli. Ef allt er í sömu stærð og sama lit þarf notandinn að lesa allt til að finna það sem hann leitar að, og margir gefast upp áður.

Hvítt rými er stærsta tólið hér og það sem íslensk fyrirtæki óttast mest. Auður flötur kringum fyrirsögn gefur henni þunga. Þéttpakkað efni gerir allt jafnþungt og því jafn ósýnilegt. Ítarlegri umfjöllun um þetta er í Hvað er white space í vefhönnun og af hverju ætti ég ekki að óttast það?.

Leiðakerfi sem þarf ekki að læra

Á góðum vef veit notandinn alltaf hvar hann er, hvert hann getur farið og hvernig hann kemst til baka. Valmyndin hefur fimm til sjö atriði, ekki fimmtán. Heitin í valmyndinni eru orð sem viðskiptavinurinn notar, ekki innanhússheiti fyrirtækisins. „Verð" virkar betur en „Lausnir og þjónustuframboð".

Þetta er upplýsingaarkitektúr, og hann er oftast ósýnilegur þegar hann er góður. Notandinn tekur ekki eftir því að hann fann réttu síðuna á fyrsta smelli. Hann tekur hins vegar eftir því þegar hann finnur hana ekki. Við förum dýpra í þetta í Hvað er upplýsingaarkitektúr og af hverju skiptir hann máli?.

Hraði og virkni á síma

Yfir 60 prósent af umferð á íslenska fyrirtækjavefi kemur úr símum, og hjá ferðaþjónustu er hlutfallið oft hærra. Góð vefhönnun er því hönnuð fyrir símann fyrst og stækkuð upp á skjá, ekki öfugt. Takkar eru nógu stórir fyrir þumalfingur, texti er lesanlegur án þess að stækka og myndir hlaðast hratt á farsímaneti.

Hraði er hluti af hönnun, ekki bara tækni. Hönnuður sem setur 8 MB hetjumynd efst á forsíðu hefur tekið hönnunarákvörðun sem kostar notandann þrjár sekúndur. Google mælir þetta með Core Web Vitals og lætur það hafa áhrif á röðun. Vefir sem Flóra byggir í Framer fá alla jafna 90 til 100 í frammistöðu hjá Lighthouse, og það er ekki tilviljun heldur afleiðing af því að hraði er inni í hönnunarferlinu frá fyrsta degi.

Aðgengi fyrir alla notendur

Góður vefur virkar fyrir fólk með skerta sjón, fólk sem notar lyklaborð í stað músar og fólk með skjálesara. Þetta þýðir nægilegan litakontrast (að minnsta kosti 4,5:1 á venjulegum texta samkvæmt WCAG 2.1), alt-texta á myndum, fyrirsagnir í réttri röð og form sem hægt er að fylla út án músar.

Frá og með júní 2025 gilda evrópsku aðgengislögin (European Accessibility Act) um netverslanir og fjölda þjónustuvefa, og íslensk lög um aðgengi opinberra vefja hafa verið í gildi lengur. Aðgengi er því ekki lengur valkvæður gæðastimpill heldur lágmarkskrafa. Það sem færri átta sig á er að aðgengileg hönnun er nær alltaf betri hönnun fyrir alla: skýr kontrast, stórir takkar og rökrétt röð fyrirsagna hjálpa hverjum einasta notanda. Meira um kröfurnar í Þarf vefsíðan mín að uppfylla WCAG?.

Samræmi og trúmennska við vörumerkið

Góð vefhönnun notar eitt kerfi: sömu litina, sömu leturgerðirnar, sömu takkastílana og sömu bilin á öllum síðum. Notandinn lærir kerfið á fyrstu síðu og þarf ekki að læra það aftur á næstu. Þegar takki er blár og ávalur á forsíðu en grár og kantaður á þjónustusíðu brotnar traustið, jafnvel þótt notandinn geti ekki bent á hvað fór úrskeiðis.

Samræmið nær líka til vörumerkisins utan vefsins. Ef fyrirtækið er hlýlegt og persónulegt á samfélagsmiðlum en vefurinn er kaldur og stofnanalegur, upplifir viðskiptavinurinn tvö ólík fyrirtæki. Vefurinn er oftast stærsti snertiflöturinn við vörumerkið og á að bera það áfram, ekki vinna gegn því.

Efni sem talar mannamál

Hönnun og texti eru ekki aðskildir hlutir. Fallegasta uppsetning heims bjargar ekki fyrirsögn eins og „Heildstæðar lausnir fyrir framsækin fyrirtæki". Góð vefhönnun gerir ráð fyrir stuttum, skýrum texta sem svarar spurningum notandans: hvað gerið þið, fyrir hverja og hvað kostar það.

Þetta hefur fengið aukið vægi með gervigreind. ChatGPT, Perplexity og Google AI Overviews lesa vefinn og velja skýrustu svörin til að vitna í. Vefur með beinar fyrirsagnir og bein svör kemst inn í þau svör; vefur með slagorð og óljósar lýsingar gerir það ekki.

Hvernig metur þú eigin vef?

Fljótlegasta prófið er að fá einhvern sem þekkir ekki fyrirtækið til að opna vefinn í síma og segja upphátt, innan tíu sekúndna, hvað fyrirtækið gerir og hvað hann ætti að gera næst. Ef hann hikar á öðru hvoru atriðinu er stigveldið eða efnið ekki að vinna sitt verk.

Næst má keyra vefinn í gegnum Lighthouse í Chrome og skoða tölurnar fyrir frammistöðu og aðgengi. Undir 70 er merki um að hönnunin sé að vinna gegn notandanum. Að lokum má fara í gegnum valmyndina og spyrja um hvert atriði: myndi viðskiptavinur nota þetta orð?

Ef þú vilt fá hlutlaust álit á vefnum þínum tökum við hjá Flóru vel á móti þér. Við skoðum vefinn, bendum á það sem virkar og það sem gæti virkað betur, og segjum þér heiðarlega hvort þörf sé á nýjum vef eða lagfæringum. Sendu okkur línu á florastudio.is/tilbod eða á hallo@florastudio.is.

Algengar spurningar

Er góð vefhönnun það sama og falleg vefsíða?

Nei. Falleg síða sem enginn skilur eða getur notað er misheppnuð hönnun. Góð vefhönnun setur virkni og skýrleika fyrst og fegurðin fylgir með sem afleiðing af skipulögðum ákvörðunum um stigveldi, bil og samræmi.

Hvað eru algengustu mistökin í vefhönnun íslenskra fyrirtækja?

Of mörg skilaboð á forsíðu, valmyndir með innanhússorðum, þungar myndir sem hægja á vefnum og ónógur litakontrast. Fimmta atriðið er að hanna fyrir skjáinn á skrifstofunni þótt meirihluti notenda sé í síma.

Hversu oft þarf að endurskoða hönnun á vef?

Góð hönnun endist þrjú til fimm ár ef vefurinn er uppfærður jafnt og þétt. Merkin um að tími sé kominn á endurskoðun eru lækkandi umbreytingarhlutfall, hönnun sem passar ekki lengur við vörumerkið og tæknilegir gallar á síma. Sjá Hvenær þarf ég að endurnýja vefsíðuna mína?.

Skiptir vefumsjónarkerfið máli fyrir hönnunina?

Já, að einhverju leyti. Kerfi eins og Framer gefa hönnuðinum fulla stjórn á útliti, hreyfingu og hraða án þess að forritari þurfi að þýða hönnunina yfir í kóða. Í eldri kerfum tapast oft hluti hönnunarinnar í þeirri þýðingu.