Usability Shmoozability: Who Cares?

YOU Should!
MCWTF Girls’ Web Design Contest
October 12, 2013

Tonya V. Thomas | Instr...
What Will You Learn Today?
 What is expected of you for MCWTF’s contest
 What usability is and why it is so important
 ...
What is “Usability” Anyway?

 The ISO 9241 standard definition of usability is:
“The extent to which a product can be use...
The Five E's
When we talk about Usability, we often refer to the 5 E's of
designing a website:


Effective



Efficient
...
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
...
The 5 E's (continued)
 Error Tolerant

Is my web page error-free? Have I
anticipated all the different things the users
...
Who Cares & Why Are We Here?

Simple……

If you want people to visit your
site and keep coming back,
your site has to usabl...
Chair Example
 Let's take a look at this chair 
 What will we do with this chair?
 Would this chair be an effective ch...
Web Design Contest Criteria
 Heavily emphasizes usability
 Six key areas of focus all related to usability
 General Fea...
Your Theme & Topic
 K-I-S-S principle
 Let's look at an example:
http://www.paperrad.org
 What is the topic?
What is t...
Designing Your Site

 Once you’ve picked a theme and a topic, think
about the design:
Keep your visual design simple

K...
Web Design ~ Keeping it Simple
 Remember the human brain gravitates toward simplicity

 We read, in this culture, from l...
Web Design ~ Keeping it Simple
 Advice about Color
 Use color to add spice to your site
 Be careful with contrast & col...
Navigation Musts
 Lets user know where s/he is in site all times
 Clearly differentiate hyperlinks from content
 Lets u...
Navigation
 Types of navigation elements
List of Contents
Breadcrumb Trail
Top & Side Bars
Tabs
Navigation bar with ...
Navigation: Examples

Examples:
www.amazon.com
www.target.com
www.google.com
Navigation
Remember to be consistent
If people cannot find their way around
your site they will leave your site
Let's ex...
Functionality
Links are clearly labeled and work
Use of Alt tags on ALL images ALWAYS
Site works in multiple browsers.
...
Functionality: Links


Make sure ALL links work




Nothing more frustrating than having it go nowhere

Some hyperlink ...
Functionality: Graphics
 Graphics should be used to communicate –
not decorate
 Although pictures are “worth a thousand ...
Web Browsers
 NEVER assume that everyone owns a computer and runs Windows
and Internet Explorer
 Currently users are usi...
References
 What Does Usability Mean: Looking Beyond ‘Ease of Use’, by
Whitney Quesenbery. 2001. http://www.wqusability.c...
Upcoming SlideShare
Loading in …5
×

Usability Shmoozability

566 views

Published on

presentation by T. Thomas, MCWTF, for annual Girls' Web Design Contest
(originally created by MCWT colleague Betsy Jenaway, Macomb Community College)

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
566
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Usability Shmoozability

  1. 1. Usability Shmoozability: Who Cares? YOU Should! MCWTF Girls’ Web Design Contest October 12, 2013 Tonya V. Thomas | Instructional Design | Performance Support | Multimedia Communications about.me/tvthomas | @edutechdiva | UnitedHealth Group | University of Michigan | Walden University
  2. 2. What Will You Learn Today?  What is expected of you for MCWTF’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. 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. 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. 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. 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. 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. 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. 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. 10. Your Theme & Topic  K-I-S-S principle  Let's look at an example: http://www.paperrad.org  What is the topic? What is the theme? What is the intended audience? How well does the site communicate with the audience?
  11. 11. 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/
  12. 12. 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 Let's 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/
  13. 13. Web Design ~ Keeping it Simple  Advice about Color  Use color to add spice to your site  Be careful with contrast & colors that harm the eyes  Be very careful not to overuse  Advice on graphics  Use Alt tags ALWAYS  Make sure images load quickly  Don’t overuse too many graphics Let's take a look at this example: http://www.3cgraphics.com/
  14. 14. 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/
  15. 15. Navigation  Types of navigation elements List of Contents Breadcrumb Trail Top & Side Bars Tabs Navigation bar with revealed drop-downs Multi-level tree navigation Paging *Taken from: Your Complete Guide to Web Design by Ben Hunt. http://www.webdesignfromscratch.com/
  16. 16. Navigation: Examples Examples: www.amazon.com www.target.com www.google.com
  17. 17. Navigation Remember to be consistent If people cannot find their way around your site they will leave your site Let's examine some mistakes: Worst Websites of 2013 (so far) Jan-Jun Worst Websites of 2012
  18. 18. Functionality Links are clearly labeled and work Use of Alt tags on ALL images ALWAYS Site works in multiple browsers. Image courtesy www.davenport.edu
  19. 19. 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/
  20. 20. 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
  21. 21. 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!!!
  22. 22. References  What Does Usability Mean: Looking Beyond ‘Ease of Use’, by Whitney Quesenbery. 2001. http://www.wqusability.com/articles/morethan-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

×