1. Week: 09 Human-Computer Interaction
Waseem Iqbal
Assistant Professor
PhD-Scholar (Adaptive Interface for Mobile Devices in User’s Context)

2. Acknowlwdgement
Dr. Ibrar Hussain (Assistant Professor / HEC Approved Supervisor)
PhD. in Computer Science
Pervasive Computing Research Lab, Zhejiang University, China.
Carried out 6 months collaborative research work with HCI & SE group at University of Colorado, Boulder, USA.
Human Computer Interaction (Book)
3rd Edition by Alan Dix

3. stories for design use and reuse
scenarios
stories for design
use and reuse

4. Scenarios
Scenarios are stories for design: rich stories of interaction.
Communicate with others - other designers, clients or users. It is easy to misunderstand each other while discussing abstract ideas. Concrete examples of use are far easier to share.
Validate other models - A detailed scenario can be ‘played’ against various more formal representations such as task models or dialog and navigation models.

5. Scenarios
Express dynamics Individual screen shots and pictures give you a sense of what a system would look like, but not how it behaves.
Scenarios are linear – they represent a single path amongst all the potential interactions.
Time is linear Our lives are linear as we live in time and so we find it easier to understand simple linear narratives/story/description. We are natural storytellers and story listeners.

6. Scenarios
But no alternatives Real interactions have choices, some made by people, some by systems. A simple scenario does not show these alternative paths. In particular, it is easy to miss the unintended things a person may do.
what will users want to do?
step-by-step walkthrough
what can they see (sketches, screen shots)
what do they do (keyboard, mouse etc.)
what are they thinking?

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

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

10. local structure – single screen global structure – whole site
start
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

11. Levels widget choice menus, buttons etc. screen design
application navigation design
environment
other apps, O/S

12. The web … widget choice screen design navigation design environment
elements and tags
<a href=“...”>
page design
site structure
the web, browser, external links

13. Physical devices widget choice screen design navigation design
environment
controls
buttons, knobs/handles, dials
physical layout
modes of device
the real world

14. Think about structure local looking from this screen out global
structure of site, movement between screens
wider still
relationship with other applications

15. from one screen looking out
local
from one screen looking out

16. goal seeking
goal
start

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

18. goal seeking
goal
start
… but can get to the goal

19. goal seeking
goal
start
… try to avoid these bits!

20. four golden rules knowing where you are knowing what you can do
knowing where you are going
or what will happen
knowing where you’ve been
or what you’ve done

21. where you are – breadcrumbs
shows path through web site hierarchy
top level category
sub-category
web site
this page
live links
to higher
levels

22. Beware the big button trap
things
the thing from
outer space
more things
other things
where do they go?
lots of room for extra text!

23. modes lock to prevent accidental use …
remove 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 !

24. between screens within the application
global
between screens
within the application

25. hierarchical diagrams
the system
info and help
management
messages
add user
remove user