design process interaction design basics
Post on 17-Aug-2015
104 Views
Preview:
TRANSCRIPT
Design Interaction Design Basics
Preeti Mishra
Course Instructor
Introduction
Interaction design is about creating interventions in often complex situations using technology of many kinds including PC software the web and physical devices
Introduction
Design involves achieving goals within constraints and trade-off
between these understanding the raw materials computer and human accepting limitations of humans and of design
The design process has several stages and is iterative and never complete
Introduction
Interaction starts with getting to know the users and their context finding out who they are and what they are like
talking to them watching them Scenarios are rich design stories which can be used
and reused throughout design they help us see what users will want to do( Persona )
they give a step-by-step walkthrough of userrsquos interactions including what they see do and are thinking
Interaction Design Basic Terms
Basic Terms Design
ndash Interaction interventions goals constraints bull the design process
ndash what happens when bullusers
ndash who they are what they are like bull scenarios
ndash rich stories of design bull navigation
ndash finding your way around a system bull iteration and prototypes
ndash never get it right first time
Basic Terms
Goals Purpose of design that in intended to be produced
Constraints What materials some standards cost time limitations
Trade-off Choosing which goals constraints can be relaxed or
can be given more importance
Design Definition
what is design achieving goals within constraints
We already know what are Goals Constraints Trade-off
Golden rule of design
understand your materials
Understand Your Materials
bull understand computers ndash limitations capacities tools platforms
bull understand people ndash psychological social aspects
ndash human error bull and their interaction
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Introduction
Interaction design is about creating interventions in often complex situations using technology of many kinds including PC software the web and physical devices
Introduction
Design involves achieving goals within constraints and trade-off
between these understanding the raw materials computer and human accepting limitations of humans and of design
The design process has several stages and is iterative and never complete
Introduction
Interaction starts with getting to know the users and their context finding out who they are and what they are like
talking to them watching them Scenarios are rich design stories which can be used
and reused throughout design they help us see what users will want to do( Persona )
they give a step-by-step walkthrough of userrsquos interactions including what they see do and are thinking
Interaction Design Basic Terms
Basic Terms Design
ndash Interaction interventions goals constraints bull the design process
ndash what happens when bullusers
ndash who they are what they are like bull scenarios
ndash rich stories of design bull navigation
ndash finding your way around a system bull iteration and prototypes
ndash never get it right first time
Basic Terms
Goals Purpose of design that in intended to be produced
Constraints What materials some standards cost time limitations
Trade-off Choosing which goals constraints can be relaxed or
can be given more importance
Design Definition
what is design achieving goals within constraints
We already know what are Goals Constraints Trade-off
Golden rule of design
understand your materials
Understand Your Materials
bull understand computers ndash limitations capacities tools platforms
bull understand people ndash psychological social aspects
ndash human error bull and their interaction
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Introduction
Design involves achieving goals within constraints and trade-off
between these understanding the raw materials computer and human accepting limitations of humans and of design
The design process has several stages and is iterative and never complete
Introduction
Interaction starts with getting to know the users and their context finding out who they are and what they are like
talking to them watching them Scenarios are rich design stories which can be used
and reused throughout design they help us see what users will want to do( Persona )
they give a step-by-step walkthrough of userrsquos interactions including what they see do and are thinking
Interaction Design Basic Terms
Basic Terms Design
ndash Interaction interventions goals constraints bull the design process
ndash what happens when bullusers
ndash who they are what they are like bull scenarios
ndash rich stories of design bull navigation
ndash finding your way around a system bull iteration and prototypes
ndash never get it right first time
Basic Terms
Goals Purpose of design that in intended to be produced
Constraints What materials some standards cost time limitations
Trade-off Choosing which goals constraints can be relaxed or
can be given more importance
Design Definition
what is design achieving goals within constraints
We already know what are Goals Constraints Trade-off
Golden rule of design
understand your materials
Understand Your Materials
bull understand computers ndash limitations capacities tools platforms
bull understand people ndash psychological social aspects
ndash human error bull and their interaction
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Introduction
Interaction starts with getting to know the users and their context finding out who they are and what they are like
talking to them watching them Scenarios are rich design stories which can be used
and reused throughout design they help us see what users will want to do( Persona )
they give a step-by-step walkthrough of userrsquos interactions including what they see do and are thinking
Interaction Design Basic Terms
Basic Terms Design
ndash Interaction interventions goals constraints bull the design process
ndash what happens when bullusers
ndash who they are what they are like bull scenarios
ndash rich stories of design bull navigation
ndash finding your way around a system bull iteration and prototypes
ndash never get it right first time
Basic Terms
Goals Purpose of design that in intended to be produced
Constraints What materials some standards cost time limitations
Trade-off Choosing which goals constraints can be relaxed or
can be given more importance
Design Definition
what is design achieving goals within constraints
We already know what are Goals Constraints Trade-off
Golden rule of design
understand your materials
Understand Your Materials
bull understand computers ndash limitations capacities tools platforms
bull understand people ndash psychological social aspects
ndash human error bull and their interaction
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Interaction Design Basic Terms
Basic Terms Design
ndash Interaction interventions goals constraints bull the design process
ndash what happens when bullusers
ndash who they are what they are like bull scenarios
ndash rich stories of design bull navigation
ndash finding your way around a system bull iteration and prototypes
ndash never get it right first time
Basic Terms
Goals Purpose of design that in intended to be produced
Constraints What materials some standards cost time limitations
Trade-off Choosing which goals constraints can be relaxed or
can be given more importance
Design Definition
what is design achieving goals within constraints
We already know what are Goals Constraints Trade-off
Golden rule of design
understand your materials
Understand Your Materials
bull understand computers ndash limitations capacities tools platforms
bull understand people ndash psychological social aspects
ndash human error bull and their interaction
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Basic Terms Design
ndash Interaction interventions goals constraints bull the design process
ndash what happens when bullusers
ndash who they are what they are like bull scenarios
ndash rich stories of design bull navigation
ndash finding your way around a system bull iteration and prototypes
ndash never get it right first time
Basic Terms
Goals Purpose of design that in intended to be produced
Constraints What materials some standards cost time limitations
Trade-off Choosing which goals constraints can be relaxed or
can be given more importance
Design Definition
what is design achieving goals within constraints
We already know what are Goals Constraints Trade-off
Golden rule of design
understand your materials
Understand Your Materials
bull understand computers ndash limitations capacities tools platforms
bull understand people ndash psychological social aspects
ndash human error bull and their interaction
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Basic Terms
Goals Purpose of design that in intended to be produced
Constraints What materials some standards cost time limitations
Trade-off Choosing which goals constraints can be relaxed or
can be given more importance
Design Definition
what is design achieving goals within constraints
We already know what are Goals Constraints Trade-off
Golden rule of design
understand your materials
Understand Your Materials
bull understand computers ndash limitations capacities tools platforms
bull understand people ndash psychological social aspects
ndash human error bull and their interaction
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Design Definition
what is design achieving goals within constraints
We already know what are Goals Constraints Trade-off
Golden rule of design
understand your materials
Understand Your Materials
bull understand computers ndash limitations capacities tools platforms
bull understand people ndash psychological social aspects
ndash human error bull and their interaction
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Golden rule of design
understand your materials
Understand Your Materials
bull understand computers ndash limitations capacities tools platforms
bull understand people ndash psychological social aspects
ndash human error bull and their interaction
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Understand Your Materials
bull understand computers ndash limitations capacities tools platforms
bull understand people ndash psychological social aspects
ndash human error bull and their interaction
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Human Errors
accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo
human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Steps
bull requirements ndash what is there and what is wanted
bullanalysis ndash ordering and understanding
bulldesign ndash what to do and how to decide
bull iteration and prototyping ndash getting it right and finding what is really needed
bull implementation and deployment ndash making it and getting it out there
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Four basic activities
There are four basic activities in Interaction Design
1 Identifying needs and establishing requirements
2 Developing alternative designs
3 Building interactive versions of the designs
4 Evaluating designs
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
A simple interaction design model
Evaluate
(Re)Design
Identify needs establish
requirements
Build an interactive version
Final product
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Some practical issues
bull Who are the users
bull What are lsquoneedsrsquo
bull Where do alternatives come from
bull How do you choose among alternatives
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Who are the users
bullNot as obvious as you think
mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products
bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its
purchase
Wider term stakeholders
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Who are the users (contrsquod)
bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and
positioning of input buttons mdashmotor abilities may affect the suitability of
certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength
to operate but greater strength to change batteries
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Who are the stakeholdersCheck-out operators
CustomersManagers and owners
bull Suppliersbull Local shop owners
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
What are lsquoneedsrsquo
bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is
bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Where do alternatives come from
bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at
very different products
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Idea Generation
Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
How do you choose among alternatives
bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous
mdasheffectiveness appropriate support task coverage information available
mdashefficiency performance measurements
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Design Approaches
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Few Types of Interaction Designs
User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
User Centered Design
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
User Centered Design
Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Why User Centered Design
Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse
1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Normanrsquos Philosophy
Norman (1988) advocated user-centred design as a
philosophy of putting users and usability ahead of aesthetics He proposed following seven principles
1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Know your Stakeholders
Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document
and documents like it What functions do the users need from the document What information might the users need and in what form
do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as
touching spoken gestures or orientation
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Elements of User Centered Design
Visibility Visibility helps the user construct a mental model of the
document Models help the user predict the effect(s) of their actions while
using the document Important elements (such as those that aid navigation) should be
emphatic Users should be able to tell from a glance what they can and
cannot do with the document
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Options for text font are clearly visible along with other alternatives
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Elements of User Centered Design
Accessibility Users should be able to find information quickly and easily
throughout the document regardless of its length Users should be offered various ways to find information (such as
navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)
Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy
The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Options chunked over logical groups
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Elements of User Centered Design
Legibility Text should be easy to read
Through analysis of the rhetorical situation the designer should be able to determine a useful font style
Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly
Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Legibility
Choose a common font with recognizable letterforms for large bodies of text
Use a font size of at least 10-14 points
Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display
Choose text and background colours with a high luminance contrast
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
To do
Find difference between legibility and readability Read the paper
httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Elements of User Centered Design
Language Depending on the rhetorical situation certain types of language
are needed Short sentences are helpful as are well-written texts used in
explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should
not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Usability
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Introduction
Usability is the ease of use and learnability of a human-made object
The object of use can be a software application website book tool machine process or anything a human interacts with
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Who does the job
A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others
It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Usability Includes
Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived
efficiency or elegance In human-computer interaction and computer science
usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed
Usability differs from user satisfaction and user experience because usability also considers usefulness
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Definition
The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use
The word usability also refers to methods for improving ease-of-use during the design process
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
To do
Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness
efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo
Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Scenario Based Design
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Scenario
what will users want to do step-by-step walkthrough
ndash what can they see (sketches screen shots)
ndash what do they do (keyboard mouse etc)
ndash what are they thinking use and reuse throughout design
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Scenarios are
stories for design communicate with others validate other models understand dynamics
linearity time is linear - our lives are linear but donrsquot show alternatives
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Use Scenario to
communicate with others designers clients users
validate other models lsquoplayrsquo it against other models
express dynamics screenshots ndash appearance scenario ndash behaviour
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Explore the Depths
explore interaction what happens when
explore cognition what are the users thinking
explore architecture what is happening inside
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Linearity
Scenarios ndash one linear path through system Pros
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
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Example of Scenario
Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday
returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Participatory Design
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Introduction
Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities
The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
How to proceed
Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and
encourages them to ldquoownrdquo the products
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Measuring Participation
four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being
designed 4 Degree of control over the design decisions
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Navigation Design
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Basics
Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
where you are ndash breadcrumbs
shows path through web site hierarchy
web site
top level category sub-categorythis page
live linksto higher
levels
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Levels of Structure
Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real
world
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Example
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Screen design and layout
basic principles
grouping structure order
alignment
use of white space
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
basic principles
ask what is the user doing
think what information comparisons order
design form follows function
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
available tools
grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
grouping and structure
logically together physically together
Billing details Name Address hellip Credit card no
Delivery details Name Address hellip Delivery time
Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
order of groups and items
think - what is natural order
should match screen order use boxes space etc set up tabbing right
instructions beware the cake recipie syndrome
hellip mix milk and flour add the fruit after beating them
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
decoration
use boxes to group logical items use fonts for emphasis headings but not too many
ABCDEFGHIJKLMNOPQRSTUVWXYZ
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
alignment - text
you read from left to right (English and
European)
align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess
Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography
Wizard of OzXena - Warrior Princess
fine for special effects but hard to scan
boring butreadable
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
alignment - names
Usually scanning for surnames make it easy
Alan DixJanet FinlayGregory AbowdRussell Beale
Alan DixJanet FinlayGregory AbowdRussell Beale
Dix AlanFinlay JanetAbowd GregoryBeale Russell
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
alignment - numbers
think purpose
which is biggest
532561793
25631715
739481035
31424976256
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
alignment - numbers
visually
long number = big number
align decimal points
or right align integers
6278651005763
382583250256
43293520175
652875634
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
multiple columns
scanning across gaps hard(often hard to avoid with large data base
fields)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
multiple columns - 2
use leaders
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
multiple columns - 3
or greying (vertical too)
sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
sherbert 75toffee 120
chocolate 35fruit gums 27
coconut dreams 85
multiple columns - 4
or even (with care) lsquobadrsquo alignment
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
space to separate
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
space to structure
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
space to highlight
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Examplephysical controls
grouping of items defrost settings
type of food
time to cooktype of food
time to cook
defrost settings
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
physical controls
grouping of items
order of items
decoration
alignment centered text in buttons
easy to scan easy to scan
centred text in buttons
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
physical controls
grouping of items
order of items
decoration
alignment
white space gaps to aid grouping
gaps to aid grouping
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
aesthetics and utility (you already know this)
aesthetically pleasing designs increase user satisfaction and improve productivity
beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text
hellip good to look at but hard to read
but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
colour and 3D(you already know this)
both often used very badly colour
older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information
3D effects good for physical information and some graphs but if over used hellip
eg text in perspective 3D pie charts
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
bad use of colour (you already know this)
over use - without very good reason (eg kidsrsquo site)
colour blindness poor use of contrast do adjust your set
adjust your monitor to greys only can you still read your screen
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
across countries and cultures
localisation amp internationalisation changing interfaces for particular cultureslanguages
globalisation try to choose symbols etc that work everywhere
simply change language use lsquoresourcersquo database instead of literal text
hellip but changes sizes left-right order etc deeper issues
cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures
hellip but hellip mean the same thing (mark this) in others
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Iteration and prototyping
getting better hellip
hellip and starting well
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
prototyping
you never get it right first time if at first you donrsquot succeed hellip
prototype evaluatedesign
re-design
doneOK
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
pitfalls of prototyping
moving little by little hellip but to where
1 need a good start point
2 need to understand what is wrong
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
End of Unit-3Design Process Interaction Design Basics
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
Mapping to Course Outcome
This unit worked towards partial achievement of Course Outcome 3
- Design Interaction Design Basics
- Introduction
- Introduction (2)
- Introduction (3)
- Interaction Design Basic Terms
- Basic Terms
- Basic Terms (2)
- Design Definition
- Golden rule of design
- Understand Your Materials
- Human Errors
- Slide 12
- Steps
- Four basic activities
- A simple interaction design model
- Some practical issues
- Who are the users
- Who are the users (contrsquod)
- Who are the stakeholders
- What are lsquoneedsrsquo
- Where do alternatives come from
- Idea Generation
- How do you choose among alternatives
- Design Approaches
- Few Types of Interaction Designs
- User Centered Design
- User Centered Design (2)
- Why User Centered Design
- Normanrsquos Philosophy
- Know your Stakeholders
- Elements of User Centered Design
- Slide 32
- Elements of User Centered Design (2)
- Slide 34
- Elements of User Centered Design (3)
- Legibility
- To do
- Elements of User Centered Design (4)
- Slide 39
- Usability
- Introduction (4)
- Who does the job
- Usability Includes
- Definition
- To do (2)
- Scenario Based Design
- Scenario
- Scenarios are
- Use Scenario to
- Explore the Depths
- Linearity
- Example of Scenario
- Participatory Design
- Introduction (5)
- How to proceed
- Measuring Participation
- Navigation Design
- Basics
- where you are ndash breadcrumbs
- Levels of Structure
- Example
- Screen design and layout
- basic principles
- available tools
- grouping and structure
- order of groups and items
- decoration
- alignment - text
- alignment - names
- alignment - numbers
- alignment - numbers (2)
- multiple columns
- multiple columns - 2
- multiple columns - 3
- multiple columns - 4
- space to separate
- space to structure
- space to highlight
- Example physical controls
- physical controls
- physical controls (2)
- aesthetics and utility (you already know this)
- colour and 3D (you already know this)
- bad use of colour (you already know this)
- across countries and cultures
- Iteration and prototyping
- prototyping
- pitfalls of prototyping
- End of Unit-3 Design Process Interaction Design Basics
- Mapping to Course Outcome
-
top related