Download the PDF, includes exercises (401 K)
What are “usability” and “user interface”?
Usability is the ease-of-use factor—how simple is it for your audience to do the things they need to do on your site? Can they find the information they want, buy a product, search, and send feedback to you? The clearer and simpler your site is to use, the better your usability and the more satisfied your audience will be.
User interface is what your audience sees —your logo, recurring graphics, theme colors—and the tools they use to interact with your site—navigation buttons, search boxes, and even their own browser. User interface is everything except for content (and even that’s debatable).
Designing for Usability
Usability encompasses a few main aspects:
- Universal access
- Ease of navigation
- Attractive design
- Loading time
Universal Access
When you plan your site, you might be lucky and know exactly who your audience is; but most of the time you won’t. Universal access takes into consideration that users have different screen sizes, browsers, and abilities.
To make your site viewable to the widest audience, think about these things:
- Page size. This means with width of the page as well as its length. For people with smaller monitors, wide graphics will require horizontal scrolling. There’s no completely foolproof size, but popular sites use graphics that are 480, 600 or 800 pixels wide. I prefer smaller to larger.
- Standard HTML. Both Netscape and IE have special HTML tags that work exclusively in their browser. If you rely on them to convey your message, some of your audience isn’t going to see what you intend. Try to avoid using them.
- Plug-ins. Unless your site has a real need for cutting-edge technology, think twice before incorporating it into your site. How many users are really going to download the plug-in so they can see a 3-D model of your office? Not very many, unless the design of your office is the message of your website.
- Browsers. Netscape, IE, Opera, Mozilla, Lynx, and other browsers interpret even the standard tags differently. What may be Bold and 14 point on one machine will be Italic and 16 point on another browser. You cannot control this, but you can learn to design so that differences like this don’t matter so much.
- OS Differences. The biggest difference between Macs & PCs is their screen resolutions and font sizes. Mac fonts look smaller; PC fonts display larger. Your lines will break in different places; paragraphs will fill different amounts of space. Don’t count on your text looking exactly the same on every computer!
- Disabilities. Not every user is going to be able to see, hear or be completely mobile. Even if your target audience isn’t the disabled population, it’s not much trouble to add features to help out those who cannot see your graphics. Adding a simple alt=”Links Button” to the img tag will allow web-reading programs to interpret the buttons.
Ease of Navigation
There are a number of ways to make your site easy to navigate.
- Use multiple methods of navigation. In addition to buttons and text navigation, include a site map or directory and a search function. Users have different approaches to navigation; it’s a good idea to satisfy them all, if possible.
- Give the user what she expects. Search boxes are in the upper right corner of the page on most sites. If you put yours there, too, users will find it easily. Use standard icons for navigation instead of making up your own. For most users, a magnifying glass means “search;” a house means “home page.” A blue balloon? An animated duck? These don’t mean anything as navigation buttons.
- Be consistent. Navigation should be in the same place on every page and it should not vary in order of items or anything else that might cause the user to click on the wrong link or get frustrated.
- Stabilize. After you’ve designed the navigation of your site, don’t change it. Of course, you may need to tinker as you add new sections or delete content, but your careful planning in advance will keep you from having to make major overhauls.
- Double-check every link and button works correctly!
Attractive Design
Even the most perfectly well organized site will fail if it doesn’t look nice. Aesthetics are a matter of personal taste balanced with the prevalent idea of beauty, but there are a few things that you can do to ensure your site will look nice:
- Select your colors carefully. Be sure you have a good range of light and dark colors for contrast. Colors can be similar (orange and yellow), contrasting (blue and orange) or complimentary (yellow and violet)
- Use graphics to give the reader’s eye a rest or to focus attention.
- Remember that white space is a valid design idea, but that with pages as small as a monitor, you must carefully balance space and content.
- Avoid amateur graphics and don’t resize images to be larger than the original.
- Animation focuses attention; use it extremely sparingly.
Loading time
Have you ever waited for a long time for a web page to load? I’m the sort of person who either gives up after a few seconds and clicks Stop or lets it load in the background while I do other things—usually forgetting that I wanted the page at all.
What makes pages load slowly? Some of the issues are out of your control, like bandwidth and network congestions, but there are some things you can do to make sure your pages are zippy.
- Optimize your graphics. You can do it by hand, calculating the math yourself then saving the file as the right type and compression, or you can get a program like Adobe Image Ready or Macromedia Fireworks. These make optimizing very easy—you can compare the image quality and file size of several versions of your image at once, then save the best one.
- Use height and width attributes with your img tags. This allows the text of the page to load while “holding a place” for the image while it downloads.
- Don’t use too many graphics. That’s not to say don’t use any, but it’s a good idea to use them wisely. 50 1K files take longer to load than 1 50K file because the server must be contacted 50 times instead of once.
- Remove extraneous HTML. Some web editors are notorious for writing bad code. Instead of <p> they use two <br> or they add font tags to every single paragraph or they bloat the header with meta tags. All these little things can add up to a second or two of download time.
- Don’t try to put everything on one page. If you’ve got a book to publish, break it into chapters. Loading one chapter will take much less time than loading the whole book.
User Interface Planning
It’s important to plan what you’re going to do before you begin development. Good planning allows you to be consistent when you add more content and information in later stages. And if you’re working with a team to do your site, planning ensures that everyone is following the same ideas.
Planning Stage 1: Content
Content is how you deliver the message of your website, so it’s key to have a clear focus. What are you trying to say to your audience? Can you sum up the “mission” of your website in two sentences?
Examples
“digitalevejapan.org publishes information about DigitalEve Japan’s events, projects and membership. The website is bilingual and includes interactive registration for events.”
“Kristen’s Japan keeps friends, family and the curious reader entertained with daily snippets from my life. In addition, longer, illustrated essays give an in-depth picture of aspects of living in Japan.”
“MediaTinker.com showcases the products and services of our company. Pricing and contact information are available as well as tutorials by our staff and links to business partners.”
Planning Stage 2: Structure
Organizing the structure of your website is a two-fold process. You must consider your audience’s needs first. What do you think will be most important to them?
Keep in mind that what a user needs is probably not the same as the structure of your organization. If we arranged the DigitalEve Japan website based on the steering committee, our members would have a difficult time finding out about our workshops. Here’s what might be, compared to what currently is:
DE-J Steering Committee Organization
Co-Leaders’ page
Treasurer’s page
PR page
Sponsorship page
Web Content page
Audience-based Web Organization
News & Home
About Us
Join Us
Events
Contact Us
If you are planning a corporate or organizational website, you may want to conduct focus groups or interview some of your users to find out what they think is important or useful. You might be surprised at what they suggest.
Once you have an idea in your head, you should put it on paper. Not only does this help you fill any gaps you may have forgotten, but it gives everyone involved in the construction of the site a guide to follow.
There are many ways to sketch out this plan. You can use a simple list, as above. A flowchart can be helpful if you need to lead the audience through steps, such as registering or purchasing something online. Another technique that is helpful at the beginning stages, especially when you have a lot of information to organize, is mind mapping.
Planning Stage 3: Navigation
Navigation is the final key point in your user interface. This is how your audience will move around in your site and it includes all the clues they will have too show them where they are (and where they can go).
Here are some standard navigation techniques; you can incorporate as many as makes sense for your site:
- Navigation Buttons. These might say Next, Home, E-mail Me, or Products
- Textual Navigation is an alternative to buttons or graphics. If you use buttons, it’s a good idea to include text, too, as an aide for anyone who has trouble with graphics.
- Search is invaluable if you have a large site or one with lots of content buried deep. While some users enjoy browsing to find what they want, busy users want to get there quickly.
- Site Maps. These graphical representations of the structure of the site were popular several years ago, but have fallen out of favor. However, they can be useful as a secondary navigation method to show an overview of what’s in each section of the site.
- Index/Directory. Lists can help a user pinpoint a topic. Unless your site is a deep or broad portal, this is probably best as a secondary method
- Themes. Although these are rarely appropriate, if your site has a specific metaphor that can be graphically integrated into navigation, it can be a fun and natural way for the user to navigate. However, trying to force your site’s content fit your theme can be painful, limiting and confusing to the audience if it doesn’t work perfectly.
Incorporating navigation “clues” can help your audience identify where they are in your site:
- URL. You will not always be able to give your page a meaningful URL, particularly if you are working with a database, but compare these two URLs. Which gives you more information about the page?
http://www.blah.org/tokyo/maps/shinagawa.html
http://www.blah.org/map.html
- Page Title. The title of a page appears in the browser window, not actually on the page. This is what is used to create the entry in your Favorites or Bookmarks. So it’s key to make it meaningful. An example comparison:
Welcome!
DigitalEve Japan: Event Calendar
- Page Heading. This is the heading on the page itself. It should let the audience know exactly where they are. Event Calendar, DigitalEve Japan Contact Information, or
- Breadcrumbs. These are usually generated by a database-driven website. You’ve seen them at sites such as Yahoo!.
Home > Society and Culture > Cultures and Groups > Women >
- Highlighted navigation items. Either the current location is “grayed out” that is, it cannot be selected in the navigation area, or it is made more prominent.
Organizing navigation should be a priority when you start designing your site. Take a look at sites you like and especially ones you think are easy to navigate then copy the best ideas to use on your own site. Remember that even though unique design can help your site stand apart from other sites, confusing the users with bad navigation means nobody’s going to stay very long to read what you have to say.
Points to consider
- Where to place the navigation text or buttons. At the top or bottom of the page? Down one side? In a frame? Inside a table? Try to keep navigation “above the fold” on your page—that is, it should appear in the first screen of information without having to scroll down
- How many levels to include? On digitalevejapan.org, we have only the section names as navigation on each page, but we could add more detail:
About Us
- DE-J History
- Member Profiles
Events
Calendar
- Registration
- Photo Archive
- Class Materials
- What information should be searchable? Should the search box appear on every page, or do you want a special page (with instructions, hints, etc) to search from?
References
Designing Web Usability. Jakob Nielsen
Although Nielsen takes a stark and unappealing approach to graphical design, much of what’s described in this book is solid, practical information about creating a highly usable website. Just don’t believe him when he talks about anything involving graphics.
Designing Web Graphics 3. Lynda Weinman
Lynda has been working with and writing about web design for many years and this book is the most referenced one on my shelf. She discusses planning, aesthetics and execution of web graphics.
The Design of Everyday Things. Donald Norman
Although this slim volume doesn’t talk about the web at all, it is an excellent introduction to why it’s important to make things (anything at all) user-friendly.
Envisioning Information. Edward Tufte
This is one of three definitive references by Tufte. In this one, he shows different techniques to present information visually. If you’re planning to add charts, graphs or other information-rich graphics to your website, reports or other publications, this book will give you a solid understanding of the basics.
Originally presented at the Digital Eve Japan Women’s Web Retreat
June 23-24, 2001
Alishan Conference Center
Koma, Saitama
