Vid det här laget i vår tidslinje finns det absolut ingen ursäkt för dålig produktdesign. I den ständigt konkurrensutsatta världen av mjukvaruprodukter är det inte förhandlingsbart att få sin UI- och UX-design rätt. Även om du har fantastisk teknik som kan lösa dina användares problem kommer dålig UX att få användarna att fly från din produkt – antingen för att de inte kunde förstå hur den skulle användas eller helt enkelt för att de hatar den.
Spänn fast dig; jag tänker ge lite ”tuff kärlek” om hur man inte ska arbeta med UX genom att lista produktdesignens sju dödssynder och avslöja några av de värsta exemplen.
Synd #1: ”Julgranen”
Ett av mina allra finaste barndomsminnen är när min syster och jag brukade klä julgranen. Så snart vi var klara tittade vi beundrande på den, eftersom den var något helt fantastiskt för oss. Nåja, åtminstone var det så vi såg den. Hur såg den egentligen ut? Ungefär så här.
Jag antar att du förstår vart jag är på väg med det här. Till skillnad från julgranen som du verkligen vill att dina barn ska dekorera precis som de själva vill, bör din UI och UX inte se ut som en enorm röra av element och färger som ligger utspridda överallt.
Nu ska vi titta på en verklig produkt som ser ut som en ”julgran”.
Titta bara på det här en stund och försök förklara för mig vad den här produkten handlar om. Jag är säker på att du också gick vilse i gränssnittet och inte kunde förstå det på ett tag. Det händer helt enkelt för mycket på den här skärmen; det är i princip omöjligt att förstå var du befinner dig och vad du ska göra.
De problem jag ser med det här gränssnittet är bland annat:
- Överdriven användning av färg: Färg är ett kraftfullt verktyg i händerna på skickliga produktdesigners, eftersom den kan leda användarna i rätt riktning. Men om du har för mycket färg i ditt UI försvagas denna kraft, och varje färgat element börjar konkurrera om uppmärksamheten.
- För många CTA:er: Vad är det viktigaste som jag ska klicka på nu? Ärligt talat har jag ingen aning – det finns knappar överallt.
- Förvirrande layout: Skärmen är alltså indelad i tre kolumner, där den mittersta har två flikar, och dessutom finns en stor tidslinjesektion längst ned. Designerna har försökt klämma in så många saker som möjligt på en enda skärm.
Gör så här i stället
Det här är ett exempel på när man försöker angripa UX genom att skapa någon form av ordning ur en stor mängd information. Se i stället din UX som en karta över det beteende du vill att dina användare ska ha. Det är produktdesignens grunder att färg, CTA:er och layout bör samverka för att leda användaren till rätt nästa steg.
Synd #2: Dålig visuell hierarki
Visuell hierarki syftar på hur elementen i ditt UI placeras på ett sätt som tydligt förmedlar det hierarkiska förhållandet mellan dem.
Artikeln du läser nu har till exempel en tydlig visuell hierarki: titeln står med stor text högst upp, underrubrikerna har mindre text än titeln men är mycket fetare än brödtexten, och så vidare.
I båda fallen framhäver vi titlarna genom att antingen göra dem större eller fetare – vilket tydligt visar att styckena handlar om de ämnen som anges i respektive underrubrik.
Visuell hierarki är ett utmärkt sätt att organisera ditt UI och göra det enkelt att navigera. Avsaknaden av den är däremot ett utmärkt sätt att få användarna att kämpa för att hitta rätt i ditt gränssnitt.
Ett av de mest framträdande exemplen på bristande visuell hierarki som irriterar mig dagligen är svarsdelen på Quora.
För att uppmuntra människor att bläddra bland andra frågor och stanna längre på deras webbplats har Quora även inkluderat frågor och svar som är relaterade till frågan du för närvarande tittar på.
Det stör mig inte. Det är ett befintligt användarbeteende, och Quora har hittat ett organiskt sätt att dra nytta av det.
Däremot stör jag mig på hur de har utformat dessa relaterade frågor och svar. De ser nästan identiska ut med de riktiga svaren på sidan och saknar visuell hierarki. Titta på skärmbilden ovan och säg vilken som är ett svar och vilken som är en relaterad fråga. Du måste verkligen läsa långsamt för att upptäcka skillnaden.
Have an account? Log In
Gör så här i stället
Helst skulle de relaterade frågorna vara mindre framträdande i användargränssnittet och ligga under huvudsvaren när det gäller deras visuella hierarki (till exempel ha en gråaktig bakgrund i stället för en vit).
Synd #3: Ett användargränssnitt direkt från 2000-talet
Jag vet, jag vet, Craigslist har ett fruktansvärt föråldrat användargränssnitt och fungerar ändå alldeles utmärkt. Men det är ett undantag från regeln, och du bör inte tro att det fortfarande är helt okej att ha något sådant år 2023.
Problemet är att din produkt, till skillnad från Craigslist, inte kommer att vara särskilt populär och inte har ett varumärke som är allmänt känt. Om människor därför såg något föråldrat när de besökte din webbplats eller använde din applikation skulle de helt enkelt inte ta dig på allvar. Du har dock alltid möjlighet att bli uppmärksammad genom din kreativa logotypdesign och ditt varumärkesarbete.
Tyvärr är det ibland de mest ”seriösa” organisationerna som gör sig skyldiga till denna synd.
Jag fick möjlighet att samarbeta med Armeniens centralbank för ett par år sedan. De har några av de mest talangfulla finansanalytikerna och experterna på penningpolitik som finns. Dessutom var institutionens chef (Harvardutbildad) tidigare min professor, och han är utan tvekan den smartaste person jag har träffat i mitt liv.
Centralbankens webbplats ser dock så dålig ut att det blir svårt för dig att tro att detta är en mycket framstående organisation med extremt kompetent personal.
Synd #4: Mörka mönster (eller att använda UX mot dina användare)
I UX-världen är ”mörka mönster” användarresor och gränssnittselement som vilseleder användaren och får hen att utföra en handling som hen inte är medveten om.
Det finns en viss e-handelsbutik med en orange pilformad logotyp som är särskilt ”känd” för att använda mörka mönster. De har gjort sig skyldiga till detta i sådan utsträckning att det pågår klagomål och utredningar mot dem för att de inte följer FCC:s regler.
En av de mest kända användarupplevelserna som faller inom denna kategori är sättet du förväntas avsluta ett Prime-medlemskap på.
För att vara rättvis tycker jag fortfarande att det är en bra idé att be dina användare om feedback när de avslutar sin betalda prenumeration, eller till och med erbjuda dem en rabatt av typen ”snälla, gå inte”. Men du måste respektera dina användares tid och tålamod.
Tänk på att de personer som vill avsluta din prenumeration sannolikt är irriterade på eller missnöjda med dig. Om du därför gör det svårt för dem att avsluta den kommer de att bli ännu argare (och du kan glömma möjligheten att få dem tillbaka någon gång i framtiden).
Om du till exempel försöker avsluta ditt Prime-medlemskap kommer Amazon att be dig tänka om.
Jag har inget emot den här skärmen, alla gör så.
Däremot tycker jag inte att det är okej att du måste bekräfta ditt val ytterligare två(!) gånger för att avsluta (ni skämtar, eller hur?). Dessutom är formuleringarna och färgerna de använder för sina CTA:er utformade för att göra det svårt för dig att hitta det alternativ som avslutar medlemskapet i stället för att behålla det.
Gör så här i stället
Försök inte lura dina användare att utföra en handling som strider mot deras avsikt, och försök inte ”nöta ner dem” genom att göra det överdrivet svårt att avsluta. Människor är tillräckligt smarta för att förstå att du gör det med flit, och det kommer bara att få dina konkurrenter att framstå som mer attraktiva. Gör i stället en kort undersökning om varför de lämnar dig och gör processen smidig, samtidigt som du lämnar dörren öppen för att de ska kunna återvända.
Synd #5: Att inte följa bästa praxis för formulär
Formulär är ett av webbplatsers grundläggande element och något av det första som utvecklare lär sig att bygga och designers lär sig att, ja, designa.
Att skapa en bra användarupplevelse för formulär är förmodligen ett av de mest diskuterade ämnena bland designers, och du kan hitta bästa praxis, guider och lektioner om det i stort sett överallt.
Author's Tip
Obs!: För mer information om detta ämne rekommenderar jag varmt boken ”Att utforma UX: formulär” av Jessica Enders
Med tanke på hur mycket utbildningsmaterial det finns om formulär och hur viktigt det är att utforma dem rätt (det påverkar trots allt direkt din kundanskaffning och andra viktiga mätvärden) skulle jag hävda att det är en synd att inte följa etablerade UX-bästa praxis för formulär.
Låt mig nu ge dig ett exempel på dålig produktdesign för formulär.
Jag kan inte ens titta på den här sidan utan att få ont i ögonen. Det är så otroligt mycket som är fel här. För att nämna några saker:
Felaktig användning av tomrum: Varför måste fältnamnen vara så långt från själva fälten? Varför använder du ett helt block för att placera två små växlingsknappar för upphämtning och leverans? Du kan skapa ett formulär som innehåller all information här och som är minst fyra gånger mindre och mycket lättare att överblicka.
Felaktig formatering av fält: Det finns ett telefonfält där siffrorna du skriver inte visas i ett telefonnummerformat (t.ex. +1 (555) 123-1234) för att göra dem lättare att läsa. Detta är så vanligt att majoriteten av designverktyg till och med har färdiga komponenter för det.
Avsaknad av platshållare: Man kan knappt se att det finns ett textfält i avsnittet ”Ytterligare leveransinstruktioner”. Dessutom är jag inte säker på vad man förväntas skriva där. En bra formulärupplevelse förutsätter alltid att det finns platshållare som ger en ledtråd, till exempel "Lämna paketet på verandan."
Gör så här i stället
Åtgärderna för vart och ett av dessa problem är ganska uppenbara, men det här är ett fall där det verkar som om de enda som testade formuläret var de som byggde det. Designerna hade gjort klokt i att samla in riktig användarfeedback om denna UX innan lanseringen.
Synd #6: Att använda fel UI-element
Nästa synd jag vill ta upp är en fortsättning på den föregående. Formulär är inte de enda UI-elementen i din produkt som bör följa väl etablerade konventioner och bästa praxis. Det finns även andra vanliga element, som växlingsknappar, kryssrutor och andra.
Faktum är att användarna redan har etablerade mentala modeller för hur vart och ett av dessa element fungerar, och du måste se till att du använder dem på rätt sätt.
Här är ett par exempel på vad dessa element är avsedda för och hur du inte ska använda dem:
Växlingsknappar: Detta element visar ett ”booleskt” tillstånd (till exempel att något är På/Av eller Aktivt/Inaktivt). De är utmärkta för att visa användarna statusen för Bluetooth-antennen i deras smartphone och låta dem slå på eller av den.
I det föregående formuläret finns det däremot två växlingsknappar som låter användaren välja mellan upphämtning och leverans.
Om du tänker på detta en stund har du redan tänkt på det längre än designern gjorde. Dessa växlingsknappar innebär att du måste stänga AV ”upphämtning” och slå PÅ ”leverans” för att välja alternativet ”leverans”! De kunde ha använt alternativknappar. Jag undrar ärligt talat vad som händer om en användare slår på båda samtidigt.
Urvalsmenyer utan filtrering: Eftersom urvalsmenyer är ett av de äldsta elementen på webbplatser är de fortfarande populära och mycket användarvänliga när de används korrekt.
Gör så här i stället
Bästa praxis säger att du bör använda en urvalsmeny när användaren behöver välja ett enda alternativ från en lista med 5–15 alternativ. Om det finns färre än 5 alternativ bör du i stället använda alternativknappar.
Om det finns en omfattande lista med alternativ att välja mellan (t.ex. 50 delstater i USA eller cirka 200 länder) behöver du lägga till filtrering i urvalsmenyn. Annars måste användaren bläddra igenom den långa listan för att hitta det alternativ de vill ha.
More Articles
Synd #7: Att bortse från vilka dina användare är och vad de vill ha
Slutligen den största synden av alla: att skapa en ny produkt med en UX-design som inte passar dina användares behov och intressen. Det är ett recept på misslyckande.
Gör så här i stället
En bra produktdesignprocess börjar alltid med användarundersökningar. Om du inte vet vilka dina användare är och vad de behöver kommer du, oavsett hur vackert användargränssnitt du skapar, nästan säkert att sluta med en dåligt utformad produkt.
Jag vet att användarundersökningar inte är någon enkel uppgift. Det tog trots allt flera år av användartester för Apple att uppnå en exceptionell användbarhet både inom industridesign och användarupplevelse för sin iPhone. Men tro mig, det är det enskilt mest betydelsefulla arbete du kan utföra för att säkerställa att din produkt blir framgångsrik.
Det är verkligen enkelt att undvika designsynder
Om du arbetar med att bygga webbplatser har du ett bättre utgångsläge. Varför? Eftersom webbdesignverktyg vanligtvis erbjuder mallar som redan undviker vissa av synderna som listas här. Men oavsett om du är ett startupföretag som utvecklar digitala produkter eller ett företag som bygger fysiska produkter (som tangentbord eller rörelsesensorer) är det faktiskt ganska enkelt att undvika dålig design.
Så länge din produktutvecklingsprocess fokuserar på dina användares behov och problemområden och du använder rätt produktdesignprogramvara kommer du att kunna undvika betydande designbrister och att sluta med en dåligt utformad produkt (detta är också en av de många fördelarna med AI-designprogramvara).
Jag hoppas att de här exemplen fick dig att känna dig bättre till mods över dina egna produkter, eller åtminstone gav dig ett litet skratt. För fler UX-tips och andra artiklar för personer som arbetar med produkter kan du prenumerera på vårt nyhetsbrev!
