January 2011

1. Ahmed Aboulnaga
Technical Director
Raastech, Inc.
ahmed.aboulnaga@raastech.com
Usability & Web Design Considerations

2. Slide 2 of 34
1. Introduction
2. Usability Examples
3. Design Considerations
4. Trusting Web Sites
5. Summary
Agenda

3. Slide 3 of 34
Introduction

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. 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. 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. 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. 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. Slide 9 of 34
 The majority of usability tests conclude that less complex
interfaces were preferred.
Results of Usability Testing

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. Slide 11 of 34
Usability Examples

12. Slide 12 of 34
Example: Good Usability
Company name
clearly identified
Navigating to services
not confusing
Clean and consistent
style and colors

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. 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. Slide 15 of 34
Design
Considerations

16. Slide 16 of 34
 Is there too much material on one page?
Common Design Questions
Actual front page of a website.

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. 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. 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. Slide 20 of 34
 Are functional and technical errors clearly displayed?
Common Design Questions
Bad handling of errors Good handling of errors

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. 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. 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. 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. 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. Slide 26 of 34
Trusting Web Sites

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. 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. 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. Slide 30 of 34
Summary

31. Slide 31 of 34
 Usability is not restricted to web applications.
Usability Around Us

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