1. Usability Shmoozability: Who Cares?
YOU Should!
MCWT Foundation
11th Annual Girls’ Web Design Competition
October 8, 2016
Tonya V. Thomas, M.A.Ed. | Instructional Design | Performance & Productivity| Multimedia Communications
Oakland Community College | Macomb Community College | University of Michigan
2. What Will You Learn Today?
What is expected of you for MCWT’s contest
What usability is and why it is so important
The 5 E's of usability
Tips for good web design
Navigation and why it is important
Functionality
3. What is “Usability” Anyway?
The ISO 9241 standard definition of 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”
In plain English it’s how easy a site is to use
Accessibility how usable for those w/altered abilities
4. The Five E's
When we talk about Usability, we often
refer to the 5 E's of designing a website:
Effective
Efficient
Engaging
Error Tolerant
Easy to Learn
Taken From: What Does Usability Mean: Looking Beyond ‘Ease of Use’ by Whitney Quesenbery.
http://www.wqusability.com/articles/more-than-ease-of-use.html
5. The 5 E’s
Effectiveness
Does my website or webpage do what I want it to do? Does my
user accomplish what they want to accomplish?
Efficiency
Different than effective. Is my user able to do what they want to
do quickly or have I included a lot of stuff that got in the way?
Engaging
Does my web page attract users, or detract users?
This element points to overall style, and is heavily dependent on
your intended audience.
Taken From: What Does Usability Mean: Looking Beyond ‘Ease of Use’ by Whitney Quesenbery.
http://www.wqusability.com/articles/more-than-ease-of-use.html
6. The 5 E's (continued)
Error Tolerant
Is my web page error-free? Have I anticipated all the
different things the users will do on my site?
Easy to Learn
Does my site provide enough instruction when I am
asking the user to do something? Once again, this
largely depends on your intended audience.
Taken From: What Does Usability Mean: Looking Beyond ‘Ease of Use’ by Whitney Quesenbery.
http://www.wqusability.com/articles/more-than-ease-of-use.html
7. Who Cares & Why Are We Here?
Simple……
If you want people to visit your
site and keep coming back, your
site has to usable.
8. Chair Example
Let's take a look at this chair
What will we do with this chair?
Would this chair be an effective chair
for a hair stylist?
What about a dentist?
Could you use this chair to watch TV?
The Bottom Line here is – if the website isn’t usable to its
intended audience, it won’t be used! And your effort in
designing the product will have been wasted.
9. Web Design Contest Criteria
Heavily emphasizes usability
Six key areas of focus all related to usability
General Features
Design/Aesthetics (Engaging)
Functionality (Effectiveness, Efficiency & Error Tolerant)
Communication (Effectiveness & Efficiency)
Accessibility (Easy to Learn and Access)
Presentation (2nd round only)
10. Designing Your Site
Once you’ve picked a theme and a topic, think about the design:
Keep your visual design simple
Keep your layouts simple
Keep your message simple
If you are asking your users to do something, keep the
instructions simple
*Taken from: Your Complete Guide to Web Design by Ben Hunt. http://www.webdesignfromscratch.com/
11. Web Design ~ Keeping it Simple
Remember the human brain gravitates toward simplicity
We read, in this culture, from left to right
Communicate -- don't decorate
Take a look at these examples:
http://www.longscycle.com
http://www.kids.gov
http://www.umich.edu/webaccess
*Taken from: Your Complete Guide to Web Design by Ben Hunt. http://www.webdesignfromscratch.com/
12. Web Design ~ Keeping it Simple
Advice about Color
Use color to add spice to your site – do not overuse
Be careful with contrast & colors that harm the eyes
Advice on graphics
Use Alt tags ALWAYS
Always optimize -- make sure images load quickly
Don’t overuse too many graphics
13. Navigation Musts
Lets user know where s/he is in site all times
Clearly differentiate hyperlinks from content
Lets user know clearly where to can go next
Let user see where s/he has already been
Makes it obvious what to do and how
to get somewhere
Indicates what clicking a link will do
*Taken from: Your Complete Guide to Web Design by Ben Hunt. http://www.webdesignfromscratch.com/
14. Navigation
Types of navigation elements
Navigation bar with revealed drop-downs
Multi-level tree navigation
List of Contents
Breadcrumb Trail
Top & Side Bars
Tabs
Paging
*Taken from: Your Complete Guide to Web Design by Ben Hunt. http://www.webdesignfromscratch.com/
15. Navigation
Remember to be consistent
If people cannot find their way around your site
they will leave your site
Examples:
www.amazon.com
www.target.com
www.google.com
16. Functionality
Links are clearly labeled and work
Use of Alt tags on images with purpose
What to do about decorative images? – “”
Site works in multiple browsers.
17. Functionality: Links
Make sure all links work
Nothing more frustrating than having it go nowhere
Some hyperlink guidelines:
Should be clearly distinguishable from normal text
Mouse-over should be highlighted
Link text as short and descriptive as possible
Links targets should be clearly distinguishable and leave no surprises
(like taking user to external site)
*Taken from: Your Complete Guide to Web Design by Ben Hunt. http://www.webdesignfromscratch.com/
18. Functionality: Graphics
Graphics should be used to communicate – not decorate
Although pictures are “worth a thousand words,” you still need to tell
us something about the picture – ALT tags
Let's look at an example:
www.apple.com
Image courtesy www.apple.com
19. Web Browsers
NEVER assume that everyone owns a computer and runs Windows and
Internet Explorer
Currently users are using these popular browsers:
Internet Explorer
Google Chrome
Firefox
Safari
Opera (less prevalent)
Netscape (even less prevalent)
Make sure your site works in ALL of these browsers –
TEST, TEST, TEST!!!
20. References
What Does Usability Mean: Looking Beyond ‘Ease of Use’, by Whitney Quesenbery.
2001. http://www.wqusability.com/articles/more-than-ease-of-use.html
Your Complete Guide to Web Design, by Ben Hunt.
http://www.webdesignfromscratch.com/
More:
30 Web Designs that Will Hurt Your Eyes
20 Examples of Bad Web Design
Website Design Best Practices
Usability For Beginners
Web Accessibility Quick Guide | University of Michigan