IT-universitetet Göteborg Grafiska Gränssnitt Grafiska Gränssnitt. Inlämningsuppgift / Interaktions design. Författare: Cecilia Gustafsson

Transkript

1 Grafiska Gränssnitt Inlämningsuppgift / Interaktions design Författare: Cecilia Gustafsson

2 Inledning Tanken med den personliga uppsatsen är att fördjupa sig i eller vidare utveckla något ämne inom domänen grafiska gränssnitt. Mitt val av fördjupnings ämne blev att analysera webbplatsen med hjälp av de koncept och begrepp som diskuterats under kursen och utifrån en interaktions designers principer. Varför just den här sidan valdes var att den nämndes vid en av föreläsningarna och redan vid första besöket så väcktes mitt intresse till att studera den noggrannare då jag upplevde den ofullständig och okontinuerlig. Jag ville studera den närmare och se vad som skulle kunna göras bättre. Uppsatsen är skriven som en opponering som riktar sig till den personen som har designat webbsidan och är en hjälp till hur den här personen ska kunna förbättra sidan. ICAP AB är ett dataföretag som tillverkar och tar fram nya och anpassade gränssnitt för olika ändamål, framförallt till personer med olika funktionshinder. Det är ett seriöst företag som borde ha en professionell webbplats för sina kunder.

3 Dokumentation Företagsprofil ICAB AB är ett företag vars speciallite är datorbaserade anpassningar för funktionshindrade. Det är ett innovationsriktat företag som ta fram nya och anpassade gränssnitt för olika ändamål. De erbjuder tjänster med tekniska utredningar och anpassningar för alla typer av funktionshinder inom arbete, skola och vardagsliv. Deras största kunder är Arbetsförmedlingar, Försäkringskassor och Landstingen. Anpassningarna omfattar helt eller delvis utredning, systemlösning, utbildning och installation. Systemlösningarna görs helt produktoberoende. Produkt med bästa funktion i varje enskilt fall väljs. Utbildning genomförs under pedagogisk högskoleutbildad ledning. Tillsammans har personalen över 50 års erfarenhet av anpassningar. Användarprofil Min tolkning blir att användarna är deras kunder, arbetsförmedlingar, försäkringskassor och landsting. Rörelsehindrade personer och personer med andra handikapp och speciella behov har säkert också intresse av att besöka sidan, lika så personer med koppling till gränssnitts design så väl traditionella som icke-traditionella sådana. Det rör sig alltså om personer i varierande åldrar och med olika kunskaps nivåer och utbildningar. Deras datorkunskap och erfarenheter av olika webbsidor och system varierar mycket. Analys Förstasidan Förstasidan består av en fast ram upptill, en smal ram till vänster och en större ram i mitten där basinformation visas. Frameset har sina för- och nackdelar om man ska välja det eller tabeller är väl mest en smak sak. Fördelen med frameset är att de är lätta att underhålla men svåra att bokmärka men med tabeller kan man uppleva att man har mer kontroll över sidans layout. En första sida bör innehålla en så kallad tagline som på ett kort och koncist sätt beskriver vad företaget (webbsidan) står för. Det kan vara en eller ett par meningar som summera vad företaget gör. Den övre ramen Den övre ramen är statisk och innehåller de meny val som finns och den ser likadan ut på de flesta sidor. Observera att det endast är på de flesta sidorna som denna ram ser likadan ut men mer om detta senare. Här återfinns även företagets logga, det hade varit att föredra att den länkar tillbaka till första sidan, visserligen befinner vi oss just nu på första sidan men den borde länka hem på alla de övriga sidorna vilket den inte gör. Att kontaktuppgifter finns statiskt på alla sidor är bra, alternativ är att man placera det längs ner på sidorna istället. Menyn innehåller sex olika alternativ och man får en tydlig indikation när man passera över dem. Muspekaren ändrar form och knapparna förändras genom att de sjunker in och texten byter typsnitt, mindre fördelaktigt är att all text då inte får plats utan hamnar utanför knappen och blir därför inte helt synlig. Meny alternativet FÖRSTASIDAN leder alltid hem och borde ligga som första menyval. Det känns mest logiskt (knappar till vänster brukar betyda tillbaka och knappar till höger brukar betyda framåt), jämför med Explorers tillbakaknapp och framåtknapp. Menyns placering är bra och är det mest vedertagna valet även om det blir vanligare och vanligare med en vertikal meny till vänster.

4 Den vänstra och högra ramen Varför alla dessa färger och typsnitt? Det ända som känns rätt i val av typsnitt är att de är av typen san serif. Skärmen är inget idealistiskt medium att läsa på därför finns det några typografiska riktlinjer som kan vara bra att följa: max tre typsnitt max två vikter: fet och normal, kursiv text är svårläst på skärmen Verdana är ett san serif typsnitt som är att föredra för webbdesign, Thaoma går också bra fyra typsnittsstorlekarna, exempelvis: rubrik, underrubrik, text och fotnot och det ska vara tydliga skillnader tydligt belysta rubriker ett klart och tydligt språk punktform för uppräknande tabeller ingresser och sammanfattningar understruken text indikera länkar språkgranska stora mellanrum påverkar läshastigheten versaler minskar läshastigheten vänsterjustera texten Den vänstra spalten och mittenspalten skulle man kunna separeras med hjälp av en linje eller scrollbar för att tydligare visa att det är två oberoende delar. Personligen tycker jag att information om företaget skulle kunna ligga under en egen meny Företaget eller så skulle det kunna vara huvudtexten på första sidan. Nyheterna i mitten skulle istället kunna finnas i en sidospalt till höger eller vänster eller ändå bättre under en egen meny Nyheter. På första sidan bör man undvika scrollning både vertikalt eller horisontellt. Webbplatsens layout bör inte vara bredare än 800 pixlar bred. Detta för att säkerställa så att besökare med en skärmupplösning på 800x600 ska kunna se hela webbplatsen utan att behöva skrolla i sidled. Layouten bör också utformas så att rader i textstycken inte innehåller mer än maximalt tecken eller färre. För att åstadkomma detta på bästa sätt kan man bygga upp layouten av tabeller, dock osynliga för användaren, där kolumner med text får en fix bredd för att säkerställa att texten blir så läsbar som möjligt. Att återanvända färger ifrån företagets logga ger en harmonisk webbplats och man kan tänka på att försöka hålla gränssnittet så ren som möjligt med mycket luft och inte lägga ner en massa arbete på onödig grafik less is more. För att underlätta för t ex synskadade eller som ett allmänt hjälpmedel kan man använda HTMLattributet <ALT>, som står för alternativ text det vill säga en kort beskrivning om vad en speciell bild föreställer. Denna text kommer användaren att kunna läsa om en bild inte kan visas, t ex i textbaserade www-klienter eller även i grafiska sådana med bildfunktionen avstängd. Detta är också speciellt viktigt om bilder används som navigation. Kontakta oss Det är mycket bra att man har en enskild sida där man kan hitta all information om hur och vilka som man kan kontakta på företaget. Det första som gör en förvirrad när man kommer till den här sidan är att vänsterspalten helt har försvunnit. Inom webbdesign handlar det om att var konsekvent och strukturerad för att minska användarens kognitiva belastning. När man klicka på en länk på webben förväntar man sig att en ny sida som innehåller information om det aktuella ämnet ska öppnas. Därför bör meljlänkar tydligt indikera att de är just mejllänkar. Detta gör man bäst genom att länkarna ser ut på något utav följande sätt: tomas.mardsjo@icap.nu eller skicka ett mejl till försäljaren Tomas Mårdsjö. Man bör alltså undvika att enbart ha en persons namn som länk då det vanligen leder till en personlig biografi. Interaktions design handlar om att bemöta en användares förväntningar. Produkter Även på den här sidan saknar jag den smala ramen på vänster sidan men tydligt är att produkternas namn är länkar som leder vidare till nya sidor av olika slag, exempelvis pdf-filer, som innehåller

5 mer information om produkterna. Det är bra att det finns en kort beskrivning vid sidan om länken som förklarar kort vad det är för produkt och som gör en nyfiken på att ta reda på mer om de olika objekten. För att göra sidan lite mer iögonfallande skulle man kunna ha lite bilder på produkterna och kanske dela in dem i olika kategorier. Sidan är väldigt lång och det är svårt att få en överblick över den. Längs ner på sidan finns länkar till olika partners, dessa tycker jag är helt mal placerade och man har ingen aning om att de finns där förrän man scrollat dit, om man nu ens kommer så långt ner på sidan någon gång. Dessa hör kanske mer hemma på sidan om företaget. Hämta Även den här sidan saknar vänster spalten. Här skulle det vara bra med någon form av översikt över vad som finns på sidan så att man snabbt och lätt kan hitta det som man letar efter. Informationen skulle kunna struktureras upp för att göra det mer lättnavigerat. Det finns olika sätt att visa information på. Här skulle det kunna vara logiskt att ordna efter kategorier eller alfabetet. Uppgift om när sidan senast uppdaterats ligger i dagsläget sist men skulle nog göra sig bättre längst upp på sidan för det är en upplysning som man vill kunna se utan att behöva skrolla. Länkar som snabbt tar en tillbaka till toppen på sidan är bra och snabb tjänst för användaren. Orden i länkarna är väl konstruerade då det viktigaste ordet i länken står först. Web-butik Det här gränssnittet skiljer sig helt från de övriga, vilket nog också är tanken. Webbutiken ska nog fungera som en eget webbplats vilket gör att jag väljer lägga det utanför min opponering. Det kan dock nämnas att det här ser proffsigare ut och skulle med fördel kunna användas genom hela sajten men att det finns en del brister som borde ses över. Till exempel så hade det varit att föredra att loggan var en dold länk som tar en hem till huvudsidan. In English Den här sidan skulle kunna vara en kopia av sidan om företaget och kontakt sidan fast då givetvis på engelska, inte helt olik hur den ser ut idag alltså. Färg Det finns många åsikter om färg! Tänk på att använda färg sparsamt! Den vita bakgrunden blir en bra kontrast mot texten som syns tydligt, men kan vara tröttande för ögonen om man sitter en längre tid vid skärmen. Den röda färgen i den övre ramen är snygg och trotts att den är mörk ser man tydligt den vita texten och ger ett behagligt intryck. Färg ska inte vara avgörande för gränssnittet utan ska vara ett verktyg för att förstärka designen. Gränssnittet ska kunna användas helt monokront säkrast är dock att använda webbsäkra färger. Färger är kultur beroende och i västvärlden använder vi rött för varning, värme och fel, gult för försiktighet exempelvis vid mindre varningar, grönt står för ok, kör, rätt och blått betyder kallt. Starka och mättade färger ska inte användas som bakgrundsfärg och man ska inte använda färg som informationsbärare i perferin. Blått brukar man använda för att representera data (siffror, text, och tunna linjer). Några färgkombinationer som bör undvikas är: röd/blå, röd/grön, blå/gul och blå/grön om det inte är väldigt stor skillnad i färg mättnad. Allmänt Ett stort plus till valet av Title tag Att välja företagets namn som första ord är helt rätt och det är det som kommer att synas i olika sökmotorer och bookmarks listor. En flexibel sökmotor är ett tips på hur man kan hjälpa användaren att orientera sig bland sidorna. Användaren kanske leta efter en specifik produkt eller uppdatering och då kan man ha en sökmotor som snabbt söker igenom webbplatsen och gör en lista över de träffar som finns. Det är a och o inom interaktions design att man är konsekvent i design valen för att underlätta navigeringen för användaren. Hur och var man placera objekt har också stor betydelse, tänk på att vita (tomma) ytor också kan ses som objekt och har sin betydelse i hur de placeras och används.

6 Det finns allmänna kunskaper om människans beteende och tolkningar inom perceptions- och kognitions psykologi, använd dessa! Det är generella designprinciper som bygger på teorier från psykologins forskning om hur vårt mänskliga informationsbehandlande system fungera och är konstruerat. Det förklarar också hur vi tar in och bearbeta information. För att få en mer specifik kunskap om användargruppen kan man genomföra en användaranalys. Några frågeställningar som man bör ha svar på innan man börja designa en webbplats: Vad ska sajten förmedla? Vilket är budskapet? Vilka är målgrupperna? Vilken information ska finnas? Vad vill målgrupperna få reda på? Hur ska webbplatsens struktur se ut? Sidindelning? Rubriker? Hur ska man navigera? Hur ska menysystemet se ut? Hur ska sidorna se ut? Det vill säga vilken grafisk profil ska man välja. Vilken Layout ska man ha? Arbeta sedan fram ett förslag på hur webbplatsen ska se ut och testa det på de olika användargrupperna. Utvärdera testerna och förbättra webbplatsen utifrån testresultaten och iterera hela processen till ett tillfredställande resultat uppnåtts.

7 Avslutning Det är lätt att vara kritisk när man granskar och opponera andras gränssnitt och hemsidor men samtidigt har det varit roligt att få använda de kunskaper som man fått under kursen. Bara en sån sak som att jag såg den här webbsidans brister första gången jag besökte den är kul och visar att jag verkligen har lärt mig en hel del på kursen. Skrämmande är dock att sidan tillhör ett dataföretag som sysslar med just gränssnitt och interaktions design av olika slag och borde därför har en betydligt mer förtroende ingivande hemsida. Webbsidan är ju faktiskt en del av företagets ansikte utåt och borde därför representera vad företaget står för och verkligen förmedla det budskapet som användarna förväntar sig.

8 Referenser 1. Föreläsningsanteckningar 2. Design gurun Jacob Nilsen design tips 3. Webbplatsen: 4. Tufte s webbplats: 5. Tufte, E. R. Envisioning Information, Graphics Press, UK, 1990