presentation by T. Thomas, for MCWT Foundation annual Girls' Web Design Competition.

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