Slutrapport: Design av Hemsida för PolyPlast+

Transkript

1 Slutrapport: Design av Hemsida för PolyPlast+ Av: Behzad Charoose, Johan Magnuson, Mikael Onsjö och Sofie Persson Datum och Plats: Göteborg, Chalmers/GU Anledning: Uppgiften ingick som en obligatorisk del av kursen Interaktionsdesign Grafiska Gränssnitt

2 Innehåll 1 Inledning Arbetsfördelning Syftet Val av information Placering av komponenter Logotypen Menyraden Bilden Texten Undermeny Struktur Design Färg och form Feedback Ram Reflektion...5 2

3 1 Inledning Vi har valt att utveckla en sida till företaget PollyPlast+ för att vi ansåg att den uppgiften gav mer svängrum och utrymme för egna idéer. Vi valde att designa en så enkel sida som möjligt eftersom sidan skulle kunna behaga människor inom olika områden och med olika bakgrund. Efter inledningen kommer vi först att presentera de olika sidorna i systemet, sedan kommer en beskrivning av komponenterna och därefter kommer vi att berätta om designen. 1.1 Arbetsfördelning Den huvudsakliga utformningen av sidan gjorde vi i gruppdiskussioner, då vi provade olika idéer på varandra och arbetade fram den sidprototyp som låg till grund för alla sidor på webbplatsen, vi diskuterade också mycket om hur vi skulle hantera de informationsmängder som låg till vårt förfogande och hur vi skulle skära i dessa. Den hierarkiska indelningen och kategorisättning skedde även den gemensamt i hela gruppen. I det rent praktiska arbetet delade vi upp uppgifterna mellan oss och stämde av med förslag, som sedan vid behov omarbetades. Arbetet uppdelades som följer: Behzad Charoose tog hand om textredigering, Sofie Persson hittade och redigerade bilder och ikoner, Mikael Onsjö satte ihop sidan i html och Johan Magnuson ritade menyraden. 2 Syftet Syftet var att vi ville skapa en sida som lockar intressenter att beställa produkter i plast men även i olika kombinationer av till exempel plast/trä och plast/glas etc. Vi ville inte göra sidan krånglig genom att beskriva de olika plastmaterialen som företaget använder sig av, utan endast ge en bild av deras affärsidé samt presentera en del tidigare uppdrag. 3 Val av information Vår målgrupp består av repressentanter för företag som har något behov av färdiga plastprodukter. Att produkterna är "färdiga" innebär att köparen sannolikt inte har något större intresse av de specifika materialegenskaperna eller tillverkningsprocessen i sig. Därför har vi valt att inte ha med mer än den absolut grundläggande informationen om dessa samt lite kort information om vilka kompositioner just PolyPlast+ arbetar med. Vår målgrupp kan inte heller förväntas ha något speciellt intresse av företaget i sig så det finns ingen anledning att publicera längre texter om dess ekonomi eller historia. Naturligtvis är det fortfarande viktigt att besökaren får veta att företaget är seriöst och levererar kvalité så vi beslutade oss för att ta med sammanfattande information på dessa områden. Naturligtvis är det också lämpligt att beskriva företagets affärsidé eftersom målgruppen måste få veta huruvida PolyPlast+ överhuvudtaget har något att ge. Vi har alltså inte kunnat hitta någon anledning att överhuvudtaget publicera längre information på något område men däremot finner vi att vår målgrupp sannolikt vill ha snabb och smidig tillgång till den information de faktiskt söker. Med anledning av detta har vi valt att endast publicera mycket korta texter som lätt kan överblickas och snabbt genomläsas. De tidigare uppdragen finner vi ändå är viktiga eftersom vi vill förmedla en seriös bild av företaget; det är viktigt att användaren får veta vad PolyPlast+ verkligen åstadkommit. I vår uppdragspecifikation har vi även ålagts att skapa en vänlig och personlig sida. För att uppnå detta har vi valt att på förstasidan ha en någorlunda personlig text från VD:n (underskriven naturligtvis). Detta är även för att höja själva nivån på presentationen till den som repressentanter för stora företag är vana vid och repressentanter för små företag tycks eftersträva, vi vill komma bort från det massproducerande, snabbexpedierande och istället komma till den personliga servicen och exklusiviteten. Vi har även valt att möjliggöra och uppmuntra besökaren till att ta kontakt med någon av 3

4 PolyPlast+'s mer kundnära medarbetare personligen för att på så sätt få bättre feedback på sina idéer. Sammanfattningsvis har vi alltså valt att ta med texter för: introduktion, affärsidé, material, tidigare uppdrag och kontakt. Sidan om uppdrag är i sin tur uppdelad eftersom vi även om vi vill få med uppdragen fortfarande vill behålla de små lättöverskådliga textmassorna. 4 Placering av komponenter Nedan följer en redogörelse för hur de olika komponenterna på hemsidan har placerats, och varför de har placerats så. Komponenterna beskrivs i den ordning som vi räknar med att en vanlig användare avsöker sidan, denna avsökning går självklart väldigt fort och görs säkert av de flesta tänkta användare relativt omedvetet. 4.1 Logotypen Vi valde att lägga den för uppgiften givna logotypen i toppen av dokumentet. Denna placering valde vi eftersom logotypen innehåller företagets namn och även identitet som det har antytts i vår uppdragsspecifikation. 4.2 Menyraden Vi kom fram till att det var bästa alternativet var att använda en högt placerad och horisontell menyrad. Vi funderade på att ha en sidomeny med alternativen flödande vertikalt, men eftersom vi bara hade ett begränsat antal alternativ borde en horisontell meny ge bättre överblick. Om sidan haft ett större omfång med behov av flera huvudkategorier, eller i händelse av att Poly Plast+ skulle vilja utöka sin sida i framtiden, skulle det troligen vara bra att lägga menyn vertikalt och till vänster. 4.3 Bilden Varje sida har konsekvent en representativ bild på vänstra kanten av sidan. En bild är snabbare att ta in än en text och därför valde vi att lägga bilden innan texten från vänster sett. Om vi hade lagt bilden till höger hade användaren möjligen läst texten först och sedan inte fått ut någon information från bilden, utan denna hade reducerats till ren utsmyckning. 4.4 Texten Om toppen är den naturliga placeringen av logotypen, så är centrum av sidan den naturliga placeringen av den huvudsakliga texten. En sak man bör undvika i samband med designen av delsidor är att inte ha med för mycket text, för att läsaren kan lätt tröttna och gå vidare. Vi gjorde en delsida annorlunda med symboler under menyn tidigare uppdrag för att lättare fånga användares nyfikenhet och uppmärksamhet. I kontakt sida finns det adress, telefonnummer och e-post till företaget med namn på tre anställda som kan svara på frågor från kunder. 4.5 Undermeny Att lägga undermenyn, som bara förekommer hos en kategori, underst på sidan föll naturligt ut ur den övergripande utformningen, där vi hade en linje längst ner på varje sida. En sådan placering flyttar användarens fokus över sidan, vilket kan vara en belastning, eller för all del ge ett mer välbalanserat intryck. Det påpekades under redovisningen att vi som huvudmeny hade använt textetiketter medan undermenyn bestod av ikoner. Att använda ikoner var nog i sig en bra idé, men de borde ha kompletterats med text för att ge ett mer tryckbart utseende, så att bilderna inte tas för utsmyckning. 4

5 5 Struktur Överblicksbild av hemsidan. välkomen Affärsidé Material Tidager uppdrag Kontakt Bild text Bild text Bild ikoner Bild text Bild text Bild text Bild text Bild text 6 Design Även i designen fortsatte vi på samma koncept, att designa en så enkel sida som möjligt. Enkel struktur och milda färger har vi använt som en grund genom hela utvecklingen av systemet. 6.1 Färg och form Vi ville givetvis att färgen i logotypen skulle passa i harmoni tillsammans med sidans övriga färger. Därför valde vi att använda så milda toner som möjligt, med tanke på logotypens gröna och gulbruna färg. Vi ville alltså undvika starka färgkontraster och istället satsa på ett mjukare och vänligare intryck, vilket PolyPlast+ också vill ge. Det var bland annat därför vi också valde lite rundare form på menyn, bilderna och ikonerna etc. Tittar du lite extra noga på bokstäverna i logotypen ser du att även de är av lite rundare form. 6.2 Feedback För att användaren enkelt ska kunna se vart i menyn han eller hon befinner sig, skuggas den rubrik som tillhör den sida som användaren är inne på. Detta ger en tydlig feedback på vart i systemet användaren befinner sig. Eftersom menyn ligger kvar konstant oavsett vilken sida användaren är inne på är det enkelt att navigera sig vidare i systemet. Till varje sida finns det också en bild som symboliserar rubriken till sidan, vilket också ger viss feedback på vart i systemet användaren är. 6.3 Ram Vi har också valt att lägga en linje som löper längs med sidan, för att rama in sidans komponenter och göra sidan mer enhetlig. Vi ville alltså framhäva ett fokus på sidan och inte sprida ut funktionerna, för att andvändaren enkelt ska kunna hitta det han eller hon söker. 7 Reflektion Välkomstmeddelandet från VD:n skulle kunna vara mer personligt, men den information som pressenteras i den är fortfarande passande. Han bör självklart, en aning stolt, pressentera sitt företag. 5

6 En annan sak som vi också tänkte på, var att vi kunde ha markerat att ikonerna är tryckbara ikoner. Vi kunde till exempel ha nämnt det på sidans text eller ha designat dem mer som en knapp med en titel ovanför. Anledningen till att vi placerade bilderna innan texten och inte till höger efter texten, var att vi ville att användaren skulle få ett första intryck om vad sidan innehåller innan de börjar läsa texten. Det var delvis därför vi valde grafiska länkar (ikoner) till undermenyn också. 6