IT-universitetet
MDI – Interaktionsdesign
Interaktionsdesign – Grafiska gränssnitt 6p
HT 03
Projekt 1
Webb- och informationsdesign
Grupp 6
Theresa Harmanen,
Linus Kjellqvist,
Camilla Orrenäs,
Emma Thunström
och Calle Tornéus
Göteborg den 17 september 2003
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:
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
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.
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.
Bilaga 1: Whiteboard-skisser från brainstorming-möte
Bilaga 2 : Skärmdumpar av webbsidan
