Vad är det
Wizard är ett pattern som hjälper och leder användaren genom en interface steg för steg. Det består av en fördelning av steg och förklarande delar av en större process som ska hjälpa användaren att genomföra uppgiften i fråga. Hur en Wizard är utformad varierar beroende på plattform och område, men strukturer likt Titled Sections, Responsive Enabling och Responsive Disclosure förblir återkommande.
- Titled Sections: Genom att synliggöra samtliga steg av en process med hjälp av nummer eller ikoner och tillhörande rubrik så skapas en överblick över hela processen. Detta gör att en användare med lätthet kan se vart denne befinner sig i processen och vad för information som kan förväntas presenteras framgent.
- Responsive Enabling: Samtliga steg av processen presenteras samtidigt men kommande steg förblir inaktiva tills det att användaren slutflört föregående steg.
- Responsive Disclosure: Innebär att information presenteras stegvis och att kommande steg synliggörs först när användaren är klar med föregående steg.
När används det?
Wizard bör användas då användare ska genomföra en uppgift som har många steg i sig och som kommer påverka framtida åtaganden. Ibland kan det handla om att användaren måste genomföra uppgifter för att kunna ta del av en programvara. Det kan vara i samband med en installation av programvara eller slutförandet av ett köp på en webbplats. Det är med andra ord viktigt att tillämpa en Wizard där det behövs underlättas för användarens kognitiva belastning. Viktigt att tänka på när det kommer till applicering av Wizard är vem uppgiften riktar sig mot. Behöver användaren hjälp(?), och i så fall, krävs det tillräckligt många uppdelningar av uppgiften för att kunna motivera en Wizard? För eftersom en Wizard både ger och tar i form av frihet hos användaren att röra sig på plattformen så kan det orsaka frustration beroende på vem användaren är.
Hur används det?
Hur en Wizard används är olika beroende på plattform men vad som är viktigt att tänka på är hur de olika stegen ska delas upp och att det följer ett visst mönster för att återigen, underlätta för användarens kognitiva belastning. En Wizard utnyttjas bäst för enstaka tillfällen där användaren kan behöva hjälp för att genomföra vald uppgift.
Grupperingar av de olika uppgifterna bör följa någon form av tematisering för att lättare kunna reducera det totala antalet steg i Wizarden som generellt rekommenderas till 6-8 steg. Vanligt är till exempel att gruppera personlig information för sig i ett eget steg och betalningsalternativ i ett annat steg.
Eget exempel
Bra exempel från webben
https://www.zalando.se/man-home/
Ett bra exempel på ett hur ett Wizard-mönster kan användas är Zalandos utcheckningsprocess som presenteras nedan i figuren ovan. Zalando nyttjar sin ikoniska och starka orangea färg för att belysa nuvarande steg i utcheckningsprocessen. Resterande fyra steg i utcheckningsprocessen är nedtonade för att inte dra till sig uppmärksamhet, men finns även synliga för att förbereda användaren och visa på vad som kan förväntas presenteras vid respektive kommande steg.
Under utcheckningsprocessen så finns möjligheten att gå tillbaka till föregående steg genom att klicka på de olika numrerade stegen. Det är även möjligt att trycka på länken “Tillbaka till butiken” som avbryter utcheckningsprocessen och för användaren till webbplatsens startsida. Denna handlingsfrihet skapar en känsla av kontroll vilket gör att risken för att användaren ska känna sig infångad begränsas.
- Norwegian visar på en enkel och tydlig struktur med tydliga grupperingar av steg som behöver genomföras. Man kan lätt ta del av var man är i processen genom att se till “Titled sections” på den övre högra delen av sidan.
- Alternativ för rörelse både fram och tillbaka finns tillgängliga såväl som en knapp för att avbryta processen. Fortsätt-knappen kommunicerar med sin röda färg tydligt var man behöver trycka för att komma vidare i processen.
- Informativ text som beskriver en provisorisk uppdelning i det aktuella steget finns tillgänglig.
På SAS hemsida ser vi ett bra exempel på en Wizard. När du har gjort din sökning på tillgängliga flyg så kan du se högst upp på sidan i vilken ordning du kommer att få välja saker och fylla i information. Det är också väldigt bra att man kan se på vilken punkt man ska göra sin betalning eftersom om man bara kollar tillgängliga flyg, lediga platser eller vilka tillval som finns, men inte vill boka än så vet man att man inte ska gå förbi punkt 5 för då kan man debiteras.
Dåliga exempel från webben
På IKEAs webbsida presenteras man inför en wizard när man ska slutföra ett köp online. De har valt att visa stegen på vertikal nivå där genomförda steg visas överst, nuvarande steg visas i mitten och endast nästkommande steg visas med låg opacitet nederst.
Nackdelar:
- Inga möjlighet för att röra sig till föregående steg.
- Måste trycka på webbläsaren tillbakaknapp för den funktionen. Kan vara medvetet men skapar frustration hos oss.
- Svårt att få en överblick av hur många steg det är totalt.
- Man får enbart reda på nästa steg i processen.
- Går inte att få reda på vilket som är det sista steget i processen.
- Man måste scrolla för att kunna se hela Wizarden.
SJ´s webbplattform för bokning av resor visar på en i första anblick väl genomarbetad wizard vad gäller stegvis presenterad information och allmän överblick över bokningsprocess, men som fallerar när användaren vill gå tillbaka i bokningsprocessen. Denna möjlighet finns ej vilket innebär att användaren måste börja om på nytt.
Trycker användaren på tillbaka knappen i webbläsaren så visas dock en modal panel som informerar användaren om att bokningen kommer att avbrytas om vederbörande går vidare. Denna varnande funktion fungerar bra som ett informerande komplement, men en större rörelsefrihet under bokningsprocessen hade skapat en starkare känsla av kontroll hos användaren.
När man ska checka ut och färdigställa sitt köp hos Junkyard möts man av en wizard som enligt oss inte är tillräckligt tydlig. Man ser vad nästa steg är, men inte vad den innehåller. Man får inte heller någon information om hur många steg det är totalt, eftersom man enbart ser rubriken på nästa steg. Att gå tillbaka till föregående steg går att göra, men det är inte tydligt nog. Man får klicka på fliken i fråga för att komma dit, så istället borde det tydliggöras på något sätt med en bakåtknapp eller tydlig pil eller liknande.
Länk till fler bra & dåliga exempel: https://interfacepatternsresource.school.blog/wizard-bra-daliga-exempel/
Källor:
Kurslitteratur
https://interfacepatternsblog.wordpress.com/wizard/
https://uxplanet.org/wizard-design-pattern-8c86e14f2a38
http://www.designinginterfaces.com/firstedition/index.php?page=Responsive_Disclosure
Interface Patterns – Designmönster för användargränssnitt | På svenska 