interaction design basics

1 interaction design basicschapter 5 interaction design b...

Author: Clare Lang

0 downloads 8 Views

1 interaction design basicschapter 5 interaction design basics

2 interaction design basicswhat it is, interventions, goals, constraints the design process what happens when users who they are, what they are like … scenarios rich stories of design navigation finding your way around a system iteration and prototypes never get it right first time!

3 interactions and interventionsdesign interactions not just interfaces not just the immediate interaction e.g. stapler in office – technology changes interaction style manual: write, print, staple, write, print, staple, … electric: write, print, write, print, …, staple designing interventions not just artefacts not just the system, but also … documentation, manuals, tutorials what we say and do as well as what we make

4 what is design?

5 achieving goals within constraintswhat is design? achieving goals within constraints goals - purpose who is it for, why do they want it constraints materials, platforms trade-offs

6 understand your materialsgolden rule of design understand your materials

7 for Human–Computer Interactionunderstand your materials understand computers limitations, capacities, tools, platforms understand people psychological, social aspects human error and their interaction …

8 To err is human accident reports .. but … human ‘error’ is normalaircrash, industrial accident, hospital mistake enquiry … blames … ‘human error’ but … concrete lintel breaks because too much weight blame ‘lintel error’ ? … no – design error we know how concrete behaves under stress human ‘error’ is normal we know how users behave under stress so design for it! treat the user at least as well as physical materials!

9 Central message … the user

10 The process of design scenarios task analysis what is wantedinterviews ethnography what is there vs. what is wanted guidelines principles dialogue notations precise specification architectures documentation help evaluation heuristics scenarios task analysis what is wanted analysis design implement and deploy prototype

11 Steps … requirements analysis design iteration and prototypingwhat is there and what is wanted … analysis ordering and understanding design what to do and how to decide iteration and prototyping getting it right … and finding what is really needed! implementation and deployment making it and getting it out there

12 … but how can I do it all ! !   limited time  design trade-offusability? finding problems and fixing them? deciding what to fix? a perfect system is badly designed too good  too much effort in design  

14 know your user personae cultural probesuser focus know your user personae cultural probes

15 know your user who are they? probably not like you! talk to themwatch them use your imagination

16 persona description of an ‘example’ user use as surrogate usernot necessarily a real person use as surrogate user what would Abdul Shakoor think details matter makes him ‘real’

17 example persona Abdul Shakoor is 37 years old, He has been Warehouse Manager for five years and worked for Hamdard Laboratories for twelve years. He didn’t go to university, but has studied in his evenings for BComm. He has six children aged 15 and 2 and does not like to work late. He did part of an introductory in-house computer course some years ago, but it was interrupted when he was promoted and could no longer afford to take the time. His vision is perfect, but his right-hand movement is slightly restricted following a motorcycle accident 3 years ago. He is enthusiastic about his work and is happy to delegate responsibility and take suggestions from his staff. However, he does feel threatened by the introduction of yet another new computer system (the third in his time at Hamdard).

18 cultural probes direct observation probe packs used to …sometimes hard in the home psychiatric patients, … probe packs items to prompt responses e.g. glass to listen at wall, camera, postcard given to people to open in their own environment they record what is meaningful to them used to … inform interviews, prompt ideas, enculture designers

19 stories for design use and reusescenarios stories for design use and reuse

20 scenarios stories for design linearity communicate with othersvalidate other models understand dynamics linearity time is linear - our lives are linear but don’t show alternatives

21 scenarios … what will users want to do? step-by-step walkthroughwhat can they see (sketches, screen shots) what do they do (keyboard, mouse etc.) what are they thinking? use and reuse throughout design

22 scenario – video lecturesMr. Khaliq is reading Physics at University of Karachi. He intends to view recordings of lectures in his free time, at his own learning pace. Along with listening to recordings, he is also interested in inserting extra notes, tags and bookmarks on the recordings. He further wants to share his annotations with his class fellows. Ms. Ruby is taking several distance learning courses. She is deaf. She had little trouble with the curriculum until the university upgraded their on-line courseware to a multimedia approach, using an extensive collection of audio lectures and podcasts. The University developed a system to transcribe the lectures through speech processing software and made this information available with all the audio lectures and podcasts.

23 The University had the lectures transcribed and made this information available through their Web site along with audio versions of the lectures. The tutor for the course also set up a social- net (blog, chat, etc) on the Web site where students could exchange ideas about their coursework. Although she was the only deaf student in the class, she quickly found that the Web-based social-net setup, and the opportunity to provide Web-based text comments on classmates' work, ensured that she could keep up with class progress.

24 Requirements from ScenariosTo search text transcripts for specific topics and then replay recordings. To read captions rather than listen to recorded speech to support deafness, learning at own pace, etc. To insert bookmark at a particular point in a recording. To link section of recordings to other recordings. To tag and highlight sections of recordings that they don’t fully understand. To provide web links for further references. To tag recordings using their own terms as a personal index.

25 Viewing annotations/tags of the students that are inserted on recordings, also getting the flexibility that the user can view annotations of selected users/groups. To participate in various feedback evaluations, this may later be used for assessments.

26 … explore the depths explore interaction explore cognitionwhat happens when explore cognition what are the users thinking explore architecture what is happening inside

27 use scenarios to .. communicate with others validate other modelsdesigners, clients, users validate other models ‘play’ it against other models express dynamics screenshots – appearance scenario – behaviour

28 linearity Scenarios – one linear path through system Pros: Cons: So:life and time are linear easy to understand (stories and narrative are natural) concrete (errors less likely) Cons: no choice, no branches, no special conditions miss the unintended So: use several scenarios use several methods

30 local structure – single screen global structure – whole sitestart the systems info and help management messages add user remove user navigation design local structure – single screen global structure – whole site main screen remove user confirm add user

31 levels widget choice screen design application navigation designmenus, buttons etc. screen design application navigation design environment other apps, O/S

32 the web … widget choice screen design navigation design environmentelements and tags page design site structure the web, browser, external links

33 physical devices widget choice screen design navigation designenvironment controls buttons, knobs, dials physical layout modes of device the real world

34 think about structure within a screen local global wider stilllater ... local looking from this screen out global structure of site, movement between screens wider still relationship with other applications

35 from one screen looking outlocal from one screen looking out

36 goal seeking goal start

37 goal seeking goal start progress with local knowledge only ...

38 goal seeking goal start … but can get to the goal

39 goal seeking goal start … try to avoid these bits!

40 four golden rules knowing where you are knowing what you can doknowing where you are going or what will happen knowing where you’ve been or what you’ve done

41 where you are – breadcrumbsshows path through web site hierarchy top level category sub-category web site this page live links to higher levels

42 beware the big button trapthings the thing from outer space more things other things where do they go? lots of room for extra text!

43 modes lock to prevent accidental use … if lock forgottenremove lock - ‘c’ + ‘yes’ to confirm frequent practiced action if lock forgotten in pocket ‘yes’ gets pressed goes to phone book in phone book … ‘c’ – delete entry ‘yes’ – confirm … oops !