Volume 1, Number 2
May 1, 2006


Usability & Branding: How to make or break usability conventions to create brand identity
by Casey Rudden

How conforming to or rebelling against "usable" design conventions construct on-line identity

Usability & Branding Image

It has long been acknowledged in the study of usability, that the usability of a product affects the associated brand identity. While study of usability is universal to any product design, it has sprung up with the advent of the world wide web. It is becoming more important of individuals and institutions to establish a strong on-line identity for themselves or their products. As it has been proven in usability study that the usability of a website or interface can directly affect the brand identity associated with it, usability and branding are becoming more and more intertwined. In fact, "Many web sites exist primarily to create or strengthen the brand for a product or service" (Spool). As usability and branding are becoming more and more intertwined, the use of, or rebellion against, traditionally "usable" design conventions enforce a sense of identity in itself.

A tradition of general conventions has sprung out of usability study to inform web design. The most important revolve around building a strong and consistent navigation and creating accessible content. While at its basest definition usability requires that an interface design be informed by its users and their goals, traditional design and usability conventions have created a context and expectation of their own that affects branding and online identity. Thus, the way that many online areas conform to or rebel against these usability conventions can help inform a sense of branding and identity for users.

Traditional Usable Design: The Inverted-L and E-commerce Web Sites

Increased attention to usability can be seen in the navigation schemes of e-commerce and Fortune 500 websites. One of the most prevalent navigation schemes see on the web, especially on sites such as these, is the "inverted-L" navigation. This navigation scheme is made up of a horizontal strip of navigation or a banner along the top of the screen, and another vertical strip of navigation on the left-hand side of the screen. The inverted-L navigation scheme, because of its prevalence and ease of use, instills a sense of security in users. Also, while not always directly associated with usability issues, other conventions, like color can have an affect on the user's perception of a site and brand: "Designers use colors to ignite certain emotions in their target audiences or to facilitate brand recognition" (Boyle 11). Sites attempting to convey a professional identity and to instill a sense of confident in their users will often use sedate, cool colors, the color that instills the highest sense of security in users being blue. The examples below, Amazon.com (left) and Agcocorp.com (right), both utilize an inverted-L navigation scheme with links along the top and left-hand sides of the screen, and both use blue as their most prevalent color. Designs like these can be seen on sites across the world wide web, especially in the form of e-commerce or Fortune 500 sites, or any site that wants to instill a sense of secure professionalism in its users.

screen capture of amazon.com home page
Amazon.com Home Page
screen capture of agcocorp.com home page
Agcocorp.com Home Page

Conventions such as these become associated with a sense of professionalism and security. Not only does the general usability of a site affect user's sense of identity and branding, but use of traditionally "usable" features like the inverted-L navigation bolsters users' perceptions by instilling a sense of professionalism and security.

Rebelling Against the Traditional: Creating a Sense of Creativity and Originality

If traditional conventions, like the inverted-L navigation scheme, meant to increase usability also instill a sense of security to identity, how does breaking traditional usability conventions affect brand identity? It is said of the inverted-L that, "This design method is good for some Web sites but not all of them. When you want to convey a complete experience the inverted 'L-shaped' navigation style isn't always appropriate to communicate a message or other information." (The Edgar Group). If usability is understanding and meeting the goals of your intended user, then what of users that are not seeking security and professionalism, or sites with content which the inverted-L navigation is not equipped to optimize? Often sites for artists or designers can create a much different sense of identity by rebelling against traditional usability conventions like the ones discussed above. Accessibility and usability issues are often intertwined, as Trenton Moss writes, "An accessible Website is not automatically more usable, but there are many areas of overlap." Thus, many sites that want to present a creative or adventurous forefront use traditionally inaccessible technologies like Flash video or creative navigation schemes.

screen capture of weezer.com home page
Weezer.com Home Page
screen capture of katakismet.com home page
Katakismet.com Home Page

Consider the examples above: Weezer.com, the site for a popular band, uses bright colors with the navigation located on the top, right of the screen-a significant difference in navigation style from the examples shown before. On the right, graphic design site Katakismt.com, bearing the slogan "graphic designers with a sense of humor," include the following, comical warning before entering their flash site: "Kalikismet Design is not responsible for any outbreak of insanity of institutionalization resulting from attempts at reviewing this site with using a 56k modem."

screen capture of katakismet.com splash page
Katakismet.com Splash Page

This humorous but intriguing address of their own site's possible inaccessibility points to the identity building aspect of rebelling against traditional usability conventions. Creative or bold sites, in their simple rebellion against web design conventions sprung from usability study, instill a sense of creativity and fun in their brand identity. "Branding is more than just ensuring that customers recognize a logo or product name. Branding means creating an emotional association (such as the feeling of success, happiness, or relief) that customers form with the product, service, or company" (Spool).


As usability has a direct affect on branding, it is interesting to consider how conformance to, or rebellion against, usability conventions can affect brand identity. "The rise of branding has also tended to be in inverse proportion to real innovation in product development. However, the web is one of the remaining areas in which innovation is still considered to be a more important driver of customer adoption than brand and marketing, and branding should not lead product development. Rather, it should be part of users' quality of experience of the product" (Macdonald 62). With an understanding of how design choices affect usability, and also branding, designers and users can make informed choices regarding the creative design of sites or the creative assessment of them on the web.

About the Author

Casey Rudden is in her first year in the Digital Rhetoric and Professional Writing Master's program. She is a graduate assistant for Sarah Swierenga at MSU's Usability & Accessibility Center and is interested in usability, interaction design, and technical writing.

Email: ruddenca AT msu DOT edu

Web: http://www.msu.edu/~ruddenca


Boyle, Cailin.
Color Harmony for the Web: A Guide for Creating Great Color Schemes On-line. Gloucester, Mass.: Rockport, 2003.
<view source>

The Edgar Group. "Emotional Design: Current Design."
EDGAR: Web Design Guide2001. 31 January 2006.
<view source>
Macdonald, Nico
What is Web Design? East Sussex, England: Rotovision, 2003.
<view source>
Moss Trenton "Secret Benefits of Accessibility Part 1: Increased Usability"
SitePoint. 18 October 2004. 31 January 2006.
<view source>
Spool, Jared "Branding and Usability"
User Interface Engineering. 1 January 1996. 31 January 2006.
<view source>