Scribd
Upload
21 views

Interaction Design Basics HCI in The Software Development Process

.

Uploaded by

Boss Muda
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
21 views

Interaction Design Basics HCI in The Software Development Process

.

Uploaded by

Boss Muda
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 30

Interaction Design Basics

&
Human and Computer Interaction in the
Software Development Process
interaction design basics

• design:
– what 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!
interactions and interventions

design 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
what is design?
what is design?

achieving goals within constraints

• goals - purpose
– who is it for, why do they want it
• constraints
– materials, platforms
• trade-offs
golden rule of design

understand your materials


for Human–Computer Interaction

understand your materials

• understand computers
– limitations, capacities, tools, platforms
• understand people
– psychological, social aspects
– human error
• and their interaction …
Central message …

the user
The process of design

scenarios
what is task analysis
wanted guidelines
principles
interviews analysis precise
ethnography specification
design
what is there
vs. dialogue implement
what is wanted notations and deploy
evaluation
prototype
heuristics architectures
documentation
help
Steps …

• requirements
– what 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
user focus

know your user


personae
cultural probes
know your user

• who are they?


• probably not like you!
• talk to them
• watch them
• use your imagination
scenarios

stories for design


use and reuse
scenarios …

• 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?

• use and reuse throughout design


use scenarios to ..

• communicate with others


– designers, clients, users

• validate other models


– ‘play’ it against other models

• express dynamics
– screenshots – appearance
– scenario – behaviour
the systems

info and help management messages


start

navigation design
add user remove user

local structure – single screen


global structure – whole site
main remove
confirm
screen user

add user
levels

• widget choice
– menus, buttons etc.
• screen design
• application navigation design
• environment
– other apps, O/S
the web …

• widget choice • elements and tags


– <a href=“...”>

• screen design • page design


• navigation design • site structure
• environment • the web, browser,
external links
physical devices

• widget choice • controls


– buttons, knobs, dials

• screen design • physical layout


• navigation design • modes of device
• environment • the real world
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
Global structure

structure of site, movement


between screens within the
application
hierarchical diagrams

the system

info and help management messages

add user remove user


hierarchical diagrams ctd.

• parts of application
– screens or groups of screens

• typically functional separation


the systems

info and help management messages

add user remove user


network diagrams

main remove
confirm
screen user

add user

• show different paths through system


network diagrams ctd.

• what leads to what


• what happens when
• including branches
• more task oriented then hierarchy

main remove
confirm
screen user

add user
Thank You!

You might also like