IT-Universitetet Grafiska gränssnitt, 6 p Göteborg 2003-09-19 Rapport Projekt 1 Från material till webb Grupp 1: Vilhelm Bergman Hanna Friberg Björn Nord Ulrika Olsson Marlene Sjöberg
Innehållsförteckning INNEHÅLLSFÖRTECKNING... 2 INTRODUKTION... 3 METOD... 3 RESULTAT... 3 LOOK AND FEEL... 3 LAYOUT/DESIGN... 4 Allmänt... 4 Huvudmenyn... 5 Sektionerna... 5 Layout... 5 Innehåll... 5 Home... 5 Services... 5 Projects... 6 About CoCoCo... 6 Contact Us... 6 Consultants... 6 Log in... 6 Search... 6 DISKUSSION... 6 Huvudmenyn... 7 Home... 7 Consultants... 7 ARBETSFÖRDELNING... 7 REFERENSER... 7 2
Introduktion Den hemsida som denna rapport handlar om är en uppgift från kursen Interaktionsdesign Grafiska gränssnitt som ges på it-universitet i Göteborg. Uppgiften gick ut på att konstruera en hemsida för ett fiktivt företag. I uppgiften fanns två företag att välja på; ett konsultföretag och ett företag som producerade plastprodukter. De två företagen hade olika önskemål och gav olika förutsättningar för konstruktionen av hemsidan. För detaljerad uppgiftsbeskrivning se [1]. Efter att ha satt oss in i förutsättningarna för de båda företagen valde vi konsultföretaget vid namn CoCoCo Cooperative Computer Consultants. Detta för att vi tyckte att det skulle vara intressantare att göra samt att vi snabbt kom på idéer till hur designen skulle kunna utformas. Då man läser denna rapport rekommenderas att man samtidigt har uppe ett fönster som visar själva hemsidan, för att enklare kunna följa med i resonemanget. Metod Vi började med att gemensamt ta fram förslag på en design. Efter en del diskuterande och kladdande på whiteboard kom vi relativt snabbt fram till en designmall som vi alla var ganska nöjda med. Utifrån den information om företaget som gavs i uppgiften grupperade vi sedan de texter som verkade höra ihop. För att sedan komma på lämpliga rubriker brainstormade vi fram en mängd olika förslag som vi sedan valde ifrån. Därefter gick vi igenom varje rubrik och designade sidorna som skulle presentera innehållet. Vi passade där på att motivera att varje rubrik verkligen behövdes. Efter att ha tagit fram denna övergripande design började vi sedan redigera texterna och samtidigt konstruera en mall till hemsidan. Därefter tog en iterativ process vid där vi först lade in texterna till de rubrikerna och sedan granskade hur det såg ut. Utifrån detta resultat valde vi att lägga in bilder, göra mer avancerad design och redigerade vissa texter. Detta pågick till vi var relativt nöjda samtidigt som tiden började rinna ut. Det vi gjorde sist var att redigera förstasidan så att den passade med övrigt innehåll. Resultat Look and feel Eftersom företaget inte ville framställas som en hipp konsultfirma utan som ett företag som erbjöd kompetenta och pålitliga konsulter valde vi att sikta på en mer traditionell design av sidan. Vi kom överens om att ville vi skapa en enkel och stilren sida med mycket luft och utan en massa onödig utsmyckning. Sidan skulle reflektera företagets principer att leverera fungerande och pålitliga lösningar. Därför valde vi att inte göra alltför nyskapande design utan att istället göra en sida där besökaren enkelt skulle kunna hitta den information han/hon sökte utan att behöva lära sig att använda sidan. Färgvalet på sidan gjordes med utgångspunkt från de färger som ingår i företagets logo. 3
Layout/Design Allmänt Med tanke på den Look and feel vi ville skapa togs följande designförslag fram som mall: Logga Search Huvudmeny Meny Innehåll Login Då vi designade sidan fick vi självklart ta hänsyn till de olika målgrupper som sidan tänkt rikta sig till. I uppgiftsbeskrivningen gavs två olika målgrupper, nämligen: kunder till företaget företagets säljare och vissa privilegierade projektledare hos stora kunder Eftersom företaget inte ville att uppgifter om dess konsulter skulle vara publikt tillgängliga utan kräva inloggning med lösenord var vi tvungna att ha med någon form av inloggning på sidan. Då vi räknar med att företagets säljare och projektledarna främst vill komma åt information om företagets konsulter valde vi att göra en och samma sida för båda målgrupperna, och sedan utöka den med ett extra menyalternativ för säljare och projektledare. Detta menyalternativ är begränsat till säljare/projektledare och blir endast tillgängligt efter inloggning på sidan. Anledningen till att använda samma sida var att slippa göra om hela sidan och vi trodde inte att den andra informationen skulle vara ivägen för säljare/projektledare. Vi kunde sedan designa sidan som visar informationen om konsulterna helt för deras behov. Genomgående på sidan ville vi ha med bilder på människor. Dels för att företaget säljer tjänster, och dels för att det känns förtroendeingivande med människor på bilderna. Valet av bilder är gjort för att få med både män och kvinnor samt att ha med fler etniska grupper, vilket kan vara viktigt i USA. På vissa ställen har vi dock valt andra bilder för att det passade bättre med innehållet. 4
Huvudmenyn Vi valde att göra en huvudmeny som ligger ovanför huvudsidan där det går att bläddra mellan de olika sektioner som sidan består av. Anledningen till att vi valde att göra en separat huvudmeny var för att ge en tydligare uppdelning av sidan samt göra det enkelt att se i vilken sektion man befinner sig. För att åstadkomma det senare låter vi den aktuella sektionen vara ifylld i menyn. När man muspekaren över ett menyalternativ kommer det fyllas i för att visa att det är ett valbart alternativ. Detta gjorde vi också för att det ger en tryggare känsla och för att det inte ska råda några tvivel om att det är en meny. Med utgångspunkt från den information vi hade om företaget valde vi att göra uppdelningen enligt följande: Home Välkomstsidan. Services En beskrivning av vad företaget erbjuder och vad de kan. Projects Innehåller de projekt som företaget gjort under åren. About CoCoCo Lite historik om företaget och dess grundande. Contact Us Hur man kontaktar företaget. Consultants Presentation av företagets konsulter Ordningen i menyn valdes efter vad som verkade naturligast och mest intressant. Det är förmodligen också den ordning en kund skulle navigera på sidan om man ville lära sig om företaget och eventuellt ta kontakt för ett jobb. Anledningen att Consultants ligger längst till höger är att den inte finns tillgänglig förrän man loggat in. För att det skulle bli enklast att se att den tillkommit som alternativ valde vi alltså att lägga den till höger istället för den skulle dyka upp någonstans mitt i menyn. Sektionerna Layout Till vänster på sidan är plats reserverad för den meny som vissa av sektionerna utnyttjar. Anledningen till detta är främst för att det är en allmänt förekommande standard. Menyn är gjord i form av en punktlista för att det ska bli lätt att urskilja alternativen. För att man enkelt ska kunna se var man är har vi låtit det valda alternativet vara skrivet i en annan stil än övriga samtidigt som det inte längre är en länk. Själva innehållet presenteras i mitten av sidan där texten visas som en spalt för förhindra att det blir för långa rader och därmed jobbig att läsa. Till höger på sidan valde vi att använda utrymmet för tabeller på vissa sektioner och för bilder på de sektioner där utrymmet inte behövdes till annat. Innehåll Home Här visas en kort text om företaget där det även framkommer var företaget ligger, vilket vi tyckte var viktigt för en eventuell kund. Vi försöker här förmedla en inbjudande och välkomnande känsla och valde därför att ha med en bild på människor. För att förstärka att det är en förstasidan bryter vi här mot mallen för utformningen av resten av sidan genom att placera bilden längst ner till vänster samt förstora den. Services Här berättas vad företaget kan erbjuda för tjänster, och vad det har som policy. Här ska vi alltså försöka sälja företaget. Vi har valt att ha med det mesta av den information som gavs i uppgiften. 5
Projects Denna sektion finns för att eventuella kunder ska kunna se vad företagets konsulter presterat. För att förklara sektionen har vi lagt till en översiktssida med en kort text. Själva projekten ligger i menyn. Vi har valt att lägga beskrivningen, kunden och teknikerna som användes i en spalt och sedan placera de medverkande konsulterna i en lista på den högra delen av sidan. Detta för att den informationen endast kommer att vara tillgänglig om man är inloggad och för att det skall bli lättare att överblicka projektet. About CoCoCo Här valde vi en bild på ett hus som skulle kunna vara kontoret. Detta för att representera den fysiska delen av företaget och företagets grundande. Vi valde att ta bort delen om att företagets grundare finansierat företaget med hjälp av en pokervinst för att ge en seriösare bild av företaget. Nu finns inte så mycket information att lägga här men vi bedömer att det borde finnas mer om det varit ett riktigt företag. Contact Us Här visar vi företagets fysiska adress, telefonnummer och emailadresser. Consultants Här har vi lagt en översiktssida likt den på projects för att presentera sektionen. Själva konsulterna ligger i menyn till vänster. På sidorna som presenterar konsulterna har vi valt att visa konsulternas färdigheter i en tabell på sidans högra sida, detta för att göra det tydligt och urskiljbart för säljarna. De kommer ju främst vara intresserade av färdigheterna eftersom de förmodligen kommer att lära sig biografin ganska snabbt. Anledningen till att vi presenterar alla färdigheter, även de som konsulten inte kan, är att det skall gå enkelt att jämföra olika konsulter då alla värden ligger på samma plats i tabellen. Under tabellen ligger en förklaring till de olika värdena som visas i tabellen. I mitten har vi valt att visa biografin och under den visas namnen på de projekt i vilka konsulten medverkat. Namnen visas som länkar till motsvarande projektsidor för att snabbt kunna kolla upp detaljer om projektet. En bild på konsulten ligger till höger om biografin för att koppla texten till ett ansikte. Log in Log in fälten har vi lagt längst ner till vänster för att det är ganska vanligt förekommande samt att balansera de bilder och annat som vi lagt på högersidan. När man är inloggad försvinner fälten och istället står det att man är inloggad som Namn för att göra det tydligt att man är inloggad. Det finns även en log out knapp på samma ställe för att man inte ska behöva leta efter var man ska logga ut. Search Vi har inkluderat en sökfunktion där besökare snabbt ska kunna hitta den information de söker utan att behöva navigera i menyerna. Placeringen längst upp till höger ovanför menyn valdes för att representera att sökningen sker över alla sektioner på sidan och alltså inte är beroende av var man för tillfället befinner sig på sidan. Diskussion Eftersom ingen av oss hade jobbat särskilt mycket med html så fanns det av naturliga skäl vissa begränsningar av vad vi kunde göra. Men eftersom vi ansåg att det var viktigare att presentera en bra idé än en fullt fungerande sida med flashig design så försökte vi koncentrera oss mer på presentationen av informationen. 6
En dryg vecka, som var tiden som vi hade att göra det här projektet, är ganska kort. Vi hann därför inte göra flera förslag på design av sidan. Användartester hade kanske också varit önskvärt men vi kände kanske att det inte riktigt fanns tid och utrymme för det. Dock skulle vi självklart ha kunnat göra några enkla sådana, men det får vi ta med oss till nästa projekt. Så här i efterhand finns det en del som vi skulle vilja gjort om vi hade haft mer tid och om det varit ett riktigt företag. Huvudmenyn Här skulle vi om det var ett riktigt företag vilja ha med en rubrik med rekrytering och en eventuellt en med press. Men eftersom vi inte hade någon information att lägga där kändes det onödigt nu. Vi hade från början tänkt göra så att det valda menyalternativet hade svart bakgrund och vit text och det man för pekaren över vara som det är nu, grå bakgrund med svart text. Men någonstans på vägen glömdes det bort och när vi sedan kom på det hade vi inte tid att ordna det. En annan sak som vi i efterhand insåg är att bredden på menyalternativen då man inte är inloggad måste justeras så att menyn blir lika bred som menyn då man är inloggad. Även om det är färre menyalternativ. Home Här skulle vi vilja ha nyheter presenterade på vänster sida och en länk till äldre nyheter. Detta för att snabbt kunna se vad som är nytt på sidan och för företaget. Consultants Här tänkte vi att det skulle vara användbart för säljarna att kunna jämföra de olika konsulterna genom att lista tabellerna med färdigheter för utvalda konsulter bredvid varandra i någon sorts formulär. Det skulle även vara bra om det gick att söka efter konsulter med en viss färdighet. Arbetsfördelning Till att börja med var alla med i designen av hemsidan. Därefter delade vi upp det så att Ulrika och Hanna redigerade texter medan Ville, Björn och Marlene började konstruera hemsidan. Efter att en mall tagits fram så har alla hjälpts åt att fixa det som behövdes på sidan, oavsett vad det gällde. Vi vågade inte dela upp det för mycket eftersom vi ville ha ett konsekvent utseende på alla sektioner av sidan. Till viss del har vi försökt jobba efter de roller vi hade då vi delades in i grupperna, men som sagt så har alla fått prova på alla delar. Rapporten är skriven av Björn. Rollerna var: Björn Designer Hanna Skribent Marlene Koordinator Ulrika Ej placerad i något fack Vilhelm Programmerare Referenser [1] PROJEKT: WEBB- & INFORMATIONSDESIGN, http://www.cs.chalmers.se/proj/idesign/ituniv/kurser/03/gg/projekt/1/ 7