Måldriven, informationscentrerad webbdesign Linus Forsell Digitala Distributionsformer vid Högskolan Väst, Trollhättan, Sverige linus.forsell@student.hv.se 1
Abstrakt I den här essän kommer måldriven och informationscentrerad design att tas upp för att visa på att denna typ av design kan vara bättre lämpad än traditionell design för att på ett bättre sätt låta användaren ta del av det hemsidan har att delge. Designmetoden som diskuteras kommer att delvis baseras på en modell kallad AWARE+ för att ge substans till resultatet. Inledning Det finns en ofantlig mängd olika webbsidor, en stor del av de sidor som finns att ta del av på webben har unika och eget framtagna designer och innehåll. Det finns otaliga former av upplägg, färgkombinationer och typografiska lösningar, men samtidigt delar många av webbsidorna en genom tiderna väl beprövad grunddesign med fokus på användares upplevelse av informationsupptagning, navigering och övrig interaktion: Menyer, headers, innehåll och sökfält är några av de element som ofta, eller mycket ofta, finns att ta del av på webbsidor. Den form av webbsidor som kommer att diskuteras i denna essä kommer dock att vara inom ett område där den generella typen webbdesign inte riktigt behöver passa in; informationswebbsidor som har i huvuduppgift att informera besökare om ett särskilt område. Det är med andra ord inte webbsidor i samma klass som exempelvis Wikipedia (även om diskuterade element även till viss del går att applicera på sådana webbplatser) som kommer att tas upp, utan enklare webbsidor med smalare inriktning och mål. Mål och process En webbsida finns på webben av en anledning, den har på något sätt en funktion att fylla antingen för besökaren eller för den som lagt upp den, vare sig den funktionen är otroligt irrelevant till omvärlden eller en mycket bra lösning på ett behov som kan finnas; Webbsidor finns helt enkelt där för att någon eller något lagt upp den. En del webbsidor har som mål att underhålla, andra att dela nyheter och ytterligare andra att delge information om annat, den flexibilitet som rör webbsidors funktionalitet gör att det nästan enbart är skaparen av en webbsida (och dess användares programvara) som sätter gränserna för vad den kan användas till. Fokus i denna essä kommer dock att vara informationscentrerade webbsidor och med hjälp av AWARE+ kommer en modell för denna typ av webbsidor att diskuteras och prestenteras. AWARE+ är en modell eller metod som kan appliceras på design-, undersöknings- och utvecklingsfasen av webbapplikationer (Bolchini et al. 2008, s.748) för att få resultat som matchar målanvändaren på ett bra sätt. AWARE+ är en uppföljare till och baseras på AWARE (Analysis of Web Application REquirements (Bolchini & Paolini 2004, s.747)) (Bolchini et al. 2008, s.86) som även den var en modell för hur webbapplikationer kan designas för att bättre möta sina mål. AWARE fokuserade mer på att introducera ett kommunikationsorienterat perspektiv vid framtagning av webbsidor jämfört med AWARE+ som lägger till flertalet andra aspekter för att på så vis täcka ett bredare omfång och öka antalet användningsområden för metoden (Bolchini et al. 2008, s.747). Genom att applicera en del av de metoder som presenteras i AWARE+ finns det möjligheter till att ta fram en ny form av informationsbaserade webbsidor där just information och informationsupphämtning hamnar i fokus men också samtidigt ge användaren en bättre upplevelse i sitt informationssökande. Den förbättrade upplevelsen kommer att nås genom att besvara de mål en användare har när denne söker efter information på nätet och genom att se till att webbsidan fyller den funktion den var ämnad för väl. 2
Funktion, förväntningar och layout Genom att fokusera på användarens upplevelse, eller snarare dess förväntningar om hur deras interaktion med en webbplats bör fungera kan man vinna värdefull insikt i hur en användare uppfattar och tar del av information på nätet. AWARE+ lägger inte väldigt stor vikt vid användarcentrerad design, men poängterar fortfarande vikten av att använda sig av denna typ av vetskap eller information för att validera funktioner och designbeslut (Bolchini & Paolini 2008, s.752). Istället för att lägga fokus på just användaren pekar AWARE+ istället på att man bör designa utifrån värdet av funktionen och dess mål (i likhet med AWARE) (Bolchini et al. 2008, s.747), detta kommer att spela en mycket central roll i hur den modell för informationswebbplatser som presenteras i denna essä kommer att designas. En informationscentrerad webbsida med fokus på funktion och mål men även med tanke på användarens generella upplevelse är alltså, kort beskrivet, en modell som kan användas för att bygga informationswebbsidor med fokus på användaren. Men för att kunna ta fram en generell modell för informationsbaserade webbplatser krävs det också att man ser över hur en användare kan komma att behöva använda webbplatsen för att ta del av information: "Varför är användaren där?", "Hur hittar användaren information?", "Vad hittar användaren för information?", "Varför hittar användaren informationen?" Är alla viktiga och nödvändiga frågor för att veta hur innehåll och funktioner ska presenteras och vara åtkomligt för användaren. Den första frågan kan besvaras enkelt, men svaret behöver samtidigt inte vara korrekt i alla scenarion; Användaren söker information om ämnet webbsidan delger. Webbsidan bör alltså presentera vad den gör där och vad den har att erbjuda om ämnet användaren vill veta mer om. Genom att ta del av studier om hur användare läser webbsidor kan vi avgöra hur dess upplägg bör se ut, och då också hur funktioner bör placeras i relation till innehåll. Jakob Nielsen (2006) delar med sig av heatmaps ("En heatmap är ett sätt att grafiskt representera data på en bild genom att använda sig av en färgskala" (Klich & Tidén 2011, s.5)) över hur användare tar del av den information som presenteras på en webbsida, denna data har samlats in genom att registrera försökspersoners ögonrörelser. Med hjälp av dessa kan man alltså försöka skapa en bättre och relevantare layout för vår informationssite. Det är sedan webbsidans jobb, i samarbete med användaren, att ta fram den information användaren söker. Webbsidan bör kunna tillgodose användaren med de funktioner och instruktioner som behövs för att kunna navigera webbsidan på ett sätt som låter den ta del av den information som finns att hämta. Det kan samtidigt vara viktigt att ta reda på varför användaren hittar viss information, men inte annan. Om en användare får ta del av information som inte är relevant till dennes mål kommer det sannoligt att påverka användarens ställning till att återkomma till webbplatsen och även chansen att användaren rekommenderar andra att använda den negativt. När användaren misslyckas, eller kanske har misslyckats med att hitta den information som sökts bör man således försöka ge fler alternativ och förslag till hur den information som söks kan nås, om en alls finns att finna där. 3
Enkelt och koncist Det som framkommit i genomgången av vad som kan komma att krävas av en webbsida som riktar sig först och främst åt att delge information på ett bra sätt, är att den bör ta vara på hur användare kommer att försöka använda webbsidan och därifrån utgå från webbsidans funktion och mål för att ge den ett bra värde och en orsak till användaren att möjligen återkomma eller eventuellt sprida webbsidan vidare. Enkelthet behöver inte betyda att sidan bör sakna avancerade funktioner, snarare tvärt om - webbsidan bör ge tillgång till sofistikerade verktyg som kan hjälpa användaren att hitta det den söker. Att söka är också ett stort nyckelord när det gäller att låta användaren finna den information som önskas, därför är det viktigt att det finns avancerade sökmetoder för användaren att använda sig av, speciellt om materialet bara presenteras i form av en sida med text. Genom att använda den information som hittils framkommit i denna essä kan man fastställa att en webbsida som fokuserar på att sprida information bör vara rak på sak och undvika allt som kan leda bort från att användaren inte enkelt kan ta del av det den kom till webbsidan för. Allt onödigt som är irrelevant till ämnet bör därför plockas bort eller gömmas för att gynna användaren och istället kan man lyfta fram de funktioner som kan hjälpa till. Med hjälp av Nielsens data kan ett upplägg för hur sidans layout tas fram som baseras på användares generella avläsningsmetoder och således kan man placera element på ett sätt som gynnar läsbarhet och funktionalitet. En viktigt detalj man kan hitta i Nielsens data är att ju mer text det finns på sidan, desto kortare tid spenderar användaren på texten allt eftersom blicken rör sig nedåt på sidan. Detta visar på att man bör behålla sidorna ganska korta, åtminstone inte allt för långa, och då istället ge användaren möjlighet till att bläddra frammåt och tillbaka mellan sidor. Man kan också i hans data se att användare har en tendens att oftare notera element som ligger fritt till höger om brödtexten än de element som ligger till vänster. Detta innebär att man troligtvis bör placera diverse verktyg och annan information till höger om brödtexten för att användaren enklare ska upptäcka dem. Slutsats En webbsida som har information som huvudmål bör ha, förutom lättillgänglighet och relevant innehåll, relevanta verktyg; så som sök och kapitelvy för att låta användaren enkelt hitta den information den är på webbsidan för. Man bör alltså tänka på användarens mål, varför den är där och vad den vill hitta, för att sedan bygga funktioner runt dessa mål och på så sätt ge användaren en bra upplevelse på webbsidan. För att visa på hur en webbsida som följer den metod som diskuterats i denna essä följer nu ett par bilder där den applicerats. 4
Titeln på sidan skiljs från resten av innehåller för att användaren ska lägga mindre fokus på det, istället hamnar brödtexten i fokus men också den högra spalten kommer att få ta del av användarens uppmärksamhet. Texten på sidan är kort och har istället delats upp i 30 kortare sidor. I orginalvyn så finns hela innehållsförtäckningen till artikeln i högerspalten och illustrerar var användaren är och låter också användaren navigera artikeln via detta träd. 5
För att underlätta för användaren finns möjligheten till att söka på den sida man står på och man får förslag på populära sökord från sökningar andra användare gjort tidigare. Sökningens resultat illustreras med en pil och området där din sök träffar markeras i brödtexten. 6
Om användaren inte finner informationen den söker efter på sidan den står på kan den expandera sökningen till hela dokumentet och får en annan typ av sökning där webbsidan placerar sökningarna i sin kontext så mycket det går för att låta användaren snabbt få ett gräpp om vad mer det står om det. Från denna vy kan användaren sen gå direkt till den sida där sökningen träffat för att läsa vidare. Webbsidans innehåll kan även taggas för att ge snabblänkar till sidor där intressant innehåll har hittats förut. 7
Men trots att sidans enkelthet och design följer delar av AWARE+ och tar hjälp Nielsens beteende information faller den fortfarande kort i scenarion där innehåll inte är formaterat på samma vis som enligt exemplet. Resultatet håller sig med andra ord starkast när materialet som ska presenteras är i form av längre texter så som artiklar, uppsatser eller längre informationsblad. Men det exempel som presenterats ovan skulle även kunna fungera som en läsare för böcker, likt de många e-boks-läsare som finns idag, fast i en lättare version. Att dela upp materialet i flera sidor är också något man kan diskutera, för många kan det vara jobbigare att behöva bläddra genom flertalet sidor för att hitta dit man vill (om man inte vill söka, det vill säga). Då skulle ett alternativ till att expandera materialet till färre, eller inga sidor kanske vara något att överväga - Och med användarens mål i fokus blir den punkten än starkare. En annan funktion som skulle kunna tillkomma utan att störa modellen, utan snarare göra den bättre, är möjlighet till att bokmärka sidor för senare läsning. Men som en webbplats för att delge information om ett ämne; eller för att sprida en artikel finner jag att resultatet, baserat på de metoder om design, mål och funktion samt studien om användarbeteende, bör fungera bra och snabbt förse användaren med den information den önskar hitta. Referenser Bolchini, D. & Paolini, P. (2004). Goal-driven requirements analysis for hypermedia-intensive Web applications. Requirements Engineering. 9, s.85-103. Bolchini, D., Garzotto, F. & Paolini, P. (2008). Value-Driven Design for Infosuasive Web Applications. Proceeding of the 17th international conference on World Wide Web. 17, s.745-754. Nielsen, J. (2006). F-Shaped Pattern For Reading Web Content. [Elektronisk]. Tillgänglig: <http://www.useit.com/ alertbox/reading_pattern.html> (06-12-11). Klich, M. & Tidén, J. (2010). Visualisering av eyetrackingdata. [Elektronisk]. Tillgänglig <http://www.csc.kth.se/ utbildning/kth/kurser/dd143x/dkand11/group1mads/johan.tiden.matteus.klich.report.pdf> (06-12-11). 8