Tomma lägen, fel och laddning – de glömda vyerna
Av CodexierPublicerad 4 min läsning
De flesta designfiler visar produkten från sin bästa sida: listor fulla av realistiska data, varje anrop lyckat, allt inläst. Riktiga användare möter något annat först. Ett nytt konto är tomt. Nätet försvinner. En rapport tar tio sekunder. De här lägena avgör första intrycket, driver en stor del av supportärendena och lämnas ofta åt en utvecklare att improvisera kvällen före lansering. Här får du mönster för vart och ett.
Därför spelar de här lägena roll
En ny användares första vy är oftast tom. Står det bara "Inga projekt hittades" har du tappat ögonblicket då hen var som mest motiverad. Ett fel som säger "Något gick fel" blir ett supportärende. En tom vit skärm i tre sekunder får produkten att kännas trasig även när den inte är det. Att designa de här lägena är billigt – att låta bli betalas med tappade kunder och supporttid.
Tomma lägen som visar vägen
| Typ av tomt | Exempel | Det här ska visas |
|---|---|---|
| Första användningen | Ett nytt konto utan kunder än | En mening om vad som hör hemma här, en tydlig knapp för att lägga till det första och gärna exempeldata eller import |
| Användaren har tömt | Tom inkorg, alla uppgifter klara | Bekräftelse på att jobbet är gjort, ingen uppmaning behövs |
| Inga träffar | En sökning eller ett filter utan resultat | Sökordet visat igen, ett sätt att rensa filter och förslag på liknande ord |
| Ingen behörighet | En del som användarens roll inte får se | Varför, och vem man ber om behörighet |
Håll tonen enkel och hjälpsam. En illustration är valfri, ett tydligt nästa steg är det inte. Vår guide om mikrotexter för knappar och fel går igenom formuleringarna i detalj.
Fel som förklarar och återhämtar sig
Ett bra felmeddelande svarar på tre frågor: vad hände, är mitt arbete i säkerhet och vad gör jag nu. Det visas nära problemet, inte i en allmän banner högst upp. Det undviker tekniska koder i huvudtexten men kan ha en referens till supporten. Och produkten ska återhämta sig själv där det går: försöka spara igen, behålla formulärdata när ett skick misslyckas och köa ändringar när nätet är borta.
Valideringsfel
Intill fältet, på vanlig svenska, och visat när användaren lämnar fältet eller skickar – inte medan hen skriver.
Nätverksfel
Säg att anslutningen bröts, bekräfta att osparade data finns kvar, erbjud nytt försök och försök automatiskt i bakgrunden.
Behörighetsfel
Förklara vilken roll som krävs och hur man begär den, i stället för ett naket "åtkomst nekad".
Serverfel
Be kort om ursäkt, visa en referenskod för supporten och tappa aldrig det användaren har skrivit.
Laddning och skelettvyer
Design av laddning handlar om upplevd hastighet. Skelettvyer som speglar den kommande layouten känns snabbare än en centrerad snurra, eftersom användaren ser strukturen komma. Visa innehåll efter hand i stället för att vänta på allt. För åtgärder som tar mer än några sekunder: visa förlopp och låt användaren arbeta vidare. För väldigt korta väntetider: visa ingenting alls – en snurra som blinkar till under en bråkdel av en sekund skapar bara oro.
- Under ungefär en halv sekund: ingen indikator.
- Upp till några sekunder: skelett eller en liten snurra på den del som laddar.
- Längre uppgifter: förlopp med beskrivning och möjlighet att fortsätta med annat.
- Bakgrundsjobb: meddela när de är klara i stället för att låta användaren vänta på skärmen.
- Meddela laddning och fel till skärmläsare med rätt live-regioner, som vi tar upp i vår guide om WCAG 2.2.
En checklista per komponent
- Lista varje komponent som hämtar eller sparar data: tabeller, listor, översiktspaneler, formulär, uppladdningar.
- Designa för var och en lägena tomt, laddar, fel och ifyllt, plus delvis data där det är relevant.
- Skriv texterna för varje läge och låt någon som pratar med kunder granska dem.
- Lägg in lägena i designsystemet så att utvecklarna återanvänder dem i stället för att improvisera.
- Testa på ett långsamt nät och med servern avstängd före lansering.
Vi tar med de här lägena som en självklar del av en produktdesignsprint. När du inte behöver en sprint: är produkten liten och ni har en designer internt räcker checklistan ovan långt. Vill du ha en extern granskning av era glömda vyer kan du boka ett kostnadsfritt samtal.
Vanliga frågor
Ska tomma lägen ha illustrationer?
De kan ha det, men illustrationen är den minst viktiga delen. En mening om vad som hör hemma här och en knapp för nästa steg gör det verkliga jobbet. Håll illustrationerna lätta så att de inte gör sidan långsam.
Är skelettvyer bättre än laddningssnurror?
För innehåll som laddas i en förutsägbar layout oftast ja, eftersom de visar strukturen och känns snabbare. För korta åtgärder som att spara är en liten snurra på knappen tydligare.
Ska felmeddelanden innehålla felkoder?
Inte som huvudbudskap. Börja med vanligt språk och ett nästa steg. En kort referenskod i mindre text hjälper supporten att hitta problemet i loggarna.
Vem ansvarar för de här lägena, designer eller utvecklare?
Båda, men de ska designas, inte improviseras. Designern tar fram mönster och texter, utvecklaren bygger dem konsekvent, helst från gemensamma komponenter.
Vill du få era glömda vyer granskade?
Visa oss produkten. På en kvart pekar vi ut de tomma lägen, fel och laddningsvyer som kostar er användare.
Boka ett kostnadsfritt 15-minuterssamtal