Cogni-Huh What-O-Nance?

A powerful cause of dissonance is an idea in conflict with a fundamental element of the self-concept, such as “I am a good person” or “I made the right decision”. The anxiety that comes with the possibility of having made a bad decision can lead to rationalization, the tendency to create additional reasons or justifications to support one’s choices. A person who just spent too much money on a new car might decide that the new vehicle is much less likely to break down than his or her old car. This belief may or may not be true, but it would reduce dissonance and make the person feel better. Dissonance can also lead to confirmation bias, the denial of disconfirming evidence, and other ego defense mechanisms.

Options

Everyone likes having options, right? I mean, if there was only one car ever made, regardless of how well it was built, or how cool it looked, there is nothing fun about being forced into a decision.

We want to personalize! We want the red convertible with the tan leather interior and the iPod hook-up, with custom rims. Green just won’t do! It’s this definitive decision that makes us happy, even ecstatic when we find the perfect [insert your idea of perfect here]. However, it is this same choice that can ruin an otherwise perfect experience.

Observed in many cases is the paradox that more choices may lead to a poorer decision or a failure to make a decision at all. It is sometimes theorized to be caused by analysis paralysis, real or perceived, or perhaps from rational ignorance. A number of researchers including Sheena S. Iyengar and Mark R. Lepper have published studies on this phenomenon.[2] This analysis was popularized by Barry Schwartz in his 2004 book, The Paradox of Choice.

I Want More Options… No, You Don’t

We are very busy people, we have schedules to keep, places to be, things to do. We don’t always have a gratuitous amount of time to make an informed decision and rely on what we’re presented with to help us make that choice. User Interface Designers, UX Professionals and hopefully “decision makers” know the value of a persons time, and ensure choices are as simple as possible.

Consumers have been bred to think more is better. We’re all guilty of it in some way or another but the fact is, choice suppresses conversion. We are more likely to be unhappy with our decision if we have too many options to choose from.

If we can not limit the number of options, there needs to be some method to narrow them down. This could be anything from a customer rating system to, putting the most common choice(s) up front.

Conclusion and Sources

Sometimes we can’t take away the number of options we’re asking the user to choose from. But we can try and solve for the best possible outcome. By giving the user a means to drill down their choices, or offering up a “Best Value” or “Popular Choice” we help minimize cognitive dissonance thus giving them a richer user experience.

When Choice is Demotivating: Can One Desire Too Much of a Good Thing?
Cognitive Dissonance Wiki
Changing Minds

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)

In the first in the series last week we talked about the Product Detail page. We looked at two of the top 100 ecommerce sites and picking out the good parts and making suggestions to improve. In today’s post we’re going to take a trip downstairs and have a look at the footers of two more sites from the same list, Bluefly, and GAP but we won’t focus on the good and the bad but more of how the footer can be used in an overall UI design strategy. In the past footers were where you stuck information like copyright info and privacy policies but nowadays footers have become an integral piece of the ecommerce puzzle.

Often times the forgotten child in the overall scheme of a sites design. Organizationally speaking, they are the last item on the page but are not any less important than any other element of a sites structure, and should be treated strategically equal.

Bluefly.com

bluefly.com

Email Solicitation

Bluefly.com has a very basic footer. The first thing we see is an email signup form that’s titled, “be the first to know!”. But first to know what? There’s no context behind what I’m signing up for. Daily, weekly, monthly emails? Am I getting emails about the brands I’m interested in or when new items are added to their catalog? Being the first to know could be a good thing or bad thing depending of Bluefly’s email campaign strategy.

A better approach to soliciting email sign-ups in the footer would be to first give the customer some explanation of what they’re signing up for. Provide a link to more info or just come out and say it. something on the lines of…

Now we know at least how frequent, and how many emails we’re actually signing up for. There is a fine line between too vague and over explanation. In this particular case, one short sentence would have sufficed.

Link Relevance and Order

Bluefly doesn’t have many links in their footer so my next point may be moot, but the grouping of links seem out of order. It could very well be for symmetrical appearance and to keep the four column of three links, this was the most logical order, but in general people (in most countries) read left to right and top to bottom, so we want to make sure that customers can find the most frequently used information first. My best guess would be, “ORDER STATUS” and “RETURNS” even before email sign up.

I don’t have any metrics from bluefly to base my assumptions on, but items we would look at changing would be moving the email sign-up to the far right and placing order status and returns in the first column, with security and privacy next to it one column over.

I also noticed Bluefly is looking for a UI designer on their careers page, so to any of you New York UI Designers, here’s an opportunity for you to make an impact. I won’t even ask for a kick back. :)

Gap.com

Gaps

Not as far as I can see. At least not in the footer. It’s a little odd to admire a footer, but Gap really did a good job. If we have to say something negative about it, we could look at how tall it is. Or if we REALLY wanted to split hairs, the orange color is a little on the heavy side, but over all a great example of good design.

Email Solicitation

I still have a small issue with the email solicitation. We still don’t know if we’re going to get one email or several. In fact they even say “email(s)” which leads me to believe that I will in fact get more than one, or at least have the option to select which emails I will get. The reason we’re not picking apart Gap on their email solicitation is because that’s exactly what they do.

After enter your email address you’re taken to a page where you can select which emails you will receive and Bluefly does not. This is truly a User Experience faux pas for Bluefly and leave it to Gap to pull it together nicely.

Wrap Up

Next time you’re shopping online, take a look at the footer. See if you can spot things that don’t seem to fit. Think about what you would do to improve the design. We don’t only learn from our own mistakes, but we can also improve our skills by analyzing good ui design and thinking about the user experience.

Photo Credit
Header image courtesy of George Eastman House and has no known copyright on it’s usage

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)

Well, obviously we aren’t talking about needing any kind of extended astronomical knowledge; space is the area with which we choose to do things. Today we will talk about this area in many different ways.

White space

White space is the area within a design where there is no imagery or text; it is instead a solid color (more often than not it is actually white). White space is an essential part of any design. Our eyes naturally desire balance; but balance doesn’t mean a fifty-fifty draw of color space “A” versus color space “B”. Rather, it is a psychological interpretation of a physical visualization. (Don’t worry… it’s not as confusing as it sounds.) The use of white space allows for a place for your eyes to move in order to escape the text; this makes the text itself a much more effective means of communicating.

Huh?

Okay, so if you don’t understand, white space is essentially the “breathing room” in your design. If it looks crowded, well… it probably is. The way our minds perceive things is different from the way we might calculate them. Reason might tell us that as long as the letter isn’t misconstrued by another color object, too small, or too large, then it is readable. But as we have learned in the past, design itself is not a science; rather, it is an art that observes science and rationality within the process of execution.

What does this mean for me?

Essentially, it means think about your design and the amount of resting space you have. Since we are talking about interfaces, obviously you should go through the process of using the interface multiple times; if anything stands in your way of using the interface, it’s probably time to shift some things around. Don’t be afraid to space out your body copy and headers. Use this breathing room to section different portions off from other portions (for instance, navigation from content, and content from sidebar, or whatever is applicable).

On the other side of the coin, if the white space you are incorporating detracts from usability, it is probably time to reconsider; for instance, body copy line spacing shouldn’t be so large that you aren’t able to differentiate between a new paragraph and a new line. Use white space, as we have already said, to your advantage, not for your to-do checklist.

Rule of Thirds

One easy way to ensure a good use of white space is by employing the design principles of composition; allow your design to follow the rule of thirds or the golden ratio, both of which are very common and effective design practices that apply a little bit of science to the art. The rule of thirds splits the composition into nine equal parts (separated by two horizontal and two vertical lines). The golden ratio is based on many historically congruent sources, including the human body; it has been used for the design of sculpture and the progression of many types of art.

Read the White Space

Of course we have talked about visual white space; but what about textual white space? When people read, they look for resting points in the dialogue. This, in a way, can be considered white space. Be sure to allow your creative vocabulary its time to shimmer AND its time to stay sheathed. Not everyone necessarily appreciates your large vocabulary, much less do they care to take the time to read your seventeen-syllable words and overly-complex sentences. Take a breath! Haven’t we already said this?

If all else fails…

Sometimes in design, we realize that every tip we heard about “best practices” doesn’t apply to a particular job. As much as it pains me to say it, there are times when white space just simply doesn’t have its place in the design (newspapers are a perfect example for those of you print and page layout designers). Consider the psychological implications of the design, always. Understanding your audience is the first step to success, and ultimately is the most important concept in interface design.

Sponsored by

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

Big Goal Number Two

As an interface designer, you are often given assignments with one big goal in mind: make this interface as usable as possible.

Now, ancillary to this goal are a lot of “mini-goals”, such as maintaining a holistically congruent branding image, communicating certain messages, conveying certain feelings, developing for certain platforms, and the list goes on.

But what if we have been missing out on big goal number two?

Let’s take a step back, as many of us probably often forget to do, and look at the reality of our situation.

On a daily basis, we as interface designers don’t have the task of designing an interface that targets everyone in the entire world (such as Google, eBay, Amazon, or Yahoo). Instead, we are given a target audience to build an interface for. This usually takes a backseat as one of our mini-goals, but we need to change our thinking. This needs to become our Big Goal Number Two.

“Target audience” is a pretty familiar term for most interface designers. Most of us know that we have to understand demographics and psychographics of the target audience, and study them in both quantitative and qualitative ways. We know that we should take into consideration all of the data we gather about the target audience in order to build our specific interface, and so on and so forth…

The Principle of Disagreeable Design

What we often forget to realize is that while we are designing for a specific group of people, we are effectively designing against everyone who is left over. What this means is that you are no longer designing with the “accidental audience” in the back of your mind. The target audience becomes the only focus, and therefore you estrange the rest of the world. This is an important principle to understand, for one simple reason.

Designing for an elite group is more effective!

Okay, so of course, you build your rules and boundaries around that ever-so-important target audience. But without the Principle of Disagreeable Design, you wouldn’t really be able to commit to that group completely. You still employ your overarching “best practices” and ideas that are rooted in the status quo’s opinion of what is usable, “good” design, or any of a number of other adjectives we use to describe our somewhat shaky “objective” design standards. Sometimes these shaky standards are the cause for a compromise when it comes to Big Goal Number Two, and we don’t connect with our target audience as efficiently.

But what happens when you take a daring leap towards an elite group that rejects almost everyone in the whole world? In fact, it DOES reject everyone except your target audience (the elite group)? That same daring leap that rejects an enormous number of people, as a tradeoff, very closely knits you as the communicator to your target audience.

That leap may be the difference that your interface needed to go from functional to awesome.

Note: I know what you’re thinking. Don’t take me out of context here and say that “that crazy editor at Fuel Your Interface is an interface-design-usability-relativist!” (Okay, let’s face it… none of us are that dramatic… I hope). Of course, there are almost always some things we retain as understood musts. For instance, text that is meant to be read must be able to be read. These are the obvious ideas.

Why does this work?

Tribes, by Seth Godin; Published by Portfolio Hardcover, 2008

Web marketing guru Seth Godin discusses this idea in his book, Tribes (check it out here). Seth’s big idea is that everyone belongs to at least one tribe, and almost certainly to more than one tribe. Each of our tribes have distinguishing characteristics that set them apart from other tribes. These have been referred to as “sub-cultures”, “sects”, and, in our case, “target audiences.” What is it about your target audience tribe that sets them apart from every other tribe? What are their defining characteristics? Do they have quirks or a specific language and terminology that is unique to only them (can I get a shout out from the Star Trek fanatics!)? Do they have a corporate emotional connection to a certain object, animal, idea, or even person? Maybe they all wear a purple shirt on a certain day of the year, or perhaps they are committed to going environmentally “green”. Asking these questions will push you towards taking the leap that will knit you closer with your target audience (while unashamedly rejecting everyone else).

It works because this tribes psychology goes beyond the simple process of categorization of people. People find a sense of belonging within a tribe. If everyone was allowed to be a part of every tribe, there would be nothing special about being a part of it. So, tribes allow only those who subscribe to their particularities to “join,” though the process of joining is rarely formal.

So, in the same way, if everyone uses your interface, what’s so special about using your interface? Instead, very acutely pursue your target audience. This will, in the end, be the most effective way to achieve BOTH of your big goals.

Conclusion

In conclusion, it should be noted that this in no way means that you should reject outsiders directly or textually; this article, rather, is to help you realize the value in rejecting traditional practice if it means a more accurate and efficient communication to the people that matter: your target audience. They are by far the most important objective, even if focusing on them means that you end up estranging the “accidental audience”.

Sponsored by

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

Mistake #1: Waiting

You’ve done countless hours of studying. You’ve visited hundreds of tutorials and spent hours in classes and conferences. You’ve heard, read, and practiced the best practices, and you know Photoshop shortcuts like the back of your hand. You can quote every line of jQuery, and you could reproduce every Flash site on the FWA. You can type 90 words per minute. You know a lot. So, you’ve made a few interfaces, and you’ve posted your stuff online on Behance, Flickr, or even your own online portfolio. This is the important part, ladies and gentlemen: now what?

The mistake most people make is simply sitting back and waiting. Even if your work is top-notch, and you eventually are hired, there is no positive motion that happens as a result of waiting. So, what do you do? Now what? This happens often with freelancers at the beginning of their careers. They get a little bit of work under their belts, and then sit back and wait on customers or employers to come their way; this is one of the worst steps for your career for many reasons. First of all, you are not guaranteed that anything will happen. Secondly, most clients and employers would much rather see someone who is active in their field and informed about the latest aspects of that field than someone who is, essentially, a “has-been.” In most other occupations, a “has-been” is one that is from years past; however, in professional media, a “has-been” can be someone who is just a few months out of the loop. So what are a few ways to stay active in interface design?

• Do mock jobs
• Involve yourself in a community of other designers and developers, and offer advice or help.Note: A good way to do this is through Twitter, Facebook, and other social networks. Also, by leaving comments here on the Fuel Network sites! Be sure to follow FYI on Twitter @fuelinterface, and feel free to follow me personally as well @jcutrell
  
• Take old designs and improve on them.
• Work for free (for non-profit companies, friends, etc.)Note: Be sure that working for free will not affect the quality of the product you release!
• Explore new facets of your occupation, or cross over into another practice to supplement your interface design skills. For instance, try out typeface design or art illustration.

Mistake #2: Ignoring The Garmon Principle

Don’t worry if you haven’t heard of The Garmon Principle. Considering it was invented about 30 seconds ago, you’re probably not the only one. Chris Garmon is a good friend of mine that recently sat me down and changed my thinking about all of my professional media work. Garmon isn’t necessarily a design professional, nor could he write more than a line of HTML.

I showed him an interface idea I was working with at the time. I was very excited; it used some jQuery effects and Ajax loading that I had just learned, and the CSS and HTML were both on-spot. It was designed with intentional design theory, and it was ready to have content infused. As I showed him the product, his face disfigured a little bit, and he said, “it’s not really that great.” In the back of my mind, I thought, “Oh yes it is. You have no clue what it took to make this do that, and that do this. And the jQuery is cool, and the black and white theme is really in…” But then I realized, you know… it really isn’t that great. In fact, it’s nothing but a waste of time. Then, Garmon went on to tell me what I have come to know as The Garmon Principle.

The first thing you should do is close your laptop, put away your cool bag of tricks, and think. Think, “What would be the perfect site for this? What would it look like? If there were no boundaries, what is the coolest thing, or the most functional way, to make this happen?” Also think, “What will make this worth existing as much or more than the next guy’s interface?” Once you have decided what the best possible solution would be, figure out how to do it. If there is something in your original idea that just simply isn’t possible, then amend it. “Re-idea,” if you will. But never, ever, EVER sit down and start doing things simply because you know how to do them. Because the truth is, no one really cares how much you know about coding or development. The people who are looking at this site aren’t thinking about what it took to make it, or how many advanced lines of code you wrote. They’re thinking about how it is now, as a whole.

All Garmon was telling me was that the concept is far more important than the method. The function trumps form. It is easy for us, as designers and developers, to get caught up with our practical coding knowledge; but the truth is, it’s not a bunch of little things that make a site good. It is, almost infallibly, one thing. Now, what that one thing is, you have to figure out before you ever type a single line of code or push a single pixel.

Mistake #3: Spreading Too Thin

This is the most often committed mistake in every professional field. Without going into too much detail, we can understand this concept fairly easily. In international trade, different countries trade a limited number of goods that they have the comparative advantage creating. For instance, the United States isn’t nearly as good at producing bananas than a tropical island would be, and the tropical island isn’t at good at producing commercial aircraft as the United States is. Therefore, for a certain number of airplanes, the United States can trade the tropical island for a certain number of bananas. The reason this works well is because each country is doing what it does best, thus being as productive as possible.

The same concept can be applied to people! If you are really great at designing ecommerce or photo gallery sites, then don’t be afraid to focus solely on ecommerce or photo gallery sites. By doing any other kind of interface design, you will be taking away time from the thing you are best at, and therefore you are not being nearly as productive as you could be. This can be detrimental to your career; If you were free to focus on what you do best, you would produce your best possible product.

Note that this doesn’t mean, however, that you completely ignore every other practice surrounding your field. Sometimes, other practices supplement your practice. An example of this, for many designers, is photography. Practicing some in photography will increase your knowledge and understanding of color, 3D space, composition, and many other important concepts that cross over into your practical knowledge of design. The important thing is that you focus mostly or completely on what you are best at.

Conclusion

In conclusion, we can be a lot more successful if we avoid these three things. What are some other mistakes you’ve learned from? Comment here, or tell us through Twitter!

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 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)

A lot of us know how to find great textures and throw them into Photoshop and set the layer blending mode to overlay.

But sometimes, this doesn’t give the desired result. In this particular instance, the color in the texture is causing the color in the main composition to look a little off from what I had intended it to look like. The texture itself isn’t having as much of an effect as I’d like for it to on the edges of the composition, but I don’t want it to affect the middle as much either. Also, I’d like it to be a bit more grainy.

All of these things can be achieved right inside Photoshop. To fix the color issue, the first thing we need to do is desaturate the texture. (Shortcut: Cmd/Ctrl + Shift + U)
This removes all hue properties, and leaves only luminance (grayscale) properties.


Now, we want the image to have more of an effect on the edges of the main composition. What we want to do is increase the contrast of the texture in its original form, but also keep another less contrasted version. (We will get to how to make the edges more affected after we bring the texture over onto our main composition.) First, we want to duplicate our layer (Shortcut to duplicate layer: Cmd/Ctrl + J) twice, and delete our background layer. We can name these two new layers “contrasted” and “flat”. Then we will apply Curves to our “contrasted” layer. Make sure this layer is on top, or else you will not see the effects of Curves. (Shortcut for Curves: Cmd/Ctrl+M) The amount of contrast you use will depend on your project, but I usually like to keep quite a bit of mid-tones in textures I use. (See the curve created for an idea of how to increase contrast with Curves.)

We now have our original desaturated texture and our higher contrast texture. we can bring these layers over to our main composition. Select both layers by holding Shift or Cmd/Ctrl and clicking. Now drag from the layers palette of the texture composition into the main document composition.

One of the first things we want to do at this point is make both of our texture layers smart objects. This basically will allow us to scale them without doing irreversible damage to the resolution.

Next, we want to set both layers to overlay for the time being, and turn off the “flat” layer. We can immediately see the difference that adding contrast has made. But again, we are looking for the texture to be a bit more grainy, so we are going to scale down the “contrast” layer so that more detail can be seen. Transform the layer, and zoom out until you see the edges of the texture. This could mean zooming out quite far, depending on how high resolution your texture is. Holding Opt/Alt + Shift, you can scale the texture layer towards the middle. You then can zoom in and take a look at how the texture is affecting the composition before you accept the transformation. Once you are satisfied with the look of the texture, press Enter to accept the transformation.

We will now add a layer mask in order to remove some of the texture from the center of the composition. Unlink the layer from the mask by clicking the chain between the mask and layer. (This will allow us to move the texture beneath the mask if we decide we want to scale it again, etc).

Take a basic brush with a fairly low hardness between 10-20%, and set the foreground color to black. Make sure that the mask is selected, and paint in the middle of the composition to remove parts of the texture. If you remove more than you intended, simply change the foreground color to white and paint over that portion again to restore it. This stage is very subjective, and can’t really be covered step-by-step; the main idea here is that you can use the mask to create changes, but that also you can undo those changes if you need to.



Once you get the contrast texture the way you like it, turn off the layer for now. Turn on the “flat” layer. If it doesn’t seem grainy enough, scale it in the same manner as the contrast layer was scaled. This will be the texture we apply to the inner portion of the composition, so that it doesn’t look too “cold” in comparison to the higher contrast edges.

Now duplicate the layer mask from the contrast layer by Opt/Alt-Clicking and dragging it. With the layer mask selected, invert it. (Shortcut: Cmd/Ctrl+I)
Now turn on all layers.


The “flat” texture towards the middle is a bit too strong for what we are going for; change the opacity of the layer from 100% to 30-50%. Do the same for the “contrast” layer if it is too strong. This is based on taste as well.

Adjust the masks and opacities until your desired affect is achieved. It is better in most cases to use textures in a subtle manner rather than as strong as possible. In this case, I ended up bringing the opacity of both texture layers down even further, and adjusting the masks slightly. The final product again is a matter of taste; this article’s purpose is to show you the flexibility that photoshop offers with regard to textures; now, instead of simply dropping a grunge texture onto a file, you can refine your use of textures.

Other tips:

• Only use textures if it makes sense to use them. If the interface doesn’t call for grunge elements, don’t use them.
• Expand your texture library to include color-based textures, fabric and paper, liquid, wood, metal, grunge, lens blur, lights, and many of thousands of other textures by researching for free texture sites online. The texture used in today’s examples is part of Andrew Kramer’s Riot Gear, which you can find here. Other great places to get textures include Lost and Taken, Bittbox, and CG Textures.
• Don’t be afraid to create your own textures! Sometimes, you can’t find the best one to suit your particular project. Pull out that digital camera, or borrow your buddy’s, or use a scanner.
• Contact FYI through Twitter @fuelinterface if you have any questions! We love to help.

Sponsored by

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

Immersive vs Casual Gaming

When the game Myst was released in 1993, it received wide acclaim for its innovative visuals and gameplay. A large part of what made the game so memorable was its high level of immersion, a point that the developers themselves made sure to drive home in the instruction manual:

The key to Myst is to lose yourself in this fantastic virtual exploration, and act and react as if you really were there.

With no toolbars or interface components aside from the hand cursor, Myst was about as immersive as a computer game could be in its day.

With Myst and its sequels, little was offered in the way of instructions, aside from suggestions to turn the lights down and the volume up. Ideally, such an experience doesn’t allow for visible taskbars and flashing LEDs from equipment in the room. The creators of Myst knew their game was to be experienced with 100% attention given to the game itself. Most popular computer and console games use this same mentality, that players want to place themselves in another world through beautiful imagery, rich sounds and even vibrating controllers.
Casual games, on the other hand, are not necessarily meant to demand the player’s full attention. Solitaire and puzzle games usually don’t try to wow the player with stunning graphics, fullscreen gameplay or background music, and can be paused and tucked away when something else comes up. Games like these are designed with the assumption that users will play them in short bursts, during breaks or to kill time, and the lack of features and options reflects this assumption.

Multitasking vs Single-Focus Computing

Since the dawn of multitasking operating systems, most applications no longer take up the entire screen, may be shuffled behind other windows and minimized to take no real estate on the screen at all. More recent versions of the Mac and Windows operating systems have become more immersive than previous releases, each one attempting to become a gratifying experience in and of itself, making use of animated menus, customizable widgets and integration with internet technologies to the point that some users may get all that they need from the operating system alone.

But with more immersive operating systems come less immersive applications. As operating systems strive to draw more attention, individual programs lose their ability to hold a user’s focus. How easy is it to pay full attention to a document you’re working on when an icon keeps jumping into the corner of the screen, trying to tell you about an unrelated file error that just can’t wait for you to acknowledge it? Or finish a round of Minesweeper when Windows keeps bugging you to accept or deny access to a program you left running?

With desktop widgets like these, computer interfaces are focusing more on the operating systems themselves. Source: apple.com

While the lines blur a little more each day, operating systems are still primarily a starting point for launching other applications. But the more immersive they become, the more distracted users will be when trying to focus on a particular application. This is one reason some users choose classic desktop themes, turn off animated windows and transparencies that use more resources and demand more of the user’s attention. Sure, it’s a great way to show off what a computer can do, but more often than not, we look to the programs we run to create our computing experience, not the operating systems that launch them.

Flashy vs Simplistic Websites

A decade ago, Flash sites began popping up all over the internet. While a large number of them launched splash animations right off the bat, a good number of more user-conscious sites allowed two options: a static HTML site for slower connection speeds and processors, and a more immersive, bandwidth- and CPU-heavy Flash site, for users who wanted the full online experience and were willing to wait for it. The ability to choose between the two options meant designers were putting extra effort into their sites, understanding that not all users wanted the immersive experience Flash has to offer.
This splash page gives the user a choice between a static HTML or animated Flash site. Source: aikido-tessen.ee

The Nielsen Norman Group, whose website looks like it was last updated when AOL still shipped on floppy disks, is designed that way for a very specific reason: the group’s founders, Jakob Nielsen and Donald Norman, believe their site (and in most cases, the rest of the internet) is not meant to be an immersive experience, but rather a tool for storing and retrieving information. Approaching the design of their site from this viewpoint makes an assumption that the user will want to find what he or she is looking for in the fastest, least fettered way possible. While there are likely those who would want a little more style to their online experience, the NN Group prefers to err on the side of functionality rather than immersion. A wise choice when you think about every website you’ve visited that forces your browser to full screen and blares music through your speakers. There are worse alternatives to being bland.

The Nielsen Norman Group website appears dull in comparison, but follows strict usability guidelines for presenting information. Source: nngroup.com

Companies such as real estate and car dealerships can get away with more immersive websites. After all, their products are fully immersive experiences in themselves. There’s a good chance a user will want to know what it’s like to sit in the seat of a new car, or stand in the living room of a new house and get a feel for what it would be like to live there. It would only be appropriate to try and portray those feelings as effectively as our current technology will allow.

Virtual Reality vs Augmented Reality

Virtual Reality was on everyone’s tongue near the end of the last century. Science fiction phenomena such as Tron’s Light Cycles and Star Trek’s holodeck had us excited to lose ourselves in fantastic make-believe worlds, while Nintendo’s Virtual Boy reminded us that we had a while before the dream would fully take shape. We’re still waiting for an acceptable immersive virtual experience, but VR has recently taken a backseat to a different form of technology-assisted experience.
Augmented Reality serves to enhance the user’s perception of the real world, not ignore it completely in exchange for a fictitious one. With AR, developers and users alike lower their desire for a fully immersive experience, and the tool that has become the most popularly utilized AR device–the mobile phone–is helping us realize the benefits of a lower degree of immersion.

With Layar, an AR app for Android, icons depicting locations such as this restaurant are superimposed over an image of the real world as seen through the phone’s camera.

While VR commonly relies on goggles, a large helmet or an entire room to immerse the user in a virtual world, AR skips the quest for illusion and aims instead to enhance the physical world with useful information. Developers of AR know the benefits of embracing and functioning within the real world, and since the most commonly used AR devices are handheld, the user is not as physically immersed in the equipment as would be the case with VR goggles or a helmet. A mobile phone can be moved independently of the user’s eyes, shared with other users and put away easier than a pair of glasses, and the form factor of the phone makes it more of a portable window to the augmented world, something that may be used casually and pocketed until it’s needed again. This lower level of immersion becomes a great advantage to fully immersive virtual reality applications, allowing the user to operate in the real world rather than escape from it.

Conclusion

The best interfaces are designed with a good understanding of the real-life context in which they will be used. It’s important to determine early on whether your website or application will be used alongside others or receive the full attention of its user.
When tailoring your design for the appropriate level of immersion, it’s important to keep a few things in mind:

• Survey users to find out where and how they would use your product or website.
• Animations and sounds make for a more immersive experience.
• Less immersive interfaces don’t need to be boring. Rounded edges and gradients can spice up any application, no matter how simplistic.
• Don’t let pride get in the way of your design. If surveys and user testing conclude that most users will expect a non-immersive experience, give them what they want. Demanding that users focus on your product and nothing else only works when your users are already willing to do so.
• If your interface is meant to be fully immersive, prime your users first. Ease them into the experience with examples and tutorials, if possible.
• When you feel some users would want a more immersive experience than others, or you simply can’t anticipate which one would be more appropriate, offer both.
• After the product is released, run tests and surveys again. Users will be able to provide much more accurate data once they’ve spent some time using it.

Above all, remember that your users ultimately decide how immersive an experience they’re looking for with every product they use. If a product doesn’t conform to those expectations, chances are they will stop using it before changing their lifestyle to accommodate it. Products that show understanding and empathy for the user experience will be much more welcome in a user’s life than products that don’t.

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)

Make no mistake, designing a website in an F-shaped pattern is not only important, it is crucial. “Mr. Usability” himself, Jakob Nielsen, shows us that users view websites in an F-shaped pattern consistently across websites. There are websites that follow an F-shaped pattern, and there are those that most definitely do not. Then there are those times web designers don’t quite hit the nail on the head. For we UI afficionados, the culprits are easily spotted right away (in any given order and combination): clutter, E/T/I instead of F, or even the infamous mirrored F.

So today we take a moment honor just a few of these beautiful atrocities. Let’s delve right in, shall we?

Style Birmingham

Talk about overload, albeit gentle. Style Birmingham is actually a light sampling of F-gone-wrong. Its modern sense of style seems like it should be minimalist meets fashionista, but that message evidently wasn’t echoed to the web design team. This website suffers from a fairly common trend in websites as of late: it tries to accomplish entirely too much on the front page. Having a few samples from each category is a neat idea, but innovators in magazine-style layouts have gotten apparently lazy. Let’s step it up a notch, people.

Kosh Creative

Again, a magazine-style layout, but this time it’s obviously blog-inspired. Kosh Creative employs some neat ideas on their website, though the left-side menu appears to be navigation at first; users might find themselves quickly let down when it’s actually just an animated services banner. My main concern? Columns beget columns beget columns. Word to the wise: if you want to widget-ize your site, do so sparingly. Think of it this way: every time you split a load-bearing beam, its structural integrity lessens; just think of your columns & patterns as load-bearing, as well. Every time you force users to make binary choices about the more salient column, you take them one step further away from your load-bearing F pattern.

Modal Inc.

Ahh… the infamous mirrored F-shaped pattern. A truly rare specimen, indeed. Because of the smart use of white space and clutter containment, I don’t personally think Modal’s site suffers much from the mirrored pattern. On the other hand, the navigation menu is left-situated, and as such the user is forced to move their mouse against an F pattern, and much more than they’re used to in general. A simple relocation of the menu to the right might solve this.

The F-shaped pattern is by no means an end-all-be-all solution to make any site great. The only solution to that ever-changing equation is a talented, dedicated designer (or team of designers). Me, I try to encourage all my clients to educate themselves at least a bit in cardinal design rules like the F-shaped pattern. It almost always makes the process go more smoothly for both the vendor and the client.

Sponsored by

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