PROJEKT: WEBB- OCH INFORMATIONSDESIGN Avvägningar och motiveringar vid gränssnittsdesign av webbsida för PolyPlast+ IT-universitetet i Göteborg Interaktionsdesign - Grafiska Gränssnitt 2003-09-17 Deltagare: Anders Lundell, it3luan@ituniv.se, Text/tabellbearbetning, idéspruta Annica Löfving, it3loan@ituniv.se, Textbearbetning, idéspruta Anna Lindvall, d00anna@dtek.chalmers.se, Programmering, idéspruta Helena Callert, d00cache@dtek.chalmers.se, Programmering, idéspruta Kalle Ulvstig, ix3ulka@ituniv.se, Dokumentation, idéspruta Uppdrag: Skapa en webbplats åt PolyPlast+. Målgrupp: Okonventionella köpare (med plastindustrimått mätt), t.ex. inköpare, designers från stora koncerner eller företag som kan tänka sig att beställa något koncern/företagsspecifikt i förhållandevis små volymer. Mindre uppdragsgivare med udda önskemål om materialkombinationer (t.ex. plast och trä, plast och glas) eftersom man vill etablera sig såsom varande mycket kompetent inom dessa områden. Tidigare kunder. Företagets färger har hängt med ända sen starten och bär företagsidentiteten tillsammans med logotypen. Viktiga riktlinjer vi valt att följa vid utformning av PolyPlast+ webben Vi tycker att gränssnittet skall ge användaren överblick, navigation och position. Webbsidan skall visa innehållet och leda besökaren rätt. Gränssnittet vi valt skall hjälpa användaren att utföra det som vill göras. Användaren skall känna sig trygg i webbmiljön och gränssnittet skall visa de möjligheter som finns med gränssnittet. Vi har valt att anpassa gränssnittet till användargruppen (definieras ovan i målgrupp). Vi har valt att gränssnittet skall vara konsistent och konventionellt. Det är lättare att känna igen än att komma ihåg. Ett exempel som väger in här är färgval som kan kopplas till företagets logotyp samt företagsidentitet. Det skall vara lätt och snabbt att lära för användaren och användaren skall förstå de funktioner som finns på webbsidan. 1
Färg, form och andra designelement En del knep vi använt oss av för att få användaren skall stanna kvar på webbsidan är rubriker, symboler, färger och länkar. Det handlar om att skapa visuell mening, att tolka och guida användaren. En logisk och en visuell struktur har varit nyckelord vid skapandet av webbplatsen. Något vi även beaktat vid formgivning av webbsidans gränssnitt är i vilken miljö webbsidan skall användas i. Detta är viktigt eftersom ljus kan påverka kontrast eller liknande vid både text, färger och ikoner. Ett effektivt sätt vi valt för att gruppera informationen på webbsidan är genom att använda olika färger som finns i företagets logotyp. Vi kan då enkelt dela upp skärmen i olika områden. Genom hela webbgränssnittet har vi valt att använda två färger, grön och beige som finns i företagets logotyp. Företagets logotyp skall synas under hela besöket, eftersom detta medför att logotyp och namn blir inarbetat hos besökaren. Vi anser att det är viktigt att undvika att skapa nya designelement för redan existerande funktioner, t.ex. så skapas inte någon ny symbol som representerar till exempel webbsidans förstasida. Detta sker genom att trycka på en länk alternativt att trycka på företagets logotyp (igenkänning från tidigare besök). Designelementen vi designat ger användaren ledtrådar. Med detta menas att då man går med muspekaren över ett element så dyker en text dyka upp som skall ge användaren stöd vad elementet är för någonting, t.ex. i form av ett bildnamn. Webbadressen till företagets webbsida skall synas under hela besöket. Vi har valt att göra detta genom att längst ner på sidan hela tiden visa kontaktinformation till PolyPlast+ som innehåller; adress, telefon och e-post. Detta har vi gjort för att det skall vara enkelt för kunden att snabbt kontakta företaget. För att underlätta för användaren har vi valt att ha kontaktinformation även på andra delsidor. Frames En lösning vi valt att använda oss av är frames. Vi tycker det är viktigt att använda frames på rätt sätt och anpassar därför frameslösningen för flertalet olika typer av webbläsare. Vi anser att denna metafor mycket användbar och skapar ett mycket enkelt och lättnavigerat menysystem. Det är viktigt att visa var användaren befinner sig i en webbsida. Vi använder därför positionsangivelse på alla webbsidans delsidor. Detta underlättar navigering. Det är även viktigt ur kommunikationsperspektiv, då det är lättare att snabbt förstå informationen om användaren eller besökaren ser rubriceringen. Text och länkar Texten på denna webbsida skall förmedla information till användaren och den skall hjälpa användaren att fatta rätt beslut. Informationsmängden som vi fick tillgång till var massiv och eftersom en användare ofta skummar igenom informationen och för att användaren inte skall tröttna och lämna webbsidan har vi valt att dela upp texten i flertalet stycken på sidorna. Vi har 2
även bortsett från irrelevant information. Vi har valt att ha korta texter för att minimera scrollandet och behållaanvändarens intresse. Vi har valt sanseriffer (till exempel Arial) för all text på webbsidan. Detta har vi gjort eftersom dessa saknar klackar och då blir det mer flyt då användaren läser text på bildskärmar. Utvecklare som använder seriffer (till exempel Times New Roman) vid gränssnitt som är anpassade för bildskärmar riskerar att försvåra för användaren och texten flyter lätt ihop. Då vi vill att denna typ av teckensnitt (sanseriffer) alltid skall användas oberoende vilka teckenstilar som finns installerade på datorn, finns fyra alternativ att visa texten på. Dessa är Verdana, Arial, Helvetica eller Sans-serif. Teckenstorlek är satt till 12 pkt som är standard för webbsidans brödtext. Storleken har betydelse och vi anser att 12 pkt är den perfekta teckenstorleken för läsning av text på bildskärm. Större teckensnitt har vi valt vid rubriker, t.ex. på menyn för navigering på delsidorna som vi satt till 14 pkt. Ytterligare åtgärder för att underlätta för användaren är att markera viktiga ord i fet stil. Att använda sig av understrykning har vi inte gjort eftersom det liknar standarden för klickbara länkar. Dessutom förstör det ordbilden på samma sätt som i normal typografi. 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. Vi har valt att använda svart på vit bakgrund text istället för färgad text och bakgrund. Detta dels så att inte användaren misstar den färgade texten för en länk och för att skarpa extrema färger kan skapa oharmoni och otydlighet. För att inte förvirra användaren har vi valt att ord som är understrukna betyder att det är en länk. Länkar du ännu inte klickat på är grön, besökta är mörkt gröna. Navigering Något som ofta kan krångla till det är att navigera rätt på webbsidan. Användargränssnitt handlar om förståelse, därför måste även navigeringen fungera tillfredsställande för hela målgruppen. Användaren skall veta vart hon är på väg, inte gå vilse och skall alltid ha lätt att hitta tillbaka. Det kan ofta vara krångligt att snabbt bläddra sig dit användaren vill i en webbsida. Vi har valt ett entydigt, snabbt och lättbegripligt verktyg för navigering. Navigeringen kommer att finnas med genom hela gränssnittet för att skapa konsistens, entydighet. Att vara konsekvent vid utformningen och placeringen av navigationsmenyn är viktigt. Det skall vara enkelt för användaren att gå tillbaka till föregående och tidigare besökta sidor. Av denna anledning har vi byggt upp med ett navigationssystem högst upp på sidan som sedan kommer att skapa undermenyer som är vänsterställd i vänster på skärmen. Vi valde att placera dem till vänster eftersom vi i västvärlden läser från vänster till höger och är naturligt för oss. Samma navigationsuppbyggnad återkommer vid alla undermenyer. Det går även att återgå till huvudmenyn genom att trycka på rubriken. Vi har valt att inte ge visuella vinkar om klickbara objekt eller områden på skärmen. Detta eftersom vi tror att det kan förvirra för användarna. Texten i navigationsmenyn har vi valt i de två färger som återspeglas i företagets logotyp. Detta för att förstärka det vänliga intrycket. Vi är dock medvetna om att detta kan förvirra för användaren men det är en estetisk designavvägning vi gjort vid designval. 3
Figur 1. Navigering Startsidan Förstasidan skall ge användaren all information som behövs för att kunna bedöma om sidan skall utforskas. Förstasidan skall avslöja hela innehållet. Vi pryder startsidan med ett gränssnitt som fungerar som en stor skylt och som leder besökaren rätt. Det som syns är det som existerar för användaren och det är därför viktigt att text och andra element ger all information användaren behöver så att besökaren kan utforska. Detta är just anledningen till att vi har en stor rubrik i början är för att intressera besökaren att söka vidare. Vi har även valt att göra denna text i en annan färg än svart för att skapa ett intresse hos besökaren (figur 2). Att bryta konventioner kan i detta fall vara bra anser vi då det ger ett visuellt intryck till besökaren. Vi har valt att designa webbsidan med runda hörn för att ge ett mjukt och vänligt intryck. De krav som skall finnas på startsidan är främst avsedda för att ge användaren ett intresse på webbsidan. Företagets verksamhet presenteras kortfattat och de delar som anser mest relevanta finns det en kort introduktion till. Texterna är redigerade för att ge ett högt läsvärde. Företagets webbsida består av ett antal delsidor som innefattar den information som skall finnas tillgänglig på webben. Denna information har framkommit genom dokumenterade bilagor som funnit tillgängligt på projektsidan. Vi har noggrant avvägt vilka delsidor som skall finnas och hur namngivningen av dessa skall ske. Namngivningen är viktigt av navigeringsskäl. Samtliga delsidor skall uppfylla kraven på samma typsnitt, teckenstorlek och designelement. För att komma tillbaka till startsidan kan besökaren klickar på hem eller företagets logotyp så kommer besökaren till startsidan. 4
Figur 2. Startsidan Delsidorna Delsidorna är uppbyggda så de hela tiden dyker upp innanför den grönfärgade ramen som omger sidan. Sidorna har vit bakgrund med en meny till vänster för navigering. Text- och färgval är motiverade enligt tidigare. För att komma tillbaka till delsidans huvudsida så klickar man delsidans titel som är en länk och detta syns genom att den är understruken. Vi har valt ett konsekvent menysystem, aktuella sidan markeras med fet stil i vänsterlistan, alltid samma toppmeny som nämnts tidigare. Funktionalitet Alla funktioner skall uppträda likadant och ge samma typ av resultat då de används. På de ställen då vi har placerat en länk till början på sidan så skall denna länk återkomma på liknande platser på webbsidan, samtliga delsidor har i grunden samma utseende och funktion. För att tydliggöra feedback på webbsidan har vi valt att skicka besökaren vidare till en ny sida som bekräftar att besökaren till exempel skickat e-post via formulär på webbsidan till företaget. Detta underlättar för användaren eftersom användaren får feedback på den handling som utförts. 5
Vi anser att det är viktigt att webbsidan ser likadan ut oavsett vilken version av webbläsare besökaren använder eller antal bildpunkter användaren använder. De sökbegrepp som vi valt att ha med har vi bestämt själva eftersom vi inte ha kunnat föra en dialog med företaget om deras önskemål. Bilder Vi har även valt att högerställa alla bilder eftersom text är enklast att läsa från vänster till höger och vi anser att bilderna är ett komplement till texterna så bilderna får följa principen att text till vänster och bilderna blir sedan vänsterställda texten. Loggan samt toppmenyalternativen är.gif -bilder. Bilderna på björnar etc. är jpg eftersom det passar bättre för foton med många färger. Samtliga foton är nedskalade, upplösningen är satt till 72 pixlar/tum vilket passar för webben och de är optimerade för att minska nedladdningstiden. De bilder som fungerar som länkar fungerar bara som en extra funktion och det går att nå dessa sidor genom navigering i menyn. Som informationsvisualiserande komplement till den faktaspäckade, textbaserade informationen om de olika plasternas egenskaper, valde vi att skapa en översiktstabell. Om omständigheterna hade varit annorlunda (ett riktigt företag; mer än en veckas spridda arbetsinsatser) hade det kunnat bli aktuellt med fler liknande tabeller eller sökfunktioner utifrån andra entiteter såsom t ex plasternas användningsområden, varumärken eller något annat relevant efter samråd med uppdragsgivaren. Vi extraherade från texten 26 olika egenskaper hos de olika plasterna, där nio av dem är ensamma om en viss egenskap. Detta kan ses som exempel på vilka problem man kan stöta på vid skapandet av översiktstabeller; skall man sträva efter en komplett, och därmed gles tabell eller en reducerad, tät dito där intressanta (?) egenskaper som t ex miljövänlig (PP- Propenplast) eller God åldringsbeständighet (PMMA-Akryl) saknas? Efter lite övervägande beslutade vi oss för att ge användaren möjlighet att se tabellen via en.pdf -länk på startsidan för fakta om plaster. Att ha tabellen direkt synlig här hade inte stämt överens med våra riktlinjer för text och länkar; det hade blivit för mycket för besökaren att ta in ofrivilligt. Vi valde.pdf - formatet eftersom detta dels är ett gratis insticksprogram och därmed finns tillgängligt på de flesta datorer, dels p g a smidigheten att kunna uppdatera tabeller i t ex Excel och med några få musklick göra.pdf -fil av den. Dessutom ger det fler möjligheter än genom en vanligt.gif eller.jpeg bild. Bearbetning av textinnehåll Eftersom informationen vi fick tillgång till var massiv gjorde vi flera avvägningar om vilken information som var relevant för webbsidans innehåll. Den information vi valde ansåg vi vara mest intressant utifrån målgruppen. Utifrån informationen vi valde att använda gjorde vi sedan avvägningar om eventuella bilder skulle komplettera texterna för att skapa ökad tydlighet och förståelse av texternas innebörd. I fallet med uppdragssidan föll det sig naturligt att ge besökaren en mer visuell upplevelse genom att låta respektive bild få mer utrymme än tillhörande text som ursprungligen var väl detaljerad beträffande de olika uppdragen. 6