Usability in Web Design : An Introduction
Web usability is an approach to make web sites easy to use for an end-user, without the requirement that any specialized training be undertaken. The user should be able to intuitively relate the actions he needs to perform on the web page, with other interactions he sees in the general domain of life e.g. press of a button leads to some action. The broad goal of web usability can be To present the information to the user in a clear and concise way, To give the correct choices to the users, in a very obvious way, To remove any ambiguity regarding the consequences of an action e.g. clicking on delete/remove/purchase and Put the most important thing in the right place on a web page or a web application.
1. Show the company name and/or logo in a reasonable size and noticeable location.
This identity area doesn't need to be huge, but it should be larger and more prominent than the items around it so it gets first attention when users enter the site. The upper-left corner is usually the best placement for languages that read from left to right.
2. If a link does anything other than go to another web page, such as linking to a PDF file or launching an audio or video player, email message, or another application, make sure the link explicitly indicates what will happen.
3. Use graphics to show real content.
People are naturally drawn to pictures, so gratuitous graphics can distract users from critical content.
4. Avoid horizontal scrolling at 1024x768.
Horizontal scrolling invariably causes usability issues — the biggest being that users don't notice the scrollbar and miss seeing content that is scrolled off of the screen. Use a liquid layout so the homepage size adjusts to different screen resolutions.
5. Begin the window title with the information-carrying word — usually the company name/Brand name.
Users scan, rather than read, text on screens, so if you don't catch them with the first word, you risk losing their attention. If you start the window title with anything but the most important word, the company name gets lost in bookmark lists and search results. For example, many window titles begin with "Welcome" or "Homepage," which might look okay in isolation, but convey no differentiating site information in the first word. Similarly, if your company name begins with an article, such as "the" or "a," don't include the article in the window title. For example, the window title for "The New York Times" should be "New York Times."
6. Limit window titles to no more than seven or eight words and fewer than 64 total characters. Longer titles are less scannable, especially in bookmark lists, and will not display correctly in many applications. See JobMagic's window title for an example of an overly long, truncated window title.
7. Keep the navigation system consistent throughout.
The navigation system should be in the same place on every page and have the same format.
8. Use appropriate text inside links.
Don't make your visitors guess where a link is going to take them. Visitors should be able to anticipate a link's destination by reading the text in the link or on the navigation button. If there's any question about a link's destination, clarify the issue with a TITLE attribute that explains exactly where the link goes.
Visitors may enter your site via an internal page, but hopefully they'll want to head for the home page next. Site logo links to home page. Most sites include their logo somewhere at the top of every page - generally in the top, left-hand corner. Visitors expect this logo to be a link to your site's home page. They'll often go there before looking for the home link in the navigation system.
10. Include a site search box.
A robust site search featurehelps visitors quickly locate the information they want. Make the search box prominent and be sure that it searches all of your site - and only your site. We've run across far too many Web sites that include a "Search the Web" search box on their home page. The result? Visitors hardly get to the site before the search function sends them to another site.
11. Keep the content clear and simple.
You may attract visitors with an eye-catching design, but content is what keeps them at the site and encourages them to return. Always keep search engines in mind when you write content, but remember that your ultimate audience is human visitors.
Remember that you're the designer so of course you effortlessly use the navigation system, love the content, and understand the value proposition. But now it's time to get user feedback - before your online users start sending it in.
20. Don’t Break the Workflow.
By workflow we mean every operation that a user is doing on a website. For example filling out a form, registering on a website, browsing categories, archives, etc. Don’t break these workflows, let the user cancel any operation. By not letting the user cancel an operation, we’re forcing them to finish it even if they don’t want to.
21. Do Not Overuse Javascript.
With the advent of Javascript and the AJAX technique, web designers and developers can create responsive, transparent websites, but as with all new technologies there is a cost. In our case the cost is browser inconsistency. Not every user has an up-to-date web browser. They also might not have Javascript enabled by default.
Web Design usability means website designing for your visitors instead of for yourself or your client. A site that conforms to user expectations makes visitors more comfortable and more apt to visit again and recommend the site to their friends. Good web usability is critical to your website's success. Simply put, usability in web design is making your website easy for your visitors to find the information they need when they need it.
Usable Web sites are sites that work for your readers. A usable Web site encourages repeat visits.
In general, usability refers to how well users can learn and use a product to achieve their goals and how satisfied they are with that process.
25 Hot Tips for Usability in Web Design
1. Show the company name and/or logo in a reasonable size and noticeable location.
This identity area doesn't need to be huge, but it should be larger and more prominent than the items around it so it gets first attention when users enter the site. The upper-left corner is usually the best placement for languages that read from left to right.
2. If a link does anything other than go to another web page, such as linking to a PDF file or launching an audio or video player, email message, or another application, make sure the link explicitly indicates what will happen.
3. Use graphics to show real content.
People are naturally drawn to pictures, so gratuitous graphics can distract users from critical content.
4. Avoid horizontal scrolling at 1024x768.
Horizontal scrolling invariably causes usability issues — the biggest being that users don't notice the scrollbar and miss seeing content that is scrolled off of the screen. Use a liquid layout so the homepage size adjusts to different screen resolutions.
5. Begin the window title with the information-carrying word — usually the company name/Brand name.
Users scan, rather than read, text on screens, so if you don't catch them with the first word, you risk losing their attention. If you start the window title with anything but the most important word, the company name gets lost in bookmark lists and search results. For example, many window titles begin with "Welcome" or "Homepage," which might look okay in isolation, but convey no differentiating site information in the first word. Similarly, if your company name begins with an article, such as "the" or "a," don't include the article in the window title. For example, the window title for "The New York Times" should be "New York Times."
6. Limit window titles to no more than seven or eight words and fewer than 64 total characters. Longer titles are less scannable, especially in bookmark lists, and will not display correctly in many applications. See JobMagic's window title for an example of an overly long, truncated window title.
7. Keep the navigation system consistent throughout.
The navigation system should be in the same place on every page and have the same format.
8. Use appropriate text inside links.
Don't make your visitors guess where a link is going to take them. Visitors should be able to anticipate a link's destination by reading the text in the link or on the navigation button. If there's any question about a link's destination, clarify the issue with a TITLE attribute that explains exactly where the link goes.
Visitors may enter your site via an internal page, but hopefully they'll want to head for the home page next. Site logo links to home page. Most sites include their logo somewhere at the top of every page - generally in the top, left-hand corner. Visitors expect this logo to be a link to your site's home page. They'll often go there before looking for the home link in the navigation system.
10. Include a site search box.
A robust site search featurehelps visitors quickly locate the information they want. Make the search box prominent and be sure that it searches all of your site - and only your site. We've run across far too many Web sites that include a "Search the Web" search box on their home page. The result? Visitors hardly get to the site before the search function sends them to another site.
11. Keep the content clear and simple.
You may attract visitors with an eye-catching design, but content is what keeps them at the site and encourages them to return. Always keep search engines in mind when you write content, but remember that your ultimate audience is human visitors.
12. Make page content easy to scan.
You'll spend hours - maybe days - writing your page content and it's really annoying to think that visitors may read less than half of it. Format your content so that it's easy to scan. Emphasize important points (or product characteristics) with a combination of header tags, bold type, color, or lists.
You'll spend hours - maybe days - writing your page content and it's really annoying to think that visitors may read less than half of it. Format your content so that it's easy to scan. Emphasize important points (or product characteristics) with a combination of header tags, bold type, color, or lists.
13. Add ALT and TITLE attributes to all images.
Each image should have a descriptive ALT attribute and TITLE attribute associated with it - particularly images that are also links to other pages. That way, they can quickly jump to the page they're interested in without having to wait for the entire page to load.
Each image should have a descriptive ALT attribute and TITLE attribute associated with it - particularly images that are also links to other pages. That way, they can quickly jump to the page they're interested in without having to wait for the entire page to load.
14. Keep colors and typefaces consistent.
Visitors should never click on an internal link in your site and wonder if they've left your Web site. Choose your colors and fonts carefully and use them consistently throughout the site.
Visitors should never click on an internal link in your site and wonder if they've left your Web site. Choose your colors and fonts carefully and use them consistently throughout the site.
15. Keep page layout consistent.
Use a Web site template to enforce a uniform page structure. Visitors should be able to predict the location of important page elements after visiting just one page in your site.
Use a Web site template to enforce a uniform page structure. Visitors should be able to predict the location of important page elements after visiting just one page in your site.
16. Avoid CAPTCHAs.
CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. Even the name sounds complex. The most general form of CAPTCHA is text embedded in an image and by testing visitors we can separate human users from spam bots. The problem with CAPTCHAs are that each form of human verification method triggers a complex process in the users’ brains (e.g. figuring out the distorted text, adding two numbers, etc). Another problem with CAPTCHAs are the inconsistencies regarding different cultures. For example Chinese symbols, numerals are different from most western letters and Arabic numerals. Chinese people have a much harder time using CAPTCHA ‘enabled’ online forms.
17. Custom error page.
Create a useful custom error page that helps visitors if they should click on a broken internal link or type a URL incorrectly. The custom error page should reflect the site's overall color, type, and layout structure as much as possible and provide useful links to help visitors find what they're looking for.
Create a useful custom error page that helps visitors if they should click on a broken internal link or type a URL incorrectly. The custom error page should reflect the site's overall color, type, and layout structure as much as possible and provide useful links to help visitors find what they're looking for.
18. Provide for visitor feedback.
Forms are critical to the success of ecommerce sites. Without forms, you can't have a shopping cart. But any site usually needs at least one form to allow for user feedback. A form helps you hide from email spiders and also helps you control how user feedback is formatted and sent.
19. Test the site on real users. Forms are critical to the success of ecommerce sites. Without forms, you can't have a shopping cart. But any site usually needs at least one form to allow for user feedback. A form helps you hide from email spiders and also helps you control how user feedback is formatted and sent.
Remember that you're the designer so of course you effortlessly use the navigation system, love the content, and understand the value proposition. But now it's time to get user feedback - before your online users start sending it in.
20. Don’t Break the Workflow.
By workflow we mean every operation that a user is doing on a website. For example filling out a form, registering on a website, browsing categories, archives, etc. Don’t break these workflows, let the user cancel any operation. By not letting the user cancel an operation, we’re forcing them to finish it even if they don’t want to.
21. Do Not Overuse Javascript.
With the advent of Javascript and the AJAX technique, web designers and developers can create responsive, transparent websites, but as with all new technologies there is a cost. In our case the cost is browser inconsistency. Not every user has an up-to-date web browser. They also might not have Javascript enabled by default.
22. Use Meaningful Graphics.
Don't just decorate the page with stock art. Images are powerful communicators when they show items of interest to users, but will backfire if they seem frivolous or irrelevant.
23. Add a text-based site map.
Large or complex sites should always have a text-based site map in addition to text links. Every page should contain a text link to the site map. Lost visitors will use it to find their way, while search engines spiders will have reliable access to all your pages.
Large or complex sites should always have a text-based site map in addition to text links. Every page should contain a text link to the site map. Lost visitors will use it to find their way, while search engines spiders will have reliable access to all your pages.
24. Don't Over-Format Critical Content, Such as Navigation Areas.
You might think that important homepage items require elaborate illustrations, boxes, and colors. However, users often dismiss graphics as ads, and focus on the parts of the homepage that look more likely to be useful.
You might think that important homepage items require elaborate illustrations, boxes, and colors. However, users often dismiss graphics as ads, and focus on the parts of the homepage that look more likely to be useful.
25. Include a One-Sentence Tagline.
Start the page with a tagline that summarizes what the site or company does, especially if you're new or less than famous. Even well-known companies presumably hope to attract new customers and should tell first-time visitors about the site's purpose. It is especially important to have a good tagline if your company's general marketing slogan is bland and fails to tell users what they'll gain from visiting the site.
FURTHER REFERENCES
1. Ten Usability Heuristics
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation
4. Usable Web 786 links about web usability
5. The Ultimate 20 Usability Tips for Your Website
Start the page with a tagline that summarizes what the site or company does, especially if you're new or less than famous. Even well-known companies presumably hope to attract new customers and should tell first-time visitors about the site's purpose. It is especially important to have a good tagline if your company's general marketing slogan is bland and fails to tell users what they'll gain from visiting the site.
1. Ten Usability Heuristics
Jakob Nielsen originated heuristic evaluation in the early 1990s and has compiled the most comprehensive set of heuristics.
He did not just come up with this list off the top of his head, however. They come from analyzing more than 200 usability problems and statistically reducing the set to the 10 most important rules:
Jakob Nielsen's 10 usability heuristics appear below
1. Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
2. Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
3. User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
4. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
5. Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place.
6. Recognition rather than recall
Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
7. Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
8. Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
9. Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
10. Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
2. Usability Guidelines at Usability.gov Throughout your Web design or redesign project, you should take advantage of what is already known about best practices for each step of the process. The Research-Based Web Design and Usability Guidelines, compiled through an extensive process of research and review, bring you those best practices.
The guidelines can be accessed at the below link.
3. 25-point Website Usability Checklist
6. useit.com: Jakob Nielsen's Website
No comments:
Post a Comment