LIS 534 - Usability by Example Assignment 2:
Labeling Systems and Writing for the Web

Introduction

Main Points

One of the main points of the readings this week is how to communicate information effectively without taking up a large amount of space on the website. Krug discusses removing words in order to be more concise; for example, he mentions removing happy talk (50) as well as needlessly detailed instructions. Morville and Rosenfeld provide a comprehensive analysis of the types of labels that appear in websites and how to decide what types of labels to use. When designing labels, it is important to keep in mind the interaction between content, users, and context when creating labels. (98) They also recommend consistency between labels and having a narrow scope (99).

Types of Labels

Sources of Labelling Systems

Creating New Labelling Systems

Finally, it is important to allow for changes to your labels as you learn from and interact with your users.


Examples

Lush SLIS
Vague/unclear, company-specific labels Clear, user-centric labels
Needless labels Useful labels
Some redundancy Some redundancy


Bad Example: Lush.ca

Lush Homepage

Many of the issues with the Lush website are similar to those seen in the U-Haul example in the Morville and Rosenfeld text. For example, many of the navigation labels chosen on the Lush homepage are jargony, not user-centric ("Gorilla Perfume", "Retro", and "Emotional Brilliance"). The labels are not representative and do not differentiate, such as how makeup products and toothpaste are listed under the "Face" label while all the other products in the same category are skincare products, and shaving cream (a product generally used by men) is also listed under the "Face" label while there is a separate sub-category for men under the "Body" label. Additionally, "Lush Blog", "Charity Pot", and "Our Story" are placed at the top of the main page next to the logo, while also appearing at the bottom in a less obvious position, raising the question of why they are given such a prominent spot at the top.

The labels also waste money as there are many navigational labels on the top of the page, but some of them do not have a drop-down menu ("Fun", "Spa", and "Valentine's"), making them seem less important than the other headings. The labels also do not make a good impression because they are rather confusing for a first-time visitor. The heading labels near the bottom do not always have related information underneath, such as the "Charity Pot", "Our Story", and "Ingredient Finder" categories under the "Connect with Lush" heading.

Despite many flaws, the Lush website does incorporate some useful labels in the menu bar such as "Shower" and "Hair". As well, many of the products are correctly labelled, but are placed under a confusing heading. To improve the other labelling violations, we suggest renaming confusing headings such as "Gorilla Perfume" to "Perfume" and creating a "Men's Products" heading. Additionally, moving some of the labels to different headings would improve the site&s functionality, such as renaming "Connect with Lush" to "About Us". Finally, we would remove the last three labels at the top of the page because they do not provide any additional information like the other labels.


Good Example: SLIS website

SLIS Homepage

The SLIS website has many clear and well-placed labels, such as the headings on the left-hand sidebar. The labels use terms that anyone visiting the site could understand, such as "Programs." The navigational labels at the top appear in the same spot on each page, resulting in consistency for the user. Additionally, the contextual labels used in the SLIS website are not confusing, and are supported by the text around them. For example, the "thesis-based" link on the Programs page under the "On Campus MLIS" heading is easily understood even by people who do not attend the school.

There are some confusing aspects of the SLIS website, despite its clear labelling. For example, the iconic label for the SLIS blog on the left-hand side of the main page is not very clear, even when you scroll over the image and read the linking address (www.slisfortherecord.wordpress.com). It is not clear what the image represents until you click on it. As well, the "Programs" and "Prospective Students" labels link to the exact same information despite two additional subheadings appearing under "Prospective Students" on the sidebar. Some suggestions for improvement to the SLIS website include providing additional information about the blog when a visitor scrolls over the icon or making a non-iconic link. We also suggest adding additional information about tuition and funding and a prospective students FAQ on the actual "Prospective Students" page.


Conclusion

An analysis of these websites demonstrates that Krug, Morville, and Rosenfeld offer valid points about the issues that can arise with incorrect labeling and offering too many words on a webpage. While using clear labels can help the visitor reach the information he is seeking as fast as possible, mislabelling items can lead to confusion, frustration, and, in the case of company-specific words, alienation of potential customers.


Written by Sarah Chomyc & Bethany Luther
Published on January 29, 2014

Sources:
Krug, S. (2005). Don't make me think!: A common sense approach to web usability (2nd ed.). Berkeley, CA: New Riders Publishing. Retrieved from http://proquest.safaribooksonline.com.login.ezproxy.library.ualberta.ca/book/web-development/usability/0321344758

Morville, P., & Rosenfeld, L. (2006). Information architecture for the world wide web (3rd ed.). Sebastopol, CA: O'Reilly Media, Inc. Retrieved from http://proquest.safaribooksonline.com.login.ezproxy.library.ualberta.ca/book/web-development/0596527349