By Ashley Killpack
In order to organize and appropriately approach the broad topic of Usability, as it pertains to this website, I have decided to look at the usability in sections, as they are divided in the book “Don’t make me think” by Steve Krug. Hopefully this approach will make the daunting task of assessing the usability of Ben Barry’s design portfolio a little bit more manageable and easier to follow.
The first segment of the Krug book seems to cover the content and layout a standard website should utilize. He speaks of making pages scannable, omitting needless words, and allowing users to make mindless decisions without necessarily having to think. Barry has a pretty good handle on making things scannable and omitting needless words, possibly to the point of recklessness. For instance his home page includes only one word: “howdy.” Obviously this presents a number of problems as well as benefits.
As for the benefits, this site is extremely concise. It establishes a certain design style as well as a sense of humor. Both of these things are incredibly important in a design portfolio. However, this also means that the navigation is not a list of words, but rather a list of icons. It doesn’t look like navigation and definitely causes the user to stop and ask, “where the crap do I go from here?” The navigation is the ONLY other thing on the page besides the large “howdy,” though, so any attempt to figure out what to do next will probably be rewarded.
As far as being scannable, Barry’s minimalist style is EXTREMELY so. He uses links and highlighted text masterfully. What few words he does provide are clear and to the point. All text is written for the web and, in fact, takes the greatest advantage of the possibilities of the web. In many cases, however, Barry leaves his users stranded…forcing them to struggle until they discover his devices. Given that his audience is mostly other designers, however, and all very visual people, perhaps his use of icons instead of words can be forgiven to some small extent.
The second segment of the text examines navigation and the home page. Both have already been breeched here, but there is still a little more to say. Although his navigation is initially puzzling, it remains consistent throughout the rest of the site, and it is in a place where navigation should be. It also follows the general theme of the site, and is, in this way, well done. The homepage does not announce the purpose of the site. Barry probably assumed anyone visiting would already know it was a deign portfolio, being perspective employers, friends, and designers looking at other designer’s works. However, The purpose of the site should probably be addressed on the homepage in any case. The simplicity of the homepage does drive one into the content of the website, which content is the purpose for its existence. Its simplicity makes you curious and its content is extremely addicting. The farther into the website you go the farther you want to go. I suppose Barry simply cuts the crap, in essence, and drives his users into his work.
Ben Barry’s design portfolio could have used some definite usability testing. I think that most of the problems I can see would have been immediately visible in a few hours of testing. I also think that Barry could have done a lot more to make his site more accessible to people with disabilities. He could have used more alt text. However, the text size can be increased, and he does have roll-over explanations for his icons, so he did have some consideration for the needs of his users.
Over all, Barry’s portfolio is a very good experience. However, there are some definite usability issues that could be pretty easy to fix, if he took the time to make some simple changes and do a little usability testing.
In order to simplify this section I have isolated only those issues on the checklist that didn’t prove satisfactory and can be improved. The rest of the checklist complied with the site, or didn’t apply to this particular sites methods. All text in grey is in response to the given issues addressed. In order to avoid repetition, many of the issues nearing the end of the checklist are addressed simultaneously.
5. Page footer area — copyright, last update, contact e-mail address:
Barry had no footer, no copyright information, and no information pertaining to his last update. The update information is not entirely necessary to fulfill this site’s mission, but copyright would probably be crucial. He has a contact page with his information, so that is not a worry. However, I think a footer with some simple navigation helps and copyright information would add a lot to this site.
1. Main navigation links are clearly and consistently labeled
It would have been nice to see some labels on the icons he used for navigation, or al least some hint that they where the navigation. They are labeled when you roll over them, however.
Browser Compatability was handeled well and proved to not be an issue.
3. If images, Flash, or DHTML is the main navigation, clear text links are in the footer section of the page (accessibility)
This would have been nice to see as well, if not on the main page perhaps throughout the other pages, since images were used in place of navigation.
4. Navigation is structured in an unordered list (accessibility)
Navigation is not in an unordered list, but rather a series of linked icons.
Browser Compatability was handeled well and proved to not be an issue.
5. Navigation aids, such as site map, skip navigation link, or breadcrumbs are used (accessibility)
A site map is not necessary on this site, I think, since it is so easy to navigate once initially figured out. A skip navigation link might be pretty useful though.
8. Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images (accessibility):
This is one of the main flaws of the page. It would be nice to see some alternate text, particularly in the navigation section, should the images be disabled on a site.
All multimedia was handled well.
13. If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided (accessibility)
3. All forms function as expected
The homepage has a massive word, "howdy" and I expected it to be a link to the rest of the content, but it wasn't.
1. If images, Flash, or DHTML is the main navigation, clear text links are in the footer section of the page
2. Navigation is structured in an unordered list
3. Navigation aids, such as site map, skip navigation link, or breadcrumbs are used
5. Image tags use the alt attribute to configure alternate text to display if the browser or user agent does not support images
6. If graphics and/or media is used to convey meaning, the alternate text equivalent of the content is provided
11. To assist screen readers configure the html element's lang and xml:lang attribute to indicate the spoken language of the page.
Obviously the Navigation and Accessibility sections did the worst in the overview of this site. By simply adding alternate text for images, labeling navigation icons, and adding links in a footer many of this sites problems would have been solved.