USABILITY ENGINEERING EN USER EXPERIENCE College 1, 24/04/2015
Joske Houtkamp Egon van den Broek Departement Informatica en Informatiekunde Universiteit Utrecht
Inhoud • Introductie – praktische zaken • Wat zijn de leerdoelen (wat
kunnen en weten jullie na afloop?) • Introductie Opdracht 1 • College hoofdstuk 1 • College hoofdstuk 2
Introductie Hoorcolleges
Beoordeling
• 5 colleges over de literatuur
• Tussentijdse toets plus eindtoets:
• 3 gastcolleges: context, praktijk
50% • Totaal opdrachten: 50% • Beide minimaal 5,5 • Totaal minimaal 5,6
(verplichte aanwezigheid)
Werkcolleges • introductie opdrachten, consult,
feedback
Opdrachten • 4 opdrachten
Tussentijdse toets
• Inleveren via
[email protected]
22/05/2015, in tijd van hoorcollege; hoor(gast)college verschuift naar werkcollegetijd.
• Te laat: per 24 uur 1 punt aftrek
Kijk geregeld op de website voor nieuwe informatie!
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
4th Edition 3d Edition Chapter 13 = Chapter 12 --- Chapter 13 (DECIDE)-niet Chapter 12 (Agile etc.) --- kopieer Check de website http://www.id-book.com voor achtergrondmateriaal!
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
Introductie Opdracht 1
Chapter 1 Interaction Design and the User Experience
Chapter 2 Understanding and Conceptualizing Interaction
• Probleemruimte (problem •
• • •
space) Conceptueel model Interface metaforen Interactiestijlen Paradigma’s, visies, theorieën, modellen en raamwerken Paul Farrington
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
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.
www.id-book.com
11
Voorbeeld Wat waren de aannames en claims voor 3D TV?
http://adsoftheworld.com/
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.
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.
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)
Voorbeeld: tool om stankoverlast te bepalen
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,….)
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
Skeuomorphism
• Handelingen, bewerkingen, objecten
• Relaties tussen deze concepten • Prioritering, koppeling, enz.
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!
https://medium.com
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, http://www.life2040.eu • 60 experts uit verschillende sectoren, uitgenodigd voor workshops
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.
http://lizardbrainsolutions.com/services/
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?
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
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
http://www.life2040.eu/
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?
Canvas tool
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
Question
Pictures (grouped in themes)
Issues (related to land use)
Functionalities • browse through the categories of
pictures • 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
To build your vision, keep the question in mind
Different backgrounds: empty, circles (for grouping), map of Europe
To next question
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.
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?
Interactietypes : instructie Andere benadering voor conceptueel ontwerp: vanuit de interactietypes (zijn bepalend voor platform en interface) • Instructie • Opdrachten geven, selecteren • Direct, efficiënt, vertrouwd
Interactietypes: conversatie • Interactie met een systeem als in een conversatie (tekst, spraak). • Vertrouwd, intuitief, maar nog niet voldoende kwaliteit
Intel | Future Technology | Vision https://www.youtube.com/watch?v=g_cauM3kccI&feature=youtu.be
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) • https://www.youtube.com/watch?v=CZrr7AZ9nCY
Exploratie • Bewegen door virtuele omgeving of fysieke ruimte
Electronic Visualization Laboratory, University of Illinois at Chicago.
CleVR
Voorbeeld gebruik interactietypes Conceptueel model voor een applicatie bij diagnose en advies bij sportblessures ?
Chapter 2 • Bestudeer zelf
ook: Paradigma’s, visies, theorieën, modellen en raamwerken
Na pauze: werkcollege in Ruppert 033 en Ruppert B
