UI-patterns.com

Paywall

Wed, 27 Jun 2012 00:00:00 +0000

The user needs to pay to get access to a restricted area on a website.

Continued...

Slideshow

Wed, 11 Jan 2012 00:00:00 +0000

The user needs to skim through stories without scrolling or any other unnecessary mouse movements.

Continued...

Gallery

Thu, 05 Jan 2012 00:00:00 +0000

The user needs to browse a series multiple images in a high resolution.

Continued...

Designing for push and pull in web design

Sun, 04 Dec 2011 00:00:00 +0000

The profession of improving usability asks how we best help our users fulfill their goals. The goal and task orientation of usability is carved into stone in the ISO standard definition for what usability is. There is however a part of the usability profession that can’t be concerned with a clear goal.

What if your users do not have a clear purpose for visiting a website? What if we need to help them provide a purpose? Are we then talking User Experience (UX)? Are we improving usability for our users if we help them solve a goal they didn’t first know they had?

Heavy task orientation assumes that our users have an urge to pull: to complete the task they had in mind or to find the information they were looking for. Users who pull have an extraordinarily large motivation to finish the task they are trying to complete.

However, in many other cases our users do not have a clear task to accomplish. They might not even have a clear purpose of visiting your website other than wasting time, having fun, getting a laugh, “surfing around”, or just keeping updated. There is no pull that motivates them in a specific direction, but they’re somewhat open to being pushed.

Push and pull can be defined as to opposing strategies for influencing your users – or two different modes your users can be in.

Push

When we design to influence our users through a push strategy, we begin by forecasting their needs and then designing the most efficient system to ensure everything our users need is available at the right time and the right place. This is at best a carefully scripted mechanism which can deliver a useful service. Most often however, push becomes just another call-out for attention.

The premise of push is that the “pusher” knows what is in the best interest of the user – or at least what triggers a pull in the user. The pusher believes to have found a way to apply the right mechanisms and triggers in order to ensure success. As it is hard to predict future behavior, push tends to be a replication of past experience tweaking the current environment by minor changes.

The push strategy is used all over. Media is programmed, packaged, and pushed to users based on their anticipated needs. Pushing is editing the bigger picture and tailoring it for the end user. Some would say that push is knowing better than the users – its utilizing a strategy that is not afraid to say “Do this, not that!” or “This is better than that!”.

Most push strategies utilize emails, twitter, facebook, or merely a front page full of content which the user can stumble upon and find interesting.

Pull

When pull works best, users can easily find and access resources when they need them. A prime example is search: users query what they want and results are delivered.

An even more sophisticated form of pull is a rather serendipitous one. We go to the places where the chance of making it is bigger. We go where the chance of being lucky or running into the right people is bigger. Software developers move to Silicon Valley, country musicians to Nashville, aspiring super-models to Paris or New York, skateboarders to skateboarding.com, and designers to Smashing magazine or something similar. Users tend to go where they have the biggest chance of running into what they need in order to take the next step – even if they don’t exactly know what that next step is. We go to social media sites in order to run into old friends, new acquaintances, and discover people who might be useful for us: we go there to let these things happen to us.

Online communities is a great example of the pull strategy being applied well. Here, users with shared interests, but far apart from each other hang out in online communities to learn from people better or as good as themselves.

Going from push to pull

The art of it all is going from push to pull. It’s striving for delivering value to the end-user when he or she pulls it rather than trying to push things that most likely are irrelevant.

Utilizing pull is trying to find a way to motivate people to act. To motivate people to have a purpose or end-goal. Going from push to pull is moving the burden to the users: letting the users take action instead of you. Going from push to pull is easing the cognitive load on the user and letting the user explore – access, attract, and achieve rather than being instructed.

Examples of great pull in traditional push environments

iLike.com music challenge

iLike.com once had a music quiz where the user should guess what song was playing within 30 seconds. A quick answer would be rewarded with more points than a late answer. The more points gathered, the higher rank the user would receive.

iLike.com successfully converted a typical push situation into a pull. Instead of trying to force all sorts of music down the throat of the user, just to play something (push), a pull is created around the notion of gathering points. The user is provided with a purpose – a task. In the process, iLike.com learns a great deal about the user’s music preferences (a knowledge about certain music can indicate a preference toward that) and allows for a serendipitous music session where the user gets the opportunity to stumble upon music that he likes.

LinkedIn.com

LinkedIn.com wants you to browse and interact with your business acquaintances. The straight forward way of using LinkedIn.com is to browse for people you know or are interested in when you feel the pull to do so.

However, LinkedIn.com successfully applies several mechanisms to let the user want to pull more. They do so by providing interesting tasks that was before visiting linkedin.com unknown to be interesting for the user. One such task is to stalk the people who showed interest in you. It is interesting when the user sees it, and provides a reason to come back and check at a later time.

Optimization vs innovation

Mon, 24 Oct 2011 00:00:00 +0000

You might have tried it before: as you incrementally tweak your web application with small changes, you can’t seem to convert your users any better. It seems as if you’ve hit a dead end. A large number of A/B tests and multivariate testing seem to have found the best working solution. Is the essence of my application just not good enough to convert better?

It might not be, however, there is a good chance that you have hit the local maximum. The local maximum is a point in which you have reached the limits of what you can get out of your current design. Even if you make a thousand tweaks, it is not going to get any better in its current structural form. You cannot optimize your way into better conversion. You need to radically change the fundamentals of the design to move forward – a big overhaul that rethinks communication, flow, graphic design, and combination of elements in general. You need to innovate.

Reaching the local maximum occurs frequently. It is most often seen when you rely on metric driven tests when making improvements such as A/B and multivariate testing. Making small incremental improvements while testing their performance represents in many ways a better, maturer, and more controlled design process. It can however also be a tedious and slow process as every small change needs to be tested. Improving your design in this way will lead in one way only: to the local maximum.

If you were to redo your design from scratch, would you do everything the same way? Would you try a radical different solution? How many fundamentally different ways can you solve your current design problem? You initially chose to go for one particular of them and optimized it to perform the best it can. But what if a radically different take on the design problem would actually perform a whole lot better? What if there were a local maximum in another solution that would perform better – that would be a better design?

How do you know if there is such better design? You don’t. The only thing you can do, is to once in a while try a radically different take on your design problem. This is when you innovate – when you come up with a solution that does not have much resemblance to the prior.

Think of each local maxima solution as if it was a mountain to climb. The higher the mountain, the better the design. There is a way to get to the higher mountain from where you are now, but it takes changing the design in a more radical way. The goal is to maximize the potential improvement reached by optimizations. You can either climb the mountain you are currently on, that is to optimize your current solution or you can jump from one mountain to the other – to innovate into a new solution. When you jump to a new mountain, you never know how high it is, or how high up you landed – how big the potential is for optimization. So either you landed at the bottom, in the middle, or on the top of the mountain. In the bottom, there is much room for improvement through optimization, where there is none at the top – at the local maximum.

You might have arrived at a new solution that has huge potential in being optimized, why it could lead to better performance than where you came from. It could also be that you arrived at a solution, that was as optimized as can be from the start.

There is a difference between optimizing and innovating

You can improve your design solution either through optimization or through innovation. There are two phases of design: ideation and make changes – innovation and optimization. Once you’ve optimized your current solution to its local maximum, you need to think out of the box again, and make the leap to new radically different solutions.

Optimization

You optimize through a data-driven approach that thinks of design as a logic problem where the best solution is found relying on data and tests of every design choice made. When optimizing, we rely on data and tests as our instruments for deciding upon what is the best design.

Design optimization asks: What works best in the current model?

Innovation

You innovate through intuition. When we use our intuition, we make best guesses and rely on our previous experience. We study what others are doing and use best practices. An integral part of innovation is thinking experience, aesthetics, and flow as a whole. When innovating, we rely on designers, best guesses and discussion as instruments for deciding upon what is the best design. The goal of innovation is to maximize the potential improvement through optimization.

Design innovation asks: What is the best possible model?

How to optimize

You need to measure in order to optimize

You don’t know if you are actually optimizing your design unless you measure. Depending on your business and your goals, there is a number of different thinks you can optimize toward. These are some of the most common metrics designed for.

Acquisition: How much does it cost to acquire a new user? Cost Per Acquisition (CPA), life time value (LTV) are common metrics. Your CPA should be lower than your LTV.
Conversion funnel: Where in your flow do your users fall off as they move through a funnel.
Prevention: Do you want to prevent users from deactivating their account? Design a way to decrease or prevent people deactivating their account and measure how well you’re doing.
Activation: Do you want to keep your users at your site? Then design a way to constantly get your users to find new and interesting stuff. Common metrics are pageviews per user and time on site.

There is no fixed list for what metrics you can use. You can invent your own or go with the standards. Find one and pick one that fits the goal of your web design.

Read more: A good design is measureable

Use metrics that will work for all mountains

Choose metrics that are so general, that they will work for radically different solutions. Is your general goal to get more sign ups, then measure how well you convert incoming users.

Sources

¹ A good design is measurable- by Anders Toxboe at UI-Patterns.com

² 5 steps towards building a metrics driven business by Andrew Chen

³ The local maximum by Joshua Porter

Psychology of rewards in web design

Tue, 03 May 2011 00:00:00 +0000

Rewards is a mechanism for telling users that they have done well – that their actions have been judged favorably.

Continued...

The three levels of design patterns: Implementation, flow, and context

Tue, 05 Apr 2011 00:00:00 +0000

User interface design patterns work on three levels: implementation, flow, and context. Each level address very different design concerns, so be careful which one you use when.

Continued...

What is good design?

Thu, 03 Feb 2011 00:00:00 +0000

Good design is not just what looks good. It also needs to perform, convert, astonish, and fulfill its purpose. It can be innovative or it might just get the job done.

A good design cannot be measured by a finite way – that is why Dieter Rams of Braun fame coined his ten most important principles for what he considered was good design.

Continued...

Tour

Sun, 09 Jan 2011 00:00:00 +0000

The user need to learn about an offered service or product or make the decision to join a service or buy a product.

Continued...

We say yes to those we know and like

Tue, 02 Nov 2010 00:00:00 +0000

We prefer to say yes to the requests of someone we know and like. This fact is used on a daily basis by web designers to make us comply with their sales pitches. We “like” things on facebook, recommend friends and contacts on LinkedIn, and associate ourselves with successful products from Apple in order to appeal to similar others.

Continued...

Product page

Tue, 26 Oct 2010 00:00:00 +0000

The user need to know details about a product in order to make a purchase decision or satisfy a need for support.

Continued...

Pricing table

Mon, 25 Oct 2010 00:00:00 +0000

The user needs to get an overview of what pricing plans are offered and how they differ

Continued...

Persuasive purchase behaviour – Understanding the power of the Goldilocks Effect

Sat, 23 Oct 2010 00:00:00 +0000

Persuading people to commit to a transaction online can be achieved by applying any number of psychological techniques. And although the term ‘persuasion’ may, at times, been seen to have certain negative connotations there are plenty of ways in which we can encourage behaviour through a well designed interface without resorting to deception or the use of ‘dark patterns’.

Continued...

5 great social music-video projects

Tue, 19 Oct 2010 00:00:00 +0000

The mainstream media is slowly, but firmly embracing the social web. Interesting and creative uses of classic internet technologies are forming new and unique sensory experiences – a trend that can only continue to grow.

Continued...

14 examples of data visualization on the web

Thu, 14 Oct 2010 00:00:00 +0000

An ever growing amount of data is being made freely available by popular web services like flickr, twitter, the guardian, and many more. We’ve collected a list of great examples of how such data can be extracted and merged into something useful and interesting.

Continued...

Designing for logos, pathos, and ethos

Wed, 29 Sep 2010 00:00:00 +0000

Convincing your users to sign up, letting them understand how you can help, or seducing them to engage, requires serious persuasion skills. In this blog post I apply Aristotle’s 3 means of persuasion to web design: how to appeal to logic, emotions, and credibility.

Continued...

100 sign up forms

Sun, 12 Sep 2010 00:00:00 +0000

Our sign up form collection: Account registration just turned 100! Explore a myriad of sign up form goodness.

Learn both how to design short forms to minimize friction and longer to communicate seriousness. There’s also the stylized, the structured, the dropdown, and the lightbox’y.

Some sites have both a login form and sign up form on the same page, while others try to make it easy to use third-party login providers such as facebook connect, gmail, or similar.

Some also structure their sign up forms in to steps – almost like a wizard, while others focus on validation.

Enjoy!

Examining reward structures

Tue, 03 Aug 2010 00:00:00 +0000

When building a website that relies on social interaction it is particularly important to design your feedback and reward structures to match your design goals. This article examines important details to consider.

Continued...

Keep users in the flow by prompting for continuation

Mon, 19 Jul 2010 00:00:00 +0000

A new trend on content-based websites seems is to animate a small box popping up at the bottom or top of the page, guiding users’ next move as they reach the end of an article. This technique is smart as it waits for just the right moment to break users’ attention.

The idea is to utilize the situation of change; when users have finished reading an article and are looking for something new to do. This exact moment is when to intervene and catch users’ attention, as they are changing state from reading to browsing. They are going from a situation of flow (reading) to having to make an active choice: they have to make up their mind of whether to continue on the same site or continue elsewhere.

Users are prone to continue online activities elsewhere in this situation of change, why it is a critical moment to act for the website owner when it comes to increasing pages per visit, lowering bounce rates, and increasing a dozen of other statistics.

For the website owner, the alternative to making a pop-up and attracting attention at one particular point in time is to try attract attention all the time. So even though a pop-up like this can be seen as obtrusive, this form is perhaps the least obtrusive of its kind. Consider and design for your own pop-up to be a helper rather than a moocher of attention.

Check out more examples of continuation prompts

63 great uses of icons in web design

Thu, 15 Jul 2010 00:00:00 +0000

Icons are most often used to enhance meaning and afford scanning in web design. The same icons have been used again and again for similar functions and in turn they have become synonyms for specific functionality or information.

An icon of a diskette still conveys the “save” function, even though nobody uses diskettes anymore and the youngest computer users are unaware of what a diskette really is. Icons convey immediate meaning and provide shortcuts to it. Reading text requires more energy than deciphering an icon.

Icons can be used to allow for scanning and increase readability. Use icons to indicate the beginning of new paragraphs.

Icons can be used to set the mood, personality, and general atmosphere of a website. Consider the theme of your website and choose icons accordingly. What style does your site have? Mordern? Classic? Slick? Web 2.0?

Enough talking – check out these 63 great uses of icons in web design

57 video and audio player designs

Tue, 13 Jul 2010 00:00:00 +0000

There are far more video and audio player designs than what we know as the standard from youtube and vimeo. We’ve collected 57 examples of interesting multimedia player designs

All multimedia players share three fundamental elements: combined play/pause button, volume control, and progress bar. The more advanced also have social functions such as embed, like, rate, and other sharing tools.

The most common callout for playback is a big (often transparent) play icon on top of the video.

Enjoy our new collection of multimedia player designs