Web GUI Bloopers
Jeff Johnson wrote an excellent book called GUI Bloopers that has been very enlightening. In Chapter 6, he addresses a few particular bloopers:
- Website Structure Reflects Organizational Structure or History
- Back Doesn’t Go Where Users Expect
- Complicating Searching
In this world of partnerships and acquisitions, many companies seem to find it necessary to reflect their internal structure in their websites, which leaves sites often structured around several brands at once. The main blooper happens when they present the site to reflect their internal business structure, which is of little concern to the user. The user may not be familiar with the internal departments or hierarchy of the company as its employees might be. Corporate marketing sites should assume the user has never heard of the business or the company.
In addition to careful architecture of corporate sites, designers also need to be aware of particular issues with the case of acquisitions and mergers. Merging of brands should be seamless. I’ve seen many sites with patchwork branding and have stopped to make sure I did not leave the original site. This not only causes confusion, but often the two organizations will have conflicting information.
How does a designer address this? Every one of us has experienced the situation where a client does not want to spend money on requirements gathering, interviewing potential users, prototyping and usability tests, and instead asks us to just code a prototype for them to review (which they review and decide it’s not at all what they wanted and that you are the most evil programmer since Satan himself). With web applications in particular, every single step in the design process for stand alone applications should also be followed here.
Other factors to consider are whether user can tell the difference between which pages were developed internally and which were outsourced, whether all internal pages follow the same design conventions and style; if pages or components inherited from a legacy site have been revamped to match overall design look and feel, and making sure that when links leave a site, it’s obvious and the user can get back easily (I put all external links into smaller, strategically positioned new browser windows for this purpose).
One blooper is inconsistent traveling backwards. Designers’ use of frames, templates and complex navigation can serve to confuse a user when she clicks the “BACK” button on her browser. One of the larger offenders is a long FAQ type page with lots of anchors in the document. If the user tries to click the back button, she will find herself on the same page, and often become confused and assume the button did not work. Putting “back to top” links are helpful in this case, but a better approach is to split content up into smaller sections on different pages. There are other ways to help make use of the back button consistent for the user. The basic rule is developers should determine where their users will expect the back button to take them, and design accordingly. Provide plenty of descriptive links instructing the user to go “back to xxx page” and ensure your page navigation is consistent and usable across each page of the site.
The final blooper for today’s blog is “Complicating Searching”. There are two main offenders in this category: not including search criteria in search results and forcing users to distinguish “keywords” from “search terms”. Displaying the search terms on the results page is helpful as a visual reminder for the user to compare results against his search, and also to help him evaluate and refine the search. Many search engines do not do this. The other problem occurs when search boxes give the user options for “keywords”, “search terms”, “boolean search”. Most users have no idea what the differences are between these and will most of the time select whatever is the default. Many search sites do not offer any assistance in explaining this. Do YOU know the difference between keywords and search terms? I myself didn’t! J
Jeff Johnson’s book covers tons of GUI bloopers. Chapter 6 alone has many more than those I discussed today. For more information about Jeff and his ilk, go to www.uiwizards.com.