4. COURSE OBJECTIVE:
To provide a foundation that will allow students to
successfully build a usable website. We will look at the
roles information architecture, navigation, design, and
writing play in creating a usable website. Additionally, we
will perform a usability test. Each class will have lecture
and workshop segments.
6. WORKSHOP #1
Please divide into three groups.
GROUP #1: realbusiness.com
GROUP #2: lifehacker.com
GROUP #3: getharvest.com
Answer:
What is the purpose of the site?
What can you do on the site?
What do you think the main goal of the site is?
Can you find the contact info?
14. Usability is “the extent to which a product can be used by
specified users to achieve specified goals with effectiveness,
efficiency and satisfaction in a specified context of use.”
(ISO 9241-11)
15. “In human-computer interaction and computer science,
usability usually refers to the elegance and clarity with
which the user interface of a computer program or a web
site is designed.”
(Wikipedia)
16. “...the measure of the quality of a user’s experience when
interacting with a product or system,” whether a Web site, a
software application, mobile technology, or any user-
operated device.”
(Usability.gov)
17. “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)
19. THINGS THAT MAKE US THINK:
Where do I start?
What do they do?
Clever names/Marketing induced names
Links that are not self evident
Navigation in non traditional places
Where’s the contact info?
Where do I sign in?
20. WHAT USERS LOOK FOR:
Ease of use
Speed
Practicality
Credibility
Consistency
Simplicity, simplicity, simplicity
22. HUMAN FACTORS
Forms the basis of usability testing.
Has its roots in military research.
Understanding how people think and interact with their
environment.
23. THE HISTORY OF USABILITY
The study of human factors dates back to World War II,
when the growing complexity of fighter planes created a
need for more user friendly designs.
25. HUMAN FACTORS SPECIALISTS:
Design products for improved safety & ease of use
Design systems to accommodate specific user groups
Raise productivity by improving human performance
Improve information displays to reduce human error
26. THREE MILE ISLAND
A control panel status made engineers think that a valve had
been engaged, while the status simply meant that the valve
had been attempted to be engaged.
33. AFFORDANCE
The perceived ability of an object to behave in a certain
•
way, by nature of its design.
•The quality of an object which allows one to perform an
action.
50. PUT IT IN CONTEXT
People need some way of understanding the product
or service.
Forget affordances: what people need are signifiers.
They are broader and richer.
They provide valuable clues to sift information.
51. DESIGN ELEMENTS
Websites rely on pictures and icons to convey messages.
Design elements that give the user context:
Navigation
Buttons
Icons
55. WORKSHOP #2
Scenario:
You’ve just rented a new apartment and your landlord told you to
open an account with ConEd to get your electricity turned on.
Go for it.
56. MENTAL MODELS
Our ideas of how things work.
Are an explanation of our thought process about how
something works.
Includes what we think is true, not necessarily what is
actually true.
57. Why, oh why, do people search for a website if
they already know its name?
www.bing.com
59. USER ACTIONS
Users plan actions based on their models.
People expect websites to act alike.
Goal is to create interfaces that match how people think
something should work.
61. DIAGNOSING PROBLEMS
Understanding the concept of mental models can help you
make sense of usability problems.
Users expect to know which elements on a page are clickable.
On e-commerce sites they expect to see photos.
Headings, labels and categories will differ depending on
target audience.
63. YOU HAVE LESS THAN TWO MINUTES TO
COMMUNICATE THE FIRST TIME A PROSPECTIVE
CUSTOMER VISITS YOUR WEBSITE.
Every page must justify its claim on their time. If a page
doesn’t do that immediately and clearly, users go
elsewhere. Most people don’t even bother scrolling to see
what’s farther down the page.
64. THE AVERAGE USER...
...will fail a third of the time when trying to complete a task.
...will choose sites that have proven useful in the past.
...will spend 1 minute 49 seconds on a site before abandoning.
...will visit 3.2 sites (besides search engines) to find a site.
...has only a 12% possibility of revisiting a site.
65. MORE ABOUT USERS...
Users don’t read they scan.
Users don’t make optimal choices.
Users don’t figure out how things work.
Users don’t always come through the homepage.
66. GUIDELINES
Let users know where they are and how to proceed.
Company name or logo in upper left corner
Direct, one click link to home page
Search (ideally in upper right corner)
Consider using breadcrumbs to orient user
78. POOR INFORMATION SCENT
- dictates maximum benefit for minimum effort
- users access if their paths show cues related to
desired outcome
- progress must seem rapid to be worth the effort required to
reach the destination
- don’t use made up words
92. WHAT IS USER CENTERED DESIGN?
Design philosophy that focuses on the end user through:
Planning Phase
Design Phase
Development Phase
Requires research on end user.
94. ISO 9241-210 (formerly 13407)
6 key principles that will ensure your design is user centered:
1. The design is based upon an explicit understanding of
users, tasks and environments.
2. Users are involved throughout design and development.
3. The design is driven and refined by user-centered
evaluation.
95. ISO 9241-210 (formerly 13407)
The process is iterative.
The design addresses the whole user experience.
The design team includes multidisciplinary skills and
perspectives.
96. STEP #1:
Identify your users.
Who are they?
What are their tasks and goals?
What is their experience level?
97. KNOW YOUR USERS
Who are the users?
What do they need to do, their tasks?
What do they currently do?
How satisfied are they with their current routines?
What is their experience level?
What kind of environment are they working in?
What are their preferences, and their goals?
98. STEP #2:
What functions are required?
What information do they need?
What form should it be?
How do users think it should work?
101. IDENTIFY NEED
FOR HUMAN
CENTERED DESIGN
SPECIFY CONTEXT OF USE
SYSTEM
EVALUATE DESIGNS SATISFIES SPECIFIED SPECIFY REQUIREMENTS
REQUIREMENTS
PRODUCE DESIGN SOLUTIONS
104. THE TEN USABILITY HEURISTICS
These are ten general principles for user interface design. They
are called “heuristics” because they are more in the nature of
rules of thumb than specific usability guidelines.
-Jacob Nielsen, 1994
105. THE TEN USABILITY HEURISTICS
#1 VISIBILITY OF SYSTEM STATUS
#2 MATCH BETWEEN SYSTEM AND THE REAL WORLD
#3 USER CONTROL AND FREEDOM
#4 CONSISTENCY AND STANDARDS
#5 ERROR PREVENTION
#6 RECOGNITION RATHER THAN RECALL
#7 FLEXIBILITY AND EFFICIENCY OF USE
#8 AESTHETIC AND MINIMALIST DESIGN
#9 HELP USERS RECOGNIZE, DIAGNOSE, & RECOVER FROM ERRORS
#10 HELP AND DOCUMENTATION
106. #1 VISIBILITY OF SYSTEM STATUS
The system should always keep users informed about what is
going on, through appropriate feedback within reasonable time.
111. #2 MATCH BETWEEN SYSTEM AND THE REAL WORLD
The system should speak the users' language, with words,
phrases and concepts familiar to the user, rather than system-
oriented terms. Follow real-world conventions, making
information appear in a natural and logical order.
116. #3 USER CONTROL AND FREEDOM
Users often choose system functions by mistake and will need a
clearly marked "emergency exit" to leave the unwanted state
without having to go through an extended dialogue. Support
undo and redo.
121. #4 CONSISTENCY AND STANDARDS
Users should not have to wonder whether different words,
situations, or actions mean the same thing. Follow platform
conventions.
126. #5 ERROR PREVENTION
Even better than good error messages is a careful design which
prevents a problem from occurring in the first place. Either
eliminate error-prone conditions or check for them and present
users with a confirmation option before they commit to the
action.
131. #6 RECOGNITION RATHER THAN RECALL
Minimize the user's memory load by making objects, actions,
and options visible. The user should not have to remember
information from one part of the dialogue to another.
Instructions for use of the system should be visible or easily
retrievable whenever appropriate.
136. #7 FLEXIBILITY AND EFFICIENCY OF USE
Accelerators -- unseen by the novice user -- may often speed up
the interaction for the expert user such that the system can cater
to both inexperienced and experienced users. Allow users to
tailor frequent actions.
141. #8 AESTHETIC AND MINIMALIST DESIGN
Dialogues should not contain information which is irrelevant or
rarely needed. Every extra unit of information in a dialogue
competes with the relevant units of information and diminishes
their relative visibility.
146. #9 HELP USERS RECOGNIZE, DIAGNOSE, & RECOVER FROM ERRORS
Error messages should be expressed in plain language (no
codes), precisely indicate the problem, and constructively
suggest a solution.
151. #10 HELP AND DOCUMENTATION
Even though it is better if the system can be used without
documentation, it may be necessary to provide help and
documentation. Any such information should be easy to search,
focused on the user's task, list concrete steps to be carried out,
and not be too large.
157. Your blog name is too long, it doesn’t A search box is a great thing to have,
sound like a website name. It also and this is the perfect place to put it.
sounds like it’s referring to a specific
discovery. A shorter blog name will
allow people to remember your site
and URL more easily.
You don’t need a comment feed..
Unless you know for a fact that your
users are using this feature, just having a
This small square should not be there, it post feed is fine enough. Then you don’t
links to different version of the about even need to have all that text, the
page with no title.You can delete that orange icon is an industry standard.
page to get rid of the square.
This title is too long. People get
confused by page titles that do not Though aesthetically pleasing, this image
describe the page intuitively and just doesn’t say “science”. It speaks
concisely. It should read “About” or more to travel and history, and the
“About The Blog” discovery of ancient worlds as opposed
to new studies in science.
Who are you? How are you associated
with science? I can’t even find your full
name on this page! It is important that There is too little typographic hierarchy
you include an “About the Author” page on your site. Not even the site’s name
to establish your credibility and put a or the post titles really come out and
face to the site. grab your attention. It all looks like a
wall of text, which makes it harder for a
user to navigate.
You should not display the full blog post
on the homepage. Show the title and an
excerpt, and allow the user to “read
As the eye can only comfortably track 7
more” if they’re interested. This keeps
to 10 words a line, your sentences are a
users from having to scroll down
tad too long.
through articles that they have no
interest in.
Your blog posts could benefit from the Though the design (layout/color palette/
addition of relevant images that fonts) of your website isn’t necessarily
summarize what the content is about. bad, we don’t feel that it communicates
Right they appear as just a big, gray box to your target audience effectively. If
of text intimidating text. you are looking to make science
accessible and understandable to
laymen, the design should reflect that.
HOMEPAGE The current design seems too
scholarly, clinical, and outdated.
158. These questions (links) would make
for excellent callouts, but not necessarily
navigational links.
Because this is green, I am assuming
Too many navigation options! this is the page that I am on, but it is
not.
Too much movement.Very distracting.
This block could be confused with
advertising and may be ignored.
Unappealing image.
Most Popular Topics (is this
different than the blog topics?),
Today’s News, Popular Links, Latest
News. SO MUCH TO CHOOSE
FROM! I don’t know where to
start? What is most important?
This opens in a new window, with new
colors.Very disorienting.
These buttons are totally lost
among all the options on this page.
Seeing Fans is nice, but just adds to
the clutter and creates further
distraction on this very busy page.
I need a little hint as to what
Is this advertising? attainivf is before I click. This is
too vague.
159. This can move to the bottom of the page.
Clean this area up. Remove the image of
Everyone takes these credit cards.
Las Vegas, Make it a clean and simple
logo like all your competition does. Remove all this. Replace with: Register for
Free with a link to register.
And have Log In button.
This appears to be an ad! Why would
you encourage users to LEAVE your
This whole area takes up valuable real estate. On
site to play Fantasy Football? Doesn’t
Sport’s Advisors, the ads are smaller allowing the
even open in another window.
left side bar to come up. Also, the content of the
ads are much more compelling. I would
reconsider what if anything you want to put here.
I would remove everything in
this green block and replace
with this.
This is a wonderful service, but it
pushed down the menu of
handicappers which is what people
are going to be looking for. They can
get the scores via your top navigation.
You may want to consider saying “Live
Scores”
Remove the word Menu. Not needed.
Move this whole block up.
HOMEPAGE
160. This blur looks like it is a mistake.
The logo on the homepage is customarily larger and more
prominent. It is getting lost on this page because of lack of
contrast and the blurring of the image.
Navigation is too light in color. No contrast. Needs to be
more obvious.
This Giving aid link is too passive. No one will see it.
This extranet link may be confusing if it refers to the CLUB..
The site map link should be more prominent.
While you can have news bites on the homepage, that is not the
role of the homepage.The role of the homepage is to
communicate what the company is, the value the site
offers over the competition and the product or
services offered. Presently, it does NONE of those things.
The novice user can feel overwhelmed by homepages that do not
help them understand their options. They may become embarrassed
and blame themselves. They will just leave the site and go to a more
welcoming site.
The challenge is to design a homepage that gives the user access to
important features without cramming them onto the page itself.
Focus and clarity are most important, as are the users' goals.
They need to be identified early. I question if they have been.
Search box is not obvious. It needs to be moved to the Who is IAAATA and SNA?
The word “HOT” does not belong on a site of this nature. upper right as that is now standard practice and where Partners? Agencies?
It cheapens the work and seems inappropriate. most users will look for it. Plus it is buried in with the Memberships? Should at the
contact information and not self evident. very least have a link so the
uninformed user can
research what they are.
161. WORKSHOP #3
Please break into groups.
Find a site to do a “heuristic” (usability) review.
Be prepared to share your observations with the class.
163. BUSINESS GOALS
“Customer experience is the defining success factor in
business for the next twenty years. Learning from
customers, creating the experience they want, measuring
the success of what you do, continually fine-tuning the
service and returning to customers to learn more--this now
must be the primary mission of any business that has
customers. If you create a great customer experience, you’ll
almost certainly win.” Mark Hurst
165. KNOW THE BUSINESS
Having a satisfied user doesn't necessarily build a satisfied
company.
Interview the stakeholders, get to understand their strategy
and business goals.
Ultimately usability must serve the bottom line.
166. HERE’S WHAT HAPPENS:
Suits decide on business goals
Convert to strategy
Brings in design team
Do it cheap
Put everything on the homepage
Put my division on the top of the hierarchy
Hide the contact info
Get to market asap
172. HOW TO RETAIN USERS:
Timely, relevant content
Engage them
Provide an experience
SERVE THEIR NEEDS.
173. HOW TO IMPROVE CONVERSION:
Easy to use site
Clear hierarchy
Calls to action
Communicate value
Study analytics
A/B testing
SERVE THEIR NEEDS.
174. HOW TO INCREASE TRAFFIC:
Interesting, original copy
In-bound links
Search Engine Optimization (SEO)
E-blasts/Newsletters
Social Media
SERVE THEIR NEEDS.
177. DESIRABILITY
Brings value to the user
Highlights value
Persuades user of value
Adds emotional value to user
piano stairs Pentagram
178.
179.
180.
181.
182. HOMEWORK WEEK #1
1. Surf the web. Find one site that is easy to use. One that isn’t.
Tell why.
2. If you had to do a comprehensive usability plan for the Coca
Cola website or Microsoft Web site, which would you chose and
why? Type your answers and submit next week.
3. Download “Research Based Web Design & Usability
Guidelines.” Read chapter one and two.
4. Look at the site you reviewed at the start of the class. Write
down what changes you would make to make the site more user-
friendly. Type your answers and submit next week.
