Category Archives: Usability Analysis

Usability Analysis: Official Website of the American Association of Poison Control Centers (AAPCC)

I conducted a usability analysis of the official website of the American Association of Poison Control Centers, a voluntary health organization founded in 1958 to represent the nation’s poison control centers, of which there are 55 at present. The website is a top ranking result in multiple search engines based on keyword searches for “poison control center” and the like.

Analysis of the site was undertaken with an audience of the general public in mind. The primary landing page is the focus of the analysis, with some venturing off onto other pages.

 


Is the purpose of the site self-evident?

Does the AAPCC give the user some indication of what to expect on this website?  “Taglines” are a common way for websites to offer a short description of their purpose and mission. Due to print and web conventions, users know to look for these near persistent branding elements, often at the top of the page.

This is somewhat accomplished here. Emergency. Information. Prevention. appears directly below the main title.

The frontpage of the AAPCC official website

While little is done visually to make this text distinctive, this single line of text does pop out more for being separated from the wall of text below, chunked in such a way as to be none too inviting. This same tagline appears in the footer, where more has been done to help it stand out.

The user can also guess at the purpose of the site by surveying the top-level menu items in the primary navigation bar.

The site’s main navigation bar

On the landing page, this navigation bar does not appear until the user has scrolled vertically the length of their screen, from top to bottom. The menu options are:

  • Alerts
  • Prevention
  • National Poison Data System
  • Our Work

Additionally, a brand logo appears in the left corner of the navigation bar with a number for the AAPCC hotline. “Alerts” and “Prevention” echo the site’s tagline, letting the user know that site serves as repository containing information on poison control topics, including on how to prevent poison-related  incidents. The hotline number at the top left gives immediate access to users who need to call someone in the event of an emergency. “Our work” is slightly less obvious from the wording, although users who guess this location contains “About Us” type information would be correct.

Suggestions:
  • Make Emergency. Information. Prevention. more prominent in the header. This is too good a tagline to be wasted like it is here.
  • Drop the use of “Our Work” from the main menu and use the more common “About” or “About Us”.

 


Is it easy for users to quickly locate what they came for?

Who are the visitors to AAPCC, what are they looking for, and can they find it right away? I honestly don’t know the answer to this but, being that there’s a good chance some users in time-sensitive, emergency situations might seek information on this site, some attention should be given to making sure they specifically are able to find what they need.

These users may want to use the website as a stepping off point to another information resource, perhaps a number to dial a human being or the location of a physical address. As such, it’s important this information be displayed prominently for them.

The logo in the left hand corner of the navigation panel has a number for the hotline as does the footer at the bottom of the page.

The site’s footer

Unfortunately, if the user wanted to select this number in order to copy or dial it, they’d discover it’s an image. This hotline number, as well as the URL for PoisonHelp.org, appear in numerous places on the page but little is done to make them stand out visually; they aren’t even hyperlinked. So, if a user came to this site seeking this critical information, they are at less of advantage due to how these objects are presented on the site.

To its credit, their customized 404 page is great – it prominently displays the hotline phone number for people to call.

The site’s 404 page

Suggestions:
  • The large header is fine but I think hiding the main menu from users until they scroll down the page may be disorienting for some (and also hides the hotline number prominent in the logo)
  • The wall of text on the header image should be edited for brevity and reformatted to be more easily scanned
  • URLs and phone numbers should be hyperlinked
  • Buried in the wall of text is Text “POISON” TO 797979 to save the poison control contact information in your smartphone. This is really neat and not displaying this in a way that catches peoples’ eyes seems like a lost opportunity to engage visitors.

 


Do navigational elements support search and “follow your nose” browsing?

Do the navigational elements on AAPCC’s site function as a useful tool for those exploring the site? For users who may want to call someone, the website does a good job of displaying the hotline number in multiple places, with room for improvements, as previously noted.

For those actually wanting to locate information within the site, they are provided up-front with a search bar (in the footer; uses conventional styling) and a few main menu options already discussed.

I didn’t spend much time assessing the search, since it was pretty disappointing right off the bat. I tried to locate a list of the poison control centers and couldn’t pull up that page in my results. What does come up in searches are a lot press releases and pages which I hadn’t noticed were accessible through any other obvious links on the website. This seems odd, and I’m not sure whether leaving these pages in the search index was intentional or not.

One of the primary reasons I can think of for why someone might visit this site would be to locate the closest poison control center. One’s hardpressed to find this information here though, located all the way at the bottom of the homepage. User is presented with a dropdown to select what state they would like to search in.

Search option located at bottom of page

Once the search is ran, the user is directed to a new page with a table listing control centers for the state. The table is really buggy – a search for centers in Arizona produced a list including one in Illinois! Also, when the triangle “sort” features are selected, the user is directed to a “member log-in” page. This kind of behavior can be frustrating for users to encounter.

Buggy listing of centers

Suggestions:
  • Fix the buggy table
  • Create a main menu option for users to locate their closest poison control center
  • Develop a widget where people can type in their zipcode and return nearest center
  • Display locations on an interactive map

 


Does thought into usability seem to drop off the deeper into the site you go?

Were pages further down given the same attention and thought as the AAPCC’s homepage? I didn’t have enough time to analyze the entire site for this characteristic. It really feels like the most attention was paid to the front-page of the site. Going off the “Prevention” and “Alerts” pages, very much carries over visually, which provides continuity between pages for the users. The headers and footers are the same (although fixed rather than “sticky” past the homepage) and font and colors are the same. There’s persistent navigation elements that can use to get back to where they started from or go elsewhere. So, I think some attention was paid here.

The articles on the “Prevention” and “Alerts” page would have benefited from being displayed in a way optimized for the nature of their content type. Instead, they are presented in the same way, alphabetically organized in a grid (and with some styling issues).

The Alerts page

The Prevention page

This tactic for displaying information seems lacking. The menu board design of these pages doesn’t entice me to explore further and definitely doesn’t make me feel like I’ve been “alerted” or more informed about prevention.

Suggestions:
  • Organize alert and prevention articles to allow users to quickly determine which ones are relevant to them (there are sidebars on other pages – they could maybe be employed here?)
  • Add publication dates to the articles to help users determine their currency
  • Conduct a full content inventory of available articles broken up between “Alerts” and “Prevention” and reassign to more appropriate categories — alerts / prevention don’t actually fit the content they bucket (the Partners page appears under Prevention; Current Annual Report Highlights appears under Alerts)
  • Add tags to articles to ease discoverability
  • Fix little styling issues

Usability Analysis: Halfbakery.com

Halfbakery.com is a communal database on the web for sharing and commenting on so-called half-baked ideas. The site’s appearance hasn’t changed in the almost two decades it’s been up, which seems audacious considering how quickly web design trends change. Bakers, which is what contributors to the site are called, would likely be against any changes to the familiar aesthetic of the site. Somehow, this strangely compels my desire to analyze the site even more, maybe because it feels like fair game!

I evaluated the site for how well the site’s page layout, organization, and main menu contribute to it’s user experience for new and returning users.

Criterion

Page layout and organization

  1. How does this site perform against the school cafeteria segmentation rule?
  2. Are colors, font-sizes, headings, etc. used to effectively group different sections of the page?
  3. How well does the front page function as an entry to the site?

Menu

  1. Is it easy for the user to carry out various expected tasks using the available menus?
  2. How do the menus approach the job of representing all the different locations in the site?

Findings

Page layout and organization

Based on the school cafeteria tray segmentation rule, which I just made up, this site doesn’t perform so well. Determining how content is broken up on the page relies on the user’s ability to make out the eddies of flowing text, all sized the same.
This site does have plenty of whitespace which for being all text save one croissant in the top left corner of all pages (and limited illustration elsewhere), is to its favor. While whitespace is used to visually break up logical sections, the kind of “nesting” which Krug notes as saving information consumers from strain since the early print days is not as effectively used on this site as it could be. As you can see in the screencapture below, there are “gutters” to mark sections but it requires some effort to make the sections out. They don’t pop out at you.
screenshot of the bagel music overview page on halfbakery.com

Screenshot taken April 8th, 2018

The ideas on this site are organized by category. The front page assumes a utilitarian pose in presenting the user with the top-level categories along with the two most recent idea entries posted to that category. Ideas posted that week are in bold but a key isn’t provided to explain what the symbols next to the ideas mean. But, this site has the luxury of serving mostly return visitors, so this seems okay.
Louise Nevelson or Michal Johansson can get away with using monotonous colors to treat space, but for us mere mortals it’s probably better to use contrasting colors in order to create divisions. The divisions can be flexible; they don’t have to restrict us. They just need to keep our food separated.

Menu

Menu options are grouped into three comma separated lists: idea, meta, and account. This arrangement is well thought out and considering how few menu links there are, I think presenting them this way is acceptable. Considering the retro status of this site and it’s design, underlining the links to mark them as hyperlinks also gets clearance. Again, this site caters mostly to return users. I think it has earned the right to put new visitors through a little bit of pain. That said, the proof of this site having been around as long as it has is in the incredibly rich meta pages, which lay answer to many questions a new visitor might have about the site.