Usability & Web Design Considerations (whitepaper)
-
Upload
raastech -
Category
Technology
-
view
191 -
download
0
Transcript of Usability & Web Design Considerations (whitepaper)
Ahmed Aboulnaga Technical Director Raastech, Inc. [email protected]
Usability & Web Design Considerations
Slide 2 of 34
1. Introduction
2. Usability Examples
3. Design Considerations
4. Trusting Web Sites
5. Summary
Agenda
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’?
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?
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.
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
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.)
Slide 9 of 34
The majority of usability tests conclude that less complex
interfaces were preferred.
Results of Usability Testing
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
Slide 12 of 34
Example: Good Usability
Company name clearly identified
Navigating to services not confusing
Clean and consistent style and colors
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?
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
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 workflow?
Common Design Questions
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
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
Slide 20 of 34
Are functional and technical errors clearly displayed?
Common Design Questions
Bad handling of errors Good handling of errors
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
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
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
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
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
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
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
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
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
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
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.