WEBB OCH INFORMATIONSDESIGN

Transkript

1 IT-Universitet WEBB OCH INFORMATIONSDESIGN Grupp Handledare:

2 Rapport - projekt 1 Grupp 10: Johan Bergsten Jenny Christensson Evelina Johansson Marie Lönnqvist Mia Malmberg Niklas Mårby Uppgift Vi fick i uppgift att sålla, strukturera och sortera information med webben som medium, utifrån givna förutsättningar. Vi fick två uppdragsgivare att välja mellan, Polyplast+ och konsultföretaget CoCoCo. Båda företagen ville ha en webbsida skapad, och gav oss bilder och information för att utföra detta uppdrag. Därför blev uppgiften att välja ut bilder och text som vi önskar ta med, anpassa material och design till målgruppen, skapa informativ design, navigation och layout. CoCoCo Vi valde att skapa en webbplats åt företaget CoCoCo som står för Computer Cooperative Consultants. Företaget bildades 1996 och finns stationerat i Boston, USA. CoCoCo tillhandahåller rådgivningstjänster i kundsystem och i mjukvaruutveckling, specialiserat på Java, C++, Perl, Python och System Architechture. Genom att läsa materialet om företaget förstod vi att målgruppen bestod av: 1. Nya kunder som mer eller mindre slumpvis träffar sidan, t ex genom surfing eller rekommendation. 2. Säljare internt i företaget som önskar koppla sin kund tillsammans med rätt/mest lämplig projektledare (utifrån dennes tidigare erfarenheter, etc) Vissa välanförtrodda kunders projektledare som söker en medarbetare. Företaget ville inte att all information skulle vara tillgänglig för allmänheten, eftersom de inte ville att deras konsulter skulle bli rekryterade av deras konkurrenter. Samtidigt ville företaget locka potentiella kunder. Därför ville företaget att sidorna som innehåller den allra viktigaste informationen endast vara tillgänglig för personer som har ett login. Login funktionen behövde inte fungera, utan uppgiften var att endast designa den. CoCoCo ville inte kopplas samman med något trendigt konsultföretag, utan ville förmedla effektivitet, kompetens, pålitlighet och professionellt utförande. Process Gruppen började med att bestämma att var och en i gruppen skulle läsa igenom det givna materialet om det båda företagen för att känna efter vilket av företagen som verkade vara mest intressant att jobba med. Följande dag genomfördes vårt första möte då vi beslutade oss för att välja konsultföretaget CoCoCo. Detta för att vi tyckte att företaget hade en tydlig specifikation på vad företaget ville uppnå, och såg ganska tydligt vad vi kunde uträtta, dels funktionsmässigt och dels designmässigt.

3 Vidare bestämde vi vilka uppgifter var och en skulle ha i utvecklandet av webbsidan. Evelina, Niklas och Marie fick rollen som programmerare, Johan blev informationsansvarig, dvs. se över det textmaterial vi fått tillgång till, Jenny blev skribent och Mia designansvarig. Dessa arbetsindelningar kom senare i projektets gång att förändras, gränserna mellan arbetsuppgifterna suddades ut och vi hjälptes åt istället för att strikt hålla oss till de tänkta rollerna, något som inte alltid var till det bästa kanske då det blev lite mycket diskussion vissa gånger. Vid flera mötestillfällen ägnade vi oss åt att diskutera och strukturera innehållet. För att skapa första utkastet använde vi oss av en white board. Vi fokuserade på funktionalitet, men för att illustrera den så la vi tidigt upp en grafisk mall. Startsida logo logo bilder, länkar text bilder, länkar text illustration länkar Skissen ledde fram ett första grafiska utkast gjort i Corel PHOTO-PAINT 11. En design som gruppen sedan beslutade sig att hålla fast vid. Därefter bestod arbetet av ännu mer strukturering av materialet och diskussion om hur utveckling skulle ske. Många skisser på white board gjordes innan vi slutligen började bygga den verkliga webbplatsen. Tanken var att vi skulle ha en välplanerad struktur innan arbetet med att bygga webbplatsen började. Web sidan byggdes upp dels genom genering av kod i Photoshop, dels genom att skriva kod i notepad.

4 Motivering till design val: Den grafiska designen ville vi skulle andas buisness och hållas enkel och ren. Vi ville förmedla effektivitet, pålitlighet och kompetens som företaget uttryckt i specifikationen att de ville förknippas med. Designen skulle gå i harmoni med CoCoCo s logo. Siten är uppbyggd med en navigeringsmeny längst upp på sidan. Här finns även CoCoCo:s logotyp till vänster i menyn, vilket kändes som ett naturligt val eftersom vi läser från vänster till höger och får på så sätt användaren att upptäcka företagsnamnet tidigt. Logotypen fungerar som en hemknapp till startsidan enligt navigeringsstandard. Till vänster skapade vi en image som bygger på loggans ettor och nollor, denna bild har endast ett estetiskt syfte. Denna bild ligger på samtliga sidor och förändras inte. Återstående yta fungerar som en yta där informationen som finns att läsa på siten dyker upp vid olika menyval som användaren gör. På startsidan ligger här en text som på ett koncist sätt beskriver det företaget står för. Vi valde att använda denna text istället för en traditionell välkomsttext för att användaren snabbt ska få en bild av företaget och få användaren intresserad. I materialet vi fick fanns bilder och dessa beslutade vi oss för att använda i menyn, dels för att ge webbsiten en trovärdig och seriös profil såsom företaget önskat i specifikationen och dels för att vi tyckte att de var passande och ville utnyttja dem. Genom att placera bilderna i menyn var en tanke att de skulle få den uppmärksamhet vi tyckte att dem förtjänade. Därigenom fyller bilderna inte bara ett estiskt syfte, utan fyller även en funktion. När bilderna klickas på försvagas de bilder som användaren för tillfället inte navigerar på. Detta gör det tydligare för användaren och ger direkt feedback på vilken rubrik användaren har klickat på. Det är viktigt för användaren att veta var den befinner sig på siten. Färgerna på siten är blå och röd, med inspiration från CoCoCo s logotype som innehåller dessa färger. Även om loggan innehåller mörkblå valde vi ändå att arbeta med ljusa färger och endast inslag av rött och blått. Detta för att skapa en ljus och ren yta där mörk teckenfärg kan användas, vilket är bekvämt för ögat. För att förstärka layouten lade vi en blå ton över bilderna. Vi gjorde följande indelning av vårt tillgängliga material i rubrikerna: About us Services Intranet - Consultants - Skills - Project Dessa val bedömde vi vara lämpliga efter noggrann genomgång av materialet. Rubriken About us i menyn valde vi med avsikt att användaren ska gå till rubriken för att läsa kortfattat om företaget, och få information om hur företaget kan kontaktas. Services beskriver mer utförligt företagets tjänster och företagets profil, samt kortfattat hur företaget går till väga i ett projekt. Underrubriken Projects ger kort information om vad CoCoCo tidigare har jobbat med för projekt. Underrubrikerna valde vi att placera i ett fält

5 strax under bilderna. Detta fält hade vi lämnat öppet för att ha möjlighet att utnyttja till att placera underrubriker, då vi ansåg att underrubriker ibland kunde underlätta navigeringen. Intranet har en loginfunktion som i vår prototyp inte är knuten till en databas. Vid giltig login får användaren tillgång till mer utförlig information om konsulter, projekt och kvalifikationer. Genom att logga in öppnas ett nytt fönster, vilket var ett medvetet val för att ha möjlighet att se på informationen på startsidan utan att behöva logga in och ut. Menyn har nu bytts ut mot andra rubriker; consultants, skills och projects. Dessa rubriker valde vi för att få en intuitiv och översiktlig presentation företagets kvalifikationer. Rubrikerna gör det lätt för användaren att hitta önskad information. Även bilderna i menyn skiljer sig från startsidans för att användaren ska reflektera över att något förändras och han/hon inte är på startsidan längre, något som också förstärks genom att använda ett nytt fönster. Under rubriken consultants finns en lista presenterad över företagets konsulter. Användaren kan antingen välja att bara se konsulternas namn, eller genom att klicka på detailed list se en lista med en kortfattad presentation om varje konsult. Genom att klicka på en konsults namn finns att läsa om dennes bakgrund, färdigheter inom relevanta ämnesområden och projekt konsulten har deltagit i. Presentationen öppnas i ett nytt fönster för att användaren ska kunna ha flera konsulters fönster öppna på samma gång, och på så sätt kunna göra en lätt jämförelse konsulterna emellan. Under rubriker skills kan användaren välja vilket teknologiområde som den önskar finna en konsult till, t ex Java, C++ och Network/Security. För att skapa en god översikt valde vi att presentera rubrikerna i en kombobox, där användaren får möjlighet att välja ett område. Innan område är valt finns en instruktion på sidan om användaren känner sig osäker på hur den ska navigera. När ett område är valt presenteras en tabell över företagets konsulter och vilka färdigheter de har i just det området. Färdigheten rankas från 1-5 stjärnor, där fem stjärnor är exemplariska färdigheter. Vidare finns även information om vilka konsulter som har varit aktiva i relevanta projekt inom området, och vilka som har en specifik önskan att lära sig mer. Rubriken project innehåller information om de olika projekt som företaget har deltagit i. Vi valde att även här skapa en kombobox för att få en tydlig överblick, där användaren i en lista kan välja vilket projekt den vill läsa mer om. Även här finns en instruktion innan projekt är valt om hur användaren ska gå till väga. I projektbeskrivningen finns information om klienten, involverade teknologier, inblandade konsulter och deras uppgifter i projektet, samt en beskrivning i fritext om projektet. Konsulternas namn är länkade till en beskrivning av denna. På samtliga sidor i intranätet finns en logout knapp, där användaren loggar ut från intranet. Skapa en databas känsla! Lärdomar Bilden till vänster tar för stor plats Man skulle kunna göra så det är möjligt att se konsulterna är ledig för ett projekt Svårigheter med arbetsupplägget.

6 Vem gjorde vad: Johan Bergsten: planering funktionell design, redigering och sammanställning av textinnehåll, html-kodning. Evelina Johansson: planering funktionell design, redigering och sammanställning av textinnehåll, html-kodning. Jenny Christensson: första utkast till funktionell och grafisk design, redigering och sammanställning av textinnehåll, sammanställa tillvägagångssätt och skriva rapport. Marie Lönnqvist: planering funktionell design, redigering och sammanställning av textinnehåll, html-kodning. Mia Malmberg: planering och genomförande av grafisk design, redigering och sammanställning av textinnehåll, sammanställning av rapport. Niklas Mårdby: planering funktionell design, redigering och sammanställning av textinnehåll, html-kodning. Diskussion och samtal har skett under hela processen med samtliga gruppmedlemmar närvarande.