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.â
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
How does it work?
user is looking at it.
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
20. 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.
23. #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.
24. 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
25. 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.
26. 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
29. 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. 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
45. 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.
46. 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
47.
48.
49. SPREADSHEETS
Use to track stories, needs, pain points, successes
Provides Quantitative layer over Qualitative information
More difficult to collaborate than affinity diagrams
Example
50. 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
51. WORKSHOP # 1 -
USABILITYyou?
Anything surprise
TEST
Any new insight?
Anything go wrong?
Was the site used in a way that you did
not expect?
Did you discover any usability problems?
52. 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
53. WORKSHOP # 1a -
USABILITYyou?
Anything surprise
TEST
Any new insight?
Anything go wrong?
Was the site used in a way that you did
not expect?
Did you discover any usability problems?
55. 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
56. WHY TEST?
If a user canât find what 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!
58. 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
59. 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.
60. 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?
61. 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.
62. 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
63. 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.
67. 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.
68.
69. 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.
71. 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
76. 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
77. PRINCIPLES
Unity
ReïŹnement
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.
81. SCALE
Describes the relative size of a design element in relation to
the other design elements and the composition as a whole.
82.
83.
84. 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.
90. 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.
93. 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.
94.
95. HIERARCHY
Eye looks for visual hierarchies for orientation.
Most important elements must be large enough to draw the
viewer closer.
Specifics follow.
96.
97. RELATIONSHIPS
Grouping and hierarchy are reinforced when visual
elements are related.
Position, size and value provide visual cues.
Alignment helps form visual relations.
98.
99. 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.
135. 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
136. 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
-
137. 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.
138.
139.
140. BREAKING THE
RULES
More sites now will put important content beneath the fold.
37signalsthe content is interesting. Fund
People will scroll if Acumen
Zipcare
141. 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.
142. 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.
143. CONSISTENT
LAYOUT
Header - mini versions of the homepage.
Footer - about house keeping and and legal matters.
Global Navigation
Local Navigation
144. 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
145. WHAT GOES INTO
A HEADER?
Site identity
Major navigation links/utility
navigation
Search box (not always)
Link back to home
146. POSSIBLE HEADER
COMPONENTS
Advertising Search This Site GO Cart
Individual designs rarely use them all. Navigation | Navigation | Navigation | Navigation
LOGO Site titles, section identity, or advertising
Selected Tab Unselected Tab Unselected Tab
149. 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.
152. 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
-
153. 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.
154. 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)
155. 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.
156. 3 GUIDELINES
1. Be succinct - write no more than
50% of the test 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.
157. 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.
158. 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.
159. 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 ïŹrst line
of a paragraph - use topic
sentences, one idea per paragraph.
- Use simple sentence structure -
avoid convoluted writing and
160. 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.
161. 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.
162. 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
164. 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.
165. 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 ïŹrst word an
important, information-carrying one.
166. 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
168. 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.
169. 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
170. WEB-SAFE FONTS
Come preinstalled on most computers.
Arial, Comic Sans MS, Courier,Georgia, Impact, Tahoma
Times New Roman, Verdana
171. @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. 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
176. 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,
porta blandit, metus dui imperdiet ipsum, id
id eleifend est nulla eu orci. Mauris lectus
eleifend est nulla eu orci. Mauris lectus eros,
eros, rutrum at lobortis ut, eleifend eget
eros. Nulla at felis eget neque aliquam rutrum at lobortis ut, eleifend eget eros. Nulla
convallis. at felis eget neque aliquam convallis.
177. 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
Lora Lora Lora Lora
Vollkorn Vollkorn Vollkorn Vollkorn
179. INCREASE
LEADING
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum,
porta blandit, metus dui imperdiet ipsum,
id eleifend est nulla eu orci. Mauris lectus
Line height should be at least 120% of font size.
eros, rutrum at lobortis ut, eleifend eget id eleifend est nulla eu orci. Mauris lectus
eros. Nulla at felis eget neque aliquam eros, rutrum at lobortis ut, eleifend eget
convallis.
eros. Nulla at felis eget neque aliquam
convallis.
184. MAINTAIN
LEGIBILITY
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent sodales, sapien ut
porta blandit, metus dui imperdiet ipsum, porta blandit, metus dui imperdiet ipsum,
Light colors are hard to read, even on white. Beware of #666.
id eleifend est nulla eu orci. Mauris lectus id eleifend est nulla eu orci. Mauris lectus
eros, rutrum at lobortis ut, eleifend eget eros, rutrum at lobortis ut, eleifend eget
eros. Nulla at felis eget neque aliquam eros. Nulla at felis eget neque aliquam
convallis. convallis.
189. 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
194. 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.
200. 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
201. 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.
Hinweis der Redaktion
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
The above example is from a website's "About Us" pages. The heatmap clearly shows users' tendency to read in an "F" pattern, and their focus on information that's presented in bulleted lists. In this case, there's also a small amount of attention to the "see also" area, but no viewing of the promotions in the rightmost column. \n
\n
\n
Web users tend to ignore everything that looks like advertisement and, what is interesting, they&#x2019;re pretty good at it. Although advertisement is noticed, it is almost always ignored. Since users have constructed web related schemata for different tasks on the Web, when searching for specific information on a website, they focus only on the parts of the page where they would assume the relevant information could be, i.e. small text and hyperlinks. Large colourful or animated banners and other graphics are in this case ignored.\nJakob Nielsen reports in his AlertBox entry that most users are essentially blind to ad banners. If they&#x2019;re looking for a snippet of information on a page or are engrossed in content, they won&#x2019;t be distracted by the ads on the side.The implication of this is not only that users will avoid ads but that they&#x2019;ll avoid anything that looks like an ad, even if it&#x2019;s not an ad. Some heavily styled navigation items may look like banners, so be careful with these elements.\n\n
On Web pages, we tend to focus on people&#x2019;s faces and eyes, which gives marketers a good technique for attracting attention. But our attraction to people&#x2019;s faces and eyes is only the beginning; it turns out we actually glance in the direction the person in the image is looking in.\n\n
Here&#x2019;s an eye-tracking study that demonstrates this. We&#x2019;re instinctively drawn to faces, but if that face is looking somewhere other than at us, we&#x2019;ll also look in that direction. Take advantage of this phenomenon by drawing your users&#x2019; attention to the most important parts of your page or ad. Eye-tracking heat map of a baby looking directly at us, from the UsableWorld study.\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Examples\nGood IA: Supermarket puts chocolate together with other snack foods\nBad IA: nAll grocery items by manufacturer \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
you can see parallels. similarities but travel on the web is magical. you just appear at the next point in your journey from page to page. no experience of the landscape unfolding before you as a series of landmarks.\n
\n
Consistency is the golden rul of interface design and way finding, but paradox is if everything looks the dame, THERE ARE NO EDGES. in a corporate site if y ou move from one region to another, from marketing to HR, you ought to notice that you just passed an important regional bouncary.\n
\n
The Paradox of Choice, Barry Schwartz give users choice is the matra but too many will overwhelm them.\n
As pages get more complex you risk overwhelming the user with the &#x201C;times Square effect&#x201D; of too many competing visual stimuli.\n
Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
\n
Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n
Orientation cuse are particularly important since users often arrive at a page without having followed a deliberate and repeatable pateh.\n