USABILITY ENGINEERING EN USER EXPERIENCE

Transcriptie

1 USABILITY ENGINEERING EN USER EXPERIENCE College 1, 24/04/2015 Joske Houtkamp Egon van den Broek Departement Informatica en Informatiekunde Universiteit Utrecht

2 Inhoud Introductie praktische zaken Wat zijn de leerdoelen (wat kunnen en weten jullie na afloop?) Introductie Opdracht 1 College hoofdstuk 1 College hoofdstuk 2

3 Introductie Hoorcolleges 5 colleges over de literatuur 3 gastcolleges: context, praktijk (verplichte aanwezigheid) Werkcolleges introductie opdrachten, consult, feedback Opdrachten 4 opdrachten Inleveren via inku.ue@gmail.com Te laat: per 24 uur 1 punt aftrek Beoordeling Tussentijdse toets plus eindtoets: 50% Totaal opdrachten: 50% Beide minimaal 5,5 Totaal minimaal 5,6 Tussentijdse toets 22/05/2015, in tijd van hoorcollege; hoor(gast)college verschuift naar werkcollegetijd. Kijk geregeld op de website voor nieuwe informatie!

4 Tentamen Interaction Design (Preece, Sharp, Rogers, 4th Edition, 2015; of Rogers, Sharp, Preece, 3d Edition, 2011); zelf aanschaffen; Measuring the User Experience, Tullis & Albert (hfdst. 4,5,6,7, online) Alle collegestof 4 th Edition 3d Edition Chapter 13 = Chapter Chapter 13 (DECIDE)-niet Chapter 12 (Agile etc.) --- kopieer Check de website voor achtergrondmateriaal!

5 Cursusdoelen De principes en het proces van interactieontwerp benoemen en uitleggen; De belangrijke usability- en user experience -doelen toepassen in ontwerp en evaluatie; Belangrijke methoden en technieken voor ontwerp en evaluatie beheersen, kunnen selecteren op geschiktheid en correct uitvoeren; Resultaten van de uitgevoerde onderzoeken (ook van empirisch onderzoek) analyseren, integreren en rapporteren; Onderzoek formuleren en uitvoeren op het gebied van human computer interaction, methoden en technieken, enz. Uiteindelijk: het begrijpen van de interactie tussen mens en ICT en het ontwerpen en verbeteren van interactieve applicaties

6 Introductie Opdracht 1

7 Chapter 1 Interaction Design and the User Experience

8 Chapter 2 Understanding and Conceptualizing Interaction Probleemruimte (problem space) Conceptueel model Interface metaforen Interactiestijlen Paradigma s, visies, theorieën, modellen en raamwerken Paul Farrington

9 Probleemruimte Bij (her)ontwerp, eerst bepalen: Wat wil je ontwikkelen, bouwen of verbeteren? Wat zijn je aannames en claims? Zal het product het gewenste doel bereiken, en hoe? Aannames: vaak impliciet, nader onderzoek nodig Claims: iets als waar bestempelen terwijl dat ter discussie staat

10 Raamwerk: analyse probleemruimte Wat zijn de problemen met een bestaand product of gebruikerservaring? Waarom denk je dat er problemen zijn? Hoe verwacht je dat je design ideeën de problemen oplossen? Als de bedoeling is een nieuwe user experience te ontwerpen, hoe gaan de design ideeën de huidige activiteiten ondersteunen, veranderen, of uitbreiden? Methoden en technieken inzetten voor onderzoek.

11 11 Voorbeeld Wat waren de aannames en claims voor 3D TV?

12 Aannames en claims realistisch? Aanname: mensen vinden het geen probleem een 3D-bril te dragen om thuis tv te kijken (redelijk); Aanname: mensen vinden het niet erg veel te betalen voor een nieuwe 3D-tv (niet redelijk); Claim (gebaseerd op ervaringen 3D-films): mensen waarderen de beeldkwaliteit en effecten van 3D-tv (redelijk). Onverwachte problemen: last van ogen, misselijkheid, bril beperkt activiteiten, bril raakt kwijt. Aannames en claims bespreken in design team waar mogelijk onderzoeken: observatie, interviews, etnografische methoden, marktonderzoek, etc.

13 Conceptualiseren van de ontwerpruimte Begrip van de probleemruimte in vroeg stadium helpt het ontwerpteam de ontwerpruimte te conceptualiseren door: Oriëntatie Geeft richting aan vragen en ideeën over het conceptueel model Open mindedness Zorgt ervoor dat een ontwerp niet in vroeg stadium wordt gekoppeld aan bepaalde oplossing (bijv. technisch platform) Common ground Het hanteren van dezelfde begrippen voorkomt misverstanden en verbetert de communicatie.

14 Conceptueel model Een conceptueel model is: a high-level description of how a system is organized and operates (Johnson and Henderson, 2002, p26) Helpt: designers to straighten out their thinking before they start laying out their widgets (Johnson and Henderson, 2002, p28)

15 Voorbeeld: tool om stankoverlast te bepalen

16 Probleemruimte - concepten Wat is stankoverlast precies? Geur, impact op activiteiten, op gezondheid, op welbevinden. Wie wil dit? Overheden, burgers, agrariërs? Wat zijn gewenste uitkomsten? Wat biedt handelingsperspectief? Conceptueel model? Online survey (retrospectief/ bepaalde momenten, kwantitatief, grootschalig,.) Kleine groep gebruikers (dagboek, kwalitatief, lokaal inzicht,.) App (potentieel grote groep, inzicht in tijd en plaats,.)

17 Componenten voor conceptueel model Metaforen en analogiën Maken duidelijk waar een product voor is, en hoe het te gebruiken voor een bepaalde activiteit De concepten waar mensen mee te maken krijgen door het product Handelingen, bewerkingen, objecten Relaties tussen deze concepten Prioritering, koppeling, enz. Skeuomorphism The file system on most operating systems is still based on a literal filing cabinet metaphor, which is why it is not common for one file to exist in multiple non-hierarchical folders -after all, they don t in real filing cabinets!

18 Voorbeeld: vision building tools Context: Europees onderzoeksprogramma Volante: hoe ziet (het landgebruik in) Europa eruit in 2040? Verdeling van wonen, transport, vrije tijd, natuur, voedselproductie, industrie. Onderdeel: toekomstbeelden vragen aan: jongeren in Europa, 60 experts uit verschillende sectoren, uitgenodigd voor workshops

19 Ideeën en visies Ideeën en visies zijn vrijwel altijd incompleet, samengesteld uit verschillende elementen (beelden, begrippen, wensen), niet precies gedefinieerd, soms inconsistent, en gebaseerd op aannames en persoonlijke voorkeuren.

20 Hoe ideeën en visies zichtbaar, concreet en bespreekbaar te maken? Traditionele methodes: discussies, geeltjes, schetsen, inkleuren kaarten, mindmaps, scenario s. Hoe met ICT tools het visualiseren en beschrijven van visies ondersteunen?

21 Story of your life in 2040 Voorwaarden: eenvoudig te begrijpen, leuk om te doen, dichtbij belevingswereld van jongeren Verhaal: hoe ziet een dag eruit in 2040? Wakker worden (waar, wat zie je) Naar het werk gaan (hoe kom je daar, wat doe je, etc,) Boodschappen doen en eten (waar en wat) Vrije tijd (welke activiteiten, waar) Uitkomsten van belang voor landgebruik. Bijvoorbeeld leven in stad, platteland; veel reizen; grootschalige landbouw

22 Metafoor: stripverhaal (comic book) Waarom? Surveys vaak alleen tekst; saai, taalprobleem Strip is algemeen bekende vorm Maakt verhaal (dag in het leven..) mogelijk Concepten: Pagina s Combinatie afbeeldingen en tekst Stijl afbeeldingen Verschillen: Verhaal maken in plaats van lezen Afbeeldingen selecteren en slepen, eigen tekst toevoegen

23

24 Usability test 1. Online vragenlijst (parallel aan de applicatie), 40 jongeren uit verschillende Europese landen. Resultaten: positief, nauwelijks problemen gemeld. 2. Think-aloud methode met 5 jongeren. Resultaten: twijfels over begrip van verschillende onderdelen (functionaliteit, formulering vragen, betekenis afbeeldingen). Enkele reparaties. 3. Nader onderzoek, naar aanleiding van de resultaten (onvolledig, vrijwel geen tekst gebruikt, nauwelijks spreiding over Europa). Resultaten: veel onderdelen slecht begrepen, gebruiker slaat die over, heeft weinig geduld. Foute aannames?

25 Canvas tool

26 Canvas tool Voor de workshop met experts tool om in groepen van 6-8 te werken aan gezamenlijke visie. Metafoor: het creëren van een visie op een leeg doek (canvas), combinatie met mind mapping, geeltjes plakken Suggereert creativiteit, vrijheid, visualisatie Ondersteuning Sturende vraag Relevante elementen (afbeeldingen) worden aangeboden in menu Laat relaties leggen tussen elementen

27 Question Pictures (grouped in themes) Issues (related to land use)

28 Functionalities browse through the categories of pictures To build your vision, keep the question in mind select a picture by clicking, and drag it into the canvas resize and delete the picture add a textbox to the picture to explain your choice or include information add more textboxes to the canvas link the pictures to Issues add explanation to the connectors add your own Issues

29 Different backgrounds: empty, circles (for grouping), map of Europe To next question

30

31

32

33 Evaluatie Bij observatie bleek groot verschil tussen gebruikers, afhankelijk van: Voorkeur voor of aanleg voor werken met concepten en schema s, of voor precies en beschrijvend werken; Ervaring met mind mapping tools (dus bekendheid met de metafoor) Voordelen: bevordert discussie wanneer taal obstakel is, door beeldmateriaal Resultaat blijft digitaal bewaard en kan later worden bewerkt.

34 Interface metaforen Ondersteunen het leren van een applicatie Ondersteunen begrip van het onderliggende conceptuele model (strip -> verhaal maken) Kunnen innovatief zijn en applicaties binnen bereik brengen van grotere gebruikersgroep Veel discussie over metaforen en hun nadelen Bijvoorbeeld: metaforen leiden tot verwachtingen bijv. qua functionaliteit Andere nadelen?

35 Interactietypes : instructie Andere benadering voor conceptueel ontwerp: vanuit de interactietypes (zijn bepalend voor platform en interface) Instructie Opdrachten geven, selecteren Direct, efficiënt, vertrouwd

36 Interactietypes: conversatie Interactie met een systeem als in een conversatie (tekst, spraak). Vertrouwd, intuitief, maar nog niet voldoende kwaliteit Intel Future Technology Vision

37 Manipulatie Interactie met objecten in een virtuele of echte ruimte Objecten verplaatsen, openen, inzoomen, enz., sluit aan bij bestaande kennis Intuitief, direct, engaging; kan eigenschappen van objecten overbrengen (gewicht, omvang, afstand) Niet voor alle taken geschikt Microsoft Surface Parody (Sarcastic gamer)

38 Exploratie Bewegen door virtuele omgeving of fysieke ruimte Electronic Visualization Laboratory, University of Illinois at Chicago. CleVR

39 Voorbeeld gebruik interactietypes Conceptueel model voor een applicatie bij diagnose en advies bij sportblessures?

40 Chapter 2 Bestudeer zelf ook: Paradigma s, visies, theorieën, modellen en raamwerken Na pauze: werkcollege in Ruppert 033 en Ruppert B