Author: Mark Riggan

Those who think video games are not educational, this post is for you. Not only can video games be an enjoyable experience, they can teach us many things. Websites and video games often use similar concepts about usability in order to achieve an amazing end-product. I’ve come up with 6 essential concepts that video games can teach web designers about usability.

1. Users Have No Patience

Regardless of what the product is, users will get frustrated easily if they have to wait a long time for a response to an action. Nobody likes a loading screen in a video game. While loading screens can be minimized in multiple ways, it is hard to eliminate them altogether since they use disc-based media. Developers try to keep the user entertained by playing background music, customizing the loading icon/progress bar, or displaying information such as history or facts during the load time. EA Sports FIFA 09’s loading screen has the user play against the goalie in a practice environment while the game loads.

For Web usability, this means that new pages must display within 1 second for users to feel like they’re navigating freely; any slower and they feel held back by the computer and don’t click as readily.

Jakob Nielsen – Alertbox, October 5, 2009

On the web, loading screens are most associated with Flash. Flash applications almost always have loading screens. If something takes more than 1 second to react, most users will get frustrated and leave. Even the simplest of things such as a hover element should not have a delay. Bandwidth is becoming less of an issue these days and websites should be able to make the user feel as if they are in total control.

2. It’s All About the Experience

Why do people play video games? Simple: They want to have fun and enjoy the action, however that is defined. Modern games increasingly try to engage the user by making the games contain a strong storyline and mirror elements you would find in the cinema, such as recent popular games like Grand Theft Auto 4 and Uncharted 2. Since these games are attempting to be more realistic, it is no surprise that the video game industry is overtaking the movie industry. Instead of watching great movies, you get to feel like you are in one, with full control of the characters. The creative interaction is the key rather than just eye candy. The Nintendo Wii became popular among traditional and non-traditional gamers due to its unique interaction, even though its graphics were inferior to other gaming consoles.

On the web, the experience is what keeps users coming back. E-commerce websites are particularly focused on the experience because they want potential customers to feel like they are shopping safely and securely. Users browse the web for information. It is how the website presents this information and, more importantly, how it gets the user to that information that makes the experience worthwhile. Amazon and eBay have been pioneers in the e-commerce world and their strong returning customer base proves that they know what they are doing.

3. Progressive Enhancement is Good

This generation of video games are now available with HD audio and video. If you own a system capable of high definition like Xbox 360 and Playstation 3, you can take advantage of high quality graphics and sound. Not only can games look more crisp and realistic with vibrant colors, they can also produce uncompressed multiple channel audio that makes you feel like you are in the game – literally! For those who don’t have an HDTV or a modern surround sound system these systems will simply downgrade those features and play the game as normal. The games will always function the same and sound the same – it’ll just be in a lower resolution and with only 2 channels of audio. No harm done to them. Progressive enhancement in action.

Websites are starting to show progressive enhancement as well with the use of CSS. Web designers try to reward users who browse with modern browsers (i.e. Firefox and Safari) with a beneficial experience that users of IE cannot have, without detracting from the functionality. Designers are using RGBa values, which allow them to include an added alpha channel to the element. This is a powerful tool to have in your designer toolbox because it allows you flexibility and control in overlaying graphic elements and to incorporate opacity variances into the design.

CSS Document
.element {
     color: #fff;
     color: rgba(255,255,255,.5) /* for modern browsers */
}

The example above declares a standard CSS rule for the text color. Older browsers who do not support CSS 3 will only recognize the first line and ignore the rest. The more modern browsers, however, will read the second rule and therefore ignore the first rule. The same concept applies to the CSS 3 border radius property and the CSS 3 opacity property (alpha channel on the entire box element). Andy Clarke uses transitioning properties on his website that are only functional in Safari. These properties, which make the DVD and disc animate on hover, can provide some unique design interactions. Taking these concepts and applying them into websites gives users a unique experience and at the same time doesn’t take away the essence of the design entirely for those who use, well… IE.

4. Minimize Learning Curve by Including Tutorials

Instruction booklets are becoming less used these days for video games. Developers are now putting tutorials into the game and having the user learn as they progress. Most typical games will have the first level or so of the game be the learning grounds for the rest of the game. This is becoming a de facto standard in the industry. During this time, users will be prompted with basic controls and developers will design the level to make sure the the controls are used properly before permitting users to continue the game. These learning tools help minimize frustration and also get the user prepared. What better way to learn than to actually try. Reading instructions is not as effective.

Websites need to be careful about introducing new objects or applications to the user. If you suspect a user will have to think about how to use a particular part of your website, you will have a problem. Users will need assistance with it – whether it is simple instructions or a video tutorial.

5. Keep the Interface as Simple as Possible

Interfaces are extremely important in grabbing the user’s attention. Video games are coming up with some creative ways of designing their interface. While being creative, they still function the same and are easy to navigate. Nobody wants to be confused about where they are or how to get out of the location they are in. Navigation should be carefully thought out. Dead Space uses an intuitive in-game menu where your menu pops up in front of you while you are playing the game. There is no interruption from action as you still have control of your character. Madden NFL 10 uses a simple menu system that zooms to different parts of the stadium in the background based on the navigation section you have chosen.

Websites must remain simple to use, or users will get frustrated and leave. The UI needs to make sense and be engaging at all times. Breadcrumbs are important for sites that are large, preventing users from feeling lost.

The ability to simplify means to eliminate the unnecessary so that the necessary may speak.

Hans Hofmann

6. Don’t Rely on Graphics Alone

Those who remember Grand Theft Auto 3 can agree that it was not the most beautiful looking game around at the time of it’s launch. That said, they will also agree that it was the best game to play at the time and it was a huge hit. Graphics can’t do it alone. The experience also needs to be great. GTA3 was impressive because it had an engaging storyline, incredible controls, and was a blast to play. A game with pure eye candy and no functionality will not last long in this industry.

On the web, user experience needs to be priority over design. Once a site functions properly, then you can apply the interface to it. Just like a chair, it needs to function before it looks great, otherwise it is useless. Plan out your websites carefully and make sure that you are considering all aspects exhaustively. Just like video games, a website can be popular if it functions and is enjoyable but will be useless if it’s just eye candy.

So, what are your thoughts on video games and web usability? Do you have any other comparisons? We’d like to hear from you!

Ever looked at the brands that are visible in a magazine? How about down the grocery aisle? Fact is, brands are extremely important to the success of a business. Brand identity shapes perceptions and perceptions determine sales. It’s a simple formula, but hard to master. Off the top of my head, I can name a few brands that immediately come to mind: McDonald’s, Apple, Nike, Coke, Honda, etc. All of these companies have extremely popular brands; consumers can instantly recognize their identity. The reason why we recognize them so well is because each one followed some guidelines in designing their brand’s identity.

“The most powerful and enduring brands are built from the heart – if people believe they share values with a company, they will stay loyal to a brand.”

Howard Schultz (Chairman and CEO, Starbucks Coffee Company)

The following are some guidelines that I believe are crucial to any identity that a company wants to market effectively:

Minimalism

KISS (keep it simple stupid) the logo

Don’t make the design unnecessarily complex. Logos can be seen from different distances; therefore it needs to be universally noticeable. The design should be able to maintain its detail.

Color

It should all start with monotone

Because there are people out there that may have a disability in their color vision, it is important that logos be designed to give the same effect and meaning with or without color. Therefore, it is important when designing a logo to start with simple shades of black. Colors can then be applied afterwards to enhance the visual.

Maintain global recognition

Color is important to the brand because it unifies everything together. If the client already has a color scheme specified, the identity must follow the scheme accordingly (even if the scheme is not appropriate). On special occasions it is allowed to suggest a more appropriate color scheme.

Shape

Rely on shape – not effect – to express meaning

Keeping accessibility in mind, it is important to design the identity in which the meaning is expressed by its shape, not by its effect. So make sure that the design itself doesn’t rely on fancy patterns that could become useless in some mediums. We tend to recognize shapes first, especially from afar.

Typography

Don’t underestimate the power of type

In some cases, the brand doesn’t require an icon, therefore relying on type entirely. The type should be visually balanced, especially if a tagline is to be embedded with the identity.

Avoid extraneous details

Speaking of taglines, it is best to let the client know that taglines are meant to be used outside the logo itself. Try to make your clients aware that taglines can change much more rapidly than the brand themselves. Other details to avoid are the technical names in a company, such as LLC, Inc, etc. These are meant to be included in documentation where it is relevant and warranted. This might be a hard rule to follow – because of the client’s demands.

No more than 2 fonts are necessary

Continuing with the visual balance, it is a good idea to minimize the number of fonts used. The font family is the first priority and then the font style. If using two fonts, make sure the font families complement each other.

Flexibility

Always use vector!

It is necessary that all brand identities be designed using vector graphics (composed of paths) as opposed to raster graphics (composed of pixels). Adobe Illustrator is the de facto standard program to use. This is essential because it enables the identity to be scalable without the quality deteriorating.

Make it cross-media compatible

There are many different types of media, each with their own mediums. It is important that the brand identity be able to be reproduced across all of these. The three primary types are web, print, and broadcast. In particular for print media, the identity needs to be able to be reproduced through offset, flexography, screen, gravure, and digital printing.

Trend

Think trend-proof

While it can be greatly influenced, current trends should not be the primary focus of the brand identity’s design. The design should be able to withstand current and future trends.

Uniqueness

Don’t replicate, innovate

Try to be creative and don’t rely on what others are doing in their designs. It is okay to observe for inspiration, but don’t steal from others. Focus on the purpose of the identity and determine the best course of action.

Don’t use stock art

Don’t rely on art that is available to others. Not only does this void the logo’s uniqueness, but it implies poor judgment on the designer. However, taking shortcuts by morphing stock art into something unique is okay in some cases. Again, focus on the purpose and make sure that you are taking the best approach.

Scope

Design for the client, not for the designer

The client is the one that is paying the bill, so it is best that you try to make them happy first. Just because a wild font may look awesome to you, it will not necessarily look awesome to the client. Always refer to the primary purpose of the logo before daydreaming on the design.

Internet users have little patience when browsing websites.

More often than not, users are on a mission and are determined to find specific information. You [as a company] get one chance to impress your targeted audience with your design. Based off of previous studies, users can judge your website in as little as 50 milliseconds!

Most designers would think that they should focus solely on the home page design, thinking that the users would go there first. On the contrary, users could possibly land on any of the pages in your website through search engines or outside links from blog posts, emails, websites or more.

A research team lead by Dr. Gitte Lindgaard found that people can make rough decisions about a Web page’s visual appeal after being exposed to it for as little as 50 ms. In her study, she had participants judge websites that were flashed on a computer screen for 0.05 seconds. It is worth noting that most users don’t actually browse the web in this same manner; however, it informs us that users can make decisions rather quickly. Most eye tracking studies show that the human eye can quickly skim over a page. It is almost a general rule of thumb in usability that all Internet users browse or scan websites, not read them. This directly elevates the importance of content usability.

0.1 second is the response time limit if you want users to feel like their actions are directly causing something to happen on the screen. For example, if you click on an expandable menu and see the expanded version in less than 0.1 seconds, then it feels as if you made the menu open up. If it takes longer than 0.1 seconds for the revised state to appear, then the response doesn’t feel “instantaneous” — instead, it feels as if the computer is doing something to make the menu open.

Thus, to create the illusion of direct manipulation, a user interface must be faster than 0.1 second.

Jakob Nielsen

Judge Me in a Heartbeat!

First impressions are critical to keeping a user curious about a website. Chances are that if you don’t make a good first impression, you’ll lose them permanently. Websites that use enhanced usability strategies are more likely to keep the user from bouncing. Some of these strategies include:

Don’t Make Me Think

As a rule, people don’t like to puzzle over how to do things. If people who build a site don’t care enough to make things obvious it can erode confidence in the site and its publishers.

Don’t lose search

Some people (search-dominant users), will almost always look for a search box as they enter a site. These may be the same people who look for the nearest clerk as soon as they enter a store. This can be an exception to small sites with very 1-2 levels of structure.

Make it easy to go home

Having a home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over, like pressing a Reset button or using a “Get out of Jail free” card.

While it may be hard to judge anything in as little as 50ms, the key fact is that people can be hooked or discouraged by a website’s design and content rapidly. It is always good practice to test your site designs for usability and see what participants think of the site. It only takes a handful of people to determine distinct patterns on what is right or wrong.

So let’s hear from you. Let us know your experiences when browsing a website for the first time.