MONA 98765-12871 CALL GIRLS IN LUDHIANA LUDHIANA CALL GIRL
Clive pm presentation
1. 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
2. Content
• Web Design (The Surface Plane) (visual design)
• About web user and design process
• Case study
2
3. Web Design
(The Surface Plane)
Web user interface | Emerging trends in web design | New tools
for web production | First Principles of Interaction Design ｜
3
4. Web Design (The Surface Plane)
The evolution of the web
1989
Thesimplesharingera
Theimage&tableera
Thedesignintroera
Thetechno-hypeera
Theusabilityera
Thewebexperienceera
TheRichInternetApplication
Thesocialwebera
201020051994
4
10. 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
15. Web Design (The Surface Plane)
/ The Evolution of Web Design/ 2000 / Dynamic HTML (DHTML)
15
16. Web Design (The Surface Plane)
/ 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
18. 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
18
19. Web Design (The Surface Plane)
Web user interface / Design Elements
Ff
Contrast and Uniformity: layout & Grid
Color Palettes and Typography
Pattern & Texture
19
20. Web Design (The Surface Plane)
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
22. Web Design (The Surface Plane)
Web user interface / Design Elements /
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
23. Web Design (The Surface Plane)
Web user interface / Design Elements /
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
24. 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
25. 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
26. 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
27. 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
28. 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
29. 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
30. 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
31. 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
32. 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
33. 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
34. Web Design (The Surface Plane)
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
36. Web Design (The Surface Plane)
Web : Typography @font-face Revolution
36
37. Web Design (The Surface Plane)
@font-face Revolution
Before After
622
2300
20000
37
38. Web Design (The Surface Plane)
A guide to Web typography
• Contrast
• Size
• Hierarchy
• Space
38
39. Web Design (The Surface Plane)
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
41. 2mm
Web Design (The Surface Plane)
A guide to Web typography / Size ( legibility可讀性)
41
42. DISTANCE 57cm
40cm x-height = 2.0mm
x-height =
2.85mm
44cm x-height = 2.2mm
48cm x-height = 2.4mm
52cm x-height = 2.6mm
56cm x-height = 2.8mm
60cm x-height = 3.0mm
http://accessibility.gtri.gatech.edu/assistant/acc_info/font_size.php
Web Design (The Surface Plane)
A guide to Web typography / Size ( legibility可讀性)
42
43. Web Design (The Surface Plane)
A guide to Web typography / Size ( legibility可讀性)
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
44. 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
44
45. 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)
Web Design (The Surface Plane)
A guide to Web typography / Hierarchy Fibonacci sequences
45
46. Web Design (The Surface Plane)
A guide to Web typography / Space
46
47. 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
48. Web Design (The Surface Plane)
Best and worst Typeface?
http://absolutegraphix.co.uk/bestworstfonts.asp?strID=Guest
1
2
48
49. Web Design (The Surface Plane)
Best and worst Typeface ?
http://absolutegraphix.co.uk/bestworstfonts.asp?strID=Guest
2
1
49
50. Best and worst Typeface
http://absolutegraphix.co.uk/bestworstfonts.asp?strID=Guest
50
51. 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
52. 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
53. 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
54. 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
54
55. Web Design (The Surface Plane)
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
56. 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.
56
57. Web Design (The Surface Plane)
Application:
http://line25.com
http://line25.com/articles/10-time-saving-online-color-tools-for-web-designers
57
58. The meaning of colour
http://www.informationisbeautiful.net/visualizations/colours-in-cultures/
58
60. Web Design (The Surface Plane)
A varicolored showcase
REd
/ means
-love
-strength
-power
-energy
-leadership
-excitement
/ associate
-boldness
-excitement
-desire
60
61. Web Design (The Surface Plane)
A varicolored showcase
Yellow
/ means
-happiness
/ associate
-liveliness
-curiosity
-amusement
-joy
-intelligence
-brightness
-caution
61
62. Web : Color /
A varicolored showcase
Orange
/ means
-cheerfulness
-creativity
/ associate
-friendliness
-confidence
-playfulness
-courage
-steadfastness
62
63. Web Design (The Surface Plane)
A varicolored showcase
Purple
/ associate
-power
-nobility and wealth
Wisdom
-royalty
-independence
-nobility
-luxury
-ambition
-dignity
-magic
-mystery.
prototype
63
64. Web Design (The Surface Plane)
A varicolored showcase
Green
/ means
-harmony
-nature
-healing
-life
-food
-health
/ associate
-money
64
65. Web Design (The Surface Plane)
A varicolored showcase
Blue
/ is
-sky
-sea
/ associate
-depth
-stability
-tranquility
-calmness
prototype
65
66. Web Design (The Surface Plane)
A varicolored showcase
Brown
/ means
-earthiness
-nature
-durability
-tribal
-comfort
-reliability
/ associate
-relaxation
-confidence
66
67. Web Design (The Surface Plane)
A varicolored showcase
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
68. Web Design (The Surface Plane)
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
69. Web Design (The Surface Plane)
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
81. 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
82. Web Design (The Surface Plane)
Martin Welie’s patterns
http://ui-patterns.com/patterns
82
83. Web Design (The Surface Plane)
UI Design patterns
http://ui-patterns.com/patterns
83
87. 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
http://99designs.com/designer-blog/2013/02/21/web-design-trends-for-2013/
87
88. Emerging trends in web design
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
89. Emerging trends in web design
Responsive and Mobile First Design
http://webdesignledger.com/inspiration/21-fresh-examples-of-responsive-web-design
2
89
90. Emerging trends in web design
Scrolling / cinematic and storytelling experience
http://ats-vs-world.cadillac.com/#!/monaco
3
90
91. Emerging trends in web design
Scrolling / Grids and Infinite Scrolling
http://inspirationfeed.com/inspiration/websites-inspiration/35-inspirational-grid-based-website-designs/
3
91
92. Emerging trends in web design
Scrolling / Parallax scrolling 3
http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html
92
93. Emerging trends in web design
Scrolling / Creative navigations
http://99designs.com/designer-blog/2013/02/21/web-design-trends-for-2013/
3
93
94. Web Design (The Surface Plane)
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
108. 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
110. 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
115. 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
118. About web user & design process
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
119. About web user & design process
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
125. 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
127. 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
128. 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
130. 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
131. Interface Design, Navigation Design, Information Design
interface design
Global navigation
Local navigation
Supplementary navigation
Contextual navigation
Courtesy navigation
navigation design infomation design
131
132. 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.
132
133. About web user & design process
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
134. 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
135. Creating Personas Step 2
/ 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,
purchase, and use of the
selected product.
‣ Attitudes
Audience’s emotional
response when explore,
purchase, and use of the
selected product.
135
136. Creating Personas Step 3
/ 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
137. 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 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
138. 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
139. 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
140. 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
141. 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
142. About web user & design process
User center design process
142
144. 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
145. Web Design (The Surface Plane)
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
146. 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
147. 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
148. 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
149. 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
152. UCD in practice
Step 7 Test & Evaluate
User
Emily
Facilitator
Richard
web
Clive
Observer
Peter
152
153. About web user & design process
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
155. 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
156. 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
159. 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
160. Case study
Blackboard / HKIEd / PolyU
Interactive museum guide
learning company / Pearson / Houghton Mifflin Harcourt /
McGraw Hill
160
161. Case study
• Blackboard
• 藝展計劃 – ⾹香港藝術館實地應⽤用指南
• Pearson / Houghton Mifflin Harcourt / McGraw Hill
161
167. 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
168. 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
169. Background information level
• Basic information
• Artist backgrounds
• Historical, cultural and aesthetic backgrounds
• Forms and techniques
• Themes and subject matters
• Value and importance
169
