Scribd
Upload
12 views29 pages

Interactive Design Basics

Uploaded by

j
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views29 pages

Interactive Design Basics

Uploaded by

j
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

Department of Computer Science and Engineering

INTERACTIVE DESIGN BASICS

11/29/2024 Interactive design basics 1


Interactive Design Basics.
Design.
The Process of Design.
User Focus.
Scenarios.
Navigation Design.

11/29/2024 Interactive design basics 2


Introduction on Interactive Design
Design interactions not just interfaces

e.g. Stapler in class room


Before: write, print, staple, write, print,

staple..
After: write, print, write, print, …,

staple

11/29/2024 Interactive design basics 3


What is Design?
Achieving goals within constraints.

 Goals
-who is it for, why do they want it
 Constraints
-materials, platforms
 Trade-off

11/29/2024 Interactive design basics 4


The Golden Rule of Design.
understand your materials

Understand computers
 limitations, capacities, tools, platforms
Understand people
 psychological, social aspects
 human error
and their interaction …

11/29/2024 Interactive design basics 5


The Golden Rule of Design.

11/29/2024 Interactive design basics 6


To Err is Human
Accident reports ..
aircrash, 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 userInteractive


11/29/2024 at least designas well as physical materials!
basics 7
Central message …the user

11/29/2024 Interactive design basics 8


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

11/29/2024 Interactive design basics 9


What is wanted?

Interviewing the people


Requirements
what is there and
what is wanted …
Analysis
ordering and
understanding
Design
what to do and how
to decide

11/29/2024 Interactive design basics 10


Iteration and prototyping

11/29/2024 Interactive design basics 11


Implementation & Deploy
but how can I do it all !
Limited time  design trade-off

usability?
 finding problems and fixing them?
 deciding what to fix?

a perfect system is badly designed


 too good  too much effort in design

11/29/2024 Interactive design basics 12


User Focus
Who are they?
Probably not like you!
Talk to them.
Watch them.
Use your imagination.

11/29/2024 Interactive design basics 13


Scenarios
Communicate with others.
Validate other models.
Express dynamics.
Time is linear.
But no alternatives.

11/29/2024 Interactive design basics 14


Navigation Design
• Local structure
– single screen
• Global structure
– whole site

11/29/2024 Interactive design basics 15


Navigation Design
Widgets.
Screens or windows.
Navigation within the application.
Environment

Who is going to use the application?


How do they think about it?
What will they do with it?

11/29/2024 Interactive design basics 16


Local structure

goal seeking

goal
start

11/29/2024 Interactive design basics 17


goal seeking

goal
start

progress with local knowledge only ...

11/29/2024 Interactive design basics 18


Goal seeking

goal
start

… but can get to the goal

11/29/2024 Interactive design basics 19


Goal seeking

goal
start

… try to avoid these bits!

11/29/2024 Interactive design basics 20


Local Structure
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

11/29/2024 Interactive design basics 21


Knowing where you are?

shows path through web site hierarchy

top level category sub-category


web site this page

live links
to higher
levels
11/29/2024 Interactive design basics 22
Knowing where you are going

things other things

the thing from


more things
outer space

11/29/2024 Interactive design basics 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 !

11/29/2024 Interactive design basics 24


Global
 Between screens within the application
hierarchical diagrams
the system

info and help management messages

add user remove user

11/29/2024 Interactive design basics 25


Network diagrams
what leads to what
what happens when
including branches
main remove
confirm
screen user
more task oriented
then hierarchy
add user

11/29/2024 Interactive design basics 26


wider still
style issues
platform standards, consistency
functional issues
cut and paste
navigation issues
embedded applications
links to other apps … the web

11/29/2024 Interactive design basics 27


Possible questions….
 What is interactive design? (2 mark)
 What is golden rule of principal?(2 mark)
 What are the issues in interactive design?
 What are the user focus on interactive
design?
 Explain navigation issues?

11/29/2024 Interactive design basics 28


k yo u
Than

11/29/2024 Interactive design basics 29

You might also like