Before the iPhone came out, phones looked like this:

Different shapes and sizes. Flip phones and sliders. Candybars and decks of cards. Lots of hardware buttons. A hundred takes on the D-pad. A small screen (or two). This is what mobile phones looked like from the time I bought my first in the late 90s till early 2007.

But since the iPhone debuted, they all look like this:

They're all rectangular with a screen that fills up nearly the whole front face of the phone. Some still have physical keyboards, but that's a vestigial tail that will certainly fall off at some point in the future. All have only a few hardware buttons. All have nearly the same dimensional proportions. All have nearly the same thickness, give or take some tenths of an inch. All have nearly the same weight and feel in your hand.

Why is this?

Because the future of mobile hardware design is for it to fade away completely and have the focus be the OS and apps it runs.

Nokia's Windows Phone 7 Concept

Engadget recently posted a concept design showing a new Nokia phone that would run Windows Phone 7. Predictably, it looks like an iPhone and every other smartphone that's been manufactured in the past year or two: rectangular, a huge screen, small outside bezel, thin.

It looks good, or, I should say, the tiny amount of surface area not dedicated to the screen looks good. It will probably feel good in a person's hand, but what phones don't feel good in a person's hand nowadays? They all do, because they're all designed to look the same. They're all designed to look like the iPhone. A glowing rectangle surrounded by a thin strip of material that sends data to the rectangle.

The Future Of Mobile Hardware Design

I've looked into the future and have seen what mobile devices will soon look like. I know, it sounds impossible, but here it is.

All screen, no bezel, no chrome, just interface.

Look at the mobile hardware trends in the last few years: the screens are staying about the same size but the hardware around them is shrinking. Thinner phones, thinner bezels, more focus on the screen. At some point in the future all we'll have is the screen and the software that it's running because that's all that matters.

The iPhone started the trend of the focus being on the software. Your phone becomes the app that it's running. How many people focus intently on the bezel around the screen while they're using their phone? No one does. You stare at the screen. As technology advances and miniaturizes, everything will get faster and smaller. The hardware will fade away and software will be the only thing people care about.

And it's all because of the iPhone.

About 4 years ago I heard Jim Coudal give the opening remarks at SXSW Interactive and his words struck a chord with me.

He spoke of a changing industry where "creatives" were no longer stuck in the wacky room at some large corporate entity but were now responsible for crafting products from beginning to end. Forget consulting work, now anyone could create a thing and sell it on their own. Illustrators learning sales forecasting. Designers learning media buying. Writers building widgets.

How does someone learn new things like this?

By being curious.

The CEO of a company I worked at in the 90s was talking to me about their new website I had built. We talked about some tagline and copy adjustments and out of the blue he fired up an FTP client and dove into the HTML. He had 20 years of experience in sales and didn't know RAM from ROM, but he told me he read some web design tutorials and "knew enough to be dangerous."

He learned something new, on his own, just because.

Learn New Things

You've heard this story before: a "product guy" has an idea but can't do anything with it unless he finds a designer and a coder to make it a reality. Or how about this one: a designer has the grandest ideas and mockups for iPhone apps but has never written one line of code. Or a coder that makes interfaces that look like a FrontPage template. Or user experience professionals who can only make wireframes, not real designs.

What's the common thread throughout all these examples? A lack of curiosity.

Just because your business card says you do X doesn't mean you can't dabble in A, B, C or Y in your spare time. Designers should learn how to code a bit. Hackers should learn the fundamentals of good design. Business guys should learn enough about technology that they don't sound uninformed. Technology folks should learn about finance and economics. Web designers should learn the basics of print design. Print designers should learn how to make a webpage. Marketers should have a deep knowledge of how their products work.

If you do something and then hand it off to someone else, learn about what the next person is actually doing. Talk to them, read books, subscribe to blogs, be curious. Learn in your spare time. Have a side project that makes you uncomfortable. Force yourself to figure things out. Get just enough knowledge to be dangerous.

How I Learned About Design

I've been designing professionally for many years but I have no classic design training. I drew some things as a kid but never considered myself an artist. I learned and experimented and played and worked for many years to develop good design taste and it wasn't an overnight thing.

Here's how I taught myself about design: I read every single design book in my college's bookstore. I'm not lying. There was a huge, comfy, leather chair in the bookstore and there were 4 gigantic shelves filled with design, art and typography books. Every day after class I'd stop in, pick up a few books where I had left off, and retire to the comfy chair to poke through them. I didn't read every word, but I did look at every page and tried to absorb what I was seeing. It took the entire fall semester but I finished the entire section.

And when I was done I started reading programming books. And science books. And math books. And business books. And anything else that looked interesting.

Because I was curious.

About 4 years ago I heard Jim Coudal give the opening remarks at SXSW Interactive and his words struck a chord with me.

He spoke of a changing industry where "creatives" were no longer stuck in the wacky room at some large corporate entity but were now responsible for crafting products from beginning to end. Forget consulting work, now anyone could create a thing and sell it on their own. Illustrators learning sales forecasting. Designers learning media buying. Writers building widgets.

How does someone learn new things like this?

By being curious.

The CEO of a company I worked at in the 90s was talking to me about their new website I had built. We talked about some tagline and copy adjustments and out of the blue he fired up an FTP client and dove into the HTML. He had 20 years of experience in sales and didn't know RAM from ROM, but he told me he read some web design tutorials and "knew enough to be dangerous."

He learned something new, on his own, just because.

Learn New Things

You've heard this story before: a "product guy" has an idea but can't do anything with it unless he finds a designer and a coder to make it a reality. Or how about this one: a designer has the grandest ideas and mockups for iPhone apps but has never written one line of code. Or a coder that makes interfaces that look like a FrontPage template. Or user experience professionals who can only make wireframes, not real designs.

What's the common thread throughout all these examples? A lack of curiosity.

Just because your business card says you do X doesn't mean you can't dabble in A, B, C or Y in your spare time. Designers should learn how to code a bit. Hackers should learn the fundamentals of good design. Business guys should learn enough about technology that they don't sound uninformed. Technology folks should learn about finance and economics. Web designers should learn the basics of print design. Print designers should learn how to make a webpage. Marketers should have a deep knowledge of how their products work.

If you do something and then hand it off to someone else, learn about what the next person is actually doing. Talk to them, read books, subscribe to blogs, be curious. Learn in your spare time. Have a side project that makes you uncomfortable. Force yourself to figure things out. Get just enough knowledge to be dangerous.

How I Learned About Design

I've been designing professionally for many years but I have no classic design training. I drew some things as a kid but never considered myself an artist. I learned and experimented and played and worked for many years to develop good design taste and it wasn't an overnight thing.

Here's how I taught myself about design: I read every single design book in my college's bookstore. I'm not lying. There was a huge, comfy, leather chair in the bookstore and there were 4 gigantic shelves filled with design, art and typography books. Every day after class I'd stop in, pick up a few books where I had left off, and retire to the comfy chair to poke through them. I didn't read every word, but I did look at every page and tried to absorb what I was seeing. It took the entire fall semester but I finished the entire section.

And when I was done I started reading programming books. And science books. And math books. And business books. And anything else that looked interesting.

Because I was curious.

Ever wondered what design patterns are? In this article, I’ll explain why design patterns are important, and will provide some examples, in PHP, of when and why they should be used.

What are Design Patterns? Design patterns are optimized, reusable solutions to the programming problems that we encounter every day. A design pattern is not a class or a library that we can simply plug into our system; it’s much more than that. It is a template that has to be implemented in the correct situation. It’s not language-specific either. A good design pattern should be implementable in most—if not all—languages, depending on the capabilities of the language. Most importantly, any design pattern can be a double-edged sword— if implemented in the wrong place, it can be disastrous and create many problems for you. However, implemented in the right place, at the right time, it can be your savior. There are three basic kinds of design patterns:

structural creational behavioral

Structural patterns generally deal with relationships between entities, making it easier for these entities to work together. Creational patterns provide instantiation mechanisms, making it easier to create objects in a way that suits the situation. Behavioral patterns are used in communications between entities and make it easier and more flexible for these entities to communicate. Why should we use them? Design patterns are, by principle, well-thought out solutions to programming problems. Many programmers have encountered these problems before, and have used these ‘solutions’ to remedy them. If you encounter these problems, why recreate a solution when you can use an already proven answer? Example Let’s imagine that you’ve been given the responsibility of creating a way to merge two classes which do two different things based on the situation. These two classes are heavily used by the existing system in different places, making it difficult to remove these two classes and change the existing code. To add to this, changing the existing code requires that you’ll also need to test any changed code, since these sorts of edits, in a system which relies on different components, almost always introduce new bugs. Instead of doing this, you can implement a variation of the strategy pattern and adapter pattern, which can easily handle these types of scenarios.

<?php class StrategyAndAdapterExampleClass { private $_class_one; private $_class_two; private $_context;

public function __construct( $context ) { $this->_context = $context; }

public function operation1() { if( $this->_context == "context_for_class_one" ) { $this->_class_one->operation1_in_class_one_context(); } else ( $this->_context == "context_for_class_two" ) { $this->_class_two->operation1_in_class_two_context(); } } }

Pretty simple, right? Now, let’s take a closer look at the strategy pattern.

Strategy Pattern

Image courtesy of http://cioinnervoice.wordpress.com

The strategy pattern is a behavioral design pattern that allows you to decide which course of action a program should take, based on a specific context during runtime. You encapsulate two different algorithms inside two classes, and decide at runtime which strategy you want to go with.

In our example above, the strategy is based on whatever the $context variable was at the time the class was instantiated. If you give it the context for class_one, it will use class_one, and vice versa. Cute, but where can I use this?

Imagine that you’re currently developing a class which can either update or create a new user record. It still needs the same inputs (name, address, mobile number, etc.), but, depending on a given situation, it has to use different functions when updating and creating. Now, you could probably just use an if-else to accomplish this, however, what if you need to use this class in a different place? In that case, you’ll have to rewrite the same if-else statement all over again. Wouldn’t it be easier to just specify your context?

<?php class User {

public function CreateOrUpdate($name, $address, $mobile, $userid = null) { if( is_null($userid) ) { // it means the user doesn't exist yet, create a new record } else { // it means the user already exists, just update based on the given userid } } }

Now, the “usual” strategy pattern involves encapsulating your algorithms inside another class, but in this case, another class would be wasteful. Remember that you don’t have to follow the template exactly. Variations work as long as the concept remains the same, and it solves the problem.

Adapter Pattern

Image courtesy of http://www.uxcell.com

The adapter pattern is a structural design pattern that allows you to repurpose a class with a different interface, allowing it to be used by a system which uses different calling methods.

This also lets you alter some of the inputs being received from the client class, making it into something compatible with the adaptee’s functions. How can I use this?

Another term to reference an adapter class is a wrapper, which basically lets you “wrap” actions into a class and reuse these actions in the correct situations. A classic example might be when you’re creating a domain class for table classes. Instead of calling the different table classes and calling up their functions one by one, you could encapsulate all of these methods into one method using an adapter class. This would not only allow you to reuse whatever action you want, it also keeps you from having to rewrite the code if you need to use the same action in a different place. Compare these two implementations. Non-Adapter Approach

<?php $user = new User(); $user->CreateOrUpdate( //inputs );

$profile = new Profile(); $profile->CreateOrUpdate( //inputs );

If we needed to do this again in a different place, or even reuse this code in a different project, we would have to type everything all over again. Better That’s opposed to doing something like this:

<?php $account_domain = new Account(); $account_domain->NewAccount( //inputs );

In this situation, we have a wrapper class, which would be our Account domain class:

<?php class Account() { public function NewAccount( //inputs ) { $user = new User(); $user->CreateOrUpdate( //subset of inputs );

$profile = new Profile(); $profile->CreateOrUpdate( //subset of inputs ); } }

This way, you can use your Account domain again whenever you need it—plus, you’d be able to wrap other classes under your domain class as well.

Factory Method Pattern

Image courtesy of http://www.lankanewspappers.com

The factory method pattern is a creational design pattern which does exactly as it sounds: it’s a class that acts as a factory of object instances.

The main goal of this pattern is to encapsulate the creational procedure that may span different classes into one single function. By providing the correct context to the factory method, it will be able to return the correct object. When can I use this?

The best time to use the factory method pattern is when you have multiple different variations of a single entity. Let’s say you have a button class; this class has different variations, such as ImageButton, InputButton and FlashButton. Depending on the place, you may need to create different buttons—this is where you can use a factory to create the buttons for you! Let’s begin by creating our three classes:

<?php abstract class Button { protected $_html;

public function getHtml() { return $this->_html; } }

class ImageButton extends Button { protected $_html = "..."; //This should be whatever HTML you want for your image-based button }

class InputButton extends Button { protected $_html = "..."; //This should be whatever HTML you want for your normal button (<input type="button"... />); }

class FlashButton extends Button { protected $_html = "..."; //This should be whatever HTML you want for your flash-based button }

Now, we can create our factory class:

<?php class ButtonFactory { public static function createButton($type) { $baseClass = 'Button'; $targetClass = ucfirst($type).$baseClass;

    if (class_exists($targetClass) && is_subclass_of($targetClass, $baseClass)) {
        return new $targetClass;

} else { throw new Exception("The button type '$type' is not recognized."); } } }

We can use this code like so:

$buttons = array('image','input','flash'); foreach($buttons as $b) { echo ButtonFactory::createButton($b)->getHtml() }

The output should be the HTML of all your button types. This way, you would be able to specify which button to create depending on the situation and reuse the condition as well.

Decorator Pattern

Image courtesy of http://www.decoratorsdarlington.co.uk

The decorator pattern is a structural design pattern which enables us to add new or additional behavior to an object during runtime, depending on the situation.

The goal is to make it so that the extended functions can be applied to one specific instance, and, at the same time, still be able to create an original instance that doesn’t have the new functions. It also allows for combining multiple decorators for one instance, so that you’re not stuck with one decorator for each instance. This pattern is an alternative to subclassing, which refers to creating a class that inherits functionality from a parent class. As opposed to subclassing, which adds the behavior at compile time, “decorating” allows you to add new behavior during runtime, if the situation calls for it. To implement the decorator pattern, we can follow these steps:

Subclass the original “Component” class into a “Decorator” class In the Decorator class, add a Component pointer as a field Pass a Component to the Decorator constructor to initialize the Component pointer In the Decorator class, redirect all “Component” methods to the “Component” pointer, and In the Decorator class, override any Component method(s) whose behavior needs to be modified

Steps courtesy of http://en.wikipedia.org/wiki/Decorator_pattern When can I use this?

The best place to use the decorator pattern is when you have an entity which needs to have new behavior only if the situation requires it. Let’s say you have an HTML link element, a logout link, that you want to do slightly different things to based on the current page. For that, we can use the decorator pattern. First, let’s establish the different “decorations” we’ll need.

If we’re on the home page and logged in, have this link be wrapped in h2 tags If we’re on a different page and logged in, have this link be wrapped in underline tags If we’re logged in, have this link wrapped in strong tags

Once we’ve established our decorations, we can start programming them.

<?php class HtmlLinks { //some methods which is available to all html links }

class LogoutLink extends HtmlLinks { protected $_html;

public function __construct() { $this->_html = "<a href=\"logout.php\">Logout</a>"; }

public function setHtml($html) { $this->_html = $html; }

public function render() { echo $this->_html; } }

class LogoutLinkH2Decorator extends HtmlLinks { protected $_logout_link;

public function __construct( $logout_link ) { $this->_logout_link = $logout_link; $this->setHtml("<h2>" . $this->_html . "</h2>"); }

public function __call( $name, $args ) { $this->_logout_link->$name($args[0]); } }

class LogoutLinkUnderlineDecorator extends HtmlLinks { protected $_logout_link;

public function __construct( $logout_link ) { $this->_logout_link = $logout_link; $this->setHtml("<u>" . $this->_html . "</u>"); }

public function __call( $name, $args ) { $this->_logout_link->$name($args[0]); } }

class LogoutLinkStrongDecorator extends HtmlLinks { protected $_logout_link;

public function __construct( $logout_link ) { $this->_logout_link = $logout_link; $this->setHtml("<strong>" . $this->_html . "</strong>"); }

public function __call( $name, $args ) { $this->_logout_link->$name($args[0]); } }

We should then be able to use it like so:

$logout_link = new LogoutLink();

if( $is_logged_in ) { $logout_link = new LogoutLinkStrongDecorator($logout_link); }

if( $in_home_page ) { $logout_link = new LogoutLinkH2Decorator($logout_link); } else { $logout_link = new LogoutLinkUnderlineDecorator($logout_link); } $logout_link->render();

We can see here how we are able to combine multiple decorators if we need them. Since all the decorators use the __call magic function, we can still call the original function’s methods. If we assume that we are currently inside the home page and logged in, the HTML output should be:

<strong><h2><a href="logout.php">Logout</a></h2></strong>

Singleton Pattern

Image courtesy of http://intoxicologist.wordpress.com

The singleton design pattern is a creational design pattern which makes sure that you have one single instance of a particular class in the duration of your runtime, and provides a global point of access to the single instance.

This makes it easier to set up a point of “coordination” for other objects that use the singleton instance as well, since the singleton’s variables will always be the same for anything that calls it. When can I use this?

If you need to pass a specific instance from one class to another, you can use the singleton pattern to avoid having to pass the instance via constructor or argument. Imagine that you have created a Session class, which simulates the $_SESSION global array. Since this class will only need to be instantiated once, we can implement a singleton pattern like so:

<?php class Session { private static $instance;

public static function getInstance() { if( is_null(self::$instance) ) { self::$instance = new self(); } return self::$instance; }

private function __construct() { }

private function __clone() { }

// any other session methods we might use ... ... ... }

// get a session instance $session = Session::getInstance();

By doing this, we can access our session instance from different parts of our code, even in different classes. This data will persist throughout all getInstance calls.

Conclusion There are many more design patterns to study; in this article, I’ve only highlighted some of the more prominent ones that I use when programming. If you’re interested in reading about the other design patterns, Wikipedia’s Design Patterns page has a plethora of information. If that’s not enough, you can always check out Design Patterns: Elements of Reusable Object-Oriented Software, which is considered to be one of the best design pattern books available. One last thing: when you use these design patterns, always make sure that you’re trying to solve the correct problem. As I mentioned previously, these design patterns are a double-edge sword: if used in the wrong context, they can potentially makes things worse; but if used correctly, they become indispensable.

It's time to retire the following phrases. They should no longer be used, ever, in any context except derisive mocking:

Fast and easy Putting customers first The Holy Grail of The leading provider of Legendary customer support

Also eschew these words, as devoid of meaning as a yogi's mantra and as useless as a simile that doesn't contribute new information:

Authentic Solution Genuine Powerful Secure Simple Innovative Insight Disruptive

These words have been corrupted by those who claim to honor their meaning but do not act accordingly. When a company claims to "put customers first" but then uses "Level 1 support" as a shield to prevent customers from intruding on profits, we realize talk is cheap. When a company claims to have "secure" payments but then 100,000 credit card numbers are stolen, we realize you don't need a permit to claim security. When a company claims to be "innovative and disruptive" but then pitches an idea you've heard ten times in the past month, it reminds us that if you have to say it, it's probably untrue. When 78% of "About Us" web pages claim "the leading provider" of something, we are no longer impressed. Like a song over-played on the radio, like a restaurant over-hyped in the magazines, repetition of even powerful, wonderful phrases can kill them. Oh I know 21% of you stopped reading as soon as you saw that "authentic" made the list, and shot down to the comments section to unleash a scathing missive explaining how "authenticity" is the prime mover of modern marketing, honorable salesmanship, and meaningful relationships. I agree! In fact all these words and phrases should theoretically carry meaning, but theory is for people who don't need to sell $2,600 more software by next Friday so they can make rent. If I had enough hubris to run around christening years, I would declare 2009 The Year of "Authentic." Enough! We get it! I respect the work of all those bloggers and Twitter-ers and lecturers and consultants who drove this word deep into our psyches. Indeed it's a tremendous gift: bringing concepts like authenticity, genuineness, and give-first-sell-later to the traditionally aggressive, non-engaging, selfish world of marketing. The more people honor this new code, the better for us all. Nevertheless, it's time to retire words like "authentic." The misuse is to too widespread, the abuse too deep. So what should you do instead? Be specific. Many of the dead words weren't especially illustrative to begin with. As far as I know, a "solution" just means product and/or service, so the word doesn't add information anyway. Instead, be specific and inspire me.

Instead of "easy" say "so straightforward, you won't need a manual." Instead of "inexpensive" say "just a dollar a day." Instead of "powerful" say "processes 6,253,427 requests daily." Instead of "disruptive" say "72% of our customers say they'll never go back to a normal email client."

Show, don't tell. Some dead words are descriptive, but they don't paint a picture. "Powerful" sounds nice I suppose, but how does that change my life? Showing something in action is more evocative than describing it.

Instead of saying it's fast, show a speed test (especially against competitors). Instead of saying it's easy, have a video demonstrating your tool solving someone's problem in 60 seconds flat. Instead of saying you have eager, responsive, intelligent tech support, put a "chat now" bar on every page of your website. Instead of a bullet-list of benefits, quote actual customers describing your impact on their lives.

Face it. My favorite way to start a sales pitch is to make fun of typical sales pitches. For example: I know you were hoping for a 22-slide PowerPoint deck with our mission statement and company history. I'm really sorry to disappoint! 'Cause I'm just going to start the demo and let you interrupt me with questions. Or: People claim that peer code review tools will do magic things like make your developers smarter or fix existing social problems with the team. Actually, if anything code review can magnify social issues! However, I do believe our tool will save you time and aggravation in these 4 specific ways .... so as we go through the demo, see if you agree. Because you're willing to say what others won't, especially when we all know it's the truth, you've earned credibility. Now folks are more open to your claims — even those that are well-worn. Own it. You can still use an abused word if you totally, 100% own the concept. You can claim "legendary customer service" if you back that with first-ring, human phone service, online chat from your home page, quick-response Twitter monitoring, and 15-minute turn-around time on tech support emails even at 3am on a Sunday. Be sure to communicate all that too, because if you lead with the dead phrase I'll leave before you get the chance to prove it. Be the change you wish to see in the world.   —Gandhi When old ideas become cliché, that's an implicit call for new ideas. This time around, can you lead instead of follow? Of course this is a bit unfair. Quick: Come up with a compelling new philosophy for human interaction and global communication, marketing, sales, and relationships! Yeah it's an unreasonable expectation, and not certainly required, but remember the best ideas often aren't (excuse the clichés) ground-breaking, innovative, out-of-the-box, Earth-shattering epiphanies. Often great ideas are a synthesis of other ideas with just a smidge of novel insight, or just putting into words what others sense but cannot articulate. This is the hardest and most time-consuming way to break out of the mundane, but also the most rewarding. And if you do come up with something, there's a lot of people who will love to help you spread the word. What else? What other phrases should be avoided? What are good alternatives? Leave a comment and join the conversation!

  Color in design is very subjective. What evokes one reaction in one person may evoke a very different reaction in somone else. Sometimes this is due to personal preference, and other times due to cultural background. Color theory is a science in itself. Studying how colors affect different people, either individually or as a group, is something some people build their careers on. And there’s a lot to it. Something as simple as changing the exact hue or saturation of a color can evoke a completely different feeling. Cultural differences mean that something that’s happy and uplifting in one country can be depressing in another.This is the first in a three-part series on color theory. Here we’ll discuss the meanings behind the different color families, and give some examples of how these colors are used (with a bit of analysis for each). In Part 2 we’ll talk about how hue, chroma, value, saturation, tones, tints and shades affect the way we perceive colors. And in Part 3 we’ll discuss how to create effective color palettes for your own designs.Warm ColorsWarm colors include red, orange, and yellow, and variations of those three colors. These are the colors of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.Red and yellow are both primary colors, with orange falling in the middle, which means warm colors are all truly warm and aren’t created by combining a warm color with a cool color. Use warm colors in your designs to reflect passion, happiness, enthusiasm, and energy.Red (Primary Color)Red is a very hot color. It’s associated with fire, violence, and warfare. It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.Red can be associated with anger, but is also associated with importance (think of the red carpet at awards shows and celebrity events). Red also indicates danger (the reason stop lights and signs are red, and that most warning labels are red).Outside the western world, red has different associations. For example, in China, red is the color of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the color of mourning. Red is also associated with communism. Red has become the color associated with AIDS awareness in Africa due to the popularity of the [RED] campaign.In design, red can be a powerful accent color. It can have an overwhelming effect if it’s used too much in designs, especially in its purest form. It’s a great color to use when power or passion want to be portrayed in the design. Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.ExamplesThe dark shades of red in this design give a powerful and elegant feel to the site.The true red accents stand out against the dark red background, and give a powerful and high-end feeling to the site.The very bright red accents on this site give a sense of energy and movement.The dark red on this site, because it’s combined with grunge elements, seems more like the color of blood.Dark red, when combined with white and gray, gives a very elegant and professional impression.Orange (Secondary Color)Orange is a very vibrant and energetic color. In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.Because orange is associated with the fruit of the same name, it can be associated with health and vitality. In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.ExamplesThe bright orange box draws attention to its contents, even with the other bright red elements on the page.Orange is used here in its most obvious incarnation, to represent fire.The dark orange, when set against the lime green, almost acts as a neutral and grounding color here.Orange is used here to give a friendly and inviting impression.The orange accents here add a lot of visual interest and bring attention to the call to action.Yellow (Primary Color)Yellow is often considered the brightest and most energizing of the warm colors. It’s associated with happiness and sunshine. Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war. Yellow is also associated with danger, though not as strongly as red.In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a color for merchants.In your designs, bright yellow can lend a sense of happiness and cheerfulness. Softer yellows are commonly used as a gender-neutral color for babies (rather than blue or pink) and young children. Light yellows also give a more calm feeling of happiness than bright yellows. Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.ExamplesThe bright yellow header and graphics used throughout this site give a sense of energy and positivity.The light yellow is used almost as a neutral in the header here, and combined with the hand-drawn illustrations gives a very cheerful impresison.The bright yellow accents bring attention to the most important parts of this site.The bright yellow sunflower reminds visitors of summer on this site, and combined with the antique-yellow background, it gives a homey and established feeling.The bright yellow header here adds a bit of extra energy to this design.Cool ColorsCool colors include green, blue, and purple, are often more subdued than warm colors. They are the colors of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.Blue is the only primary color within the cool spectrum, which means the other colors are created by combining blue with a warm color (yellow for green and red for purple). Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red. Use cool colors in your designs to give a sense of calm or professionalism.Green (Secondary Color)Green is a very down-to-earth color. It can represent new beginnings and growth. It also signifies renewal and abundance. Alternatively, green can also represent envy or jealousy, and a lack of experience.Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow. In design, green can have a balancing and harmonizing effect, and is very stable. It’s appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence.ExamplesThe extremely muted greens of this site give it a very down-to-earth and natural feeling.The bright green header of this site mixed with the leaf motif gives it a very natural and vibrant feeling.The more olive-toned green of this site gives it a natural feeling, which is very appropriate for the content.The brighter, more retro-looking greens of this site give it a very fresh, energized feeling.Another olive green site with a very natural feeling.Blue (Primary Color)Blue is often associated with sadness in the English language. Blue is also used extensively to represent calmness and responsibility. Light blues can be refreshing and friendly. Dark blues are more strong and reliable. Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived. Light blues are often relaxed and calming. Bright blues can be energizing and refreshing. Dark blues are excellent for corporate sites or designs where strength and reliability are important.ExamplesThe dark blues give this a feeling of reliability, while the brighter and lighter blues keep it from feeling staid.The dark blue gives this a site a professional feeling, especially when combined with the white background. But the lighter blue accents add a bit more interest.The bright, sky blue of this site gives it a young and hip feeling, which is emphasized by the reddish accents.This site combines a range of blues, which gives it a refreshing feeling overall.The light, muted blue of this site gives a very relaxed and calm impression.Purple (Secondary Color)Purple was long associated with royalty. It’s a combination of red and blue, and takes on some attributes of both. It’s associated with creativity and imagination, too.In Thailand, purple is the color of mourning for widows. Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavendar) are considered more romantic.In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.The dark shade used here evokes the royal heritage of purple, which is very appropriate for the Asprey luxury goods brand.The light and medium purples here work well to convey a sense of creativity.The brighter, more reddish purple of this site gives it both a rich and energetic look.The dark purple background here adds to the creative feeling of the overall site.The dark purple accents on this site give a sense of luxury and refinement.NeutralsNeutral colors often serve as the backdrop in design. They’re commonly combined with brighter accent colors. But they can also be used on their own in designs, and can create very sophisticated layouts. The meanings and impressions of neutral colors are much more affected by the colors that surround them than are warm and cool colors.BlackBlack is the strongest of the neutral colors. On the positive side, it’s commonly associated with power, elegance, and formality. On the negative side, it can be associated with evil, death, and mystery. Black is the traditional color of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween and the occult.Black is commonly used in edgier designs, as well as in very elegant designs. It can be either conservative or modern, traditional or unconventional, depending on the colors it’s combined with. In design, black is commonly used for typography and other functional parts, because of it’s neutrality. Black can make it easier to convey a sense of sophistication and mystery in a design.ExamplesThe black accents, mixed with the brighter colors and very dark brown background add an edgier look to the overall design.Black, when mixed with icy blues, looks colder.The black here, mixed with dark grays and lime green, and an overall grungy theme, adds to the edginess of the design.The black accents here add an extra layer of sophistication and modernity to the site.The strong black accents on this site add to the overall sophistication of the design.WhiteWhite is at the opposite end of the spectrum from black, but like black, it can work well with just about any other color. White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day. It’s also associated with the health care industry, especially with doctors, nurses and dentists. White is associated with goodness, and angels are often depicted in white.In design, white is generally considered a neutral backdrop that lets other colors in a design have a larger voice. It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs. White in designs can also portray either winter or summer, depending on the other design motifs and colors that surround it.ExamplesThe white on the Fuelhaus site is used to contrast against the electric blue.White backgrounds are very popular on minimalistic sites, and provide great contrast to black typography.Here, white is used as an accent color, which lightens the overall effect of the site.White combined with gray gives a soft and clean feeling to this design.Again, white used as a background lightens the whole design.GrayGray is a neutral color, generally considered on the cool end of the color spectrum. It can sometimes be considered moody or depressing. Light grays can be used in place of white in some designs, and dark grays can be used in place of black.Gray is generally conservative and formal, but can also be modern. It is sometimes considered a color of mourning. It’s commonly used in corporate designs, where formality and professionalism are key. It can be a very sophisticated color. Pure grays are shades of black, though other grays may have blue or brown hues mixed in. In design, gray backgrounds are very common, as is gray typography.ExamplesLight gray gives a very subdued and quiet feeling to this design.The light gray background here adds to the modern feeling created by the typography.The cooler gray on this site gives a modern, sophisticated feel to the site.The dark gray backround and lighter gray typography lend a decidedly modern look to this design.The wide spectrum of gray shades used in this design combine to give a sophisticated and professional look to the site.BrownBrown is associated with the earth, wood, and stone. It’s a completely natural color and a warm neutral. Brown can be associated with dependability and reliability, with steadfastness, and with earthiness. It can also be considered dull.In design, brown is commonly used as a background color. It’s also seen in wood textures and sometimes in stone textures. It helps bring a feeling of warmth and wholesomeness to designs. It’s sometimes used in it’s darkest forms as a replacement for black, either in backgrounds or typography.ExamplesThe grayish-brown here lends a sense of responsibility and dependability.The orangish-brown here gives a very earthy and dependable feeling.The dark brown used in the background here lends an earthy and steadfast look to the overall layout, and lets the brigher colors in the design really get to stand out.Woodgrain is a popular use of brown, and in this case the warm brown adds some friendliness to an otherwise minimalist site.The grayish-brown background here lends a feeling of stability and down-to-earthness.Beige and TanBeige is somewhat unique in the color spectrum, as it can take on cool or warm tones depending on the colors surrounding it. It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull. It’s a conservative color in most instances, and is usually reserved for backgrounds. It can also symbolize piety.Beige in design is generally used in backgrounds, and is commonly seen in backgrounds with a paper texture. It will take on the characteristics of colors around it, meaning it has little effect in itself on the final impression a design gives when used with other colors.ExamplesThe light tan background here feels young and fresh because of the bright colors around it.The light tan background here lends a more conservative and elegant feeling to the overall design.The yellowish tan background is made even warmer by the orange and brown accents throughout this site’s design.Tan is popularly used as a paper-bag texture, and in its more grayish form as a concrete or stone texture.The beige header background and other accents on the site lend a refined and traditional feeling to the overall design.Cream and IvoryIvory and cream are sophisticated colors, with some of the warmth of brown and a lot of the coolness of white. They’re generally quiet, and can often evoke a sense of history. Ivory is a calm color, with some of the pureness associated with white, though it’s a bit warmer.In design, ivory can lend a sense of elegance and calm to a site. When combined with earthy colors like peach or brown, it can take on an earthy quality. It can also be used to lighten darker colors, without the stark contrast of using white.ExamplesThe ivory background here has a warm quality that’s tempered by some of the cooler colors on the site.The grayish-cream background here is made warmer by the orangish-brown accents.The cream background adds a sense of understated elegance this site would otherwise be lacking.The cream background here reinforces the antique theme that runs throughout the design’s graphics.The ivory combined with other light colors and jewely tones makes this site have a very elegant overall appearance.In Brief…While the information contained here might seem just a bit overwhelming, color theory is as much about the feeling a particular shade evokes than anything else. But here’s a quick reference guide for the common meanings of the colors discussed above:Red: Passion, Love, AngerOrange: Energy, Happiness, VitalityYellow: Happiness, Hope, DeceitGreen: New Beginnings, Abundance, NatureBlue: Calm, Responsible, SadnessPurple: Creativity, Royalty, WealthBlack: Mystery, Elegance, EvilGray: Moody, Conservative, FormalityWhite: Purity, Cleanliness, VirtueBrown: Nature, Wholesomeness, DependabilityTan or Beige: Conservative, Piety, DullCream or Ivory: Calm, Elegant, PurityFurther ResourcesColor Meanings A very thorough guide from About.com on color meanings.Color Wheel Pro: Color Meaning Another excellent guide to color meanings.Color Wikipedia’s entry on color.© Cameron Chapman for Smashing Magazine, 2010. | Permalink | 26 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags:

The underlying secret to beautiful user interface design is realism: making 2D objects on your screen appear to sit in 3D space with volume, surface properties and undulations that might appear in real life. These faux 3D objects have highlights and shadows just like objects on your desk might have, and they have textures that emulate real objects from glass to sandpaper and everything in between. Designing beautiful user interfaces has more to do with the why than the how.

Thinking in 3D

If you're trying to design a realistic-looking user interface element then you have to think about what that object would look like in the real world. What's the easiest way to do that? Look at it from the side. What would a button look like if you viewed it from the side of your monitor? Let's take a look.

Here's a button-shaped panel that's designed to look slightly raised and have a matte surface. It's thin, has a subtle convex shape, and has a small edge that goes around the outside. In a 3D space, the light source would illuminate the edges (slightly brighter on the topmost edge) and would not fully illuminate the bottom slope of the panel past the apex. The object would cast a small shadow since it's not raised off the surface very much.

Pastebot, the new app from Tapbots, has a table view filled with panels that look similar to the one from above. Let's see what it'd look like with multiple panels next to each other.

This looks like a realistic series of panels because of the Top Edge Highlight up against the Inset Shadow which, from the side, would look like this: <. The Inset Shadow appears because the light source does not illuminate that area but then the next panel starts and pokes out, catching the light and showing a highlight.

Design elements that we think look great are usually the ones that look the most realistic, as if they could be in front of us on our desk or on the wall. Paying close attention to how light would strike the object as if it were real is crucial to executing a realistic user interface element.

Designing The Material & Surface

In my internet globe icon tutorial I stressed the impact an object's material has on its overall look. Not accustomed to thinking about an object's material? Get used to it! It adds a new dimension to your design and keeps the object's realism in the front of your mind. If you're designing an interface element and can't immediately name what type of material you're emulating then how can you execute it with perfect realism?

I recently linked to some beautiful Dock replacements for your Mac and many of these illustrate how important the material is to your overall design. In one named Phantom the designer uses two different materials to make the Dock: a textured, grainy surface coupled with a semi-transparent glass edge. The textured surface seems like the back of a notebook pad or a heavily-used wallet whereas the front edge looks like a clear, solid block of lucite.

Apple has been using shiny, gloss-laden user interface elements in Mac OS X for awhile but recently there has been some chatter that they were gearing up for a total interface refresh using matte elements. This full refresh never happened but matte interface elements have been steadily making their way into Mac OS X for a number of years.

With the latest version of iTunes, many user interface elements like scrollbar sliders and buttons have been given the updated, matte look.

Apple's also been using the matte look in some of their Pro software, most notably Final Cut Server. In that application's interface, Apple's removed the gloss from nearly everything and kept convex buttons close to flat with only a slight highlight on the edge. Also, the icons on buttons are not set into the button (accomplished via a thin, white drop shadow on the bottom, a style used throughout Mac OS X) but instead sit on top of the button through the use of a dark drop shadow on the icon. The entire interface pane is slightly raised and looks like dark, textured steel, making the application look like the instrument panel to a high-tech piece of equipment.

Here's an assortment of icons that all show how different surface materials contribute to the overall look of the element:

Next time you want to create something shiny, think about what type of material you're really executing: is it plastic? Glass? Reflective aluminum? If you're designing a matte element, think about just how grainy and textured it should be. Paper or sandpaper? Cardboard or anodized aluminum like an iMac? Is there transparency? Are you emulating something in real life or creating a material that's more hyperrealistic?

Tips For Execution

It's one thing to look at beautiful interface elements, icons and illustrations and quite another to build them yourself. Here are some ways that I build designs using Photoshop.

Noise LayerMatte interfaces are hot right now and one of the key elements of a matte surface is that it's not perfectly symmetrical, it has some texture and grain to it. The easiest way to accomplish this is by creating a layer of one flat color and then using the Noise Filter to add some texture. The key is to keep it subtle and barely noticeable.

Radial HighlightsThe main light source comes from the top but that doesn't mean you can't introduce a secondary light source for emphasis. Below I've created a custom navigation bar for an iPhone application that uses a subtle radial highlight for added dimension and detail. The Blend Mode has been set to Overlay to brighten and saturate the overall color and the transparency has been knocked way down to keep it realistic. Also note the edge highlights to make it look more like a raised surface.

Creative Layer StylesLayer Styles are a key part of my design workflow, I use them for everything. Usually I'll draw a vector object, set the Fill to 0%, and design the entire thing using Layer Styles. Anyone can add a Drop Shadow to something, but if you get creative with Layer Styles then it enables you to really transform what you're working on. For example, you can only apply one Stroke but you can emulate 3-4 different stroke styles through creative use of the Inner Glow and Outer Glow styles if you crank up the Spread and Choke sliders and turn your glows into solid lines.

Once you turn glows and drop shadow styles into solid lines you can achieve a lot of effects with minimal effort. Below are some Layer Styles applied to rounded rectangles that use 1px glows and shadows. The PSD file for the following examples is released under a Creative Commons license: Button Examples

Reality Is Subtle

When something looks "off" in an interface, it probably looks fake, like it wouldn't exist in the real world. How do you keep your interface elements looking real? Here are some things to always keep in mind:

Keep it crisp. No blurry lines or edges. Always adjust opacity. Nothing is totally black or white, dark or bright. A semi-transparent black or white line, glow, shadow or shape goes a long way. Go vector when you can, it can be resized later. Don't Free Transform vector objects: use the Direct Selection Tool to move individual points. Experiment with Layer Styles. White Inner Glow makes shapes pop. Use Overlay blending mode to liven up and saturate colors. Drop Shadows will ruin your design if you don't do it right. Things should be right up against their surface which means using a 1-3px Drop Shadow size. And 0-3px distance. This isn't WordArt. To save a complex shape as a PNG or GIF, turn the layer into a Smart Object first, then Rasterize it. This preserves color blending modes. When using type within an interface element, it either sits on top (dark 1px drop shadow) or is inset (white 1px drop shadow), it's never at the same surface as a button or widget. Real-world objects rarely have perfectly square corners. Use subtle rounded corners to make objects look real. In real life, everything casts a shadow. Unless you're drawing vampires, if you intend your object to have depth and be resting on a surface then it better have a drop shadow, even an incredibly subtle one.

The New Mediators is a design practice that helps to clarify complicated situations. By designing graphic language systems that function across print, video, interactive and performance formats, it proposes a new role for designers and a new approach to transparency in an increasingly complex world.

New Mediators are practitioners who combine methods from design, journalism, and narrative analysis. The result is designed transparency — information that is not only made available, but accessible, relevant and beautiful.

This introductory animation attempts the method advocated by the New Mediators to explain the project itself. Cast: Jonathan Jarvis

Here it is: my crazy summer project to reinvent desktop human-computer interaction.

This video examines the benefits and limitations inherent in current mouse-based and window-oriented interfaces, the problems facing other potential solutions, and visualizes my proposal for a completely new way of interacting with desktop computers.

There's more information at 10gui.com . Cast: C. Miller

  While product findability is a key factor of success in e-commerce, it is predominantly enabled by simple search alone. And while simple search usually doesn’t fulfill complex needs among users, website developers and owners still regard advanced search as just another boring to-do item during development. Owners won’t go so far as to leave it out, because every e-commerce website has some kind of advanced search functionality, but they probably do not believe it brings in much revenue.On the contrary, well-devised advanced search offers several benefits and can be more than just a clumsy, complicated tool. First of all, effective search can accelerate the sales process. And faster sales can increase conversions, because you will not be losing customers who give up trying to find products. Furthermore, fast, precise and successful searches increase your customers’ trust.In this article, we will review how to build an interface that offers users the power of advanced search while preserving the clarity of simple search.Also consider our previous articles:Search Results Design: Best Practices and Design PatternsDesigning The Holy Search Box: Examples And Best Practices15 Common Mistakes in E-Commerce Design1. Dismantling BarriersAlthough almost every e-commerce website has advanced search, visitors do not use it. First of all, people only use tools that they see. Advanced search is usually hard to detect. The link is usually too small and ugly, and so the flashy simple search button nearby overwhelms it. So even if the user was inclined to perform an advanced search, they have no motivation to do it.The word itself is scary: “advanced.” It suggests we are about to encounter something complicated. And very often, we do. But even if we notice the advanced search link and are not intimidated by it, we don’t use it because we don’t see the benefit. The few who do use it see that once they perform the search, all “advanced-ness” is lost. So, to help our users exploit the power of advanced search, we have to fix usability problems, implement new approaches and improve our search terminology.2. ApproachesThere are several ways to enhance search. The classic approach for advanced search is parameter search. The user sets parameters using text boxes, operators and drop-down menus. When usability gurus tell you not to use advanced search, they are generally referring to this type. It usually has a complicated interface but can be very simple and effective if only the most important fields are shown and you stick to the basic guidelines of form design.Momondo elegantly and effectively sticks to the most important input fields, making parameter search user-friendly.Trulia’s parameter search is a bit more complicated but thoughtfully supported by input hints and prompts. Even more options are hidden under the “More search options” link for advanced users.A good way to avoid intimidating people is to disguise the complexity of the parameter search. Show only snippets of the interface by using the responsive disclosure/responsive enabling pattern. When the user sets a parameter, they move along, and then the next filter is shown. This solution can be useful for guiding novice users, but it can bore and irritate advanced users.On MyBankTracker, users have to select “Yes” for the “Compare your bank APY” option for the “What is your current APY?” question to be displayed.Faceted search is becoming the de facto standard for e-commerce website. The user performs a simple search first, but then on the results page, they can narrow the search through a drill-down link (for a single choice) or a checkbox selection (for multiple non-overlapping choices).This can be faster than the progressive disclosure/enabling pattern and easier to use than plain advanced search. Amazon takes a similar but slightly modified approach: when a user begins a search, they can set some narrowing filters like “Only books” at the very start.Filtering on Amazon.The search filtering on Plus+ is a bit more complex but still easy to use. Again, it is supported by input hints and prompts.From hereKontain emphasizes the most important filtering options with different colors.Travelers begin with a parameter search on Cleartrip but then find the best deal with faceted search.Website maintainers may choose to tag products, or even let users tag them themselves. Tagging gives a website an overlapping taxonomy so that users have different ways to reach products.After a user performs a keyword search, Issuu shows related tags to help the user narrow down the results. Note that the tags that are semantically closer to the search term have brighter colors.3. Building Better SearchFaceted search is the easiest and now safest method by which developers can offer users advanced search functionality. But how to implement it?Before undertaking something as time-consuming as that, make sure your website conforms to basic search usability principles. Is the search box in the right place? Does it work as expected?The structure of the search results page must also be crystal clear. The results must be ranked in a logical order (i.e. for the user, not for you) by relevance. Users should be able to scan and comprehend the results easily. Queries should be easy to refine and resubmit, and the search results page should show the query itself.Consider basic user needs and behavior when planning search. You could frame it as adopting an “incremental construction” pattern. Let users create their own search, step by step. People may not comprehend the whole system at once, but if you guide them gently, searching will be made easier. Make their exploration of search functionality safe: users should be reassured that they can undo any option and not lose their results or settings.MyFonts allows users to control the complexity of their queries by using the - and + buttons to add and remove filters.Your imagination may be a good start in defining which features deserve facets, but it is far from enough. Examine the traffic from your website and the search terms that users have typed into the simple search interface. Analyzing search query logs helps you handle spelling issues more effectively. Based on your analysis, you can also refine your auto-suggest system. What words, categories or taxonomy would describe these searches best? Use the most popular words in your search logs to label your facets and options.Don’t forget to check your competitors’ categories either. Perhaps you would sort your products differently, but you may get good ideas from them. When you have sorted out your facets, test them with real users. Don’t just test the interface during the final phase; let users play with earlier versions as well.4. Categorizing ProductsLet users choose from among only the features that might influence their purchase. Omit features that are not important to users, even if you think they are. Features rarely chosen by customers should be put at the end of the list or hidden under a “More options” link.PriceGrabber allows users to control the complexity of their queries by using the - and + buttons to add and remove filters.For your facets to work perfectly, you need a good taxonomy (categories). If users don’t understand your system, you lose. Don’t make users have to guess your system. Figure out their mental model of your product range first. The categories in your taxonomy should cover all products without overlap. For example, if a user can filter by color, do not omit colorless items in the results, or items for which color is irrelevant. Avoid vague words like “Other” and “More.” The category hierarchy should be shallow, so that users do not have to drill too deep to find a product.5. Architecture Of SearchAlthough faceted search is much easier to use than the classic advanced search, it can become complex if too many facets are shown. Based on George A. Miller’s research, humans can deal adequately with 7 items, plus or minus 2. This short-term memory constraint also informs the popular recommendation of the number of items to include in a navigation menu. Don’t have more than 10 facets. Any more will confuse users, and the results will be about as helpful as the Dewey Decimal system.Hide extra facets under a “More filters” link, even if you think they’re all important. Everything cannot be equally important. If you think certain facets will be important for one user group and other facets important for another, then create a drag-and-drop interface, and allow users to close facets. Letting them save results or facet settings is useful, too, but make sure unregistered users can do it as well.Globrix has many facets, but the interface can be cleaned up easily by closing unused ones.Order facets by importance. Most users will use only a few. Display only filter values that apply to the inventory you have available. If a facet has more than seven or eight options, put the extra options under a “More options” link or a different panel.The Perfume Shop gives priority to age and price. Note that it also indicates what is available in a given price range.Rate My Area offers an unconventional combo input box to begin a search, but its role is communicated clearly. After performing a search, the user can access various facets in different panels.Faceted search is still keyword-driven. If products would be easier to find by referring to categories or if users will have problems identifying their needs, then use filtered search or a well-designed parameter search. Faceted search is cool but not a cure-all.You do not have to type in your flight destination at Wizz Air. Simply select it from a map.6. Enhancing SearchWhatever method you choose, you have several means of enhancing search. Do not automatically order the results page of the most frequent queries. Prioritize what you think best matches the search (i.e. the best bets). Add popular queries to the ones you’ve verified, and review the most popular results from time to time.Apple puts what most users look for front and center. These best bets are supported with pictures.Cluster results based on your or your users’ tags, or get clustering algorithms to do the job. Clustering groups search results into categories but must be implemented with a powerful algorithm that can compete (or at least cooperate) with human tagging.Tag clusters on Flickr group results.Spell-check is also crucial. Many products have names that are hard to remember or type correctly. Users might think to correct their misspelling when they find poor results, but they will be annoyed at having to do that… or worse, they might think that the website either doesn’t work properly or does not have their product.eBay helps users type complicated words.Auto-suggestions can decrease the problems caused by mistyping or not knowing the proper terminology. Queries usually start with words, so unambiguous character inputting is crucial.Get Satisfaction offers auto-suggestion that is easily scannable and structured.If your results are somehow able to be localized in the real world, always show them on a map.MyBankTracker shows its results on Google’s well-known map. The pins are fairly big so that users can see what’s on them, while the transparency maintains visual consistency.7. Communication And LanguageThe success of your search depends heavily on your users’ understanding of what facets, filters and parameters do. Label them in easily understood language. Think about non-native English speakers as well. Communicate the benefits of advanced search clearly and concisely, and show visitors that advanced search helps them be more effective. Change the terrifying phrase “Advanced search” to something friendlier, like “Better search” or “Smart search.” If your advanced search functionality is integrated in the simple search area, just name the whole tool “Search.”OfficeMax names labels facets in simple and unambiguous language.8. Grouping And AlignmentGroup similar items and separate different items clearly. Indicate what is selected or not selected. Use a “Select” button that turns into an “Unselect” button when the user selects something, rather than a “Select all” checkbox (after checking “Select all,” the user might want to check other boxes, in which case the system might not behave consistently). When you arrange items in a facet, think of what would be the most common workflow for using the facet.Your Web Job provides checkboxes for narrowing a search. The page has no search button; when the user finishes typing, the search begins. Although this way of handling search is unconventional, it works because the feature is fast.Several interface patterns are available to make search more usable. Titled sections can effectively separate facets. Use bigger font for titles, and position them close to the content. Allow panels to be closed and moved. Align labels flush with input fields to make them more scannable, even when they vary in length. If you have a lot of facets or if the filters on the search results page have many options, you can arrange them using card stacks. But beware, information that users manipulate in one card won’t be visible when they manipulate another. They may forget their settings or assume that search results will be based on the last-manipulated facet and that earlier filtering has been undone.Comet lets users narrow their searches by clicking on facet links. Users can close and add facets, and the groupings show unambiguously what belongs to which facet. Note that Comet shows the number of items in a category beside each link.Diagonal balance and a liquid layout make a search interface more usable. If users are able to change the size of the search interface, be aware of what happens to labels and values in drop-down lists when the size is set very small. Beautiful interfaces can fall apart if their behavior is not tested at many screen resolutions. And don’t forget about mobile users, even if you don’t have a mobile version yet.Buttons play an important role in a search interface. Have as few as possible, but anything that triggers an action should be a button. Do not disguise such functionality with a non-button-like element. Label meaningfully; avoid vague words like “Okay” and “Done.” Make buttons stand out on the page so that users see them when they’ve finished what they’re doing. Place buttons at the end of workflows. Do not put anything that can modify the results of a button-triggered action after the button.9. Forms And ControlsThe design of facets is up to you. Text boxes and drop-down lists are usually more than enough, but you might want to use other things that can make forms and controls more usable.Choose sensible defaults for radio buttons and drop-down lists. Also, illustrations often convey information much better than words. For example, illustrating types of mobile phones is much less clumsier than describing them. Forgiving formats and structured formats help users input useful queries. Forgiving formats give users flexibility in entering data, while structured formats help them enter data more precisely.Vodafone uses simple yet attractive icons to help users choose quickly.Input prompts tell users what to do or type in a field, whereas input hints explain to users what they are expected to input in a field. Use them wisely: input prompts can be deleted, and too many input hints will annoy users. Also, the visual clutter might make them simply ignore important information.TripAdvisor uses input hints, illustrated options and sensible defaults to enhance the usability of its parameter search.10. Handling ResultsUse dynamic filtering where possible. Users want immediate results, so don’t disappoint. If dynamic filtering would make your architecture too slow, consider reprogramming the page or narrowing the number of options. It might be worth it.Show the number of actual results as well as the number of results the user would get if they were to filter by some other options. “List” and “tiled” are the basic views, but alternative views could help users scan results more easily.11. ConclusionContrary to widespread belief, advanced search is not an old lumbering monster of the past. If usability is taken into account and key structural and conceptual modifications are made, it can be an effective tool for increasing conversions and helping your users access more products. Of course, not every e-commerce website needs advanced search. You may have too few products or your products may be unique and hard to categorize. Advanced or faceted search is more useful when you have a wide variety of products.Showcase of Effective Search InterfacesTopsy implements just one facet, but the visual accents are effective.Collabfinder helps users with input hints in the parameter search.Firefox combines parameter search with faceted search in a complex but easy-to-use interface.Delicious allows filtering by tags and auto-suggests during searches.Rofo implements a slider and drop-down menu in its filtered search. Users can refine their search results with facets, too.Grooveshark filters by tabs. It could have used a drop-down menu, but this solution lets users see all of their options at once.FanSnap uses illustrations and good defaults to handle complex data. Putting the search results on the left is a bit unusual, but good visual highlighting helps users understand the role of each tool.A simple yet elegant implementation of filtered search by The Dubai Mall.Like.com includes a color-picker panel as part of its filtering options. The visual samples help, because color names have different meanings for different people.Further ResourcesUseful and nice search interface examplesAdvancing Advanced SearchSearch Patterns by Peter Morville3 Quick Design Patterns for Better Faceted Search10 Rules for Faceted Search on Travel SitesBest Practices for Designing Faceted Search FiltersFilter & sort: Improving ecommerce product findabilityFaceted NavigationSearch & Advanced Search User Experience RequirementsAdvanced Search: Is The Name A Problem?About the AuthorAndras Rung is a Hungarian usability expert who has worked for various institutions and companies since 2002. He is the co-author of the first Hungarian usability book and author of the usability blog Ergomania.(al)© Rung András for Smashing Magazine, 2009. | Permalink | 14 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: e-commerce, usability

  While product findability is a key factor of success in e-commerce, it is predominantly enabled by simple search alone. And while simple search usually doesn’t fulfill complex needs among users, website developers and owners still regard advanced search as just another boring to-do item during development. Owners won’t go so far as to leave it out, because every e-commerce website has some kind of advanced search functionality, but they probably do not believe it brings in much revenue.On the contrary, well-devised advanced search offers several benefits and can be more than just a clumsy, complicated tool. First of all, effective search can accelerate the sales process. And faster sales can increase conversions, because you will not be losing customers who give up trying to find products. Furthermore, fast, precise and successful searches increase your customers’ trust.In this article, we will review how to build an interface that offers users the power of advanced search while preserving the clarity of simple search.Also consider our previous articles:Search Results Design: Best Practices and Design PatternsDesigning The Holy Search Box: Examples And Best Practices15 Common Mistakes in E-Commerce Design1. Dismantling BarriersAlthough almost every e-commerce website has advanced search, visitors do not use it. First of all, people only use tools that they see. Advanced search is usually hard to detect. The link is usually too small and ugly, and so the flashy simple search button nearby overwhelms it. So even if the user was inclined to perform an advanced search, they have no motivation to do it.The word itself is scary: “advanced.” It suggests we are about to encounter something complicated. And very often, we do. But even if we notice the advanced search link and are not intimidated by it, we don’t use it because we don’t see the benefit. The few who do use it see that once they perform the search, all “advanced-ness” is lost. So, to help our users exploit the power of advanced search, we have to fix usability problems, implement new approaches and improve our search terminology.2. ApproachesThere are several ways to enhance search. The classic approach for advanced search is parameter search. The user sets parameters using text boxes, operators and drop-down menus. When usability gurus tell you not to use advanced search, they are generally referring to this type. It usually has a complicated interface but can be very simple and effective if only the most important fields are shown and you stick to the basic guidelines of form design.Momondo elegantly and effectively sticks to the most important input fields, making parameter search user-friendly.Trulia’s parameter search is a bit more complicated but thoughtfully supported by input hints and prompts. Even more options are hidden under the “More search options” link for advanced users.A good way to avoid intimidating people is to disguise the complexity of the parameter search. Show only snippets of the interface by using the responsive disclosure/responsive enabling pattern. When the user sets a parameter, they move along, and then the next filter is shown. This solution can be useful for guiding novice users, but it can bore and irritate advanced users.On MyBankTracker, users have to select “Yes” for the “Compare your bank APY” option for the “What is your current APY?” question to be displayed.Faceted search is becoming the de facto standard for e-commerce website. The user performs a simple search first, but then on the results page, they can narrow the search through a drill-down link (for a single choice) or a checkbox selection (for multiple non-overlapping choices).This can be faster than the progressive disclosure/enabling pattern and easier to use than plain advanced search. Amazon takes a similar but slightly modified approach: when a user begins a search, they can set some narrowing filters like “Only books” at the very start.Filtering on Amazon.The search filtering on Plus+ is a bit more complex but still easy to use. Again, it is supported by input hints and prompts.From hereKontain emphasizes the most important filtering options with different colors.Travelers begin with a parameter search on Cleartrip but then find the best deal with faceted search.Website maintainers may choose to tag products, or even let users tag them themselves. Tagging gives a website an overlapping taxonomy so that users have different ways to reach products.After a user performs a keyword search, Issuu shows related tags to help the user narrow down the results. Note that the tags that are semantically closer to the search term have brighter colors.3. Building Better SearchFaceted search is the easiest and now safest method by which developers can offer users advanced search functionality. But how to implement it?Before undertaking something as time-consuming as that, make sure your website conforms to basic search usability principles. Is the search box in the right place? Does it work as expected?The structure of the search results page must also be crystal clear. The results must be ranked in a logical order (i.e. for the user, not for you) by relevance. Users should be able to scan and comprehend the results easily. Queries should be easy to refine and resubmit, and the search results page should show the query itself.Consider basic user needs and behavior when planning search. You could frame it as adopting an “incremental construction” pattern. Let users create their own search, step by step. People may not comprehend the whole system at once, but if you guide them gently, searching will be made easier. Make their exploration of search functionality safe: users should be reassured that they can undo any option and not lose their results or settings.MyFonts allows users to control the complexity of their queries by using the - and + buttons to add and remove filters.Your imagination may be a good start in defining which features deserve facets, but it is far from enough. Examine the traffic from your website and the search terms that users have typed into the simple search interface. Analyzing search query logs helps you handle spelling issues more effectively. Based on your analysis, you can also refine your auto-suggest system. What words, categories or taxonomy would describe these searches best? Use the most popular words in your search logs to label your facets and options.Don’t forget to check your competitors’ categories either. Perhaps you would sort your products differently, but you may get good ideas from them. When you have sorted out your facets, test them with real users. Don’t just test the interface during the final phase; let users play with earlier versions as well.4. Categorizing ProductsLet users choose from among only the features that might influence their purchase. Omit features that are not important to users, even if you think they are. Features rarely chosen by customers should be put at the end of the list or hidden under a “More options” link.PriceGrabber allows users to control the complexity of their queries by using the - and + buttons to add and remove filters.For your facets to work perfectly, you need a good taxonomy (categories). If users don’t understand your system, you lose. Don’t make users have to guess your system. Figure out their mental model of your product range first. The categories in your taxonomy should cover all products without overlap. For example, if a user can filter by color, do not omit colorless items in the results, or items for which color is irrelevant. Avoid vague words like “Other” and “More.” The category hierarchy should be shallow, so that users do not have to drill too deep to find a product.5. Architecture Of SearchAlthough faceted search is much easier to use than the classic advanced search, it can become complex if too many facets are shown. Based on George A. Miller’s research, humans can deal adequately with 7 items, plus or minus 2. This short-term memory constraint also informs the popular recommendation of the number of items to include in a navigation menu. Don’t have more than 10 facets. Any more will confuse users, and the results will be about as helpful as the Dewey Decimal system.Hide extra facets under a “More filters” link, even if you think they’re all important. Everything cannot be equally important. If you think certain facets will be important for one user group and other facets important for another, then create a drag-and-drop interface, and allow users to close facets. Letting them save results or facet settings is useful, too, but make sure unregistered users can do it as well.Globrix has many facets, but the interface can be cleaned up easily by closing unused ones.Order facets by importance. Most users will use only a few. Display only filter values that apply to the inventory you have available. If a facet has more than seven or eight options, put the extra options under a “More options” link or a different panel.The Perfume Shop gives priority to age and price. Note that it also indicates what is available in a given price range.Rate My Area offers an unconventional combo input box to begin a search, but its role is communicated clearly. After performing a search, the user can access various facets in different panels.Faceted search is still keyword-driven. If products would be easier to find by referring to categories or if users will have problems identifying their needs, then use filtered search or a well-designed parameter search. Faceted search is cool but not a cure-all.You do not have to type in your flight destination at Wizz Air. Simply select it from a map.6. Enhancing SearchWhatever method you choose, you have several means of enhancing search. Do not automatically order the results page of the most frequent queries. Prioritize what you think best matches the search (i.e. the best bets). Add popular queries to the ones you’ve verified, and review the most popular results from time to time.Apple puts what most users look for front and center. These best bets are supported with pictures.Cluster results based on your or your users’ tags, or get clustering algorithms to do the job. Clustering groups search results into categories but must be implemented with a powerful algorithm that can compete (or at least cooperate) with human tagging.Tag clusters on Flickr group results.Spell-check is also crucial. Many products have names that are hard to remember or type correctly. Users might think to correct their misspelling when they find poor results, but they will be annoyed at having to do that… or worse, they might think that the website either doesn’t work properly or does not have their product.eBay helps users type complicated words.Auto-suggestions can decrease the problems caused by mistyping or not knowing the proper terminology. Queries usually start with words, so unambiguous character inputting is crucial.Get Satisfaction offers auto-suggestion that is easily scannable and structured.If your results are somehow able to be localized in the real world, always show them on a map.MyBankTracker shows its results on Google’s well-known map. The pins are fairly big so that users can see what’s on them, while the transparency maintains visual consistency.7. Communication And LanguageThe success of your search depends heavily on your users’ understanding of what facets, filters and parameters do. Label them in easily understood language. Think about non-native English speakers as well. Communicate the benefits of advanced search clearly and concisely, and show visitors that advanced search helps them be more effective. Change the terrifying phrase “Advanced search” to something friendlier, like “Better search” or “Smart search.” If your advanced search functionality is integrated in the simple search area, just name the whole tool “Search.”OfficeMax names labels facets in simple and unambiguous language.8. Grouping And AlignmentGroup similar items and separate different items clearly. Indicate what is selected or not selected. Use a “Select” button that turns into an “Unselect” button when the user selects something, rather than a “Select all” checkbox (after checking “Select all,” the user might want to check other boxes, in which case the system might not behave consistently). When you arrange items in a facet, think of what would be the most common workflow for using the facet.Your Web Job provides checkboxes for narrowing a search. The page has no search button; when the user finishes typing, the search begins. Although this way of handling search is unconventional, it works because the feature is fast.Several interface patterns are available to make search more usable. Titled sections can effectively separate facets. Use bigger font for titles, and position them close to the content. Allow panels to be closed and moved. Align labels flush with input fields to make them more scannable, even when they vary in length. If you have a lot of facets or if the filters on the search results page have many options, you can arrange them using card stacks. But beware, information that users manipulate in one card won’t be visible when they manipulate another. They may forget their settings or assume that search results will be based on the last-manipulated facet and that earlier filtering has been undone.Comet lets users narrow their searches by clicking on facet links. Users can close and add facets, and the groupings show unambiguously what belongs to which facet. Note that Comet shows the number of items in a category beside each link.Diagonal balance and a liquid layout make a search interface more usable. If users are able to change the size of the search interface, be aware of what happens to labels and values in drop-down lists when the size is set very small. Beautiful interfaces can fall apart if their behavior is not tested at many screen resolutions. And don’t forget about mobile users, even if you don’t have a mobile version yet.Buttons play an important role in a search interface. Have as few as possible, but anything that triggers an action should be a button. Do not disguise such functionality with a non-button-like element. Label meaningfully; avoid vague words like “Okay” and “Done.” Make buttons stand out on the page so that users see them when they’ve finished what they’re doing. Place buttons at the end of workflows. Do not put anything that can modify the results of a button-triggered action after the button.9. Forms And ControlsThe design of facets is up to you. Text boxes and drop-down lists are usually more than enough, but you might want to use other things that can make forms and controls more usable.Choose sensible defaults for radio buttons and drop-down lists. Also, illustrations often convey information much better than words. For example, illustrating types of mobile phones is much less clumsier than describing them. Forgiving formats and structured formats help users input useful queries. Forgiving formats give users flexibility in entering data, while structured formats help them enter data more precisely.Vodafone uses simple yet attractive icons to help users choose quickly.Input prompts tell users what to do or type in a field, whereas input hints explain to users what they are expected to input in a field. Use them wisely: input prompts can be deleted, and too many input hints will annoy users. Also, the visual clutter might make them simply ignore important information.TripAdvisor uses input hints, illustrated options and sensible defaults to enhance the usability of its parameter search.10. Handling ResultsUse dynamic filtering where possible. Users want immediate results, so don’t disappoint. If dynamic filtering would make your architecture too slow, consider reprogramming the page or narrowing the number of options. It might be worth it.Show the number of actual results as well as the number of results the user would get if they were to filter by some other options. “List” and “tiled” are the basic views, but alternative views could help users scan results more easily.11. ConclusionContrary to widespread belief, advanced search is not an old lumbering monster of the past. If usability is taken into account and key structural and conceptual modifications are made, it can be an effective tool for increasing conversions and helping your users access more products. Of course, not every e-commerce website needs advanced search. You may have too few products or your products may be unique and hard to categorize. Advanced or faceted search is more useful when you have a wide variety of products.Showcase of Effective Search InterfacesTopsy implements just one facet, but the visual accents are effective.Collabfinder helps users with input hints in the parameter search.Firefox combines parameter search with faceted search in a complex but easy-to-use interface.Delicious allows filtering by tags and auto-suggests during searches.Rofo implements a slider and drop-down menu in its filtered search. Users can refine their search results with facets, too.Grooveshark filters by tabs. It could have used a drop-down menu, but this solution lets users see all of their options at once.FanSnap uses illustrations and good defaults to handle complex data. Putting the search results on the left is a bit unusual, but good visual highlighting helps users understand the role of each tool.A simple yet elegant implementation of filtered search by The Dubai Mall.Like.com includes a color-picker panel as part of its filtering options. The visual samples help, because color names have different meanings for different people.Further ResourcesUseful and nice search interface examplesAdvancing Advanced SearchSearch Patterns by Peter Morville3 Quick Design Patterns for Better Faceted Search10 Rules for Faceted Search on Travel SitesBest Practices for Designing Faceted Search FiltersFilter & sort: Improving ecommerce product findabilityFaceted NavigationSearch & Advanced Search User Experience RequirementsAdvanced Search: Is The Name A Problem?About the AuthorAndras Rung is a Hungarian usability expert who has worked for various institutions and companies since 2002. He is the co-author of the first Hungarian usability book and author of the usability blog Ergomania.(al)© Rung András for Smashing Magazine, 2009. | Permalink | 12 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: e-commerce, usability

Apple Insider points to a demo of the soon-to-be-launched digital edition Sports Illustrated. If this is the future — and Wired and others are also working on their own digital editions — then maybe the magazine business isn’t doomed.

(HT: Doug Flather)

Apple Insider points to a demo of the soon-to-be-launched digital edition Sports Illustrated. If this is the future — and Wired and others are also working on their own digital editions — then maybe the magazine business isn’t doomed.

(HT: Doug Flather)

  The standard approach to interface design is to craft a channel that allows you to easily and efficiently control hardware or software; it’s all about the interaction between people and computers. But today, the two entities on each side of the user interface are changing: it’s no longer about people interacting with computers, but rather about people interacting with people through computers.This is the nature of the social Web. Social news websites, message boards, social networks, online stores and blogs all have some sort of user interaction going on, whether it’s comments on a blog post or social games on Facebook. The critical issue here is that people are not interacting directly with other people; rather the interaction occurs through a user interface. The computer acts as a mediator.In essence, we control the flow of user interaction on our websites. By crafting an interface to facilitate certain behaviors, we can influence the direction in which our community goes.“Small software implementation details result in big differences in the way the community develops, behaves and feels.” — Joel Spolsky, More Joel on SoftwareIn this article, we’ll demonstrate the power of social interface design and what it can do for you, using several practical examples.Social Interface Design TechniquesUser points and BadgesAchievement, and more importantly, the feeling of achievement, can play a big part in social websites and games. You may be familiar with the massive multi-player games that have a system whereby players progress through levels as they play the game. Each level brings more prestige to the player and so keeps them playing more — with the next level always just a little bit out of reach.The same idea can be used on social websites by recognizing your users’ contributions. For example, for a social news website, you could award points to users for submitting stories. You could also give users special badges when they perform a certain number of tasks. In a social environment, these badges would lift the recipient’s ego, and so people would be motivated to compete for badges.These kinds of things enable us to influence the direction in which our community moves. For example, to increase user participation, such as the number of comments people leave, you could give users a badge after they’ve made a certain number of comments. The same could be applied to any other user driven-content: submitting stories, answering questions, asking questions, writing reviews and so on. The Envato marketplace awards badges to its sellers and buyers.Of course, the flaw to this method is that while getting quantity may be easy, controlling quality may not be. You want users to leave a lot of comments or reviews on your website, but you want these contributions to add value. There is no exact science or formula for how to do this, so the best advice is simply to keep this factor in mind when designing a social mechanism of this type. Will the technique you’re considering add more volume or value?Social news websites tend to give their users points from the submissions that people have liked. This drives people to find better and more interesting stories to submit. Websites such as Envato marketplaces and Stack Overflow give people badges when they perform certain actions or do something a set number of times. Stack Overflow’s achievement badges.Unlockable Features as RewardsPoints and badges are superficial prizes: they’re all about ego. You can go a step further and offer tangible benefits to your biggest contributors, such as by unlocking new features for your website or application. Unlocking new features differs from things like badges and points because the user isn’t interested here in building their ego; they’re interested in getting more value out of your website or application.You may be familiar with the “Skinner Box,” the famous psychological experiment developed by B. F. Skinner that saw a rat placed in a box with a button and a food dispenser. If the rat stepped on the button, it would receive some food. The food here was the reward for pushing the button, and it worked. The rat kept pushing the button to get more food.The same principles apply to social interface design. By giving your users little rewards for accomplishing certain things, you can steer the direction of your community. The trick is to make the rewards beneficial enough for people to want to achieve them.Hacker News unlocks comment down-voting when you accumulate a certain number of points (highlighted).Hacker News, a social news website for developers and entrepreneurs, unlocks things like comment down-voting as you earn points from your submissions and comments. While you cannot lose points for your submissions (there is no down-voting for submitted stories), you can lose points for your comments. Coupled with the fact that you could potentially gain or lose certain functionality on the website depending on the quality of your comments, this makes users more careful about what comments they leave, and they have more incentive to add real value to what another user says.Reply NotificationsA popular feature on blogs and message boards is email-based notification of new replies to your messages. The feature works like this: you submit a new post to a social website, and when somebody replies, you are notified by email. This allows you to keep track of new replies without having to visit the website. The reply notification checkbox on the Webdesigner Depot comments form.While this feature makes sense from the user’s perspective, it might not make sense for the website owner. Email notifications move your audience from direct on-site browsing to off-site email. If users can be notified of new replies, why would they check the website manually?But they do have a reason to come back. When users come back to your website they not only check for replies to their messages, they also read other messages and browse other new content. This keeps the website alive and visitor loyalty high. So while providing such notification systems may not seem logical at first, think about the long-term effects of such features.Dealing With TroublemakersHowever much we want our community members to all get along, there will inevitably be one or two people who seem to want to cause nothing but trouble. Unfortunately, one rotten apple can spoil the barrel, so you’ll want to deal with these troublemakers quickly and efficiently.The traditional method of dealing with such people is to remove their access to the website, to ban them. This is the inclination of most people because that’s how things work in the real world. If someone causes trouble in your home, shop or bar, you ask them to leave. In more extreme cases, you might ask security personnel to escort them out. But you just want to get them out by any means.That’s exactly how most people deal with troublemakers online: they simply ban them using one of several methods. These methods include deleting their messages, de-activating their account and blocking their IP address. In many cases, this works just fine. The user is booted from your website and order is restored. However, things don’t always go smoothly. Some people enjoy the attention they get and may create new accounts to continue making a disturbance.A social interface technique can come in handy here. Instead of banning these individuals, we could let them stay and use the website as they like, but we would hide all of their messages and content from everyone… everyone, that is, but them. So the troublemaker would still see all of their messages and wouldn’t suspect that anything is up, but no one else would see them, so they would cause no disturbance. Yes, the troublemaker may eventually find out that something is going on, but then again, they may assume that everyone is just ignoring them, which is not an unlikely scenario. Whether they leave or stay wouldn’t matter anyway if they’re invisible.Reply ThreadingThreading, or branching, is a way to organize comments and posts on message boards and blogs. A thread, or branch, is a collection of comments that stem from one particular post, and so they focus the discussion on whatever that parent post is about. Threads organize different topics on the same page, usually by indenting the child comments under the parent. This technique may not work in all circumstances.Threading comments under blog posts or message board posts may result in parallel discussions taking place. If you don’t want this — if you don’t want people to talk about different topics but instead focus on the original post — then it may be best to keep the comments and replies in a flat, linear structure.On the other hand, threading can be effective in different contexts. For example, on social news websites such as Slashdot, which feature heavy threading of comments on posts, it effectively turns the comment area into a platform for related discussions, each wrapped in a separate thread. This means that if someone had an interesting angle to explore related to the entry, they could pursue it, and subsequent comments would follow that tangent. Slashdot features deep comment threading on stories, with each comment following its own tangent.Threading can be useful on blogs because it allows you to effectively reply to individual commenters. One of the best ways to generate healthy discussion is to take the time to reply to as many comments as possible. This sends a clear message: you care. When someone leaves a comment and gets a reply from the blog’s author, they know that their comment is being read and that the author is interested in what they have to say. This makes them much more likely to add more comments in future because they know their input will be read and considered and that they won’t be wasting their time. Threading better organizes comments when there are a lot of such targeted replies.Wrapping Up…So, how do you go about designing an interface with social elements in mind? Focus on your goals. Before you can come up with an effective interface, you need to know exactly what your goals are. What do you want to happen? Do you want people to leave many comments on your blog? Do you want to encourage people to post answers to questions, or to submit them? Do you want people to submit files or leave ratings? Form a clear picture in your mind of what you want the interface to promote. Before you set off, you need to know your destination.Only when you have defined your objectives can you begin to develop a strategy to meet them. Social interface design is a new field. Much has been written about usability and interactive design, but still not a lot on social interface design. It is an intersection of various fields: interface design, sociology and psychology, and as such it requires more than just an understanding of usability and design; it requires an understanding of human behavior and interaction. Using concepts from these other fields help you make interfaces that aren’t just easy to use, but that steer your community in the intended direction.(al)© Dmitry Fadeyev for Smashing Magazine, 2009. | Permalink | 33 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: interfaces, social, ui, usability

Ryan will explain the key concepts you should understand to design and implement UI for your apps. He’ll cover screen-level details like language and visual techniques as well as deeper topics like modeling and best practices for coding templates and helpers. Cast: ChicagoRuby

Ryan will explain the key concepts you should understand to design and implement UI for your apps. He’ll cover screen-level details like language and visual techniques as well as deeper topics like modeling and best practices for coding templates and helpers. Cast: ChicagoRuby

The traditional approach is to offer economic incentives, which can be effective in some circumstances but often fall short.So here’s a small but intriguing alternative from Sweden: Motivation through engagement.

(HT: Scott Underwood)

Interface complexity is an issue every designer wrestles with when designing a reasonably sophisticated application. A complex interface can reduce user effectiveness, increase the learning curve of the application, and cause users to feel intimidated and overwhelmed. I’ve spent the past year redesigning a particularly complex application with my primary focus being on reducing complexity. In this article, I’ll go over some of the issues surrounding complexity and techniques that can be used to manage it. Progressive Disclosure Progressive disclosure is the most popular means of managing complexity. The idea is that clutter and cognitive overhead can be reduced by hiding less frequently used elements behind some avenue of accessing those elements, like a mouse click or a keyboard shortcut. It requires that the designer accurately determine which elements are frequently and infrequently used and to what degree. Quite a bit of care needs to be put into the progressive disclosure hierarchy and the mechanisms used for disclosure. Poorly considered use of progressive disclosure can achieve the opposite of the intended effect by making the interface even more complex. As an example, Microsoft Windows has been trending towards removing the menu bar from individual windows and instead packing each function into the main interface (often using pull down menus), which has some issues. I’ll go over a few of them:

There are inconsistent ways of accessing common functionality. The Print function, for example, is in different locations in both the application’s interface and the progressive disclosure hierarchy. The Print controls in Internet Explorer, Contacts (Windows Explorer), and WordPad are highlighted in the screenshot below, to illustrate this. Competing first-party Mac applications (Safari, Address Book, and TextEdit, respectively) have the Print function available in a consistent location – the last item in the File menu. A user who learns how to print in one of those Mac applications won’t have to hunt to find the Print function in other applications. It’s a “learn once, use everywhere” model.

There’s a tendency to overwhelm the user with progressive disclosure points. The default Internet Explorer interface (with Windows Live installed) has a total of 17 pull down buttons – highlighted below. Further, all of these progressive disclosure controls require screen real estate. As more screen real estate is occupied by administrative actions, less is dedicated to displaying the actual content of the application (which, in this case, are webpages).

Contextual Actions This is a form of progressive disclosure where contextually appropriate controls are exposed on a particular object. The most common implementation are contextual menus, activated on the Mac by a right-click or a control-click. While contextual menus are a consistent and useful way of revealing contextual actions on objects, they’re hard to discover, which makes them inappropriate for workflow-critical actions that necessitate greater weight in the interface. The standard way to give these actions greater weight is to integrate them in your interface by providing the set of contextual controls in front of or near each object. Complexity is increased substantially, because the set of controls is repeated for every object on screen. We can get rid of most of this complexity by using a different progressive disclosure technique. Controls can be displayed on a single object if the object is selected, the object has focus, or when the mouse is over the object. This solves the complexity issue since there’s only one set of contextual controls being shown at a particular time, but it’s not without its downsides. Consider whether this sort of technique is appropriate for your interface before deciding one way or the other. Alignment & Visual Hierarchy Aligning elements in a user interface to a simple, consistent grid, will go great lengths in reducing the appearance of complexity. The use of strict alignment and a thoughtfully laid out grid can turn an interface from chaotic and overwhelming to harmonious and appealing. Some compelling examples are the inspectors in Microsoft Expression Blend and Adobe Lightroom. While a host of factors are responsible for the Expression Blend inspector looking considerably more complex than the Lightroom inspector, the rough horizontal alignment is certainly a primary one. The horizontal alignment lines have been drawn in red to illustrate the differences.

The examples shown above also demonstrate the effectiveness of the techniques used in each interface to indicate hierarchy. The Lightroom inspector has very strong visual distinctions between section headings and their contents. Headings are prominent. Set in large type with generous padding and a relatively high contrast foreground-background color combination, sections, headings, and the relationships between them are immediately clear. Visual Noise & Contrast The amount of visual noise in an interface has a great deal of impact on the perceived complexity of the interface. And contrast plays an important role with respect to visual noise. Using lower contrast UI elements reduces visual noise which will often reduce the effective complexity of the interface, as you’ll see in the next couple of examples. The Address Book UI eschews fields with relatively high contrast borders in favour of fields with borders that are only visible if the field has focus. This causes the fields to blend in with the rest of the interface. The Create Contact window in Entourage 2008 uses the standard window background color and standard text field styling which contributes to the interface looking more complex than the Address Book interface.

As another example, I’ve taken the Filter window in Aperture 2.0 and mocked up what it would look like with the transparent controls from iLife ‘08 (and parts of iLife ‘09) with high contrast edges instead of the relatively low contrast controls that it shipped with. The UI I’ve mocked up looks notably more complex than the shipping interface because of the higher contrast controls. Simply adjusting the styling of your controls can have a considerable impact on complexity.

Use of Icons Interfaces widely regarded as complex with high learning curves are often characterized by an abundance of icons or glyphs that lack descriptive labels. When a user opens an application for the first time with an interface covered in label-less glyphs, it can be quite daunting. Every icon with a non-obvious meaning will have to be learned for the user to feel any sort of mastery over the application. This is a difficult problem to solve. There often isn’t room for a label to sit next to an icon, and in many cases there is cost involved in replacing an icon with a label (mainly, users will not be able to quickly scan the interface for the icon). Deciding when to use an icon, a label, or both, is an art all in itself. Nevertheless, here are some tips for those faced with this issue:

Revamp your icons so they convey their meaning more effectively. Improve metaphors, adjust sizes, colors, etc. Use grouping to imply meaning. Grouping related icons together can often provide sufficient context to imply their function. Using progressive disclosure, place less often used icon-only buttons in a pull down menu with both icons and their labels. A nice benefit of this is that the user will learn the meaning of each icon when they use the pull down menu, and if the menu is designed to be used early on in a user’s experience with the application, you can get away with using those icons without labels in other places in the app (since the user will have already learned their meanings at that point).

Mental Models A great way to reduce effective complexity is to align the conceptual model expressed by your interface with your user’s mental model as closely as possible. A poorly thought out model contributes to complexity by adding a significant amount of cognitive work that your users have to perform to learn your interface. The recurrence UI in Windows Calendar, for instance, reflects the developer’s model of the task rather than the user’s model. Take a look at the second set of radio options in this screenshot:

What’s the “28th last day of the month”? What’s the “4th last Tuesday of the month”? How long did you spend trying to work that out?

These options feel complex because the language used and functionality that’s represented doesn’t reflect your understanding of repeating events. Combat this issue by researching how your users conceptualize relevant tasks so your models are intuitive. You can read more about mental models in the HIG. Use your Judgement Finally, use your own judgement. There are costs associated with nearly every technique I’ve listed here. Carefully consider each technique in the context of your interface and determine which are most appropriate for your application and how best to apply them.