Projekt 1 Webb- och inform ationsdesign

Transkript

1 IT-universitetet MDI Interaktionsdesign Interaktionsdesign Grafiska gränssnitt 6p HT 03 Projekt 1 Webb- och inform ationsdesign Grupp 6 Theresa Harmanen, Linus Kjellqvist, Camilla Orrenäs, Emma Thunström och Calle Tornéus Göteborg den 17 september 2003

2 Hur vi har arbetat Vi i grupp sex valde att konstruera en sida för konsultföretaget CoCoCo som första projekt på kursen Grafiska gränssnitt. Samtliga inom gruppen var mer intresserade av att välja ett tjänsteföretag som uppdragsgivare än ett produktföretag. Första mötet, onsdagen den 10: e september, inledde gruppen med en brainstorming om hur webbsidan skulle utformas. Vi började med att titta på andra konsultföretags hemsidor. Genom att titta på andras bra och mindre bra lösningar fick vi inspiration att komma igång. Vi använde sedan en whiteboardtavla där idéer presenterades i form av enkla skisser. Whiteboardtavlan fungerade som ett utmärkt verktyg för att ge oss konkret material att utgå från och diskutera kring. Eftersom vi i gruppen aldrig tidigare arbetat tillsammans var det mycket givande att kunna göra snabba skisser för att visa hur man tänkt och vad man menar. Utifrån dessa skisser enades till slut gruppen om en typ av webbsida som vi ansåg vara relevant och passande för CoCoCo. Skisserna dokumenterades med en digitalkamera (bilaga 1). Fredagen den 12: e september fortsatte gruppen med själva konstruktionen av webbsidan. Mötet började med att vi gick igenom de idéer vi enskilt hade funderat kring sen vårt senaste möte. Diskussionen berörde placering av meny, färger och bilder samt vilka texter som var väsentliga för CoCoCo att ha med på sin webbsida. Vi delade upp arbetet mellan oss i gruppen, där Camilla och Emma tog hand om texterna, Linus började bearbeta bilderna och Theresa och Calle började bygga webbsidans struktur. Vi träffades med jämna mellanrum under dagen för att diskutera och ge varandra feedback. På så sätt fick vi hela gruppens synpunkter om alla de olika områdena. Under arbetets gång skrev vi anteckningar om designval, diskussioner och annat relevant som berörde projektet. De olika arbetsuppgifter vi utfört har vi försökt att dela upp utifrån de roller vi tog på oss vid gruppindelningen. Till sist deltog alla i alla delar av arbetet. Mot slutet av dagen började Linus och Calle skriva rapporten, efter att vi gemensamt i gruppen diskuterat kring de designval vi gjort. Samtliga beslut som fattats har diskuterats igenom tillsammans i gruppen. Måndagen den 15: e september träffades vi återigen. Vi gick igenom det som gjorts under helgen. Theresa justerade webbsidan utifrån de förändringar vi kommit överens om. Emma och Camilla fortsatte med rapporten medan Calle och Linus började förbereda redovisningen. Tisdagen den 16: e träffades vi för att slutföra de uppgifter vi fördelat dagen innan och avsluta projektet. Arbetsinsatser Textbearbetning: Camilla Orrenäs, Emma Thunström Bildhantering: Theresa Harmanen, Linus Kjellqvist, Camilla Orrenäs, Calle Tornéus Formgivning:

3 Samtliga Implementering: Theresa Harmanen Rapport: Linus Kjellqvist, Camilla Orrenäs, Emma Thunström, Calle Tornéus Redovisning: Linus Kjellqvist, Calle Tornéus Diskussion kring webbsidan och designval Layout Webbsidan (bilaga 2) är utformad i widescreen-format för att ge ett stilrent och modernt intryck vilket är i enlighet med företagets profil. Vi har använt fasta fält för placering av meny, text och bild. Det gör att webbsidan uppfattas som lugn och enhetlig. Sidan har delats upp i tre fält. Navigeringen har placerats längst till vänster, i mitten ett textfält och till höger placeras bilder. Logotypen har placerats längst upp till vänster ovanför själva widescreen-området och är länkad till startsidan enligt gängse standard. På varje sida visas rubriker för att ge återkoppling till var användaren befinner sig. Rubrikerna skiljer sig lite i form från menyn för att de inte skall förväxlas med länkar. De skrevs med extra utrymme mellan bokstäverna, och för att röstuppläsning skall fungera har vi använt oss av letter spacing istället för mellanslag. På de sidor som innehåller mycket text använder vi oss av en scroll-list. Den är diskret utformad för att inte ta för mycket uppmärksamhet. Skälet till att vi valde en scroll-list istället för en nästa-knapp är att användaren får en uppfattning av textmängden samt att det går snabbare att förflytta sig i texten. All text är satt till relativ storlek för att användarna själva skall kunna anpassa textstorleken i sin webbläsare. Genomgående har fokus hållits på att få webbsidan enhetlig. Färger Till webbsidan har vi valt att använda oss av olika nyanser av blå färg eftersom blått är framträdande i logotypen och är en färg som ofta används i seriösa företagssammanhang. Vi använde en mörkblå bakgrundsfärg i menydelen av sajten och en ljusare blå i textfältet. Detta gör att navigeringsdelen framträder tydligt genom att särskilja sig från textfältet. Både menyalternativen och den löpande texten skrivs med en ljusgrå färg istället för vitt för att det ska vara lätt att läsa och inte vara påfrestande för ögonen. Länkarna i menyn blir röda då muspekaren förs över. Vi har valt att använda oss av samma röda färg på länkarna som återfinns i CoCoCos logotyp. Förändringen av färg vid mouse-over förtydligar att länkarna är klickbara. Att använda röd färg på texter är vanligtvis lite vanskligt med tanke på att det i västerländsk kultur ofta representerar varningstexter. Rött är även svårt för färgblinda att se. Vi anser dock inte detta vara något problem i det här sammanhanget. Dels är den röda färgen vi valt en mörkröd färg och inte den variant som kopplas ihop med varningssammanhang. Syftet med färgbytet på länkarna är att påskina att länken är klickbar, genom att det sker en förändring av länkens text. Denna förändring

4 framgår även för färgblinda. Länktexten är i sin ursprungsstatus (ljusgrå mot mörk bakgrund) mycket tydlig att läsa. Meny Menyns utformning och placering diskuterades mycket. Vi valde till slut att placera den till vänster på webbsidan eftersom en sådan menyplacering är väl inarbetad hos Internet-användare. Menyn är högerjusterad för att uppnå en bra balans mot den intilliggande vänsterjusterade texten. Diskussionen fortsatte med att vi tog upp vilka informationsområden som vi ansåg vara väsentliga att presentera angående företaget. Detta resulterade i att vi valde menyingångarna company, competence, cases, contact samt en co-worker login-funktion där endast medarbetare och några få utvalda kunder kan gå in och få mer detaljerad information kring företagets konsulter. Coworker login-funktionen valde vi att medvetet lägga avskiljt från de övriga menyalternativen samt ge den mindre text utifrån gestaltlagarnas teorier om gruppering. Bilder Vi har valt att använda oss av en bild för varje menyval. Bilderna används i syfte att förmedla en känsla om företaget till användarna men även för att bryta av det för övrigt textbaserade innehållet. Bilderna representerar i någon form den text som presenteras i samband med bilden. Bilderna är tonade i en ljusblå nyans för att passa övrig färgsättning på sajten samt för att de inte ska dra för stor uppmärksamheten till sig med allt för skarpa färger. Vi har arbetat med att få bilderna vända in mot sajten och inte ut mot kanten, vilket innebar att vissa bilder fick spegelvändas. Det har gjorts för att dels nå en balans i webbsidan men främst för att flytta fokus in mot själva texten. För att uppnå ett enhetligt bildspråk gjordes alla bilder först svartvita för att sedan bli tonade i ljusblå färg. På detta sätt har vi fått en enhetlig färg på bilderna eftersom vissa var i färg och vissa var svart/ vita. Kontrasterna har även justerats för att uppnå en samstämmighet och enlighet. Vi använde oss av en digitalkamera för att ta egna bilder, vi valde dock att inte använda oss av dessa eftersom vi inte lyckades få dem att passa ihop med de övriga bildernas bildspråk. Text Efter att ha diskuterat vad syftet med webbsidan är har vi valt ut relevant text för de olika områdena vi vill presentera. Company: Det här är den första sidan man möter, därför tyckte vi att det var viktigt att användaren bara genom att läsa första meningen skall kunna se vad CoCoCo är för företag. Vi valde att tala om när företaget grundades för att visa att det inte är nystartat utan har funnits i branschen ett flertal år. Vidare beskrivs i en säljande ton företagets inriktning. Competence: Här vill vi tala om vad företaget är bra på. Vi ger övergripande information om dess samlade kompetens. Även här har vi valt text som lyfter fram företagets starka sidor.

5 Cases: Kort presentation av företagets största kunder. Ändamålet med informationen är att visa exempel på uppdrag som CoCoCo utför samt även att stoltsera med imponerande kunder för att ge ett pålitligt intryck till framtida kunder. Vi tog bort alla tekniska detaljer eftersom CoCoCos kunder själva ofta saknar den kunskapen och det är skälet till att de anlitar konsulter. På sidan finns det även en uppräkning av andra stora företag där CoCoCos konsulter haft kontrakt. Contact: Här finns företagets kontaktuppgifter. E-postadresserna är länkar för att man ska slippa behöva skriva adressen när man vill skicka e-post. Från början hade vi tänkt ha ett formulär för att underlätta för kunderna att formulera en förfrågan. Men vi insåg att det istället komplicerade kontaktprocessen, och därför övergav vi idén. Co-worker login: Rubriken visar tydligt att sidan man måste logga in för att komma till är intern. Vi har valt att inte ange att även ett fåtal kunder har tillgång till den interna sidan för att inte övriga kunder ska känna sig mindre viktiga. För de som har inloggningsproblem har vi lagt till en e-postadress. På den interna sidan presenteras konsulterna. Vi har valt att ta bort ganska mycket information ur det ursprungliga materialet för att ge en mer seriös framtoning. Alltså har vi inte med fritidsintressen eller mindre lagliga bakgrunder. Vi presenterar dem med namn, ålder och eventuell utbildning. De färdigheter som presenterades i tabellform har vi valt att skriva in i texten och bara ta med områden där konsulterna hade mer än bara medelkunskaper. På så sätt kan vi presentera konsulterna som specialister. För varje konsult talar vi också om vilka projekt han eller hon har ingått i.

6 Bilaga 1: Whiteboard-skisser från brainstorming-möte

7 Bilaga 2 : Skärmdumpar av webbsidan

8