Design Interaction Design Basics

Preeti Mishra

Course Instructor

Introduction

Interaction design is about creating interventions in often complex situations using technology of many kinds including PC software the web and physical devices

Introduction

Design involves achieving goals within constraints and trade-off

between these understanding the raw materials computer and human accepting limitations of humans and of design

The design process has several stages and is iterative and never complete

Introduction

Interaction starts with getting to know the users and their context finding out who they are and what they are like

talking to them watching them Scenarios are rich design stories which can be used

and reused throughout design they help us see what users will want to do( Persona )

they give a step-by-step walkthrough of userrsquos interactions including what they see do and are thinking

Interaction Design Basic Terms

Basic Terms Design

ndash Interaction interventions goals constraints bull the design process

ndash what happens when bullusers

ndash who they are what they are like bull scenarios

ndash rich stories of design bull navigation

ndash finding your way around a system bull iteration and prototypes

ndash never get it right first time

Basic Terms

Goals Purpose of design that in intended to be produced

Constraints What materials some standards cost time limitations

Trade-off Choosing which goals constraints can be relaxed or

can be given more importance

Design Definition

what is design achieving goals within constraints

We already know what are Goals Constraints Trade-off

Golden rule of design

understand your materials

Understand Your Materials

bull understand computers ndash limitations capacities tools platforms

bull understand people ndash psychological social aspects

ndash human error bull and their interaction

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Introduction

Interaction design is about creating interventions in often complex situations using technology of many kinds including PC software the web and physical devices

Introduction

Design involves achieving goals within constraints and trade-off

between these understanding the raw materials computer and human accepting limitations of humans and of design

The design process has several stages and is iterative and never complete

Introduction

Interaction starts with getting to know the users and their context finding out who they are and what they are like

talking to them watching them Scenarios are rich design stories which can be used

and reused throughout design they help us see what users will want to do( Persona )

they give a step-by-step walkthrough of userrsquos interactions including what they see do and are thinking

Interaction Design Basic Terms

Basic Terms Design

ndash Interaction interventions goals constraints bull the design process

ndash what happens when bullusers

ndash who they are what they are like bull scenarios

ndash rich stories of design bull navigation

ndash finding your way around a system bull iteration and prototypes

ndash never get it right first time

Basic Terms

Goals Purpose of design that in intended to be produced

Constraints What materials some standards cost time limitations

Trade-off Choosing which goals constraints can be relaxed or

can be given more importance

Design Definition

what is design achieving goals within constraints

We already know what are Goals Constraints Trade-off

Golden rule of design

understand your materials

Understand Your Materials

bull understand computers ndash limitations capacities tools platforms

bull understand people ndash psychological social aspects

ndash human error bull and their interaction

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Introduction

Design involves achieving goals within constraints and trade-off

between these understanding the raw materials computer and human accepting limitations of humans and of design

The design process has several stages and is iterative and never complete

Introduction

Interaction starts with getting to know the users and their context finding out who they are and what they are like

talking to them watching them Scenarios are rich design stories which can be used

and reused throughout design they help us see what users will want to do( Persona )

they give a step-by-step walkthrough of userrsquos interactions including what they see do and are thinking

Interaction Design Basic Terms

Basic Terms Design

ndash Interaction interventions goals constraints bull the design process

ndash what happens when bullusers

ndash who they are what they are like bull scenarios

ndash rich stories of design bull navigation

ndash finding your way around a system bull iteration and prototypes

ndash never get it right first time

Basic Terms

Goals Purpose of design that in intended to be produced

Constraints What materials some standards cost time limitations

Trade-off Choosing which goals constraints can be relaxed or

can be given more importance

Design Definition

what is design achieving goals within constraints

We already know what are Goals Constraints Trade-off

Golden rule of design

understand your materials

Understand Your Materials

bull understand computers ndash limitations capacities tools platforms

bull understand people ndash psychological social aspects

ndash human error bull and their interaction

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Introduction

Interaction starts with getting to know the users and their context finding out who they are and what they are like

talking to them watching them Scenarios are rich design stories which can be used

and reused throughout design they help us see what users will want to do( Persona )

they give a step-by-step walkthrough of userrsquos interactions including what they see do and are thinking

Interaction Design Basic Terms

Basic Terms Design

ndash Interaction interventions goals constraints bull the design process

ndash what happens when bullusers

ndash who they are what they are like bull scenarios

ndash rich stories of design bull navigation

ndash finding your way around a system bull iteration and prototypes

ndash never get it right first time

Basic Terms

Goals Purpose of design that in intended to be produced

Constraints What materials some standards cost time limitations

Trade-off Choosing which goals constraints can be relaxed or

can be given more importance

Design Definition

what is design achieving goals within constraints

We already know what are Goals Constraints Trade-off

Golden rule of design

understand your materials

Understand Your Materials

bull understand computers ndash limitations capacities tools platforms

bull understand people ndash psychological social aspects

ndash human error bull and their interaction

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Interaction Design Basic Terms

Basic Terms Design

ndash Interaction interventions goals constraints bull the design process

ndash what happens when bullusers

ndash who they are what they are like bull scenarios

ndash rich stories of design bull navigation

ndash finding your way around a system bull iteration and prototypes

ndash never get it right first time

Basic Terms

Goals Purpose of design that in intended to be produced

Constraints What materials some standards cost time limitations

Trade-off Choosing which goals constraints can be relaxed or

can be given more importance

Design Definition

what is design achieving goals within constraints

We already know what are Goals Constraints Trade-off

Golden rule of design

understand your materials

Understand Your Materials

bull understand computers ndash limitations capacities tools platforms

bull understand people ndash psychological social aspects

ndash human error bull and their interaction

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Basic Terms Design

ndash Interaction interventions goals constraints bull the design process

ndash what happens when bullusers

ndash who they are what they are like bull scenarios

ndash rich stories of design bull navigation

ndash finding your way around a system bull iteration and prototypes

ndash never get it right first time

Basic Terms

Goals Purpose of design that in intended to be produced

Constraints What materials some standards cost time limitations

Trade-off Choosing which goals constraints can be relaxed or

can be given more importance

Design Definition

what is design achieving goals within constraints

We already know what are Goals Constraints Trade-off

Golden rule of design

understand your materials

Understand Your Materials

bull understand computers ndash limitations capacities tools platforms

bull understand people ndash psychological social aspects

ndash human error bull and their interaction

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Basic Terms

Goals Purpose of design that in intended to be produced

Constraints What materials some standards cost time limitations

Trade-off Choosing which goals constraints can be relaxed or

can be given more importance

Design Definition

what is design achieving goals within constraints

We already know what are Goals Constraints Trade-off

Golden rule of design

understand your materials

Understand Your Materials

bull understand computers ndash limitations capacities tools platforms

bull understand people ndash psychological social aspects

ndash human error bull and their interaction

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Design Definition

what is design achieving goals within constraints

We already know what are Goals Constraints Trade-off

Golden rule of design

understand your materials

Understand Your Materials

bull understand computers ndash limitations capacities tools platforms

bull understand people ndash psychological social aspects

ndash human error bull and their interaction

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Golden rule of design

understand your materials

Understand Your Materials

bull understand computers ndash limitations capacities tools platforms

bull understand people ndash psychological social aspects

ndash human error bull and their interaction

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Understand Your Materials

bull understand computers ndash limitations capacities tools platforms

bull understand people ndash psychological social aspects

ndash human error bull and their interaction

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Human Errors

accident reports ndash air crash industrial accident hospital mistake ndash enquiry blames lsquohuman errorrsquo

human lsquoerrorrsquo is normal ndash we know how users behave under stress ndash so design for it

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Steps

bull requirements ndash what is there and what is wanted

bullanalysis ndash ordering and understanding

bulldesign ndash what to do and how to decide

bull iteration and prototyping ndash getting it right and finding what is really needed

bull implementation and deployment ndash making it and getting it out there

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

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

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

A simple interaction design model

Evaluate

(Re)Design

Identify needs establish

requirements

Build an interactive version

Final product

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Some practical issues

bull Who are the users

bull What are lsquoneedsrsquo

bull Where do alternatives come from

bull How do you choose among alternatives

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Who are the users

bullNot as obvious as you think

mdashthose who interact directly with the productmdashthose who manage direct usersmdashthose who receive output from the product mdashthose who make the purchasing decision mdashthose who use competitorrsquos products

bullThree categories of user mdashprimary frequent hands-onmdashsecondary occasional or via someone else mdashtertiary affected by its introduction or will influence its

purchase

Wider term stakeholders

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Who are the users (contrsquod)

bullWhat are their capabilities Humans vary in many dimensionsbullSome examples are mdashsize of hands may affect the size and

positioning of input buttons mdashmotor abilities may affect the suitability of

certain input and output devices mdashheight if designing a physical kiosk mdashstrength - a childrsquos toy requires little strength

to operate but greater strength to change batteries

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Who are the stakeholdersCheck-out operators

CustomersManagers and owners

bull Suppliersbull Local shop owners

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

What are lsquoneedsrsquo

bullUsers rarely know what is possiblebullUsers canrsquot tell you what they lsquoneedrsquo to help them achieve their goals bullInstead look at existing tasksmdashtheir contextmdashwhat information do they requiremdashwho collaborates to achieve the taskmdashwhy is the task achieved the way it is

bullEnvisioned tasksmdash can be rooted in existing behaviourmdash can be described as future scenarios

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Where do alternatives come from

bull Humans stick to what they know worksbull But considering alternatives is important to lsquobreak out of the boxrsquobull Designers are trained to consider alternatives software people generally are notbull How do you generate alternativesmdashlsquoFlair and creativityrsquo research amp synthesis mdashSeek inspiration look at similar products or look at

very different products

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Idea Generation

Brainstorm Group vs Individual Creativity More Ideas =gt More Creative =gt Better Limited Time Keep a Record The rules Be visual Defer judgment Encourage wild ideas Build on the ideas of others Go for quantity Stay focused on the topic

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

How do you choose among alternatives

bull Evaluation with users or with peers eg prototypesbull Technical feasibility some not possiblebull Quality thresholds Usability goals lead to usability criteria (set early and checked regularly)mdashsafety how safemdashutility which functions are superfluous

mdasheffectiveness appropriate support task coverage information available

mdashefficiency performance measurements

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Design Approaches

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Few Types of Interaction Designs

User- centered design Participatory design Scenario Based design Navigation Design Screen Design Layout Dialog Design Iteration and Prototyping

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

User Centered Design

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

User Centered Design

Developers working with target users Think of the world in usersrsquo terms Identify usability and user experience goals Understanding work process Not technology- centered feature driven

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Why User Centered Design

Nearly 25 of all applications projects fail Why 1048708 overrun budgets amp management pulls the plug 1048708 others complete but are too hard to learnuse

1048708 Solution is user- cantered design Why 1048708 easier to learn amp use products sell better 1048708 can help keep a product onahead of schedule 1048708 training costs reduced

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Normanrsquos Philosophy

Norman (1988) advocated user-centred design as a

philosophy of putting users and usability ahead of aesthetics He proposed following seven principles

1 Use knowledge both in-the-world and in-the-head 2 Simplify task structure 3 Bridge gulfs of execution and evaluation 4 Get mappings right 5 Exploit constraints 6 Design for error 7 When all else fails standardize

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Know your Stakeholders

Who are the users of the document What are the usersrsquo tasks and goals What are the usersrsquo experience levels with the document

and documents like it What functions do the users need from the document What information might the users need and in what form

do they need it How do users think the document should work What are the extreme environments Is the user multitasking Does the interface utilize different inputs modes such as

touching spoken gestures or orientation

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Elements of User Centered Design

Visibility Visibility helps the user construct a mental model of the

document Models help the user predict the effect(s) of their actions while

using the document Important elements (such as those that aid navigation) should be

emphatic Users should be able to tell from a glance what they can and

cannot do with the document

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Options for text font are clearly visible along with other alternatives

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Elements of User Centered Design

Accessibility Users should be able to find information quickly and easily

throughout the document regardless of its length Users should be offered various ways to find information (such as

navigational elements search functions table of contents clearly labelled sections page numbers colour-coding etc)

Navigational elements should be consistent with the genre of the document lsquoChunkingrsquo is a useful strategy that involves breaking information into small pieces that can be organized into some type meaningful order or hierarchy

The ability to skim the document allows users to find their piece of information by scanning rather than reading Bold and italic words are often used

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Options chunked over logical groups

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Elements of User Centered Design

Legibility Text should be easy to read

Through analysis of the rhetorical situation the designer should be able to determine a useful font style

Ornamental fonts and text in all capital letters are hard to read but italics and bolding can be helpful when used correctly

Large or small body text is also hard to read (Screen size of 10-12 pixel sans serif and 12-16 pixel serif is recommended)

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Legibility

Choose a common font with recognizable letterforms for large bodies of text

Use a font size of at least 10-14 points

Present blocks of texts in column donrsquot let text span the entire length of the screen on a wide screen display

Choose text and background colours with a high luminance contrast

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

To do

Find difference between legibility and readability Read the paper

httpsuperawesomegoodcomwp-contentuploads201202SKellyTGregory-Typographypdf

Elements of User Centered Design

Language Depending on the rhetorical situation certain types of language

are needed Short sentences are helpful as are well-written texts used in

explanations and similar bulk-text situations Unless the situation calls for it jargon or technical terms should

not be used Many writers will choose to use active voice verbs (instead of noun strings or nominals) and simple sentence structure

Usability

Introduction

Usability is the ease of use and learnability of a human-made object

The object of use can be a software application website book tool machine process or anything a human interacts with

Who does the job

A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others

It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer

Usability Includes

Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived

efficiency or elegance In human-computer interaction and computer science

usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed

Usability differs from user satisfaction and user experience because usability also considers usefulness

Definition

The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use

The word usability also refers to methods for improving ease-of-use during the design process

To do

Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness

efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo

Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience

Usability

Introduction

Usability is the ease of use and learnability of a human-made object

The object of use can be a software application website book tool machine process or anything a human interacts with

Who does the job

A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others

It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer

Usability Includes

Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived

efficiency or elegance In human-computer interaction and computer science

usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed

Usability differs from user satisfaction and user experience because usability also considers usefulness

Definition

The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use

The word usability also refers to methods for improving ease-of-use during the design process

To do

Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness

efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo

Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience

Introduction

Usability is the ease of use and learnability of a human-made object

The object of use can be a software application website book tool machine process or anything a human interacts with

Who does the job

A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others

It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer

Usability Includes

Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived

efficiency or elegance In human-computer interaction and computer science

usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed

Usability differs from user satisfaction and user experience because usability also considers usefulness

Definition

The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use

The word usability also refers to methods for improving ease-of-use during the design process

To do

Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness

efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo

Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience

Who does the job

A usability study may be conducted as a primary job function by a usability analyst or as a secondary job function by designers technical writers marketing personnel and others

It is widely used in consumer electronics communication and knowledge transfer objects (such as a cookbook a document or online help) and mechanical objects such as a door handle or a hammer

Usability Includes

Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived

efficiency or elegance In human-computer interaction and computer science

usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed

Usability differs from user satisfaction and user experience because usability also considers usefulness

Definition

The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use

The word usability also refers to methods for improving ease-of-use during the design process

To do

Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness

efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo

Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience

Usability Includes

Usability includes methods of measuring usability such as needs analysis and the study of the principles behind an objects perceived

efficiency or elegance In human-computer interaction and computer science

usability studies the elegance and clarity with which the interaction with a computer program or a web site is designed

Usability differs from user satisfaction and user experience because usability also considers usefulness

Definition

The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use

The word usability also refers to methods for improving ease-of-use during the design process

To do

Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness

efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo

Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience

Definition

The extent to which a product can be used by specified users to achieve specified goals with effectiveness efficiency and satisfaction in a specified context of use

The word usability also refers to methods for improving ease-of-use during the design process

To do

Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness

efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo

Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience

To do

Difference between usability and user experience ISO Definition Usability is concerned with the ldquoeffectiveness

efficiency and satisfaction with which specified users achieve specified goals in particular environmentsrdquo (ISO 9241-11) [1] whilst user experience is concerned with ldquoall aspects of the userrsquos experience when interacting with the product service environment or facilityrdquo

Refer to httpusabilitygeekcomthe-difference-between-usability-and-user-experience

Scenario Based Design

Scenario

what will users want to do step-by-step walkthrough

ndash what can they see (sketches screen shots)

ndash what do they do (keyboard mouse etc)

ndash what are they thinking use and reuse throughout design

Scenarios are

stories for design communicate with others validate other models understand dynamics

linearity time is linear - our lives are linear but donrsquot show alternatives

Use Scenario to

communicate with others designers clients users

validate other models lsquoplayrsquo it against other models

express dynamics screenshots ndash appearance scenario ndash behaviour

Explore the Depths

explore interaction what happens when

explore cognition what are the users thinking

explore architecture what is happening inside

Linearity

Scenarios ndash one linear path through system Pros

life and time are linear easy to understand (stories and narrative are natural) concrete (errors less likely)

Cons no choice no branches no special conditions miss the unintended

So use several scenarios use several methods

Example of Scenario

Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday

returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card

Participatory Design

Introduction

Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities

The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace

How to proceed

Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and

encourages them to ldquoownrdquo the products

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Scenario

what will users want to do step-by-step walkthrough

ndash what can they see (sketches screen shots)

ndash what do they do (keyboard mouse etc)

ndash what are they thinking use and reuse throughout design

Scenarios are

stories for design communicate with others validate other models understand dynamics

linearity time is linear - our lives are linear but donrsquot show alternatives

Use Scenario to

communicate with others designers clients users

validate other models lsquoplayrsquo it against other models

express dynamics screenshots ndash appearance scenario ndash behaviour

Explore the Depths

explore interaction what happens when

explore cognition what are the users thinking

explore architecture what is happening inside

Linearity

Scenarios ndash one linear path through system Pros

life and time are linear easy to understand (stories and narrative are natural) concrete (errors less likely)

Cons no choice no branches no special conditions miss the unintended

So use several scenarios use several methods

Example of Scenario

Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday

returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card

Participatory Design

Introduction

Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities

The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace

How to proceed

Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and

encourages them to ldquoownrdquo the products

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Scenarios are

stories for design communicate with others validate other models understand dynamics

linearity time is linear - our lives are linear but donrsquot show alternatives

Use Scenario to

communicate with others designers clients users

validate other models lsquoplayrsquo it against other models

express dynamics screenshots ndash appearance scenario ndash behaviour

Explore the Depths

explore interaction what happens when

explore cognition what are the users thinking

explore architecture what is happening inside

Linearity

Scenarios ndash one linear path through system Pros

life and time are linear easy to understand (stories and narrative are natural) concrete (errors less likely)

Cons no choice no branches no special conditions miss the unintended

So use several scenarios use several methods

Example of Scenario

Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday

returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card

Participatory Design

Introduction

Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities

The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace

How to proceed

Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and

encourages them to ldquoownrdquo the products

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Use Scenario to

communicate with others designers clients users

validate other models lsquoplayrsquo it against other models

express dynamics screenshots ndash appearance scenario ndash behaviour

Explore the Depths

explore interaction what happens when

explore cognition what are the users thinking

explore architecture what is happening inside

Linearity

Scenarios ndash one linear path through system Pros

life and time are linear easy to understand (stories and narrative are natural) concrete (errors less likely)

Cons no choice no branches no special conditions miss the unintended

So use several scenarios use several methods

Example of Scenario

Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday

returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card

Participatory Design

Introduction

Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities

The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace

How to proceed

Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and

encourages them to ldquoownrdquo the products

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Explore the Depths

explore interaction what happens when

explore cognition what are the users thinking

explore architecture what is happening inside

Linearity

Scenarios ndash one linear path through system Pros

life and time are linear easy to understand (stories and narrative are natural) concrete (errors less likely)

Cons no choice no branches no special conditions miss the unintended

So use several scenarios use several methods

Example of Scenario

Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday

returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card

Participatory Design

Introduction

Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities

The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace

How to proceed

Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and

encourages them to ldquoownrdquo the products

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Linearity

Scenarios ndash one linear path through system Pros

life and time are linear easy to understand (stories and narrative are natural) concrete (errors less likely)

Cons no choice no branches no special conditions miss the unintended

So use several scenarios use several methods

Example of Scenario

Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday

returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card

Participatory Design

Introduction

Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities

The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace

How to proceed

Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and

encourages them to ldquoownrdquo the products

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Example of Scenario

Scenario for purchasing an airline ticket Teena wants to fly to Czechoslovakia next Thursday

returning on the last flight on Friday She wants to know how much this would cost and whether it would be cheaper to take a different flight back She is not quite sure how Czechoslovakia is spelt on the computer When she has found the right flight she wants to confirm the purchase with a credit card

Participatory Design

Introduction

Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities

The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace

How to proceed

Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and

encourages them to ldquoownrdquo the products

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Participatory Design

Introduction

Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities

The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace

How to proceed

Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and

encourages them to ldquoownrdquo the products

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Introduction

Participatory design (PD) is a set of theories practices and studies related to end users as full participants in activities

The field of participatory design grew out of work beginning in the early 1970s in Norway when computer professionals worked with members of the Iron and Metalworkers Union to enable the workers to have more influence on the design and introduction of computer systems into the workplace

How to proceed

Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and

encourages them to ldquoownrdquo the products

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

How to proceed

Typical methods brainstorming storyboarding workshops pencil and paper exercises Like ethnography makes users feel valued and

encourages them to ldquoownrdquo the products

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Measuring Participation

four dimensions along which participation by users could be measured 1 Directness of interaction with the designers 2 Length of involvement in the design process 3 Scope of participation in the overall system being

designed 4 Degree of control over the design decisions

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Navigation Design

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Basics

Golden rules mdash the Where3-What of navigation Where you are Where yoursquore going (or what will happen) Where yoursquove been (or what has been done) What you can do now

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

where you are ndash breadcrumbs

shows path through web site hierarchy

web site

top level category sub-categorythis page

live linksto higher

levels

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Levels of Structure

Different levels of structure according to domain app widgets screens application environment web HTML page layout site browser+www device controls physical layout modes real

world

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Example

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Screen design and layout

basic principles

grouping structure order

alignment

use of white space

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

basic principles

ask what is the user doing

think what information comparisons order

design form follows function

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

available tools

grouping of itemsorder of items decoration - fonts boxes etcalignment of itemswhite space between items

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

grouping and structure

logically together physically together

Billing details Name Address hellip Credit card no

Delivery details Name Address hellip Delivery time

Order details item quantity costitem cost size 10 screws (boxes) 7 371 2597 helliphellip hellip hellip hellip

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

order of groups and items

think - what is natural order

should match screen order use boxes space etc set up tabbing right

instructions beware the cake recipie syndrome

hellip mix milk and flour add the fruit after beating them

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

decoration

use boxes to group logical items use fonts for emphasis headings but not too many

ABCDEFGHIJKLMNOPQRSTUVWXYZ

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

alignment - text

you read from left to right (English and

European)

align left hand sideWilly Wonka and the Chocolate FactoryWinston Churchill - A BiographyWizard of OzXena - Warrior Princess

Willy Wonka and the Chocolate FactoryWinston Churchill - A Biography

Wizard of OzXena - Warrior Princess

fine for special effects but hard to scan

boring butreadable

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

alignment - names

Usually scanning for surnames make it easy

Alan DixJanet FinlayGregory AbowdRussell Beale

Alan DixJanet FinlayGregory AbowdRussell Beale

Dix AlanFinlay JanetAbowd GregoryBeale Russell

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

alignment - numbers

think purpose

which is biggest

532561793

25631715

739481035

31424976256

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

alignment - numbers

visually

long number = big number

align decimal points

or right align integers

6278651005763

382583250256

43293520175

652875634

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

multiple columns

scanning across gaps hard(often hard to avoid with large data base

fields)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

multiple columns - 2

use leaders

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

multiple columns - 3

or greying (vertical too)

sherbert 75toffee 120chocolate 35fruit gums 27coconut dreams 85

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

sherbert 75toffee 120

chocolate 35fruit gums 27

coconut dreams 85

multiple columns - 4

or even (with care) lsquobadrsquo alignment

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

space to separate

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

space to structure

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

space to highlight

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Examplephysical controls

grouping of items defrost settings

type of food

time to cooktype of food

time to cook

defrost settings

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

physical controls

grouping of items

order of items

decoration

alignment centered text in buttons

easy to scan easy to scan

centred text in buttons

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

physical controls

grouping of items

order of items

decoration

alignment

white space gaps to aid grouping

gaps to aid grouping

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

aesthetics and utility (you already know this)

aesthetically pleasing designs increase user satisfaction and improve productivity

beauty and utility may conflict mixed up visual styles easy to distinguish clean design ndash little differentiation confusing backgrounds behind text

hellip good to look at but hard to read

but can work together eg the design of the counter in consumer products ndash key differentiator (eg iMac)

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

colour and 3D(you already know this)

both often used very badly colour

older monitors limited palette colour over used because lsquoit is therersquo beware colour blind use sparingly to reinforce other information

3D effects good for physical information and some graphs but if over used hellip

eg text in perspective 3D pie charts

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

bad use of colour (you already know this)

over use - without very good reason (eg kidsrsquo site)

colour blindness poor use of contrast do adjust your set

adjust your monitor to greys only can you still read your screen

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

across countries and cultures

localisation amp internationalisation changing interfaces for particular cultureslanguages

globalisation try to choose symbols etc that work everywhere

simply change language use lsquoresourcersquo database instead of literal text

hellip but changes sizes left-right order etc deeper issues

cultural assumptions and values meanings of symbols eg tick and cross hellip +ve and -ve in some cultures

hellip but hellip mean the same thing (mark this) in others

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Iteration and prototyping

getting better hellip

hellip and starting well

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

prototyping

you never get it right first time if at first you donrsquot succeed hellip

prototype evaluatedesign

re-design

doneOK

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

pitfalls of prototyping

moving little by little hellip but to where

1 need a good start point

2 need to understand what is wrong

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

End of Unit-3Design Process Interaction Design Basics

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome

Mapping to Course Outcome

This unit worked towards partial achievement of Course Outcome 3

• Design Interaction Design Basics
• Introduction
• Introduction (2)
• Introduction (3)
• Interaction Design Basic Terms
• Basic Terms
• Basic Terms (2)
• Design Definition
• Golden rule of design
• Understand Your Materials
• Human Errors
• Slide 12
• Steps
• Four basic activities
• A simple interaction design model
• Some practical issues
• Who are the users
• Who are the users (contrsquod)
• Who are the stakeholders
• What are lsquoneedsrsquo
• Where do alternatives come from
• Idea Generation
• How do you choose among alternatives
• Design Approaches
• Few Types of Interaction Designs
• User Centered Design
• User Centered Design (2)
• Why User Centered Design
• Normanrsquos Philosophy
• Know your Stakeholders
• Elements of User Centered Design
• Slide 32
• Elements of User Centered Design (2)
• Slide 34
• Elements of User Centered Design (3)
• Legibility
• To do
• Elements of User Centered Design (4)
• Slide 39
• Usability
• Introduction (4)
• Who does the job
• Usability Includes
• Definition
• To do (2)
• Scenario Based Design
• Scenario
• Scenarios are
• Use Scenario to
• Explore the Depths
• Linearity
• Example of Scenario
• Participatory Design
• Introduction (5)
• How to proceed
• Measuring Participation
• Navigation Design
• Basics
• where you are ndash breadcrumbs
• Levels of Structure
• Example
• Screen design and layout
• basic principles
• available tools
• grouping and structure
• order of groups and items
• decoration
• alignment - text
• alignment - names
• alignment - numbers
• alignment - numbers (2)
• multiple columns
• multiple columns - 2
• multiple columns - 3
• multiple columns - 4
• space to separate
• space to structure
• space to highlight
• Example physical controls
• physical controls
• physical controls (2)
• aesthetics and utility (you already know this)
• colour and 3D (you already know this)
• bad use of colour (you already know this)
• across countries and cultures
• Iteration and prototyping
• prototyping
• pitfalls of prototyping
• End of Unit-3 Design Process Interaction Design Basics
• Mapping to Course Outcome