Analys av en hemsida av
Analys av en hemsida Jag har tittat lite närmare på utformningen av sidan http:/ / kids.earth.nasa.gov/. Sidans syfte är att utbilda och informera barn om rymdteknik och vilka spännande projekt NASA håller på med. Den är uppdelad i olika underrubriker. En behandlar människor, en vind, en land, en vatten och den sista naturfenomen. Dessutom finns länkar till olika spel eller sidor som är lärande, bra och roliga för barn som är intresserande av vetenskap. Sidan är informativ och bra anpassad till ett barns kompetens. Den är alltså innehållsmässigt bra och uppfyller på så vis sitt syfte. Sidan har däremot vissa andra fel som leder till försvårar tillgänglighet för användaren. Exempel på ett sådant fel är bland annat färgsättning och anpassningen till användare med större behov av tillgänglighet som till exempel binda. Målgrupp Helhetsintrycket av sidan är att den är skriven med ett enkelt språk för att anpassas till användargruppen - barn. Dock är intrycken något motsägande. Att sidans målgrupp är barn är det ingen tvekan om, men åldersgruppen är svår att avgöra. Innehållsmässigt får man intrycket av att sidan är riktad till lite äldre barn som går i skolan och som kanske är i 10-12 årsåldern. Det finns till exempel spel och länkar till sidor som är för svåra för yngre barn och hela upplägget bygger på att barnet kan läsa. Grafikmässigt ger sidan däremot ett intryck av att vara riktad till en yngre målgrupp. Ett tecken på detta är textsnittet på rubriken, som är skrivet i ett litet barns handstil. Dessutom har sidan en bildlänk till rubriken People som föreställer en bild på två barn som uppskattningsvis är 3-4 år, vilket troligtvis är en mycket yngre ålder än de barn som sidan egentligen riktar sig till. Gestaltlagarna och kontraster Vid utformning av en webbsida används med fördel de gestalt-lagar som Gestaltpsykologin tagit fram. Dessa lagar används för att användaren lättare ska kunna gruppera information med lika egenskaper. För att till exempel visa att länkarna i en meny hör ihop kan man använda sig av lagen av närhet genom att lägga dem i närheten av varandra. Detta har man använt sig av vid utformningen av sidan. För att ytterligare understryka enhetlighet kan man dessutom låta området runt länkarna ha en annan färg än sidans bakgrundsfärg. Man använder då lagen om slutenhet. Denna lag är ej använd på sidan. En tredje gestalt-lag är lagen om likhet. Denna uppnås genom att exempelvis låta länkarna ha samma färg och textstorlek, vilket man använt sig av i viss utsträckning. Mer om detta i stycket om text. Likhetslagen förutsätter den sista lagen som är lagen om kontinuitet, nämligen att vara konsekvent i designen. Mer om detta finns att läsa i avsnittet om navigation. (Molich, 2002 s.133-138) 1
Det är också viktigt att använda kontraster vid utformning av en webbsida. Exempel på några av många kontraster är färg-, form- och storlekskontraster. I regel ska kontrasten vara så klar att användaren uppmärksammar den. För många kontraster på en sida är dock inte bra, eftersom för starka och för många kontraster kan ge ett förvirrande intryck. Det är därför att rekommendera att använda maximalt två typsnitt och två teckenstorlekar på en sida. Samma sak gäller med färg, där maximalt två stycken färger är att rekommendera. (Molich, 2002 s.133-138) Texten Typsnittet inom webbplatsen är inte helt konsekvent. På de undersidor som användaren tas till genom att klicka på bildikonerna på förstasidan, det vill säga People, Wind, Land, Water och Natural Hazards, har texten en relativt liten storlek för att visas på skärm. Den duger dock med tanke på att det är möjligt att förstora den. Dock används två olika storlekar av brödtexten, vilket inte är att rekommendera. På de övriga undersidorna (Hotlinks, Games, FAQ, Teacher Guides mm.) har texten lämplig storlek (Molich, 2002 s.133-138). Genomgående finns ett stort fel gällande typsnittet, nämligen att man valt ett typsnitt med seriffer, vilket försvårar läsningen på skärmen. Man bör därför istället byta till ett gränssnitt utan seriffer som till exempel Arial eller Verdana (Typografi-studiehäfte). Verdana är dessutom att rekommendera eftersom typsnittet är resizable. Textraderna är lagom långa och det är lagom avstånd mellan dem. Texten är läsvänlig för användare som inte har mycket tid att läsa texten. Den är kortfattad och dessutom anges arbetet inom ämnet (People, Wind, Land, Water och Natural Hazards) i punktform under texten, vilket ger ett luftigt och lättläst intryck (Nielsen, dec 2002). Rubriken på varje sida är talande för innehållet, exempelvis How NA SA Studies Hazards för sidan som behandlar just detta, och texten är väl uppdelad och innehåller mycket luft, vilket är att rekommendera. Innehållet på sidan är mycket kortfattat vilket är både bra och dåligt. Det är bra med lite text för att målgruppen kanske inte är så bra på att läsa och dessutom är det bra med korta texter för att inte trötta ut användaren. Jag tycker dock att det saknas lite information. Sidan är uppbyggd för att informera barnen om vad NASA arbetar med utifrån olika aspekter som Land eller Människor. Det är också det enda som finns på sidan. Om man vill veta mer om vad NASA arbetar med finns länkar från sidan till NASAs andra sidor som inte nödvändigtvis är anpassade lika väl för barn (Molich, 2002 s.110). Dessa sidors utseende har dessutom väldigt olika utseende och struktur både gentemot Barnsidan och gentemot varandra. Detta gör att navigeringen blir väldigt inkonsekvent om man vill ta reda på mer än bara den informationen som finns på själva sidan. Min uppfattning är alltså att mer information om projekten bör finnas på själva sidan. Vidare anser jag att rubriken FAQ som innehåller vanliga frågor om svåra ord och koncept som tas upp på sidan. Istället för att ha detta under denna rubriken skulle man kunna lägga all den faktan under huvud sidorna. FAQ-sidor brukar innehålla information om programmet eller om problem man kan ha och vill fråga företaget om. Därför brukar man kanske inte leta efter fakta under denna rubrik, varför det alltså vore klokt att flytta ut den till huvudrubrikerna. Det skulle ge mer information tillgänglig och intresset skulle fångas bättre eftersom användaren får en förklaring till begreppen i anslutning till läsningen. 2
Källor till materialet finns inte angivet specifikt på sidan. Dock kan man nästan lista ut att källorna är NASAs arbete och forskning, vilket betyder att deras information kommer från eget huvud så att säga och att källor därför inte är nödvändiga. Senaste uppdatering och ansvarig för sidan med kontaktmöjlighet finns längst ner på varje sida, vilket är positivt. Grafik Då man utformar en hemsida är det viktigt att innehållet på sidan har en kontrasterande färg mot bakgrunden. Denna kontrast är givetvis störst med svart text på vit bakgrund eller tvärt om. En första regel när det gäller webbdesign är att hellre ha en ljusare bakgrund och en mörk text än tvärt om. Man bör dock inte ha en helvit bakgrund eftersom detta kan ge efterbilder och göra att användaren uppfattar ett lätt flimmer. Det blir alltså obehagligt att titta på en helt vit yta som är fallet med denna sida. En god idé vore därför att göra bakgrunden i en något grå eller beige ton. (MacDonald,1999) Enligt mig är grafiken inte så bra anpassad till målgruppen. Förutom tidigare nämnda argument är till exempel förstasidan helt i svart, vilket inte är en passande färg i barnsammanhang eftersom den utstrålar ondska i ett barns ögon. Svart är generellt en färg som förknippas med onda ting varför den bör undvikas i stora fält. Företagets syfte är ju inte att skrämma bort sina användare (MacDonald,1999). Sidan visas i Figur 1. Figur 1. Förstasidan på NA SA s sida för barn. Här kan man välja mellan de olika kategorierna genom att klicka på en av bilderna. 3
Barn kan vara fumliga på grund av att deras motorik inte är färdigutvecklad och de behöver ha klara och enkla bilder för att deras uppmärksamhet ska fångas. Detta uppfylls inte på förstasidan eftersom alla bilder sitter ihop i en klump i mitten. Istället hade man kunnat lägga samtliga bilder med ett litet mellanrum så att man lätt kan urskilja dem (Gazzaniga, Ivry & Mangun, 2002, kap 15). Ännu en påpekan angående denna bildklump är att de har olika preferens, vilket jag är osäker på om skaparna gjort medvetet. Bildlänken till People är dubbelt så stor som de andra fyra länkarna och den ligger dessutom inte i grupp med de resterande. Att gruppera bilder eller ge dem samma storlek och form ger en känsla av samhörighet enligt lagen om likhet, vilket alltså i detta fall gör att People-länken känns speciell och utåtstickande, som om den inte hör till de andra. Om man klickar på denna länk kommer man dock till en likadant utformad sida som då man klickar på de andra, bortsett från innehållet. Att ge dessa bilder samma storlek, samt lägga dem med samma avstånd från varandra, hade gett ett mer rättvist intryck (Molich, 2002 s.133-138). Längst upp på sidan ligger hela tiden en banner med texten Just for Kids i ett barnsligt typsnitt. Denna banner innehåller på förstasidan förutom texten två ikoner som är länkar till två andra NASA-sidor på nätet. Däremot finns inte dessa ikoner där på någon av undersidorna, utan ligger istället endast längst ner på sidan. För att vara konsekvent hade man kunnat låta dem ligga kvar överst. På undersidorna tillkommer istället för ikonerna en bild längst till vänster på bannern. Denna bild förändras beroende på vilken av de olika sidorna man är inne på, till exempel förändras bilden från två barn då man är på sidan People till en alptopp då man går till sidan Land. Det är en lysande tanke att åskådliggöra sidans innehåll i både bild och text, men det är lite synd att bannern då mer ser ut som en reklambanner, eftersom den skiftar utseende ofta. En lösning vore att lägga bilden tillsammans med rubriken för sidan eller i anslutning till texten. Som tidigare nämnts är målgruppen dåligt specificerad eftersom grafiken riktar sig mot en yngre målgrupp än innehållet gör. Ett exempel som nämndes ovan var bildikonen för underrubriken People, som föreställer två barn i 3-4 årsåldern. Att ha en sådan bild på välkomstsidan kan innebära att äldre barn som kommer till sidan inte tror att den är till för dem och därför inte går vidare för att läsa innehållet. En lösning på problemet vore att helt enkelt ta en bild på äldre barn som till exempel höll på att läsa i någon bok eller experimentera, för att få grafiken mer anpassad till innehållets målgrupp. Förutom att bilden på barnen är lite missvisande tycker jag att bilderna är väldigt bra anknutna till texten och har därför stor relevans. De tar inte för mycket plats utan kompletterar texten väldigt bra. Det är viktigt att bilderna på en sida inte är för stora, vilket annars kan orsaka att det tar lång tid att ladda upp sidan. Detta gäller framförallt för modemanvändare och kan för dem vara ett stort irritationsmoment (Molich, s.129-130). Samtliga bilder på webbsidan är i gif-format, ett litet format för att visa bilder på nätet. En stor eloge till webbutvecklaren som trots att jpeg-bilder ger bäst kvalitet, fokuserat på storleken och gjort även foton i gif-format (Rasmusson, 1998). 4
Det är väldigt bra att ha människor på förstasidan som här är fallet. Det är bevisat att bilder med människor och framförallt ansikten tilldrar människors uppmärksamhet och intresse i större utsträckning än bilder utan människor på. Dessutom ger det ett familjärt intryck (Gazzaniga et al, 2002, kap 6 & 15). Kanske skulle man kunna ha lite fler bilder till och med, med tanke på målgruppen. En tanke vore att göra om länkarna till bilder även på undersidorna för som webbplatsen ser ut idag bygger den relativt mycket på textbudskap (Nielsen, maj 2002). Kontinuitet Första sidan är väldigt olik de underliggande sidorna, mycket på grund av att den har svart bakgrund medan de andra har en vit grund med jordklot på i en mörkare färg. Den vita färgen är här att rekommendera gentemot den svarta, men som tidigare påpekats bör denna tonas i någon färg för att undvika flimmer. Det blir en oerhörd kontrast för ögat att växla mellan den svarta och den vita bakgrunden och det stör användaren, mycket på grund av att den inte riktigt förstår om han/ hon kommit rätt. Jordkloten i bakgrunden är diskreta och stör inte läsningen märkvärt. Det kan annars vara dumt att ha en mönstrad bakgrund till text (MacDonald, 1999). Förstasidan har som syfte att fånga besökaren och locka den att titta mer på sidan. Detta görs exempelvis med hjälp av roliga tilldragande bilder och en liten text som beskriver innehållet i korthet samt syftet, målgrupp och lite om organisationen. Någon sådan text finns inte på sidan (Nielsen, maj 2002). Eftersom mörka bakgrunder ska undvikas bör man göra om förstasidan så att den får samma bakgrundsfärg och upplägg som de resterande sidorna, eller kanske till och med ta bort den eftersom den inte tjänar något syfte (MacDonald, 1999). Då man kommit in på undersidorna är utseendet i sin helhet konsekvent. Det finns dock några undantag. Både då man befinner sig på förstasidan och då man kommer in på undersidorna finns samtliga länkar angivna i en meny. Detta är positivt, men menyn blir dock mindre användbar då den befinner sig på olika positioner på olika undersidor. På de flesta sidor ligger menyn längst upp under bannern med texten For Kids Only. På förstasidan samt undersidorna för FA Q och Games däremot, ligger den istället längst ned på sidan, vilket dels innebär att man måste scrolla ner hela sidan för att kunna gå till en annan sida och dessutom också att det är svårt att hitta menyn. Detta gör sidan mindre lättnavigerad. En läsning vore att låta menyn ligga under bannern på samtliga undersidor. Det är dessutom olika höjd på bannern då man klickar på de undersidor vars länkar ligger på den undre länkraden. Detta borde korrigeras eftersom förflyttningen uppfattas som en rörelse då man byter sida. En rörelse i sin tur drar åt sig ögats uppmärksamhet, vilket är onödigt i detta fall, eftersom det inte är detta objekt som är det viktiga och mest informativa i bilden. Bakgrunden på sidan innehåller ett antal jordklot, som varierar beroende på upplösning på skärmen. Då den vanligaste upplösningen används, nämligen 800 x 600 ligger ett klot bakom texten, vilket ser bra ut. Om man ändrar upplösning till 1024 x 768 eller 1280 x 1024 uppdagas det fler klot på sidan. Detta hade varit bra, om bara inte kloten hade lagt sig på de platserna de lägger sig på. Det högra kloten ligger i de högre upplösningarna halvt utanför bilden (på höger sida) och de andra till hälften under texten och resten till vänster om texten. 5
Detta bör justeras så att sidan ser symmetrisk ut, eftersom man annars får känslan av att kloten är på väg någonstans och dessutom lägger märke till dem, vilken inte är meningen eftersom de tillhör bakgrunden. Bilderna som finns på sidan är relativt små och välkomprimerade varför ett normalt modem skulle klara av sidan utan att användaren får vänta för länge på att den ska laddas. Navigering Navigeringen på undersidorna går ganska bra. Man förstår relativt snabbt hur sidan är uppbyggd. Dock saknas en hemikon för att komma tillbaka till förstasidan. Det är på grund av det avvikande utseendet på förstasidan svårt att förstå att alla de bildlänkar som fanns på förstasidan också finns på undersidorna - i textform. Detta beror mycket på att menyn inte finns på samma ställe på alla sidor, samt att bilderna inte kopplas till textlänkarna på någon av sidorna. Denna osäkerhet gör att användaren troligen vill ta sig tillbaka till förstasidan för att välja ett annat alternativ, vilket är svårt att hitta länken till. Det finns en textlänk längst ner på undersidorna, som går till den fösta sidan, men detta är en långsökt väg dit på grund av läget på sidan. Känslan av att det inte ska vara möjligt att gå tillbaka till förstasidan finns, varför jag än en gång anser att den bör tas bort. Det är enkelt att veta var man just nu befinner sig. Sidans rubrik innehåller samma namn som länken till sidan och dessutom visas den bild som fanns på förstasidan i bannern, vilket jag tidigare nämnt. Man ser dock inte vilka länkar man besökt eftersom de inte färgas i någon annan färg då man trycker på dem. Eftersom inte sidan är hierarkiskt byggd tycker jag inte att detta behövs. Sidan kräver inte att användaren ska behöva skrolla i sidled ens i väldigt låga upplösningar, vilket är bra. Skrollning i sidled förekommer sällan på sidor och är just därför väldigt irriterande för användaren då de uppkommer (Nielsen, dec 2002). Tillgängighet Sidan är relativt bra anpassad till funktionshindrade besökare. Personer med synnedsättning kan ställa in storleken på sidans text i sin webbläsare, vilket ökar tillgängligheten för dem och gör att det mindre textsnittet inte spelar någon roll. Det underlättar även för rullstolsbundna människor med till exempel en CP-skada. Dessa personer har ofta ett större tangentbord och sitter därför längre från skärmen än andra människor. Dessutom kan de ha spasmiska ryckningar och har därför svårt att träffa rätt med musen. Därför behöver även de en större text och större upplösning för att kunna läsa texten och klicka på länkarna (Nielsen, dec 2002). Det finns alternativa texter som talar om vad som händer om du klickar på bildlänken i de flesta fall men inte överallt. Dessa texter behövs bland annat av två anledningar. För en modemanvändare, som måste vänta på att en bild ska laddas upp kan en alternativ text ge den direkta feedback till användaren som bilden gör. Användaren kan se att det ska komma en bild på platsen och kan även med hjälp av alternativtexten avgöra vad bilden kommer att föreställa, samt om det är en länk eller inte (om detta framgår av texten). Dessutom är alternativa texter ovärderliga för användare som använder sig av skärmläsningsprogram. 6
Programmet kan inte tolka bilden utan läser endast upp alternativtexten. Om denna är beskrivande kan även dessa användare ta del av den bildliga informationen (Jim Thatcher, 2003). Bildlänken för People har en alternativtext (Kids) som inte riktigt stämmer överens med de andra länkarnas (t.ex. How Nasa studies Land under Land) och inte heller med vad som döljer sig bakom länken. Vissa länkar från undersidorna till andra sidor saknar helt alternativa texter. Det finns inga reklambanners eller popupfönster som stör läsningen för en funktionshindrad eller synskadan besökare. Detta är bra eftersom sådant ofta ställer till problem för besökare som använder sig av skärmläsningsprogram. För övrigt är detta störande för övriga användare också (Molich,2002 s.130-132). Ett avslutande problem som uppstår då en synskadad ska navigera på sidan är tabbarnas följd och länknamnen. Om man tabbar sig fram på sidan hoppar man runt bland länkarna utan ordning, vilket ställer till det för en synskadad som förlitar sig helt på talsyntesen och skärmläsningsprogrammet. Rubriken i bannern läses till exempel inte upp, vilket den borde göra för att klargöra vilken sida man kommit till. Ett vidare förslag är att låta de olika huvud-undersidorna följa på varandra, vilket just nu inte är fallet (Jim Thatcher, 2003). Slutsats För att sammanfatta intrycket av NASAs sida för barn skulle jag vilja saga att den är svår att navigera på eftersom den innehåller så lite information på själva sidan. Uppfattningen om att länkarna ska leda till mer information gör att man klicka på dem, varpå användaren helt plötsligt befinner sig på en extern sida. Innehållsmässigt är sidan något fattig och bygger mer på att ha länkar till andra sidor där informationen finns. Förstasidan ger ett felaktigt intryck av att sidan är riktad till små barn, vilket den inte är innehållsmässigt. Dessutom är färgen olämplig och det är svårt att återvända till den, varför jag skulle vilja ta bort den. Sidan lite mindre tillgänglig för synskadade användare eller besökare som använder sig av skärmläsningsprogram eftersom den har inte alltid alternativa texter till bilderna. Dock har sidan inga störande popup-fönster eller reklambanners som kan störa användaren, vilket är positivt. Texten är förstorbar, vilket är bra för användare med nedsatt syn eller användare som sitter långt från skärmen. Sidan är inte konsekvent i utseendet och lokalisering av menyer och länkar, vilket är negativt. Helhetsintrycket av sidan är att den är relativt dåligt utformad för användare och att den är ganska tråkig att besöka. De bilder som borde pigga upp sidan, finns så långt ner att jag inte ids gå dit för att se dem. Det är svårt att greppa informationen eftersom det bara känns som en introduktion till de andra sidorna som NASA har. Jag hade önskat mer information om vad de verkligen gör med exempel på webbplatsen och inte genom länkar till andra webbplatser, vilket ger en konsekvent navigation. En upprustning av sidan med mer fokus på användargruppen och mer information skulle med andra ord vara ett framtidsprojekt för NASA. 7
Referenser Böcker Gazziangia, M. S., Ivry, R. B. & Mangun, G. R., Cognitive Neuroscience The Biology of the Mind 2 nd edition. W.W. Norton & Company, New York, 2002, kap 6. Gazziangia, M. S., Ivry, R. B. & Mangun, G. R., Cognitive Neuroscience The Biology of the Mind 2 nd edition. W.W. Norton & Company, New York, 2002, kap 15. Molich, R., Webbdesign med fokus på användbarhet, Studentlitteratur, Lund, 2002. Rasmusson, B., A tt konstruera en hemsida, Libris, Örebro, 1998, s.46-48. Artiklar MacDonald, L. W., (1999). Using Color Effectively in Computer Graphics. IEEE Computer Graphics and A pplications, July/ A ugust, 20-34. Internet Nielsen, J., http:/ / www.useit.com/ alertbox/ 20020512.html, Top Ten Guidelines for Homepage Usability, 2003-09-22. Nielsen, J., http:/ / www.useit.com/ alertbox/ 20021223.html, Top Ten Web-Design Mistakes of 2002, 2003-09-22. Thatcher, J., http:/ / www.jimthatcher.com/ webcourse2.htm, 2. Alternative Content for Graphics, 2003-10-16. Annat Designhögskolan i Umeås kursmaterial till kursen Kognitiv Design, Typografi Studiehäfte, 2003. 8