Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ahmed Aboulnaga
Technical Director
Raastech, Inc.
ahmed.aboulnaga@raastech.com
Usability & Web Design Considerations
Slide 2 of 34
1. Introduction
2. Usability Examples
3. Design Considerations
4. Trusting Web Sites
5. Summary
Agenda
Slide 3 of 34
Introduction
Slide 4 of 34
 Usability assesses how easy user interfaces are to use.
 User interfaces can be found everywhere:
– Web s...
Slide 5 of 34
 If a website is too difficult to use, people leave.
 Most users spend no more than 4 seconds figuring out...
Slide 6 of 34
 Site design, preference, and usability is very subjective.
 Everybody has an opinion on how a site should...
Slide 7 of 34
 Usability testing provides us with real data.
 Get real users, not your colleagues, to test.
 The users ...
Slide 8 of 34
 Analyzing server Logs can provide valuable data.
– Analyzing server logs cannot replace usability testing....
Slide 9 of 34
 The majority of usability tests conclude that less complex
interfaces were preferred.
Results of Usability...
Slide 10 of 34
 Business executives don’t care about usability testing.
Instead, they focus on:
1. How do we increase rev...
Slide 11 of 34
Usability Examples
Slide 12 of 34
Example: Good Usability
Company name
clearly identified
Navigating to services
not confusing
Clean and cons...
Slide 13 of 34
Example: Mediocre Usability
Why the empty
square?
Am I supposed to
wait for something?
The most important
s...
Slide 14 of 34
Example: Bad Usability
Snow effect of
random images Small,
unreadable
text
Why a banner ad of
your website ...
Slide 15 of 34
Design
Considerations
Slide 16 of 34
 Is there too much material on one page?
Common Design Questions
Actual front page of a website.
Slide 17 of 34
 In a workflow process, is the user’s progress shown?
 Can a user cancel out and jump to any part of the ...
Slide 18 of 34
 Trust the user to a certain degree.
For example, on the sample below, there is no need to
explain to the ...
Slide 19 of 34
 Do you really need an image to display text?
– Images are considerably larger in size.
– It is not possib...
Slide 20 of 34
 Are functional and technical errors clearly displayed?
Common Design Questions
Bad handling of errors Goo...
Slide 21 of 34
 Does a user have to guess whether an image is clickable or
not?
 Is the web site browser independent?
 ...
Slide 22 of 34
 Typically, a navigation bar is composed of multiple images
(e.g., GIFs) put together, each button consist...
Slide 23 of 34
 Image maps are an annoyance for developers to implement.
 But imagine the bandwidth that a high-traffic ...
Slide 24 of 34
 Section 508 mandates agencies to give disabled employees
and members of the public access to information ...
Slide 25 of 34
 The great sites above share the following design features:
– Simple layout
– 3D effects, used sparingly
–...
Slide 26 of 34
Trusting Web Sites
Slide 27 of 34
Professionalism
 A man wrote in to “Dear Abby” and wondered why he was
not approved for a business loan af...
Slide 28 of 34
 Which one of these gentlemen looks like a dentist?
 If you’re a dentist, then your site should look like...
Slide 29 of 34
 Not all websites need to look clean and professional to convey
a successful business.
 Although this web...
Slide 30 of 34
Summary
Slide 31 of 34
 Usability is not restricted to web applications.
Usability Around Us
Slide 32 of 34
 Keep it simple.
 Usability testing is the ideal way to determine ease-of-use.
 If usability testing is ...
Slide 33 of 34
 http://www.internetworld.com/magazine.php?inc=121500/12.15.00feature2long.html
 http://www.december.com/...
Slide 34 of 34
Thank You
Raastech Presentation:
Usability & Web Design
Considerations
Feb 2011
Raastech Headquarters:
2201...
Upcoming SlideShare
Loading in …5
×

Usability & Web Design Considerations (whitepaper)

227 views

Published on

January 2011

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Usability & Web Design Considerations (whitepaper)

  1. 1. Ahmed Aboulnaga Technical Director Raastech, Inc. ahmed.aboulnaga@raastech.com Usability & Web Design Considerations
  2. 2. Slide 2 of 34 1. Introduction 2. Usability Examples 3. Design Considerations 4. Trusting Web Sites 5. Summary Agenda
  3. 3. Slide 3 of 34 Introduction
  4. 4. Slide 4 of 34  Usability assesses how easy user interfaces are to use.  User interfaces can be found everywhere: – Web sites – Car dashboards – Cell phone menus – Vending machines – Documents What is ‘usability’?
  5. 5. Slide 5 of 34  If a website is too difficult to use, people leave.  Most users spend no more than 4 seconds figuring out a website.  For non-web-based applications, usability is a matter of employee productivity. Why is usability important?
  6. 6. Slide 6 of 34  Site design, preference, and usability is very subjective.  Everybody has an opinion on how a site should be designed. Beware: Everybody is an expert! Factoid: A selection of a university website was shown to a group of individuals of both sexes who had to rate their appeal on a scale. In almost every case women preferred those sites designed by women and men showed a preference for those created by men.
  7. 7. Slide 7 of 34  Usability testing provides us with real data.  Get real users, not your colleagues, to test.  The users have to perform real tasks, not just “check out the site.”  For example, in a medical application, get doctors to test/use it, and pay them for their time.  The test moderator should shut up and let the users do the talking (don’t bias their comments with leading questions). Usability Testing
  8. 8. Slide 8 of 34  Analyzing server Logs can provide valuable data. – Analyzing server logs cannot replace usability testing. – Server logs can provide us with navigation information, but the data is rarely interpretable beyond that. Usability Testing (cont.)
  9. 9. Slide 9 of 34  The majority of usability tests conclude that less complex interfaces were preferred. Results of Usability Testing
  10. 10. Slide 10 of 34  Business executives don’t care about usability testing. Instead, they focus on: 1. How do we increase revenue? 2. How do we reduce expenses? 3. How do we bring in more customers? 4. How do we get more business out of each existing customer? Business Challenges
  11. 11. Slide 11 of 34 Usability Examples
  12. 12. Slide 12 of 34 Example: Good Usability Company name clearly identified Navigating to services not confusing Clean and consistent style and colors
  13. 13. Slide 13 of 34 Example: Mediocre Usability Why the empty square? Am I supposed to wait for something? The most important space in the page is left blank! Need to scan all headers on the whole page to find where to go How many navigation bars?
  14. 14. Slide 14 of 34 Example: Bad Usability Snow effect of random images Small, unreadable text Why a banner ad of your website on your own website? Bad Bad Bad Bad Bad
  15. 15. Slide 15 of 34 Design Considerations
  16. 16. Slide 16 of 34  Is there too much material on one page? Common Design Questions Actual front page of a website.
  17. 17. Slide 17 of 34  In a workflow process, is the user’s progress shown?  Can a user cancel out and jump to any part of the workflow? Common Design Questions
  18. 18. Slide 18 of 34  Trust the user to a certain degree. For example, on the sample below, there is no need to explain to the user how to delete a record. Common Design Questions
  19. 19. Slide 19 of 34  Do you really need an image to display text? – Images are considerably larger in size. – It is not possible to search on images. Common Design Questions
  20. 20. Slide 20 of 34  Are functional and technical errors clearly displayed? Common Design Questions Bad handling of errors Good handling of errors
  21. 21. Slide 21 of 34  Does a user have to guess whether an image is clickable or not?  Is the web site browser independent?  Do you really need plug-ins?  How large is your total page size? Common Design Questions
  22. 22. Slide 22 of 34  Typically, a navigation bar is composed of multiple images (e.g., GIFs) put together, each button consisting of two images; the ‘selected’ state and the ‘unselected’ state. Each image is anywhere from 2.5Kb to 5Kb (total 34Kb).  Did you know that if you concatenate each of the buttons to form one image (and utilizing image maps), the total size of this single gif is less than 11Kb? Technical Design Consideration: The Navigation Bar
  23. 23. Slide 23 of 34  Image maps are an annoyance for developers to implement.  But imagine the bandwidth that a high-traffic web site like Amazon.com saves by implementing this simple feature. Technical Design Consideration: The Navigation Bar
  24. 24. Slide 24 of 34  Section 508 mandates agencies to give disabled employees and members of the public access to information that is comparable to the access available to others.  Section 508 is costly to implement, particularly if the web application is not designed with UI flexibility from the start.  For more information, check out: http://www.section508.gov Section 508
  25. 25. Slide 25 of 34  The great sites above share the following design features: – Simple layout – 3D effects, used sparingly – Soft, neutral background colors – Strong color, used sparingly – Cute icons, used sparingly – Plenty of whitespace – Nice big text Common Design Considerations
  26. 26. Slide 26 of 34 Trusting Web Sites
  27. 27. Slide 27 of 34 Professionalism  A man wrote in to “Dear Abby” and wondered why he was not approved for a business loan after his amateurish looking website was seen by the loan officer. Original web site Redesigned web site
  28. 28. Slide 28 of 34  Which one of these gentlemen looks like a dentist?  If you’re a dentist, then your site should look like it belongs to a dentist, not to someone who is going to the opera. Appropriateness
  29. 29. Slide 29 of 34  Not all websites need to look clean and professional to convey a successful business.  Although this website is unprofessional, we actually “trust” it because they look like an honest family-owned business. Trusting Websites
  30. 30. Slide 30 of 34 Summary
  31. 31. Slide 31 of 34  Usability is not restricted to web applications. Usability Around Us
  32. 32. Slide 32 of 34  Keep it simple.  Usability testing is the ideal way to determine ease-of-use.  If usability testing is too costly, read about it instead.  Check out the excellent resource at http://www.usability.gov  When designing a web application, stove, or VCR, think like a user and not as an engineer, sales person, or CEO. Summary
  33. 33. Slide 33 of 34  http://www.internetworld.com/magazine.php?inc=121500/12.15.00feature2long.html  http://www.december.com/cmc/mag/1999/jan/rakros.html  http://www.grokdotcom.com/runningthestore.htm  http://www.webpagesthatsuck.com/worst-web-design-featured-on-web-pages-that- suck-in-2005.html  http://hostingct.com/design/portfolio-ba12.shtml  http://www.taylorhayden.com/HaydenVideoWeddings.html  http://www.tanzschulebuck.de  http://www.sftc.org  http://www.webpagesthatsuck.com  http://www.usability.gov  http://www.section508.gov  http://www.glam.ac.uk/news/releases/003056.php  http://web.mit.edu/is/usability/usability-guidelines.html  http://www.webdesignfromscratch.com/current-style.cfm References
  34. 34. Slide 34 of 34 Thank You Raastech Presentation: Usability & Web Design Considerations Feb 2011 Raastech Headquarters: 2201 Cooperative Way, Suite 600 Herndon, VA 20171 www.raastech.com Copyright © 2011 Raastech, Inc. All rights reserved.

×