Mehmet Akbasogullari Informatik A - VT Informationsarkitektur. IT,Medier och Design. Workshop

Transkript

1 Informatik A VT hp It, Medier och Design Arbetat med: Nevine Youssif

2 2 Innehållsförteckning 1.Del 1 Uppgiftsanalys och navigation...3 Moment 1 - Uppgiftsanalys...3 Moment 2 Navigation Del 2 Sitemaps & Wireframes...12 Moment 1 Sitemaps...12 Moment 2 Wireframe Del 3 Individuell Uppgift Uppgiftsanalys och Navigation...16 Uppgiftsanalys...16 Navigation...18 REFERENSER...20

3 3 1. Del 1 Uppgiftsanalys och navigation Moment 1 - Uppgiftsanalys 1. Vi har valt att arbeta med samma fiktiva webbplats från Workshop Webbplats med liknande tema: Webbplats som skiljer sig från detta tema 3. Sportamore.se 10 uppgifter: Översikt produkter Välj önskade produkter, ex. Efter önskad pris, färg, storlek, modell, kön,... Bläddra vidare över önskade kategorier Översikt på valda produkter Titta på produktinfo Välj önskade varor Till kassa Skapa konto Mata in konsuments uppgifter Betala

4 4

5 5 Dn.se 10 uppgifter: Titta på senaste nytt Navigera bland kultur, sport, ekonomi, Stockholm, bostad, resor, mat livstil nyheter. Logga in på Dn. Digital prenumeration på nyheter. Sök nyheter på dn.se Bläddra på kundservice. Vanliga frågor. Söka jobb på Dn. Annonsera på Dn. Läsa mer om Dn. Tipsa en nyhet till Dn.

6 6

7 7 4. Sportamore tabell: Översikt bland produkter + välj önskade produkter, ex. Efter önskad pris, färg, storlek, modell, kön,...+ blädra vidare över önskade kategorier översikt på valda produkter+ titta på produktionsinfo välj önskade varor till kassa+ skapa konto+ mata in konsuments uppgifter betala navigation konsumtion Intraktion interaktion interaktion DN tabell: Välj mellan senaste nyheter, bläddra nyheter på navigationen. Navigation Läs en nyhet. Titta på vädernyheter. Konsumtion Prenumera på tidningen, logga in som prenumerant, sök på dn. Interaktion 5.Uppgift lista för en egen webbplats: Översikt över alla produkter. Välj kategorier. Välj färg och storlek på en produkt. Översikt på valda produkter. Titta på produktinfo. Välj antal produkter och storlek. Lägg till kundvagn. Gå till kassan. Mata in leverans adress. Mata in kortnummer och betala. 6. Uppgifts tabell för egen webbplats: Översikt på alla produkter Välj kategorier välj färg och storlek Översikt på valda produkter Titta på produktinfo Välj antal och storlek Lägg till kundvagn/din kundvagn Gå till kassan Mata in leverans adress Betala navigation interaktion konsumtion interaktion interaktion interaktion interaktion

8 8 Reflektion Uppgiftsanalys till del 1, moment 1: Utmaningar som kan möta en informations arkitekt när han grupperar olika slags uppgifter och hur de ska dela dessa uppgifter i en uppgift tabbel senare kan vara exempelvis, vilka uppgifter eller rubriker passar ihop med varandra och vilka passar inte ihop. Man ska inte välja uppgifter som inte hör ihop med varandra då sökaren kan bli förvirrad, så man ska välja uppgifter som hör ihop på samma sida. Man ska även tänka på att det ska inte vara så många uppgifter på en och samma sida, men inte heller för få. Det ska vara enkelt och smidigt, det som är viktigt kan exempelvis ha större front. Även färger spelar stor roll. Man ska också tänka på vart man placerar vad, beroende på om det är en huvudsaklig syfte eller länkar vid sidan för flera val till exempel. Vad som är viktigt och vad som kan räknas som onödigt att ha i hemsidan kan vara svårt att veta ur en arkitekts syn vinkel, men man ska alltid försöka tänka så som sökaren önskar sig. Detta kan exempelvis hända genom att direkt fråga fler utvalda sökare eller också titta från deras synvinkel. En arkitekt kan också bedöma vad som är relevant och viktigt att ha i just den sidan som de bygger, man behöver inte ha massa information som inte är relevanta för det man söker utan man ska hela tiden tänka på och ha de informationssökaren kommer ha stor nytta av. Det ska vara enkelt att hitta det man vill ha, så man behöver inte bläddra igenom massa länkar och sidor för att komma fram till det man vill ha. Detta kan ske genom exempelvis rätt design på sidan. I kurs litteraturen så pratar man två olika verktyg som man kan använda när man bygger en hemsida den ena är Site map, där man ska rita de olika uppgifterna man har valt och som man räknar som relevanta. Det andra är en Wireframe, wireframe är också ett verktyg för att rita hemsidan. Man kan ha globala navigation som huvud lista överst på sidan där man har de viktigaste länkar, senare kan man ha en lokal navigation till vänster om sidan där man kan ha länkar som sökaren klickar på för och gå vidare för flera val. När man jobbar med de olika verktygen så ska man tänka på tre viktiga regler, den första regeln är att tydlig göra för nästa steg, man ska här göra det lättare för sökaren vad som skall göras här näst. Andra regeln är att hantera flera möjliga nästa steg, här ska man exempelvis tänka på vad som är viktigt att ha på sidan och vad som betraktas som mindre viktigt osv. Den tredje regeln är att skapa område då man ska alltid tänka på t.ex vilka olika färger man ska ha och vad för storlek man ska ha för olika rubriker beroende då på vad. Man ska även tänka på vart man har rubrikerna. Så tydliggöra och visa det som är viktigt och relevant för sökaren på ett fint, enkelt och smidigt sätt, man ska inte ha onödiga information som inte hör hemma med det man söker men inte heller för få information för sökaren. Moment 2 Navigation 1. Två webbplatser som liknar vår tema: bubbleroom.se och zalando.se. Två webbplatser som skiljer sig från vår tema: och 2. Hemsidorna använder av bl.a.: A) Stödjande navigationer i exempelvis rutan SÖK, den är nåbart överallt. B) Assosiativ navigation, där de små länkar för att läsa vidade, finns i svt.se hemsidan. C) Lokal navigation, finns på och på vänstra sidan. Navigationen tar dig till lokala nivåer av hierarkin. D) Global navigation. Finns på alla fyra hemsidor,överst på sidan och beskriver webbplatsens innehåll.

9 9 Här finns exempel på Global, lokal och stödjande navigationer. Här finns exempel på stödjande och global navigation.

10 10 svt.se/nyheter: Här finns exempel på alla fyra nämnda navigationer.

11 11 Här finns exempel på lokal, global och stödjande navigationer. Reflektion Moment 2 Navigation Om vi börjar med En online kläd webbshop. Det finns tre länkar högst upp på högra hörnet. Nyhetsbrev, bli medlem och logga in. Dessa länkar är stödnavigation för användaren. Man kan prenumera på nyhetsbrev så får man alla nyheter på sitt mail varje dag. Eller man kan bli medlem eller logga in genom att klicka på länkarna. Precis under de tre länkar som jag har nämt har vi en sökfunktion som också är en typ av stödnavigation för användaden. Man skriver in helt enkelt det som man vill ha. Det gör enkelt att hitta kläder efter vad man vill ha för kläder. Sen har vi globala navigationen i svarta rutan högst upp på sidan. Der står i boken att om du skapat en hierarkist ordning, också har du toppnivå kategorier. Dessa toppnivå kategorier är din globala navigering.1 På globala navigeringen har vi toppnivå kategorier som visar kläder, skor, accessoarer, märken. Men det som står i första två platsen av kategorierna är Kvinna och Man. Om man klicker på Man så laddas om sidan med kläder endast för män. Om man skulle klicka på kvinna är visas bara kläder för kvinnor. Jag tycker att de kunde ha haft man och kvinna kategorierna i början av sidan. Dvs. när man besöker sidan så kunde man välja om man är intresserad av kläder för män eller kläder för kvinnor. Så kan man kopplas vidare till kvinnor sidan eller män sidan. Men förutom män och kvinnor, om vi kommer till de toppnivå kategorierna på globala navigeringen. Dvs. kategorier som visar kläder, skor, accossoarer mm. När man klickar på någon av dessa kategorier på globala navigeringen t.ex. om man klickar på skor så öppnas en lokal navigering på 1 Information Architecture, Second Edition. Christina Wodke and Austin Govella Sid 193

12 12 vänstra sidan och visar alla skorna efter vad det är för sorts skor. Vinterskor, skinnskor, stövlar etc. På Bubbleroom har vi mött tre typer av navigationer. Stödnavigation, global navigation och lokal naviation. är ganska likt bubbleroom.com. Den består av en stödnavigation högst upp på sidans högra hörn. Globala navigeringen på Zalando består av Kvinnor, Män och Barn. När man klickar på något av dessa tre kategoerier så kommer lokal navigeringen precis under Kvinnor, Män och Barn. På lokal navigering nivå nummer ett finns det kläder, sport&träning, accessoarer mm. Och när man klickar på något av dessa kategorier så öppnas lokal navigering nivå nummer 2. På vänstra sidan. På lokal navigering nummer 2 på vänstra sidan står det kläderna mer detaljerad. Samma som det var på Bubbleroom.se. Då två andra sidor som vi valde var nyhetssidor. och Båda av de sidorna har det globala och lokala navigationssystemet med toppnivåer. Lokala navigationen på nyhetssidorna som vi valde, öppnas inte på höger eller vänstra sidan. Lokala navigationen öppnas direkt under globala navigationen. Det fanns också stödjande navigationen som visar svt play, öppet arkiv, väder och tv tablå på högra hörnet av sidans topp. Det var en sak som nyhetssidorna var extra noga på. Och det är den fjärde typen av navigationer som vi inte såg på Zalando och Bubleroom. Det var associative navigation. Det står i boken att associativ navigering behandlar två viktiga situationer för varje sida på din webbplats.2 1.Vad händer när användaren har lyckats integrera med sidan? Vad händer nu? 2.Vad händer om denna sida är inte vad användaren vill? Vad är det som fångar honom innan han lämnar din webbplats? På svt.se, efter varje artikel finns det associativa länkar till relaterade nyheter. Det fångar användaren att lämna kvar på sidan och läsa om det finns några intressanta relaterade artiklar. På dn.se finns det länkar i slutet av varje artikel som visar vad andra har läst. De visar de populära artiklarna som kommer att fånga läsaren som har lyckats integrera med sidan. På svt.se och dn.se ser vi fyra olika navigationstyper. Global navigation, lokal navigation, stödnavigation och associativ navigation. 2. Del 2 Sitemaps & Wireframes Moment 1 Sitemaps 1. Sitemappen som vi har gjort för egen fiktiva webbplats ser ut såhär; 2 Information Architecture, Second Edition. Christina Wodke and Austin Govella Sid 203

13 13

14 14 2. Vi har använt oss av tre typer av navigation: Global, lokal och stödjande navigationer. 3. Vi har tre nivåer på vår sitemap. Nivå 1 på kvinna och man, nivå två på ute kläder festkläder och hemma kläder och nivå tre som lägg till varukorg till kassan leveransadress och betala. 4. Vi har använt oss av comb map exempel som layout för vår site map. 5. Vi har just använt comb map layouten eftersom den är enkel och passar bra för vår sida. Vi valde de navigation som vi behöver för vårt ämne då det handlar om kläder så man behöver inte ha exempelvis associativ navigation, kände vi. Moment 2 Wireframe 1. Low fidelity wireframe på fyra sidor av vår fiktiva webb plats ser ur såhär;

15 15

16 16 2. Vi utgick från tabell uppgiften vi gjorde i uppgift 6 ovan i del 1, där man skulle göra en egen webbsida. 3. Del 3 Individuell Uppgift Uppgiftsanalys och Navigation Uppgiftsanalys Vi måste alltid balansera effektivitet med tydlighet i vår design. Varje sida kan användas till en huvuduppgift. Men varje uppgift kan ha relaterade aktiviteter eller underaktiviteter som kan vara rimligt att gruppera tillsammans. Eller ibland, en uppgift kan vara för liten för att verkligen förtjäna en hel sida med sig själv. När man beslutar hur många sidor som ska skapas för en grupp av uppgifter måste man tänka på några faktorer som t.ex. publikens tekniska finesser, mängden av information på en sida, uppgiften som publiken försöker åstadkomma, hur ofta kommer publiken att slutföra uppgiften? Det finns tre angreppssätt som författaren tar upp i boken för att gruppera interaktiva uppgifter. Det är Wizards, Kontrol Panels och Toolbars. Wizards: Wizards betyder att man har många boxar, många sidor för en uppgift. I mjukvarudesign, är en layout med ett steg per sida kallas för Wizard. Wizards används i följande situationer; När användarna vill uppnå ett mål som har många steg. Wizards är bra på att se till att man inte missar ett steg. När alla steg måste kompletteras steg för steg. När uppgifter sällan utförs som att

17 17 installera en skrivare. Installera en skrivare gör man inte så ofta. När publiken är inte teknisk kunniga och blir förvirrade när de möter en sida med många val på det. En wizard gör komplexa uppgifter för nybörjare att verka enkelt. När bandbredden är låg och att det skulle ta evigheter att ladda en sida. För vårt fall kunde vi använda wizards för att vi kan tänkas a okunniga användare som vill köpa kläder online. Vi har flera diskreta uppgifter som att fylla i namn, adresss, kortnummer, postadress, personnummer mm. Wizards är en bra lösning därför att den går steg för steg och användaren kan fylla i alla uppgifter steg för steg utan att bli förvirrade.båda teknisk kunniga användarna och nybörjarna på webben bli glada genom att använda en Wizard metod på betalningssidan. Control Panels: Control panels betyder många boxar på en sida. Bara för att din uppgift analys har flera diskreta uppgifter betyder inte att du inte har andra alternativ. Control panels är när alla interatktions uppgifter visas på en enda sida. Control paneller är bra när Wizard är inte en bra lösning. Control Panels är också ett bra val när följande villkor är uppfyllda; När applikationen är lätt att förstå, och alternativen är okomplicerat, när elementen får sammanhang när de placeras bredvid varandra. Control panel gränssnittet används ofta nog att publiken kommer att uppskatta bekvämligheten av en enda sida. Control paneler används ofta i situationer där enstaka justeringar krävs. Som konfigurering av ett program. Om du har flera relaterade uppgifter, kanske du kan gruppera dem som en kontrollpanel på en sida. I vår fiktiva webbplats kan vi likaväl använda Control Panel metoden också. När man väljer det som man vill köpa genom navigationen kan man senare gå till kassan för att betala den. På kassan måste användaren fylla i några uppgifter som namn, adress, postnummer, kortnummer osv. Vi kan ha allt på en enda sida som en Control Panel och gruppera de olika uppgifterna med varandra i småa boxar. Namn, personnummer och adress på en box. Kortuppgifterna i en annan box. Och adress och liknande uppgifter på en tredje box. Och alla de boxarna kan vi ha på en och samma sida som en Control Panel form med en skicka knapp. Toolbars: Toolbars används när sidan är inte tillräckligt för vissa funktioner. Toolbars håller verktygen för interaktion bekvämt nära arbetsytan. Detta är användbar när frekventa justeringar krävs, t.ex. när du skriver och ritar. Tänk hur svårt det skulle vara om du var tvungen att gå till en annan sida varje gång du ville gå från en sudgummi till en penna! Du kan använda toolbars när det är många steg i uppgiften, och de åtgärder som kan göras i valfri ordning. När åtgärder behöver göras om och om. Liksom bara vanligt gjort. När närheten av verktyg till arbetsytan är viktig för aktiviteten och när användarens teknik kan stödja genomförandet. Trots att toolbars är vanliga i programvaror, är de inte i stor utsträckning inom webbdesign. Främst på grund av de tekniska begränsningarna i äldre webbläsare. I vår fiktiva webbplats kan vi använda toolbars på vissa delar av webbsidan. Vi kan skapa interaktionsknappar när en produkt visas. Två knappar bredvid en bild på produkten. En knapp som visar att bilden ska zoomas in. Och en till knapp som visar att bilden ska zoomas ut. De knapparna kan tänkas fungera som toolbars. Mycket enkelt för användaren att zooma in och ut en bild på en produkt. En enkel knapp bredvid produkten där det står lägg till i varukorgen kan också tänkas som en toolbars knapp. Om användaren vill handla många saker kan den här knappen vara mycket användbar. lägg till i varukorgen är en åtgärd som måste göras om och om hela tiden. Och det är bra att ha den här toolbars knappen bredvid varje produkt. Då behöver inte användaren köpa varje produkt för sig utan kan lägga alla produkter han tycker om i en varukorg och betalar allt på en

18 18 enda gång. Navigation Författarna Christina Wodtke och Austin Govella i boken Information Architecture hävdar att när du utformar ditt navigationssystem, det kan vara frestande att fylla den globala, lokala, associative och utility navigeringslänkar.3 Bara så att du har dem. Du behöver inte hitta länkar till olika typer av navigering. Du kan börja med det innehåll du har och se vilken navigering som du behöver. Men vilka typer av länkar ska visas i det globala systemet? Vad går på lokal navigering? När du utformar ditt navigationssystem, finns det tre frågor som du måste besvara. Hur är ditt innehåll organiserat? Vad vill dina användare göra? Vad vill du att dina användare ska göra?4 Svaren på dessa tre frågor kommer att säkerställa att din navigering innehåller de länkar som behövs, samtidigt som det lämnar utanför de länkar den inte behöver. Jag ska berätta hur dessa tre frågor som besvaras i boken samt hitta på egna lösningar med hjälp av dessa frågor på vår fiktiva webbplats. Hur är ditt innehåll organiserat? Iblad kommer användarna att redan ha en förväntan om hur ditt innehåll och funktioner organiseras. Person kataloger är ofta organiserade i alfabetisk ordning. Evenemang organiseras efter datum. Andra gånger kan metadata erbjuda alternativa väg att organisera ditt innehåll. Att låta användare navigera innehåll av hur det är organiserat är ett bra sätt att se till att de kan hitta vad de letar efter. Men ibland vill du inte förlita dig på användare att söka runt. Ibland vill du se till att användare kan göra vad de kom att göra. Jag tycker att vår fiktiva webbplats är organiserat som en riktig klädbutik i verkligheten. Kläder för herrar på ett ställe och kläderna för damer på ett annat ställe. Och sedan är de organiserat efter vad det är för typ av kläder och sorteras efter kategori. Precis som om det vore placerat på en riktig klädaffär. Sen har vi till och med kategoriserat de i en alfabetisk ordning för att det ska bli för lätt för ögonen att hitta kläder i alfabetisk ordning. T.ex. kategorin Accessoarer på första plats och kategorin Övriga kläder på sista platsen i navigeringen. Men det viktiga är metadatan. Att vad det är för typ av kläder. Vi kan inte bara sortera kläderna efter t.ex. märken och blanda ihop alla kläder från kjolar till kavaj. Det skulle inte fungera. Jag tycker metadatan har hjälpt oss att organisera innehållet. Att sortera efter alfabetisk ordning är lite mindre viktig för oss tycker jag. Jag tycker att en användare skulle inte bry sig så mycket om kläderna sorteras efter en alfabetisk ordning. Vi kunde istället sorterat så att viktigaste kläder kommer först och mindre viktiga kommer i sista platser av kategoriseringen. Liksom jeans, kavaj och byxor är först och accessoarer kommer sist. Istellet för alfabetiska ordningen. Det kanske hade varit en rimligare lösning. Vad vill användarna göra? Vi måste bestämma vad användarna vill ha. Denna Vill ha frågan är ganska vitigt. Du kan ha en underbar organisation system, men användare kan föredra en annan väg. Vår organisation system och navigationssystem är inte nödvänligtvs samma sak. Om användarna kommer till din webbplats för att göra någonting så behöver din navigering hjälpa de att göra det. Även om det skiljer sig från hur innehållet är organiserat. Om det finns en obalans så får du en hel del frustrerade användare. Vad som är ännu värre är att de har svårt att hitta vad de behöver, köpa mindre, registrera mindre 3 Information Architecture, Second Edition. Christina Wodke and Austin Govella Sid Information Architecture, Second Edition. Christina Wodke and Austin Govella Sid 212

19 19 och ladda ner mindre innehåll. Vi förstår det på vår fiktiva webbplats. Och alla produkter är organiserade efter kön och kategorier om vad där är för sorts kläder. Om det är festkläder, hemmakläder eller accessoarer. Våra fiktiva användare vill hitta sina kläder efter dessa kategorier. De klickar på t.ex på festkläder först och ser vad vi har för festkläder till dem. De har lättare att hitta sina produkter. Och stannar längre på sidan. Att hjälpa användarna att göra vad de vill göra kommer att glädja dina användare. Vad vill ni att användarna ska göra? Alla webbplatser har en anledning för sitt existerande. För kommersiella webbplatser, denna existensberättigandet vanligtvis följer av den nuvarande affärsmodellen. Att hjälpa användarna att göra vad de vill göra gör att sidan fungerar för användarna, men det betyder inte att du faktiskt tjänar pengar på det. Du kan dock inte enbart fokusera på att tjäna pengar för då användarna kommer inte tillbaka igen. Låt oss säga att din organisation tjänar pengar på varje annons som ses av en användare. Om du helt fokuserade på din affärsmodell, då du skulle inte ens bry med navigationen. Då skulle du bara ha en sida som är helt täckt med annonser. Naturligtvis skulle ingen gå in på sidan och se några annonser. Däremot användarna vill titta på innehåll. Om de hade ett sätt att hitta deras innehåll och konsumera den på ett fint reklamfri miljö skulle de göra det. Om du hade byggt en webbplats för att tillfredsställa dessa användare skulle du inte tjäna någon pengar eftersom att det inte skulle finnas några annonser. En framgångsrik webbplats dyker upp från en balans mellan vad användaren vill ochvad som är företagets behov.5 Navigering bör hjälpa användarna att göra vad de vill, men det måste också hjälpa de att göra vad du vill att de ska göra. Navigering underlättar ditt företagsmodell. Bra navigering får ditt företag att tjäna pengar. Man måste igen tänka på föregående frågan och få användarna att göra vad de vill göra på din webbsida. Hitta en navigering efter användarens behov. I vår fiktiga webbplats finns det en sidebar på varje sida och där visas annonser. Genom annonser på sidebar tjänar vi pengar. Men vi tjänar också pengar på att sälja våra produkter på hemsidan. Därför måste vi ha ett användbart navigationssystem för att få kunderna tillbaka till sidan en nästa gång. Vi måste få användaren göra vad de vill göra. Och det är viktigt. Genom att ha en sidebar på varje sida tjänar vi pengar på annonserna också. I det här fallet har vi balanserat mellan vad användaren vill göra, att kunna hitta sina produkter och vad som är företagets behov, sälja annonser och sälka produkter. 5 Information Architecture, Second Edition. Christina Wodke and Austin Govella Sid 213

20 20 REFERENSER Bok Information Architecture, Second Edition. (2009) Christina Wodke and Austin Govella