User Interface Design & Brand
Nov 17
In our daily lives we experience many different kinds of user interfaces. Some experiences are effortless and go unnoticed, while others are exciting or even frustrating. When creating a user interface the designer must be aware of the experience that is being created and the reflection that it will have on the brand the interaction is related to. Common sense would dictate that the goal of a user experience designer would be to make the user interface as transparent as possible. There is a problem with transparency however, it lacks personality and therefore brand.
Making First Impressions
Let’s compare the Mini Cooper and Aston Martin door handles.
Both cars have unique door handles that provide experiences unlike those of other cars. The Mini Cooper handle has familiar affordances, or action possibilities, that imply the manner in which the handle should be used. Though the handle resembles those of other cars, it’s operation is unique. Mini does not take into account previously learned behaviors or the lack of focus most people have when using door handles. The handle must be squeezed close to the side with the keyhole before it can be pulled open. If you are to be a passenger in a Mini you may pull the handle incorrectly, then tell the driver it is locked before being told how to use the handle. This may leave you feeling annoyed or embarrassed depending on your circumstances.
Let’s contrast that with the door handle of an Aston Martin Vantage. The door handle of the Aston Martin lays flush with the surface of the car and at first glance has no obvious affordances. A subtle cutout that resembles an equal sign provides a visual cue as to an area where an action could take place. The handle is intimidating and not immediately user friendly. It seems that a user would become even more annoyed with this design than that of the Mini’s. The difference is that the Aston Martin door handle is like a secret handshake that when known allows you access to a $120,000+ sports car. The reward for your inconvenience more than makes up for any frustration encountered.
While the clever elegance of the Aston Martin handle design combined with premium materials creates an experience that turns a usability challenge into a positive brand experience, the Mini handle is more often viewed as unnecessarily difficult.
Making a good first impression also holds true for virtual doorways. Animated web intros that force a visitor to watch a bunch of bandwidth clogging stuff moving around their screen before allowing them access to the information they came to the site for sends a clear message to the visitor that their needs are not important. Another common trait of the narcissistic brand is the misuse of transparent walking out video. Having a little virtual person seemingly walk out onto your screen can be very attractive to business owners. It becomes a problem when the sole intent of the walking out video is to interrupt the visitor in order to push product or brand messaging onto the unsuspecting person. Think of it like someone walking into a business. They stroll in, look around a bit, and then some guy jumps out from behind a plant and starts loudly telling you about their products and services while completely ignoring your attempts to make him stop. Successful brands understand their customers and treat them respectfully. Is your web site a tool for connecting your customers to what they want, or is it focused on getting what you want?
It’s Not About You!
Whether you have one thing to sell or thousands, the manner in which you present what you have to offer your audience has a big impact on what people think of your brand. Clean, clear navigation is a great starting point.
GoDaddy.com is a great example of the self-centered brand. They flood all the available screen space with exclaimed offers and unnecessary information. Not only does GoDaddy want you to buy everything they sell all at once, they preselect a product that they would like you to buy. If you are confused about the mess of information on the page, don’t expect them to go out of their way to help. They don’t offer live chat and they won’t even do you the courtesy of giving you a toll free number to call. If you are wondering where in the site the screenshot above was taken, you would be wrong if you guessed that you were in the “My Account” section. The My Account section appears to be active yet it is actually a screenshot of the “Hosting” page. The dark horizontal banner below the main green nav bar actually serves as the page heading, yet it resembles a banner ad.
In contrast, Host Monster focuses on what the customer wants. They list their core services with the sale price and place a big button in the middle of the page with a clear call to action. Live chat and a toll free number are easy to find as well as the ability to demo the product before buying. Relaxing colors are used to group content making the information easier to comprehend. Host Monster’s site performs well by following many of the conventional rules of good web design. Brands like Host Monster need to demonstrate that their web services will be easy to use and they will have help when needed. So what if you have a brand that wants to break the rules and shake things up?
It is possible to break free from conventions and stand out from your competition. The risks of customer backlash are higher, but when done successfully that unique attribute can become a trademark that defines your company. Google is a good example of a company who has managed to do this successfully. Google took a risk by deciding to alter their logo to commemorate people and events. Very few companies have the brand recognition necessary to allow for such logo manipulation without causing confusion.
Naming Your Navigation
Whenever possible name your navigation clearly and concisely. It is a good rule of thumb to name links according to the action that will occur or the place the user will be taken to. Try and avoid naming navigation with internal company jargon or the overly generic “Click Here!”. Companies like MOO, do a very good job of clearly labeling navigation.
MOO interjects it’s brand personality with subtle playful surprises like a small animation that occurs when you hover over their logo in the footer. This friendly and somewhat silly brand carries the persona into every aspect of interacting with the company.
Even MOO’s confirmation emails break from boring conventions.
Google’s “I’m Feeling Lucky” button was one of the first big corporations that I can think of that took a risk in adding a little more fun to their product. It was clever and relevant at the time of it’s inception but as of late it has been rendered almost useless by the addition of Google Instant. The button that was once a reflection of Google’s nimble playful side is now a symbol of it’s clumsy corporate side.
It is possible to gain stronger relationships with a group of customers by intentionally bucking the system and stirring things up. Starbucks is a brand that decided to defy the popular convention through the naming their drink sizes. Their sizes from smallest to largest are: Short, Tall, Grande, Venti, and Trenta. This renaming makes it difficult for someone new to the brand to walk in and order what they had been accustomed to at other coffee shops. Ordering a “Small” places you squarely in the position of brand outsider. Depending on your personality, this break from convention can annoy you or make you feel as though you have been initiated into an elite group. The price of a Starbucks coffee is on the high end of chain stores, but not quite high enough to be considered excessive. This price point acts as a divider giving some people a feeling of brand intimacy while giving others just another reason to hate Starbucks.
The Velvet Rope
Locking out features or access can create excitement. Because I love cars I’ll revisit them again here. The Bugatti Veyron has the distinction of being the world’s fastest production road car. The price tag alone is enough to keep most people away at $1.3 million, but if that wasn’t enough exclusivity for you, Bugatti locks up the top speed of the car. In order to reach the Veyron’s top speed of 250+ mph a special key is required to physically unlock the speed limiter which is set to 200 mph. It makes race tracks and air strips irresistible to rich adrenaline junkies.
Many retailers have been offering special pricing to members only. Box stores like Sam’s Club use ID cards and security checkpoints to expand upon this feeling of having access to prices and products that everyone would love to have. They want you to believe that nonmembers are trying to sneak in to take advantage of the great deals. This model still is in practice today, but has been modified somewhat for eCommerce.
Fab.com uses a login screen to stop nonmembers from entering their store.
Exclusivity does not need to be an all or nothing tactic. It can be as simple as withholding the disclosure of a sale price until the item is added to the cart. Promo codes, emails, text messages, and even Facebook promotions that require the user to become a Fan before gaining access to contest entry forms, all work to entice users to go where others are not allowed. Be careful though, don’t password protect something lame or hide prices that aren’t very enticing or you will find this tactic will backfire. You don’t want to be labeled as a company that is simply interested in gathering people’s personal information without giving something of value in return.
Handling Failure
Failure will happen. Any system with multiple dependencies and a broad spectrum of users interacting with it is bound to experience failure at some point. It is how you handle those failures that are defining moments for a brand. During Twitter’s growth users became very familiar with the Twitter fail whale. The fail whale was a nice way to deflect some user frustration by making light of the situation.
Error pages on web sites, can be an easy way to interject your brand into all facets of your user’s experience. Simply giving some attention to a common 404 error page, can minimize frustration and provide extended usefulness to pages which are ordinarily dead ends.
If a web site or web app is created for a user with strict browser or plugin requirements, the experience for those users who fall outside those requirements can be detrimental to a brand. It is possible to identify problems and serve up alternative content to those who are not able to access all aspects of a site. “Fault-tolerance or graceful degradation is the property that enables a system (often computer-based) to continue operating properly in the event of the failure of (or one or more faults within) some of its components.” – Wikipedia. A common example is the substitution of static content for Flash animations. Not using Flash in the first place is a good strategy too – but I digress.
Are the user interfaces on your web site and mobile apps giving your customers or visitors the right impression of your business? Are you clever, or just attempting to be clever? Have you fallen victim to a fad that provides more entertainment for you than providing usefulness to your customer? Are you ready to get real about where your brand is failing and put strategies in place for overcoming them? Envano can help.
By: Bill Zoelle
Tags: brand, Design, Handling Failure, Navigation, User Interface
Categories: Corporate Site & eCom, Marketing Strategy, Mobile Marketing, Search Engine Marketing