ANALYS AV EN WEBBAPPLIKATION

Transkript

1 ANALYS AV EN WEBBAPPLIKATION Yvonne Stenberg Grafiska Gränssnitt, 6 p MDI - Interaktionsdesign

2 INNEHÅLLSFÖRTECKNING INNEHÅLLSFÖRTECKNING 2 INTRODUKTION 3 BOSTON DISTRIBUTION OCH MÅLGRUPP 3 BEGRÄNSNINGAR 4 ANALYSVERKTYG 4 APPLIKATIONSGENOMGÅNG & ANALYS 5 WEBBSIDANS UPPBYGGNAD 5 Ramar 5 Meny 6 Färger och kontrast 10 Text & Typsnitt 10 GRAFISKA ELEMENT 12 Länkar 12 Bilder 13 Knappar 14 Logotyp 15 Inmatningsfält 15 Tabeller & Scrollar 16 NAVIGERING 17 SLUTSATSER 19 REFERENSER 20 2

3 INTRODUKTION Det finns flera kriterier som kan användas för att avgöra om en webbapplikation är bra eller inte. Naturligtvis är bedömningen till viss del subjektiv. Uppfattningen om god och dålig design är inte alltid självklar. Men snygg eller estetiskt tilltalande är inte det samma som användbar eller funktionell. Hur användaren uppfattar en webbsajt beror till stor del på hur väl den uppfyller användarens förväntningar. In general terms, with a web-based application the emphasis is on doing things (producing reports, making reservations, updating a directory or database or selecting an item to purchase) rather than on viewing things (browsing sports stats or skimming news headlines). [1] BOSTON DISTRIBUTION OCH MÅLGRUPP Jag har valt att analysera Boston Distributions (BD) webbsida. Jag ser det som en utmaning efter att av en händelse nyligen ha träffat BD: s tekniska chef, som då uttryckte sin frustration över deras hemsida. BD är ett företag som distribuerar datorartiklar till återförsäljare. Webbsidan vänder sig därför till befintliga eller blivande återförsäljare av BD s produkter. Syftet med webbsidan är att främst sprida information till återförsäljare om produkter, marknadspriser och lagervolymer samt göra det möjligt att skicka reklamationer och beställningsordrar till Boston Distribution. Enligt BD: s tekniska chef krävs att användaren först loggar in med kundnummer och lösenord för att kunna utföra beställningar. Boston Distribution finns såväl i Sverige ( ), som i Norge ( ) och Danmark ( ), där också huvudkontoret är beläget. BD: s tekniska chef uttryckte ett starkt önskemål om att i Sverige ta det övergripande ansvaret för webbsidan. Detta eftersom svenskarna är mer angelägna om att fel åtgärdas direkt när ett problem uppstått än sina norska och danska kollegor. Svenskaran är dessutom flitigare användare av webbsidorna än danskarna och norrmännen. 3

4 BEGRÄNSNINGAR Eftersom jag inte är behörig återförsäljare har jag inte heller kunnat logga in och utföra beställningsordrar på Bostons hemsida. För att ändå kunna bilda mig en uppfattning om hur en order registreras har BD: s tekniska chef skickat mig några skärmdumpar. Jag är medveten om att mer information hade behövts för att kunna ge en mer rättvis bedömning och fullständigare analys av hur en orderbeställning går till och designats. ANALYSVERKTYG I analysen har jag utgått från några av de riktlinjer som blev resultatet av mitt examensarbete Utveckling av riktlinjer för webbapplikationers användargränssnitt, på Volvo IT Syftet med riktlinjerna var att hjälpa systemutvecklarna att skapa mer användbara webbapplikationer som användarna känner sig bekanta med och kan interagera med på ett naturligt och intuitivt sätt. Annan litteratur som hjälpt mig i min analys är bland annat Webbdesign med fokus på användbarhet, referenslitteraturen från mitt examensarbete och kurslitteraturen i Grafiska gränssnitt. Jag har valt att göra min analys utifrån: Webbsidans uppbyggnad o Ramar o Meny o Färger o Typsnitt Grafiska element o Länkar o Bilder o Logotyp o Inmatningsfält o Tabeller & Scrollar Navigering 4

5 Jag kommer under min analys även att väva in diskussioner om olika designprinciper, såsom: Konsekvens Tydlighet Snabbhet Enkelhet APPLIKATIONSGENOMGÅNG & ANALYS WEBBSIDANS UPPBYGGNAD Ramar Figur 1. Webbsidans består av två frames Webbsidorna är uppbyggda av två ramar, den vänstra innehåller menyn och den högra upptar resten av applikationsytan. Att använda ramar är på både gott och ont. Den största fördelen med att låta en innehållsförteckning/meny ligga i en egen ram är att den alltid är fast synlig även om användaren tvingas scrolla längre ner i webbsidan. Vid presentation av stora tabeller är det också praktiskt att placera tabellhuvudet i en egen ram så att tabellrubrikerna inte försvinner när webbsidan scrollas vertikalt [2]. Nackdelarna är bland annat att alla sidorna i samma ramverk har samma webbadress, vilket ställer till problem om användaren vill spara någon av webbsidorna som bokmärke. Kanske är det så att en återförsäljare som ofta besöker Bostons webbsida frekvent återvänder till en specifik webbsida. Istället för att klicka sig dit hade då bokmärket kunnat förflytta användaren direkt till den aktuella webbsidan. Detta problem är givetvis ännu större då en webbsajt innehåller många fler webbsidor. 5

6 Meny I menyn möts inte användaren av traditionella länkar. Menyn består istället av följande knappbilder (läs mer under avsnittet bilder): Figur 2. Knappmenyn När muspekaren hålls över en av knapparna i menyn visas en tooltip, förutom när muspekaren är ovanför Produkter, där är den visst bortglömd. Tooltipen innehåller enbart knappens namn som användaren redan kan se och tillför ingen ytterligare information. Det hade varit mer upplysande om innehållet presenterades tillsammans med information om vad användaren kan uträtta. På så sätt slipper användaren klicka runt och leta, vilket hade kunnat minimera antalet knapptryckningar. Boston Huvudmeny & Företagsprofil Knappen Boston Huvudmeny är sammankopplad med startsidan (se figur 3). För mig känns Huvudmeny som ett otydligt ordval, jag förväntar mig att knappvalet skall leda till att en undermeny dyker upp. Kanske Hem vore ett mer vedertaget alternativ som användaren känner igen. På startsidan finns adressinformation, vilka som webbsidan är avsedd för samt länkar till återförsäljaransökan, kontakt via mail, reklamationsansökan samt postens godssökning, upplysning om homecenter och Pinnacle partners. Här finns dessutom en påminnelse om tidpunkt för orderdeadline och Bostons logotyp. Vad jag saknar är en kort presentation av vilka BD är och vad de gör. 6

7 Figur 3. Startsida Det är vanligt att logotypen i en webbapplikation också är sammankopplad med startsidan. Men i det här fallet kommer man istället till en välkomstsida. Välkomstsidan är också åtkomlig via knappen Företagsprofil. (Logotypen överst på välkomstsidan är dock inte klickbar.) Det hade känts bättre att låta välkomssidan vara startsida och då låta både BD: s logotyp och knappen Boston Huvudmeny länkas till denna. (På så sätt hade menyknappen Företagsprofil blivit överflödig.) Välkomstsidan är en tydligare presentation om vilka företaget är och vilka webbsajten riktar sig mot. Att förklara vilka företaget är och vad de gör överensstämmer också med en av Jakob Nielsens tio rekommendationer för att skapa en mer användbar hemsida som gynnar affärsnyttan [3]. Produkter Produkter är uppdelade i undermenyerna HARDWARE och SOFTWARE Eftersom undermenyalternativen är så få, så hade de gott kunnat vara synliga från början. Det hade då gett användaren en bättre översikt och dessutom besparat användaren en extra knapptryckning. Inkonsekvent används här versaler istället för gemener och engelsk text istället för svensk. 7

8 Innehåll & Tillverkare Både Innehåll och Tillverkare presenteras i en lista som sorterats efter bokstavsordning. Varje tillverkare respektive produkt är här länkar och direkt åtkomliga från listan. Det ger en god översikt och gör det möjligt för användaren att snabbt förflytta sig till något av alternativen i listan. Sök Sök är tyvärr den ända hjälpfunktion som tillhandahålls. Jag hade gärna sett att applikationen var utrustad med en användarmanual. De sökkriterier som finns tillgängliga är: Benämning (fritextfält), Kategori (detsamma som alternativen i Innehåll), Tillverkare, Bostons artikelnummer och Tillverkarens artikelnummer. Det är viktigt att inse sökfunktionens betydelse. Jakob Nielsen hävdar att en sökfunktion skall hjälpa användaren att hitta vad de behöver [3]. Jakob Nielsen menar dessutom att if users don t find the result with their first query, they are progressively less and less likely to succeed with additional searches [4]. Jag tycker att sökfunktionen fungerar bra. Eftersom det finns många sökkriterier är det relativt lätt att söka. Sökresultatet presenteras med de troligaste sökträffarna överst med kategorierna som klickbara länkar och därunder alla produkter under respektive kategori. Figur 4. Sökfunktionen 8

9 Information Menyalternativet Information är indelad i följande undermenyer: Figur 5. Undermenyerna till Information Vissa av produkterna som är märkta med Nyhet, Kampanj eller Utförsäljning är här listade separat. Här finns också ett ansökningsformulär, ÅF-ansökan, att hämta för dem som vill bli återförsäljare av BD: s produkter. Dessutom finns här Sälj- och leveransvillkor. Logga in För att kunna göra orderbeställningar krävs först att man Loggar in med kundnummer och password. Även här finns en länk till ÅF-ansökan för dem som ännu inte är behöriga. BD har missat att göra knappvalet Logg in aktivt. När Logg in valts ligger istället förra menyvalet kvar och blinkar. Kundvagn Väl inloggad blir en knapp Kundvagn synlig längst ner i menyn (inkonsekvent är kundvagn stavat med litet k). Direkt under denna syns hur många artiklar som ligger i kundvagnen och den totala kostnaden för artiklarna. Trycker användaren på kundvagnen ges en mer detaljerad information om kundvagnens innehåll. Under produkter blir nu fler kolumner synliga och antalet önskade inköp av en produkt kan nu fyllas i och läggas till i kundvagnen genom att klicka på motsvarande köpknapp (se figur 10). Figur 6. Information om kundvagnens innehåll 9

10 Färger och kontrast Applikationsytan har genomgående en vit bakgrund, förutom i de fall då en länk öppnar en utomstående webbsida som har en annan bakgrundsfärg. I längden kan den vita bakgrunden bli ganska ansträngande för ögonen att titta på. Enligt Molich säger regeln om kontrast att kontrast ska vara så kraftig att användaren med säkerhet lägger märke till den [5] Kontrast är således ett medel att pocka på användarens uppmärksamhet. Även om svart text på vit bakgrund ger den bästa kontrasten kan den upplevas som stickande för ögonen och skapa efterbilder. Jag hade hellre sett en crème färgad bakgrund eller en av de ljusare gula färgerna i menyn som bakgrund. Tuffte menar också att det mänskliga ögat upplever naturens egna färger som mer harmoniska, familjära och koherenta, framför allt ljusare toner av t ex blått, gult och grått [6]. Bakgrunden i menyn är gult marmorerad. Även om färgen gul är en varm och behaglig färg att vila ögonen på känns motivet tråkigt och omodernt. För att inte riskera att färger uppfattas annorlunda mellan olika webbläsare bör färgerna hämtas från Netscapes säkra färgpalett (kombinationer av 00, 33, 66, 99, CC eller FF) [2]. Generellt sett har inte någon sådan hänsyn tagits på BD: s sidor där t ex den gröna texten är i färgen och bakgrundsfärgen i menyn är FFD76B. Text & Typsnitt BD är inte alltid konsekventa i sitt färgval. Den beskrivande texten är på vissa sidor grön och på andra blå eller svart. Eftersom BD: s logga är helt i grönt tycker jag ändå att det är ganska snyggt att ta upp den gröna färgen i texten. Allt för många färger kan annars ge ett oroligt intryck. De webbsidor som innehåller mycket ren text känns inte alltid anpassade till webben (se figur 7), det känns snarare som en inskannad A4-sida. Enligt Nielsen är block av text ett vanligt designmisstag som gör läsningen tråkig och smärtsam [7]. 10

11 Figur 7. Sälj- & leveransvillkor. Ett av de vanligaste designmisstagen enligt Jakob Nielsen är användningen av fast textstorlek [7]. Textstorleken går tyvärr inte att ändra på sidan för ÅFansökan. Dessutom har typsnittet sans-serif använts, som är något svårare att läsa. Gestaltlagarna om närhet [5] har dåligt utnyttjats för att gruppera text som hör ihop. Detta är uppenbart på startsidan där mellanrummet mellan de nedersta textraderna är lika stort som avståndet till ovanförvarande text, trots att texten inte hör ihop (se figur 3 & 8). Genom att istället lägga sammanhörande texter närmare varandra hade startsidan känts enklare att ta till sig. Vanligaste typsnitten för webbapplikationer är Times New Roman, Arial och Helvetica. På BD: s webbsidor används också font-family och sans-serif. Text i kursiv stil och text i versaler bör undvikas eftersom det påverkar läshastigheten [2]. Inkonsekvent är HARDWARE och SOFTWARE i undermenyn till Produkter de ända undermenyerna som är skrivna i Versaler. Figur 8. Dåligt utnyttjande av gestaltlagen om närhet 11

12 GRAFISKA ELEMENT Länkar Länkfärgerna är inte heller konsekventa. De flesta obesökta länkarna är klar blåa och understrukna, ( ) och besökta länkar får en mörkare blå färg ( ). Att länkfärgen ändras hjälper användaren att orientera sig och det blir lätt att se vilka länkar som redan besökts. I undermenyerna är tyvärr alla länkarna svarta och när länken är aktiv blir texten rödmarkerad. En av Nielsens samlade designmisstag handlar om irriterande länkfärger. Att förtydliga för användaren vilket val som är aktivt är i sig bra men det borde i så fall visas på ett annat sätt. Röd färg syns i och för sig tydligt, men signalerar fara och kan eventuellt få användaren att tro att något fel uppstått. Både Tuffte och Stenberg påpekar vikten av att undvika skrikiga och iögonfallande färger såvida inte användarens uppmärksamhet särskilt krävs för exempelvis fel- eller andra viktiga meddelanden [2 & 6]. Några av länkarna fungerar inte, eller så ser bara rubriken Creative Labs ut som en länk. Hur som helst ändrar muspekaren utseende till en hand men inget händer. Däremot så fungerar pilen på tabellhuvudet bredvid Creative Labs. Här känns länken inte lika uppenbar och pilen får mig snarare att associera till att fler produkter kommer att listas. 12

13 Figur 9. Rubriken Creative Labs fungerar inte som en länk Bilder Istället för vedertagna länkar används i menyn bilder. Detta orsakar att användaren inte kan ställa om fontstorleken. Största nackdelen med bilder är att länken inte ändrar färg vare sig musmarkören är ovanför, länken är aktiv eller har besökts tidigare. Istället blinkar en markör intill bilden/länken för att indikera vilket menyval som är aktivt. Molich och Stenberg hävdar att blinkande bilder distraherar och försämrar koncentrationen på de väsentliga uppgifterna [2 & 5]. Själv upplevde jag blinkandet som mycket irriterande och det tog längre tid att läsa textinformationen på webbsidorna eftersom blinkningen avledde min uppmärksamhet. Bilder bidrar till längre nedladdningstider och skall därför användas sparsamt. Deras funktion är viktig att tänka igenom och bilder för utsmyckning bör helt uteslutas, de skall enligt Nielsen vara meningsfulla [3] Eftersom BD: s produkter är beställningsbara via webbsidan betraktar jag inte bilderna som överflödig information. Det är snarare så att fler bilder skulle behövas. Många av produkterna finns för tillfället inga bilder på. Några 13

14 av bilderna hade kanske trots allt kunnat visas i mindre format. För att få en bild presenterad krävs att användaren klickar på den enskilda produkten. Ur nedladdningssynpunkt är det mycket bättre än att invänta bilder på produkter som ändå inte är intressanta för kunden/återförsäljarna. Om användaren i sin inställning väljer att inte ta emot några bilder eller inte har tid att vänta på en större bild är det nödvändigt att ange en alternativtext till bilderna som förklarar vad de föreställer [2]. Knappar Figur 10. Köpknappar på varje produktrad Förutom att en knapptryckning kan öppna en annan sida i webbapplikationen får användaren sällan någon direkt feedback på sina knapptryckningar. Detta beror på att alla knapparna är bilder som tyvärr inte ändrar utseende när användaren trycker på dem. Om användaren vill göra flera olika inköp krävs det här en knapptryckning för varje önskad produkt. Enligt Stenberg skall flera knappar med samma funktion undvikas [2]. Med en gemensam knapp skulle köpet gå mycket 14

15 snabbare och risken att användaren klickar mer än en gång på samma knapp minskar dessutom. Logotyp Figur 11. Bostons logotyp Jag är förvånad över att inte logotypen är synlig på alla sajtens webbsidor. Det är ändå företagets varumärke och ansikte utåt. Många användare är också vana vid att kunna ta sig tillbaka till startsidan genom att klicka på logotypen. Så är här inte fallet, logotypen är istället kopplad till en välkomstsida. Kanske kunde logotypen vara något mindre och istället placeras överst i menyn. På det sättet behövs kanske inte knappalternativet Boston Huvudmeny. Inmatningsfält Figur 12. Återförsäljaransökan Figur 13. Återförsäljaransökan 15

16 Det är många faktorer att ta hänsyn till vid användningen av inmatningsfält. Genom att uttnyttja gestaltlagarna (lagen om närhet, slutenhet, likhet eller kontinuitet) för att visuellt gruppera inmatningsfält och tillhörande texter olika, kan samma information uppfattas och tolkas annorlunda [2]. I figur 12 och 13 syns tydligt att grupperingen är viktig. Inmatningsfält och tillhörande texter ligger här alldeles för nära varandra, vilket gör det svårt att avgöra vilken text (framförvarande eller bakomvarande) som hör ihop med vilket inmatningsfält. Detta kan göras tydligare genom att använda ramar och mellanliggande linjer eller placera fält som hör ihop under varandra [2]. Att både text och inmatningsfält som ligger nedanför varandra skall vänsterjusteras har BD följt, men i och med att de framförvarande texterna (Ansvari för administrationen, Inköpsansvarig och Inköpare) är olika långa blir avståndet till inmatningsfälten väldigt långt. Det är svårt att se att Inköpare hör samman med inmatningsfältet till höger om texten Inköpare. För att inte påverkas av textlängden kan texten istället sättas ovanför inmatningsfälten. En ytterligare miss är att texten i återförsäljaransökan inte går att justera manuellt eftersom fix teckenstorlek har använts (se avsitt Text & Typsnitt). Tabeller & Scrollar Figur 14. Tabell för att jämföra produktegenskaper Tabeller är ett bra sätt för användaren att överskåda stora mängder information [2]. De tabeller som BD använder är väldigt olika uppbyggda. Det finns en funktion där flera artiklar kan jämföras med varandra. Genom att kryssa i de produkter som önskas jämföras (högst 10) och sedan trycka på knappen Jämför kan många olika egenskaper jämföras mellan artiklarna. Tabellen blir här väldigt stor och tvingar användaren att scrolla både vertikalt och horisontellt. Jakob Nielsen hävdar att horisontella scrollar är ett av de 10 16

17 vanligaste misstagen inom webbdesign [7]. Genom både horisontella och vertikala scrollar tvingas användaren scrolla på varje rad för att ta till sig innehållet. Att använda ett rutnät i bakgrunden där varannan kolumn har olika bakgrundsfärg gör tabeller och framför allt kolumnerna mer lättlästa. Vill man göra raderna mer lättlästa kan istället varannan rad anta olika färger. Tabellen blir mycket svårare att utläsa utan rutnät eller med vit bakgrundsfärg, vilket tydligt framgår av figur 15. Innehållet i tabellkolumnerna är heller inte placerade rakt under tabellrubriken i tabellhuvudet. Detta problem återkommer dessutom i alla produkttabeller (se figur 9). Figur 15. Tabell som visar var Microsoft Home Center är belägna. NAVIGERING Navigeringen är oftast en avgörande del för hur användaren uppfattar en webbsajt i sin helhet. BD: s kunder kan förutsättas vara väldigt målinriktade vid sina besök på webbsajten, de har oftast för avsikt att snabbt lösa en specifik uppgift, hitta information eller beställa produkter. Det är då viktigt att navigeringen är tydlig och att det är lätt att hitta till varje specifik webbsida. Att orientera sig är i allmänhet ett av de största problemen för användare vid användning av webben [2]. Det är lätt hänt att användaren tappar bort sig, eftersom strukturen i regel är sämre än i de traditionella applikationerna. Det är därför viktigt att användaren hela tiden är medveten om, var är jag och vart kan jag gå. Det är just dessa frågor som Nielsen påstår att ett bra navigationsgränssnitt hjälper användaren att svara på. Var är jag har BD löst genom att låta senaste knappvalet blinka gult. Denna blinkning visas dock inte i undermenyerna där istället texten markeras röd. Observera att blinkningen blivit bortglömd när inloggningsknappen aktiveras. Föregående 17

18 knappval fortsätter istället att blinka. Upplysningen om var jag befinner mig är betydelsefull men jag är helt emot denna blinkning. Den stjäl alldeles för mycket uppmärksamhet. Den gula markören hade ju inte nödvändigtvis behövt blinka. Länkarna löser oftast inte problemet om var jag befinner mig just nu, men däremot var har jag varit och var har jag ännu inte varit då besökta och obesökta länkar visas i olika färger. Det är samtidigt viktigt att inte annan text ser ut som länkar och lurar användaren att tro att den är klickbar. Så är tyvärr fallet när en produktkategori valts, namnet visas i blått och är understruken precis som övriga länkar. Även rubriker är en hjälp för var användaren befinner sig. Exempelvis så visas en ikon med den produktgrupp/kategori som valts högst upp i högra hörnet. Det fungerar också bra som påminnelse för användaren om vilket val som är aktivt. Om företagslogotypen hade varit synlig på alla webbsidorna hade det varit tydligare för användaren att återgå till startsidan. Jag saknar möjligheten att snabbt kunna förflytta mig till Norges och Danmarks webbsida. I logotyptexten (se figur 11) finns både Norge, Sverige och Danmark. Själv trodde jag att de var länkar till respektive lands webbsajt. Kanske hade annars en gemensam startsida kunnat fungera där klickbara flaggor och/ eller landlänkar kunnat förflytta användaren till önskad webbsajt. Det är viktigt att välja text på knapparna som underlättar navigeringen och hjälper användaren att förstå konsekvensen av knapptryckningen. Kanske är det bara för att webbsidan är så ny för mig och att jag inte själv är återförsäljare av BD: s produkter. Hade jag varit en mer flitig besökare lär jag mig snabbt vilka sidor som ligger bakom varje knapp eller länk. Jag är inte så säker på att BD har lyckats fullt ut med sina ordval. Hade jag däremot varit en flitig besökare på BD: s webbsajt Den funktionalitet som möjliggör att flera produkters egenskaper kan jämföras med varandra är en bra lösning (se figur 9 & 10). Ur navigeringssynpunkt hade många fler knapptryckningar krävts om kunden tvingats klicka runt mellan varje enskild produkt. Placeringen av knappen Jämför både högst upp och längst ner bland produkterna underlättar för användaren i de fall då väldigt många produkter listas samtidigt. Användaren kan då efter att ha scrollat sig längst ner på webbsajten direkt jämföra produkterna. 18

19 När ett undermenyalternativ valts, som bara är möjligt under Produkter och Information blir texten rödmarkerad. Idén att hjälpa användaren att orientera sig och se vad som är aktivt är bra, men färgvalet borde vara ett annat. Röd färg syns i och för sig tydligt, men signalerar fara och kan eventuellt få användaren att tro att något fel uppstått [2]. SLUTSATSER Efter att ha analyserat Boston Distributions hemsida förstår jag verkligen den frustration som deras tekniska chef uttryckte. Jag tycker att sidan ger ett något oprofessionellt och omodernt intryck. Visserligen finns den information som återförsäljarna behöver tillgänglig på hemsidan, men den skulle behöva omstruktureras. De gör många av de designmisstag som Nielsen funnit och dessutom följs designprinciperna dåligt. De synpunkter som framgår av min analys skulle kunna användas för att göra webbsidan snyggare och tydligare, navigeringen enklare och de grafiska elementen mer konsekventa. 19

20 REFERENSER [1] Campell W, Putting a Good Face on Web-Based Applications ( ) [2] Stenberg Y., Developing User Interface Guidelines for Web Applications, Chalmers tekniska högskola, Göteborg, (2000) [3] Nielsen J, Top Ten Guidelines for Homepage Usability, ( ) [4] Nielsen J, Search Visible and simple, ( ) [5] Molich R., Webbdesign med fokus på användbarhet, Studentlitteratur, Lund, (2002) [6] Tufte E, Envisioning Information, Graphics Press, Connecticut, (2001) [7] Nielsen J, Top Ten Web-Mistakes of 2002, ( ) 20