Marshall Brain (@brainstuffHSW) from HowStuffWorks.com took the stage to kick off day 2 of the Internet Summit in Raleigh and threw down a great argument for why we should care less about design and more about function.  Now design matters of course and I would be thrown to the lions if I said that if it didn’t. (Working for a firm that cares a great deal about design that we should take design and shove it is crazy talk)

My goal here is do give an overview of what he talked about, why some of it is valid and what I think the true balance is. (Full disclosure – I am a developer and my User Interfaces look like crap without our design team).

His examples though were quite compelling: Google Search Results, Wikipedia, Craigslist, Reddit.  The content is what is truly driving customers back to these sites over and over again.  Now I would argue that the experience is what matters and how quickly one can access content, FOR these examples is what makes them hugely successful.

Now for us in the industry we can all be fairly certain that a great collaboration occurred to create Google’s new search results:

User Experience Improvements in Google Search Results

My point is that these are elements of design!  Now what they really could be is a great collaboration between UX and designer. Check out the Search menu is in red and it knows my location.  Savy? Also it is subtle, but changing the top search button blue is a great choice that draws attention to it.  But I argue that was indeed a design choice.

Now Marshall’s real point was that in start-up mode don’t really waste your time pushing pixels around and making things perfect.  If you create great content your followers will come and they will use your product.

He said, “I shop at Walmart.  Fonts and colors go over my head and I don’t even see them.”

His point was here that most of the regular everyday people out there that don’t care about design and if you are trying to get investors they don’t either, they want to know how much traffic you are getting and whether or not you are “converting”.

Now it is tough to argue with this point, but again, I go back to the fact design, form, and function are all required.  So I nuance his point slightly and say perhaps spend a little more that he is abdicating for so you can make your site accessible for all, usable for all, and create an experience with content that tells a story brings you back for more.

His other great point was that great content tells a story and if you tell a great story it will resonate with people (and I add then share it with all your friends @darylhemeon ha!).   Marshall also outlined his major issues with sinking too much design time up front:

1. It is expensive
2. time consuming
3. It is never done – fashion is always changing
4. browser compatibility issues
5. distraction from what is important

Marshall’s points are well taken. All I am saying is that is our jobs in this industry to find the right balance for every customer.  What he did say rang true though about the top three most important features are the Content (Content is King #ISUM11), Navigation is simple and functional and SPEED.  If your site is a dog, no one will run with it.

I do understand that what he was trying to do was stir people up on the morning and I started this conversation first thing at my office and people started to wig out!  Which personally I think is great because what it does is make us think about what matters for our customers and that is what is truly important.

Marshall Brain, thanks for a great talk, thanks for stirring the pot and thanks for recommending WordPress…by the way, this blog uses that too.

Google Maps Screenshot

Online mapping services like Bing Maps and Google Maps are an outstanding addition to just about any website that has a physical tie to planet Earth.

The fact that both require no software purchase and have fairly complete API’s (that’s Application Programming Interface – it lets our programmers hook into all that mapping information easily), and offer compelling mobile experiences only help in their adoption. We’ve used them in the past with quality results.

We’re just about ready to launch a project that has some pretty heavy Bing Maps functionality built into the user interface.  The client’s Location Search is built almost entirely around it (with, of course, a non-map based alternative for users who can’t see the map and for browsers who can’t handle it).

It’s been an effort influenced by almost every group here at Atlantic BT with User Experience, Design, Marketing and most definitely Programming contributing to the outcome.

We spent considerable time working out how this map’s output could be interacted with by the site’s users:

Bing Maps embedded on a client's website. Lots of useful information being presented to the user here.

• Does clicking on a map “pin” take the user to the location page?  Bing Maps has no default action for pin clicks, but the more popular Google Maps does.  Do our users even know that they’re looking at a “Bing” map, or is it just an interactive map to them?
• Does sliding the map around update the text results adjacent to it?
• How does the search radius change when the user rolls their mouse scroll wheel?
• And the most important question – how far can we safely deviate from what the users expect the map to do?  Where is that sweet spot between allowing exciting new features and not frustrating uses?

Our discussions brought up two really important points that we want to remember going forward:

• Highly interactive and open-ended page elements like embedded Bing and Google maps require extensive planning if you want them to be truly awesome and if you want them to feel like a natural part of your site.
• These services’ wide adoption rate means a wide range of user types with different skills and very different expectations.  What we make needs to be flexible and forgiving for many different types of users.

This weekend, I came across a tumblelog called “Never said about restaurant websites“. In Raleigh, we have a lot of great locally owned and operated restaurants. Many of them, unfortunately, either don’t have a web presence or are, well, doing it wrong. While it’s fine to think about what you want to put on your website, it’s more important to think about what people will expect on your website. When it comes to restaurant websites, people expect to find hours of operation, location, and a menu. All of those could fit on a couple of web pages (and the menu should not be a PDF).

The Good, Bad & the Ugly

To illustrate my points, I went on an Internet safari where I visited some of the websites of my favorite restaurants.

Good: Everything I need, at the top of the page

While this site used Flash and it took a little bit to load, everything I needed was right at the top of the page, clearly visible. Well done!

Bad: Difficult to find (and read) the Hours of Operation

A restaurant’s hours need to be very visible. My eyes shouldn’t have to wander to the bottom of the website and then adjust to read light-gray text with strange formatting.

Ugly

On the left, the address (without the link to the map) and phone number are clearly visible (I removed pieces of their contact information). But, unfortunately the site is difficult to look at. The menu is available as a PDF file, and the header requires Java, which I haven’t needed to install on my computer yet. I can’t find the hours anywhere except in the Menu.

Does every business need a web presence?

Unless you’re operating in secrecy, the answer is yes. Most businesses that don’t have a web presence either are doing fine without one, and/or are intimidated by the large investment of a website. In reality, just one or two well-designed web pages will often suffice when one of your customers thinks “what is their phone number again?” or “I wonder if they’re open” and tries Google unsuccessfully. Then, your customer has to resort to the phone book. Or, if they’re like me, the online phone book. Phone books, in any form factor, are not an ingredient of a healthy user experience.

The user experience extends off the screen. Proper signage, well-lit parking lots, ramps for the handicapped, and a useful voicemail message are also very important. For the established single building restaurant, barber shop, or tailor shop, a web presence might not seem like a priority. For some, they might not even want to attract new customers. But a great user experience is also important for established customers. And now, more than ever, the Web (including the Mobile Web) is part of that.

Not one to panic, I quickly turned to the internet to solve my problems.

Here's how it started out - a good mobile experience.

I fired up my mobile device in an attempt to find an affordable hotel room. Why slip and slide in the snow when my family and I can order pizza and wait warmly while it all passes by?

The hotel finding experience started off well enough – I went to a name brand discount travel website and found they had a mobile-formatted home page. This allowed me to quickly search for and find a hotel room nearby. The site’s layout was great and the menu options helped me narrow things down quickly and efficiently.  It let me view features, reviews, and see estimated prices of the hotels I was considering. This is the sort of top-notch mobile user experience we all want, especially when a blizzard is coming.

Then, when I went to purchase the hotel room, I received what mobile web users have come to dread – the mobile-to-desktop hand-off.

We’ve all experienced it. It’s that one link tap that, without any warning or context, takes you straight to a traditional full-width desktop website. Now I’m sliding, re-sizing, tilting, and zooming the screen to find the links and buttons I’m looking for.

Sure, my iPod Touch browser handles it in stride, but if I was using my pay-as-you-go-low-tech phone browser, things would have been a great deal more painful, if not impossible.

When the hand-off occurs, users are left with a different looking site not optimized for their device

This story has a happy ending.  I was able to book the hotel room at a reasonable price and ensure my family was happy and warm while we waited for the snow to pass – but I was left with a bad vibe about the travel company.  Not because I had to use a non-mobile website to reserve the room (not everyone had a budget for a dedicated mobile site) but because I was, without warning, passed off to a non-mobile website right as I was able to complete the transaction. Right when I was pulling out my wallet.

Why tease your users with a great initial experience and then bring in someone else to close the sale?  And why do it right before I put my credit card information in?  Why push confusion before the conversion?

This is why great online experience are often the result of user testing an entire process, not just an initial screen or menu design. Shocking layout and interaction transitions should not be part of your plan. Why leave your users out in the cold?

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

Even the elderly could not resist the Nintendo Wii (source: BBC)

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

In-game menu. Better watch your back! (source: Game Trailers)

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

Great graphics, but unusable controls, make this game hard to recommend

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, functionality 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!