Week: 09 Human-Computer Interaction Waseem Iqbal Assistant Professor PhD-Scholar (Adaptive Interface for Mobile Devices in User’s Context)
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
stories for design use and reuse scenarios stories for design use and reuse
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.
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.
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?
… explore the depths explore interaction what happens when explore cognition what are the users thinking explore architecture what is happening inside
use scenarios to .. communicate with others designers, clients, users validate other models ‘play’ it against other models express dynamics screenshots – appearance scenario – behaviour
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
Levels widget choice menus, buttons etc. screen design application navigation design environment other apps, O/S
The web … widget choice screen design navigation design environment elements and tags <a href=“...”> page design site structure the web, browser, external links
Physical devices widget choice screen design navigation design environment controls buttons, knobs/handles, dials physical layout modes of device the real world
Think about structure local looking from this screen out global structure of site, movement between screens wider still relationship with other applications
from one screen looking out local from one screen looking out
goal seeking goal start
goal seeking goal start progress with local knowledge only ...
goal seeking goal start … but can get to the goal
goal seeking goal start … try to avoid these bits!
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
where you are – breadcrumbs shows path through web site hierarchy top level category sub-category web site this page live links to higher levels
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!
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 !
between screens within the application global between screens within the application
hierarchical diagrams the system info and help management messages add user remove user