Bra exempel från webben:

En wizard är en så kallad ”ledhjälp” när användare ska utför någon form av uppgift exempelvis genomföra en bokning/order eller installera en funktion. En bra utformad wizard innehåller tydliga steg samt innefattas inte av för mycket information på respektive sida, det ska även vara enkelt för användaren att gå både framåt och tillbaka. Det är även viktigt att tydligt visa respektive steg för användaren något som tui.se gör tydligt vid en bokning av resa:

TUI bokningssystem (Tui.se)

Designtorgets Utcheckning

Designtorgets utcheckning är ett bra exempel på en wizard. All information presenteras direkt och på en liten yta så att man tydligt vet att detta är det som kommer behövas fyllas i för att du ska kunna köpa produkten. Ytterliggare information presenteras successivt och man vet att om man följer det så kommer slutföra köpet inom kort.

Adobe Photoshop

Adobe Photoshop använder sig av en Wizard för att användaren ska utföra en uppgift med många steg som inte kan förenklas. De delar upp uppgifterna logiskt, vanligtvis bara mellan 3 och 7 steg. Användaren meddelas hur många steg det finns totalt, och de ger ytterligare hjälp med konturer och dialog bubbla. Deras webbsida skapa en ”låt mig inte tänka, berätta bara vad jag ska göra härnäst.”-känsla för användaren.

Inet

Inets checkoutprocess har tydliga uppdelningar. De har en transparent design där man ser vad som ska göras i varje steg även om man är i ett annat steg för tillfället. Användaren har även möjlighet att ändra i föregående steg även om man gått förbi. Enda nackdelen vi kan se här är att användaren behöver scrolla ner för att se samtliga steg.

Dåliga exempel från webben:

Albatros bokningssystem (Albatros.se)

I det dåliga exemplet ovan demonstreras Albatross bokningssystem, de negativa med deras system är att dem lagt ihop allt innehåll relaterat till deras bokning på en och samma sida. Detta är något som försvårar bokningen för användaren då det totalt sett blir för mycket information samt steg på en och samma gång.

Gamestops utcheckning (Inte en Wizard)

Detta är dock inte en wizard utan en funktion som skulle dragit nytta av responsive enabling för att strukturera informationen och tillgängliggöra den stegvis för att underlätta syftet. Själva sidan i sig är rörig och skulle behöva (Redigering pågående)

MANGO

Mango:s utcheckning webbsida kan inte räknas som ett mycket dåligt exempel men jag tror att för den här webbplatsen kanske inte wizard funktionen hjälper så mycket eftersom uppgiften i sig inte är så komplex. Man kan till exempel se kundinformation, leverans och betalningsmetod på en och samma sida. Det är ingen stor skillnad om användaren har en wizard eller inte på den här sidan.

Här har vi ett annat exempel på en dålig wizard. Det är bra att försöka hålla nere antalet steg i processen så att det inte känns överväldigande eller förvirrande. En bra regel att förhålla sig till är att hålla antalet steg till max 6st. I det här exemplet skulle man kunna lägga ihop några punkter till en och samma istället för att göra varje uppgift till en punkt. T.ex 1-4 skulle kunna vara en punkt och samma med 6-8 och 11-12.