3. WELL, WHAT IS USABILITY?
“Usability really just means making sure that something
works well: that a person of average (or even below average)
ability and experience can use the thing - whether it's a Web
site, a fighter jet, or a revolving door - for its intended
purpose without getting hopelessly frustrated.”
(Steve Krug)
4. USABILITY TESTING
Testing is a technique to ensure that the intended users can
perform the intended tasks efficiently, effectively and
satisfactorily. Without frustration!
5. WHAT TOOLS ARE AVAILABLE?
Surveys
Interviews
Eyetracking studies
Usability testing
Online testing tools
6. SURVEYS
Allow users to review the site.
Distribute surveys.
Ask them to answer questions
Survey
7. INTERVIEWS
Allow users to review the site.
Make user comfortable.
Ask users questions.
See handout.
Interview
9. EYETRACKING AND THE EYE
Eyetracking is following the trail of where a person is looking.
Equipment can be built into the computer.
Eyetracking software keeps track of what’s on screen while
user is looking at it.
How does it work?
10. FIXATION
When the eye is resting on something.
Last between one-tenth and one-half.
Red spots are fixations.
11. SACCADES
The eye’s rapid movements from one fixation to the next.
Last between one-hundredth and one-tenth of a second.
Thin red line connecting the dots are saccades between
fixations.
Eyetracking Study
12. HEAT MAPS
Visualization technique for eyetracking studies.
A color-coded screenshot that shows the user’s fixations.
Red: where users looked most.
Yellow: indicate fewer fixations.
Blue: indicate least view areas.
Gray: no fixations. Facebook Heatmap
21. USABILITY TESTING
Series of tasks for participants to perform on an actual
website or prototype.
Tasks are formulated from user and business goals.
Measures the success of failure of a design.
What you need?
Pen and clipboard, computer with Internet connection,
perhaps a tape recorder.
23. #1 INTRODUCTION (5-10 MINS)
Make participant feel comfortable.
Let them know they can have a break any time.
If video taping, get permission.
Ask questions about them – include demographics,
occupation, education level, Internet experience.
Explain equipment if necessary.
Assure them that there is no right or wrong.
24. #2 TASKS (10 - 15 MINS )
Be sure to read the task aloud.
Encourage participant to think aloud.
Have a written version that you leave in front of the user.
DO NOT HELP THE USER THROUGH THE TASK.
No small talk!
25. TECHNOLOGY
Morae®: A recorder that captures onscreen activity of the
user’s computer and a camera video of the user.
Creates a synchronized index of events occurring behind the
scenes in applications and in the operating system.
Morae Website
26. COMMON ERRORS
Strategic Errors - premature testing, not enough time or
will to make changes.
Inadequate Planning - do a pilot test to uncover problems
with plan and materials.
Read script aloud.
Allow enough time between test sessions (minimum 30
minutes)
27. COMMON ERRORS
Poor Task Design - test core functionality and areas
identified as problematic.
If scenarios were used, convert into tasks to ensure key
interactions are studied.
Accidental Revelation - revealing too much. Watch your
language.
Unprofessional Demeanor - need to be professionally
detached and neutral. Don’t finish user’s sentence!
28. TEST PARTICIPANTS
Get representative users - Craig’s list, LinkedIn,employment
agencies, market research agencies.
Use questionnaires to screen.
Offer incentives.
Send reminders.
30. TEST PARTICIPANTS
Schedule 5 - 8 users.
Only need 5 - account for no shows, botched tests.
Test up to 3 groups of 5 - 1 test after iterations made.
36. QUANTITATIVE DATA
Any information that can be measured:
Ease of use
Satisfaction
Verbal descriptions of people’s experiences
Examples: The time it takes to complete a task, or the
completion rate of a task.
37. QUALITATIVE DATA
Information that requires interpretation
Identifies trends or categories of user’s behavior
Example: How well users can complete a task
Where they are encountering problems
Level of frustration
46. AFFINITY DIAGRAMS
Organizes items into common themes.
Helpful when you have a large amount of data.
You have many facts or ideas in apparent chaos.
When issues seem too large and complex.
When group consensus is needed.
47. AFFINITY DIAGRAMS
1. Record each idea on sticky note and layout on wall
2. Look for groups
3. Repeat till all notes are grouped
4. If a note seems to belong in two groups, make a second note
5. Discuss patterns and reason for groupings
6. Find headers
48.
49.
50. SPREADSHEETS
Use to track stories, needs, pain points, successes
Provides Quantitative layer over Qualitative information
More difficult to collaborate than affinity diagrams
Example
51. WORKSHOP # 1 - USABILITY TEST
Please break into twos. Person A tests Person B
Follow format:
Orientation
Tasks - read aloud to participant
- careful not to “help”
- be sure to ask about expectations
- let mistakes happen
Debriefing
52. WORKSHOP # 1 - USABILITY TEST
Anything surprise you?
Any new insight?
Anything go wrong?
Was the site used in a way that you did not expect?
Did you discover any usability problems?
53. WORKSHOP # 1a- USABILITY TEST
Please break into twos. Person B tests Person A
Follow format:
Orientation
Tasks - read aloud to participant
- careful not to “help”
- be sure to ask about expectations
- let mistakes happen
Debriefing
54. WORKSHOP # 1a - USABILITY TEST
Anything surprise you?
Any new insight?
Anything go wrong?
Was the site used in a way that you did not expect?
Did you discover any usability problems?
56. USER EXPERIENCE
"User experience isn't a layer or component of a product or
service. It's really about the design of the whole systems and
their interconnections."
- Andre Hinton, Senior IA at Vanguard
57. WHY TEST?
If a user can’t find a product, they won’t buy.
If they can’t find what they are looking for, they will look
elsewhere.
The holder of the mouse rules!
59. NAVIGATION
“Navigation isn’t just a feature of a website, it is the web site,
in the same way that the building, the shelves, and the
cash register are Sears. Without it, there’s no there there.”
-Steve Krug
60. WAYFINDING
Coined by Kevin Lynch in The Image of the City, 1960.
Describes the elements that allow us to navigate successfully
in cities and towns.
61. 4 CORE COMPONENTS
1. Orientation: Where am I now?
2. Route decisions: Can I find the way to where I want to go?
3. Mental mapping: Are my experiences consistent and
understandable enough to know where I’ve been and to
predict where I should go next?
4. Closure: Can I recognize that I have arrived in the right
place?
62. ELEMENTS OF MENTAL MAPS
1. Paths: streets, transit lines, canals, railroads - channels
that people regularly move.
2. Edges: physical barriers; walls, fences, rivers, shore -
boundaries that create linear breaks in continuity/separate
and relate two distinct regions.
3. Districts: Major sections of a city that have a common
identifying character: Chinatown, Wall Street, Greenwich
Village.
63. ELEMENTS OF MENTAL MAPS
4. Nodes: Intersections, enclosed squares, street corners,
subway stations - all serve as points of reference, transition
and destination.
5. Landmarks: Towering buildings, golden domes,
mountains, signs, storefronts, trees - physical objects that
serve as spatial reference points.
64. ON THE WEB
No sense of scale or movement in space.
No compass: no direction.
You are here: navigation interface.
Paths: lead the way: site navigation, breadcrumbs.
68. NODES
The local coffee shop or Times Square?
Too much choice causes stress, slows decisions, makes us
less satisfied and more likely to walk away.
69.
70. LANDMARKS “YOU ARE HERE”
Search function cuts across all the normal wayfinding
boundaries.
Orientation cues are particularly important since users often
arrive at a page without having followed a deliberate and
repeatable path.
72. SUMMARY
1. Paths: create consistent, well-marked navigation paths.
2. Regions: create a unique but related identity for each
site region.
3. Nodes: don’t confuse the user with too many choices.
4. Landmarks: use consistent landmarks in site navigation
and graphics to keep the user oriented.
Web Style Guide, 3rd Edition
74. ELEGANCE & SIMPLICITY
Use economy of expression.
Most powerful designs are result of a process of
simplification and refinement.
75. MINIMALISM
“A designer knows he has achieved perfection not when
there is nothing left to add, but when there is nothing left to
take away.”
- Anoine de Saint Exupéry
-
76.
77. ADVANTAGES
Approachability: easy to tell at a glance what it is and designs
invite further exploration.
Recognizability: recognized easily, easily assimilated,
understood and…REMEMBERED.
Immediacy: have greater impact because they can be
immediately recognized and understood with minimal effort.
Usability: simplicity enhances usability.
78. PRINCIPLES
Unity
Refinement
Fitness
All the elements must be unified to produce a coherent
whole. The parts and whole must be refined to focus user
attention and the fitness of the solution to the
communication problem must be ensured at every level.
79. HOW
Reduction
Regularization
Leverage
Reduce the design to its essence, regularize the elements of
the design, then combine them for maximum leverage.
81. SCALE, CONTRAST, PROPORTION
The subtle interrelationship of scale, contrast and
proportion can be seen in all harmonious designs.
82. SCALE
Describes the relative size of a design element in relation to
the other design elements and the composition as a whole.
83.
84.
85. CONTRAST
Results from the differences that can be seen between the
design elements.
Provides visual distinctions in: shape, size, color, texture,
position, orientation, and movement.
91. ORGANIZATION & STRUCTURE
Provide the user with visual pathways needed to experience
a site in a systematic way.
Must be introduced by establishing relationships among the
design elements.
94. GROUPING
Start by grouping display elements into higher order units.
(Note: words in a book are grouped into columns,
paragraphs, sections etc).
Higher-level structures orient the user.
Binds functional units tightly together.
Use spacing and alignment for effectiveness.
95.
96. HIERARCHY
Eye looks for visual hierarchies for orientation.
Most important elements must be large enough to draw the
viewer closer.
Specifics follow.
97.
98. RELATIONSHIPS
Grouping and hierarchy are reinforced when visual
elements are related.
Position, size and value provide visual cues.
Alignment helps form visual relations.
99.
100. BALANCE
Ensures that the elements remain stable in their position on
the page.
A composition is balanced when the visual weight of the
elements on either side of the piece are approximately equal.
136. Link to home page Primary location for search, shopping carts
LOGO
Calender | A-Z Index Search This Site GO
Navigation and search
The tagline would go here... Identity and titles
Header
Navigation links
Navigation | Navigation | Navigation | Navigation Tab navigation
Selected Tab Unselected Tab Unselected Tab
Navigation Home page > Section > Page Breadcrumb trail Alternate right location
Navigation for scan column
Navigation navigation and search
Local Navigation
Navigation
Navigation Common location for
Navigation banner ads
Navigation
Navigation
Search,
banner ads, Left scan column Right scan column
Main content column
contact (optional) (optional)
information
Contact information,
Footer Copyright 2012 | Company Name | Company Address | New York, NY | 555-555-5555
copyrights, dates
137. WEB STANDARDS
“The experienced web designer, like the talented newspaper
art director, accepts that many projects she works on will
have headers and columns and footers. Her job is not to
whine about emerging commonalities but to use them to
create pages that are distinctive, natural, brand-appropriate,
subtly memorable and quietly but unmistakably engaging.”
- Jeffery Zeldman
-
138. ABOVE THE FOLD
Above the fold - a graphic design concept that refers to the
location of an important news story or a visually appealing
photograph on the upper half of the front page of a
newspaper.
In web design, top 600 to 700 pixels (on 19” - 22” monitor)
Just a guideline.
139.
140.
141. BREAKING THE RULES
More sites now will put important content beneath the fold.
People will scroll if the content is interesting.
37signals Acumen Fund
Zipcare
142. PURPOSE OF GRAPHIC DESIGN
Unlike a print, web users interact with information.
GUI (graphic user interface) must convey function and
meaning.
Graphics are integral to the user’s experience.
143. PURPOSE OF GRAPHIC DESIGN
Create visual hierarchy so you can see what’s important.
Define functional regions of the page.
Group page elements that are related, so you can see
structure in the content.
144. CONSISTENT LAYOUT
Header - mini versions of the homepage.
Footer - about house keeping and and legal matters.
Global Navigation
Local Navigation
Content, Features, Products
Banner Ads
145. PAGES SHOULD INCLUDE
Informative title
Identity
Copyright statement
Link back to home
Navigational links
Heading or title to clarify content
Link to contact information
Alternate (alt) text identifying graphics on the page
146. WHAT GOES INTO A HEADER?
Site identity
Major navigation links/utility navigation
Search box (not always)
Link back to home
147. POSSIBLE HEADER COMPONENTS
Individual designs rarely use them all.
Advertising Search This Site GO Cart
Navigation | Navigation | Navigation | Navigation
LOGO Site titles, section identity, or advertising
Selected Tab Unselected Tab Unselected Tab
150. WHAT GOES INTO A FOOTER?
Contact information.
Copyright statement.
Page author.
Links to related sites or to larger enterprise.
Utility links can go here.
Redundant navigation for long pages.
153. CONTENT IS KING
“Ultimately, users visit your website for its content.
Everything else is just the backdrop. The design is there to
allow people access to the content.”
- Jakob Nielsen
-
154. PAPER VERSUS MONITOR
Because screen resolution is low (72 to 110 dpi), it places a
strain on the human eye.
Because we read on a screen, we are forced to view from a
more or less fixed position - with print you can read
anywhere in any position.
Can lay papers out on the floor. (Can’t do a search though.)
155. PAPER VERSUS MONITOR
Screen glare is not an obstacle when reading on paper.
Monitor Flick: looks like a solid image, but the screen is
refreshing so fast that you are fooled into seeing a solid
image, but the brain is alway correcting for the flicker.
Reading is 25% slower on a screen. (Jacob Nielsen)
156. READING ON THE WEB
- Scrolling is clumsy - people don’t like it and they lose their place.
- Readers scan on-screen, then print content for reading.
- Web reading is not stationary - text jumps from link to link and
page to page.
- Many web pages end up as fragments of information taken from
larger context.
157. 3 GUIDELINES
1. Be succinct - write no more than 50% of the text that you
would have used in print.
2. Write for scanability - use short paragraphs, subheadings,
bulleted lists.
3. Use hypertext to split up long information into multiple pages.
158. SCANABILITY
- Studies show that almost 80% of users initially scan a
webpage.
- Users pick out key words, sentences and paragraphs of
interest - They skip over the text they are not concerned with.
- Write articles with two or three levels of headlines for easy
scanability.
- Use general page headings plus subheads and sub-subheads
if needed.
159. SCANABILITY
- Use meaningful headlines - Tell the user what the page or
section is about.
- Use bulleted lists and similar design elements to break text
blocks.
- Use highlighting and emphasis to catch the user's eye.
- Be sure to distinguish from link colors so as to avoid confusion.
160. USE PLAIN LANGUAGE
- Start each page with the conclusion - most important material
should come up front.
- Users should be able to tell in a glance what the page is about.
- Users often only read the first line of a paragraph - use topic
sentences, one idea per paragraph.
- Use simple sentence structure - avoid convoluted writing and
complex words.
- Use caution with metaphors and humor - readers may take you
literally.
161. CHUNKING
- Use hyperlinks to make text short.
- Keep links visible, ideally above the fold.
- Split the information into “chunks” that focus on a certain topic.
- Move long, detailed info to secondary pages.
- Avoid using links to break long articles into separate pages - is
disruptive and makes printing difficult.
162. HEADLINES
- Online headlines are different than printed headlines.
- Online headlines are often displayed out of context: as part of
an article, in a search list, in a bookmark list.
- Headline must stand on it’s own even when the rest of content
is unavailable.
- Online headlines and their content are often hard to see in a
single glance on the window so it is difficult for the user to
learn enough just from the surrounding data.
163. LEGIBILITY
Use colors that have a high contrast between the text and the
background.
Use plain color-backgrounds or subtle patterns.
Use fonts big enough that people can read.
Make the text stand still – moving blinking or zooming text is
hard to read.
Keep sentences to 7 - 10 words as that is what the eye can
comfortably track.
165. LEGIBILITY
AVOID THE USE OF ALL CAPS FOR TEXT BECAUSE RESEARCH HAS SHOWN THAT IT IS
10 PERCENT SLOWER TO READ THAN TEXT IN MIXED CASES, BECAUSE IT IS HARDER
FOR THE EYE TO RECOGNIZE THE SHAPE OF WORDS AND CHARACTERS IN THE MORE
UNIFORM AND BLOCKY APPEARANCE. DON'T DO IT.
Legibility depends on the tops of all the letters.
Legibility depends on the tops of all the letters.
166. REMEMBER
Explain what the article is about in terms that relate to the user.
Write in plain language.
Avoid teasers that try to entice people to click.
Try to make the first word an important, information-carrying one.
167. WORKSHOP # 3 HEADLINES
Stay in your groups.
Remove every word you can from the passages below and create
a catching headline.
1. Government officials involved in the Olympics call it a
fiasco, that is, the extent of chaos that has thrown security
plans into disarray upon learning that of the shortfall of
civilian guards.
2. If “Ghosts in the Machine” an ambitious exhibition at the
Met were itself a machine, it would have lots of moving
parts but not all would be performing with equal
efficiency.
3. Apple announced that its’ bestselling MacBook laptop
just got its newest makeover. It’s a thing of beauty, clad in
aluminum like its more expensive Pro siblings.
169. TYPOGRAPHY
Typography is the process of arranging letters, many
terms are left over from the days of letterpress
On computers we use fonts, whether for digital printing or
on the web.
170. HISTORY OF WEB TYPOGRAPHY
At first browsers had no way of embedding fonts.
1995: Netscape introduces <font> tag
1998: CSS2 allows for more type configuration
2005: CSS3 introduces @font-face, allowing fonts to be
hosted online
171. WEB-SAFE FONTS
Come preinstalled on most computers.
Arial, Comic Sans MS, Courier,Georgia, Impact, Tahoma
Times New Roman, Verdana
172. @FONT-FACE
Lets the browser load a font from a remote server, meaning
that pages can display text in the specified font even if the
user does not have it installed on their computer.
Allows for greater design customization without sacrificing
accessibility or SEO.
175. SERIF VS SANS SERIF
Serif
Sans Serif
Slab Serif
Display
176. HEADERS VS COPY
You can use decorative fonts for headers...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sodales,
sapien ut porta blandit, metus dui imperdiet ipsum, id eleifend est nulla eu
orci. Mauris lectus eros, rutrum at lobortis ut, eleifend eget eros. Nulla at
felis eget neque aliquam convallis.
177. X-HEIGHT
Lorem ipsum Lorem ipsum
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum, id porta blandit, metus dui imperdiet ipsum, id
eleifend est nulla eu orci. Mauris lectus eros, eleifend est nulla eu orci. Mauris lectus eros,
rutrum at lobortis ut, eleifend eget eros. Nulla rutrum at lobortis ut, eleifend eget eros. Nulla
at felis eget neque aliquam convallis. at felis eget neque aliquam convallis.
178. OUR FAVORITES
Our favorite web fonts available for free from Google Fonts.
Open Sans Open Sans Open Sans Open Sans Open Sans
Lato Lato Lato Lato
Vollkorn Vollkorn Vollkorn Vollkorn
180. INCREASE LEADING
Line height should be at least 120% of font size.
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum, id
porta blandit, metus dui imperdiet ipsum, id
eleifend est nulla eu orci. Mauris lectus eros,
rutrum at lobortis ut, eleifend eget eros. Nulla eleifend est nulla eu orci. Mauris lectus eros,
at felis eget neque aliquam convallis. rutrum at lobortis ut, eleifend eget eros. Nulla
at felis eget neque aliquam convallis.
185. MAINTAIN LEGIBILITY
Light colors are hard to read, even on white. Beware of #666.
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum, id porta blandit, metus dui imperdiet ipsum, id
eleifend est nulla eu orci. Mauris lectus eros, eleifend est nulla eu orci. Mauris lectus eros,
rutrum at lobortis ut, eleifend eget eros. Nulla rutrum at lobortis ut, eleifend eget eros. Nulla
at felis eget neque aliquam convallis. at felis eget neque aliquam convallis.
Test your legibility with AccessColor.
190. COLUMN WIDTH
The eye can only comfortable track 7-10 words per line,
which is about 40 to 80 characters.
Multiply your text size by 30 to determine maximum
column width.
10px type x 30 = 300px column width
195. IMPLEMENT HIERARCHY
Use multiple typefaces to differentiate between elements on
the page.
Mix between categories (serif, sans serif, slab serif, display)
Don’t go too crazy! Don’t use more than 2 or 3 fonts.
201. WORKSHOP # 4 CREATE SITE
Please go into the group you worked with when creating
personas.
CREATE CONTENT FOR THE WEBSITE USING THE PERSONAS AND
SCENARIOS.
What content would the user you defined find on the site?
Establish content
Establish information architecture
Create site map
Create navigation
Create wireframes or other prototype
Do a prototype test
Make improvements
202. WORKSHOP #4 SCENARIOS
GROUP #1:
Site is to provide info for people starting own business; some of them
have experience in he business world; others this is their first
exposure to issues running a business.
GROUP #2:
Site is to provide info for people looking to place parents in assisted
living.
GROUP #3:
Site is to provide info for people looking to compare car insurance.
204. UNIVERSAL USABILITY
...is a goal, not an outcome.
“To achieve universal usability, designers need to ‘support a
wide range of technologies, to accommodate diverse users
and to help users brides the gap between what they know
and what they need to know.’”
Web Style Guide, 3rd Edition
206. ACCESSIBILITY
1999: World Wide Web Consortium establishes the Web
Accessibility Initiative (WAI).
Promotes best practices to make the web accessible to people
with disabilities.
Ensures that the tools and technologies that designers need
are available to create designs that work in different contexts.
Basically refers to how well a site can be used by as many
people as possible.
208. UNIVERSAL DESIGN
Not just alternative designs to meet specific needs.
Accounts for users of all ages, experience levels, and
physical or sensory limitations.
209. The Principles of
Powered door with sensors is
convenient for all shoppers,
especially if hands are full.
Universal Design
The design of products and environments
to be usable by all people, to the greatest
Public emergency stations utilize
recognized emergency colors
and a simple design to quickly
extent possible, without the need
convey function to passers-by.
for adaptation or specialized design.
Flexibility in Use
The design accommodates a wide range of
individual preferences and abilities.
Simple and Intuitive Use
Use of the design is easy to understand,
Equitable Use regardless of the user’s experience,
knowledge, language skills, or education level.
The design is useful and marketable to people
with diverse abilities.
A sequential-trip trigger on a nail
gun requires the user to 1 activate
the safety before 2 pulling the
trigger, minimizing accidents that
occur when a user accidentally
hits an object or person
while pulling the trigger. As per Center for Universal Design at North Carolina State University’s College of Design
(www.design.ncsu.edu/cud/about_udprinciples.htm)
2
Perceptible Information
The design communicates necessary information
Large-grip scissors accommodates use
effectively to the user, regardless of ambient Small bumps on a cell phone
keypad tell the user where
with either hand and allows alternation
conditions or the user’s sensory abilities. important keys are without requiring
1 between the two in highly repetitive tasks. the user to look at the keys.
Door lever does not require grip Wide gates at subway stations
strength to operate, and can even be accommodate wheelchair users as well
operated by a closed fist or elbow. as commuters with packages or luggage.
Tolerance for Error
The design minimizes hazards and the
adverse consequences of accidental or
unintended actions.
Size and Space
for Approach and Use
Center for
Low Physical Effort Appropriate size and space is provided for approach,
The design can be used efficiently and comfortably and reach, manipulation, and use regardless of user’s body
Universal Design Web:
design.ncsu.edu/cud
E-mail:
cud@ncsu.edu with a minimum of fatigue. size, posture, or mobility.
at NC State
500 copies of this public document were printed at a cost of $1.34 each.
Recycled paper and soy-based inks
211. #1 EQUITABLE USE
“The design is useful and marketable to people with diverse
abilities. Provide the same means of use for all users: identical
whenever possible; equivalent when not.”
212. #2 FLEXIBILITY IN USE
“The design accommodates a wide range of individual
preferences and abilities. Provide choice in methods of use.”
213. #3 SIMPLE AND INTUITIVE USE
“Use of the design is easy to understand, regardless of the user’s
experience, knowledge, language skills, or current concentration
level. Eliminate unnecessary complexity and arrange information
consistent with its importance.”
214. #4 PERCEPTIBLE INFORMATION
“The design communicates necessary information effectively to
the user, regardless of ambient conditions or the user’s sensory
abilities. Use different modes (pictorial, verbal, tactile) for
redundant presentation of essential information and provide
compatibility with a variety of techniques or devices used by
people with sensory limitations.”
215. PEOPLE WITH DISABILITIES
1 in 5 people in the United States.
Number of people with disabilities rose 25% in last decade.
In 2010 21.5 million people were visually impaired or blind.
216. TYPES OF DISABILITIES
Visual impairments
Hearing impairments
Mobile impairments
Cognitive impairments
224. USE DESCRIPTIVE HEADINGS
Helps users understand page structures.
Screen readers don’t look at web pages, they read HTML
code.
Can call up a list of on page headings and jump to the
section of a page
225. Here’s what this headings box for the BBC homepage looks like in JAWS, one of
the most popular screen readers:
226. WRITE DESCRIPTIVE LINK TEXT
Screen reader users can call up a list of on page links.
Avoid “Click Here”, “Read More”
227. Here’s what this links list dialog displays for the BBC homepage in JAWS:
228. PROVIDE INFORMATION IN LISTS
Screen readers call out the number of items in each list
before reading them, much like an answering machine.
Mark up is in code <li> tag
229. USE LOGICAL LINEARIZATION
Screen readers read top to bottom, left to right.
Avoid putting important information at the bottom (e.g.
instructions for forms).
230. USE SHORT SUCCINCT ALT TEXT
ALT text is a description of the images on a page that screen
readers read aloud.
Use succinct text to avoid long drawn out speech.
231. WRITE SHORT PARAGRAPHS
Conclusion first, followed by the what, why, when where
and how.
This allows users to quickly understand what the paragraph
is about.
This benefits sighted users as well.
232. WRITE DESCRIPTIVE PAGE TITLES
This is the first thing a screen reader user hears.
Helps orient the user.
233. COLOR BLINDNESS
Inability to perceive difference between some colors.
Affects 5 to 8% of males, 0.5% of females (Wikipedia).
Safest colors to use are black and white.
Use colors for emphasis, not visual cues.
Provide redundant cues (textures, text labels).
243. WORKSHOP # 1 TEST SITE
Please go into the group you worked with when creating
personas.
AFTER CREATING PROTOTYPE:
Do a prototype test with another group
Make improvements with original group
245. SIGN UP FORMS
Remove ALL barriers to account creation.
Don’t make them recreate what they’ve already done.
246.
247.
248. WHY FORMS EXIST
Every form exists for one of three main reasons:
- Commerce
- Community
- Productivity
Web From Design: Filling in the Blanks, Luke Wroblewski
249. Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks.
250. RELATIONSHIP
A form is a way to establish a relationship with
the user and the organization.
270. 6 COMPONENTS OF FORMS
Labels – tell users what the input fields mean
Input Fields – text fields, password fields, check boxes, radio
buttons, sliders, etc
Actions – when clicked these perform an action, such as
submitting a form
Help – provides assistance on how to fill out the form
Messages – provides feedback based on user input
Validation – ensures that data inputted conforms to acceptable
parameters
271. #1 LABELS
Words vs sentences
Try to use words, but if needed, add a phrase to eliminate
ambiguity
Sentence case vs. title case
Sentence case is slightly easier to read
AVOID ALL CAPS AS THEY ARE HARD TO SCAN
274. #2 INPUT FIELDS
Don’t invent new fields – simple is best
Distinguish which input fields are required – convention is
an asterisk *
Colons at the end of a label – matter of preference
Top vs left vs right alignment of labels- each has advantages
and disadvantages
275.
276. Vertical: when user types data their eyes are fixed across the
vertical axis at the left to the input field
277. Eye needs to jump from one field to the other. Too much distraction.
278. SELECT MENUS
Many choices in a small space.
Hard to use especially when there are many choices.
Easier to enter state or country code than to choose.
279.
280. RADIO BUTTONS
Easy to scan.
But if list is long, it’s hard for user to scan
Limit to groups of four to six options.
281.
282. CHECK BOXES
Allow for multiple selections.
Use single checkboxes for binary choices (yes, no).
283.
284. #3 ACTIONS
Avoid generic words like “Submit” as they lend a generic
impression of the form.
Use descriptive words such as “Join LinkedIn”.
285. PRIMARY VS. SECONDARY
Primary actions are links and buttons that perform
essential “final” functionality (Save, Submit).
Secondary actions allow users to retract data that they have
entered (Back, Cancel).
These should have less visual weight than primary actions
as they have undesired consequences.
288. #4 HELP
You should never have to explain how to use a form!
Use accompanying copy only where needed:
Such as WHY you need their phone number;
How a birth date will be used;
Link to Terms & conditions.
Copy is usually ignored so may it short and sweet.
Show an icon that users can click if they need help.
290. #5 MESSAGES
Error message – emphasize through color, recognizable
icons, placement, large font or a combination.
Success message - use to notify users they have reached a
meaningful milestone.
Encourages user to continue a filling out a lengthy form.
291. #6 VALIDATION
Use only where needed – excessive validation is as bad as
none.
Use only to confirm key points, ensuring realistic answers
and suggesting responses.
Use smart defaults – helps make the completion of the form
faster and more accurate
Pre-select user’s country based on IP address.
292. {
dynamic help
smart default
Uses dynamic validation and smart defaults
293. FORMS: THINGS TO CONSIDER
What you call the sign up form.
Where do you place the link?
If a user can’t find a sign up form, they can’t sign up!
Over 75% of websites place it in header.
Over 21% find a prominent place on the homepage.
Rarely placed in the sidebar.
294. 5%
2%
17%
18%
40%
18%
Create Account Register Join Sign Up Start Here Other
295. BOTTOM LINE ON SIGN UP FORMS
The registration link is titled “sign up” (40%) and placed in
the right upper corner.
Sign-up forms have a simplified layout to avoid distractions
for users (61%).
Sign-up forms are one-page-forms (93%).
Sign up forms attract visitors by explaining the benefits of
registration (41%).
296. BOTTOM LINE ON SIGN UP FORMS
Titles of the input fields are highlighted bold (62%).
No trend in the label alignment can be identified.
Designers tend to use few mandatory fields.
Designers tend to use few optional fields.
Vertically arranged fields are preferred to horizontally
arranged fields (86%).
http://uxdesign.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/
297. FURTHER READING
Forms That Work: Designing Web Forms for Usability,
Caroline Jarrett and Gerry Gaffney
Web Form Design, Filling in the Blanks, Luke Wroblewski
Signup Forms - Luke Wroblewski
298. WORKSHOP #4 US CENSUS
Please divide into three groups.
Design a web page for delivering the US Census
What special considerations will you make for business and user
needs?
Sketch quickly, write legibly
Try to approximate actual size of objects and fonts
You have 20 minutes
Hint: It’s probably some kind of form
299. WORKSHOP #4 US CENSUS
Considerations:
The census site must gather the following:
• Name • Gender • Age
• What the participant’s relationship to the householder is
Are there any special considerations to make towards business
objectives? How will the information be used or processed?
What affordances/signifiers will you make in your design to
accommodate diverse populations?
What happens after the form is submitted?
300. WORKSHOP #4 US CENSUS
Definition of householder:
The householder refers to the person (or one of the people)
in whose name the housing unit is owned or rented
(maintained) or, if there is no such person, any adult
member, excluding roomers, boarders, or paid employees.
If the house is owned or rented jointly by a married couple,
the householder may be either the husband or the wife.
The person designated as the householder is the "reference
person" to whom the relationship of all other household
members, if any, is recorded.
The number of householders is equal to the number of
households. Also, the number of family householders is
equal to the number of families.
Source: http://www.census.gov/population/www/cps/cpsdef.html
302. PRETTY THINGS WORK BETTER.
Norman D., 2004 Emotional Design: Why we love (or hate) everyday things
303. PROCESSING DESIGN
Self-image
Reflective
Memories
Usefulness
Behavioral
Performance
Visceral Appearance
Modified from Norman D., 2004 Emotional Design: Why we love (or hate) everyday things
318. REFLECTIVE LEVEL
Stays long than visceral level.
Sense of exclusivity.
Sensitive to experiences, training, education.
Cultural differences relevant.
324. CULTURAL COLOR THEORY
Red - China, prosperity, happiness/South Africa, mourning
Yellow - Egypt, mourning/Japan, courage
Green - Middle East luck/Indonesia, forbidden color
Black - China, trust, high quality
325. FURTHER READING
Thinking Fast and Slow, Kahneman, D. 2011
Emotional Design: Why we love (or hate) everyday things,
Norman, D. 2004
Designing for the Social Web, Porter, J. 2008
Mental Models: Aligning Design Strategy with Human
Behavior, Young, I. 2008
Neuro Web Design, Weinschenk, Ph.D., 2009
326. WORKSHOP #2 EMOTION & DESIGN
Break into three groups:
Find 3 sites that play well on emotions through design.
