The Elements of User Experience Werkgroep 1 1
Week 2-6 Week 7 College Hoofdstuk(ken) lezen ter voorbereiding Werkgroep Oefening maken ter voorbereiding Vragenuurtje (maandag 14 maart) Stuur vragen vooraf even op Tentamen (donderdag 17 maart) Handgeschreven spiekbrief van één A4 Reader, colleges en werkgroepen Week 8&9 Elke week een gesprek Keuze maken uit de 3 cases Rooster wordt in lesweek 3 bekend gemaakt 1e Gesprek: presentatie, vragen en feedback 2e Gesprek: presentatie, vragen, feedback en beoordeling 2
Beoordeling Tentamen Tentamen 90 minuten ongeveer Deel 20 open, 1 invul, meerkeuze ontwerpvragen (90 minuten) uit reader, colleges en Open Open en en werkgroepen meerkeuze vragen vragen uit uit reader, reader, colleges en en werkgroepen minimaal 55% van de punten Pauze (30 minuten) Tentamen Ontwerp Deel 1 2 gesprekken voeren feedback verwerken verzorgd ontwerp op papier oplossing Open Open en en meerkeuze voor het probleem vragen vragen uit uit reader, reader, colleges en en werkgroepen minimaal 55% van de punten (90 minuten) Pauze (30 minuten) Je eindcijfer is gemiddelde van de twee deelbeoordelingen. Voor voldoende moeten beide deelbeoordelingen voldoende zijn. Het tentamen kun je herkansen. Je ontwerp kun je met één gesprek aanvullen. 3
Welke van de volgende 10 applicaties, sites, producten heeft de beste user interface? Beargumenteer je keuze. Wees specifiek. nu.nl PhotoShop Notepad++ Google iphone wikipedia facebook twitter pinautomaat Gmail 4
Elke gebruiker heeft een doel binnen context Usability is de mate waarin gebruikers in hun omgeving met een product hun doelen effectief, efficiënt en naar tevredenheid kunnen bereiken. What makes a great user interface: aesthetics, clarity, consision, consistency, efficiency, familiarity, forgiveness, responsiveness (Dmitry Fadeyev - http://fadeyev.net) 5
UI Specificaties Vastleggen van je ontwerp. Voor jezelf voor overzicht en compleetheid. Voor anderen om te begrijpen wat je bedoelt. 6
Deuk SANNE 2003/04 Groot hoofd Grote oren TV gezicht Monitor gezicht Geen mond HVA button Slijtplek Recht en hoekig Uniform Schoenen Cola light Mimi & Henk - 3 december 1971 Amsterdam 7
SANNE 2003/04 De uk Gro te o r t oo Gr fd o ho ht zic V ge en T Monitor gez Geen mond icht HVA button Slijtplek kig Unif e n ho e t ch orm Re Co la n ne e ho Sc lig h t Mimi & Henk - 3 december 1971 Amsterdam 7
Schermverloopdiagram - Sanne 8
Schermverloopdiagram Overzicht van de applicatie Inzicht in de uitzonderingen Schermen / Statussen / Views Relaties / Navigatie / Acties Schermtypes Legenda Compleet Eenduidig Overdraagbaar Project afhankelijk 9
A visual vocabulary for describing information architecture and interaction design - Jesse James Garrett (Adaptive Path) http://www.jjg.net/ia/visvocab/ 10
click website 11
Scherm Wat je ziet click website Actie gebruiker Wat je doet 11
no results hints 0 results Vraag? Beslispunt / Logica #? website >1 results 1 result Alternatieve flow click Antwoord! click 12
spell error? no results hints no results hints Views / Statussen Horen bij elkaar ja spelfout? nee 0 results 1 result click #? website >1 results ja spelfout? nee spell error? click 13
spell error? no results hints no results hints Views / Statussen Horen bij elkaar ja spelfout? nee 0 results 1 result click #? website >1 results ja spelfout? nee spell error? click 14
spell error? no results hints no results hints Views / Statussen Horen bij elkaar ja spelfout? nee 0 results 1 result click #? website >1 results ja spelfout? nee spell error? click 15
spell error? no results hints no results hints Views / Statussen Horen bij elkaar ja spelfout? 0 results nee Vraag? Beslispunt / Logica Scherm Wat je ziet #? website >1 results 1 result Alternatieve flow click Actie gebruiker Wat je doet spelfout? Antwoord! ja nee spell error? click 16
no results hints New window 0 results #? website >1 results 1 result click (new window) click 17
no results hints New window Mag/kan ook zo 0 results new window #? website >1 results 1 result click click 18
Schermverloopdiagram - STL 19
Schermverloopdiagram - STL met uitzonderingen en foutafhandeling 20
Schermverloopdiagram - Statussen / Details niet ingelogd ingelogd ``! 21
Schermverloopdiagram - Visual flow 22
Schermverloopdiagram - Visual flow 22
Schermverloopdiagram - All-in-1 23
Schermverloopdiagram - Pen en Papier 24
voor Windows voor Mac Microsoft Visio www.surfspot.nl OmniGraffle www.omnigroup.com 25
Maak een schermverloopdiagram van HvA Webmail Op papier in duo s in 12 minuten. Wellicht meerdere iteraties. Pages Stack of Pages Decision point An area to identify a group Relationship Continuation point Nb. Calender, Address Book en Options hoeven niet. Nb. De enige keer dat je bij HCI een laptop nodig hebt. 26
Maak een schermverloopdiagram van HvA Webmail Schets van schermverloop HvA Webmail 27
HvA Webmail Schermverloopdiagram Sanne 't Hooft 17 november 2010 Versie 3 Log in window log out no log in login ok? help (new window) Help window help (new window) home get mail yes main window mail folders Subscribe dialog cancel subscribe subscribe (new window) Manage Folders manage folders "folder link" Inbox Drafts Ongewenste mail Sent Trash (new modeless window) Search dialog close "open message" yes mail comple te? send no reply / reply all (new window) previous next Mail message forward (new window) Compose message forward inline (new window) compose (new window) delete (next message) move to... (next message) add add addresses (new window) attachments (new window) attach add to,cc,bcc (new window) page area / group Add Addresses dialog Attachments dialog cancel Add from address book dialog continuation point calender address book options decision point connector / action Versie 2 van schermverloop HvA Webmail 28
Concrete Completion Visual Design Surface Interface Design Navigation Design Information Design Skeleton Interaction Design Information Architecture time Structure Functional Specification Content Requirements Scope User Needs Site Objectives Strategy Abstract Conception 29
Concrete Completion Media Design Visual Design Surface Interface Design Navigation Design Information Design Skeleton Interaction Design Information Architecture time Structure UCD UCD Functional Content Specification Requirements User Needs Site Objectives Scope Strategy Abstract Conception 29
Concrete Completion Visual Design Surface Interface Design Navigation Design Information Design Skeleton Interaction Design Information Architecture time Structure Functional Specification Content Requirements Scope User Needs Site Objectives Strategy Abstract Conception 29
30
Elke gebruiker heeft een doel binnen context 31
Ontwerp een inlog-systeem voor kinderen die nog niet kunnen lezen Een leerkracht gebruikt een COO-programma (computer ondersteund onderwijs) om kinderen te laten werken met geheugenspelletjes. Van elke sessie worden de resultaten vastgelegd. Hiervoor moet een kind inloggen voordat de geheugenspelletjes gespeeld worden. Het gaat er om dat de kinderen zich identificeren en niet om fraude te voorkomen. Na afloop van het spel logt het systeem automatisch uit en kan een volgend kind inloggen. De gebruikers zijn kinderen van 4 en 5 jaar. In een klas zitten maximaal 20 kinderen. Biometrie, chips en webcamherkenning zijn te duur. 32
Ontwerp een inlog-systeem voor kinderen die nog niet kunnen lezen What? Space Actors What is the space like? Describe it (indoors / outdoors, public / private, quiet / noisy, calm / busy, etc.) What are the names and relevant details of the people involved? Activities Objects Acts What (in general) are the actors doing and why? What physical objects are present? (furniture, PC, papers, remote control, etc.) What specific acts are the individuals doing? Events Is what you are observing part of a special event? Goals What are the actors trying to achieve by carrying out these specific acts? Feelings What is the mood of the individuals - how are they feeling? Sayings What are the actors saying? Nb. Wees zo specifiek mogelijk: Welke cartoons kijken ze? Wat voor kleur heeft hun fiets? Uit welk boek leest de juf voor? Wat hebben ze op hun brood? Hoe heet hun moeder?... bron: UCD, Charlie Muholland, HvA - IAM - P - blok 1 33
Ontwerp een inlog-systeem voor kinderen die nog niet kunnen lezen Maak schetsen / varianten en werk die uit: 1. Maak een schermverloop (navigatie). 2. Maak schermschetsen (details / interactie). 3. Denk na hoe met fouten om te gaan. 4. Werk je ontwerp uit op een flipovervel. Het gaat er om dat de kinderen zich identificeren en niet om fraude te voorkomen. Na afloop van het spel logt het systeem automatisch uit en kan een volgend kind inloggen De gebruikers zijn kinderen van 4 en 5 jaar. In een klas zitten maximaal 20 kinderen. Nb. Benut de context van de kinderen en/of wellicht ook al de context van de spelletjes die volgen. 34
Elke gebruiker heeft een doel binnen context 35
Voor volgende week lezen Hoofdstuk 1 The elements of User Exerience Voor volgende week lezen Hoofdstuk 2 Organizing the Interface Hoofdstuk 3 Getting There 36