Krug’s Trunk Test: My Assessments and Test Outcomes
Krug’s trunk test is an exercise to assess the usability, or specifically the “good navigation”, of a web site by having the user start from in “the bowels” of a site and assess from there whether the following questions may be answered “without hesitation”:
I performed this “trunk test” on the following websites and will discuss my final assessment of the answers to the above questions for each of these sites: Drugs & Alcohol page, Food Network's Party Ideas page, and the University of Arizona, School of Information Resources & Library Science’s About SIRLS page.
1. The TeensHealth.org's Drugs & Alcohol page has an overall nicely designed page with a clean and uncluttered layout. However, there are some issues that if addressed would make this a better and more effective informational website.
The first problem I noticed is that, although the Site ID is locatable and properly placed in the upper left corner, (Krug p64), the website’s sponsor, the Nemours Foundation, has an equally prominent listing on the right side of the page, making the site ID a bit confusing. This site’s design of the Site ID and Sponsor information forces the user to pause and think about which option may be the homepage, which is a clear violation of Krug’s mantra “Don’t Make Me Think!” (p11).
It’s much easier to tell what page the user is on, because the page name is on a prominent banner located in the top middle of the page. When I navigated to other areas of the site, I could see that the use of these page name banners was consistent which is “one of the most powerful usability principles” (Nielsen, Top Ten Mistakes in Web Design).
The major sections of the site are clearly laid out by the tabs navigation bar on the left hand side of the page. One issue here is that the sections tabs on left side of the page are not highlighted in some way to show the reader which tab has been selected. According to Krug, “if there’s no tab selected when I enter a site…I lose the impact of the tabs in the crucial first few seconds when it counts the most” (p84). Therefore, highlighted would make the tab navigation scheme effective.
The local navigation of this webpage is fairly well done. However one issue I encountered is that the links change to a very similar color after the user has visited it (from blue-gray to blue). At first I thought they didn’t change color, but after trying different browsers, I noticed there was a slight color change. This may be an issue for other users as well, and the end result is likely to cause confusion for users who may need cues to know which links have been previously visited. According to Jacob Nielsen, in Top Ten Mistakes in Web Design, “knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.”
The “you are here indicators” are the page name banners and in the use of breadcrumbs to show “the path from the homepage to where you are” (Krug, p76). Again, the use of highlighted tabs to cue the user on exactly which section they are on would make the use of these tabs more effective.
Users can search from any page and the search engine is well laid out with the search box at the top with a clearly defined “search” button. However, the search capabilities are fairly weak. Bad search is the number one mistake according to Jakob Nielsen’s Top Ten Mistakes in Web Design, because “overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms.” I experimented with the search by purposely misspelling words like “alcahol” and “maryjuana” and even searching for ambiguous terms like “drinking” to see what the site’s search capabilities were. I came away disappointed since misspelled words resulted in “no results were found for your search”. Another problem is that the search criteria are not displayed on the search results page, which is a “Web Blooper” according to Jeff Johnson’s in his book GUI Bloopers (p342). Johnson points out that “when search services do not show the users’ search criteria on the results page, they are hindering their own effectiveness” (p342). Also, the results displayed for ambiguous search terms should be tightened up for more effective searching. For example, the search for the term “drinking” resulted in matches about water, and even sports nutrition. A search engine this weak could result in the loss of user interest because it’s so difficult to find results when searches are not good matches to what is in the webpage. I think this element of web design is especially important for a site that has a target audience of teens, who may not be sophisticated searchers. This site’s search engine needs to be configured to allow matches for descriptive terms or misspellings to allow effective searching.
Although it should be easy for users to navigate “Home”, because there is a link for it located at the top left side of the page. However there is another violation of the “Don’t Make Me Think!” rule, because right next to link for “Home” is another link for “KidsHealth Home”. This is overly confusing, especially for users that are in the bowels of a site, to know exactly which one is the “right” home navigation link to use. Also, when users click on Home, the homepage opens in new browser, which is Mistake number nine of Top Ten Mistakes in Web Design. Neilsen explains why this constitutes bad design:
2. The Food Network's Party Ideas page looks overwhelming with its rich media graphics and flash advertisement and the moving ticker in the heading; there are also four drop down menus and three search boxes, as well as numerous section headings and text boxes. Since my initial reaction is “Whoa! Where do I start?” obviously there is not a good use of “clear visual hierarchy” on this page (Krug, p31), nor an effort to “keep the noise down to a dull roar” (Krug p41). My first impression of the “busy-ness” [sic] and “visual noise” (Krug, p38) going on in this page is summed up by Krug: “When everything on the page is clamoring for my attention the effect can be overwhelming.” The use of moving banners and flash is mistake number seven of Nielsen’s Top Ten Mistakes in Web Design because “Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation.”
The site ID is a locatable icon properly placed in the upper left corner.
The page you are on relies on the tabs navigation where the tab of the page you are on is reverse highlighted, but these tabs are also the major sections of the website. There is also very small breadcrumb at the top of the page. However, Krug warns against making the breadcrumb “do double duty” by using them in lieu of a page name because “it seems like it should work, but it doesn’t, probably because it fights our expectation that headings are flush left or centered not dangling in the middle of the page at the end of a list” (p79). Krug also suggests that the last item on this breadcrumb be boldface, which is not done here making the page identification more difficult. Another issue I noticed right away is that the URL is: http://www.foodnetwork.com/food/entertaining. This URL name is confusing to me because it contains the “food/entertaining” tag which is different from the page navigation tab for “Party Ideas” (and there is no tab for food and entertaining either).
The major sections of the site are clearly laid out by the tabs navigation bar across the top of the page and are nicely reverse highlighted to show which section the user is on (note that for this website, the sections correspond to pages).
The local navigation is simply a mess because it is spread out all over the page, although it also has three bulleted links in small type on the left side of the page. The links in the middle of the page and on left side of the page take the user to the same place to make the design of this website not only messy but redundant. According to Jakob Nielson in Reduce Redundancy: Decrease Duplicated Design Decisions,
Also, the featured items look similar to advertisements, which users tend to ignore (Nielsen, Top 10 Mistakes in Web Design). Furthermore, these featured items make the mistake of asking users to “click here” which Nielsen says is “the oldest web design rule is to avoid using [“Click Here”] as the anchor text for a hypertext link” (p55). Instead Nielsen recommends using hyperlinks in “text that provides a short summary of what kind of additional information is available” (p55).
The “you are here indicators” again rely on the reverse highlighted tab and small breadcrumb (as do both the page and section identifiers).
You can search by putting your search term into one of the three search boxes on the page. One search box is labeled “Find an Episode”, but users may not know if they should search for an episode or topic. The other two search boxes seem to be the same, because they both gave me identical results, except one is located on the top middle of the page while the other is in the top left margin of the page. Figuring out which of the three search boxes to use is confusing and makes the user think much too much. Users must also select whether to search by “Recipes” or by “Topics” for the non- “Find an Episode” boxes which again makes the user think too much. However the search results properly show the search term the user has entered for the search process (Johnson, p342).
You can get home by clicking the Site ID graphic on the upper left hand corner of the page, or by searching hard for the tiny first breadcrumb labeled “Home”, or the equally tiny “Home” link at the bottom of the page. This is yet another example redundant links.
3. I chose to critique the University of Arizona, School of Information Resources & Library Science (SIRLS) web page because I must rely this website for crucial departmental information and it drives me crazy because the site is so user unfriendly it makes finding information difficult. For this exercise I looked at the About SIRLS page which is frankly a relief to be past the homepage, which manages to make most of Neilsen's Top 10 Mistakes in Web Design, including the use of crowded popup menus and link redundancy in triplicate . However, the About SIRLS page is okay, but with some corrections it could be made better (while the Homepage needs a complete overhaul).
The Site ID is locatable and properly placed in the upper left corner inside a banner with the school logo.
The page you are on is also easy to locate because the page name is bolded and located in the top left of the body of the page, and the navigation tab is reverse highlighted.
The major sections are fairly well done, but I would suggest that the subsections which are currently located on the left side of the page in table form be included in the tab menu at the top instead. Moving the section navigation links to tab subsections would be a more effective use of the tab navigation scheme already in place. But at the very least, the existing subsections should be highlighted when the user clicks on them.
The local navigation is nicely laid out on the page, with a bulleted list and underlined links. However, it could be made more user friendly by reducing the amount of redundant links such as the calendar which is also located in a table on the right side of the page and the Search & Index link. While the Search & Index link should be converted to a “simple search box” (Nielsen, Top 10 Mistakes in Web Design). Also, the duplicate calendar links are bad
Another problem is that the links do not change color which may cause users to unknowingly revisit the same sites repeatedly (Nielsen, Top 10 Mistakes in Web Design).
The “you are here indicators” are the page name heading in bold at the top left of the page, the use of breadcrumbs to show “the path from the homepage to where you are” (Krug, p76) and the use of reverse highlighted tabs to cue the user.
You can search by clicking on a link in the subsection menu located on the left side of the page or clicking on the link in the middle of the page. These are violations of both redundancy and requiring the user to click on a link for searching rather than providing a search box (Nielsen, Top 10 Mistakes in Web Design). However, since this site incorporates a Google search box, the search capabilities are robust with the proper listing of the user’s search terms (Johnson, p342).
You can get home by clicking on the “Home” tab in the section menu, or by clicking on the first breadcrumb labeled “Home”, the “Home” link at the bottom of the page or the SIRLS icon. Having this many links is again redundant, a better option would be to make one “Home” option “more prominent rather than duplicate it” (Nielsen, Reduce Redundancy: Decrease Duplicated Design Decisions).
References:
Johnson, Jeff. GUI Bloopers: Don’ts and Do’s for Software Developers and Web Designers. CA: Academic Press, 2000.
Krug, Steve. Don’t’ Make Me Think: A Common Sense Approach to Web Usability, 2nd Ed. IN: New Riders, 2006.
Nielsen, Jakob. Designing Web Usability. IN: New Riders, 2000.
Nielsen, Jakob. (2002). Reduce Redundancy: Decrease Duplicated Design Decisions. Jakob Nielson’s Alert Box. Accessed online on 10/15/06 at http://www.useit.com/alertbox/20020609.html.
Neilsen, Jakob. (Updated 2006). Top 10 Mistakes in Web Design. Jakob Nielson’s Alert Box. Accessed online on 10/15/06 at http://www.useit.com/alertbox/9605.html.
What site this is?
What page you are on?
What are the major sections of this site?
What are your options at this level?
Where you are in the scheme of things?
How you can search?
How you can get home?
(p85).
I performed this “trunk test” on the following websites and will discuss my final assessment of the answers to the above questions for each of these sites: Drugs & Alcohol page, Food Network's Party Ideas page, and the University of Arizona, School of Information Resources & Library Science’s About SIRLS page.
1. The TeensHealth.org's Drugs & Alcohol page has an overall nicely designed page with a clean and uncluttered layout. However, there are some issues that if addressed would make this a better and more effective informational website.
The first problem I noticed is that, although the Site ID is locatable and properly placed in the upper left corner, (Krug p64), the website’s sponsor, the Nemours Foundation, has an equally prominent listing on the right side of the page, making the site ID a bit confusing. This site’s design of the Site ID and Sponsor information forces the user to pause and think about which option may be the homepage, which is a clear violation of Krug’s mantra “Don’t Make Me Think!” (p11).
It’s much easier to tell what page the user is on, because the page name is on a prominent banner located in the top middle of the page. When I navigated to other areas of the site, I could see that the use of these page name banners was consistent which is “one of the most powerful usability principles” (Nielsen, Top Ten Mistakes in Web Design).
The major sections of the site are clearly laid out by the tabs navigation bar on the left hand side of the page. One issue here is that the sections tabs on left side of the page are not highlighted in some way to show the reader which tab has been selected. According to Krug, “if there’s no tab selected when I enter a site…I lose the impact of the tabs in the crucial first few seconds when it counts the most” (p84). Therefore, highlighted would make the tab navigation scheme effective.
The local navigation of this webpage is fairly well done. However one issue I encountered is that the links change to a very similar color after the user has visited it (from blue-gray to blue). At first I thought they didn’t change color, but after trying different browsers, I noticed there was a slight color change. This may be an issue for other users as well, and the end result is likely to cause confusion for users who may need cues to know which links have been previously visited. According to Jacob Nielsen, in Top Ten Mistakes in Web Design, “knowing which pages they've already visited frees users from unintentionally revisiting the same pages over and over again.”
The “you are here indicators” are the page name banners and in the use of breadcrumbs to show “the path from the homepage to where you are” (Krug, p76). Again, the use of highlighted tabs to cue the user on exactly which section they are on would make the use of these tabs more effective.
Users can search from any page and the search engine is well laid out with the search box at the top with a clearly defined “search” button. However, the search capabilities are fairly weak. Bad search is the number one mistake according to Jakob Nielsen’s Top Ten Mistakes in Web Design, because “overly literal search engines reduce usability in that they're unable to handle typos, plurals, hyphens, and other variants of the query terms.” I experimented with the search by purposely misspelling words like “alcahol” and “maryjuana” and even searching for ambiguous terms like “drinking” to see what the site’s search capabilities were. I came away disappointed since misspelled words resulted in “no results were found for your search”. Another problem is that the search criteria are not displayed on the search results page, which is a “Web Blooper” according to Jeff Johnson’s in his book GUI Bloopers (p342). Johnson points out that “when search services do not show the users’ search criteria on the results page, they are hindering their own effectiveness” (p342). Also, the results displayed for ambiguous search terms should be tightened up for more effective searching. For example, the search for the term “drinking” resulted in matches about water, and even sports nutrition. A search engine this weak could result in the loss of user interest because it’s so difficult to find results when searches are not good matches to what is in the webpage. I think this element of web design is especially important for a site that has a target audience of teens, who may not be sophisticated searchers. This site’s search engine needs to be configured to allow matches for descriptive terms or misspellings to allow effective searching.
Although it should be easy for users to navigate “Home”, because there is a link for it located at the top left side of the page. However there is another violation of the “Don’t Make Me Think!” rule, because right next to link for “Home” is another link for “KidsHealth Home”. This is overly confusing, especially for users that are in the bowels of a site, to know exactly which one is the “right” home navigation link to use. Also, when users click on Home, the homepage opens in new browser, which is Mistake number nine of Top Ten Mistakes in Web Design. Neilsen explains why this constitutes bad design:
“The strategy is self-defeating since it disables the Back button which is the normal way users return to previous sites. Users often don't notice that a new window has opened, especially if they are using a small monitor where the windows are maximized to fill up the screen. So a user who tries to return to the origin will be confused by a grayed out Back button.”
2. The Food Network's Party Ideas page looks overwhelming with its rich media graphics and flash advertisement and the moving ticker in the heading; there are also four drop down menus and three search boxes, as well as numerous section headings and text boxes. Since my initial reaction is “Whoa! Where do I start?” obviously there is not a good use of “clear visual hierarchy” on this page (Krug, p31), nor an effort to “keep the noise down to a dull roar” (Krug p41). My first impression of the “busy-ness” [sic] and “visual noise” (Krug, p38) going on in this page is summed up by Krug: “When everything on the page is clamoring for my attention the effect can be overwhelming.” The use of moving banners and flash is mistake number seven of Nielsen’s Top Ten Mistakes in Web Design because “Web users have learned to stop paying attention to any ads that get in the way of their goal-driven navigation.”
The site ID is a locatable icon properly placed in the upper left corner.
The page you are on relies on the tabs navigation where the tab of the page you are on is reverse highlighted, but these tabs are also the major sections of the website. There is also very small breadcrumb at the top of the page. However, Krug warns against making the breadcrumb “do double duty” by using them in lieu of a page name because “it seems like it should work, but it doesn’t, probably because it fights our expectation that headings are flush left or centered not dangling in the middle of the page at the end of a list” (p79). Krug also suggests that the last item on this breadcrumb be boldface, which is not done here making the page identification more difficult. Another issue I noticed right away is that the URL is: http://www.foodnetwork.com/food/entertaining. This URL name is confusing to me because it contains the “food/entertaining” tag which is different from the page navigation tab for “Party Ideas” (and there is no tab for food and entertaining either).
The major sections of the site are clearly laid out by the tabs navigation bar across the top of the page and are nicely reverse highlighted to show which section the user is on (note that for this website, the sections correspond to pages).
The local navigation is simply a mess because it is spread out all over the page, although it also has three bulleted links in small type on the left side of the page. The links in the middle of the page and on left side of the page take the user to the same place to make the design of this website not only messy but redundant. According to Jakob Nielson in Reduce Redundancy: Decrease Duplicated Design Decisions,
“too many cross-references will create an overly complex interface and prevent users from understanding where they are and what options they have at that location. It's thus essential to limit cross-references to those alternatives that are both most important to users at their current location and most likely to help them overcome navigational dislocation.”
Also, the featured items look similar to advertisements, which users tend to ignore (Nielsen, Top 10 Mistakes in Web Design). Furthermore, these featured items make the mistake of asking users to “click here” which Nielsen says is “the oldest web design rule is to avoid using [“Click Here”] as the anchor text for a hypertext link” (p55). Instead Nielsen recommends using hyperlinks in “text that provides a short summary of what kind of additional information is available” (p55).
The “you are here indicators” again rely on the reverse highlighted tab and small breadcrumb (as do both the page and section identifiers).
You can search by putting your search term into one of the three search boxes on the page. One search box is labeled “Find an Episode”, but users may not know if they should search for an episode or topic. The other two search boxes seem to be the same, because they both gave me identical results, except one is located on the top middle of the page while the other is in the top left margin of the page. Figuring out which of the three search boxes to use is confusing and makes the user think much too much. Users must also select whether to search by “Recipes” or by “Topics” for the non- “Find an Episode” boxes which again makes the user think too much. However the search results properly show the search term the user has entered for the search process (Johnson, p342).
You can get home by clicking the Site ID graphic on the upper left hand corner of the page, or by searching hard for the tiny first breadcrumb labeled “Home”, or the equally tiny “Home” link at the bottom of the page. This is yet another example redundant links.
3. I chose to critique the University of Arizona, School of Information Resources & Library Science (SIRLS) web page because I must rely this website for crucial departmental information and it drives me crazy because the site is so user unfriendly it makes finding information difficult. For this exercise I looked at the About SIRLS page which is frankly a relief to be past the homepage, which manages to make most of Neilsen's Top 10 Mistakes in Web Design, including the use of crowded popup menus and link redundancy in triplicate . However, the About SIRLS page is okay, but with some corrections it could be made better (while the Homepage needs a complete overhaul).
The Site ID is locatable and properly placed in the upper left corner inside a banner with the school logo.
The page you are on is also easy to locate because the page name is bolded and located in the top left of the body of the page, and the navigation tab is reverse highlighted.
The major sections are fairly well done, but I would suggest that the subsections which are currently located on the left side of the page in table form be included in the tab menu at the top instead. Moving the section navigation links to tab subsections would be a more effective use of the tab navigation scheme already in place. But at the very least, the existing subsections should be highlighted when the user clicks on them.
The local navigation is nicely laid out on the page, with a bulleted list and underlined links. However, it could be made more user friendly by reducing the amount of redundant links such as the calendar which is also located in a table on the right side of the page and the Search & Index link. While the Search & Index link should be converted to a “simple search box” (Nielsen, Top 10 Mistakes in Web Design). Also, the duplicate calendar links are bad
“because [if] users don't know for sure when a feature is duplicated, they'll have to spend additional time figuring out whether the duplicate is a new feature or an old feature.”
(Nielsen, Reduce Redundancy: Decrease Duplicated Design Decisions).
Another problem is that the links do not change color which may cause users to unknowingly revisit the same sites repeatedly (Nielsen, Top 10 Mistakes in Web Design).
The “you are here indicators” are the page name heading in bold at the top left of the page, the use of breadcrumbs to show “the path from the homepage to where you are” (Krug, p76) and the use of reverse highlighted tabs to cue the user.
You can search by clicking on a link in the subsection menu located on the left side of the page or clicking on the link in the middle of the page. These are violations of both redundancy and requiring the user to click on a link for searching rather than providing a search box (Nielsen, Top 10 Mistakes in Web Design). However, since this site incorporates a Google search box, the search capabilities are robust with the proper listing of the user’s search terms (Johnson, p342).
You can get home by clicking on the “Home” tab in the section menu, or by clicking on the first breadcrumb labeled “Home”, the “Home” link at the bottom of the page or the SIRLS icon. Having this many links is again redundant, a better option would be to make one “Home” option “more prominent rather than duplicate it” (Nielsen, Reduce Redundancy: Decrease Duplicated Design Decisions).
References:
Johnson, Jeff. GUI Bloopers: Don’ts and Do’s for Software Developers and Web Designers. CA: Academic Press, 2000.
Krug, Steve. Don’t’ Make Me Think: A Common Sense Approach to Web Usability, 2nd Ed. IN: New Riders, 2006.
Nielsen, Jakob. Designing Web Usability. IN: New Riders, 2000.
Nielsen, Jakob. (2002). Reduce Redundancy: Decrease Duplicated Design Decisions. Jakob Nielson’s Alert Box. Accessed online on 10/15/06 at http://www.useit.com/alertbox/20020609.html.
Neilsen, Jakob. (Updated 2006). Top 10 Mistakes in Web Design. Jakob Nielson’s Alert Box. Accessed online on 10/15/06 at http://www.useit.com/alertbox/9605.html.
posted by Heather at 9:02 AM
0 Comments:
Post a Comment
<< Home