|
Julie Dreese
Usability in Web Design
MPD 320B
Don't laugh, I know this is unformatted. I chose to research usability in web design for my paper, because I don’t believe it is stressed enough. I have taken two web-related classes so far, and it has only been mentioned in passing. Usually the focus has been on making an amazing-looking site instead of what a website should really revolve around – the user.
The first article I found was called “Design for Form or Function?” By Kurt Thumlert. In this article he discusses “Designing Las Vegas Style,” and how this style has quickly found a home on the internet. Las Vegas Style refers to architect Robert Venturi and his theory that everything should be decorated to the max. He is quoted as saying “Less is a bore,” and was apparently uninterested in function. Venturi considered the Las Vegas strip to be a design success. I think this is a very good way of describing many websites today. Many sites, especially of the e-commerce variety, bombard visitors constantly with pop-up banners and changing ads. This is very distracting and definetly not aesthetically pleasing. However, even an aesthetically pleasing, well “designed” website can detract from usability. So what is the solution to this problem? Some people approach their websites as though they were doing a print layout. This can help to clean things up, however it’s not ultimately a print piece, it’s a website, and therefore has a completely different function. Thumlert suggests that the only real solution is to “tailor the message to the medium,” and create a site that is not self-indulgently overdesigned. It’s sort of like the rule of typography – good use of type is not noticed. If people are noticing your design at all, you should question what your priorities are, says Thumlert. The first priority should be predicting how a user will respond to the site, and how efficiently they can accomplish the tasks they set out to do. He’s not suggesting that your website has to be boring or “undesigned,” he’s simply saying that form and function should work together to create an easily navigated website.
The second article I chose was called “Pervasive Usability – Planning for an Uncertain Future,” by Suneet Kheterpal. In this article, she discusses how important testing is during each phase of your design. At each phase of design you have a chance to either make your website easier to use, or more difficult. She suggests budgeting time for plenty of testing into your schedule for building the website. There are 3 general steps of Pervasive Usability Testing presented in this article. The first step is to analyze the project from all sides. This means determining the user’s needs, the goals of both the user and the business, any changes that will be made to a pre-existing website, competitor’s websites, and feedback from users. Step two is to conceptualize the design, while making sure that the prominent features of the website are well placed in the architectural layout. The design should be placed around the information architecture, not vice versa. Prototypes should be made, tested on users, and revised until a good solution is found. Step three is design, hosting and maintenance. The worlds of design and architecture have hopefully been fused into a usable whole. Work does not stop here, however. The web is a constantly changing place, and the website should be updated regularly. Not only should it be updated for information, but it should be tested, or at the very least user feedback should be periodically checked to ensure that the site can be used efficiently. A website should never really be viewed as a finished product, but as a constantly morphing thing. Suneet suggests keeping up with the changing environment, but keeping important “paths” usable and common in all the incarnations of your design. This will keep your regular visitors happy, and ensure that they stay regular visitors.
The third article I found was called “Case Study – Building a Usable Site,” by someone who calls herself “Robirda.” I was a little skeptical at first because she’s obsessed by canaries (hence the name,) but upon reading the article actually found it very helpful. It was helpful mostly because she started off as a normal, knows-nothing-about-computers type of person, and learned all about website development and usability through her own trial and error research. She offered the following lessons she learned in English, which was very helpful to me:
1. Correct tag syntax: In some browsers, a missing punctuation mark may cause an entire page to be unviewable. She suggests opening the files in an HTML editing program to check for mistakes.
2. Clear alt tags: Descriptive tags should accompany all images that have anything to do with the content. Many people have slow connections and may have images turned off to speed things up.
3. Proper use of color: Ten percent of the population has red-green color blindness. These colors should not be used together if possible. Other colors may cause vibrations or headaches, so care should be used in choosing a palette.
4. Optimize Images: If it takes someone with a slow connection longer than 15 seconds to download it, find an alternative. People are impatient and will leave your site rather than wait.
5. Readable fonts: Always specify alternative fonts. Also, try to use 12 or 14 point type to avoid eyestrain on the user.
6. Fixed-pixel table widths vs. percentages: Setting tables using percentages rather than pixels allows the user to resize the page to fit their individual screen without having to scroll.
7. Link Varieties: Some people like text links, and others like graphic links. Try to offer both, or important links could be overlooked by visitors.
8. Live Testing: You can run your website through the utility programs designed for this, but it’s also a good idea to hire someone to go through it. She suggests hiring someone you don’t know who is interested in the content. Pay them to spend a certain amount of time surfing your site. Sit somewhere that you can see what they’re doing, and pay attention to where they get hung up or confused. These areas will need work. Here is a helpful list of questions she recommends asking the user to determine ease of use:
- What was your general overall impression when arriving at the site?
- What did you think of the appearance of the site?
- What did you think of the content?
- Did you find it easy to find information you were interested in?
- Were you able to easily access all the information you wanted?
- What did you like about the website?
- What did you dislike about the website?
- What kind of improvements do you think the site needs?
- Do you like the website’s use of color?
- How do the colors used on the website make you feel?
- Do you think you will visit this website again? Why or why not?
The fourth article I chose was called “Essential Color Checklists for Web Design,” by Marta Eleniak. In this article she discusses color palettes and their effect on usability. These rules are not carved in stone, she says, as long as your user tests show that people can obtain their goals easily with your site. However, they may be used as guidelines if you are uncertain about choosing a palette. Some “Do’s” for color use are the following: Have strong contrast between the background color and the text. If there is text used on the page, use a solid background instead of a pattern. If there’s too much going on, it’s very hard on the eyes of the user. If you absolutely must use a pattern, use it toward the center of the screen, as its easier on people’s eyes than if it’s on the periphery. Also, if you’re using color to differentiate different areas of the page, be consistent and don’t use too many colors. (Not more than five is a good rule.) As far as color choices go, black text on a white background is the most readable combination. Red or other bright colors are good for drawing attention to an area, and bright colors are best if a page is going to be viewed for a long period of time. Although everyone reacts to colors differently, it is generally accepted that bright colors convey low prices, while beige, blue, burgundy, and dark green represent tradition and high quality. Color don’ts are: Don’t use red and green together because of the colorblindness issue. Blue and yellow are the same thing, although this type of colorblindness affects a smaller percentage of people. Do not use grayscale for important diagrams. Do not use gray text. Also, do not use high chroma colors together, as this can cause headaches and perceived vibrations. Remember that colors change depending on the light around them as well.
The final source that I used was called “Research-based Web Design and Usability Guidelines,” where research from many different sources is compiled into a set of guidelines and the explanations for them. Some of the guidelines are:
1. Set Goals. Set goals before starting. What will users want out of this site. What does the business want? Is information retrieval easy? Test the website repeatedly for usability, and then revise it according to the results you get.
2. Design Considerations: Decide on the hierarchy of information you’re presenting. Make important things stand out so they can be found easily. Automate the site as much as possible so that visitors aren’t having to calculate, etc. People shouldn’t have to work at your site to get what they want. Be consistent with placement of logos, buttons, and navigation. The more consistent you are, the more easily people can get around. Provide visitors feedback so they know where they are in the process, even if this is simply changing the color of a link that has been clicked. Place a logo consistently on each page so that visitors are aware they’re still on your site.
3. Content Organization: Place important information at the top of the hierarchy. Make it stand out. Use short sentences and paragraphs as this increases readability. Create a printable version of your page so that people can access the information on paper. Some people are more comfortable reading lots of text on paper.
4. Titles/Headings: Use titles that are relevant to your pages so that search engines can find them. Use headings that make sense so that visitors can skim their way through the page and find the information they need quickly.
5. Page length: Use short pages for all home and navigation pages, or for pages that need to be browsed quickly or have long graphics. Use long pages to reduce web maintenance, or to make things easier to print.
6. Page layout: Align elements on the page for easier reading. Use a hierarchy to help visitors pick out what is important. Be consistent in the location of logos, buttons, and navigation.
7. Readable fonts: 10 point is the bare mimimum. Preferably use 12 or 14 point type. Use fonts that are easy to read.
8. Reading/Scanning: If speed reading is critical, use 100 characters per line. If user’s preference is critical, use 55 characters per line (roughly.) Improve scannability by providing clear links and headings.
9. Links: Show the links clearly and indicate where they are taking you (to another site, etc…) Avoid complications like mouseovers, and show used links in another color.
10. Graphics: Only use graphics that enhance your content. Optimize your file sizes.
These articles were all very helpful to me in describing the importance of usability in web design. It has made me look at websites differently. Some sites that I thought were boring I am now impressed with, and some sites that I thought were great I can see now are not particularly user-friendly. It’s difficult I’m sure to combine aesthetics with usefulness, but hopefully we’ll see more of that in the future than the current Vegas-style websites.
References: Sitepoint.com
1. Essential Color checklists for Web Design by Marta Eleniak
2. Case Study – Building a Usable Site by Robirda
3. Pervasive Usability – Planning for an Uncertain Future by Suneet Kheterpal
4. Design for Form or Function? By Kurt Thumlert
5. usability.gov/guidelines/top
|
