UX

Höger, vänster eller ovanpå – forumlärnamn

Jag har tidigare skrivit om vad man bör tänka på när man fyller i ett webbformulär. Kan dock inte nog understryka hur pass viktigt det är att inte glömma detta. Dagligen stöter jag på standardformulär, slarvigt ihopsatta som får mig att rysa. Tänk om de bara visste hur mycket de förlorar på det.

Att jobba med webbformulär är bra mycket svårare än det ser ut. Tålamodet hos användare är generellt mindre och minsta snesteg kan straffa sig löjligt mycket. Således blir detaljer extra viktiga. En detalj, som tål att repeteras, och som många missar att fokusera på är placeringen av namn/etiketter vid formulärfälten.

Hur ska man tänka?

Förenklat kan man säga, enkla formulär – namnet ovanpå. Komplicerade formulär – namnet vänsterställt. Sammanställningen nedan av Matteo Penzos inlägg “Label placement in Forms” berättar allt du behöver veta och mer där till. Kan även starkt rekommendera att läsa hans inlägg.

Webform-alignment

Färgglada knappar & kassa banker

Med jämna mellanrum (som imorse) kan jag ställa mig frågandes till nivån på inläggen jag gör. Är det inte helt självklart att knappar som behvöver uppmärksamhet skall ha en alternativ färg? Behöver jag verkligen lägga en massa tid på en artikel som alla ändå redan vet?

Tydligen. Efter att ha slösurfat på några av de största bankernas webbplatser så blir man mörkrädd. Det är faktiskt sjukt vad dålig använbarheten är och inte blir man hjälpt av några färglada knappar som hintar om vart jag som användare skall trycka. Jag blev faktiskt så ledsen att bankerna inte förtjänas att länkas till (bara granskat startsidorna).  Håll i hatten.
SEB

SEB

Grönt på grönt? De ytor som lockar mest uppmärksamhet kan starkt ifrågasättas. Knapparna som finns får ingen uppmärksamhet (och därmed inga klick).

Handelsbanken

Handelsbanken

Inga knappar så långt ögat kan nå. Otydliga dropdowns, och ännu otydligare ingångar. Någonstans kan man tro att nya kunder är viktiga, men tydligen inte då den puffen ligget längst ner i högerkolumen. Vart ska jag som (ny)kund trycka? INGEN kommer vilja läsa det som står ovan.

Swebank

Swedbank

Knapplöst. Återigen, det blir väldigt otydligt vart (speciellt) nya användare skall trycka. Att ha en textöverfylld startsida är ingen bra strategi. Inte ens med en "splash"-area.

Ja, som ni ser är det inget att hurra över. Jag tycker absolut inte att man behöver trycka in färglada knappar överallt, men när användare letar efter navigationselement som tar de vidare är knappen ett starkt hjälpmedel. Dessutom blir det extremt kladdigt med all text i exemplen ovan. Det tillhör vanligheterna att användare vill ta sig vidare från en startsida till det mål de har så hjälp de.

Dark patterns: Gränssnitt designade för att lura

I normala fall när man tänker på dålig design så föreställer jag mig att det härstammar från okunskap, lathet eller andra allmänna misstag. Dålig design som orsakas de orsakerna kallas även för designantimönster.

Dark Patterns

Men all “dålig” design härstammar givetvis inte från misstag och klumpigheter och när det görs fullt medvetet så kallas det för “Dark patterns”. Det som skiljer “Dark patterns” åt från designantimönster är att designen är noggrant utformad med insikten om människors psykologi och beteenden. När företag använder sig av “Dark patterns” har de definitivt inte användarnas önskemål i åtanke utan vill få dig att utföra en handling som mestadels gynnar de själva, se bilden ovan.

View another webinar from Harry Brignull

WPO: Lägg stilmallarna i HEAD och “sänk” laddningstiden

Jag har tidigare skrivit lite om Web Performance Optimization (WPO) och jag är övertygad om att alla inser vikten av detta. Tänkte i detta inlägg, och även i några framtida, komma med några konkreta tips på hur man kan jobba med webbplatsen för att optimera laddningstiderna.

De smarta forskarna på Yahoo! upptäckte under sina prestandatester att om man flyttar stilmallarna upp till dokumentets <HEAD> så kan man få sidan att verka ladda snabbare. Detta är ju givetvis något av en standard idag, men alla kanske inte är helt med på varför. Genom att lägga stilmallarna i headern så tillåts nämligen sidan att laddas progressivt.

Vad betyder progressiv laddning?
Jo det betyder att vi vill att så fort det finns något att visa så skall webbläsaren visa det. Detta är speciellt viktigt om man antingen har mycket innehåll på en sida eller om man sitter på långsam internetuppkoppling. Vikten ligger i att ge användarna återkoppling om laddningsstatus på sidan vilket bevisats är av stor vikt för användarupplevelsen.  När sidan laddar progressivt så funkar alla element på sidan (huvud, meny, logga etc) som en visuell återkoppling på att sidan laddas korrekt och tillfredsställer förhoppnignsvis därmed den ivriga anvädnaren.

Skulle du fundera på att lägga stilmallarna i botten på sidan så kan detta avrekommenderas.  Dels för att W3C inte tycker att det är en bra idé men även för att detta hindrar många webbläsare (bland annat IE, surpirse) från att progressivt rendera sidan. Om sidan inte laddas progressivt så kommer användarna att sitta där med en blank skärm utan att veta vad som händer.

Summa summarum: Genom att lägga stillmallarna i headern så uppfattar användarna det som att sidan laddas snabbare och får även viseuell feedback om att sidan fakiskt laddas.

Så skapar du en bra “call-to-action”-knapp

Knappar kan vara bland de viktigaste komponenterna som en webbplats har. Som så mycket annat gällande UX så märks bra knappar inte av men dåliga sådana kan förstöra en för övrigt bra webbplats. Det blir extra viktigt att tänka på knapparna när du dessutom vill att användarna skall använda de för att genomföra en viktig handling. När man skapar en handlingsknapp eller “call-to-action”-knapp så finns det vissa saker man kan ha i bakhuvudet när man designar de för att uppnå maximal effekt:

  1. Välj orden nogrannt
    Knapparna skall hjälpa besökarna att genomföra en handling. Det blir extra viktigt att tänka på vad för copy knapparna har då du och dina besökare förmodligen använder er av olika ord. Undersök vilket vokabulär dina besökare använder sig av och använd dig av dessa trigger ord. Genom att du använder dig av besökarnas ord så minskas handlingsfriktionen då en förståelse för vad som förväntas uppnås snabbare.

    amazon-checkout
    Amazon.com & Amazon.co.uk har förstått vikten av att anpassa språket

     

  2. Positionering
    Ofta uppnår du en högre nytta genom att positionera knappen nära det innehåll som den relaterar till.  Nedan finns ett exempel från Virgin Money som har en effektiv “call-to-action” knapp placerad i samband med innehållet. Man har dessutom lagt tonvikt på att banta bort irrelevant information vilket ökar knappens närvaro på sidan.
    virgin money
    På bilden nedanför har Virgin Money valt att lägga “call-to-action” knappen  i höger kolumn vilket visserligen funkar då sidan fortfarande är relativt ren i sin design och besökarna lär lägga märket till knappen.
    virgin money
    Men sätt dig i användarnas sits. Om du är på följande sida och skall beställa ett nytt bankkort är sannolikheten stor att du skrollar ner för att ta del av hela prislistan. Vad händer? Jo, “call-to-action” knappen försvinner ur bild och Virgin tappar kunder på att inte låta knappen flyta med neråt eller placera en till knapp längre ner under innehållet.
    virgin money
    Självklart går det att skrolla upp och hitta knappen igen men försvinnandet av den skapar en handlingsfriktion och därmed en förlust av potentiella kunder.
  3. Välj rätt färg
    Som ni redan vet är användandet av färger väldigt väldigt viktigt då färger påverkar användarna mer än vad vi tror. En “call-to-action” knapp bör synas ordentligt, det är trots allt denna knapp som skall få använadarna att genomföra en handling. Lyser den inte så finns det en risk för att användarna kommer att missa den. Genom att reservera speciella (och kanske till och med från resten av sidan) avvikande färger så får du användarna att lägga märke till vad som är viktigt.

    linkedin

    LinkedIn använder sig av en gul färg för att signalera viktiga "call-to-action" knappar

    Akta dig dock för att använda en färg som smälter in alltför mycket på sidan. Genom att reservera en speciell färg åt viktiga knappar så förenklar man för användarna att veta vad de skall trycka på. Genom att använda sig av likadana färger ger en motsatt effekt.

    swinton

    Blått är inte alltid bra

  4. STORLEKEN
    Vad folk än säger så har storleken betydelse. Det finns till och med ett matematiskt bevis som bevisar att tiden det tar att upptäcka ett objekt är direkt härlett till objektets storlek, se Fitt’s lag. Knappens storlek kommunicerar även knappens betydelse och hjälper således besökarna att prioritera rätt.

    firefox

    Firefox förstår vikten av storlek och skalar bort det mesta på sidan och låter knappen ta plats

Sammanfattningsvis kan man säga att en bra design hjälper användarna att hitta och prioritera rätt. Detta gäller den övergripande designen såväl som för “call-to-action”-knapparna. Har du funktionalitet på sidan som du lägger extra stor prio på så se till att sänka handlingsfriktionen! Låt den ta plats, kommunicera betydelsen med färger, lägg den på rätt ställe och se till att skräddarsy copyn så ska du nog se att konverteringen kommer att börja ticka upp.

Snabbast vägen genom ett formflöde

Förra veckan skrev jag lite om svarsformulär och hur man bör lägga fältnamnen beroende på vad man vill uppnå. Efter att ha grottat ner mig mer i informationen (från samma inspiratör) hittade jag utmärkta case på hur ansträngande ett icke testat och optimerat flöde kan vara  för användaren.

long_path

Hoppigt, jobbigt & oanvändbart

Som ni ser i bilden ovan, förtydligat av pilarna, får ögat arbeta väldigt mycket för att ta till sig informationen. Det är omöjligt att ta in helheten och tiden som krävs för att ta sig genom flödet blir väldigt lång.

direct_path

Genom att välja en konsekvent “alignering”, i detta fall högerställda titlar med vänsterställd information, så kan besökaren snabbt skanna av informationen. Det blir enklare att skapa sig en helhetsbild och ta beslut om att gå vidare genom att trycka på knappen. Genom att sänka “time-to-action” sänker du även antalet avhopp i ett flöde.

heat_map

Avslutar med att visa en heat map på ögats fokuspunkter i ett bra byggt formulär. Gör det enkelt för besökaren att ta till sig information och belöningen kommer att komma i form av fler konverteringar.

Vart ska fältnamnet läggas i samband med svarsfält?

Det är än fråga som förmodligen inte många ställer sig och frågar man en interaktionsdesigner så går nog de flesta på magkänslan. Generellt finns det tre olika sätt att placera fältnamn i samband med svarsfält, texten ovanför fälten, högerställt samt vänsterställt framför fälten. Men är det så att olika placeringar lämpar sig bäst vid olika tillfällen, eller kan man placera texten “efter magkänsla”?

För att ta reda på detta utfördes år 2006  eye tracking undersökningar av herr Matteo Penzo som kom fram till följande: De tre olika sätten att placera fältnamn i samband med svarsfält gav vitt skilda resultat.

left_align_tracking

Låt oss ta en närmare titt på dessa tre alternativ.

Texten vänsterställd, framför fälten
left_align
När formulärnamnen var vänsterställda tog användarna tid på sig för att associera rätt namn till rätt fält. Detta krävde både fler ögonrörelser såväl som mer tid då det blev svårt för de att skapa sig en helhetsbild. Väljer du att vänsterställa fältnamnen så tänk på följande:
  • Passar bra när informationen som skall fyllas i är av en mer komplicerad karaktär
  • Mindre vertiklat utrymme behövs
  • Byte av fältnamn kan påverka designen
  • Möjliggör lätt överblick av fältnamnen
Texten högerställd, framför fälten
right_align

När formulärnamnen var högerställda upptäcktes en kraftig reducering av ögonrörelser. Detta sparade även in tid då användarna lyckades fylla i fälten på nästan halva tiden jämför med det vänsterställda alternativet.  Högerställer du fältnamnen så tänk på följande:

  • Associationen mellan fält och text blir tydligare
  • Mindre vertikalt utrymme behövs
  • Svårare att skanna av fältnamnen p.g.a. högerställning
  • Fälten fylls i snabbare
  • Passar bättre till information av enkel-svår karaktär

Texten ovanför fälten 

text ovanför fält

När formulärnamnen stod ovanför fälten så lyckades användarna att skanna av hela fältet med ett ögonsvep (riktigt snabbt). Det visade sig också att dessa formulär gick absolut snabbast att fylla i. Formulärnamn ovanför formulär lämpar sig alltså bäst när:

  • Du har mycket utrymme så besökarna får en god överblick
  • Du vill sänka tiden det tar att fylla i fälten
  • När informationen som användarna skall uppge är enkel
  • Behöver flexibilitet i layouten
Så som ni ser så skiljer det sig rätt mycket i hur man märker ut fältnamnen. Nu är det säkert ingen katastrof om ni upptäcker att ni har gjort det helt tvärtom, men kan vara värt att tänka på vid en eventuell re-design. Genom att lägga fältnamnet efter den nivå på information som skall in underlättar du för besökarna att klara av sina ärenden snabbare och förhoppningsvis mer korrekt.

Gracias till Luke W.

Användbarhet: Vart ska pilen peka?

Ibland så använder vi pilar i olika format tillsammans med text och länkar för att göra innehållet mer attraktivt och för att attrahera besökarnas intresse. Ofta så förekommer dessa små pilar i samband med länkande texter som till exempel “Läs mer” i slutet av kortare sammanfattningar. De två främsta variationerna som man stöter på är följande:

vart ska pilen peka

Frågan som dyker upp när man ser bilderna ovan är, vart ska pilarna egentligen peka? Vad säger en pil som ligger före texten och vad säger en pil som ligger efter? Låt oss bryta ned de två olika fallen.

Pilen före texten
När pilen placeras före texten och pekar på den så säger den “Hallå! Klicka här!”. Pilen uppmärksammar texten / länken genom att peka ut vad våra ögon skall fokusera på. Att använda en pil för att uppmärksamma viktiga länkar är väldigt användbart när målet till exempel är “call-to-action”. Du underlättar väsentligt för besökarna att intuitivt veta vad de skall göra genom att peka med pilen på objektet.

Pilen efter texten
När en pil är placerad efter länkade text / objekt så pekar den bort. Det pilen kommunicerar är “Hallå! Klicka här för att ta dig vidare!”. Det hela kan liknas vid en vägskylt där pilen som befinner sig efter namnet pekar mot stadens riktning. I vårt fall är det dock oturligt att pilen bara pekar mot ett tomrum bort från länken i motsats till en pil som är placerad före en text och hjälper besökaren hitta fokus.

När ska du använda vad?
Det finns inget universalt svar. Frågan du måst ställa dig är vad vill du att besökarna skall göra och uppfatta. Är du ute efter ett “call-to-action” gör du klokast i att peka pilen mot det objekt som besökarna skall interagera med. Vill du tydliggöra att en text länkar vidare eller att något kommer att hända så peka pilen mot den “naturliga riktningen”.

Så bygger du sociala upplevelser | Del 5 av 5

Steg 5 – Moderera varsamt. Låt communityt lyfta de personer och det innehåll de värderar högt.

Funktioner för att åstadkomma detta kan exempelvis göras med hjälp av omdömessymbolik eller betygsättning.

reputationlabels_yahoointranet

Omdömessymbolik på Yahoos intranät

Communityt kan hjälpa till att uppmärksamma kvalitativa bidrag vilket i sin tur kan bidra till att attrahera nya besökare och hålla interaktionen vid liv. Processen hjälper också med att dölja bidrag av dålig kvalité. Håll ett öga på ditt community, delta och välkomna nya användare samt se till att du blir en förebild för alla andra besökare.

rolemodel_catarina_hunch

Hunch grundaren Catarina Fake agerar som förebild för communityt som byggs på webbplatsen

Försök att lägga märket till vilka användare som är passionerade och vilka som orsakar problem. Lår diskussioner löpa ut naturligt och låt framför allt communityt moderera sig självt. Viktigt blir att tillgängliggöra verktyg för att till exempel kunna märka ut innehåll som spam, blocka användare och rapportera missbruk. Lägg dig endast i när det är absolut nödvändigt.

reportabuse_yahooanswers

Funktion för att kunna rapportera missbruk finns tillgänglig på varje kommentar på Yahoo! Answers och tillåter användare att själva moderera inläggens kvalité.

Dessa är några av de saker du ska tänka på när du bygger sociala applikationer eller när du ska lägga till social funktionalitet på din nuvarande webbplats. Det finns en hel del till sociala funktioner och koncept tillgängliga via det sociala ekosystemet men dessa 5 steg som jag gått igenom ger en bra grund att utgå från.

Och slutligen, du behöver absolut inte göra allt på en och samma gång. Börja med några enklare funktioner och lyssna sedan av med dina användare när det är dags att ta nästa steg. Addera komplexitet allteftersom ditt community växer och kom ihåg att du bygger ett forum för aktivitet och konversation – du behöver inte ha listat ut allt från dag ett. Dina användare kommer att skapa egna vägar för att interagera och hitta syfte och mål med närvaron.

Så bygger du sociala upplevelser | Del 4 av 5

Steg 4 – Skapa en bro till det verkliga livet (events, möten, mobilt etc..)

Var inte rädd för att bygga funktionalitet som låter dina användare att ta med sitt digitala community in till den verkliga världen. I många av de digitala grupperingar som råder känner ofta en majoritet av användarna varandra personligen.

localevents_upcoming

Upcoming exponerar lokala events och tillåter användarna att addera de i sina kalenderar samt bli varse om vilka events som vännerna visat intresse för.

Genom att tillhandahålla verktyg och funktioner för att planera in möten samt events och sedan arkivera dessa händelser så stärker du din webbplats och ditt community.
inreallife_meetup

Meetup låter personer beblanda sig med grupper av intresse och webbplatsen underlättar dessutom möten IRL mellan medlemmarna i olika grupper


 

1 2  Scroll to top