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


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




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



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



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




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 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



• 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


• 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


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 &

buy.

Technology planEngineering schedule,

engineering specsProject delivery


PROJECT KICK-OFF


Viability(Mgmt.)

Capability(Technologist)





customer adoptions






Technology modelCore technology & component, build &

buy.

Technology planEngineering schedule,

engineering specsProject delivery

Overall Product Success

APPROACHES TO INTERACTION DESIGN

Four 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





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



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 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

Goal

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









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 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 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