En bättre Internetbank

February 10th, 2008

Ungefär hälften av alla mellan 16-74 år använder idag dessa tjänster för att betala sina räkningar och sköta sin privatekonomi enligt Statistika Centralbyråns rapport “Privatpersoners användning av datorer och Internet 2005″ [PDF, 934K]). Både unga och gamla med allt ifrån ingen till stor datorvana, personer med synskador eller nedsatt syn osv. Trots detta är användbarheten på dessa tjänster skrämmande låg. Detta 12 år efter att den första Internetbanken öppnat i Sverige. Det otydliga språket, ogenomtänkta interaktionsdesignen och onödigt svåra hanteringen gör att man känner sig osäker, frustrerad och kanske till och med ger upp i sina försök. När det enda man ville göra var att betala en räkning som ju borde vara ganska enkelt, eller?

Med ganska enkla medel skulle man kunna ändra på detta.

Problemet

Vi har tagit SEB som exempel, men deras problem gäller även de andra banktjänster vi sett (Nordea, Handelsbanken, SwedBank). Därför har vi sammanfattat några uppmaningar till bankerna angående deras internettjänster:

  1. Gör det lätt att hitta och snabbt komma till det viktigaste
    Det är lätt att bli förvirrad och känna sig osäker när man blir presenterad med så mycket information och valmöjligheter på en gång. De flesta vill ju faktiskt bara betala sina räkningar, göra en överföring eller kolla sitt saldo och sen logga ut. Genom att märka ut delar med större grad på texten, färger eller annan visuell indikation kan man förmedla vilka delar av gränssnittet som är viktigast. Den andra funktionaliteten bör läggas i bakgrunden för att ge plats åt det viktigaste. Att använda de smalare tjänsterna är ett aktivt val vilket gör att man letar sig fram dit och då lär sig var de är (även detta ska vara enkelt så klart, men man behöver inte trycka på dem för alla).
  2. Skriv så att alla förstår
    När man har en tjänst som riktar sig till både unga och gamla, användare med liten eller ingen datorvana bör man vara väldigt noggrann med hur man formulerar sig så rakt och enkelt som möjligt. Språk är gränssnittsdesign. Skippa det tekniska snacket och formulera er så att alla förstår och känner sig trygga när de gör sina bankärenden. En hjälptext bör svara på frågor inte skapa nya.
  3. Öka graden på text
    Det finns ingen som tycker att 10 pixlars verdana är lättläst. Skärmars snabbt ökande upplösning gör det inte bättre. Kombinationen av dåligt språk och liten text gör informationen väldigt otillgänglig.
  4. Bättre koppling mellan etiketterna och fälten de tillhör man ska fylla i
    Genom att skapa en bättre visuell koppling mellan etiketter och förklaringar till det fält man ska fylla i gör man det enklare att förstå hur man ska använda tjänsten och minskar risken för fel. Gränssnittet blir förklarande och hjälpande i sig, vilket minskar behovet av hjälptexter.
  5. Gör tjänsterna tillgängliga
    Tillgängligheten i dessa tjänster är väldigt dålig och funkar ofta inte i alla webbläsare, är otillgängliga för synskadade som använder text-till-tal webbläsare och mobiltelefoner. Att göra rätt och följa standarder är inte dyrare eller svårare.

Lösningen

I Drömuppdraget i förra årets januarinummer av InternetWorld (1/2007 s. 58) gjorde vi slag i saken genom att formulerade våra tankar kring en mer användbar Internetbank. Det resulterade i ett förslag på en ny och bättre design av SEBs internetbank, eller mer specifikt själva sidan man betalar en räkning (artikeln skrevs av Pierre Andersson). (Fråga inte varför vi inte lagt ut denna bloggpost förrän nu, ett år senare…)
Så här ser SEBs Internetbank ut i dag:

Skärmdump på SEBs betalsida

Efter att ha definierat problemen ovan gick vi igenom varje detalj av sidan och fundera kring hur vi kunde förbättra dem. Viktigt att påpeka är att eftersom vi gjorde helt utifrån våra antaganden har vi friskt kunnat rensa bort delar vi sett som onödiga utan att ha behövt ta hänsyn till tekniska eller affärsmässiga begränsningar som SEB kan tänkas ha.

  1. Förenklad, renodlad navigation och andra element som är med på alla sidor
    Vi förenklade navigationen genom att ge plats åt de funktioner som är viktigast. Vår tanke är att navigationen kan anpassas beroende på vilka tjänster man använder, men de flesta kommer främst använda kontoöversikt, betalning och överföring. Vi tror även det är viktigt att hålla de tjänster man kan använda och information om banken och dess tjänster separat, så att man inte får illusionen att man kan göra saker som det egentligen bara finns information om. Logga ut är även tydligare placerad separat längst upp i högra hörnet.
  2. Tydligare och enklare texter och etiketter
    Ett gränssnitt är inte bättre än de ord som ska göra det förståeligt. Vi har bytt uttryck som vi uppfattar som onödigt knepiga mot ett språk som vi ser som mer beskrivande. “Registrera betalning” och “Mottagaren tillhanda” byts ut mot “Ny betalning till” och “Betald”. Den hjälp vi tycker behövs har vi lagt vid fälten där man kan tänkas behöva dem.
  3. Förklarande gränssnitt
    Vi har med storlek och form skapat en mer förklarande design som kommunicerar vad som är viktigt och vilka delar som hör ihop. “Ny betalning till”, “Belopp” och “Betald” är förstorat och typen av betalning (till en sparad mottagare, ett bankgiro eller ett plusgiro) är tydligt kopplat till fältet man skriver in eller väljer vem betalningens ska gå till med en bakgrundsfärg. Vi har även placerat valet av konto man vill dra pengarna från sist istället för först. Vi utgår från att man sitter med räkningen i handen när man ska göra betalningen och vill fylla i det som står på den innan man väljer vilket konto pengarna ska tas i från.
  4. Bättre felhantering och direkt respons på inmatning
    Genom att automatiskt visa en lista på möjliga mottagare (skulle kunna hämtas från bank- och plusgirodatabaserna, de konton man gjort betalningar till tidigare visas först) när man matat in de första siffrorna gör man det enklare för användaren (de slipper skriva in alla siffror) och skapar en större trygghet (man vet att man matat in rätt redan här, istället för efter att klickat vidare till nästa steg och måste gå tillbaka för att åtgärda felet). Ett annat exempel på liknande hjälp är att direkt varna bredvid datumfältet om man matat in ett datum som är för nära i tiden eller på en helgdag då transaktionen inte kan genomföras. Ännu bättre är om gränssnittet automatiskt då även fyller i närmaste dag transaktionen kan göras med en kommentar så att användaren är med på varför datumet ändrats. Liknande metodik kan användas på mottagare som antingen bara kan ta emot betalningar där man angett OCR-nummer eller mottagare som inte kan det, man kan då anpassa etiketten för OCR/meddelandefältet genom att skriva ut t.ex. “Betalningar till IDG INTERNATIONAL DATA G måste ha OCR-nummer” eller “IDG INTERNATIONAL DATA G kan inte hantera OCR nummer, skriv in faktura- och kundnummer eller liknande i meddelanderutan för att identifiera vilken faktura betalningen gäller.” Denna typ av hjälp och felhantering skapar trygghet hos användaren, gör tjänsten snabbare och minskar risken för fel genom att identifiera dem och erbjuda lösningar på dem innan man klickat sig vidare.

Resultatet

Resultatet av vårt designarbete ser du nedan (klicka på bilden för att visa den i full storlek).

Vår redesign av SEBs internettjänst

Kom gärna med kommentarer och frågor. Behöver ni hjälp med ert webbgränssnitt? Kontakta Alexis på 070-438 12 83 eller alexis@winstondesign.se

2 Responses to “En bättre Internetbank”

  1. Peter

    Hells yes! Problemet med allt bankerna gör, inklusive webbgränssnitt, är att dom vet att man inte bara byter bank hursomhelst. Om dom ändå bara var lika sugna på att satsa på sin webb som dom är att få folk att använda den.

  2. Verkligen.

    Men utvecklingen går ju åt att man allt mer sköter sina bankärenden via internet. Förhållandet man tidigare hade med sin bankman har idag ersätts med ett webbgränssnitt. Därför borde ju även bankerna kunna förstå vikten av att lägga tid och resurser på dessa.

Leave a Reply

Oktavilla
We’ve joined forces with the fine folks at Oktavilla.