Hanlune-learning

PM

Afternoon Session 200-500 pm edited by Clive NG

Copyright Statement NOTICE The following presentation contains copyrighted materials Material being used for educational purposes only Further use is prohibited

httpssitesgooglecomsitesdcliveng

Content

bull Web Design (The Surface Plane) (visual design)

bull About web user and design process

bull Case study

Web Design (The Surface Plane)

Web user interface | Emerging trends in web design | New tools for web production | First Principles of Interaction Design ｜

Web Design (The Surface Plane)The evolution of the web

1989

The

sim

ple

shar

ing

era

The

imag

e amp

tabl

e er

a

The

desi

gn in

tro

era

The

tech

no-h

ype

era

The

usab

ility

era

The

web

exp

erie

nce

era

The

Ric

h In

tern

et A

pplic

atio

n

The

soci

al w

eb e

ra

201020051994

httpwwww3orgHistory19921103-hypertexthypertextWWWTheProjecthtml

Web Design (The Surface Plane) The Evolution of Web Design 1992 text-based page

Tim Berners Lee

Content

bull Web Design (The Surface Plane) (visual design)

bull About web user and design process

bull Case study

Web Design (The Surface Plane)

Web user interface | Emerging trends in web design | New tools for web production | First Principles of Interaction Design ｜

Web Design (The Surface Plane)The evolution of the web

1989

The

sim

ple

shar

ing

era

The

imag

e amp

tabl

e er

a

The

desi

gn in

tro

era

The

tech

no-h

ype

era

The

usab

ility

era

The

web

exp

erie

nce

era

The

Ric

h In

tern

et A

pplic

atio

n

The

soci

al w

eb e

ra

201020051994

httpwwww3orgHistory19921103-hypertexthypertextWWWTheProjecthtml

Web Design (The Surface Plane) The Evolution of Web Design 1992 text-based page

Tim Berners Lee

Web Design (The Surface Plane)

Web user interface | Emerging trends in web design | New tools for web production | First Principles of Interaction Design ｜

Web Design (The Surface Plane)The evolution of the web

1989

The

sim

ple

shar

ing

era

The

imag

e amp

tabl

e er

a

The

desi

gn in

tro

era

The

tech

no-h

ype

era

The

usab

ility

era

The

web

exp

erie

nce

era

The

Ric

h In

tern

et A

pplic

atio

n

The

soci

al w

eb e

ra

201020051994

httpwwww3orgHistory19921103-hypertexthypertextWWWTheProjecthtml

Web Design (The Surface Plane) The Evolution of Web Design 1992 text-based page

Tim Berners Lee

Web Design (The Surface Plane)The evolution of the web

1989

The

sim

ple

shar

ing

era

The

imag

e amp

tabl

e er

a

The

desi

gn in

tro

era

The

tech

no-h

ype

era

The

usab

ility

era

The

web

exp

erie

nce

era

The

Ric

h In

tern

et A

pplic

atio

n

The

soci

al w

eb e

ra

201020051994

httpwwww3orgHistory19921103-hypertexthypertextWWWTheProjecthtml

Web Design (The Surface Plane) The Evolution of Web Design 1992 text-based page

Tim Berners Lee

httpwwww3orgHistory19921103-hypertexthypertextWWWTheProjecthtml

Web Design (The Surface Plane) The Evolution of Web Design 1992 text-based page

Tim Berners Lee

Web Design (The Surface Plane) The Evolution of Web Design 1998 Table-based and frame set designs

1997

2001

Web Design The Evolution of Web Design 2000 Flash-based web designs

class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world

1997

2001

Web Design The Evolution of Web Design 2000 Flash-based web designs

class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world

2001

Web Design The Evolution of Web Design 2000 Flash-based web designs

class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world

Web Design The Evolution of Web Design 2000 Flash-based web designs

class comexampleGreeter extends MovieClip public function Greeter() public function onLoad()Void var txtHelloTextField = thiscreateTextField(txtHello 0 0 0 100 100) txtHellotext = Hello world

2001

2001

2004

2005

Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)

Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design

Content management system

Joomla Drupal Wordpress

Changeableskin

Generated HTML

bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px

2001

2004

2005

Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)

Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design

Content management system

Joomla Drupal Wordpress

Changeableskin

Generated HTML

bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px

2004

2005

Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)

Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design

Content management system

Joomla Drupal Wordpress

Changeableskin

Generated HTML

bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px

2005

Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)

Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design

Content management system

Joomla Drupal Wordpress

Changeableskin

Generated HTML

bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px

Web Design (The Surface Plane) The Evolution of Web Design 2000 Dynamic HTML (DHTML)

Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design

Content management system

Joomla Drupal Wordpress

Changeableskin

Generated HTML

bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px

Web Design (The Surface Plane) The Evolution of Web Design 2005 CSS-Based Design

Content management system

Joomla Drupal Wordpress

Changeableskin

Generated HTML

bodybackground-colord0e4feh1colororangetext-aligncenterpfont-familyTimes New Romanfont-size20px

httpwebhostinggeekscomblogweb-design-evolutionhttpwebdesignledgercominspirationthe-design-evolution-of-popular-websites

Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats

Ff

877

93 had their logos in the top left corner

27 of logo include a tagline or a slogan

80 primarly light background and colour scheme

87 have search field

47 have call-to-action button

60 have latest news and blog post

63 contact info was hard to find

80 have newsletter signup 11 have social media link

links

Web Design (The Surface Plane)Web user interface Design Elements

Ff

Contrast and Uniformity layout amp Grid

Color Palettes and Typography

Pattern amp Texture

Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid

The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns

Web Design (The Surface Plane)Web user interface Fortune-500 Websites Stats

Ff

877

93 had their logos in the top left corner

27 of logo include a tagline or a slogan

80 primarly light background and colour scheme

87 have search field

47 have call-to-action button

60 have latest news and blog post

63 contact info was hard to find

80 have newsletter signup 11 have social media link

links

Web Design (The Surface Plane)Web user interface Design Elements

Ff

Contrast and Uniformity layout amp Grid

Color Palettes and Typography

Pattern amp Texture

Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid

The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns

Web Design (The Surface Plane)Web user interface Design Elements

Ff

Contrast and Uniformity layout amp Grid

Color Palettes and Typography

Pattern amp Texture

Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid

The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns

Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 960 Grid

The 12-column grid is divided into portions that are 60 pixels wide The 16-column grid consists of 40 pixel increments Each column has 10 pixels of margin on the left and right which create 20 pixel wide gutters between columns

Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid Applying the Golden Ratio to Web Layouts and elements

1618

1618

960 1618 = 594

760 1618 = 470

httpgetratiocom

httpuxmovementcomcontentapplying-the-golden-ratio-to-web-layouts-and-objects

Web Design (The Surface Plane)Web user interface Design Elements layout CSS Layouts

layoutsironmyerscom

layoutsironmyerscom

Web Design (The Surface Plane)Web user interface Design Elements layout Common Grid

Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples

URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples

3D screen Featured Graphic Featured photo Full screen photo

Headline amp Gallery

Three box

Advanced Grid

Five Boxes Fixed Sidebar

Power Grid

Web Design (The Surface Plane)Web user interface Design Elements layout amp Grid 10 Website Layout Examples

URLhttpdesignshacknetarticleslayouts10-rock-solid-website-layout-examples

3D screen Featured Graphic Featured photo Full screen photo

Headline amp Gallery

Three box

Advanced Grid

Five Boxes Fixed Sidebar

Power Grid

Three box

The three boxes layout features one main graphic area followed by two smaller boxes underneath Each of these can be filled with a graphic a block of text or a mixture of both The main box in this layout is often a jQuery slider

This design is ideal for a portfolio page or anything that needs to show off a few sample graphics Each of the images could be a link that leads to a larger more complex gallery page

Five Boxes

The five boxes layout is simply an evolution of the three boxes layout All of the same logic applies itrsquos just been modified to hold even more content It could easily be four boxes as well it just depends on what you want to showcase It also makes it look like you put a little more effort into the designObviously as you add to the layout the secondary items become smaller and smaller so for most uses five boxes is probably going to approach the limit

Advanced Grid

one primary graphic heading up the page This is followed by a simple twist on the idea of a uniform grid of thumbnails The space would allow for a span of four squares horizontally but instead wersquove combined the first two areas so that the left half of the page differs from the right

Power Grid

The power grid is the most complex layout in this article but it is one of the most effective layouts for pages that need to contain all kinds of various related content From images and music players to text and videos you can cram just about anything into this layout and it stays strong

Fixed Sidebar

Thus far all the sites that wersquove seen have had a top-side horizontal navigation The other popular option is of course a vertical navigation which lends itself to creating a strong vertical column on the left side of the page Often this is a fixed element that stays where it is while the rest of the page scrolls The reason for this is so the navigation can stay easily accessible from any point in the site

Headline amp Gallery

Everyone loves a good gallery page From a layout perspective what could be simpler All you need is a solid uniform grid of images and some room for a headline with an optional sub-head The key here is to make your headline big and bold Feel free to use this as a point of creativity and include a script or some crazy typeface

3D Screenshots

As developers continue to create an endless collection of webapps the 3D screenshots layout seen below or some variant of it is becoming more and more popular The basic idea is to top your page with a headline and then toss in some stylized previews of your application These often come with reflections heavy shadows big background graphics or even complex adornments such as vines crawling all over the screenshots but the core idea is always really simple

Featured Graphic

The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently

Featured Graphic

The result is a page that is bold yet minimal and clean The statement it makes is strong and impossible to miss just make sure your graphic is good enough to be featured so prominently

Featured Photo

The layout extremely common especially among the photography community

The basic idea here is to have a large image displaying either your design or photography (anything really) accompanied by a left-side vertical navigation

Full Screen Photo

It can be really hard to read content when it is laid over a background image so the basic idea here is to create an opaque (or nearly opaque) horizontal bar that sits on top of the image and serves as a container for links copy logos and other content

Web Design (The Surface Plane)Grid amp Layout Summary

Grid Layout

The 12-column grid Five Boxes

The 16-column grid Three box

Fixed Sidebar

Advanced Grid

Power Grid

3D screen

Featured photo

Full screen photo

Featured Graphic

Headline amp Gallery

Web Design (The Surface Plane)Web Typography font-face Revolution

Web Design (The Surface Plane)font-face Revolution

Before After

622

230020000

Web Design (The Surface Plane)A guide to Web typography

bull Contrast

bull Size

bull Hierarchy

bull Space

Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)

World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical

tired

Web Design (The Surface Plane)Web Typography font-face Revolution

Web Design (The Surface Plane)font-face Revolution

Before After

622

230020000

Web Design (The Surface Plane)A guide to Web typography

bull Contrast

bull Size

bull Hierarchy

bull Space

Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)

World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical

tired

Web Design (The Surface Plane)font-face Revolution

Before After

622

230020000

Web Design (The Surface Plane)A guide to Web typography

bull Contrast

bull Size

bull Hierarchy

bull Space

Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)

World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical

tired

Web Design (The Surface Plane)A guide to Web typography

bull Contrast

bull Size

bull Hierarchy

bull Space

Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)

World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical

tired

Web Design (The Surface Plane)A guide to Web typography Contrast (Readability易讀性)

World Wide WebThe WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documentsEverything there is online about W3 is linked directly or indirectly to this document including an executive summary of the project Mailing lists Policy Novembers W3 news Frequently Asked Questions Whats out therePointers to the worlds online information subjects W3 servers etcHelpon the browser you are usingSoftware ProductsA list of W3 project components and their current state (eg Line Mode X11 Viola NeXTStep Servers Tools Mail robot Library )Technical

tired

Point Size

x-height

Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)

2mm

Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)

DISTANCE 57cm

40cm x-height = 20mm

x-height = 285mm

44cm x-height = 22mm

48cm x-height = 24mm

52cm x-height = 26mm

56cm x-height = 28mm

60cm x-height = 30mm

httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp

Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)

Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)

Donrsquot set body text below 10px

The best body text point size for the web

Verdana 145pt20px

Helvetica Arial 15pt 21px

Myriad Pro Georgie 16pt 22px

Gill Sans 17pt 23px

2mm

Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)

DISTANCE 57cm

40cm x-height = 20mm

x-height = 285mm

44cm x-height = 22mm

48cm x-height = 24mm

52cm x-height = 26mm

56cm x-height = 28mm

60cm x-height = 30mm

httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp

Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)

Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)

Donrsquot set body text below 10px

The best body text point size for the web

Verdana 145pt20px

Helvetica Arial 15pt 21px

Myriad Pro Georgie 16pt 22px

Gill Sans 17pt 23px

DISTANCE 57cm

40cm x-height = 20mm

x-height = 285mm

44cm x-height = 22mm

48cm x-height = 24mm

52cm x-height = 26mm

56cm x-height = 28mm

60cm x-height = 30mm

httpaccessibilitygtrigatecheduassistantacc_infofont_sizephp

Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)

Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)

Donrsquot set body text below 10px

The best body text point size for the web

Verdana 145pt20px

Helvetica Arial 15pt 21px

Myriad Pro Georgie 16pt 22px

Gill Sans 17pt 23px

Web Design (The Surface Plane)A guide to Web typography Size ( legibility可讀性)

Donrsquot set body text below 10px

The best body text point size for the web

Verdana 145pt20px

Helvetica Arial 15pt 21px

Myriad Pro Georgie 16pt 22px

Gill Sans 17pt 23px

All-caps or using italic for sub-headings Serif and sans serif faces can also be mixed to good effect

Web Design (The Surface Plane)A guide to Web typography Hierarchy

Leonardo Fibonacci

httpwwwyoutubecomwatchv=1XSqcAq0A9k

bull Fibonacci sequences (eg 16 ndash 24 ndash 40 ndash 64 ndash 104) when defining the font size of headings and body copy

Myriad Pro 16pt (Body text)

Myriad Pro 24pt (Subheading)

Myriad Pro 40pt (Heading)

Myriad Pro 64pt (Sub title)

Myriad Pro 104pt (Title)

Web Design (The Surface Plane)A guide to Web typography Hierarchy Fibonacci sequences

Web Design (The Surface Plane)A guide to Web typography Space

Web Design (The Surface Plane)Theme

httpstore1adobecomcfusionstorehtmlindexcfmstore=OLS-USampevent=displayCategoryampcode=theme

httpwwwadobecomtypefontfinder

Web Design (The Surface Plane)Best and worst Typeface

httpabsolutegraphixcoukbestworstfontsaspstrID=Guest

1

2

Web Design (The Surface Plane)Best and worst Typeface

httpabsolutegraphixcoukbestworstfontsaspstrID=Guest

2

1

Best and worst Typeface

httpabsolutegraphixcoukbestworstfontsaspstrID=Guest

Best and worst Typeface Top 10 web fonts designer love (Free)

1 Myriad Pro

2 League Gothic

3 Cabin

4 Corbel

5 Museo Slab

6 Bebas Neue

7 Ubuntu

8 Lobster

9 Franchise

10PT Serif

FREE

Web Design (The Surface Plane)Best and worst Typeface

httpabsolutegraphixcoukbestworstfontsaspstrID=Guest

1

2

Web Design (The Surface Plane)Best and worst Typeface

httpabsolutegraphixcoukbestworstfontsaspstrID=Guest

2

1

Best and worst Typeface

httpabsolutegraphixcoukbestworstfontsaspstrID=Guest

Best and worst Typeface Top 10 web fonts designer love (Free)

1 Myriad Pro

2 League Gothic

3 Cabin

4 Corbel

5 Museo Slab

6 Bebas Neue

7 Ubuntu

8 Lobster

9 Franchise

10PT Serif

FREE

Web Design (The Surface Plane)Best and worst Typeface

httpabsolutegraphixcoukbestworstfontsaspstrID=Guest

2

1

Best and worst Typeface

httpabsolutegraphixcoukbestworstfontsaspstrID=Guest

Best and worst Typeface Top 10 web fonts designer love (Free)

1 Myriad Pro

2 League Gothic

3 Cabin

4 Corbel

5 Museo Slab

6 Bebas Neue

7 Ubuntu

8 Lobster

9 Franchise

10PT Serif

FREE

Best and worst Typeface

httpabsolutegraphixcoukbestworstfontsaspstrID=Guest

Best and worst Typeface Top 10 web fonts designer love (Free)

1 Myriad Pro

2 League Gothic

3 Cabin

4 Corbel

5 Museo Slab

6 Bebas Neue

7 Ubuntu

8 Lobster

9 Franchise

10PT Serif

FREE

Best and worst Typeface Top 10 web fonts designer love (Free)

1 Myriad Pro

2 League Gothic

3 Cabin

4 Corbel

5 Museo Slab

6 Bebas Neue

7 Ubuntu

8 Lobster

9 Franchise

10PT Serif

FREE

Best and worst Typeface Top 10 web fonts designer love ($$$)

1 Helvetica

2 Gotham

3 DIN

4 Futura

5 Neo Sans

6 Adobe Caslon

7 Skolar

8 Kautiva

9 Caecilia

10Fedra Sans

$$$

Web Typography

A guide to Web typography Best Typeface and size

Contrast Body Verdana Myriad Pro amp Helvetica

Size Heading Museo Slab League Gothic

Hierarchy Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)

Space

Myriad Pro 16pt (Body text)Myriad Pro 24pt (Subheading)Myriad Pro 40pt (Heading)Myriad Pro 64pt (Sub title)Myriad Pro 104pt (Title)

Web Design (The Surface Plane)The Color Wheel

WarmCool

Complementary color scheme

Analogous color scheme

P

P

P

S

S

S

S S

S

T T

retreat advance

Web Design (The Surface Plane)Colour Combinations

Active Vibrant

Rich Muted Calm

Pastel

Natural

1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement

2Dominant or main colour This colour defines the communicative values of the combination

3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination

Web Design (The Surface Plane)Application Adobe Kuler

After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color

Web Design (The Surface Plane)The Color Wheel

WarmCool

Complementary color scheme

Analogous color scheme

P

P

P

S

S

S

S S

S

T T

retreat advance

Web Design (The Surface Plane)Colour Combinations

Active Vibrant

Rich Muted Calm

Pastel

Natural

1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement

2Dominant or main colour This colour defines the communicative values of the combination

3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination

Web Design (The Surface Plane)Application Adobe Kuler

After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color

Web Design (The Surface Plane)Colour Combinations

Active Vibrant

Rich Muted Calm

Pastel

Natural

1Subordinate or base colour This is a visually weak or subordinate colour It should contrast or complement

2Dominant or main colour This colour defines the communicative values of the combination

3Accent or highlight colour The accent colour can be sympathetic to the subordinate or dominant colour Or instead you may choose an accent colour that is visually strong and striking and appears to compete with the dominant colour This can provide tension within a combination

Web Design (The Surface Plane)Application Adobe Kuler

After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color

Web Design (The Surface Plane)Application Adobe Kuler

After downloading Switchboard from Adobe Labs users using the desktop version of Kuler can export a color scheme straight into Adobe Photoshop Adobe Illustrator and Adobe InDesign Kuler is a Mauritian Creole word for color

Web Design (The Surface Plane)Application httpline25com

httpline25comarticles10-time-saving-online-color-tools-for-web-designers

The meaning of colour

httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures

The meaning of colour

REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold

httpchangingmindsorgdisciplinescom

municationcolor_effecthtm

Web Design (The Surface Plane)A varicolored showcase

REd means

- love

- strength

- power

- energy

- leadership

- excitement

associate

- boldness

- excitement

- desire

The meaning of colour

httpwwwinformationisbeautifulnetvisualizationscolours-in-cultures

The meaning of colour

REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold

httpchangingmindsorgdisciplinescom

municationcolor_effecthtm

Web Design (The Surface Plane)A varicolored showcase

REd means

- love

- strength

- power

- energy

- leadership

- excitement

associate

- boldness

- excitement

- desire

The meaning of colour

REDwarmth love anger danger boldness excitement speed strength energy determination desire passion courage socialismPINKfeminine love caring nurtureORANGEcheerfulness low cost affordability enthusiasm stimulation creativity aggression food halloween liberal (politics)YELLOWattention-grabbing comfort liveliness cowardice hunger optimism overwhelm Summer comfort liveliness intellect happiness energy conflictGREENdurability reliability environmental luxurious optimism well-being nature calm relaxation Spring safety honesty optimism harmony freshnessBLUEpeace professionalism loyalty reliability honor trust melancholia boredom coldness Winter depth stability professionalism conservatismPURPLEpower royalty nobility elegance sophistication artificial luxury mystery royalty elegance magicGRAYconservatism traditionalism intelligence serious dull uninterestingBROWNrelaxing confident casual reassuring nature earthy solid reliable genuine Autumn enduranceBLACKElegance sophistication formality power strength illegality depression morbidity night deathWHITECleanliness purity newness virginity peace innocence simplicity sterility snow ice cold

httpchangingmindsorgdisciplinescom

municationcolor_effecthtm

Web Design (The Surface Plane)A varicolored showcase

REd means

- love

- strength

- power

- energy

- leadership

- excitement

associate

- boldness

- excitement

- desire

Web Design (The Surface Plane)A varicolored showcase

REd means

- love

- strength

- power

- energy

- leadership

- excitement

associate

- boldness

- excitement

- desire

Web Design (The Surface Plane)A varicolored showcase

Yellow means

- happiness

associate

- liveliness

- curiosity

- amusement

- joy

- intelligence

- brightness

- caution

Web Color A varicolored showcase

Orange means

- cheerfulness

- creativity

associate

- friendliness

- confidence

- playfulness

- courage

- steadfastness

Web Design (The Surface Plane)A varicolored showcase

Purple associate

- power

- nobility and wealth

Wisdom

- royalty

- independence

- nobility

- luxury

- ambition

- dignity

- magic

- mystery

prototype

Web Design (The Surface Plane)A varicolored showcase

Green means

- harmony

- nature

- healing

- life

- food

- health

associate

- money

Web Design (The Surface Plane)A varicolored showcase

Blue is

- sky

- sea

associate

- depth

- stability

- tranquility

- calmness

prototype

Web Design (The Surface Plane)A varicolored showcase

Brown means

- earthiness

- nature

- durability

- tribal

- comfort

- reliability

associate

- relaxation

- confidence

Web Design (The Surface Plane)A varicolored showcase

White means

- purity

- innocence

- wholeness

- completion

associate

- snow

- pearl

- chalk

- milk white

- lily

- smoke

httpwwwawwwardscom50-fantastic-white-web-designshtml

Web Design (The Surface Plane)Colour Summary

Composition Combinations Associate

Complementary amp Analogous Active Vibrant Red boldness excitement desire

Warm amp Cool Pastel Yellow liveliness curiosity amusement

Retreat amp Advance Rich Blue depth stabilitytranquility

primary secondary tertiary colour

Muted Calm Green life food health

Natural White snow pearl chalk

Web Design (The Surface Plane)Web user interface Learning Site

httpslearnablecom

httpwwwriteduili

httpwwwblocio

httpcodeyearcom

httplearncsstutspluscom

httpwwwpathwrightcom

httphackerbuddycom

httpwwwbloomfirecom

httpteamtreehousecom

httpwwwcodeschoolcom

httpwwwwebcoursesbangkokcom

httpwwwceolearningnetworkcom

Ff

Sales pitcheg 30 Days to Learn HTML

httpslearnablecom

Web Design (The Surface Plane)Web user interface Learning Site

httpslearnablecom

httpwwwriteduili

httpwwwblocio

httpcodeyearcom

httplearncsstutspluscom

httpwwwpathwrightcom

httphackerbuddycom

httpwwwbloomfirecom

httpteamtreehousecom

httpwwwcodeschoolcom

httpwwwwebcoursesbangkokcom

httpwwwceolearningnetworkcom

Ff

Sales pitcheg 30 Days to Learn HTML

httpslearnablecom

httpslearnablecom

httpwwwriteduili

httpwwwblocio

httplearncsstutspluscom

httpwwwpathwrightcom

httphackerbuddycom

httpwwwbloomfirecom

httpteamtreehousecom

httpwwwcodeschoolcom

httpwwwwebcoursesbangkokcom

httpwwwceolearningnetworkcom

Web user interface Design patternsMartin Weliersquos patterns

1 Martin Weliersquos UI patterns2 Jennifer Tidwellrsquos UI Design Patterns3 Sari Laakso User Interface Design Patterns4 The Design of Sites Patterns Principles and

Processes for Crafting a Customer-Centered Web Experience by van Duyne Landay and Hong

5 Yahoo Design Pattern Library

httpboxesandarrowscomui-pattern-documentation-review

Web Design (The Surface Plane)Martin Weliersquos patterns

httpui-patternscompatterns

Web Design (The Surface Plane)UI Design patterns

httpui-patternscompatterns

12 Standard Screen Patterns

Yahoo Design Pattern Library

Design Showcase

Web Design (The Surface Plane)Emerging trends in web design

1 Big Background Images HTML5 and JavaScript replace Flash

2 Responsive and Mobile First Design

3 Scrolling Grids and Infinite Scrolling Parallax scrolling Creative navigations

http99designscomdesigner-blog20130221web-design-trends-for-2013

Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1

httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design

httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design

Emerging trends in web designBig Background Images HTML5 and JavaScript replace Flash 1

httpdesignbeepcom2012030850-creative-use-of-large-background-images-in-web-design

httpwebdesignledgercominspiration20-great-examples-of-big-images-in-web-design

Emerging trends in web designResponsive and Mobile First Design

httpwebdesignledgercominspiration21-fresh-examples-of-responsive-web-design

2

Emerging trends in web designScrolling cinematic and storytelling experience

httpats-vs-worldcadillaccommonaco

3

Emerging trends in web designScrolling Grids and Infinite Scrolling

httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs

3

Emerging trends in web designScrolling Grids and Infinite Scrolling

httpinspirationfeedcominspirationwebsites-inspiration35-inspirational-grid-based-website-designs

3

Emerging trends in web designScrolling Parallax scrolling 3

httpwwwawwwardscom30-great-websites-with-parallax-scrollinghtml

Emerging trends in web designScrolling Creative navigations

http99designscomdesigner-blog20130221web-design-trends-for-2013

3

Web Design (The Surface Plane)New tools for web production

Classic toolsPhotoshop illustrator Indesign Dreamwaver Firework Flash

Modern web toolsMuse Edge

Digital Publishing toolsIndesign

Presentation toolsKeynote PowerpointClickable PDF

Theme toolsArtisteer

Web base toolsCodiqa Theme roller Phone Gap

Prototype toolsAxure protoio fieldtestapp

Web Design (The Surface Plane)New tools for web production

Classic toolsPhotoshop illustrator Indesign Dreamwaver Firework Flash

Modern web toolsMuse Edge

Digital Publishing toolsIndesign

Presentation toolsKeynote PowerpointClickable PDF

Theme toolsArtisteer

Web base toolsCodiqa Theme roller Phone Gap

Prototype toolsAxure protoio fieldtestapp

Modern web tools MUSE

Modern web tools Edge Animate

Modern web tools Edge Animate

Theme toolsArtisteer

Prototype toolsAxure

Prototype toolsprotoio

Prototype toolsfieldtestapp

Web Design (The Skeleton Plane)First Principles of Interaction Design

1Aesthetics

2Anticipation

3Autonomy

4Consistency

5Customization amp defaults

6Envisioning information

7Explorable interface

8Fittrsquos law

9Affordance amp feedback

10Memorability

11Metaphors

12Readability

13Undo

1 Aestheticsimplicit and explicit communicationcontribute to user experience

1 Aestheticsimplicit and explicit communicationcontribute to user experience

2 Anticipationanticipate userrsquos wants and needs

3 Autonomyuser autonomy (self governing) with status update

4 Consistencylooks feel and behaves the same

5 Customization amp Defaultmake assumption of usage but donrsquot mandate it

3 Autonomyuser autonomy (self governing) with status update

4 Consistencylooks feel and behaves the same

5 Customization amp Defaultmake assumption of usage but donrsquot mandate it

4 Consistencylooks feel and behaves the same

5 Customization amp Defaultmake assumption of usage but donrsquot mandate it

5 Customization amp Defaultmake assumption of usage but donrsquot mandate it

6 Envisioning informationdonrsquot overwhelm user with data present them in an easy way

7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in

8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage

9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button

Provide handles to work and manipulateKeep user informed what its doing and has done

10 Memorabilityreduce needs for user to memorize

11 Metaphorsevoke the familiar simplify complex tasks

12 Readabilitytext has high contrast black text on white is the best

7 Explorable interfacewell marked roads and landmarks for explorationdonrsquot trap user with a single path but offer path of least resistanceallow a way out but make it easier to stay in

8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage

9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button

Provide handles to work and manipulateKeep user informed what its doing and has done

10 Memorabilityreduce needs for user to memorize

11 Metaphorsevoke the familiar simplify complex tasks

12 Readabilitytext has high contrast black text on white is the best

8 Fittrsquos LawFrequency of use Traveling time of cursorStep of usage

9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button

Provide handles to work and manipulateKeep user informed what its doing and has done

10 Memorabilityreduce needs for user to memorize

11 Metaphorsevoke the familiar simplify complex tasks

12 Readabilitytext has high contrast black text on white is the best

9 Affordance amp feedbackhttpdribbblecomsearchpage=4ampq=button

Provide handles to work and manipulateKeep user informed what its doing and has done

10 Memorabilityreduce needs for user to memorize

11 Metaphorsevoke the familiar simplify complex tasks

12 Readabilitytext has high contrast black text on white is the best

10 Memorabilityreduce needs for user to memorize

11 Metaphorsevoke the familiar simplify complex tasks

12 Readabilitytext has high contrast black text on white is the best

11 Metaphorsevoke the familiar simplify complex tasks

12 Readabilitytext has high contrast black text on white is the best

12 Readabilitytext has high contrast black text on white is the best

13 Undoundo should be as easy or easier than do

About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design

About web user amp design processUser-centered design (UCD) 以用戶為中心的設計

bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process

bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users

httpwwwuserfocuscoukpdfFable_Traditional_CNpdf

Download

About web user amp design processThe elements of user experiencePersona and user scenarios in web designUser-centered design processEvaluating web design

About web user amp design processUser-centered design (UCD) 以用戶為中心的設計

bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process

bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users

httpwwwuserfocuscoukpdfFable_Traditional_CNpdf

Download

About web user amp design processUser-centered design (UCD) 以用戶為中心的設計

bull user-centered design (UCD) is a type of user interface design and a process in which the needs wants and limitations of end users of a product are given extensive attention at each stage of the design process

bull User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyse and foresee how users are likely to use a product but also to test the validity of their assumptions with regard to user behaviour in real world tests with actual users

httpwwwuserfocuscoukpdfFable_Traditional_CNpdf

Download

About web user amp design processThe elements of user experience

The Elements of User Experience User-Centered Design for the Web and Beyond

httpssetongjieducnliangshuanghci2013springreadingsthe-elements-of-user-experiencepdf

httpwwwjjgnetelements

Download

Software interface hypertext system

The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface This dual nature has led to much confusionas user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application The goal of this document is to define some of theseterms within their appropriate contexts and to clarify the underlying relationships amongthese various elements

Jesse James Garrettjjgjjgnet

Visual Design graphic treatment of interfaceelements (the look in look-and-feel)

Information Architecture structural designof the information space to facilitateintuitive access to content

Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality

Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding

Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs

User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site

Content Requirements definition ofcontent elements required in the sitein order to meet user needs

Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design visual treatment of textgraphic page elements and navigationalcomponents

Concrete

Abstracttim

eConception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site

This picture is incomplete The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development Also this model does not describe a development process nor does it define roles within auser experience development team Rather it seeks to define the key considerations that go into the development of user experience on the Web today

task-oriented information-oriented

30 March 2000

copy 2000 Jesse James Garrett httpwwwjjgnetia

The Strategy Plane 戰略層

The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate

What do we want to get out of this productWhat do our users want to get out of it

Defining the Strategy Product Objectives

- Business Goals- Brand Identity- Success Metrics

User Needs- User Segmentation- Usability and User- Research Creating- Personas

Team Roles and Process

The Strategy Plane 戰略層 Business Goals amp User research

The Scope Plane

The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site

For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope

what we want and what our users want we can figure out how to satisfy all those strategic objectives

Defining the Scope- Reason 1 So You

Know What Yoursquore Building

- Reason 2 So You Know What Yoursquore Not Building

Functionality and Content

Defining Requirements Functional Specifications

- Writing It Down Content Requirements Prioritizing

Requirements

The Structure Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart

Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user

Defining the Structure Interaction Design

- Conceptual Models- Error Handling

Information Architecture Structuring Content

- Architectural Approaches

- Organizing Principles- Language and

Metadata Team Roles and Process

Structure

hierarchical structure(most common)

matrix structure(product sites)

organic structures(entertainment or educational sites)

sequential structure(instructional material)

The Skeleton Plane

Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text

The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it

First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml

On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships

Defining the Skeleton Convention and

Metaphorrsquo Interface Design Navigation Design Information Design

- Wayfinding Wireframes

Interface Design Navigation Design Information Designinterface design

Global navigation

Local navigation

Supplementary navigation

Contextual navigation

Courtesy navigation

navigation design infomation design

The Surface Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Defining the Surface Making Sense of the

Senses - Smell and Taste- Touch- Hearing- Vision

Follow the Eye Contrast and Uniformity Internal and External

Consistency Color Palettes and

Typography Design Comps and Style

Guides

Determine how that arrangement should be presented visually

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

The Elements of User ExperienceA basic duality The Web was originally conceived as a hypertextual information spacebut the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface This dual nature has led to much confusionas user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application The goal of this document is to define some of theseterms within their appropriate contexts and to clarify the underlying relationships amongthese various elements

Jesse James Garrettjjgjjgnet

Visual Design graphic treatment of interfaceelements (the look in look-and-feel)

Information Architecture structural designof the information space to facilitateintuitive access to content

Interaction Design development ofapplication flows to facilitate user tasksdefining how the user interacts withsite functionality

Navigation Design design of interfaceelements to facilitate the users movementthrough the information architectureInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding

Functional Specifications feature setdetailed descriptions of functionality the sitemust include in order to meet user needs

User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site

Content Requirements definition ofcontent elements required in the sitein order to meet user needs

Interface Design as in traditional HCIdesign of interface elements to facilitateuser interaction with functionalityInformation Design in the Tuftean sensedesigning the presentation of informationto facilitate understanding

Web as software interface Web as hypertext system

Visual Design visual treatment of textgraphic page elements and navigationalcomponents

Concrete

Abstracttim

eConception

Completion

FunctionalSpecifications

ContentRequirements

InteractionDesign

InformationArchitecture

Visual Design

Information DesignInterface Design Navigation Design

Site ObjectivesUser Needs

User Needs externally derived goalsfor the site identified through user researchethnotechnopsychographics etcSite Objectives business creative or otherinternally derived goals for the site

This picture is incomplete The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development Also this model does not describe a development process nor does it define roles within auser experience development team Rather it seeks to define the key considerations that go into the development of user experience on the Web today

task-oriented information-oriented

30 March 2000

copy 2000 Jesse James Garrett httpwwwjjgnetia

The Strategy Plane 戰略層

The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate

What do we want to get out of this productWhat do our users want to get out of it

Defining the Strategy Product Objectives

- Business Goals- Brand Identity- Success Metrics

User Needs- User Segmentation- Usability and User- Research Creating- Personas

Team Roles and Process

The Strategy Plane 戰略層 Business Goals amp User research

The Scope Plane

The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site

For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope

what we want and what our users want we can figure out how to satisfy all those strategic objectives

Defining the Scope- Reason 1 So You

Know What Yoursquore Building

- Reason 2 So You Know What Yoursquore Not Building

Functionality and Content

Defining Requirements Functional Specifications

- Writing It Down Content Requirements Prioritizing

Requirements

The Structure Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart

Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user

Defining the Structure Interaction Design

- Conceptual Models- Error Handling

Information Architecture Structuring Content

- Architectural Approaches

- Organizing Principles- Language and

Metadata Team Roles and Process

Structure

hierarchical structure(most common)

matrix structure(product sites)

organic structures(entertainment or educational sites)

sequential structure(instructional material)

The Skeleton Plane

Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text

The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it

First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml

On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships

Defining the Skeleton Convention and

Metaphorrsquo Interface Design Navigation Design Information Design

- Wayfinding Wireframes

Interface Design Navigation Design Information Designinterface design

Global navigation

Local navigation

Supplementary navigation

Contextual navigation

Courtesy navigation

navigation design infomation design

The Surface Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Defining the Surface Making Sense of the

Senses - Smell and Taste- Touch- Hearing- Vision

Follow the Eye Contrast and Uniformity Internal and External

Consistency Color Palettes and

Typography Design Comps and Style

Guides

Determine how that arrangement should be presented visually

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

The Strategy Plane 戰略層

The scope is fundamentally determined by the strategy of the siteThis strategy incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well In the case of our store example some of the strategic objectives are pretty obvious Users want to buy products and we want to sell them Other objectivesmdashsuch as the role that dvertisingor content produced by our users plays in our business model for examplemdashmight not be so easy to articulate

What do we want to get out of this productWhat do our users want to get out of it

Defining the Strategy Product Objectives

- Business Goals- Brand Identity- Success Metrics

User Needs- User Segmentation- Usability and User- Research Creating- Personas

Team Roles and Process

The Strategy Plane 戰略層 Business Goals amp User research

The Scope Plane

The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site

For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope

what we want and what our users want we can figure out how to satisfy all those strategic objectives

Defining the Scope- Reason 1 So You

Know What Yoursquore Building

- Reason 2 So You Know What Yoursquore Not Building

Functionality and Content

Defining Requirements Functional Specifications

- Writing It Down Content Requirements Prioritizing

Requirements

The Structure Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart

Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user

Defining the Structure Interaction Design

- Conceptual Models- Error Handling

Information Architecture Structuring Content

- Architectural Approaches

- Organizing Principles- Language and

Metadata Team Roles and Process

Structure

hierarchical structure(most common)

matrix structure(product sites)

organic structures(entertainment or educational sites)

sequential structure(instructional material)

The Skeleton Plane

Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text

The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it

First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml

On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships

Defining the Skeleton Convention and

Metaphorrsquo Interface Design Navigation Design Information Design

- Wayfinding Wireframes

Interface Design Navigation Design Information Designinterface design

Global navigation

Local navigation

Supplementary navigation

Contextual navigation

Courtesy navigation

navigation design infomation design

The Surface Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Defining the Surface Making Sense of the

Senses - Smell and Taste- Touch- Hearing- Vision

Follow the Eye Contrast and Uniformity Internal and External

Consistency Color Palettes and

Typography Design Comps and Style

Guides

Determine how that arrangement should be presented visually

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

The Strategy Plane 戰略層 Business Goals amp User research

The Scope Plane

The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site

For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope

what we want and what our users want we can figure out how to satisfy all those strategic objectives

Defining the Scope- Reason 1 So You

Know What Yoursquore Building

- Reason 2 So You Know What Yoursquore Not Building

Functionality and Content

Defining Requirements Functional Specifications

- Writing It Down Content Requirements Prioritizing

Requirements

The Structure Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart

Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user

Defining the Structure Interaction Design

- Conceptual Models- Error Handling

Information Architecture Structuring Content

- Architectural Approaches

- Organizing Principles- Language and

Metadata Team Roles and Process

Structure

hierarchical structure(most common)

matrix structure(product sites)

organic structures(entertainment or educational sites)

sequential structure(instructional material)

The Skeleton Plane

Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text

The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it

First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml

On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships

Defining the Skeleton Convention and

Metaphorrsquo Interface Design Navigation Design Information Design

- Wayfinding Wireframes

Interface Design Navigation Design Information Designinterface design

Global navigation

Local navigation

Supplementary navigation

Contextual navigation

Courtesy navigation

navigation design infomation design

The Surface Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Defining the Surface Making Sense of the

Senses - Smell and Taste- Touch- Hearing- Vision

Follow the Eye Contrast and Uniformity Internal and External

Consistency Color Palettes and

Typography Design Comps and Style

Guides

Determine how that arrangement should be presented visually

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

The Scope Plane

The structure defines the way in which the various features and functions of the site fit together Just what those features and functions are constitutes the scope of the site

For example somecommerce sites offer a feature that enables users to save previously used shipping addresses so they can be used again Whether that featuremdashor any featuremdashis included on a site is a question of scope

what we want and what our users want we can figure out how to satisfy all those strategic objectives

Defining the Scope- Reason 1 So You

Know What Yoursquore Building

- Reason 2 So You Know What Yoursquore Not Building

Functionality and Content

Defining Requirements Functional Specifications

- Writing It Down Content Requirements Prioritizing

Requirements

The Structure Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart

Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user

Defining the Structure Interaction Design

- Conceptual Models- Error Handling

Information Architecture Structuring Content

- Architectural Approaches

- Organizing Principles- Language and

Metadata Team Roles and Process

Structure

hierarchical structure(most common)

matrix structure(product sites)

organic structures(entertainment or educational sites)

sequential structure(instructional material)

The Skeleton Plane

Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text

The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it

First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml

On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships

Defining the Skeleton Convention and

Metaphorrsquo Interface Design Navigation Design Information Design

- Wayfinding Wireframes

Interface Design Navigation Design Information Designinterface design

Global navigation

Local navigation

Supplementary navigation

Contextual navigation

Courtesy navigation

navigation design infomation design

The Surface Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Defining the Surface Making Sense of the

Senses - Smell and Taste- Touch- Hearing- Vision

Follow the Eye Contrast and Uniformity Internal and External

Consistency Color Palettes and

Typography Design Comps and Style

Guides

Determine how that arrangement should be presented visually

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

The Structure Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on performing some sort of function such as taking you to a shopping cart

Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Interaction design concerns the options involved in performing and completing tasks Information architecture deals with the options involved in conveying information to a user

Defining the Structure Interaction Design

- Conceptual Models- Error Handling

Information Architecture Structuring Content

- Architectural Approaches

- Organizing Principles- Language and

Metadata Team Roles and Process

Structure

hierarchical structure(most common)

matrix structure(product sites)

organic structures(entertainment or educational sites)

sequential structure(instructional material)

The Skeleton Plane

Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text

The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it

First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml

On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships

Defining the Skeleton Convention and

Metaphorrsquo Interface Design Navigation Design Information Design

- Wayfinding Wireframes

Interface Design Navigation Design Information Designinterface design

Global navigation

Local navigation

Supplementary navigation

Contextual navigation

Courtesy navigation

navigation design infomation design

The Surface Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Defining the Surface Making Sense of the

Senses - Smell and Taste- Touch- Hearing- Vision

Follow the Eye Contrast and Uniformity Internal and External

Consistency Color Palettes and

Typography Design Comps and Style

Guides

Determine how that arrangement should be presented visually

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Structure

hierarchical structure(most common)

matrix structure(product sites)

organic structures(entertainment or educational sites)

sequential structure(instructional material)

The Skeleton Plane

Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text

The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it

First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml

On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships

Defining the Skeleton Convention and

Metaphorrsquo Interface Design Navigation Design Information Design

- Wayfinding Wireframes

Interface Design Navigation Design Information Designinterface design

Global navigation

Local navigation

Supplementary navigation

Contextual navigation

Courtesy navigation

navigation design infomation design

The Surface Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Defining the Surface Making Sense of the

Senses - Smell and Taste- Touch- Hearing- Vision

Follow the Eye Contrast and Uniformity Internal and External

Consistency Color Palettes and

Typography Design Comps and Style

Guides

Determine how that arrangement should be presented visually

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

The Skeleton Plane

Beneath that surface is the skeleton of the site the placement of buttons controls photos and blocks of text

The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiencymdashso that you remember the logo and can find that shopping cart button when you need it

First Principles of Interaction DesignhttpwwwasktogcombasicsfirstPrincipleshtml

On the skeleton plane our concerns exist almost exclusively at the smaller scale of individual components and their relationships

Defining the Skeleton Convention and

Metaphorrsquo Interface Design Navigation Design Information Design

- Wayfinding Wireframes

Interface Design Navigation Design Information Designinterface design

Global navigation

Local navigation

Supplementary navigation

Contextual navigation

Courtesy navigation

navigation design infomation design

The Surface Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Defining the Surface Making Sense of the

Senses - Smell and Taste- Touch- Hearing- Vision

Follow the Eye Contrast and Uniformity Internal and External

Consistency Color Palettes and

Typography Design Comps and Style

Guides

Determine how that arrangement should be presented visually

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Interface Design Navigation Design Information Designinterface design

Global navigation

Local navigation

Supplementary navigation

Contextual navigation

Courtesy navigation

navigation design infomation design

The Surface Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Defining the Surface Making Sense of the

Senses - Smell and Taste- Touch- Hearing- Vision

Follow the Eye Contrast and Uniformity Internal and External

Consistency Color Palettes and

Typography Design Comps and Style

Guides

Determine how that arrangement should be presented visually

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

The Surface Plane

On the surface you see a series of Web pages made up of images and text Some of these images are things you can click on per- forming some sort of function such as taking you to a shopping cart Some of these images are just illustrations such as a photograph of a product for sale or the logo of the site itself

Defining the Surface Making Sense of the

Senses - Smell and Taste- Touch- Hearing- Vision

Follow the Eye Contrast and Uniformity Internal and External

Consistency Color Palettes and

Typography Design Comps and Style

Guides

Determine how that arrangement should be presented visually

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

About web user amp design processCreating Personas and scenarios

A persona is a fictional character constructed to represent the needs of a whole range of real users

By putting a face and a name on the disconnected bits of data from your user research and segmentation work personas can help ensure that you keep the users in mind during the design process

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Creating Personas Step 1 IDEOrsquos Ethnographic techniques

Shadowing (behavior observation)Observing people using products shopping going to hospitals taking the train using their cell phones

Behavioral mapping (semiotic amp comparative studies)Photographing people within a space such as a hospital waiting room over 2 or 3 days

Consumer journey (lifestyle observation)Keeping track of all the interactions a consumer has with a product service or space

Camera journals (visual journal)Asking consumers to keep visual diaries of their activities and impressions relating to a product

Extreme user interviews (user interview)Talking to people who really know ndash or know nothing ndash about a product or service and evaluating their experience using it

Storytelling (lifestyle narration)Prompting people to tell personal stories about their consumption experiences

Unfocus groups (non-user interview)Interviewing a diverse group of people for their opinion on a specific topic

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Creating Personas Step 2 Motivation Activities and Attitudes

MotivationAudiencersquos motivation leading to explore purchase and use of the selected product

ActivitiesAudiencersquos behavior patterns when explore purchase and use of the selected product

AttitudesAudiencersquos emotional response when explore purchase and use of the selected product

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Creating Personas Step 3 Identify audience GOALS experience goal end goal and life goal

Experience goalHow someone wants to feel while using a product or the quality of their interaction with the product

- Feel smart or in control

- Have fun

- Feel cool or hip or relaxed

- Remain focused and alert

Related to visceral processing how a user wants to feel

End goalA product or service can help accomplish such goals directly or indirectly

- Be aware of problems before they become critical

- Stay connected with friends and family

- Clear my to-do list by 500 every day

- Find music that Irsquoll love

- Get the best deal

Related to behavior what a user wants to do

Life goalLife goals describe a personarsquos long-term desires motivations and self- image attributes which cause the persona to connect with a product

- Live the good life

- Succeed in my ambitions to

- Be a connoisseur of

- Be attractive popular or respected by my peers

Related to reflection who a user wants to be

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Creating Personas Step 4 Designate persona type

A persona can include a photo some background information and brief descriptions of how the specified user type would use the products features

This helps the made-up user seem more real and worth referring to during development In fact to make them more real some teams post the written personas on the wall in a team area so they get to know the personas really well

httpwwwusercompersona-examplehtm

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Personas analysis

Task

A screen-based computer interface amp system for preparing and distributing menus

Personal Particulars

Work at Boise Controls a mid-sized manufacturer of electronic devices used in home security system

He supervises the chefs at each of the six sites and oversees cafeterias and catering services

Not a big computer user Fred can send email and use spreadsheets but often needs help from his assistant

Personal 55 years oldmarried three grown children Master degree from Johnson amp Wales University

Analysis

Task on high level management

Simple work flow Graphical user-interface Defaults Knowledgeable

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Persona-based scenarios

Persona-based scenarios are concise narrative descriptions of one or more personas using a product to achieve specific goals They allow us to start our designs from a story describing an ideal experience from different stakeholdersrsquo perspectives

We use scenario to describe how people using technology and analyzing how the technology is (or could be) used to reshape their activities

It also help designers to conceptualize and communicate their ideas before a system is built and its impacts felt

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Purpose of scenarios

1 Use scenario as a means of imagining ideal user interactions

2 Use it to define requirements

3 Use these requirements in turn to define the fundamental interaction framework of the productdeviceservice

4 Use the framework to enrich design details

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Types of scenarios

1 Problem ScenarioAim at showing the current situation and telling why the product application is necessary

2 Context ScenarioAim at telling stories about user benefits ideal user experience and how the product can best serve the needs and goals of the persona

3 Key Path amp Validation ScenarioAim at describing how the persona interacts with the product showing on screen features information and interaction design

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

About web user amp design processUser center design process

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

About web user User center design process

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

About web user User center design process research

Step 1Project Goal and Scenarios

A clear defined Project goal Aims and Objectives Situation Design scope Scenarios and User benefits

Step 2Requirements

Requirements are the conditions(including constraints) to achieve the project goal

Step 3Specifications

Specifications are detailed instructions of product attributes which are aligned with project requirement so as to ensure the project goal will be achieved

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

Web Design (The Surface Plane)

RequirementsWhat is important

User experience requirement (UX Flow BJ Fogg persuasive design Brand Experience)Usability requirement

(5rsquoe usability principles)

Function requirement(Core amp Extended features)Content requirement

(Mood board Voice of tone Information Architecture)Technology requirement

(Use of technology)

SpecificationsHow to implement

Form amp MetaphorVoice of tone (mood)LayoutContent (text video animation sound)InteractionImage graphic ChartFeaturesMenu Navigation

TechnologyNomenclatureTechnology requirement Strategy

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

UCD in practiceStep 1 Persona

2 typical users with different profiles who involved in using your mobile app Create the persona of these 2 users below

1Identify someone with similar portrait in real life and conduct One of Ethnographic research method mentioned in this practice

2Summarize research findings in terms of audience Motivation Activities and Attitudes

3Identify audience GOALS experience goal end goal and life goal

4Designate persona type

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

UCD in practiceStep 2 Scenarios interaction event

BEFORE SCENARIOS

2 typical events (one for each persona) where the persona are likely to experience the problem with these main tasks before the web is introduced

List out 10 bullet- points to explain each of 2 typical events for

Before Interactive events P1 Before Interactive events P2

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

UCD in practiceStep 3 Scenarios frustrations encountered

FRUSTRATIONS ENCOUNTERED

HOW THEY ARE SOLVED BY THE MOBILE APP

Frustrations encountered P1

Frustrations encountered P2

Solved by the web P1

Solved by the web P2

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

UCD in practiceStep 4 Scenarios interaction event

AFTER SCENARIOS

Think about 2 future events where the persona can successfully operate without frustrations due to the introduction of this web and performing those main tasks

List out at least 10 bullet- points to explain each of 2 future events

After Interactive events P1 After Interactive events P2

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

UCD in practiceStep 5 Scenarios storyboard

UCD in practiceStep 6 Prototype and Test amp Evaluate

UCD in practiceStep 6 Prototype and Test amp Evaluate

UCD in practiceStep 7 Test amp Evaluate

UserEmily

FacilitatorRichard

webClive

ObserverPeter

About web user amp design processEvaluating web design

bull Build your prototype for evaluation

bull Applying UI design principles

bull Use of UI pattern

bull Desirability Test

bull Usability Checklist Review

bull Usability Expert Review

Applying UI design principles

1Aesthetics

2Anticipation

3Autonomy

4Consistency

5Customization amp defaults

6Envisioning information

7Explorable interface

8Fittrsquos law

9Affordance amp feedback

10Memorability

11Metaphors

12Readability

13UndohttpwwwasktogcombasicsfirstPrincipleshtml

Use of UI pattern

Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context

About web user amp design processEvaluating web design

bull Build your prototype for evaluation

bull Applying UI design principles

bull Use of UI pattern

bull Desirability Test

bull Usability Checklist Review

bull Usability Expert Review

Applying UI design principles

1Aesthetics

2Anticipation

3Autonomy

4Consistency

5Customization amp defaults

6Envisioning information

7Explorable interface

8Fittrsquos law

9Affordance amp feedback

10Memorability

11Metaphors

12Readability

13UndohttpwwwasktogcombasicsfirstPrincipleshtml

Use of UI pattern

Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context

Applying UI design principles

1Aesthetics

2Anticipation

3Autonomy

4Consistency

5Customization amp defaults

6Envisioning information

7Explorable interface

8Fittrsquos law

9Affordance amp feedback

10Memorability

11Metaphors

12Readability

13UndohttpwwwasktogcombasicsfirstPrincipleshtml

Use of UI pattern

Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context

Use of UI pattern

Pattern Based Design is a formal way of documenting a solution to a common design problem Those patterns are ways to capture optimal solution to common usability or accessibility problem in a specific context

Build your prototype for evaluation

Proof-of-Principle Prototype (paper prototype) - Lo-fi Hi-fi wireframe - to validate the overall structure and workflow of your site

Desirability Test

Desirability Test

Usability Checklist Review

Usability Expert Review

NavigationIt refers to the ability to find onersquos way around the digital content

FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided

ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction

Help and SupportUser should be able to get ready access to assistance

LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided

ContentThe page content is appropriate and supporting user goal and expectation

FeedbackThe user should kept informed of what is going on at any time

ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site

Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple

Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence

Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc

Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill

Case study

bull Blackboard

bull 藝展計劃 ndash 香港藝術館實地應用指南

bull Pearson Houghton Mifflin Harcourt McGraw Hill

Case studyBlackboard

Usability Expert Review

NavigationIt refers to the ability to find onersquos way around the digital content

FunctionalityIt is the extent to which those features and functions that a user is likely to require are provided

ControlIt refers to the relationship between the user and the digital content where possible the user should be in control of the interaction

Help and SupportUser should be able to get ready access to assistance

LanguageThe digital content should speak the userrsquos language Terminology should be clear and consistent Jargon should be avoided

ContentThe page content is appropriate and supporting user goal and expectation

FeedbackThe user should kept informed of what is going on at any time

ConsistencyThe Digital content should be internally consistent Global elements such as Search fields should be in the same position throughout the site

Error HandlingWhere possible the digital content should prevent errors from occurring by being clear unambiguous and simple

Workflow supportThe system should enable users to carry out procedures in a way that suit their preferred work patterns and sequence

Visual ClarityThe digital content should be clear and uncluttered The purpose and function of each visual element should be apparent Fonts should be of a suitable size etc

Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill

Case study

bull Blackboard

bull 藝展計劃 ndash 香港藝術館實地應用指南

bull Pearson Houghton Mifflin Harcourt McGraw Hill

Case studyBlackboard

Case studyBlackboard HKIEd PolyUInteractive museum guidelearning company Pearson Houghton Mifflin Harcourt McGraw Hill

Case study

bull Blackboard

bull 藝展計劃 ndash 香港藝術館實地應用指南

bull Pearson Houghton Mifflin Harcourt McGraw Hill

Case studyBlackboard

Case study

bull Blackboard

bull 藝展計劃 ndash 香港藝術館實地應用指南

bull Pearson Houghton Mifflin Harcourt McGraw Hill

Case studyBlackboard

Case studyBlackboard

Case studyBlackboard Client stories

Case studyBlackboard Feature Showcase

Case studyBlackboard LearnPolyU

Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background

bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo

bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)

bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS

bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment

Aim

bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism

bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art

bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide

bull These guides are made available for secondary school students visiting the museum

Background information level

bull Basic information

bull Artist backgrounds

bull Historical cultural and aesthetic backgrounds

bull Forms and techniques

bull Themes and subject matters

bull Value and importance

Interactive applications level

bull Issues and discussion

bull Links

bull Responses

bull Games and activities

Flow

Case study Learning Company

bull Pearson

bull Houghton Mifflin Harcourt

bull McGraw Hill

Case study McGraw Hill Services-based education company

Case study 藝展計劃 ndash 香港藝術館實地應用指南 Background

bull The New Senior Secondary Curriculum (NSS) for F4 to F 6 students states that lsquovisual arts appreciation and criticism in context and visual arts makingrsquo as two major lsquointertwined and inter-related strandsrsquo

bull Visual Arts criticism has become a compulsory paper in the forthcoming 2012 Hong Kong Diploma of Secondary Education Examination (HKDSE)

bull Using community and authentic resources such as artworks in museums to teach Visual Arts is one of the strategies suggested by the NSS

bull Information technology such as using mobile device for interactive learning plays an important role in the new teaching environment

Aim

bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism

bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art

bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide

bull These guides are made available for secondary school students visiting the museum

Background information level

bull Basic information

bull Artist backgrounds

bull Historical cultural and aesthetic backgrounds

bull Forms and techniques

bull Themes and subject matters

bull Value and importance

Interactive applications level

bull Issues and discussion

bull Links

bull Responses

bull Games and activities

Flow

Case study Learning Company

bull Pearson

bull Houghton Mifflin Harcourt

bull McGraw Hill

Case study McGraw Hill Services-based education company

Aim

bull Develop a multimedia and interactive guide that can be used in museums for the learning of Visual Arts through art appreciation and criticism

bull 7 participants from the Hong Kong Institute of Education conducted in-depth studies of 10 selected works of the Hong Kong Museum of Art

bull Participantsrsquo findings are transformed to make relevant audio visual and textual materials in the form of a portable individual guide

bull These guides are made available for secondary school students visiting the museum

Background information level

bull Basic information

bull Artist backgrounds

bull Historical cultural and aesthetic backgrounds

bull Forms and techniques

bull Themes and subject matters

bull Value and importance

Interactive applications level

bull Issues and discussion

bull Links

bull Responses

bull Games and activities

Flow

Case study Learning Company

bull Pearson

bull Houghton Mifflin Harcourt

bull McGraw Hill

Case study McGraw Hill Services-based education company

Background information level

bull Basic information

bull Artist backgrounds

bull Historical cultural and aesthetic backgrounds

bull Forms and techniques

bull Themes and subject matters

bull Value and importance

Interactive applications level

bull Issues and discussion

bull Links

bull Responses

bull Games and activities

Flow

Case study Learning Company

bull Pearson

bull Houghton Mifflin Harcourt

bull McGraw Hill

Case study McGraw Hill Services-based education company

Interactive applications level

bull Issues and discussion

bull Links

bull Responses

bull Games and activities

Flow

Case study Learning Company

bull Pearson

bull Houghton Mifflin Harcourt

bull McGraw Hill

Case study McGraw Hill Services-based education company

Flow

Case study Learning Company

bull Pearson

bull Houghton Mifflin Harcourt

bull McGraw Hill

Case study McGraw Hill Services-based education company

Case study Learning Company

bull Pearson

bull Houghton Mifflin Harcourt

bull McGraw Hill

Case study McGraw Hill Services-based education company

Case study McGraw Hill Services-based education company

Learn Smart

Case study area9 Software technologies

Case study area9 Software technologies

Case study PEARSON Services-based education company

Case study Houghton Mifflin Harcourt Services-based education company