1. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition – by Steven Krug

Five years and more than 100,000 copies after it was first published, it’s hard to imagine anyone working in Web design who hasn’t read Steve Krug’s “instant classic” on Web usability, but people are still discovering it every day.

In this second edition, Steve adds three new chapters in the same style as the original: wry and entertaining, yet loaded with insights and practical advice for novice and veteran alike. Don’t be surprised if it completely changes the way you think about Web design.

2. The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity – by Alan Cooper

Imagine, at a terrifyingly aggressive rate, everything you regularly use is being equipped with computer technology. Think about your phone, cameras, cars – everything – being automated and programmed by people who in their rush to accept the many benefits of the silicon chip, have abdicated their responsibility to make these products easy to use.

The Inmates are Running the Asylum argues that, despite appearances, business executives are simply not the ones in control of the high-tech industry. They have inadvertently put programmers and engineers in charge, leading to products and processes that waste money, squander customer loyalty, and erode competitive advantage. Business executives have let the inmates run the asylum!
In his book The Inmates Are Running the Asylum Alan Cooper calls for revolution – we need technology to work in the same way average people think – we need to restore the sanity. He offers a provocative, insightful and entertaining explanation of how talented people continuously design bad software-based products. More importantly, he uses his own work with companies big and small to show how to harness those talents to create products that will both thrill their users and grow the bottom line

3. About Face 3 – by Alan Cooper

This completely updated volume presents the effective and practical tools you need to design great desktop applications, Web 2.0 sites, and mobile devices.

You’ll learn the principles of good product behavior and gain an understanding of Cooper’s Goal-Directed Design method, which involves everything from conducting user research to defining your product using personas and scenarios. Ultimately, you’ll acquire the knowledge to design the best possible digital products and services.

4. The Design of Everyday Things – by Donald Norman

Anybody who has ever complained that “they don’t make things like they used to” will immediately connect with this book. Norman’s thesis is that when designers fail to understand the processes by which devices work, they create unworkable technology.

Director of the Institute for Cognitive Sciences at University of California, San Diego, the author examines the psychological processes needed in operating and comprehending devices.

5. The Elements of User Experience: User-Centered Design for the Web – by Jesse James Garret

Smart organizations recognize that Web design is more than just creating clean code and sharp graphics. A site that really works fulfills your strategic objectives while meeting the needs of your users. Even the best content and the most sophisticated technology won’t help you balance those goals without a cohesive, consistent user experience to support it.

But creating the user experience can seem overwhelmingly complex. With so many issues involved-usability, brand identity, information architecture, interaction design-it can seem as if the only way to build a successful site is to spend a fortune on specialists who understand all the details.

The Elements of User Experience cuts through the complexity of user-centered design for the Web with clear explanations and vivid illustrations that focus on ideas rather than tools or techniques. Jesse James Garrett gives readers the big picture of Web user experience development, from strategy and requirements to information architecture and visual design. This accessible introduction helps any Web development team, large or small, to create a successful user experience.

6. Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics – by Tom Tulis & Bil Albert

The first practical, detailed instructions on how to measure improved usability for the web, web-based applications, and electronic products of all kinds.

“This book is a great resource about the many ways you can gather usability metrics without busting your budget. If you’re ready to take your user experience career to the next level of professionalism, Tullis and Albert are here for you and share generously of their vast experience. Highly recommended.”
- Jakob Nielsen

7. Designing Web Usability – by Jakob Nielsen

While everyone wants to design cool web sites, no one wants to think simple and consider whether the design actually accomplishes its goal, which is usually to sell, teach, or entertain. The sole exception is Nielsen, who has made a living speaking and writing about what works and what doesn’t work in interactive media. His simple, well-written, and well-illustrated book discusses web usability, page design, content design, site design, intranet design, accessibility for users with disabilities, international use, future directions, and simplicity.

Add Your Books

What’s on your bookshelf? Add your favorite books to the comments and why you think it should be on everyones list?

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

“Above the fold” is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible. Thus, an item that is “above the fold” may be one that the editors feel will entice people to buy the paper. Alternatively, it reflects a decision, on the part of the editors, that the article is one of the day’s most important. By extension, the space above the fold is also preferred by advertisers, since it is the most prominent and visible even when the newspaper is on stands.

The term can be used more generally to refer to anything that is prominently displayed or of highest priority.

This term has been extended and used in web development to refer the portions of a webpage that can be visible without scrolling. However, some have suggested that this term is inaccurate as screen sizes vary greatly between users, especially in an era where websites are viewed with mobile devices as much as home computers.

The problem is that the people asking this question haven’t been properly educated as to where the fold actually came from and how we can use it or if we should even care.

Resources For Educating Fold-Mongers

To start off here are links to some valuable insight from industry experts both recent and spanning back several years.

1. Blasting the Myth of the Fold
2. The myth of the page fold: evidence from user testing
3. Utilizing the Cut-off Look to Encourage Users To Scroll

These three examples alone should be enough to convince even the most staunch fold evangelists. Hell, even this report from 1994 by usability expert Jakob Nielsen says,

In more recent studies, we have seen that most users scroll when they visit a long home page or a long navigation screen. This change in behavior is probably due to users getting more experience with scrolling Web pages.

When We Should Pay Attention To The Fold

Now that we have truly established that paying attention to the fold is stupid, I will put on my stoopid hat and give you a couple reasons where we SHOULD pay attention. These are more common sense examples and really will help the usability and user experience.

1. Short Pages

If you have a limited amount of content that CAN all fit on one screen (above the fold) it’s best to try. There’s no reason to force the user to scroll a couple hundred pixels.

2. Don’t Give A Reason To Second Guess

Check your designs at different resolutions. If you have any hard horizontal breaks across the page, make sure they’re not right at the fold. Easy to fix by vertically spacing your content. We want to avoid guessing if this is the bottom of the page or not. Guide them down the page by trying to avoid these fold breaks.
These two examples may seem contradictory to the posts title, however they’re not meant to be strict usability guidelines and are more design common sense.

Summary

Whew! Glad you made it. This is below the fold and I was a little worried.

There are mountains of data and information slaying the fold myth. Some are backed by years and years of expertise and research and some are more comical and intended to prove a point. It is almost as absurd as not turning the page of a book if it ends with a period.

It is our responsibility to educate those who aren’t familiar with the findings and continue to study user behaviors to educate ourselves.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Congratulations to our winners of a user test project from Loop11!

Dave Vogler
Jacob C. Alonzo
Clifton

We will be contacting you this weekend to give you the details on how to redeem your prize!

Thank you to everyone who participated. And keep you eye out for more great stuff from Fuel Your Interface!

Loop11 is an online usability and user experience testing tool, allowing individuals and companies to conduct online, unmoderated user testing on any kind of digital interface. Loop11 is not a survey or web analytics tool, but a user experience tool… helping you to understand user behaviour and improve your website’s usability.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

The size of the product catalog of your online store will decide how to lay out your site’s nav. Generally speaking, there isn’t much difference from one site to another. Looking at a handful of the sites from the top 100 list has shown that most sites with similar competitors will use the same style of navigation. Furthermore, we discover a good percentage of the top sites use a horizontal nav bar with drop down menus broken down by store front and then broken down further into various departments, brands, and so on.

This is neither a comparison nor a showcase, but rather a case study, or the philosophy behind how e-tailers use user interface design to (hopefully) get you where you need to go in as few clicks as possible.

1. The Home Page

Navigation starts at ground zero, the home page. Sites like QVC, Overstock or Amazon start their top nav differently than specialized retailers like BestBuy. Where the aforementioned sites may have an Electronics section, BestBuy’s subject is electronics so they break their top nav into “Departments” from the beginning. Sites like QVC and Amazon will take one step back and start their navigation presenting you with “Store Fronts”.

This is a basic hierarchy that tries to emulate how brick and mortar stores are physically presented. Next time your in a store like Target or Wal-Mart, look at how the store is layed out and then compare it to their online presence. See how they are similar and also how they differ.

Trends

• Horizontal navigation across the top of the page with drop down menus letting the user “jump ahead” to specific areas of the site related to that specific category. Moving from the home page directly to a specific brand is a big time saver. Less clicks equals happier customer. This is the primary means of navigation and because of this, it is persistent across the entire site. Nothing surprising here, sites have employed this type of navigation for a long time and this isn’t limited to e-commerce sites. Nevertheless, for the purposes of this study it is still a noticeable “trend”
• Large promotional advertisements, usually using “lifestyle” imagery. Often times there are multiple promotions that cycle through, one after the other. We also notice that some of these promotions aren’t static, but allow the customer to interact with them without clicking through to it. Using this type of progressive disclosure gives the user more information and helps them decide whether this is the correct path to take. It Cleans up the design by not forcing context without it being asked for.

2. The Storefront

Like we mentioned before, this is how sites like BestBuy will start their navigation. You’ll find departments like TVs, Cameras, and Computers presented to you up front, where a site like QVC will store all these under an Electronics storefront. The reason for this is real estate. Amazon.com may have more laptops than BestBuy, but because they sell so many other products, to make the UI more usable they break it down one step further.

The Storefront will also be one of your higher traffic areas and where you’ll find more targeted promotion. Next to the Home Page, Storefronts are where retailers target customers with offers and deals to persuade them to buy a specific item, or browse deeper into a department.

By this point we find the navigation will normally switch from the horizontal top nav to a vertical navigation on the left. Since now we aren’t limited by real estate, we start to realize this is where things can get confusing. We want to help the consumer narrow down their choice, so we see keeping relevant information at the top and reserving secondary options below. This secondary information varies from site to site, and range anywhere from “Buying Guides” and “Community Links” like blogs and forums to “Clearance”, “Best Sellers” and other promotional messaging.

Trends

• Again we see large promotional space, obviously now targeted depending on which storefront you’ve entered. We also noticed that products being promoted typically have a seasonal influence behind the messaging. Taking the Electronics storefront as an example, you may see cameras being promoted to capture your child’s graduation moments in the Fall and perhaps a Father taking pictures of his son at his first baseball game in the Spring. All used to evoke an emotional response to persuade the consumer to make a purchase.
• We also see secondary promotions that might promote high-rated products, or even target a specific brand if it has a promotion that entices the user to dive deeper into the site. An example would be Free Shipping on select Asus laptops, taking the user directly to the Asus Brand Page.

3. The Department Page

Depending on we’re lead through the experience, a Department Page is where the consumer really starts to make tougher decisions. They’ve made it from the Home page on through the Electronics Storefront and into the Computer Department, but do they want a Desktop or a Laptop? Perhaps a Netbook or a Tablet PC? Decisions, decisions… OH THE HUMANITY!

The Grid

Generally speaking the Department Page is also where we see grids of product show up. These product grids show us product top-line description (headline), prices, ratings, and the ability to add the product to our cart or bag. In most cases the grid page will also give us the ability to sort the grid by specific relevance. Price low to high, rating, new products, or featured items are some of the more common sorting options as well as letting the user choose how many products to display per page.

Trends

• We see some interesting trends on a few sites that offer an overview of an individual product without going to that particular product detail page, keeping the visitor from yet another click off the path. This “quick look” is like a mini product detail page giving the customer color swatches, alternate images, size choice and even sometimes sharing options posting items to Facebook and Twitter. Sites like QVC even offer video at the grid level which is “easy” for them to do since they are also a 24 hour television shopping network, giving them mountains of video to work with, and video is already playing a huge part in online commerce.
• The grid itself is getting some attention, sometimes allowing the user to switch between types of views. From the standard grid to a larger version and even list view. Whenever possible allowing the consumer to tailor or personalize their experience, even if there isn’t a lift in conversion it shows the customer you care enough about them by giving them the choice, which reinforces their loyalty to your sites brand.

4. The Brand Page

Drilling down to a sites Brand Page the customer is ultimately at a decision-making stage. Sites like Dell.com will consume you with their brand because thats who they are and that’s what they sell. When you take a site like BestBuy who has their own brand, brand pages take on a duality which can sometimes be difficult to convey. BestBuy sells Dell computers yet still needs to represent themselves to the user for a consistent experience. They also need to embrace the consumer will the Dell brand. This is acomplished with either subtly or with obvious in-your-face promotion depending on how each brands needs are met. It is as simple as brand-familiar top-line descriptions, logo usage and product images to, in some cases, creating a brand specific experience.

Factors that come into play when deciding between a heavy brand representation are many. Customer demographics, promotional appeal and strength of brand are but a few. The one thing to never lose sight of is the user experience. Never assume you know what the customer wants. Good user experience offers the customer options but doesn’t trap them into an experience they may not want. We see it offered as an alternative, but always see a clear path to where they want to go.

Trends

• We mostly see simple grids with not a lot of whiz-bang promotional elements unless that particular brand is promoting something like free shipping, buy-one-get-one, or spend $X save $Y.
• Bigger promotional space will vary based on stickiness or popularity of the brand. Brands that offer interactivity or promotions that take the focus away are usually reserved for the specific demographic. It’s the, “Just because you can, doesn’t mean you should.” mentality. For example, a Levis department page may offer a simple grid, where the Electronic Arts department page may offer some animation or video game trailer for the latest EA Game. This is ok since the video game consumer could be persuaded to “commit” with a flashy promotion or some other interactive element.

Wrap Up

This concludes our series on eCommerce UI design. From PD pages, to Footers and a Navigation study we hope you enjoyed reading them as much as we did writing them.

It’s no coincidence that we see many similarities between sites. But it’s nice to see some of them exploring new alternatives to the way it’s been done. With new technologies and the number of tech-savvy of consumers increasing, I’m sure we will start to see this happen more and more.

What do you think the future of e-commerce holds? Will it be virtual like Microsoft’s Project Natal? or will it be a marriage between the internet and television where we buy products right from our remotes based on the show were watching? Imagine watching the season premiere of House, and just as you would a DVD or Blu-Ray, pause the show, scroll through what Hugh Laurie is wearing, and buy the entire outfit he has on. There’s no telling what the future holds. But Fuel Your Interface will be sure to let you know when it does!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Is there a magical recipe that will convert that browsing customer to a paying one? Perhaps the key is a magical button, so magnificent that the user has no choice but to click. Or maybe it is the number of licks it takes to get to the center of a tootsie roll tootsie pop?

In this series of posts over the next several weeks we’ll look at some of the top internet retailers, and see what they’re doing to achieve their success. I think you will be surprised at what we find.

The Product Detail page or PD page is where most online shoppers will spend their time. Whether it’s reading reviews, product information, or looking at alternative (alt) images, the PD page is the heart an soul of the online eCommerce experience.

For the purposes of this part of the series we will take a look at two of the Top 100 eCommerce websites of 2009, straight from the Internet Retailers Top 100 list. Well look at 1 well designed page and 1 not so well designed, and talk about the good and the bad of both.

Anthropologie

Creatively speaking this entire site is gorgeous. Anthropologie certainly has their brand down, and it’s reflected from page to page. The PD page is no exception.

WHAT THEY DID RIGHT

Simple, concise information. The customer can get all the information about the product within a glance. This works well for sites like Anthropologie who’s clientele may be more concerned with what the label says, than what it’s actually made of. But that’s ok. Some of us do the same thing with Apple products. :)

From the on mouseover zoom to the tooltip message on the “Add To Bag” button when you don’t select a color or size. It’s those little touches that improve user experience and make the sites usability effortless.

Nice use of whitespace, and typography as well as the consistent product photography, and great use of a left nav, especially the strong call out to where you are as well as breadcrumbs, this site makes my top list for the design alone.

WHAT THEY COULD DO BETTER

Just as I mentioned typography as a strong point I’d also like to point out the inconsistencies. I’m not going to make a big deal about it because it is more than likely part of the quirkiness of the brand and if this is true then who am I to tell them differently.

Next I have to point out that the placement of some features seem odd to me. Grouping “add to wish list” with “send to a friend” and social network sharing feels a little off.

On to the “Add To Bag” button itself. It is the same color as the left nav and even though the page is clean and uncluttered it could benefit from standing out a bit more. I’m not saying they need a BOB (Big Orange Button) but perhaps just a simple color change would make a stronger call to action.

Overall, Anthropologie is definitely one of the better designed eCommerce sites. Easy to navigate, consistent user interface and branding. They have carved their niche, and provide their customers with a great shopping experience. They are able to achieve this great experience because they don’t try to be all things to all people. which is a perfect transition to our next site.

Amazon

Amazon.com is the #1 eCommerce website. It’s the first place I go when I want to compare pricing. They will typically be the best price on the net and often have free shipping. Their product catalog is larger than Han Solo’s ego, and they outperform most, if not all of the competition by billions (with a “B”) in annual revenue year after year.

WHAT THEY DID RIGHT

As cluttered and confusing as Amazon may look there is actually some method to the madness so to speak. Scrolling down a PD page on Amazon is like long checkout lines at the world’s largest flea market on Christmas Eve. If you want it, it’s there and probably cheaper than anyone else. But we’re here to talk about the UI and overall design.

Amazon has clearly defined each section as you move down the page, and even though there are a million things that could distract you, Amazon does a nice job at grouping it’s content so that each section is easily distinguished.

Another thing they did right was putting the “Add To Cart” button in the same place on each PD page. With all the variable content, can you image what it would be like if the button was under, oh lets say the “Product Description”? On some products you would have to scroll 4 screens down to get to it. So, as much of a no-brainer this was, they did it right.

They also put the basic info right at the top and left a plethora of statistical info for further reading if you so choose. I think Amazon knows they are not a browsing site per se. I don’t know anyone who goes there to see what’s new, or to watch videos about a product specifically. You go there when you already have something in mind.

WHAT THEY COULD DO BETTER

Well, firstly you might be thinking who am I to tell the #1 online retailer they could do better. Well, I buy stuff from Amazon all the time. I’m a customer. The customer is always right! :)

I have a lot of issues with Amazon.com. As a designer, I wouldn’t know where to begin with attempting a redesign but lets start with the PD page. Amazon could really benefit from a tabbed structure to clean up some of the clutter. I realize this would put some things an extra click away, but from a user experience standpoint, choice suppresses conversion. I’ve said this before in a different context, but the principle is the same.

…people, confronted with a large pool of options will be less satisfied with a decision. The more options there are, the higher their expectation. So even if they have made the best possible choice, their satisfaction level has by default, dropped.

Amazon could also stand to drop so many of the up-sells or at the least moving some of the less relevant ones to a click away. Things like “Customers Who Bought Also Bought” is fine, but “What Do Customers Ultimately Buy After Viewing This Item”? Seriously? I’m sure these are extremely valuable metrics for their business, but I could care less if 2% of the people viewing this product bought some other product. The only thing this does is make me second guess my decision, potentially abandoning my cart for fear of making the wrong choice.

These aren’t just business decisions. As interaction designers, we need to take on some accountability. We’re supposed to be improving the customers experience through well thought out UI and persuading them to convert. Amazon somehow manages the conversion part very well, but leaves user experience at the door quicker than Luke left Dagobah to save Leia.

I could write pages on how we could improve Amazon’s Product Detail page, but the truth of the matter is, they’re #1 and probably will be for the foreseeable future so the point really is moot.

Summary

We’ve taken a look at 2 of the top100 eComemrce sites PD pages and talked about their good points and bad points. To recap:

ANTHROPOLOGIE
The Good

• Great design
• Clean layout
• Nice use of whitespace and typography
• Good usability
• Strong brand definition

The Bad

• Strange link grouping (wish list with sharing)
• Need stronger call out for “Add To Bag” button

AMAZON
The Good

• Clearly defined sections
• Great Add To Cart/Wishlist placement
• Important description info at the top
• Plenty of product images

The Bad

• Clutter
• Too many up-sells
• Poor layout
• Too much useless information

What say you? We would love to hear your thoughts.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

• Who are they?
• What do I want them to do?

These two questions will help you maintain FOCUS. What is focus? Well, back to the dictionary for this one. A few great definitions for focus:

1. A center of interest or activity
2. Close or narrow attention; concentration
3. A condition in which something can be clearly apprehended or perceived

Why, then, is focus important to you as an interface designer? More often than not, interface designers are faced with a set of goals. This series looks at getting into their heads; a part of this is understanding that each person’s head (way of thinking and living) is different, and usually very specified. Since the globalization of information, people are able to and often do consume very different forms of media than their immediate colleagues and friends. This means that every person, no matter where they live, has a specific makeup. It is your job to understand what kinds of people will be using your interface, and make the interface most accessible to that group.

Do you see the ties yet? Let me paraphrase.

Since your audience is specific, your interface will be specific. The way you achieve this specificity is through proper focus. The way you achieve proper focus is through understanding both the makeup of the ideal user who will be using your interface and what you want them to do with the interface.

Using the information of each of these separate considerations will supplement the other. So, you’re designing an investment query site aimed at small businesses? You know then that your audience won’t be high school or college students. You also know that the purpose behind the interface isn’t to provide a social networking platform. Instead, you can probably narrow your audience to small business owners or prospective business owners; you can also decide the most efficient way the user can complete an investment query.

Obvious, right? The truth is, there are many, many interfaces that try to infuse other purposes into their original purpose. This only waters down the effectiveness of the interface, and causes the user to become disinterested, annoyed and frustrated, or sidetracked.

A point of clarification…

This doesn’t mean, necessarily, that your interface has to be limited to only one purpose or one audience. The point is, be careful to make sure that the purpose is clearly defined, and that you stay focused on that purpose.

Conclusion

Whew, that’s a lot of reading. Basically, what we are trying to say is this.

• Your interface should have a specific purpose or purposes
• Your audience should also be specific
• Because of these two things, you must keep your interface focused and specific to your audience and purpose

Hopefully you got something out of this post! Feel free to comment and let us know how you keep your interface design focused.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

the set of circumstances or facts that surround a particular event, situation, etcetera, or the parts of a written or spoken statement that precede or follow a specific word or passage, usually influencing its meaning or effect.

Already, by this definition, we should be able to see the importance of context when designing interfaces. So, what exactly might this look like in an interface design? Let’s look at a few examples.

Developers of iPhone applications in particular have a responsibility to maintain continuity with context. The social network giant Facebook emulates the native iPhone OS interface by adding the different regular actions of Facebook as a grid of 9 application-like icons, as well as a second page for “favorites”. Both pages of icons are rearrangeable just like the native home page icons. Also, most applications that have notifications are usually placed in the “dock” on the iPhone; Facebook has also adopted this and has placed notifications at the bottom of the application. This is a perfect example of creating an interface in context.

But what else does context mean? Sure, it could mean adapting stylistically to the surrounding context, as in the previous example. But what about usability?

When designing an interface, sometimes there are multiple possible choices, but only one best choice.

Take, for example, the placement of the “Home” link on various sites. On Facebook, Twitter, and MySpace, the “Home” link is the first in the navigation, while Ebay doesn’t have a button labeled “Home” at all.

Why would Ebay make such an incredibly different interface decision? It all has to do with context. If you look at another e-commerce site, such as Amazon.com, there is also not a “Home” link in the nav. Rather, with both Ebay and Amazon, the interface gives the option to go to the personal account (”My Ebay” or “Your Amazon.com”). A “brick-and-mortar” store would never want to send you “home”; rather, they would want for you to know exactly what your favorite part of the store is. This approach is very much a contextual consideration.

Other contextual considerations might include tooltips. Tooltips are tips or instructions that appear on a mouse hover. The user may need further explanation on how to do certain actions within an interface, but you don’t want to bog down the interface with a lot of body copy. Tooltips are a great solution to this problem.

You as the designer are responsible for making it, the interface, work. Contextual decisions are made by users and designers on a daily basis. Make decisions such as allowing the user to press “return” to submit a form, but insert a line break by pressing “return” while using a larger text input box. Consider the full context of the user; everything from what kind of computer and what speed, to their demographics, to their cultural background, to their local context (what probably is happening at the time they use the interface), and to the internal context (their line of reasoning while using the interface).

Conclusion

So all of this is to say, interface designers must consider context to be a very important factor while designing interfaces. This could mean the simple placement of a “send” button, or the entire feel of the interface itself, or the decision to remove the “Home” link entirely from a webpage. Thinking and designing in context will improve both the usability and user experience of your particular interface.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

The User Interface (UI) has been around since the 1960s when Douglas Engelbart and a team of researchers at the Stanford Institute developed the first interface that was mouse-driven, and employed the use of hyperlinks. Over the years the practice of designing and developing methods of navigation grew from basic principles of user-centric and logical interfaces to presenting information in ways that not only encourage interaction, but solicitation of emotions and convincing (persuading) the user to trust with just what they see in front of them.

User Interface Design can be the design of a Human Interface Device (HID), a software application or a website. Below we will look at 5 great examples of well-thought UI Design. Though they may push boundaries of what some Usability, HCI and UX evangelists would consider a sin, they realize it’s sometimes ok to flip them the bird to give the user a better experience.

The loaded question

What makes great user interface design? Let’s tip-toe around this question because it’s such a subjective concept. The simple answer is, great user interface combines eye-pleasing graphics (notice we didn’t say eye-catching), intuitive functionality (notice we didn’t throw the word "usability" around) and a bit of the obvious with a side of exploration.

Let’s go back to the words we didn’t say and clear a few things up. Phrases like, "eye-catching" and "make it pop" make a seasoned designer want to pull their hair out. And personally every time I hear it I think of the the parody video, "Microsoft designs the iPod package" from a few years ago. Elegant touches of design are good things, but you don’t want to distract the user from their task by making every “important” piece of information jump off the page (box).

Then there’s the word "usability". Don’t get me wrong we should all follow some feverishly strict usability guidelines, but there are several techniques that we can and should employ to make the "usability" of a site a little more attractive. Which brings us to our first example:

1. HGTV

In the examples below HGTV takes what could have easily been a simple drop-down menu and applies a very creative use of CSS, rounded corners and semi-transparent pngs to house the revealed menu in a elegant display of yummy navigation.

The same style is applied to the search field but on top of the menu styling, the cleverly placed “Search In:” menu is placed inside the text-field. And notice the gloss and reflection of the magnifying glass on the button. Attention to details like these give the visitor a feeling of trust. It’s the psychology that says, you CAN judge a book by it’s cover. It’s still a search box, I can still find it, and it’s still functions the way I would expect it to. It’s just damn sexy!

2. A List Apart

The three C’s, “Clean • Concise • Clear” that is why A List Apart makes it into this roundup of great UI. Their use of typography, white space and apparent 960 grid layout make this a perfect design for scanning and readability.

The 960 grid system is to design layout what Chewbacca was to Han Solo.

A 7 foot furry Wookie from the planet Kashyyyk??

No no no, I mean it’s our best friend, comrade, our go-to guy, the one who keeps us from getting into trouble. Based on a width of 960 pixels, it is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. Which gives us vast amount of options when deciding on column width and margin distances. A List Apart uses this to keep their site very clean and help the user focus on what they go there to do. In fact their site is so admired other sites use them as a model to design their own sites.

3. Fluency Admin: A WordPress Plugin

Ok so it’s not a website per say, but it is an interface and if you have a WordPress Blog and love short-cuts and hotkeys as much as I do you’re in for a treat!

Fluency Admin (current version 2.1) is a plugin for your wordpress admin interface. It replaces the existing navigation with a very nice menu system that is collapsible, and has menu and sub-menu shortcuts that will have you blazing through the admin panel in no time. Fluency made the cut as a great User Interface Design because it took the ordinary task of navigating through WordPress Admin menus and gives it’s user an extraordinary user experience.

When we use something new and then can’t imagine ever using it any other way or think where have you been all my life, it’s these types of interfaces that change the way we perceive how things should work. Which is a perfect segway to our next UI…

4. The Apple iPhone (iPod Touch) and its OS

Over-hyped? Perhaps, but when the iPhone and iPod Touch came out it was undoubtedly a paradigm shift in how we use these types of devices. Pre-iPhone era, we had mobile phones or Smart(ish) Phones running Windows Mobile and Blackberrys, but that was about it. Sure, these devices had apps, touch screens (via stylus) but compared to Apple’s iPhone and more specifically it’s user interface the iPhone not only changed what we expect from a mobile device, but subsequently changed how other mobile phones looked and worked.

Apple has always put a huge focus on user experience. Sometimes to it’s own detriment as it pertains to a proprietary nature, but this is to ensure a precise and consistent experience for the user each time. There’s a video from a few years ago that depicts the iPod packaging as if it were designed by Microsoft. It’s this “Direct Mail Marketing” tactic which tries not to persuade, but to confuse. Overloading your audience with mountains of irrelevant information and this “make-it-pop” mentality typically results in the bastardization of some poor designers vision. Taking creative direction from VPs and executives with little to no creative background is as dangerous as believing everything you read on the internet. Oh, wait.. I mean.. *quietly steps off the soap box*

As much as the iPhone is capable of doing, it’s simple to use, has a gorgeous user interface and the learning curve is about as steep as the Salar de Uyuni on the Altiplano of southwestern Bolivia.

From it’s multi-touch capabilities to it’s keyboard functionality, finger swipe page scrolling, gyro-sensing horizontal or landscape positioning and two-finger zooming, it’s these new user interface features that make us cringe at the thought of going back to the way it was. Though we should have had Cut, Copy & Paste from the get go, the iPhones execution of how these tasks are achieved with a touch interface is nothing short of a ballet of the fingers.

5. Tuts+ Network from Envato

Last but certainly not least, Tuts+ is a network of sites dedicated to education by tutorials. From Photoshop and Illustrator to coding Actionscript, JQuery and PHP. The reason Tuts+ makes the list is for its, "Familiar Factor".

The consistency of the brand from site to site within the network give users a sense of familiarity and puts them at ease knowing that though they may have gone from PSD to CG, they’re still where they need to be. Removing that question from the equation helps us to not second-guess where we are and how to get from point A to point B every time. Even sites outside of the Tuts+network but still within the Envato "family" share this same feeling and style which is familiar to users.

We aren’t "aware" of this cognitive response to visual stimuli when it happens, just like we don’t think about how to drive to work every day or when we get a new keyboard or mouse we dont have to relearn where the keys or buttons are. It’s the beautifully designed consistency and brand recognition that puts Tuts+ in this list.

There is another site that uses this same type of strong brand recognition and familiarity from network to network, but the name escapes me at the moment. ;)

Conclusion

In these 5 examples of User Interface Design we’ve seen that:

• Adding a touch of fun to everyday elements can not only give the user a better experience, but it may make the decision to even move forward for them.
• Keep your readers focused by providing a clean layout with good use of typography.
• Providing a faster way to complete a task is a win-win across the board.
• Be innovative and dont fear failure. Sometimes out-of-the-box becomes the standard by which all others will mimic.
• Consistency, consistency, consistency! Your brand is your handshake with your visitor, it’s your commitment to the user to always let them know who you are and where they are.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

• An interface is the communicator between two different mediums of information; these mediums can be seen as senders and receivers, and may change from one to the other. Without the necessary interface, the information could not otherwise be transferred between the two mediums.
• Interface design is based primarily on function and purpose.
• Interface design should consider the economics of decision-making (people will take the shortest route to achieve a goal unless there is some kind of profit in taking a longer route).
  Creativity is secondary to functionality.

Okay, so we know all of these things. How do we go about making sure the interface we design meets these goals?

Information Architecture

This is a term that hasn’t necessarily been around for a long time. However, the practice of information architecture has been around for thousands of years. Information architecture, at its core, is the structuring of information. Surprised? Neither are we. But what a lot of people don’t know is that information architecture is the derivative of every decision made in the process of interface creation/design. Information architecture is the very beginning and core of any project. It helps define the who, what, where, how, and why of any endeavor. Some tangible pieces of information architecture include the wireframe/map of a website, library categorization/organization systems, and tables of contents. Why is this important to interface designers?

Centrality

For the interface to be effective, it needs to have a strong sense of centrality. This again is alluding to the functionality of the design. For centrality to be possible, there must be a system set up for structured creation so that content (meaning the actual design or execution of the interface) remains pointed towards the final goal. The backbone of a purposed design is the information architecture.

Things to note

1. “Architecture” in terms of information architecture is dynamically expandable
2. Information architecture is not limited to categorization. It can also include anything that steers the direction of the information (such as a mission statement, branding strategy, or goal set)
3. Information architecture is the setup of a system, not the content of the system itself.

With these things in mind, information architecture can be viewed as a conceptual or physical framework in which to build your interface. Information architecture, when practiced correctly, will allow for more functionality and expandability.

Get a little more practical, please.

Okay, so this all is a little conceptual so far. How about the practice of information architecture? How can you as an interface designer use these concepts to better your profession? Let’s look at the metaphor of the building of a house to understand a bit more about information architecture.

THE FOUNDATION
First and foremost, define the goals and the purpose of the design. This is a very important starting point for your architecture. Consider it your concrete foundation.

THE STRUCTURE

Next, consider all possibilities of the user experience. (This is particular to interface design, as not all architectures will require the consideration of “users.”) Put yourself in the position of the user, and ask yourself what all you need to achieve upon interaction with the interface. This will help define the rules of the interface, which is the structure of the house itself. The two-by-fours, if you will. As the rules are placed, you will begin to see how these different rules interact with each other, narrowing the decision-making process for you as the designer.

THE WALLS
Finally, once you have placed the rules, you will now have a framework by which to create your design. Consider this the sheetrock. The design itself will adhere to the rules and will never leave the goals and purpose (foundation).

THE DECORATION
Once the design has been created functionally, you now have the option of decorating it. You would never put a table blocking a hallway, would you? No, of course not. You still want the hallway to function as a hallway, and the kitchen to look like a kitchen. In the same way, you shouldn’t allow your artistic addition to a design stand in the way of its functionality. (For more on this, check out this post).

Conclusion

This post is not an attempt to give a full definition of information architecture, nor to go into detail of every facet of its applications. It is instead meant to shed light on the importance of information architecture systems when approaching the design of any user interface. What have you found through your use of information architecture systems? What are some creative applications for information architecture that have proven to substantially increase your productivity?

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

Including jQuery.js

• Step 1: Go to jQuery’s website and download the latest version of jQuery.
• Step 2: Place the “jquery.js” file in your site’s root folder or in a subfolder (like “/scripts” or something similar)
• Step 3: Include the script with the following code (replace the name of “jquery.js” with the name and directory that you have selected). Place this line in your header.

  <script src="scripts/jquery.js" type="'text/javascript'"></script></li>

Now, you can readily write with the jQuery library by opening a script tag in your header below your jQuery include.
Note: to include a plugin, follow the same process, and be sure to place the plugin include below the jQuery include.

The Plugins

Thickbox

Developed by Cody Lindley, Thickbox offers an easy-to-use lightbox for almost any kind of content. There is extensive instructions on its use, but the easiest way to get it working is to simply add a class of “thickbox” to a link to an image or content to activate the plugin. To create a gallery of images (or other content), add a rel of “gallery” (it doesn’t have to be gallery – it can be anything you choose). So a simple image gallery may look like this.

<a href="largeimage1.jpg" alt="largeimage1" class="thickbox" rel="galleryname"><img src="thumbimage1.jpg" alt="thumbimage1"></a>
<a href="largeimage2.jpg" alt="largeimage2" class="thickbox" rel="galleryname"><img src="thumbimage2.jpg" alt="thumbimage2"></a>
<a href="largeimage3.jpg" alt="largeimage3" class="thickbox" rel="galleryname"><img src="thumbimage3.jpg" alt="thumbimage3"></a>
<a href="largeimage4.jpg" alt="largeimage4" class="thickbox" rel="galleryname"><img src="thumbimage4.jpg" alt="thumbimage4"></a>

This would generate a set of thumbnails that whenever clicked would open the corresponding larger image in the Thickbox. Thickbox is a beautiful, simple lightbox. Check it out.

Form Validation Plugin

This is a very standard plugin that is fairly simple to use, and produces fantastic results. It goes a little more in depth, so head on over to Mike Alsup’s page to learn how to use it. If you’re going to be using a form for sign-up or contact on your site, this will provide instant feedback for both validation and submission.

Table of Contents Plugin (via FuelYourCoding)

This plugin allows for a lot of really cool automatic table-of-contents building based on h1-h6 tags. Read a bit more over on FuelYourCoding.

jGrowl

Awesome functionality here. If you’ve never used Growl, it is a very cool program that allows notifications to overlay at the top right part of your screen. jGrowl does the same thing, except with online content. Alerts can now be shown in a much more stylish fashion. Many options are included in the plugin. Check it out.

Kwicks

Kwicks is inspired by effects that are a part of MooTools, another cool (and small) javascript library. It’s pretty self explanatory – very cool fluid navigation possibilities. Obviously, you aren’t limited to using this just as a navigation plugin. Check it out!

Conclusion

There are a TON of plugins out there for jQuery. These are five we picked out of the bunch that we like. What are some of your favorites? How about JavaScript libraries? We’d love to hear from you!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

1. Interface Design has a Specific Goal

Interface designers, and all true designers for that matter, understand this simple principle: the objective is the most important part of your design planning. In other words, as you design, everything you do should keep the purpose of the designed interface in mind. If it is not helping the purpose of the interface to be fulfilled, why include it? While art is very often used in interface design, and while many consider the practice of interface design to be an art on its own, it is beyond art. Art can be expressive without being functional; design must be functional. Make every aspect of the interface a product of the purpose instead of a product of expression. This doesn’t mean to not be creative when designing your interface. But in the realm of creativity, you must use creativity in advantage to the purpose of the design. So, if you didn’t get it by now… don’t substitute artistic expression for purposeful design.

2. “Creativity” Can Come in the Way of Usability

This goes very well along with the first reason. Because of the popularity of modern and abstract elements of art, it is very easy to allow creative expression to interfere with the functionality and ease of use of the design. Simply “thinking outside the box” for the sake of it can quickly create problems. This is often because your first instinct when designing is probably the most functional. This is not to say that you can’t find new ways of achieving old goals; however, always keep in mind the principles of good design. Clarity is far more important than your “cool factor.” It is much better to have a working ugly interface than a beautiful broken interface.

3. People Don’t Want to Learn

As harsh as it sounds, the average user doesn’t want to have to spend time learning how to use your interface. They would much rather see it and know exactly what to do with it without exploring it. The shortest distance between two points is a straight line. People live by this principle daily; take the easiest route, avoid anything that will cause your route to be longer. The only exception to this rule is when there is some other kind of trade-off. You learn in basic economics that people act rationally, and that it is a rational decision to weigh cost versus return. In the case of an interface, the use of the interface is costing time and returns whatever the function of the interface is. The only way to add something that is beyond simple functionality and expect people to continue using the interface is if it introduces a new or better return. For instance, if a person uses an interface and receives both the functionality of the interface and entertainment, they may be willing to stay longer than the straight line.

A note about “rules”

There are very few rules that exist within any creatively driven field. It is very possible that you may build an abstract or modern interface that is imbued with artistic expression that functions very well, or even better than an otherwise simple interface. It is most likely, however, that the most effective interfaces are those that are similar to what a user is used to interacting with. This is why it should be common practice to resort to what has worked before. This definitely is not an article suggesting that you remove the creative process from interface design, rather I am trying to make the point that creativity is NOT the most important part of an interface – functionality is.

Conclusion

We as creative professionals know that creativity is extremely important, as is originality. Be careful, however, to keep your objective in mind at all times when designing. This will allow for direction to your creativity, and push your creative juices to work in favor of the functionality rather than independent of them.

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

First, let’s lay a few ground rules, and then a disclaimer.

1. We are strictly talking about interfaces that a person interacts with (whether simulated or actual).
2. We are talking about the importance or unimportance of text as it relates to interface design.
3. Typography is to be defined as the method of setting text. For more information on this, check out these few links:
   • A few of Fuel Your Creativity’s posts on the subject:
     • Typography is Sexy Part One, Part Two, and Part Three
     • Top 20 Free Fonts – Typography Roundup
   • Jacob Cass’s free 27-page type classification eBook
   • The specialty blog I Love Typography, where you will find typographical fanatics talking about all things type.

Disclaimer:

This is not a post outlining the details of the specifics of the practice of typography. This post may make references to general typographic ideas and styles, but is mainly concerned with the importance of type as it relates to interface design. While a working knowledge of typographic skills is important to interface design, this post is focused on the theory of usability in relation to the use of text in a design.

Let’s Begin

When a user approaches a particular interface, we must define quite a few things. Here’s a bit of interface design theory to start us out.

• Who will be using the interface?
• What is the goal of the person who is using the interface?
• What is the goal of the person or company who has provided the interface?
• How can we most efficiently expedite the process of both parties reaching their goals?

With these questions asked, we can go on to develop answers of the most usable interface.

Now, before you assume that there are hundreds of questions missing, let me go ahead and ease your conscience; the questions above are very, VERY loaded. The answer to the question “who will be using the interface?” will bring about hundreds more questions about the demographics of who will be using the interface, the persuasions of the targeted audience, the changes society will undergo over the progression of time both on a seasonal and a linear level…

It gets messy. And there’s little that may be considered an absolute. And there’s absolutely no way we can even pretend to cover all of the necessary study involved in the design of an interface (in one post).

Text, however, is in most cases an absolute. In the process of interface design, the concept of guidance must be surveyed as an absolute must. Providers of interfaces desire for the user to be able to simply and efficiently access and use whatever interface it is that they have provided. This requires the interface designer to analyze the process, from beginning to end, of an interaction with their interface. The user must be told what to do. In the famous words of usability expert Steve Krug, don’t make (them) think! These are a few ways to effectively use text when designing an interface.

Labels

This is the biggie, obviously. Many designers make the simple mistake of taking for granted what may seem obvious to them, leaving important fields unlabeled or columns unnamed for the sake of a “cleaner look.” We all have come to know the cleanness of Google.com. We can be sure that a company such as Google know the importance of creating a clean interface. However, when necessary, Google will use text to guide the user to complete whatever task the interface is designed to help them complete. Take GMail’s signup form, for example.

We can see that even beyond labeling, GMail gives examples for usernames, as well as instruction on the length of the password. This makes the interface not only easier to use, but the process is expedited for the user by these helpful hints. It is also important to note that Google chose an easily read sans-serif font to display within their interface. This is in keeping with Google’s branding, without being overbearing.

We can also see great examples of labels on Facebook’s front page, which includes both a login and signup form.

In this example, Facebook uses in-field labels to provide the user with guidance (particularly speaking of the login portion). The in-field labels allow for even cleaner design, and can be removed on focus with a few lines of jQuery or your favorite method of Javascript. Facebook also easily defines for the user the separate areas both with the blue bar at the top (where the login exists) and with a label for the signup form that says – you guessed it – Sign Up. Facebook also uses a sans-serif font.

Actions

Similar to labels, action text is usually limited to buttons or links. A good example of action text is a “login” button. It is important that the text used for actions is descriptive. If given the option of “go” or “login”, the user would most efficiently understand “login”, as “go” could also be the action text of a search engine or a subscription form. Action can be found within an interface in many ways, such as “add a station”, “cancel my subscription”, and “go to next page.” These kinds of descriptive action words will leave no doubt in the user’s mind as to what the function of a particular button is.

Not so fast…

So for the entire post, we have looked at the importance of using enough text in an interface. But sometimes, text can get in the way. Sometimes an icon will do the job. Mac OSX shows this very effectively with the display of the dock.

There are a lot of things to notice here. First of all, every icon is not labeled except on hover. Secondly, icons that represent a program that is open have an “active” indicator beneath them. This allows the user to quickly survey what is and what isn’t open without having to read a lot of text. In this case, the usability of the interface would be hindered by text. Many times, the context of the interface will allow the user to understand what a certain button, field, or action will do. It is important, however, that there is no doubt left in the user’s mind.

Conclusion

We’ve covered the concept of the importance of text within an interface, as well as the idea that text is not always necessary nor is it always the better choice, but more often than not text is the most effective communication tool between an interface and its user. It should be noted, however, that some interfaces are created with the notion of “anti-usability”, a trend in which the user has to process, think, and explore the different options within the user interface to really understand its function and utilize its options. A great example of this is bio-bak, a portfolio site for Coen Grift, a Flash designer. While this kind of interface is not the most effective for all practices, it does create a different kind of interest for the user in which the user must explore to know what the site is about. The use of text in Coen’s site is usually abstract, relying heavily on puns and immature humor, while the site displays Coen’s skills as a Flash designer quite well. Coen’s choice of what seems to be a child’s handwriting as a font adds to the humor and “roughness” of the site, characterized by the other hand-drawn elements throughout. Coen creates a curiosity in his user that will lead them to interact with the site for a longer time than if it was simply informational. This kind of interface also leaves a lasting impression, if executed properly.

That’s a lot to take in! I hope you have enjoyed this post. Be sure to leave a comment, and come back for more!

Sponsored by

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)