Usability Shmoozability: Who Cares?
YOU Should!
MCWT Foundation
11th Annual Girls’ Web Design Competition
October 8, 2016
...
What Will You Learn Today?
 What is expected of you for MCWT’s contest
 What usability is and why it is so important
 T...
What is “Usability” Anyway?
 The ISO 9241 standard definition of usability is:
“The extent to which a product can be used...
The Five E's
When we talk about Usability, we often
refer to the 5 E's of designing a website:
 Effective
 Efficient
 E...
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 w...
Who Cares & Why Are We Here?
Simple……
If you want people to visit your
site and keep coming back, your
site has to usable.
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 Feat...
Designing Your Site
 Once you’ve picked a theme and a topic, think about the design:
Keep your visual design simple
Kee...
Web Design ~ Keeping it Simple
 Remember the human brain gravitates toward simplicity
 We read, in this culture, from le...
Web Design ~ Keeping it Simple
 Advice about Color
 Use color to add spice to your site – do not overuse
 Be careful wi...
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
Navigation bar with revealed drop-downs
Multi-level tree navigation
List of C...
Navigation
Remember to be consistent
If people cannot find their way around your site
they will leave your site
Example...
Functionality
Links are clearly labeled and work
Use of Alt tags on images with purpose
What to do about decorative ima...
Functionality: Links
 Make sure all links work
 Nothing more frustrating than having it go nowhere
 Some hyperlink guid...
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 for MCWT Foundation

459 views

Published on

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

Published in: Technology, Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
459
On SlideShare
0
From Embeds
0
Number of Embeds
120
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Usability Shmoozability for MCWT Foundation

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×