likooli logo

PANTONE 1807 PANTONE Black

ess

Design Approaches, Methods and Guidelines

Ilja morgun

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

Four Approaches to Interaction Design

User-Centered Design Activity-Centered Design System-Centered Design Genius Design

Approach
User-centered design

Overview
Focus on user needs and goals

Users
The guides of design

Designer
Translator of user needs and goals

Focus on the tasks and Activity-centered design activities that need to be accomplished Focus on the components of a system Skill and wisdom of designers used to make products

Performers of the activities

Creates tools for actions

Systems design

Set the goals of the system

Makes sure all the parts of the system in place

Genius design

Source of validation

The source of inspiration

Some Common Assertions

These approaches can be used in many
different situations to create distinct products and services

Most problematic situations can be improved The best designers are those who can move
between approaches, applying the best approach to the problem at hand

by deploying at least one of these approaches

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

Developing Personas

Persona
An artifact that consists of a narrative

relating to a desired users or customer's daily behavior patterns using specic details, not generalities

Writing Scenarios

Scenarios

A narrative describing foreseeable interactions of types of users (characters) and the system Include information about goals, expectations, motivations, actions and reactions Attempts to reect on or portray the way in which a system is used in the context of daily activity

Example
Its Friday afternoon and Joe is ying to Sydney. He doesnt have enough money for a taxi to the airport and hes running late. He goes to a local ATM and identies himself. He species that he wants $100 from his savings account. 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 doesnt bother keeping track of transactions in this account.

Writing User Stories

User Stories
One or more sentences in the everyday or
business language of the end user that captures what the user wants to achieve a small paper note/card to ensure that it does not grow too large requirements

Each user story is limited, and should t on A quick way of handling customer

Examples
"As a <role>, I want <goal/desire> so that
<benet>"

As a user, I want to search for my

customers by their rst and last names.

Putting It All Together

Conducting Card Sorting

Card Sorting
A group of users are guided to generate a
category tree

The concepts are rst identied and

navigation structure

written onto simple index cards or Post-it notes

Is commonly undertaken when designing a

Selecting Interaction Metaphors

Interaction Metaphor
A set of user interface visuals, actions and Gives the user instantaneous knowledge
about how to interact with the user interface but also have their own properties procedures that exploit specic knowledge that users already have of other domains

Designed to be similar to physical entities

Examples of Interaction Metaphors

The desktop metaphor Web portals Newsstand

Involving Stakeholders

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Reports

Users

Users

Users

Users

Texts UML Flowcharts State transition diagrams Decomposition diagrams

Developers

Developers

Developers

Developers

Actors
Illustrators Illustrators Illustrators Illustrators

Graphical illustrations

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

UML Flowcharts State transition diagrams Decomposition diagrams

Stages

Research Iteration Stage

Design Iteration Stage

Development Iteration Stage

Production Stage

Activities

Data collection Building concepts Testing Making changes

Sketching Writing code Creating mockups Prototyping Testing Testing Making changes Making changes

Promoting Positioning Marketing

Stakeholders

Stakeholders

Stakeholders

Stakeholders

Reports

Users

Users

Users

Users

Texts UML Flowcharts State transition diagrams Decomposition diagrams

Developers

Developers

Developers

Developers

Actors
Illustrators Illustrators Illustrators Illustrators

Graphical illustrations

Interaction Designers

Interaction Designers

Interaction Designers

Interaction Designers

UML Flowcharts State transition diagrams Decomposition diagrams

Stages

Research Iteration Stage

Design Iteration Stage

Development Iteration Stage

Production Stage

Activities

Data collection Building concepts Testing Making changes

Sketching Writing code Creating mockups Prototyping Testing Testing Making changes Making changes

Promoting Positioning Marketing

Design Guidelines

Human Interface Guidelines

Software development documents which
offer application developers a set of recommendations

Focus on making application interfaces Dene a common look and feel for
applications

more intuitive, learnable, and consistent

iOS Human Interface Guidelines

http://developer.apple.com/ library/ios/#documentation/ userexperience/conceptual/ mobilehig/

Android Human Interface Guidelines

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

User Experience Design Guidelines for Windows Phone

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

Other Guidelines

MeeGo Designing Your Application Guide

http://developer.meego.com/ guides/designing-yourapplication

Symbian Design Guidelines

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

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.