Professionell webbdesign: vad det innebär i praktiken

Användarupplevelse och användargränssnitt

UX är vad besökaren upplever. UI är knapparna, menyerna och formulären som besökaren faktiskt klickar på. Skillnaden låter akademisk, men den syns direkt när något går fel. En hemsida kan ha ett vackert gränssnitt och ändå vara omöjlig att ta sig igenom.

Det mesta av arbetet ligger i navigationen. Den som landar på en undersida ska inom ett par sekunder förstå var på hemsidan den har hamnat, vad företaget gör och vart nästa klick leder. Annars går besökaren tillbaka till sökresultatet. Det är de besöken som syns som avvisningsfrekvens i analysverktyget, och oftast beror den på navigationen, inte på trafiken.

Enhetlighet ger förtroende, och det handlar inte om estetik. När knappar ser likadana ut på alla sidor, när rubriknivåerna följer samma mönster och när samma färg alltid betyder samma sak, slipper besökaren lära om vid varje klick. Slarv i de detaljerna läser folk som slarv i övrigt. Det är orättvist mot företag som gör ett bra jobb i verkligheten, men så fungerar det.

Sedan finns den delen av användarupplevelsen som ingen märker förrän den saknas: att sidan laddar snabbt och beter sig likadant i olika webbläsare. De flesta besök börjar i en mobil, och en mobil på dålig uppkoppling är det hårdaste test en hemsida kan utsättas för. Därför mäter vi prestanda innan vi mäter något annat. En design som bara fungerar på en snabb dator är inte färdig.

Sökmotoroptimering och synlighet

Ingen ser designen på en hemsida som aldrig dyker upp i sökresultatet. Sökmotoroptimering är därför inget man lägger till efteråt, utan en följd av hur sidan är byggd: vilken kod som skickas till webbläsaren, hur snabbt den visas och hur innehållet är strukturerat.

I praktiken handlar det om rubriknivåer som följer innehållets logik, adresser som går att läsa, bilder i rätt format och sidor som svarar snabbt. En del av det mäter Google direkt, genom Core Web Vitals. Resten märks indirekt: en sida som känns trög tappar besökare, och den signalen når sökmotorn ändå.

Det svåra är inte att veta det här. Det svåra är att bygga så att det håller. Många hemsidor tappar sin sökmotoroptimering i efterhand, när någon lägger till en bildkarusell eller ett tredjepartsskript som drar ner hela sidan. Ett ramverk som tar hand om bilder och sidladdning åt en gör den typen av tillägg mindre farliga, och det är en av anledningarna till att vi valde Next.js.

Lokal sökning är en egen sak. Ett företag i Malmö konkurrerar sällan med hela landet utan med de tio närmaste konkurrenterna. Där avgör detaljer: att adress och kontaktuppgifter står i text på sidan, att företaget är rätt registrerat hos Google och att sidan faktiskt nämner orten den vänder sig till. Det är enkelt arbete, men på en lokal marknad gör det mer skillnad än det mesta annat.

Säkerhet och drift

Två saker som sällan syns i en designpresentation avgör om hemsidan går att lita på: att den är säker och att den är uppe.

Säkerhet

Kryptering med HTTPS är sedan länge ett minimikrav och inget att slå sig för bröstet över. Det som skiljer hemsidor åt är hur mycket som går att attackera över huvud taget. En hemsida byggd på ett CMS med tjugo tillägg har tjugo underhållsberoenden, och vart och ett av dem kan bli en väg in. En sida där innehållet hämtas vid bygget och serveras som färdiga filer har betydligt färre rörliga delar.

För en webbutik blir det extra tydligt, eftersom besökaren lämnar ifrån sig uppgifter som inte går att ta tillbaka om något går fel. Svaret är nästan alltid att inte hantera kortuppgifter själv utan låta en etablerad betalleverantör göra det, så att känslig data aldrig passerar den egna servern.

Upptid

Det spelar ingen roll hur bra hemsidan ser ut de dagar den är nere. Upptid handlar mindre om design och mer om var sidan ligger och hur den når besökaren. Färdiga sidor från ett CDN har helt enkelt färre sätt att gå sönder än en databasdriven sida som räknar ut varje sidvisning på nytt.

Det märks i sökresultatet också. En hemsida som svarar långsamt eller ligger nere när Google tittar förbi tappar placeringar, och de kommer inte tillbaka av sig själva den dagen driften är löst.

Det här är den tråkiga halvan av webbdesign. Den syns aldrig i en portfölj, men det är det första besökaren märker när den inte fungerar.

Responsiv design och olika enheter

Responsiv design betyder att samma sida anpassar sig efter skärmen den visas på. Det låter självklart i dag, men skillnaden är fortfarande stor mellan en hemsida som är byggd för mobil från början och en som fått mobilanpassningen påklistrad i efterhand.

En hemsida som inte är gjord för mobil känns igen direkt. Texten är för liten, knapparna sitter för tätt, och något element sticker ut i sidled så att hela sidan går att dra fram och tillbaka. Besökaren zoomar, missar en knapp och lämnar.

Vi utgår från den minsta skärmen och bygger uppåt. Det är ingen smaksak utan en prioriteringsordning. Börjar man i mobilen tvingas man bestämma vad som faktiskt är viktigast på sidan, och den bedömningen förbättrar datorversionen också.

Olika typer av enheter

Sidan visas inte bara i telefoner, surfplattor och datorer. Den kan också hamna i en klocka, på en tv eller i en uppläsare som återger den som ren text. Att anpassa sidan för var och en av dem är bortkastad tid. Är HTML-koden korrekt och kontrasterna rimliga fungerar de flesta ändå. Samma arbete gör sidan användbar för den som navigerar med tangentbord eller skärmläsare.

Google indexerar också mobilversionen av en hemsida, inte datorversionen. Är mobilupplevelsen sämre är det den sämre versionen som bedöms.

Det är ytterligare ett argument för att börja i mobilen i stället för att sluta där.

Vad som avgör i praktiken

De fyra delarna hänger ihop, och brister i en drar ner de andra. En långsam sida tappar de besökare den får. En osynlig sida får inga att tappa. En som känns otrygg får besök men inga affärer. Det går inte att lösa delarna var för sig och sedan lägga ihop resultatet, eftersom besluten krockar: bildkarusellen som ser bra ut i presentationen är samma bildkarusell som gör sidan långsam.

Vad som ändras framåt

AI-verktyg har redan flyttat en del av arbetet. De skriver utkast och genererar gränssnitt snabbare än någon hinner rita dem för hand, och det blir allt fler medelmåttiga hemsidor. Det gör inte design mindre värd. Det gör skillnaden mellan genomtänkt och genererat tydligare för den som tittar noga.

Däremot tror vi inte på att byta teknik bara för att något är nytt. VR och AR har utlovats på webben i över tio år utan att bli intressant för ett vanligt företag som vill sälja en tjänst. Det som betalar sig är fortfarande tråkigt: snabbare sidor, tydligare struktur, färre saker som kan gå sönder.

Om du bara gör en sak

Mät var du står innan du bestämmer vad som ska byggas om. Kör sidan genom ett prestandatest, titta på hur den ser ut i en telefon på dålig uppkoppling, och sök på ditt eget företagsnamn plus orten du finns i. De tre sakerna tar en kvart och säger oftast mer om vad som behöver göras än en offert gör.

Så jobbar vi

Vi bygger hemsidor i Next.js där design, laddtid och SEO hänger ihop från början i stället för att lösas var för sig i efterhand. Läs mer här:

Testa hur snabb din nuvarande hemsida är

Läs mer om hur vi bygger hemsidor

Next.js eller WordPress: vad passar din webbplats?

Så jobbar vi med SEO och synlighet

Vanliga frågor