Process of interaction design
Download
1 / 51

Process of Interaction Design - PowerPoint PPT Presentation


  • 172 Views
  • Updated On :

Process of Interaction Design . Overview. What is Interaction Design? Four basic activities Three key characteristics Some practical issues Who are the users? What are ‘needs’? Where do alternatives come from? How do you choose among alternatives ? Some general guidelines.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Process of Interaction Design' - bao


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Overview l.jpg
Overview

  • What is Interaction Design?

    • Four basic activities

    • Three key characteristics

  • Some practical issues

    • Who are the users?

    • What are ‘needs’?

    • Where do alternatives come from?

    • How do you choose among alternatives?

  • Some general guidelines


What is interaction design l.jpg
What is Interaction Design?

  • It is a process:

    • a goal-directed problem solving activity informed by intended use, target domain, materials, cost, and feasibility

    • a creative activity

    • a decision-making activity to balance trade-offs

  • It is a representation:

    • a plan for development

    • a set of alternatives & successive elaborations


Four basic activities l.jpg
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


Three key characteristics l.jpg
Three key characteristics

  • Three key characteristics permeate these four activities:

    • 1. Focus on users early in the design and evaluation of the artefact

    • 2. Identify, document and agree specific usability and user experience goals

    • 3. Iteration is inevitable. Designers never get it right first time


Some practical issues l.jpg
Some practical issues

  • Who are the users?

  • What are ‘needs’?

  • Where do alternatives come from?

  • How do you choose among alternatives?


Who are the users l.jpg
Who are the users?

  • Not as obvious as you think:

    • those who interact directly with the product

    • those who manage direct users

    • those who receive output from the product

    • those who make the purchasing decision

    • those who use competitor’s products ???


Who are the stakeholders l.jpg
Who are the stakeholders?

Check-out operators

• Suppliers

• Local shop owners

Customers

Managers and owners


User categories l.jpg
User categories

  • Three categories of user:

    • primary: frequent hands-on

    • secondary: occasional or via someone else;

    • tertiary: affected by its introduction, or will influence its purchase.

      Wider term: stakeholders


Who are the users contd l.jpg
Who are the users? (contd)

  • What are their capabilities? Humans vary in many dimensions!

  • Some examples are:

    • size of hands may affect the size and positioning of input buttons;

    • motor abilities may affect the suitability of certain input and output devices;

    • height if designing a physical kiosk;

    • strength - a child’s toy requires little strength to operate, but greater strength to change batteries


What are needs l.jpg
What are ‘needs’?

  • Users rarely know what is possible

  • Users can’t tell you what they ‘need’ to help them achieve their goals

  • Instead, look at existing tasks:

    • their context

    • what information do they require?

    • who collaborates to achieve the task?

    • why is the task achieved the way it is?

  • Envisioned tasks:

    • can be rooted in existing behaviour

    • can be described as future scenarios


Where do alternatives come from l.jpg
Where do alternatives come from?

  • Humans stick to what they know works

  • But considering alternatives is important to ‘break out of the box’

  • Designers are trained to consider alternatives, software people generally are not

  • How do you generate alternatives?

    • ‘Flair and creativity’: research & synthesis

    • Seek inspiration: look at similar products or look at very different products


How do you choose among alternatives l.jpg
How do you choose among alternatives?

  • Evaluation with users or with peers e.g. prototypes

  • Technical feasibility: some not possible

  • Quality thresholds: Usability goals lead to usability criteria set early on and check regularly

    • safety: how safe?

    • utility: which functions are superfluous?

    • effectiveness: appropriate support? task coverage, information available

    • efficiency: performance measurements




Lecture activity l.jpg
Lecture Activity

  • Consider the design issues involved for the following

  • A mobile phone for old people

  • A mobile phone for young children

  • An office phone


Lecture activity 10 15 mins l.jpg
Lecture Activity 10 – 15 mins

  • Select one of these

  • Identify the key functionality required

  • Identify key user & task characteristics

  • Consider the design trade offs that might be required

  • State some usability criteria that could be used to evaluate the design

  • Produce a ‘front’ end for your device


General design principles l.jpg
General design Principles

  • Wide range of design principles

  • Examples include

    • Neilsens Heuristics

    • Shneiderman’s ‘Golden Rules’

    • Windows Interface Guidelines

  • They cover

    • Guidelines for physical design

    • Menu design

    • Screen formatting and presentation issues

  • Designers can apply these – but need to do so with care!

  • Applying design guidelines alone does not lead to good design


Heuristics after neilsen l.jpg

use simple and natural dialogue sequences

speak the users language

minimise user memory load

be consistent

provide feedback

provide clearly marked exits

provide shortcuts

provide good error messages

prevent errors

Heuristics (after Neilsen)


Shneiderman s golden rules l.jpg

Here is another similar list

strive for consistency

enable frequent users to use shortcuts

offer informative feedback

design dialogues to yield closure

offer simple error handling

permit easy reversal of actions

support internal locus of control

reduce short term memory load

Shneiderman’s ‘Golden Rules’


Windows interface guidelines l.jpg

directness

user in control

consistency

forgiveness

feedback

aesthetics

simplicity

Windows Interface Guidelines

  • Set of general principles for interface design in Microsoft's software development documentation


Many common elements l.jpg

Nielsen

use simple and natural dialogue sequences

speak the users language

minimise user memory load

be consistent

provide feedback

provide clearly marked exits

provide shortcuts

provide good error messages

prevent errors

Shneiderman

strive for consistency

enable frequent users to use shortcuts

offer informative feedback

design dialogues to yield closure

offer simple error handling

permit easy reversal of actions

reduce short term memory load

Many common elements…

  • Microsoft

  • directness

  • user in control

  • consistency

  • forgiveness

  • feedback

  • aesthetics

  • simplicity

Be consistent


Consistency l.jpg
Consistency……

  • important to enable user to build a reliable model of how the interface works

  • makes the interface familiar and predictable by providing a sense of stability

  • allows users to transfer existing knowledge to new tasks and focus more on tasks because they need not spend time trying to remember the differences in interaction.

  • important through all aspects of the interface, names of commands, layout of information, and operational behaviour.


Many common elements24 l.jpg

Nielsen

use simple and natural dialogue sequences

speak the users language

minimise user memory load

be consistent

provide feedback

provide clearly marked exits

provide shortcuts

provide good error messages

prevent errors

Shneiderman

strive for consistency

enable frequent users to use shortcuts

offer informative feedback

design dialogues to yield closure

offer simple error handling

permit easy reversal of actions

support internal locus of control

reduce short term memory load

Many common elements…

  • Microsoft

  • directness

  • user in control

  • consistency

  • forgiveness

  • feedback

  • aesthetics

  • simplicity

Reduce memory load


Minimise user memory load l.jpg
Minimise user memory load

  • Basic rule: don’t expect the user to remember what has already been done, make this visible at the interface

  • If a command is made up of a number of pieces of data entered by the user in sequence, display these rather than expect the user to remember the data already entered

  • Help the user remember where they are in a transaction sequence – Menu 2/5 Step 1 - 4

  • Will cover design implications later


Feedback american airlines site l.jpg
Feedback: American Airlines site

Place in transaction sequence

Data previously entered


Many common elements27 l.jpg

Nielsen

use simple and natural dialogue sequences

speak the users language

minimise user memory load

be consistent

provide feedback

provide clearly marked exits

provide shortcuts

provide good error messages

prevent errors

Shneiderman

strive for consistency

enable frequent users to use shortcuts

offer informative feedback

design dialogues to yield closure

offer simple error handling

permit easy reversal of actions

support internal locus of control

reduce short term memory load

Many common elements…

  • Microsoft

  • directness

  • user in control

  • consistency

  • forgiveness

  • feedback

  • aesthetics

  • simplicity

Feedback to user


Feedback from the system l.jpg
Feedback from the system

  • Every action the user makes should produce a perceptible response.

  • The intention is to reduce user uncertainty that the system has:

    • received the last input,

    • is currently doing something about it,

    • or is waiting for the next input.

  • Commands should result in some visible change to the interface

    • E.g ‘mail has been sent’ in response to a ‘Send’ command

    • Presentation of objects on screen updated to reflect their current state

  • Task analysis should enable appropriate information to be identified as feedback for a specific task


Feedback response time l.jpg
Feedback: Response Time

  • Response time for feedback should be appropriate to the type of user action:

    • e.g. response to keystroke - instantaneous; response to command input - may take longer

  • Provide ‘system busy’ feedback if time will exceed a few seconds or is unpredictable

  • Provide indication of how many transactions remain, for example as a bar chart or as a percentage.

  • This largely disappeared as a problem with fast single user PCs and has re-appeared with distributed web-based applications


Many common elements30 l.jpg

Nielsen

use simple and natural dialogue sequences

speak the users language

minimise user memory load

be consistent

provide feedback

provide clearly marked exits

provide shortcuts

provide good error messages

prevent errors

Shneiderman

strive for consistency

enable frequent users to use shortcuts

offer informative feedback

design dialogues to yield closure

offer simple error handling

permit easy reversal of actions

support internal locus of control

reduce short term memory load

Many common elements…

  • Microsoft

  • directness

  • user in control

  • consistency

  • forgiveness

  • feedback

  • aesthetics

  • simplicity

Appropriate user support


Appropriate user support l.jpg
Appropriate user support

  • HELP messages

    • important to recognise different types of help;

    • should be available when required and context-specific;

    • can the user get help about what responses are possible at a given point in a dialogue.

  • ERROR messages

    • should explain what is wrong and what corrective action is required;

    • should use ‘jargon’ familiar to the user;

    • often this support is poorly designed in terms of what information is given to the user.


Many common elements32 l.jpg

Nielsen

use simple and natural dialogue sequences

speak the users language

minimise user memory load

be consistent

provide feedback

provide clearly marked exits

provide shortcuts

provide good error messages

prevent errors

Shneiderman

strive for consistency

enable frequent users to use shortcuts

offer informative feedback

design dialogues to yield closure

offer simple error handling

permit easy reversal of actions

support internal locus of control

reduce short term memory load

Many common elements…

  • Microsoft

  • directness

  • user in control

  • consistency

  • forgiveness

  • feedback

  • aesthetics

  • simplicity

Flexibility


Flexibility l.jpg
Flexibility

  • Measure of how well a dialogue can cater for different levels of user skill.

  • Provide alternative means of achieving the same goal which match different models of how the interface works.

    • e.g. word selection: cursor to start of word and double click, click and drag, click and shift-click.

    • e.g. word deletion: word highlighted and Control +X key, select ‘Cut’ menu option, backspace.


Flexibility34 l.jpg
Flexibility

  • Adapt to the skill level of the user by:

    providing accelerators: allow user to answer ahead,provide key bindings for menu options;

    • providing macro facility;

    • accepting abbreviations for command words;

    • accepting synonyms (alternative names);

    • allowing user to choose level of instructions or help.


Many common elements35 l.jpg

Nielsen

use simple and natural dialogue sequences

speak the users language

minimise user memory load

be consistent

provide feedback

provide clearly marked exits

provide shortcuts

provide good error messages

prevent errors

Shneiderman

strive for consistency

enable frequent users to use shortcuts

offer informative feedback

design dialogues to yield closure

offer simple error handling

permit easy reversal of actions

support internal locus of control

reduce short term memory load

Many common elements…

  • Microsoft

  • directness

  • user in control

  • consistency

  • forgiveness

  • feedback

  • aesthetics

  • simplicity

User in control


User in control l.jpg
User in control

  • user initiates actions, not the computer or software

  • use techniques to automate tasks, but implement them in a way that allows the user to chose or control the automation.

  • users must be able to personalize aspects of the interface, such as colour, fonts, or other options


Minimal user input l.jpg
Minimal user input

  • Balance between number of keystrokes or mouse movements/clicks and memory load.

  • Reducing keying errors increases speed of data entry.

  • Allow selection from a list rather than typing in a value(recognise rather than recall).

  • Edit a command that has produced an error rather than retyping the command.

  • Do not request input of information which can be derived automatically or which has been entered previously.

  • Use default values.


Menus l.jpg
Menus

  • Usually a collection of actions, structured into a list from which a user chooses

  • Actions applied to objects

    • Explicitly selected by user – format + font… [selected text]

    • Implicitly assumed by system – print [current file]

    • Pop-up menu over selected object shows common actions on that object

  • Actions may be represented

    • by text (e.g pull-down menu)

    • by icons (e.g toolbar)

  • Actions completed

    • Immediately by selecting menu item

    • Following collection of more data from user (via a dialogue box)


Overloading menus l.jpg
Overloading menus

  • Most common Windows applications use an ‘anything, anytime’ approach – ie all commands are available to the user at all times

  • Leads to large, cumbersome menu structures where the user can forget how to find a particular command

  • Toolbars attempt to provide shortcuts to frequently used items

    • order of icons in toolbars different from items in pull-down menus representing same actions

  • Many CAD systems use an alternative, moded approach where a general type of operation, or task is selected

    • Only a restricted set of menus relevant to that operation are displayed

  • This approach is now used in some MS applications


Menu structure l.jpg
Menu Structure

‘Structures should reflect users expectations.. and support users flow of work’ (ISO 9241/14)

Priorities

  • Conventional categories (file, edit,…)

  • Use of dividers to break menus into groups

  • Logical groups of related actions (cut,copy,paste)

  • Arbitrary groups

    • consistently ordered, numerically or alphabetically


Sequencing options within groups l.jpg
Sequencing options within groups

  • consistency - use the same relative order of items where the group is presented again

  • importance - place important items first in the group

  • conventional order e.g days of the week

  • order of use - e.g ‘copy’ preceeds ‘paste’

  • frequency of use

    • if frequency of option is known, place frequent items first

  • alphabetical order

  • What ordering rules have been applied in the next slide?


Functional objectives with screen layout l.jpg
Functional Objectives with Screen Layout

  • arrange items on screen to give highest probability of elicting an acceptable level of human performance

  • the user will be able

    • extract information she is seeking

    • identify related groups of information

    • distinguish exceptional items (warnings and error messages)

    • determine what action is necessary


Formatting recommendations l.jpg
Formatting recommendations

  • split strings more than 6 alpha numerics into smaller groups

    (bad) (good)

    ABBA347686A2 ABBA 347686 A2

    ABBA456388A3 ABBA 456388 A3

  • identical data should be presented in the same way even if varaitions in input format are tolerated

    30 11 95

    30 Nov 1995 -> 30/11/95 (for example)

    30 11 1995

    30th nov 95


Formatting recommendations46 l.jpg
Formatting recommendations

  • data should be presented in full version even if abbreviated input allowed, provide feedback to user

    Party:[ ]

    Party:[ ch,cai] Chemical Bank, Cairo


Formatting recommendations47 l.jpg
Formatting recommendations

  • numeric codes displayed with right justification

    47321 47321

    539 539

    67 67

    482645 482645

  • lists of numeric with decimal points should be aligned around the point

    34.723

    43.908

    2341.5


Labeling in screen design l.jpg
Labeling in screen design

  • descriptive title or phrase adjacent to a group of related items or information

  • ensure labels are meaningful to the user

  • labelling should be visually distinct from the data

  • data labelling should not be able to be confused with help messages or command descriptions


Labeling in screen design49 l.jpg
Labeling in screen design

  • use consistent relationship between labels and data being described

    e.g. above and left justified

    Name:

    [ ]

  • include units in label to reduce ambiguity

    e.g. Weight( Kg):

    [ ]


Aesthetic issues l.jpg
Aesthetic issues

  • Design is valued for its fitness to a particular user and task

  • Design aesthetics is intended to make the product or system appear attractive & appealing

  • Nielsen advocates Simplicity – particularly for Website design

  • However careful use of colour, graphics and formatting can make the design more aesthetically pleasing

    • Need to get the right balance


Style guides and sources of design guidance l.jpg
Style guides and sources of design guidance

  • Plenty of these….

  • Manufacturers

  • Web-based style guides e.g Yale Style Manual

    • http://info.med.yale.edu/caim/manual/index.html

  • List of style guides

    • http://www.indiana.edu/~iirg/REFERENCES/guidelines.html


ad