UI-patterns.com

Content Teasers collection: starwars.yahoo.com

Sun, 28 Jun 2009 22:26:55 +0000

Articles teased at starwars.yahoo.com

Displaying data collection: www.nytimes.com

Wed, 24 Jun 2009 06:43:56 +0000

Calculate your portfolios future outcome and see it grow graphically at the New York Times website.

Displaying data collection: topics.nytimes.com

Wed, 24 Jun 2009 06:37:49 +0000

Displaying article related data at the New York Times website.

Content Teasers collection: video.on.nytimes.com

Wed, 24 Jun 2009 06:33:54 +0000

Thumbnails and a headline tease video clips at the New York times video website

Completeness meter set: vmax.dk

Tue, 23 Jun 2009 20:56:35 +0000

At the Danish car-tuning enthusiast website “vmax.dk”, a completeness meter tells me that my profile is only 36% done! Furthermore, it also hints me that following one or more car profiles will get my completeness meter up to 43%!

Completeness meter set: linkedin.com

Tue, 23 Jun 2009 20:54:11 +0000

The fact that my profile is only 80% done seduces me to interact more with the website in order to get it up to 100%.

Blog post: Towards building engaging relations

Tue, 23 Jun 2009 00:00:00 +0000

How do your customers feel about your company and the service you provide? Are they frustrated, energetic, focused, or just happy? Translate their emotions into how much value they will bring to your business and how loyal they are. How do you want your customers to feel, and how do you get them there?

Emotional states of your customer and how they relate to their value and loyalty.

The worst emotions your customers can have toward you are those of discomfort. Are they stressed because the product they ordered last week has not shown up yet? Are they frustrated because they fail to figure out how to place an order? Or do they feel neglected and irritated when customer service is either too slow or gives the answer they feared?

Customers with emotions of discomfort can destroy your business. On the short term however, it is your support team that will hurt the most, as customers with these emotions will return their products and call in with complaints. In the long term, these are the customers who could destroy your brand by either reactively or proactively communicating to other people how much you suck! Customers with emotions of discomfort can be your worst nightmare!

Marketing in the old days before the internet came along was all about attention. By investing money in TV, newspaper, billboard advertisement and similar mass-marketing channels, you placed a bid for for the customer’s attention. If you poured enough money into the funnel, you would win the auction and the money spend would be translated into sales. Those times are gone.

When you get the attention of new customers, they are interested in what you can offer them. You might even convert their interest into short-term sales. But more importantly, the odds of building a long-lasting relationship with the customer have been increased a notch. They are indifferent to your brand and product, but have a momentum of energy. Use their energy and explorative excitement to let them learn about you. Teach! Teach about how you can help them kick ass!

Once you have build a relationship to your customer that you are both fond of, the customer will recommend you if asked. They like you! Even better, they will come back for more! If they feel valued, have trust in you, and feel cared for, they will reward you with plentiful business. They will come back again and again, yielding returns much larger than the one-time fix you got from getting their one-time attention. Customers with emotions corresponding to this stage will recommend you if somebody asks. They are reactive rather than proactive.

If loyalty is your goal, you want to turn your customers into your ambassadors. In this state, your customers will advocate your products and proactively tell other potential customers about your products. This is the ultimate end-goal for word-of-mouth marketing: it’s the cheapest and possibly best marketing there is.

Notice the three levels of engagement used: indifferent, reactive, and proactive. Just as there are three levels of engagement on the positive side of the graph, there are also three levels on the negative side. There is however one big difference: Proactive behavior from customers with negative or destructive emotions toward you will be provoked much sooner and more frequent than customers with positive and pleased emotions. People are more bound to blog, speak, or engage with you when they feel angry, neglected, and are upset than if they are happy.

This post was inspired by the 1999 Seth Godin book, Permission marketing, which is about getting permission to build a relationship to your customer instead of just interrupting their attention constantly. The cluster idea and emotional states was greatly inspired by The DNA of customer Experience by Colin Shaw. Also, Kathy Sierra deserves some love for the now closed Creating passionate users blog. Finally, there’s also a splash of the Prospect theory and the value function.

search box set: www.vocabletics.com

Thu, 18 Jun 2009 10:54:25 +0000

very intuitive search box

Blog post: Why design patterns work

Wed, 17 Jun 2009 00:00:00 +0000

A design pattern is a recurring solution to a common problem. A solution for a problem that has been found to work well over and over. Such a solution over time becomes a convention.

Conventions are not limited to the online world, but is to be found everywhere in real world as well. As we grow up, we learn the convention of pushing a door-handle down to open its door and driving on the right side of the road (depending on what country you live in) to avoid nasty collisions. We learn to cross a street when the light is green and hold when its red. We learn how to read a newspaper by learning the conventions of page layouts and formatting to easier scan its information. In this way we can find the stories we are interested in quickly and efficiently.

Conventions all start off as an idea good enough to be imitated by others. Similarly, design conventions on the web stem from ideas on one website good enough to be imitated by another. As more websites copy an idea, it is exposed to the public as more and more see it. When it has reached a critical mass, it needs no explanation. This is when it has become a convention. The idea that solved a problem becomes a convention if it is common enough. If it also has a good amount of quality, it is a design pattern worth talking about.

Conventional design patterns provide a reassuring sense of familiarity to the user. When one is spotted the user immediately knows how it works and what it does. No unnecessary time needs to be spent to figure out how things work. The user does not need to think.

Take advantage of design patterns and the conventions embedded in them. Using design patterns may not win you the pulitzer prize for new and innovative thinking, but they will help you reduce friction and thus provide better usability. Innovate when you know you have the better idea, but use design patterns and conventions in all other cases.

It’s all about the execution.

Navigation collection: www.stage3.com.br

Thu, 11 Jun 2009 21:59:27 +0000

Nicely designed menu at stage3

Navigation collection: www.kiddikicks.co.uk

Thu, 11 Jun 2009 21:57:48 +0000

Horizontal navigation at kiddikicks.co.uk

Comments collection: gummisig.com

Thu, 11 Jun 2009 21:53:31 +0000

Comment form and comment at gummisig.com

Fat Footer collection: gummisig.com

Thu, 11 Jun 2009 21:49:41 +0000

Fat footer at gummisig.com

Content Teasers collection: markmcgall.com

Thu, 11 Jun 2009 21:35:23 +0000

Notice how the name of the category is printed graphically above the thumbnail image of this content teaser.

Content Teasers collection: www.j-j.hr

Thu, 11 Jun 2009 21:31:53 +0000

Teasing news stories with thumbnails at j-j.hr

Navigation collection: cssmania.com

Thu, 11 Jun 2009 21:26:27 +0000

Navigation at CSSmania.com

Breadcrumbs collection: The breadcrumb at linux.com describes the depth of the hierachy you have indulged in.

Thu, 11 Jun 2009 21:02:10 +0000

The breadcrumb at linux.com describes the depth of the hierachy you have indulged in.

Navigation collection: rails.lighthouseapp.com

Thu, 11 Jun 2009 20:59:05 +0000

Tabbed navigation at lighthouseapp.com.

Navigation collection: macrabbit.com

Thu, 11 Jun 2009 20:58:10 +0000

Nicely designed horizontal menu at macrabbit.com

Navigation collection: designintellection.com

Thu, 11 Jun 2009 20:57:13 +0000

Main navigation at design intellection

Navigation collection: linux.com

Thu, 11 Jun 2009 20:56:05 +0000

Drop down menu at linux.com