1.introduction to interaction design

INTERACTION DESIGNOverview, Methods and Practices

INTERACTION DESIGN - OVERVIEW

Why is the feel of Mac OSX and Windows system different when they both do the same thing

It is because of the behavior of the system

Interestingly, it is hard to observe and understand, however it potentially changes the whole experience

How do you delete a single mail in both email interfaces?

Some real life situations

Typing a mail for 15 minutes, computer suddenly shuts down and mail is not saved

Not able to hear your friend’s voice on the phone, not matter what you speak. Later, you realize that the phone is connected to headphones

Informally,

Interaction Design is common sense design

In formal terms,

Interaction Design facilitates interactions/communication between humans through products and services

These communications may happen in several forms such as, one to one via email, one to many via group mail, many to many via stock information

Communication may happen in several digital mediums such as web based applications, hand held & applications, radio, TV, specialized device and more

Forms and mediums may have several interaction modalities such as GUI, human senses such as speech, touch, vision, smell, gesture and many more

Facilitates interactions/communication

• Forms

• Digital mediums

• Interaction modalities

Industrial designersGraphic designers

Information architectsCopy writers

Interaction Designers

Form Content

Behavior

Interaction design is not necessarily the creation of websites or applications. It is not necessarily multimedia design or graphical user interface (GUI) design, and it does not even have to have a primary focus on advanced technology, although technology of some kind plays a significant role

Interaction Design by Bill Verplank

Interaction Design by Gillian Crampton Smith

INTERACTION DESIGNHistory and Evolution

INTERACTION DESIGN - HISTORY

Computers referred to human beings, people whose daily work for figuring of

calculations, such as for producing engineering table

Computers referred to human beings, people whose daily work for figuring of

calculations, such as for producing engineering table

Interestingly, they were not digital devices. Before digital computers came analog

computers

Patch cables and switches. calculating artillery-firing tables

Special purpose devices

Special purpose devicesDesigned as automatic calculator

Military domains

Military domainsPatches and cable

Dominant paradigm for interaction with computer was electronic

Data card and controller card – Punch card

MITS Altair, Apple II, Commodore PET, First mouse

KeyboardMouse based interactions

Hobbyist & engineers

Hobbyist & engineersDominant paradigm for interaction with

computer changes from electronic to symbolic

Command line interface, Wordstar, VisiCalc

Hobbyist & engineers

Hobbyist & engineersApplication development

Dominant paradigm for interaction with computer changes from symbolic to

textual

Graphical user interface

Graphical user interfaceWindows, menu, icons

Use of graphics and text together

Use of graphics and text togetherVisual metaphors

Use of two dimensional space

Use of two dimensional spaceComputers for everyone

Dominant paradigm for interaction with computer changes from symbolic to

graphical

Summarizing this..

Approaches to Interaction Design & Technology

Electronics Symbolic Textual Graphical

Evolution of usersInventor Engineers Experts Trained We

Evolution of usageMilitary Business Context based

ElectronicSymbolicTextual

GraphicalNow what??

image source: http://www.streettech.com/modules.php?op=modload&name=News&file=article&sid=950

Lego Mindstorm

INTERACTION DESIGN - HISTORYimage source: http://www.flickr.com/photos/71815479@N05/6489551341/sizes/l/in/photostream/

Nintendo Wii

INTERACTION DESIGN - HISTORYimage source: http://projetsabiabo.files.wordpress.com/2010/02/reactable_03.jpg

Reactable

INTERACTION DESIGN - HISTORYimage source: http://aadezyn.com/blog/wp-content/uploads/2010/02/Shiftables.jpg

Siftable

Topobo

Nabaztag

Skal: media for children

Mixed Reality by Nokia

New technology in Health Care

What is common among these examples?

New and Natural ways to interact with technology

Older ways to interact with new technology

Several ways products interact with you

Things that do not look like technology

Using technology to

create art

INTERACTION DESIGN – NEW DISCIPLINE

Emergence of new discipline

• Tangible Interaction

• Physical Computing

• Augmented Reality

• Gesture based Interaction

• Ubiquitous Computing

• Tangible InteractionInteracting with information through tangible objects with tangible and/or intangible output

• Physical ComputingUse of body or physical objects to interact with computers

• Augmented RealityReal world environment elements are augmented by computer generated sensory input

• Gesture based InteractionUse of human body & senses to interact with information

• Ubiquitous ComputingSystem of smart and networked objects

PROJECT KICK-OFF

How does typically a project starts?

Design Brief

Design brief, with a specific problem given by client

PROJECT KICK-OFF

Design Brief

Design brief, with broader framework is given by the client

PROJECT KICK-OFF

Design Brief

Design brief, with broader framework is given by the client

Technology driven, research driven and future direction driven design

PROJECT KICK-OFF

Design Brief (specific problem)

Users are complaining about a particular problem. Help us solve it- Business manager

e.g. Checkout button is not found on e-commerce platform

PROJECT KICK-OFF

Design Brief (broad framework)

Our new product is a business failure, it is not working, selling and performing- CEO

e.g. new launched PDA is not selling, new launched PDA is out of style, new launched PDA’s user interface is not appealing

PROJECT KICK-OFF

Technology, Research and Future

New technology interventions and trends showcases potential to explore new possibilities of design solution. Research can be done to design, evaluate and to identify market acceptance and success

e.g. the future of tele-communication is touch screen based, lets exploreGesture enabled platforms have proven positive in entertainment, lets explore in health and education

PROJECT KICK-OFF

Details provided in brief document

Goals: Launch a touch enabled andriod phone for farmers helping them in agriculture practices

PROJECT KICK-OFF

Contents: weather information, crops, government schemes etc.

PROJECT KICK-OFF

User survey (feedback): conducted study indicates that 90% of farmers use local services and peer information for agri related information

PROJECT KICK-OFF

Brand consideration: we want elegant user interface design. The final product must align with the series of existing products

PROJECT KICK-OFF

Technical and financial constraints: the final product needs to be a website with a specific backend software compatible

PROJECT KICK-OFF

Technical and financial constraints: the final product needs to be a website with a specific backend software compatible

Timeline, deliverable format, contact information of stakeholders, experts, user and more

PROJECT KICK-OFF

Design, Management and Technology

PROJECT KICK-OFF

Desirability Viability

Capability

PROJECT KICK-OFF

Desirability (Designers)

User modelMotivations,

behaviours, attitudes, aptitudes

Product designDesign schedule, form and behaviour specs

User effectiveness ,

customer adoptions

PROJECT KICK-OFF

Viability(Mgmt.)

customer adoptions

Business modelFunding, income,

expenses, projection etc.

Business planMarketing plan,

launch plan, distribution plan

Sustainable business

PROJECT KICK-OFF

Viability(Mgmt.)

Capability(Technologist)

customer adoptions

Technology modelCore technology & component, build &

Technology planEngineering schedule,

engineering specsProject delivery

PROJECT KICK-OFF

Viability(Mgmt.)

Capability(Technologist)

customer adoptions

Technology modelCore technology & component, build &

Technology planEngineering schedule,

engineering specsProject delivery

Overall Product Success

APPROACHES TO INTERACTION DESIGN

Four approaches to Interaction Design

User (Human) Centered Design

Activity Centered Design

Systems Design

Genius Design

Users know the best. They understand their needs, problems and desires

Objective is to focus on user needs and goals.e.g. to become educated, to purchase grocery online etc.

Users are key players guiding the design. They are involved at every stage of the design process

Designer translates the user needs and goals into design decisions

It can also be named “Goal Oriented Design Process”

Activity – a cluster of actions and decision that are done to accomplish a task e.g. make a cake in oven, switch on the light

Goal: to eat and satisfy hungerActivity: make a sandwich(Goal is a broader set while activity is more focused)

Goal: to purchase clothsDecide to by new clothsWhat kind of cloths to buyWhere to buyGet directions of cloth storeDecide the mode of transportArrive at storeEnter the storeChoose appropriate sectionChoose appropriate clothsPay the bill….

Focuses narrowly on the tasks than broader sets of goals

Problem: Sometimes actual problem and goal is missed out just focusing on activities and tasks

Goals, Tasks and Activities

Goal is an expectation of an end condition, whereas activities and tasks are intermediate steps (at different levels of organizations) that helps someone to reach a goal or set of goals

A traveler traveling from Guwahati to Delhi is likely to travel quickly, comfortably and safely.

In 1950s, traveller would travel in a closed wagon and a rifle for safe and comfortable journey

In 2010, traveller would travel through air for safe and comfortable journey with keeping his rifle at home

In both the cases, traveller’s goal is the same, but the activities and tasks associated with them are different

System Design

A set of arrange components makes a system

System Design

Sensor Comparator Actuator

Environment

Input Output

Affects

Feedback loop

Disturbances

THE SYSTEM

(System, based on the diagram by Hugh Dubberly and Paul Pangaro, 2003)

Genius Design

Decision are taken based on the wisdom and experience of the designer to make design decision

Needs to be practiced by experienced designers

Shorter timeline; fast, quick and personal way to work; reflects designer’s own sensibility

e.g. Apple i-pod

INTERACTION DESIGN PROCESS – AN OVERVIEW

Interaction Design Process – An Overview

Interaction Design Process – An OverviewGoal Directed Design Methods

Goal Directed Design Method

Researchusers, area of work

Modelingusers, use context

Requirementsdefinition of user,

business, technical needs

Frameworkdefinition of design structure and flow

Refinementof behaviours, form

and content

Supportdevelopment needs

and content

Understanding

Abstracting

Structuring

Representing

Detailing(by Gillian Crampton Smith and Philip

Tabor)

and content

Understanding

Abstracting

Structuring

Representing

Detailing(by Gillian Crampton Smith and Philip

Tabor)

Discover

Define

Design Deliver

Goal Directed Design Method - Research

Research

Activity Concerns Stakeholder collaboration

Deliverable

Scopedefine project goals and schedule

Objectives, timeline, financial constraints, process etc.

MeetingsCapabilities and scoping

Document statement of work

Research

Deliverable

AuditReview existing work and product

Business & marketing plans, brand strategy, market research, competition market, relevant technologies

Research

Deliverable

Stakeholder interviews

Product vision, limitations, constraints, understanding users, existing research, findings and loopholes

Interviews with stakeholders

Research

Deliverable

Expert interviews Understanding domain of work, users, problems, needs, technologies

Relevant contact information

Research

Deliverable

Expert interviews Understanding domain of work, users, problems, needs, technologies

Relevant contact information

User interviews and observations

Users, needs, problems, desires, behaviour, motivation, tools, environment, challenges

Check primary research findings

Research

What to do?Stakeholder interviews, literature reviews, market research, white paper, competitor research, technology overview, expert interviews, user research, ethnographic field study technique, focus groups

Outcome:Set of behavioral patterns, suggested user goals and motivations, business goals, domain understanding, limitations and challenges

Goal Directed Design Method - Modeling

Modeling

Deliverable

PersonaUser and customer archetypes

Patterns in user behaviour, goals, attitude, environment, tools, challenges

Check inpersonas

Modeling

Deliverable

Check inpersonasOther models

Represent domain factors beyond individual users and customers

Workflow among multiple people, environment, culture, artifacts

Modeling

Deliverable

Check inpersonasOther models

Represent domain factors beyond individual users and customers

Workflow among multiple people, environment, culture, artifacts

What to do?Affinity analysis, research analysis, behavior patterns

Outcome:Domain and user models, persona

Goal Directed Design Method – Requirement definition

Requirements definitions

Deliverable

ScenariosStories about ideal user experience

How product fits into user’s life, context, environment and help achieve goals

Check inScenarios and requirements

DocumentUser and domain analysis

Video/paper/other software based scenario

Deliverable

How product fits into user’s life, context, environment and help achieve goals Check in

Scenarios and requirements

RequirementsDescribe necessary features of the product

Functional and data needs, user mental models, design imperatives, product vision, technology

Deliverable

How product fits into user’s life, context, environment and help achieve goals Check in

Scenarios and requirements

RequirementsDescribe necessary features of the product

Functional and data needs, user mental models, design imperatives, product vision, technology

What to do?Analysis of persona data, functional needs (objects, actions and context), persona expectations, creating problem and vision statements, brainstorming, scenario building, business goals, technical constraints

Outcome:The “what” of design, high level touch points of the product, requirements balancing user, business and technical needs

Goal Directed Design Method – Design framework

Design framework

Deliverable

ElementsDefine manifestations of information & functionality

Information, functions, mechanisms, actions, domain object models

Check inDesign framework

Design framework

Deliverable

Check inDesign frameworkFramework

Design overall structure of user experience

Object relationships, conceptual groupings, navigation sequencing, principle and patterns, flow, sketches

Design framework

Deliverable

Check inDesign frameworkFramework

Design overall structure of user experience

Object relationships, conceptual groupings, navigation sequencing, principle and patterns, flow, sketches

Key path and validation scenario

How the design fits into an ideal sequence of user behaviours, how persona interacts with a product

Design framework

What to do?Information architecture, wireframe creation, navigational models, story boarding, prototyping

Outcome:Overall product concept, visual design framework and strategy, product design, product’s behavior, data and functional needs,

Goal Directed Design Method – Design refinement

Design refinement

Deliverable

Detailed design Appearance, idioms, interface, widgets, information visualization, brand, experiencer, language etc.

Check inDesign refinement

DocumentForm and behaviour specification

Goal Directed Design Method – Design support

Design support

Deliverable

Design modificationAccommodate new constraints and timeline

Maintaining conceptual integrity of the design under changing technology constraints

Collaborative design DocumentForm and behaviour specification

Goal Directed Design Process

Powerful tool for answering questions that is essential for defining and designing digital products:

• Who are my users?

• What are my users trying to accomplish?

• How do my users think about what they are trying to accomplish?

• How should the product behave?

• What form should the product take?

• How will users interact with my product?

• How can the product’s functions be most effectively organized?

• How will the product introduce itself to first time users?

• How can the product put an understandable, appealing, controllable face on technology?

• How can the product deal with problems that users encounter?

• How can the provide sufficient depth and power for expert users?

LAWS OF INTERACTION DESIGN

Genius Design

Moore’s Law

Fitts’ Law

Hick’s Law

The magical number seven

Tesler’s Law

The Poka-Yoke Principle

Moore’s Law

Gordon Moore (co-founder of Intel)

“ Every two years, the number of transistors on integrated circuits (a rough measure of computer processing power) will double”

Fitts’ Law

Paul Fitts,

“Time it takes to move from a starting position to a final target is determined by two factors: the distance to the target and the size of the target”

The larger the target, the faster it can be pointed to. Similarly, the closer the target, the faster it can be pointed to.

Applications:-Right click for drop down

-Clickable objects like buttons needs to be of reasonable sizes. The smaller it is, harder it is to manipulate

- Edges and corners for menu bars and buttons: infinite reach due to infinite height and width

Hick’s Law

Hick-Hyman Law,

“Time it takes for users to make decisions is determined by the number of choices they have”

“Time it takes to make a decision is affected by two factors: familiarity with the choices, such as fro repeated use, and the format of the choices-are they sound of words, videos or buttons”

Magical number seven

George Miller (Professor at Princeton university),

“The human mind is best able to remember information in chucks of seven times, plus or minus two”

After five to nine pieces of information, human mind start making error

Designers should take care not to design product that causes cognitive overload by ignoring Magical Number Seven rule

Tesler’s Law

Larry Tesler,

“Some complexity is inherent to every process. There is a point beyond which you can not simplify a process any further, you can only more the inherent complexity from one place to another”e.g. email client

Law’s Application:All processes have elements that can not be made simpler, no matter how much we tinker with them

Designers need to look for reasonable places to move the complexity into products they make. The burden of complexity can be shared or divided by the products

Poka-Yoke Principle

Shigeo Shingo (Japanese Industrial Designer),

Designers use poka-yoke when they put constraints on products to prevent errors, forcing users to adjust their behavior and correctly execute an operation

e.g. left-right soft key on mobile phone, groove to place interactive cube, USB cords and fitting groove

Interaction Designer must become an expert in how human beings relate to each other, and to the world, and to the changing nature of technology and business.

RESEARCH METHODS

Elements of interaction design

MotionSpaceTime AppearanceTextureSound

Characteristics of good interaction design

TrustworthyAppropriate SmartResponsiveCleverLudicPleasurable(Designing for interaction)

Other characteristics of interaction design

Direct and indirect manipulationFeedback and feed forward

1.introduction to interaction design

Documents

ceng 394 introduction to human-computer interaction ceng 394...

ifi7156 interaction design methods: introduction to the...

01 3 introduction to interaction design

introduction to interaction design and ixda cape town

interaction design: course...

dd 301: introduction to interaction design · interaction...

tws 2014: interaction design, brief introduction

mhit 603: introduction to interaction design

lecture 9 – prototyping terry winograd cs147 -...

today next time interaction reading: id – ch 2...

reflecting on the foundations and qualities of tangible...

interaction design human-computer interaction

lecture 2 – user-oriented design terry winograd...

1 do-it-yourself haptics, part ii: interaction design 1...

embedding expert users in the interaction design … ·...

interaction...

introduction - tongji...

interaction 09 introduction to interaction design

ucd / ixd introduction - user centric design, interaction...

interaction design....