3 Itl2011 Design Methods and Tools

8/3/2019 3 Itl2011 Design Methods and Tools

1/46


2/46

Design Approaches,

Methods and GuidelinesIlja morgun

http://creativecommons.org/licenses/by-nc-sa/3.0/
http://creativecommons.org/licenses/by-nc-sa/3.0/http://creativecommons.org/licenses/by-nc-sa/3.0/


3/46

Four Approaches to

Interaction Design

User-Centered Design

Activity-Centered Design System-Centered Design

Genius Design


4/46

Approach Overview Users Designer

User-centered designFocus on user needs

and goalsThe guides of design

Translator of userneeds and goals

Activity-centered designFocus on the tasks andactivities that need to

be accomplished

Performers of theactivities

Creates tools foractions

Systems designFocus on the

components of asystem

Set the goals of thesystem

Makes sure all the partsof the system in place

Genius designSkill and wisdom of

designers used to makeproducts

Source of validationThe source of

inspiration


5/46

Some Common

Assertions These approaches can be used in many

different situations to create distinct

products and services

Most problematic situations can be improvedby deploying at least one of these approaches

The best designers are those who can movebetween approaches, applying the bestapproach to the problem at hand


6/46

User-Centered Design

Users know best

Designers are not the users Focus on what the user ultimately wants to

accomplish

Involve users in every stage of the project


7/46

Developing Personas


8/46

Persona

An artifact that consists of a narrativerelating to a desired users or customer'sdaily behavior patterns using specific

details, not generalities


9/46


10/46


11/46

Writing Scenarios


12/46

Scenarios

A narrative describing foreseeableinteractions of types of users (characters) and

the system

Include information about goals, expectations,motivations, actions and reactions

Attempts to reflect on or portray the way inwhich a system is used in the context of dailyactivity


13/46

Example

Its Friday afternoon and Joe is flying to Sydney. Hedoesnt have enough money for a taxi to the airportand hes running late.

He goes to a local ATM and identifies himself.

He specifies that he wants $100 from his savingsaccount. Hed like the money in $20 notes so that

he can the taxi driver the correct change.

He doesnt want a printed receipt, as he doesntbother keeping track of transactions in this account.


14/46

Writing User Stories


15/46

User Stories

One or more sentences in the everyday orbusiness language of the end user that

captures what the user wants to achieve

Each user story is limited, and should fit ona small paper note/card to ensure that itdoes not grow too large

A quick way of handling customerrequirements
http://en.wikipedia.org/wiki/End-user_(computer_science)#End_userhttp://en.wikipedia.org/wiki/End-user_(computer_science)#End_user


16/46

Examples

"As a , I want so that" As a user, I want to search for my

customers by their first and last names.


17/46

Putting It All Together


18/46


19/46


20/46

Conducting CardSorting


21/46

Card Sorting

A group of users are guided to generate acategory tree

The concepts are first identified andwritten onto simple index cards or Post-itnotes

Is commonly undertaken when designing anavigation structure
http://en.wikipedia.org/wiki/Post-it_notehttp://en.wikipedia.org/wiki/Post-it_notehttp://en.wikipedia.org/wiki/Post-it_notehttp://en.wikipedia.org/wiki/Post-it_notehttp://en.wikipedia.org/wiki/Post-it_notehttp://en.wikipedia.org/wiki/Index_cardhttp://en.wikipedia.org/wiki/Index_card


22/46


23/46

Selecting InteractionMetaphors


24/46

Interaction Metaphor

A set of user interface visuals, actions andprocedures that exploit specific knowledge

that users already have of other domains Gives the user instantaneous knowledge

about how to interact with the userinterface

Designed to be similar to physical entitiesbut also have their own properties
http://en.wikipedia.org/wiki/User_interfacehttp://en.wikipedia.org/wiki/User_interface


25/46

Examples of Interaction

Meta hors

The desktop metaphor Web portals

Newsstand


26/46


27/46


28/46


29/46


30/46

Involving Stakeholders


31/46

Developers

Illustrators

Stakeholders

Users

Interaction

Designers

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Research

Iteration Stage

Production

Stage

Design

Iteration Stage

Development

Iteration Stage

Data collection Sketching

Creating mockups

Prototyping

Writing code Promoting

Positioning

Marketing

Testing

Making changes

Testing

Making changes

Testing

Making changes

Building concepts

Actors

Stages

Activities

UMLFlowchartsState transition diagramsDecomposition diagrams

Graphical illustrations


Texts

Reports


32/46

Developers

Illustrators

Stakeholders

Users

Interaction

Designers

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Stakeholders

Users

Developers

Illustrators

Interaction

Designers

Research

Iteration Stage

Production

Stage

Design

Iteration Stage

Development

Iteration Stage

Data collection Sketching

Creating mockups

Prototyping

Writing code Promoting

Positioning

Marketing

Testing

Making changes

Testing

Making changes

Testing

Making changes

Building concepts

Actors

Stages

Activities


Graphical illustrations


Texts

ReportsStakeholders

Stakeholders

Stakeholders

Stakeholders


33/46

Design Guidelines


34/46

Human Interface

Guidelines Software development documents which

offer application developers a set of

recommendations

Focus on making application interfacesmore intuitive, learnable, and consistent

Define a common look and feel forapplications
http://en.wikipedia.org/wiki/Look_and_feelhttp://en.wikipedia.org/wiki/Look_and_feelhttp://en.wikipedia.org/wiki/Software_developmenthttp://en.wikipedia.org/wiki/Software_development


35/46

iOS Human InterfaceGuidelines


36/46

http://developer.apple.com/

library/ios/#documentation/userexperience/conceptual/mobilehig/


37/46

Android HumanInterface Guidelines


38/46

http://

developer.android.com/guide/practices/ui_guidelines/
http://developer.android.com/guide/practices/ui_guidelines/http://developer.android.com/guide/practices/ui_guidelines/http://developer.android.com/guide/practices/ui_guidelines/http://developer.android.com/guide/practices/ui_guidelines/http://developer.android.com/guide/practices/ui_guidelines/http://developer.android.com/guide/practices/ui_guidelines/


39/46

User Experience

Design Guidelines forWindows Phone


40/46

http://msdn.microsoft.com/

en-us/library/hh202915(v=VS.92).aspx
http://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspxhttp://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspxhttp://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspxhttp://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspxhttp://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspxhttp://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspxhttp://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx


41/46

Other Guidelines


42/46

MeeGo Designing YourApplication Guide


43/46

http://developer.meego.com/

guides/designing-your-application
http://developer.meego.com/guides/designing-your-applicationhttp://developer.meego.com/guides/designing-your-applicationhttp://developer.meego.com/guides/designing-your-applicationhttp://developer.meego.com/guides/designing-your-applicationhttp://developer.meego.com/guides/designing-your-applicationhttp://developer.meego.com/guides/designing-your-application


44/46

Symbian DesignGuidelines


45/46

http://

www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/
http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/


46/46

References

http://www.odannyboy.com/portfolio/thesis/saffer_thesis_paper.pdf

http://en.wikipedia.org/wiki/Card_sorting http://en.wikipedia.org/wiki/User_story http://en.wikipedia.org/wiki/Scenario_(computing)

Saffer, D. (2010). Designing for Interaction.Creating Innovative Applications and Devices(2nd ed.). New Riders.
http://en.wikipedia.org/wiki/Scenario_(computinghttp://en.wikipedia.org/wiki/User_storyhttp://en.wikipedia.org/wiki/Card_sortinghttp://en.wikipedia.org/wiki/Card_sortinghttp://en.wikipedia.org/wiki/Scenario_(computinghttp://en.wikipedia.org/wiki/Scenario_(computinghttp://en.wikipedia.org/wiki/User_storyhttp://en.wikipedia.org/wiki/User_storyhttp://en.wikipedia.org/wiki/Card_sortinghttp://en.wikipedia.org/wiki/Card_sortinghttp://www.odannyboy.com/portfolio/thesis/saffer_thesis_paper.pdfhttp://www.odannyboy.com/portfolio/thesis/saffer_thesis_paper.pdfhttp://www.odannyboy.com/portfolio/thesis/saffer_thesis_paper.pdfhttp://www.odannyboy.com/portfolio/thesis/saffer_thesis_paper.pdf

Documents

3 Itl2011 Design Methods and Tools