Architectural and Visual Clarity
Image/multimedia theme relation with the website theme, site organization from users perspective, White/empty space, color use, Link color (normal, hover, visited), Anchor text, Page Layout, Titles, Frames etc.
Website Architecture
Flowcharts
Use these to outline the site structure, identify pages, navigation paths and content labels. Flowcharts offer an advantage in that everyone in the development process can see the site’s structure and make suggestions to alter or delete sections where necessary.
Breakdown Each Page
For each section, prepare an itemized list of contents. Include all text, images, sounds, video clips, audio clips, applets and downloadable items. List all links and their destination pages.
Separate links, which appear on all pages from those appearing on specific pages only. Use Excel or Word to create this list as you can use color-codes for reference.By breaking down each page, you also clarify each pages objectives and role.
Design for Breadth
Usability research shows that users get disorientated after the third level of depth on a site.
Therefore, help users find content within three clicks. If you can’t achieve this with the current design, start again — the rewards will be worth the efforts.
Color Use
Color is a powerful tool. When used appropriately, it can help organize sections of a page, highlight important text, or draw the eye somewhere. When used inappropriately, it can confuse, obscure text, or repel the user from your site
1) Choose color carefully!
2) Use color to enhance, not detract from your message. It isn’t a good idea to have large amounts of text in red, for instance. Instead, use it to highlight something important.
3) Don’t use a light colored text over a light background, or dark text over dark background
4) In general, warm colors (reds, yellows, and orange) are more vibrant and tend to “pop out” on a page. Cool colors (blues and greens) are perceived as more calm and tend to recede on a page.
5) The primary colors (pure red, blue, and yellow) are very powerful –use them sparingly
6) The same color might look different depending on what color is next to it. In general, light text on a dark background is more difficult to read than dark text on a light background. Even worse is any text on a patterned background!
7) Just like too much information, too much color in one place makes things more difficult to find
Architectural and Visual Clarity Don’t use color in random places just for the sake of color -use it to distinguish between links and regular text, to highlight an important box, or to visually separate the navigation from the content.
The most legible color combinations, in order, are
Black on Yellow Background
Yellow on Black Background
Green on White Background
Red on White Background
Black on White Background
White on Blue Background
Blue on White Background
Blue On Yellow Background
Links
1) Keep links throughout the site visually similar (same font, color, or boldness), so users can intuitively know what’s a link and what isn’t
2) Always let the user get back to the home page from anywhere on your site
3) When linking to other sites, review them every so often to make sure the link still works
4) Include a contact link somewhere on the site so users can give feedback or ask questions
5) Provide sufficient cues to clearly indicate to users that an item is clickable.
Users should not be expected to move the cursor around a website (’minesweeping’) to determine what is clickable. Using the eyes to quickly survey the options is much faster than ’minesweeping.’ Similarly, relying on mouseovers to designate links can confuse newer users, and slow all users as they are uncertain about which items are links.
Be consistent in your use of underlining, bullets, arrows, and other symbols such that they always indicate clickability or never suggest clickability. For example, using images as both links and as decoration slows users as it forces them to study the image to discern its clickability.
Items that are in the top center of the page, or left and right panels have a high probability of being considered links. This is particularly true if the linked element looks like a real-world tab or pushbutton.
6) Use text links rather than image links.
In general, text links are more easily recognized as clickable. Text links usually download faster, are preferred by users, and should change colors after being selected. It is usually easier to convey a link’s destination in text, rather than with the use of an image.In one study, users showed considerable confusion regarding whether or not certain images were clickable. This was true even for images that contained words. Users could not tell if the images were clickable without placing their cursor over them (’minesweeping’). Requiring users to ’minesweep’ to determine what is clickable slows them down.
Another benefit to using text links is that users with text-only and deactivated graphical browsers can see the navigation options.
7) Make the link text consistent with the title or headings on the destination (i.e., target) page.
Closely matched links and destination targets help provide the necessary feedback to users that they have reached the intended page. If users will have to click more than once to get to a specific target destination, avoid repeating the exact same link wording over and over because users can be confused if the links at each level are identical or even very similar. In one study, after users clicked on a link entitled “First Aid,” the next page had three options. One of them was again titled “First Aid.” The two “First Aid” links went to different places. Users tended to click on another option on the second page because they thought that they had already reached “First Aid.”
8) When using embedded links, the link text should accurately describe the link’s destination.
Users tend to ignore the text that surrounds each embedded link; therefore do not create embedded links that use the surrounding text to add clues about the link’s destination.
9) Use color changes to indicate to users when a link has been visited.
Generally, it is best to use the default text link colors (blue as an unvisited location/link and purple as a visited location/link). Link colors help users understand which parts of a website they have visited. In one study, providing this type of feedback was the only variable found to improve the user’s speed of finding information. If a user selects one link, and there are other links to the same target, make sure all links to that target change color.
10) Indicate to users when a link will move them to a different location on the same page or to a new page on a different website.
One study showed that users tend to assume that links will take them to another page within the same website. When this assumption is not true, users can become confused. Designers should try to notify users when they are simply moving down a page, or leaving the site altogether.
11) Indicate to users when a link has been clicked. If a user selects one link, and there are other links to the same target, make sure all links change colors.
Page Layout and Frames
A good layout will help your users use your site more effectively as well. When your header, navigation, content and footer are in the same place for each document in your site, users know where to to look to find content, links, and other information.
While there are countless layout possibilities for your site, there are a few principles to keep in mind:
Pages should flow - Users instinctively look at the top left corner of the page when a page pops up. Your layout should help direct their attention to your content.
Put important content “above the fold.” Users should get the most important information on your page without having to scroll.
Use white space in your layout - Putting some blank space around your content makes it more prominent and easier to focus on.
Make your page easy to scan - Users tend to scan pages instead of reading them. When you keep lines of text short (7-11 words), you make it easier for users to comprehend your content.
Put related items close together.
Make page-length decisions that support the primary use of the Web page.
In general, use shorter pages for homepages and navigation pages, and pages that need to be quickly browsed and/or read online. Use longer pages to
(1) Facilitate uninterrupted reading, especially on content pages
(2) Match the structure of a paper counterpart
(3) Simplify page maintenance (fewer Web page files to maintain); and,
(4) Make pages more convenient to download and print.
Use frames when certain functions must remain visible on the screen as the user accesses other information on the site.
It works well to have the functional items in one frame and the items that are being acted upon in another frame. This is sometimes referred to as a ‘simultaneous menu’ because making changes in one frame causes the information to change in another frame. Side-by-side frames seem to work best, with the functions on the left and the information viewing area on the right.
Keep in mind that frames can be confusing to some users. More than three frames on a page can be especially confusing to infrequent and occasional users. Frames also pose problems when users attempt to print, and when searching pages.
Establish a high-to-low level of importance for information and infuse this approach throughout each page on the website.
The page layout should help users find and use the most Important information. Important information should appear higher on the page so users can locate it quickly. The least used information should appear toward the bottom of the page. Information should be presented in the order that is most useful to users.
Put the most important items at the top center of the Web page to facilitate users’ finding the information.
Users generally look at the top center of a page first, then look left, then right, and finally begin systematically moving down the total Web page. All critical content and navigation options should be toward the top of the page. Particularly on navigation pages, most major choices should be visible with no or a minimum
of scrolling.
Structure pages so that items can be easily compared when users must analyze those items to discern similarities, differences, trends, and relationships.
Users should be able to compare two or more items without having to remember one while going to another page or another place on the same page to view a different item.
Limit the amount of white space (areas without text, graphics, etc.) on pages that are used for scanning and searching.
’Density’ is the percentage of the screen filled with text and graphics. One study found that higher density is related to faster scanning, and has no impact on user accuracy or preference. Another study found that users prefer moderate amounts of white space, but the amount of white space has no impact on their searching performance. On content (i.e., text) pages, use some white space to separate paragraphs. Too much separation of items on Web pages may require users to scroll unnecessarily.
Titles, Headings
Ensure that category labels, including links, clearly reflect the information and items contained within the category.
Typical users must understand category titles. Users will likely have difficulty understanding vague, generalized link labels, but will find specific, detailed links and descriptors easier to use.
Use headings that are unique from one another and conceptually related to the content they describe.
Using poor headings (mismatches between what users were expecting and what they find) is a common problem with websites. Ensure that headings are descriptive and relate to the content they introduce. If headings are too similar to one another, users may have to hesitate and re-read to decipher the difference. Identifying the best headings may require extensive usability testing and other methods.
Ensure that data tables have clear, concise, and accurate row and column headings.
Use row and column headings to indicate unique cell contents. Users require clear and concise table headings in order to make efficient and effective use of table information. Row and column headings will indicate to screen readers how data points should be labeled or identified, so the user can understand the significance of the cell in the overall scheme of the table.
Put a descriptive, unique, concise, and meaningfully different title on each Web page.
Title refers to the text that is in the browser title bar (this is the bar found at the very top of the browser screen). Titles are used by search engines to identify pages. If two or more pages have the same title, they cannot be differentiated by users or the Favorites capability of the browser. If users bookmark a page, they should not have to edit the title to meet the characteristics mentioned above.
Use headings in the appropriate HTML order.
Using the appropriate HTML heading order helps users get a sense of the hierarchy of information on the page. The appropriate use of H1-H3 heading tags also allows users of assistive technologies to understand the hierarchy of information.
Website Architecture
Flowcharts
Use these to outline the site structure, identify pages, navigation paths and content labels. Flowcharts offer an advantage in that everyone in the development process can see the site’s structure and make suggestions to alter or delete sections where necessary.
Breakdown Each Page
For each section, prepare an itemized list of contents. Include all text, images, sounds, video clips, audio clips, applets and downloadable items. List all links and their destination pages.
Separate links, which appear on all pages from those appearing on specific pages only. Use Excel or Word to create this list as you can use color-codes for reference.By breaking down each page, you also clarify each pages objectives and role.
Design for Breadth
Usability research shows that users get disorientated after the third level of depth on a site.
Therefore, help users find content within three clicks. If you can’t achieve this with the current design, start again — the rewards will be worth the efforts.
Color Use
Color is a powerful tool. When used appropriately, it can help organize sections of a page, highlight important text, or draw the eye somewhere. When used inappropriately, it can confuse, obscure text, or repel the user from your site
1) Choose color carefully!
2) Use color to enhance, not detract from your message. It isn’t a good idea to have large amounts of text in red, for instance. Instead, use it to highlight something important.
3) Don’t use a light colored text over a light background, or dark text over dark background
4) In general, warm colors (reds, yellows, and orange) are more vibrant and tend to “pop out” on a page. Cool colors (blues and greens) are perceived as more calm and tend to recede on a page.
5) The primary colors (pure red, blue, and yellow) are very powerful –use them sparingly
6) The same color might look different depending on what color is next to it. In general, light text on a dark background is more difficult to read than dark text on a light background. Even worse is any text on a patterned background!
7) Just like too much information, too much color in one place makes things more difficult to find
Architectural and Visual Clarity Don’t use color in random places just for the sake of color -use it to distinguish between links and regular text, to highlight an important box, or to visually separate the navigation from the content.
The most legible color combinations, in order, are
Black on Yellow Background
Yellow on Black Background
Green on White Background
Red on White Background
Black on White Background
White on Blue Background
Blue on White Background
Blue On Yellow Background
Links
1) Keep links throughout the site visually similar (same font, color, or boldness), so users can intuitively know what’s a link and what isn’t
2) Always let the user get back to the home page from anywhere on your site
3) When linking to other sites, review them every so often to make sure the link still works
4) Include a contact link somewhere on the site so users can give feedback or ask questions
5) Provide sufficient cues to clearly indicate to users that an item is clickable.
Users should not be expected to move the cursor around a website (’minesweeping’) to determine what is clickable. Using the eyes to quickly survey the options is much faster than ’minesweeping.’ Similarly, relying on mouseovers to designate links can confuse newer users, and slow all users as they are uncertain about which items are links.
Be consistent in your use of underlining, bullets, arrows, and other symbols such that they always indicate clickability or never suggest clickability. For example, using images as both links and as decoration slows users as it forces them to study the image to discern its clickability.
Items that are in the top center of the page, or left and right panels have a high probability of being considered links. This is particularly true if the linked element looks like a real-world tab or pushbutton.
6) Use text links rather than image links.
In general, text links are more easily recognized as clickable. Text links usually download faster, are preferred by users, and should change colors after being selected. It is usually easier to convey a link’s destination in text, rather than with the use of an image.In one study, users showed considerable confusion regarding whether or not certain images were clickable. This was true even for images that contained words. Users could not tell if the images were clickable without placing their cursor over them (’minesweeping’). Requiring users to ’minesweep’ to determine what is clickable slows them down.
Another benefit to using text links is that users with text-only and deactivated graphical browsers can see the navigation options.
7) Make the link text consistent with the title or headings on the destination (i.e., target) page.
Closely matched links and destination targets help provide the necessary feedback to users that they have reached the intended page. If users will have to click more than once to get to a specific target destination, avoid repeating the exact same link wording over and over because users can be confused if the links at each level are identical or even very similar. In one study, after users clicked on a link entitled “First Aid,” the next page had three options. One of them was again titled “First Aid.” The two “First Aid” links went to different places. Users tended to click on another option on the second page because they thought that they had already reached “First Aid.”
8) When using embedded links, the link text should accurately describe the link’s destination.
Users tend to ignore the text that surrounds each embedded link; therefore do not create embedded links that use the surrounding text to add clues about the link’s destination.
9) Use color changes to indicate to users when a link has been visited.
Generally, it is best to use the default text link colors (blue as an unvisited location/link and purple as a visited location/link). Link colors help users understand which parts of a website they have visited. In one study, providing this type of feedback was the only variable found to improve the user’s speed of finding information. If a user selects one link, and there are other links to the same target, make sure all links to that target change color.
10) Indicate to users when a link will move them to a different location on the same page or to a new page on a different website.
One study showed that users tend to assume that links will take them to another page within the same website. When this assumption is not true, users can become confused. Designers should try to notify users when they are simply moving down a page, or leaving the site altogether.
11) Indicate to users when a link has been clicked. If a user selects one link, and there are other links to the same target, make sure all links change colors.
Page Layout and Frames
A good layout will help your users use your site more effectively as well. When your header, navigation, content and footer are in the same place for each document in your site, users know where to to look to find content, links, and other information.
While there are countless layout possibilities for your site, there are a few principles to keep in mind:
Pages should flow - Users instinctively look at the top left corner of the page when a page pops up. Your layout should help direct their attention to your content.
Put important content “above the fold.” Users should get the most important information on your page without having to scroll.
Use white space in your layout - Putting some blank space around your content makes it more prominent and easier to focus on.
Make your page easy to scan - Users tend to scan pages instead of reading them. When you keep lines of text short (7-11 words), you make it easier for users to comprehend your content.
Put related items close together.
Make page-length decisions that support the primary use of the Web page.
In general, use shorter pages for homepages and navigation pages, and pages that need to be quickly browsed and/or read online. Use longer pages to
(1) Facilitate uninterrupted reading, especially on content pages
(2) Match the structure of a paper counterpart
(3) Simplify page maintenance (fewer Web page files to maintain); and,
(4) Make pages more convenient to download and print.
Use frames when certain functions must remain visible on the screen as the user accesses other information on the site.
It works well to have the functional items in one frame and the items that are being acted upon in another frame. This is sometimes referred to as a ‘simultaneous menu’ because making changes in one frame causes the information to change in another frame. Side-by-side frames seem to work best, with the functions on the left and the information viewing area on the right.
Keep in mind that frames can be confusing to some users. More than three frames on a page can be especially confusing to infrequent and occasional users. Frames also pose problems when users attempt to print, and when searching pages.
Establish a high-to-low level of importance for information and infuse this approach throughout each page on the website.
The page layout should help users find and use the most Important information. Important information should appear higher on the page so users can locate it quickly. The least used information should appear toward the bottom of the page. Information should be presented in the order that is most useful to users.
Put the most important items at the top center of the Web page to facilitate users’ finding the information.
Users generally look at the top center of a page first, then look left, then right, and finally begin systematically moving down the total Web page. All critical content and navigation options should be toward the top of the page. Particularly on navigation pages, most major choices should be visible with no or a minimum
of scrolling.
Structure pages so that items can be easily compared when users must analyze those items to discern similarities, differences, trends, and relationships.
Users should be able to compare two or more items without having to remember one while going to another page or another place on the same page to view a different item.
Limit the amount of white space (areas without text, graphics, etc.) on pages that are used for scanning and searching.
’Density’ is the percentage of the screen filled with text and graphics. One study found that higher density is related to faster scanning, and has no impact on user accuracy or preference. Another study found that users prefer moderate amounts of white space, but the amount of white space has no impact on their searching performance. On content (i.e., text) pages, use some white space to separate paragraphs. Too much separation of items on Web pages may require users to scroll unnecessarily.
Titles, Headings
Ensure that category labels, including links, clearly reflect the information and items contained within the category.
Typical users must understand category titles. Users will likely have difficulty understanding vague, generalized link labels, but will find specific, detailed links and descriptors easier to use.
Use headings that are unique from one another and conceptually related to the content they describe.
Using poor headings (mismatches between what users were expecting and what they find) is a common problem with websites. Ensure that headings are descriptive and relate to the content they introduce. If headings are too similar to one another, users may have to hesitate and re-read to decipher the difference. Identifying the best headings may require extensive usability testing and other methods.
Ensure that data tables have clear, concise, and accurate row and column headings.
Use row and column headings to indicate unique cell contents. Users require clear and concise table headings in order to make efficient and effective use of table information. Row and column headings will indicate to screen readers how data points should be labeled or identified, so the user can understand the significance of the cell in the overall scheme of the table.
Put a descriptive, unique, concise, and meaningfully different title on each Web page.
Title refers to the text that is in the browser title bar (this is the bar found at the very top of the browser screen). Titles are used by search engines to identify pages. If two or more pages have the same title, they cannot be differentiated by users or the Favorites capability of the browser. If users bookmark a page, they should not have to edit the title to meet the characteristics mentioned above.
Use headings in the appropriate HTML order.
Using the appropriate HTML heading order helps users get a sense of the hierarchy of information on the page. The appropriate use of H1-H3 heading tags also allows users of assistive technologies to understand the hierarchy of information.
posted by Rajat Bhardwaj @ 6:46 AM
0 Comments:
Post a Comment
<< Home