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 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 11 of 34

Usability Examples

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