Clive pm presentation

Hanlun
e-learning
PM
Afternoon Session
2:00-5:00 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.
https://sites.google.com/site/sdcliveng/
1

Content
• Web Design (The Surface Plane) (visual design)
• About web user and design process
• Case study
2

Web Design
(The Surface Plane)
Web user interface | Emerging trends in web design | New tools
for web production | First Principles of Interaction Design ｜
3

Web Design (The Surface Plane)
The evolution of the web
1989
Thesimplesharingera
Theimage&tableera
Thedesignintroera
Thetechno-hypeera
Theusabilityera
Thewebexperienceera
TheRichInternetApplication
Thesocialwebera
201020051994
4

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
/ The Evolution of Web Design/
1992 / text-based page
Tim Berners Lee
5

/ The Evolution of Web Design/ 1998 /
Table-based and frame set designs
6

Web Design
/ The Evolution of Web Design/
2000 / Flash-based web designs
class com.example.Greeter extends MovieClip
{
public function Greeter() {}
public function onLoad():Void
{
var txtHello:TextField =
this.createTextField("txtHello", 0, 0, 0, 100,
100);
txtHello.text = "Hello, world";
}
}
10

/ The Evolution of Web Design/ 2000 / Dynamic HTML (DHTML)
15

/ The Evolution of Web Design/ 2005 / CSS-Based Design
Content
management
system
Joomla
Drupal
Wordpress
Changeable
skin
Generated
HTML
body{background-color:#d0e4fe;}
h1{color:orange;
text-align:center;}
p{font-family:"Times New Roman";
font-size:20px;}
16

http://webhostinggeeks.com/blog/web-design-evolution/
http://webdesignledger.com/inspiration/the-design-evolution-of-popular-websites
17

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
18

Web user interface / Design Elements
Ff
Contrast and Uniformity: layout & Grid
Color Palettes and Typography
Pattern & Texture
19

Web user interface / Design Elements /
layout & 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
20

layout & Grid : Applying the Golden Ratio to Web Layouts and elements
1.618
1.618
960 / 1.618 = 594
760 / 1.618 = 470
http://getratio.com/
http://uxmovement.com/content/applying-the-golden-ratio-to-web-
layouts-and-objects/
22

layout & Grid : 10 Website Layout Examples
URL:
http://designshack.net/articles/layouts/10-rock-
solid-website-layout-examples/
3D screen Featured Graphic Featured photo Full screen photo
Headline & Gallery
Three box
Advanced Grid
Five Boxes Fixed Sidebar
Power Grid
23

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

Five Boxes
The five boxes layout is simply
an evolution of the three
boxes layout. All of the same
logic applies, it’s 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 design!
Obviously, 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.
25

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 we’ve combined the
first two areas so that the left
half of the page differs from
the right.
26

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

Fixed Sidebar
Thus far all the sites that we’ve 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.
28

Headline & 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.
29

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

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

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

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

Grid & 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 & Gallery
34

Web : Typography @font-face Revolution
36

@font-face Revolution
Before After
622
2300
20000
37

A guide to Web typography
• Contrast
• Size
• Hierarchy
• Space
38

A guide to Web typography
/ Contrast (Readability易讀性)
World Wide Web
The WorldWideWeb (W3) is a wide-area
hypermedia information retrieval initiative
aiming to give universal access to a large
universe of documents.
Everything there is online about W3 is linked
directly or indirectly to this document,
including an executive summary of the project,
Mailing lists , Policy , November's W3 news ,
Frequently Asked Questions .
What's out there?
Pointers to the world's online information,
subjects , W3 servers, etc.
Help
on the browser you are using
Software Products
A list of W3 project components and their
current state. (e.g. Line Mode ,X11 Viola ,
NeXTStep , Servers , Tools , Mail robot ,
Library )
Technical
tired
39

Point Size
x-height
A guide to Web typography / Size ( legibility可讀性)
40

2mm
41

DISTANCE 57cm
40cm x-height = 2.0mm
x-height =
2.85mm
http://accessibility.gtri.gatech.edu/assistant/acc_info/font_size.php
42

Don’t set body text below 10px
*The best body text point size for the web:
Verdana :14.5pt/20px
Helvetica, Arial: 15pt/ 21px
Myriad Pro, Georgie: 16pt / 22px
Gill Sans: 17pt /23px
43

All-caps, or using italic for
sub-headings. Serif and
sans serif faces can also
be mixed to good effect.
A guide to Web typography / Hierarchy
44

Leonardo
Fibonacci
http://www.youtube.com/watch?v=1XSqcAq0A9k
• Fibonacci sequences (e.g. 16 – 24 – 40 – 64 – 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)
A guide to Web typography / Hierarchy Fibonacci sequences
45

A guide to Web typography / Space
46

Web Design
(The Surface Plane)
Theme
http://store1.adobe.com/cfusion/store/html/index.cfm?store=OLS-US&event=displayCategory&code=theme
http://www.adobe.com/type/fontfinder/
47

Best and worst Typeface?
http://absolutegraphix.co.uk/bestworstfonts.asp?strID=Guest
1
2
48

Best and worst Typeface ?
2
1
49

Best and worst Typeface
50

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
10.PT Serif
FREE
51

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
10.Fedra Sans
$$$
52

Web : Typography
A guide to Web typography Best Typeface and size
Contrast Body:
Verdana, Myriad Pro & 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)
53

The Color Wheel
WarmCool
Complementary
color scheme
Analogous color
scheme
P
P
P
S
S
S
S S
S
T T
retreat advance
54

Colour Combinations
Active / Vibrant
Rich Muted / Calm
Pastel
Natural
1.Subordinate, or base colour.
This is a visually weak or subordinate
colour. It should contrast or
complement.
2.Dominant or main
colour.
This colour defines
the communicative
values of the
combination.
3.Accent 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
55

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

Application:
http://line25.com
http://line25.com/articles/10-time-saving-online-color-tools-for-web-designers
57

The meaning of colour
http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
58

The meaning of colour
RED:
warmth, love, anger, danger, boldness, excitement, speed, strength, energy, determination, desire,
passion, courage, socialism
PINK:
feminine, love, caring, nurture
ORANGE:
cheerfulness, low cost, affordability, enthusiasm, stimulation, creativity, aggression, food,
halloween, liberal (politics)
YELLOW:
attention-grabbing, comfort, liveliness, cowardice, hunger, optimism, overwhelm, Summer, comfort,
liveliness, intellect, happiness, energy, conflict
GREEN:
durability, reliability, environmental, luxurious, optimism, well-being, nature, calm, relaxation,
Spring, safety, honesty, optimism, harmony, freshness
BLUE:
peace, professionalism, loyalty, reliability, honor, trust, melancholia, boredom, coldness, Winter,
depth, stability, professionalism, conservatism
PURPLE:
power, royalty, nobility, elegance, sophistication, artificial, luxury, mystery, royalty, elegance, magic
GRAY:
conservatism, traditionalism, intelligence, serious, dull, uninteresting
BROWN:
relaxing, confident, casual, reassuring, nature, earthy, solid, reliable, genuine, Autumn, endurance
BLACK:
Elegance, sophistication, formality, power, strength, illegality, depression, morbidity, night, death
WHITE:
Cleanliness, purity, newness, virginity, peace, innocence, simplicity, sterility, snow, ice, cold
http://changingminds.org/disciplines/communication/color_effect.htm
59

A varicolored showcase
REd
/ means
-love
-strength
-power
-energy
-leadership
-excitement
/ associate
-boldness
-excitement
-desire
60

Yellow
/ means
-happiness
/ associate
-liveliness
-curiosity
-amusement
-joy
-intelligence
-brightness
-caution
61

Web : Color /
Orange
/ means
-cheerfulness
-creativity
/ associate
-friendliness
-confidence
-playfulness
-courage
-steadfastness
62

Purple
/ associate
-power
-nobility and wealth
Wisdom
-royalty
-independence
-nobility
-luxury
-ambition
-dignity
-magic
-mystery.
prototype
63

Green
/ means
-harmony
-nature
-healing
-life
-food
-health
/ associate
-money
64

Blue
/ is
-sky
-sea
/ associate
-depth
-stability
-tranquility
-calmness
prototype
65

Brown
/ means
-earthiness
-nature
-durability
-tribal
-comfort
-reliability
/ associate
-relaxation
-confidence
66

White
/ means
-purity
-innocence
-wholeness
-completion
/ associate
-snow
-pearl
-chalk
-milk white
-lily
-smoke
http://www.awwwards.com/50-fantastic-white-web-designs.html
67

Colour Summary
Composition Combinations Associate
Complementary & Analogous Active / Vibrant Red : boldness , excitement,
desire
Warm & Cool Pastel Yellow : liveliness, curiosity,
amusement
Retreat & Advance Rich Blue : depth, stability
tranquility
primary secondary tertiary
colour
Muted / Calm Green : life, food, health
Natural White : snow, pearl, chalk
68

Web user interface / Learning Site
https://learnable.com
http://www.rit.edu/ili/
http://www.bloc.io
http://codeyear.com
http://learncss.tutsplus.com
http://www.pathwright.com
http://hackerbuddy.com
http://www.bloomfire.com
http://teamtreehouse.com
http://www.codeschool.com
http://www.webcoursesbangkok.com
http://www.ceolearningnetwork.com/
Ff
Sales pitch
e.g. 30 Days to Learn HTML
*
69

https://learnable.com
70

http://www.rit.edu/ili/
71

http://www.bloc.io
72

http://learncss.tutsplus.com
73

http://www.pathwright.com
74

http://hackerbuddy.com
75

http://www.bloomfire.com
76

http://teamtreehouse.com
77

http://www.codeschool.com
78

http://www.webcoursesbangkok.com
79

http://www.ceolearningnetwork.com/
80

Web user interface / Design patterns
Martin Welie’s patterns
1. Martin Welie’s UI patterns
2. Jennifer Tidwell’s UI Design Patterns
3. Sari Laakso User Interface Design Patterns
4. 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
http://boxesandarrows.com/ui-pattern-documentation-review/
81

Martin Welie’s patterns
http://ui-patterns.com/patterns
82

UI Design patterns
http://ui-patterns.com/patterns
83

12 Standard Screen Patterns
84

Yahoo! Design Pattern Library
85

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
http://99designs.com/designer-blog/2013/02/21/web-design-trends-for-2013/
87

Big Background Images / HTML5 and JavaScript replace Flash 1
http://designbeep.com/2012/03/08/50-creative-use-of-large-background-images-in-web-design/
http://webdesignledger.com/inspiration/20-great-examples-of-big-images-in-web-design
88

Responsive and Mobile First Design
http://webdesignledger.com/inspiration/21-fresh-examples-of-responsive-web-design
2
89

Scrolling / cinematic and storytelling experience
http://ats-vs-world.cadillac.com/#!/monaco
3
90

Scrolling / Grids and Infinite Scrolling
http://inspirationfeed.com/inspiration/websites-inspiration/35-inspirational-grid-based-website-designs/
3
91

Scrolling / Parallax scrolling 3
http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html
92

Scrolling / Creative navigations
http://99designs.com/designer-blog/2013/02/21/web-design-trends-for-2013/
3
93

New tools for web production
‣ Classic tools
Photoshop, illustrator,
Indesign, Dreamwaver,
Firework, Flash
‣ Modern web tools
Muse, Edge
‣ Digital Publishing tools
Indesign
‣ Presentation tools
Keynote, Powerpoint
Clickable PDF
‣ Theme tools
Artisteer
‣ Web base tools
Codiqa, Theme roller,
Phone Gap
‣ Prototype tools
Axure, proto.io,
fieldtestapp
94

Modern web tools
Edge Animate
96

Prototype tools
fieldtestapp
100

Web Design (The Skeleton Plane)
First Principles of Interaction Design
1.Aesthetics
2.Anticipation
3.Autonomy
4.Consistency
5.Customization & defaults
6.Envisioning information
7.Explorable interface
8.Fitt’s law
9.Affordance & feedback
10.Memorability
11.Metaphors
12.Readability
13.Undo
101

1. Aesthetics
implicit and explicit communication
contribute to user experience
102

2. Anticipation
anticipate user’s wants and needs
103

3. Autonomy
user autonomy (self governing) with
status update
104

4. Consistency
looks, feel and behaves the same
105

5. Customization & Default
make assumption of usage, but don’t
mandate it
106

6. Envisioning information
don’t overwhelm user with data,
present them in an easy way
107

7. Explorable interface
well marked roads and landmarks for exploration
don’t trap user with a single path, but offer path of least resistance
allow a way out but make it easier to stay in
108

8. Fitt’s Law
Frequency of use
Traveling time of cursor
Step of usage
109

9. Affordance & feedback
http://dribbble.com/search?page=4&q=button
Provide handles to work and manipulate
Keep user informed what its doing and has done
110

10. Memorability
reduce needs for user to memorize
111

11. Metaphors
evoke the familiar,
simplify complex tasks
112

12. Readability
text has high contrast, black
text on white is the best
113

13. Undo
undo should be as easy or easier than do
114

About web user & design process
The elements of user experience
Persona and user scenarios in web design
User-centered design process
Evaluating web design
115

User-centered design (UCD) 以⽤用⼾戶為中⼼心的設計
• 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.
• 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.
http://www.userfocus.co.uk/pdf/
Fable_Traditional_CN.pdf
Download
118

The elements of user experience
The Elements of User Experience:
User-Centered Design for the Web
and Beyond
http://sse.tongji.edu.cn/liangshuang/hci2013spring/readings/the-
elements-of-user-experience.pdf
http://www.jjg.net/elements/
Download
119

Software interface / hypertext system
121

The Elements of User Experience
A basic duality: The Web was originally conceived as a hypertextual information space;
but the development of increasingly sophisticated front- and back-end technologies has
fostered its use as a remote software interface. This dual nature has led to much confusion,
as user experience practitioners have attempted to adapt their terminology to cases beyond
the scope of its original application. The goal of this document is to define some of these
terms within their appropriate contexts, and to clarify the underlying relationships among
these various elements.
Jesse James Garrett
jjg@jjg.net
Visual Design: graphic treatment of interface
elements (the "look" in "look-and-feel")
Information Architecture: structural design
of the information space to facilitate
intuitive access to content
Interaction Design: development of
application flows to facilitate user tasks,
defining how the user interacts with
site functionality
Navigation Design: design of interface
elements to facilitate the user's movement
through the information architecture
Information Design: in the Tuftean sense:
designing the presentation of information
to facilitate understanding
Functional Specifications: "feature set":
detailed descriptions of functionality the site
must include in order to meet user needs
User Needs: externally derived goals
for the site; identified through user research,
ethno/techno/psychographics, etc.
Site Objectives: business, creative, or other
internally derived goals for the site
Content Requirements: definition of
content elements required in the site
in order to meet user needs
Interface Design: as in traditional HCI:
design of interface elements to facilitate
user interaction with functionality
Information Design: in the Tuftean sense:
designing the presentation of information
to facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,
graphic page elements and navigational
components
Concrete
Abstract timeConception
Completion
Functional
Specifications
Content
Requirements
Interaction
Design
Information
Architecture
Visual Design
Information Design
Interface Design Navigation Design
Site Objectives
User Needs
User Needs: externally derived goals
for the site; identified through user research,
ethno/techno/psychographics, etc.
Site Objectives: business, creative, or other
internally 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 a
user 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
© 2000 Jesse James Garrett http://www.jjg.net/ia/
122

The Strategy Plane 戰略層
The scope is fundamentally
determined by the strategy of
the site.
This 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 objectives—
such as the role that dvertising
or content produced by our
users plays in our business
model, for example—might not
be so easy to articulate.
What do we want to get out of this product?
What 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
125

The Strategy Plane 戰略層 / Business Goals & User research
126

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, some
commerce sites offer a feature
that enables users to save
previously used shipping
addresses so they can be used
again. Whether that feature—
or any feature—is 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 You’re
Building
- Reason #2: So You
Know What You’re Not
Building
‣ Functionality and
Content
‣ Defining Requirements
‣ Functional Specifications
- Writing It Down
‣ Content Requirements
‣ Prioritizing
Requirements
127

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
128

Structure
hierarchical structure
(most common)
matrix structure
(product sites)
organic structures
(entertainment or educational sites)
sequential structure
(instructional material)
129

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 efficiency—so that
you remember the logo and can
find that shopping cart button
when you need it.
First Principles of Interaction
Design:
http://www.asktog.com/
basics/firstPrinciples.html
On the skeleton plane, our concerns exist
almost exclusively at the smaller scale of
individual components and their
relationships.
‣ Defining the Skeleton
‣ Convention and
Metaphor’
‣ Interface Design
‣ Navigation Design
‣ Information Design
- Wayfinding
‣ Wireframes
130

Interface Design, Navigation Design, Information Design
interface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
131

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, 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.
‣ 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.
132

Creating 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.
133

Creating Personas Step 1
/ IDEO’s Ethnographic techniques
‣ Shadowing (behavior observation)
Observing people using products, shopping, going to hospitals,
taking the train, using their cell phones
‣ Behavioral mapping (semiotic & 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 – or know nothing – 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.
134

/ Motivation, Activities, and Attitudes
‣ Motivation
Audience’s motivation
leading to explore,
purchase, and use of the
selected product
‣ Activities
Audience’s behavior
patterns when explore,
selected product.
‣ Attitudes
Audience’s emotional
response when explore,
selected product.
135

/ Identify audience GOALS: experience goal, end goal, and life goal.
‣ Experience goal
How 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 goal
A 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
5:00 every day
- Find music that I’ll love
- Get the best deal
Related to behavior: what a
user wants to do
‣ Life goal
Life goals describe a
persona’s 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
136

/ Designate persona type
A persona can include a photo,
some background information
and brief descriptions of how
the specified user type would
use the product's 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.
http://www.user.com/persona-example.htm
137

Personas analysis
Task
A screen-based computer
interface & 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 old,married,
three grown children. Master
degree from Johnson & Wales
University.
Analysis
✓ Task on high level
management
✓ Simple work flow
✓ Graphical user-interface
✓ Defaults
✓ Knowledgeable
138

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 stakeholders’ 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.
139

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 product/
device/service
4. Use the framework to enrich design details
140

Types of scenarios
1. Problem Scenario
Aim at showing the
current situation and
telling why the product /
application is necessary.
2. Context Scenario
Aim 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 & Validation
Scenario
Aim at describing how
the persona interacts
with the product,
showing on screen
features, information
and interaction design.
141

User center design process
142

About web user
User center design process
143

About web user
User center design process / research
Step 1
Project Goal and Scenarios
A clear defined
Project goal, Aims and Objectives , Situation, Design scope,
Scenarios and User benefits
Step 2
Requirements
Requirements are the conditions
(including constraints) to achieve the project goal
Step 3
Specifications
Specifications are detailed instructions of
product attributes which are aligned with
project requirement so as to ensure the
project goal will be achieved
144

Requirements
What is important?
‣User experience
requirement
(UX, Flow, BJ Fogg,
persuasive design, Brand
Experience)
‣Usability requirement
(5’e, usability principles)
‣Function requirement
(Core & Extended features)
‣Content requirement
(Mood board, Voice of tone,
Information Architecture)
‣Technology requirement
(Use of technology)
Specifications
How to implement?
Form & Metaphor
Voice of tone (mood)
Layout
Content (text, video,
animation, sound)
Interaction
Image / graphic /
Chart
Features
Menu / Navigation
Technology
Nomenclature
Technology
requirement
Strategy
145

UCD in practice
Step 1 Persona
2 typical users with different
profiles who involved in using your
mobile app. Create the persona of
these 2 users below.
1.Identify someone with similar portrait in real
life and conduct One of Ethnographic
research method mentioned in this practice
2.Summarize research findings in terms of
audience Motivation, Activities, and Attitudes
3.Identify audience GOALS, experience goal,
end goal, and life goal.
4.Designate persona type
146

UCD in practice
Step 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
147

UCD in practice
Step 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
148

UCD in practice
Step 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
149

UCD in practice
Step 5 Scenarios / storyboard
150

UCD in practice
Step 6 Prototype and Test & Evaluate
151

UCD in practice
Step 7 Test & Evaluate
User
Emily
Facilitator
Richard
web
Clive
Observer
Peter
152

Evaluating web design
• Build your prototype for evaluation
• Applying UI design principles
• Use of UI pattern
• Desirability Test
• Usability Checklist Review
• Usability Expert Review
153

Applying UI design principles?
1.Aesthetics
2.Anticipation
3.Autonomy
4.Consistency
5.Customization & defaults
6.Envisioning information
7.Explorable interface
8.Fitt’s law
9.Affordance & feedback
10.Memorability
11.Metaphors
12.Readability
13.Undo
http://www.asktog.com/basics/ﬁrstPrinciples.html
154

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

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

Usability Checklist Review
158

Usability Expert Review
‣ Navigation
It refers to the ability to find one’s way around
the digital content.
‣ Functionality
It is the extent to which those features and
functions that a user is likely to require are
provided.
‣ Control
It refers to the relationship between the user
and the digital content, where possible, the
user should be in control of the interaction.
‣ Help and Support
User should be able to get ready access to
assistance.
‣ Language
The digital content should speak the user’s
language. Terminology should be clear and
consistent. Jargon should be avoided.
‣ Content
The page content is appropriate and
supporting user goal and expectation.
‣ Feedback
The user should kept informed of what is going
on at any time.
‣ Consistency
The Digital content should be internally
consistent. Global elements such as Search
fields should be in the same position
throughout the site.
‣ Error Handling
Where possible, the digital content should
prevent errors from occurring by being clear,
unambiguous and simple.
‣ Workflow support
The system should enable users to carry out
procedures in a way that suit their preferred
work patterns and sequence.
‣ Visual Clarity
The 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.
159

Case study
Blackboard / HKIEd / PolyU
Interactive museum guide
learning company / Pearson / Houghton Mifflin Harcourt /
McGraw Hill
160

Case study
• Blackboard
• 藝展計劃 – ⾹香港藝術館實地應⽤用指南
• Pearson / Houghton Mifflin Harcourt / McGraw Hill
161

Case study
Blackboard/ Client stories
163

Case study
Blackboard/ Feature Showcase
165

Case study
Blackboard / Learn@PolyU
166

Case study
藝展計劃 – ⾹香港藝術館實地應⽤用指南 Background
• The New Senior Secondary Curriculum (NSS) for F.4 to F. 6 students
states that ‘visual arts appreciation and criticism in context and visual
arts making’ as two major ‘intertwined and inter-related strands’.
• Visual Arts criticism has become a compulsory paper in the
forthcoming 2012 Hong Kong Diploma of Secondary Education
Examination (HKDSE).
• Using community and authentic resources such as artworks in
museums to teach Visual Arts is one of the strategies suggested by the
NSS.
• Information technology such as using mobile device for interactive
learning plays an important role in the new teaching environment.
167

Aim
• Develop a multimedia and interactive guide that can be used in
museums for the learning of Visual Arts through art appreciation and
criticism.
• 7 participants from the Hong Kong Institute of Education conducted
in-depth studies of 10 selected works of the Hong Kong Museum of
Art.
• Participants’ findings are transformed to make relevant audio, visual,
and textual materials in the form of a portable individual guide.
• These guides are made available for secondary school students visiting
the museum.
168

Background information level
• Basic information
• Artist backgrounds
• Historical, cultural and aesthetic backgrounds
• Forms and techniques
• Themes and subject matters
• Value and importance
169

Interactive applications level
• Issues and discussion
• Links
• Responses
• Games and activities
170

Case study
Learning Company
• Pearson
• Houghton Mifflin Harcourt
• McGraw Hill
172

Case study: McGraw Hill
Services-based education company
173

Case study: area9
Software technologies
175

Case study: PEARSON
176

Case study: Houghton Mifflin Harcourt
180

Clive pm presentation

More Related Content

Similar to Clive pm presentation (20)

More from Amau Mau (7)

Recently uploaded (20)

Clive pm presentation