Battlefield för den nya marknaden Förenkla, förtydliga och förbättra ett användargränssnitt Tobias Hogstrand, Informativ Illustration, 120p Examensarbete C-nivå, 10p, Informativ Illustration Handledare: PeterLinejung Examinator: Rune Pettersson Institutionen för Innovation, Design och Produktutveckling Mälardalens högskola, Eskilstuna, 2007-06-09 Registreringsnr: IDPIDEXC:07:47 2 Abstract Stockholmbaserade spelutvecklaren DICE, som bl.a. utvecklar Battlefield, vill ta mark på en relativt ny och växande spelmarknad. Från att ha strävat efter komplexa och verklighetstrogna upplägg vänder sig nu DICE till en helt ny målgrupp. Den primära publiken har identifierats som tillfälliga korttidsspelande ungdomar utan tidigare eller liten erfarenhet av liknande spel. För att nå den nya målgruppen krävs att dagens avancerade användargränssnitt förenklas och förtydligas. Målet är att spelaren snabbt ska kunna förstå och använda spelet. Min uppgift är att ta fram en interaktiv presentation som förslag på hur användargränssnittet i spelet skulle kunna se ut. I denna rapport undersöks hur spelaren uttyder och använder förslaget. Vidare beskrivs arbetsförfarandet samt kopplingar till informationsdesignens regler och rekommendationer. 3 4 Innehållsförteckning Abstract ...................................................................................................................... 3 Innehållsförteckning .................................................................................................... 5 1. INLEDNING ......................................................................................................... 7 1.1. Begrepp .................................................................................................................... 7 1.2. Bakgrund .................................................................................................................. 7 1.3. Syfte ......................................................................................................................... 8 1.4. Frågeställning ........................................................................................................... 9 1.5. Avgränsningar .......................................................................................................... 9 1.6. Målgrupp ................................................................................................................... 9 2. TEORI ............................................................................................................... 11 2.1. Informationsdesign ................................................................................................. 11 2.2. Interaktionsdesign .................................................................................................. 12 2.3. Kognition och perception ........................................................................................ 13 2.4. Bildläsning .............................................................................................................. 14 2.5. Gestaltningslagar .................................................................................................... 14 2.6. Användbarhet ......................................................................................................... 15 2.6.1. Vad är användbarhet? ................................................................................................. 15 2.6.2. Varför är användbarhet viktigt? ................................................................................... 16 2.6.3. Hur skapas bra användbarhet? ................................................................................... 16 2.7. Symboler och semiotik............................................................................................ 17 2.8. Pictogram ............................................................................................................... 18 2.9. Linjebilder ............................................................................................................... 18 2.10. Förenkla genom att förtydliga ............................................................................. 19 2.11. Grafisk form ........................................................................................................ 20 2.12. Layout ................................................................................................................. 20 2.12.1. Kontrastprinciper ......................................................................................................... 20 2.12.2. Balans .......................................................................................................................... 21 2.13. Färgkoder och färgval ......................................................................................... 22 2.14. Pixel- och objektgrafik ......................................................................................... 22 2.15. Problemområden ................................................................................................ 23 2.16. Wireframe och prototyp ...................................................................................... 24 5 2.17. Utvärdering ......................................................................................................... 25 2.18. Undersökningsmetoder ....................................................................................... 26 3. METOD ............................................................................................................. 29 3.1. Ämnesval ................................................................................................................ 30 3.2. Förhållningssätt och val av undersökningsmetoder ................................................ 30 3.3. Informationsinsamling ............................................................................................. 31 3.4. Källkritik .................................................................................................................. 31 3.5. Metodkritik .............................................................................................................. 32 4. EMPIRI .............................................................................................................. 33 4.1. Intervju .................................................................................................................... 33 4.2. Enkät ...................................................................................................................... 33 4.3. Konkurrerande spel ................................................................................................ 34 5. DISKUSSION .................................................................................................... 35 5.1. Grafiska verktyg ...................................................................................................... 35 5.2. Färganalys av IngameUI......................................................................................... 35 5.3. Framtagning ........................................................................................................... 36 5.4. Förbättringsförslag .................................................................................................. 44 5.5. Vidare forskning ...................................................................................................... 44 6. SLUTSATS ........................................................................................................ 46 7. KÄLLFÖRTECKNING ........................................................................................ 47 Böcker ................................................................................................................................ 47 Kompendier ........................................................................................................................ 47 Elektroniska källor .............................................................................................................. 48 Föreläsningar ..................................................................................................................... 48 BILAGOR .................................................................................................................. 49 I. Tidsplan ...................................................................................................................... 49 II. Intervju ........................................................................................................................ 49 III. Enkät .......................................................................................................................... 54 IV. Prototyp ...................................................................................................................... 56 V. Tidigare spel i Battlefield-serien ................................................................................. 57 6 1. INLEDNING I kapitlet redogörs för arbetets förutsättningar. Rapporten innehåller en del facktermer. Nedan följer en ordlista för att tydliggöra. 1.1. Begrepp • GUI – Graphical User Interface – grafiskt användargränssnitt Användargränssnittet är länken mellan programvara och användaren. Sköld (2007) skriver på sin hemsida att gränssnittet är den del av en produkt som användaren ser och där han eller hon kommer åt funktioner för att interagera med produkten. • HUD – Head-Up Display Genomskinliga informationsvisare som exempelvis förekommer i stridsflygplan. Utan att