att utforma en lättanvänd webbtjänst
  Text © Robert Ryberg 1997

Slut med virrvarret på webben

Struktur, pedagogisk form och funktionalitet. Det låter lätt och självklart. Kanske på gränsen till torrt. Men det är just dessa tre slagord som är så svåra att leva upp till när man skapar gränssnitt för webben.
Nu kör vi igång en tre delar lång artikelserie för att reda ut begreppen. Vi talar inte om tekniken, utan fokuserar på resultatet. Vi talar inte heller om det estetiska i formgivningen. Där gäller samma klassiska design som förr, även om formen på webben levt sitt eget liv en tid med mycket effekter som tredimensionella bilder och droppskuggor. Kunskapen som finns består inte av hårda faktum, utan snarare samlade erfarenheter som gång på gång ställs på ända i takt med utvecklingen.

I denna första del tar vi upp de nya synsätt som krävs för att skapa möjlighet för användaren att styra sig runt, veta var hon befinner sig och få en överblick. I del två kan du läsa om hur man utformar läsvänlig text. Vi tar även upp parametrar att tänka på beträffande färg och symboler på skärmen.
Den kanske viktigaste delen i utformningen av ett webbgränssnitt är att anpassa det till användare och aktuell situation. Vilka funktioner och tjänster är egentligen viktigast? Vilka delar bör höra ihop och hur skall funktionaliteten utformas? är frågor du bör ställa dig. Oavsett hur kunnig avsändaren är i den information som skall förmedlas är det alltid användarens förväntningar och behov som styr upplägget. Tyvärr kan man aldrig veta hur användaren reagerar, varför användartester och utvärderingar är nödvändiga. Det handlar den tredje och sista delen om.

Aktivt letande på webben
På webben finns inga fasta regler för hur en sida skall se ut och vad som betyder vad. Vissa saker har dock hunnit få fastställd betydelse. Ur formgivarsynvinkel kan de vara oinspirerande att använda, men man skall undvika att skapa nya (ibland lika fula) symboler för att till exempel markera förstasidan.
Designarbetet på webben liknar mer utformningen av panelen på en diskmaskin än trycksaksformgivning. Det låter tråkigt, man faktum är att även verktyg kan vara snygga om de är begripliga.

  • Gränssnittet skall gå snabbt att ta till sig och underlätta inlärning av sidans innehåll och funktion.
  • Gränssnittet skall hjälpa användaren att utföra det han/hon vill.
  • Gränssnittet är sällan målet för användaren.
  • Gränssnittet skall inte göra så att användaren känner sig dum för att hon inte förstår.
  • Datorn/webbtjänsten får inte heller verka ointelligent, utan måste verka som om den förstår det användaren matar in.

Vi formger för alla typer av användare: nybörjare som erfarna, tekniker som otekniska, kloka som dumma. Besökaren måste förses med verktyg som är lätta att förstå på en gång. De skall visa upp innehållet och leda besökaren rätt. Här tar vi upp majoriteten av webbtjänsterna som skapas. Självklart finns undantag med webbtjänster där snårigheten i navigation och förståelse är själva poängen. Viktiga användaraspekter
Det är svårt att få överblick över innehållet i en webbtjänst. Till exempel kan det vara svårt att navigera och veta var du befinner dig. Det handlar om att användaren skall veta vart hon är på väg, inte gå vilse och alltid ha lätt att hitta tillbaka.

1. Ge god överblick.
Att se på en förstasida i en webbtjänst är som att titta på dörren till ett bibliotek. Kanske ser man något av innehållet genom nyckelhålet. Allra bäst är det om dörren pryds av en informativ skylt som talar om vart du skall ta vägen. Förstasidan på en webbtjänst måste därför avslöja hela innehållet. Jämför med hur lätt det är att bläddra igenom en trycksak, få glimtar av innehållet, kunna göra uppehåll och sedan läsa mer av det som intresserar. Därför ser god typografi ut som den gör. Det vill säga guidar utan att "synas". Tänk på att endast det som syns existerar för användaren. Det är bra att ha i åtanke att:

  • Låta förstasidan tydligt visa vilken indelning innehållet har.
  • Presentera en karta över innehållet ­ "sitemap".
  • Använda en tydlig strukturmodell som användaren har chans att förstå.

2. Gör det enkelt att navigera.
Eftersom det är krångligt att snabbt bläddra sig dit du vill i en webbtjänst måste du erbjuda entydiga, snabba och lättbegripliga verktyg för navigering. De bör finnas med på alla sidor. Gärna som ikoner eller symboler.

  • Knappar. Knappar har blivit en självklar metafor för något klickbart. De kombineras ofta med symboler. Tyvärr kan de förvirra. (Läs mer om det i del två av denna artikelserie.)
  • Fjärrkontroll. Fjärrkontrollen kräver ett extra webbfönster. Det fungerar därför dåligt för användare med små bildskärmar, men erbjuder samtidigt ett verktyg som alltid finns till hands utan att störa designen på sidan.
  • Flikar. En annan metafor som då och då överförs till användargränssnitt är kartotekflikar. Även den varianten är lätt att förstå. Många uppfattar den dock som tråkig "teknikerdesign".

Vill du se ett mer visionärt exempel på navigering skall du studera ett experiment utfört på Massachusetts Institute of Technology Medialab. http://nif.www.media.mit.edu/ecat/ (Observera att den kräver stöd för Java och tar en stund att ladda ned.)

3. Visa var användaren befinner sig.
Det är svårt att veta var man befinner sig i en webbtjänst. Därför är en positionsangivelse viktig. Det underlättar navigering och pedagogik. Det är även viktigt ur kommunikationsperspektiv, då det är lättare att snabbt förstå informationen om man ser rubriceringen.

4. Visa avsändaren.
Då man lätt hamnar på en webbsida utan att passera inledningen till webbtjänsten (genom en länk eller sökning) är det viktigt att ange avsändaren på varje sida. Speciellt med tanke på att besökaren kanske skriver ut sidan. Det blir också lättare att validera informationen.
"Är detta ja- eller nejanhängarnas åsikter?" Att både ge överblick, position och navigation i samma verktyg är fullt möjligt. Med en trädstruktur kan man se var man är, se resten av innehållet och navigera sig igenom det. En mindre skrymmande variant är att visa den gren användaren befinner sig i. Tyvärr är överblicken sämre. I båda fall har man möjlighet att exponera avsändaren.

Webben har andra tidsaspekter
Då en webbtjänst alltid finns tillgänglig och ständigt förändras är det svårt för användaren att veta vad som är nytt. För att underlätta informationssökningen bör nytt innehåll markeras med det datum då texten publicerades eller med en symbol. Helst bör man bara märka det som är nytt sedan senaste besök.
Underlätta bevakningen av innehållet genom att länka från en samlad punkt till allt nytt material som placerats på olika ställen i tjänsten. Denna funktion blir speciellt intressant om webbtjänsten minns just dig och vad som hänt sedan du var inne senast.

Undersökningar visar att vi är rotade i upplagetänkande. Man vill gärna att informationen skall publiceras med viss periodicitet, exempelvis fredagar klockan 15. Det är inte självklart att så är fallet när det gäller webben. Sannolikheten att besökaren kommer ihåg att koppla upp sig vid aktuell tidpunkt för att få senaste nytt är liten. Om webbtjänsten har en stadig ström av ny information är det bra att sprida den när den är ny och inte vänta till tiden för fastställd utgivning. Å andra sidan säkerställer den periodiska upplagemodellen att det är värt att gå in en viss tidpunkt. I värsta fall leder det till tvång att publicera information, även om det inte finns något intressant.
För att kunna validera informationen bör sidan vara märkt med datum när den senast ändrades eller publicerades. Det finns många bortglömda sidor

Konsistent gränssnitt förenklar
Det är av mycket stor vikt att webbtjänstens funktioner är konsistenta (det vill säga logiskt funktionella). Det betyder att alla funktioner skall uppträda likadant och ge samma typ av resultat. En knapp med en viss text eller symbol kanske länkar till en plats längre ned på sidan medan en liknande knapp öppnar ett nytt fönster. I detta fall är inte gränssnittet konsistent utan enbart förvirrande.
En annan aspekt på konsistent är att funktionaliteten bör vara likartad mellan olika webbtjänster. Hela webbens funktion innebär att man studsar mellan olika webbtjänster. Om man ständigt möts av olika sätt att interagera blir förvirringen stor. Underlätta genom att vara konventionell. Understrukna ord betyder exempelvis länk. Länkar du ännu inte klickat på är blå, besökta är lila. Bryter du mot reglerna skall du tänka på att det hindrar användaren. Konsistens innebär alltså att användaren bara skall behöva lära sig använda webbtjänsten en gång. Att information och funktioner skall struktureras är en självklarhet och då gränssnittet skall underlätta navigering måste innehållet struktureras. Ofta är bästa lösningen att kombinera stukturmodeller inom en webbtjänst. Helst skall användaren få en mental modell över den.

I nästa del i vår artikelserie om design för webben tittar vi närmare på konkreta saker, som läsbar text, typografi, bilder och färger.

Så underlättar du för besökaren på webben

En webbesökare är av naturen lat. Här är knepen du behöver för att underlätta för läsaren och få honom att stanna kvar på webbsidan. Honnörsorden är rubriker, symboler, färger och länkar.

Det är nästan omöjligt att ändra en persons beteendemönster. När du formger för webben bör du utnyttja befintliga vanor och reflexer. Ännu viktigare är att använda beteenden kring användandet av datorn. Använd de få konventioner som finns för webben: länkfärger, symboler med mera. Här är den andra av tre delar i CAP&Designs serie om användargränssnitt för webben. I första avsnittet (du hittar artikeln i nummer 7/1997 och på www.idg.se/capdesign) talas om vikten av att tänka i nya banor och se de speciella aspekterna av att utforma en webbtjänst i jämförelse med tryckta medier. Där tar vi upp hur viktigt det är att ge överblick, navigationsverktyg, visa användaren var den befinner sig och att ge vägvisning. Här kommer fler konkreta tips på hur du kan underlätta användandet av webbtjänsten med tonvikt på hantering av text.
Ett par faktorer att ta hänsyn till:

  • En användare vill inte bläddra på sidorna.
  • Långa texter är svåra att läsa på bildskärmen.
  • Webbsidor läses inte utan skummas igenom.
  • Färg kan tilldelas symbolisk betydelse.

Användare har dessutom visat sig ovilliga att bläddra ner för att se om det finns något längre ned på en sida. Minnesforskning ger vid handen att det är lättare att känna igen något än att komma ihåg något. Symboler är toppen. De kräver bara igenkänning när man lärt sig dess betydelse. De kan även fungera internationellt. Några standardsymboler har växt fram: ett hus för förstasidan och ett kuvert för e-post. Det blir svårare när man vill länka till något som är svårt att enkelt symbolisera grafiskt. Hur symboliserar man en ägarstruktur eller årsredovisning på en typisk företagswebb? Symboler måste vara intuitiva och kompletteras med text för att bli begripliga.

Symboliska färger
Även färger utgör symbolik. En van användare känner igen sig och ser var han är och vart han skall ta vägen genom igenkänning. Man kan låta olika avdelningar få symboliska färger. Då vet man till exempel att gröna sidor handlar om juridik och klickar reflexmässigt på den gröna knappen för att få juridikrelaterad information.
Men samma sak som vid symboler gäller här: text behövs. Vissa har svartvita skärmar, andra har inte fullt färgseende (cirka tio procent av den manliga befolkningen lider av färgblindhet, en procent bland kvinnor), har valt en annan bakgrundsfärg eller stängt av inladdning av bilder. Standardiserade länkfärger (med blå färg för obesökt länk, lila för besökt) är effektiva. De kanske inte är snygga, men de fungerar. Om du väljer andra, är det svårt att skilja en följd länk från en oföljd.
Om man färgsätter text kan den lätt tas för en länk. Speciellt om man frångår de standardiserade länkfärgerna. Tänk på att användaren kanske valt att inte ha sina länkar understrukna. Genom att använda olika färger kan man dela in en skärm i områden och effektivt gruppera information.

Skärp upp och beskär
En sida bör inte var längre än skärmen. Ett fåtal av besökarna på en webbsida bläddrar ("scrollar") ner på en sida om den är längre än webbläsarens fönster. Det betyder att inga sidor bör vara längre än vad som får plats på skärmen. Om sidan ändå är lång bör allt viktigt i fråga om innehållslig överblick, navigationshjälpmedel och avsändare placeras högst upp. På långa sidor behöver man verktyg även när man bläddrat längst ned. Vissa hävdar att scrollning är att föredra. Argumenten är då att man slipper känslan av att förlora kontrollen genom att klicka sig bort mot något okänt, samt att man har möjlighet att helt kontrollera hastigheten när man bläddrar själv. Korta texter kan därför läggas på en lång sida istället för på kortare sammanlänkade sidor. Lång löpande text på en sida bör däremot undvikas.

Länken är som etiketten på en syltburk
Det bör inte finnas mer än sju länkar på en webbsida. Informationen skall heller inte finnas mer än högst tre klick bort från förstasidan. Det är svårt att kombinera i större tjänster, men visar också att dessa är generellt svårare att navigera i. En viktig del i utvecklingsarbetet är prioritering. (Mer om det i sista delen av artikelserien i nummer 9/1997.) Det är lättare att uppnå att aldrig ha mer än ett klick till sök, karta, kontaktmöjlighet och eventuell hjälpfunktion.
En länk är som etiketten på en syltburk. Den visar vad du får om du öppnar locket. För att underlätta navigationen är det viktigt att länka på rätt sätt. En länk pekar till exempel på en sida med information om en tävling. Länken bör då vara "Var med i tävlingen" och inte "Var med i tävlingen". Det är alltså inte handlingen utan resultatet som skall länkas.

Namnge dina sidor med omsorg
Var sidan placeras under domännamnet syns i adressen. Namnen på de underbibliotek/mappar som sidorna placeras i syns i adressen. Det betyder att man kan använda filernas struktur på webbservern för att underlätta positionering och förståelsen av vilken typ av innehåll man läser för tillfället. Man provar sig fram genom att skriva in ord i adressen för att hitta rätt. En tydlig struktur skulle kunna vara: http://www.nisses-verktyg.se/shopping/verktyg/skruvmejslar.html Gissa vad sidan med skiftnycklar har för adress!
Titeln är det som syns när man gör ett bokmärke/favorit för en webbsida. Göra en tydlig titel som är unik för varje sida som beskriver innehållet. Om möjligt kan man visa var i strukturen sidan befinner sig redan i titeln. Exempelvis [ Nisses verktyg / Shopping / Verktyg / Skruvmejslar ] eller [ Nisses verktyg -> Shopping -> Verktyg -> Skruvmejslar ]. Versala och spärrade titlar syns extra tydligt i användarens bokmärkeslista.
Om du använder ramar fungerar inte bokmärken och titlar, utan förvirrar bara användaren. Ramar (frames) ger möjlighet att låta fönstret i webbläsaren bestå av olika delar som utgörs av olika dokument. Du kan bara kan byta ut en del i taget ­ på så sätt kan navigationsfält ligga kvar överst på sidan hela tiden, även om man bläddrar nedåt i innehållsrutan. Det gjorde ramar till en succé när de kom. Tyvärr har man på senare tid förstått att de hindrar användaren. Lägger man ett bokmärke för en sida i ett ramverk kommer leder bokmärket till förstasidan i ramverket. Det är inte titeln på aktuell sida som visas om man vistas inom ett ramverk, utan titeln på ramverket. Användaren har svårare att se strukturen och går lättare vilse när man använder ramar. Lösningen kan vara att bygga sidorna så att ramverket byts ut när man klickar på en länk. Då fungerar bokmärket, men halva idén med ramar går förlorad.

Alternativ underlättar
Att både ha en knapp och en länk i den förklarande texten underlättar. Men lura inte användaren att tro att den får olika saker bakom de olika ingångarna. Länkar som pekar till en sida som inte längre finns på sin gamla plats skapar irritation. Se därför till att alla länkar fungerar ­ flera verktyg finns på marknaden för detta. (Exempelvis innehåller Microsoft Frontpage och Adobe Sitemill funktionen.).
Validitet är ett problem på Internet, det vill säga informationens riktighet. Man kanske inte känner till avsändaren eller när informationen skrevs eller reviderades. Det finns många digitala kyrkogårdar med döda webbsidor. Underlätta genom märkning:

  • Ange alltid när sidan senast uppdaterades.
  • Ange avsändaren.
  • Ge möjlighet att kontakta avsändaren.

Långsamma sidor orkar ingen vänta på. Det innebär att många ger upp innan de ens får en chans att bedöma informationen. Sidans minnesmängd är den viktigaste faktorn. Om man har ett 28.8-modem kan man maximalt ladda hem cirka tre kilobyte per sekund. Teoretiskt tar då en sida på 45 kilobyte 15 sekunder att få fram, och det tar längre tid i praktiken. Orkar du vänta så länge? Sidans textinformation kan visas snabbare om man låter specificera bilders bredd och höjd i HTML-koden. När man gör det vet användarens webbläsare hur stora bilder den skall bereda plats för på sidan. Den kan då placera ut texten på sidan på en gång och visa bilderna allt eftersom de laddas ned. Med andra ord kan sidan läsas innan bilderna kommer på plats.
Underlätta för modemsurfare genom att använda alternativtext. Cirka 25 procent av webbsurfandet sker med visning av bilder avstängt i bildläsaren. Det innebär att vissa bara ser textinformation. Om du gjort rubriker i form av grafik är det viktigt att du använder alternativtext i HTML-koden. Det innebär att det visas text istället för bilder. Det är även viktigt att tillämpa på vanliga bilder eftersom användaren då får chans att förstå vad bilden normalt innehåller då den visas.

Obekväm läsning på skärm skapar otålighet
Det är obekvämt att läsa på datorskärmar. Hur ofta skriver du inte hellre ut en webbsida på papper än att läsa på skärmen? Många faktorer hindrar effektiv läsning på skärm. Läsaren är otålig. Webbsidor söks fram och du stöter på sidor du inte vet är läsvärda. En stressad läsare är inte ett bra utgångsläge. Läshastigheten är också viktig. Förutom att man inte är van vid att läsa på skärm, får dålig överblick och svårt att navigera blir textens utseende usel på grund av låg upplösning. Ofta sämre än sämsta fax. Man gör omedvetet många läsmisstag och ansträngningen är så stor att man drar sig för stora textmassor. Bokstäverna förlorar sin form. Kantutjämning skulle kunna utnyttjas oftare, men det används sällan.

Skriv kortare och underlätta skumning. Fyra femtedelar av alla webbanvändare skummar igenom texten istället för att läsa den. Hur skall man då ta till sig informationen? Färska undersökningar visar att en halvering av textlängden och att lista fakta i punkter i texten ger femtioprocentig ökning av läsandet av en text. Långa texter försvårar orienteringen. Rullningslisten till höger i fönstret ger inte mycket hjälp. Ännu ett skäl till korta texter. Ha bara ett budskap per mening! Läsare av webbsidor läser sällan hela meningar. Vanligtvis anses det typografiskt vidrigt att störa läsningen med feta ord och understrykningar som ögat lätt drar sig till. Det gäller så klart även webben, men eftersom de flesta användare ögnar igenom sidor efter information är det stor hjälp att förstärka nyckelord.

  • Fetstil är bra.
  • Understrykning är mindre bra eftersom det liknar standarden för klickbara länkar. Dessutom grötar det så klart till ordbilden på samma sätt som i normal typografi. (Exempel: lättläst/grötigt.)
  • Kursiv stil är inte heller så bra eftersom skärmens låga upplösning och avsaknad av kantutjämning gör det svårt att få lutade linjer att bli tydliga.

Överblicken är svår i långa texter och med texter indelade i kortare sidor länkade i en följd (läs mer om flödesmodellen i första delen av artikelserien i nummer 7/1997). Vad du kan göra för att underlätta läsarens val av läsning är att skriva texten på ett mer hierarkiskt sätt än i en följd som brukligt i trycksaker. Vill man tvinga läsaren att komma igenom vissa bitar innan man kommer till nästa stycke kan man så klart välja en annan strukturmodell (läs mer om dessa modeller i första delen av artikelserien).

Avslöja alltid strukturen
En hierarkiskt skriven text inleds med en överblick av innehållet och leder sedan läsaren till fördjupningar. Inled med punkter eller mycket korta sammanfattningar som avslöjar innehåll och struktur. Läsaren styr sedan sig själv till de intressanta delarna. Dela upp längre texter logiskt i flera sidor.

  • Endast det som syns på sidan när den kommer upp kan fånga läsarens "låga" intresse.
  • Det är svårt att se var man befinner sig i en text om den presenteras i långa sidor.
  • En logisk indelning av texten efter innehåll ger tydlig överblick och gör texten mer lättförståelig. Dessutom kan man läsa separata sidor och förstå varje del för sig. Om man bara delar in långa texter i flera webbsidor i rak följd utan att strukturera om den blir det svårare att uppfatta logiken i texten.

Utskrifter blir däremot svåra när man skapar denna typ av struktur. Därför bör man antingen publicera en lång version för utskrift eller ta ställning till om utskrift eller läsning på skärm är viktigast. Eftersom överblicken är mycket lättare när man kan bläddra igenom utskrivna sidor är den hierarkiska textstrukturen inte alls lika önskvärd vid utskriven text. Om man räknar med att användaren skall skriva ut texten bör den vara sammanhängande. Den allra bästa lösningen kanske är att inte alls ha den på en webbsida utan en PDF- eller Word-fil med hygglig typografi som besökaren laddar hem och skriver ut.

Eftersom det är omöjligt att veta vad som döljer sig bakom en länkad rubrik bör man vara tydlig när man författar rubriken. Ett övertydligt exempel är att "Mode är viktigt på golfbanan ­ en guide till rätt utrustning" är bättre än "Pelles prickiga putter perfekt på prispallen". Rubriker på webben är till för navigering och överblick. Det finns dock fall där nyfikenheten kan bli så stark att man klickar på kryptiska budskap, men då krävs en del dramaturgi som nästan bara är möjlig om man kan arbeta med animationer och ljud. De mellanrubriker texten är skriven runt kan användas som inledning till texten för att sammanfatta innehållet. En möjlighet är att samla dem i en slags ingress (kallad "rubress"). Det är ett enkelt sätt att skapa överblick.

Att ha många ingångar är inte konstigare än i normal formgivning, men skall man lyckas få någon att läsa trots den relativt höga intressetröskeln krävs extra krut. Bildtexter, länkar och grafik hjälper läsaren att komma över tröskeln. Breda spalter är svåra att läsa i tryck och ännu svårare att läsa på skärmen. Använd tabeller för att begränsa spaltbredden. Det blir problem med läsbarheten om läsaren drar ut sidan i hela skärmbredden. I nästa del av vår artikelserie handlar det om att anpassa webbtjänsten till den tänkta och verkliga användarens uppfattningar och krav. Det är ju besökaren som skall använda tjänsten.

Ta chansen att utforma webbtjänsten efter användarens önskemål

I denna tredje och sista del av CAP&Designs artikelserie om användargränssnitt lär du dig att anpassa webbtjänsten efter de krav som ställs just i ditt fall.

I tredje och sista delen av vår artikelserie om webbgränssnitt handlar det om de projektfaser skapandet av en webbtjänst bör delas upp i: säljfas, grafisk profil, funktionsspecifikation och informationsstruktur, prototyper, produktion, utbildning, implementering, lansering, löpande drift, utvärdering och redesign.
Ta reda på vad din webbtjänst skall uppnå. Fortsätt sedan arbetet med att anpassa den till användaren med att ta reda på vilka du tror kommer att bli de verkliga besökarna. Inte de du hoppas skall komma dit. Utforma inte heller webbtjänsten efter ledningsgruppens önskemål. Ledningsgruppen köper ofta dina argument om de är väl underbyggda.

  • 1. Offertförfarande och smörande för kunder
    Redan här läggs kanske grunden för viktiga funktioner och användargrupper, trots att man ofta inte börjat tänka på användaren ännu.
  • 2. Grafisk profil
    Här skapar man en grafisk idé och ett gränssnitt som lyfter fram den funktion man vill uppnå med sin webbsida.
  • 3. Funktionsspecifikation och informationsstruktur
    Under denna fas ligger fyra underfaser: behovsanalys, informationsstrukturering, prioritering och utformning av användargränssnittet. Det är den svåraste biten. En stor insats i början lönar sig i längden, så snåla inte på resurserna till förstudierna. Behovsanalysen utgår från både avsändarens och användarens behov. Uttalade och outtalade. Där ligger den största svårigheten. Försök förstå användaren. Hitta mervärden som finns med att använda just webben som kanal. Mervärdena kan vara: skapa en dialog, utnyttja interaktivitet, snabbhet, tillgänglighet, personlig anpassning och simulering.

 

Informationens struktur är inte självklar. Det är inte heller självklart vilken information eller vilka funktioner som skall prioriteras. En stor del av de webbtjänster som byggs är fortfarande företagspresentationer. Ett tydligt bevis på att användaranpassningen är låg är att de flesta av dem är uppbyggda efter företagets organisation och inte efter användarens uttalade eller outtalade informationsbehov. Troligen struntar de flesta användare i avsändarens organisation och hur företaget är uppbyggt. Det handlar om att man inte känner till användarens krav innan man undersökt dem. Men man kan anta att praktiska frågor om processen eller liknande är mer intressant än företagets organisation. Fram tills dess att man frågat användaren är det bara lösa antaganden.

Lappmetoden avslöjar vad användaren tycker
En pedagogisk metod för att finna användarens önskemål om innehållsstrukturen är att låta dem gruppera den tänkta informationen förutsättningslöst. Därefter kan man statistiskt få fram vilken uppdelning och prioritering informationen skall ha. Skriv ned rubriker eller beskrivningar av innehållet på lösa papperslappar. Låt ett litet antal användare, kanske fem, var och en gruppera innehållet i grupper de tycker hör ihop. Arbeta maximalt med sju grupper, annars blir det för många inblandade. Nu skall du sammanställa grupperingen. Skapa en matris med alla rubriker på båda axlarna. För ett ämne på den ena axeln skall du sätta ett streck för alla andra ämnen som igår i samma grupp för en viss testperson. När du fört in alla ämnen från alla testpersoner kan du se vilka de flesta valt att placera i samma grupp.

Prioritering framför allt
Du ställs inför många val när du skall utforma webbtjänsten. Dels måste du prioritera informationen. Annars får du samma problem som exempelvis Torget, som vill tillfredsställa alla med all typ av information. De vill vara så kompletta och breda i sitt urval att det blir svåranvänt och svårnavigerat.
Det användaren använder frekvent måste prioriteras. De vanligaste handlingarna måste också vara enklast att utföra. Ju färre klick och inmatningar man behöver göra innan önskat resultat, desto bättre användbarhet. De vanligaste handlingarna bör också vara de som har flest möjliga sätt att utföras på. Att undersöka vilka de är kallas transaktionsanalys. Ett enkelt sätt att göra en sådan analys är att undersöka statistiken på webbtjänsten. Ofta måste man ställa två val mot varandra när man prioriterar och det är inte ovanligt att de är oförenliga.
När man bygger en webbtjänst är anpassningen till hur den skall användas viktig. Är det en- eller fågångsbesökare eller är det ett verktyg användaren återvänder till ofta? Du hoppas givetvis på det senare, men även formgivare måste vara realistiska ibland É Om man har många nya besökare är tydlighet viktigt. Webbtjänstens gränssnitt måste vara lärbart.
Har du många vana användare är användbarheten viktigare. Tänk på att instruktioner och pedagogiska omvägar försämrar användbarheten. Tyvärr är dessa två aspekter svåra att kombinera i samma funktion. Lösningen brukar i stället vara att ge de olika typerna av användare olika funktioner. Man kan dela in begreppet användbarhet i flera delar. Gränssnittet är:

  • Effektivt att använda.
  • Lätt att minnas.
  • Ger få misstag vid användning.
  • Tilltalande.

Två grundläggande gränssnitt är knappar eller metaforer. Knappar är enkla att förklara och använda. För användaren kan dock innebörden av en knapp och indelningen av olika knappar bli svår att förstå. En metod för att skapa ett lättlärt gränssnitt är att använda metaforer. Det innebär att man låter webbtjänstens innehåll symboliseras genom objekt ur verkligheten och ger det en liknelse på webben. Ett exempel kan vara en bokhylla, en stad eller Macintoshs symboliska kontorsmiljö med mappar och papperskorg. Metaforer är lysande eftersom man kan erbjuda en miljö användaren känner sig trygg i, även om tekniken och informationen bakom kulisserna är något helt annat.
Tyvärr medför metaforer flera nackdelar. De blir långsamma och svåra att använda i längden när användaren vant sig vid tjänsten. Ett annat problem är att det begränsar designen. Det kan bli svårt att hitta objekt ur verkligheten som på ett entydigt sätt kan symbolisera det man vill länka till. Om man exempelvis har en stad som metafor kan den grundläggande uppbyggnaden vara enkel ­ sportevenemang blir en tennisplan och e-post blir en brevlåda.
En metafor måste vara konsekvent så att alla delar passar in i liknelsen. Men hur symboliserar du komplexa begrepp som receptsamlingar eller ett företags konsultverksamhet i stadsbilden? Ytterligare val:

  1. Snabbhet eller grafik och effekter.
  2. Upplevelse eller hitta.
  3. Luft eller innehåll.
  4. Passiv underhållning eller interaktion.
  5. Avancerade webbläsare eller textversion.
  6. Teknik eller tid.
  7. Företagets profil eller experimentell design.
  8. Titta eller handla.
  9. Ny design eller igenkänning.
  10. Webbtjänst med personlighet eller generell.
  11. Personlig webbtjänst eller personlig anpassning.
  12. Oerfaren användare eller erfaren sökare.
  13. Stor eller liten webbtjänst.

4. Interaktiva prototyper För att testa om strukturen är relevant krävs prototyper i form av fungerande webbsidor. Här bör användare få säga vad de tycker. Det finns flera varianter på temat. Det vanligaste sättet är att låta en användare tänka högt medan den testar tjänsten. Det är praktiskt att spela in sessionen med videokamera för att senare kunna spela upp för övriga medlemmar i arbetsgruppen.
Ett gränssnitt måste vara utformat så att användaren får det den förväntar sig. En metod att göra det är att fråga vad någon förväntar sig av en viss funktion i prototypen och sedan låta honom berätta vad han upplever när den utför handlingen.
En tredje metod är de klassiska fokusgrupperna där man sätter sig ned med ett antal användare och låter dem beskriva vad de tycker om en webbtjänst eller flera alternativa prototyper. Tänk på att en fokusgrupp nästan bara ger subjektiva åsikter. Det är bra, men sällan avgörande. Statistik och användarstudier är viktigare metoder för att utvärdera ett gränssnitt.

5. Produktion av den verkliga tjänsten Här byggs alltihop i en komplett och fungerande version. Kvalitetssäkra genom att låta så många som möjligt provanvända webbtjänsten och komma med kommentarer så att ändringar kan göras i den slutgiltiga versionen innan ridån går upp.

6. Utbildning De som driver webbtjänsten eller hänvisar till den skall givetvis ha viss kunskap om dess funktion.

7. Implementering Nu öppnas webbtjänsten för användarna, det vill säga görs tillgänglig för de som känner till att den finns. Det innebär tekniska operationer, som att flytta sidorna till rätt server.

8. Lansering Eftersom webben till sin natur kräver att användaren söker upp de sidor den vill se behövs ett visst mått av lansering. Det är å andra sidan användarens egen kontroll som gör den så värdefull som besökare. Lanseringen kan innebära allt från att registrera sig i sökmotorer och länkregister till reklamfilm om webbtjänsten på TV. Tänk på att aldrig öppna en ofärdig tjänst eller del av en tjänst. Det är svårt att locka tillbaka en användare som blivit besviken.

9. Drift Att webbtjänster lever har vi konstaterat tidigare. Den webbansvarige måste rensa ogräs och plantera nytt. Tro inte att webbtjänsten inte blir sedd. Den måste få samma uppmärksamhet som övrig marknadsföring och PR. Du måste budgetera så att du har råd med någon som påtar i webbgården.

10. Utvärdering Vi är tillbaka till steg tre. Efter en tids drift är det dags att ta reda på om webbtjänsten uppnått önskat resultat. I den här artikeln fokuserar vi på användargränssnittets framgång. En svensk modell kallad Real kan vara användbar. Det är de fyra initialbokstävernas begrepp man skall utvärdera: relevans för användaren, effektivitet, attityd hos användaren och lärbarhet. Relevans och attityd är begrepp som utvärderas genom utfrågning, medan lärbarhet och effektivitet är faktorer som bör mätas.

11. Redesign Efter utvärdering skall man ta hänsyn till de nyvunna kunskaperna och förbättra webbtjänsten.

Den visuella delen av användarens bedömning av ett system, till exempel en webbtjänst, utgör cirka tio procent av den totala bedömningen. 30 procent ges av interaktiviteten. Funktionalitet, egenskaper och utförande utgör hela 60 procent. Med andra ord måste den stora kraften vid utformningen av en webbtjänst ligga på funktioner, handhavande och inte klatschig design. Den här projektmodellen innebär att man passerar ett antal faser. Ofta märker man dem inte eftersom de glider in i varandra. Ordningen är ändå tydlig. Man skall tänka på att det ofta är nyttigt att stanna upp och blicka bakåt.

Anpassa tjänsten till nybörjare
Mängden användare av Internet ökar i en takt som innebär att antalet dubbleras ungefär varje år. Vänder vi på resonemanget betyder det att hälften av webbanvändarna har mindre än ett års erfarenhet av Internet. Nybörjare skulle man kunna kalla dessa.

För dessa är de få konventionerna på webben ännu mer okonventionella. Här gäller det att vara oerhört pedagogisk. Det kan handla om att skriva "klicka här" på de ställen man kan gå vidare om man vet att man riktar sig en speciellt oerfaren grupp.
Dessutom har säkert de flesta av nybörjarna liten erfarenhet av datorer. Vi kan vara tämligen säkra på att dessa personer inte laddar hem de senaste versionerna av webbläsare eller ens installerar ett enda tillläggsprogram ­ något man kan utläsa genom statistik från webbservrar. I sin tur medför det att man bör vara restriktiv med ostandardiserade lösningar som kräver tekniskt bevandrade användare på alla webbtjänster som inte riktar sig till webbutvecklare eller datortekniker.
Till att börja med kan vi konstatera att mycket av formgivningen på webbsidan styrs av den som läser. Det skrev vi om i del två av den här artikelserien. Många stänger även av tekniska funktioner som Java eller Ómagic cookiesÓ av rädsla eller på grund av regler i ett företags datoranvändning. Det innebär att ju mer restriktiv man är med tekniska finesser och ju mer öppen design man gör, desto mer sannolikt är det att användaren ser en tillräckligt designad sida på sin bildskärm.
Tekniken är avgörande i många fall. Det handlar både om tekniken hos avsändaren, mottagaren och däremellan. Det är fråga om hård- och mjukvara.
Det kan vara kul att se efter hur många besök du haft på en webbtjänst och det är möjligt genom att du kan få hyggligt detaljerad besökarstatistik. Är man en erfaren annonsköpare blir man kanske besviken över det låga antalet besökare. Antingen har man verkligen för få besökare och måste ta sig en funderare på marknadsföring av webbtjänsten. Eller är det så att det låga antalet egentligen inte är så lågt.
Återkoppling är viktigt. När man utför ett kommando, manipulation eller inmatning är det centralt för användaren att få en bekräftelse på att det man bett datorn utföra utförts. Det har visat sig att banktjänster på webben blivit väl mottagna. Kunder upplever stor säkerhet i och med att de får se att transaktioner utförs och att ställningen på kontot ändrats. Man låter kunden själv knappa på banktjänstemannens terminal, vilket skänker en känsla av kontroll.

Framtida typer av användargränssnitt
Det har experimenterats med olika typer av interaktiva sätt att navigera i större mängder av information. Apples Project X (Hotsauce, www.atg.apple.com/technology/tech/projectx/) är värt att titta på. Man zoomar in på rubriker och går vidare på ett dynamiskt sätt i en tredimensionell rymd.
Ett annat framtidsexempel är MITs Elastic catalog där man arbetar med typografi direkt på skärmen. Var beredda på att det tar en stund att få fram sidan, men det är det värt. Adressen är nif.www.media.mit.edu/ecat/ .

 

 

OM DENNA SIDA

Detta är tre artiklar som jag skrev för tidningen   CAP&Design 1997 sammansatta till en sida. Lättast är nog att skriva ut  och läsa den. Innehållet har inte aktualiserats utan är på flera ställen inte längre riktigt på grund av den utveckling av användandet som skett sedan dess.

/Robert Ryberg 1999

© robert ryberg
robert@ryberg.com

tel +46 70 723 00 84