The 75 GoodUI ideas that we are about to show you, are being actively A/B tested by us and others. Sign up to receive email updates with what we learn as we go along. Design + Data is king.
Unsubscribe any time. Initially, we’ll send you 5 emails with top content. Then you can expect 2 to 4 emails each month with test results, blogs posts, testing strategies, and UI blueprints.
A friendly gesture such as providing a customer with a gift can be just that. Deeper underneath however, gifting is also an effective persuasion tactic that is based on the rule of reciprocity. As obvious as it sounds, being nice to someone by offering a small token of appreciation can come back in your favour down the road.
Over the course of time, it's easy to unintentionally create multiple sections, elements and features which all perform the same function. It's basic entropy - things start falling apart over time. Keep an eye out for duplicate functionality labelled in various ways, as it puts a strain on your customers. Often, the more UI fragmentation there is, the higher the learning curve which your customers will have to deal with. Consider refactoring your UI once in a while by merging similar functions together.
Evidence Exists For A +3% Effect From This Idea
Evidence Exists For A +84% Effect From This Idea
Visual styling such as color, depth, and contrast may be used as a reliable cue to help people understand the fundamental language of navigating your interface: where am I, and where can I go. In order to communicate this clearly to your users, the styles of your clickable actions (links, buttons), selected elements (chosen items), and plain text should be clearly distinct from one another and then applied consistently across an interface. In the visual example, I've chosen a blue color to suggest anything that can be clicked on, and black as anything that has been selected or indicates where someone is. When applied properly, people will more easily learn and use these cues to navigate your interface. Don't make it harder for people by blurring these three functional styles.
Evidence Exists For A +14% Effect From This Idea
Imagine that you just pressed an action button or link. Undos respect the initial human intent by allowing the action to happen smoothly first and foremost. Prompts on the other hand suggest to the user that he or she does not know what they are doing by questioning their intent at all times.
I would assume that most of the time human actions are intended and only in small situations are they accidental. The inefficiency and ugliness of prompts is visible when users have to perform actions repeatedly and are prompted numerously over and over - a dehumanizing experience. Consider making your users feel more in control by enabling the ability to undo actions and not asking for confirmation where possible.
Are you targeting everyone or are you precise with your audience? This is a conversion idea where you could be explicit about who exactly your product or service is intended for. By communicating the qualifying criteria of your customers, you might be able to actually connect more with them while at the same time hinting at a feeling of exclusivity. The risk with this strategy of course is that you might be cutting yourself short and restricting potential customers. Then again, transparency builds trust.
You can send your message with uncertainty trembling in your voice, or you can say it with confidence. If you're ending your messaging with question marks, using terms such as "perhaps", "maybe", "interested?" and "want to?", then most likely you have some opportunity to be a bit more authoritative. Who knows, maybe there is a bit more room for telling people what to do next in the world of conversion optimization.
Making your calls to action be a bit more prominent and distinguishable in relation to the elements surrounding them, will make your UI stronger. You can easily increase the contrast of your primary calls to action in a number of ways. Using tone, you can make certain elements appear darker vs. lighter. With depth, you can make an item appear closer while the rest of the content looks like it's further (talking drop shadows and gradients here). Finally, you can also pick complementary colors from the color wheel (ex: yellow and violet) to raise contrast even further. Taken together, a higher contrast between your call to action and the rest of the page should be considered.
Evidence Exists For A -2.1% Effect From This Idea
Evidence Exists For A +7.6% Effect From This Idea
Evidence Exists For A +50.8% Effect From This Idea
A false bottom is a conversion killer. Yes, scrolling long pages are great, but be careful of giving your visitors a sense that the page has come to an end somewhere in between sections where it really hasn't. If your pages will scroll, try to establish a visual pattern or rhythm that the user can learn and rely on to read further down. Secondarily, be careful of big gaps in around the areas of where the fold can appear (of course I’m referring to a area range here with so many device sizes out there).
Evidence Exists For A +5.6% Effect From This Idea
In any user interface we quite often show elements which can have different states. Emails can be read or unread, invoices can be paid or not, etc. Informing users about the particular state in which an item is in, is a good way of providing feedback. Interface states can help people understand whether or not their past actions have been successfully carried out, as well as whether an action should be taken.
Evidence Exists For A -8.3% Effect From This Idea
Occasionally it makes sense to allow certain UI elements to be acted upon directly as opposed to listing unassociated generic actions. When displaying lists of data for example, we typically want to allow the user to do something with the items in the list. Clicking on, or hovering over an item in this list can be used to express that a particular item is to be manipulated (deleted, renamed, etc.). Another example of common direct manipulation would be clicking on a data item (say a text based address) which then turns into an editable field. Enabling such interactions cuts through the number of required steps, compared to if the same task was started more generally without the context of the item - since selection is already taken care of. Do keep in mind of course that for generic item-agnostic actions, there is nothing wrong with contextless menus.
Evidence Exists For A -0.2% Effect From This Idea
Interface elements often appear, hide, move, shift, and resize as users do their thing. As elements respond to our interactions, it sometimes is a little easier to comprehend what just happened when we sprinkle in the element of time. A built in intentional delay in the form of an animation or transition, respects cognition and gives people the required time to understand a change in size or position. Keep in mind of course that as we start increasing the duration of such transitions beyond 0.5 seconds, there will be situations where people might start feeling the pain. For those who just wish to get things done quickly, too long of a delay of course can be a burden.
Evidence Exists For A +26% Effect From This Idea
Borders compete for attention with real content. Attention of course is a precious resource since we can only grasp so much at any given time. Surely borders can be used to define a space very clearly and precisely, but they also do cost us cognitive energy as they are perceived as explicit lines. In order to define relationships between screen elements which use less attention, elements can also be just grouped together through proximity, be aligned, have distinct backgrounds, or even just share a similar typographic style. When working in abstract UI tools, it’s easy to drop a bunch of boxes everywhere. Boxes however come with a false sense of being immune from the order and unity which governs the rest of the screen. Hence pages with lots of boxes sometimes may tend to look noisy or misaligned. Sometimes it is helpful to throw in a line here and there, but do consider alternative ways of defining visual relationships that are less taxing to attention and your content will come through.
Evidence Exists For A +4.3% Effect From This Idea
There are cases when you will have 0, 1, 10, 100, or 10,000+ data results which might need to be displayed somehow in various ways. The most common of these scenarios is probably the transition from first time use with zero data towards future use with a lot more data. We often forget to design for this initial case when there is still nothing to display whatsoever, and by doing so we run the risk of neglecting users. A zero data world is a cold place. When first time users look at your app and all it does is show a blank slate without any guidance then you’re probably missing out on an opportunity. Zero data states are perfect candidates for getting users across the initial hurdle of learning by showing them what to do next. Good things scale and user interfaces are no exception.
Evidence Exists For A +8.1% Effect From This Idea
Striving for consistency in user interface design is probably one of the most well known principles since Donald Norman’s awesome books. Having a more consistent UI or interaction is simply a great way to decrease the amount of learning someone has to go through as they use an interface or product. As we press buttons and shift sliders, we learn to expect these interaction elements to look, behave and be found in the same way repeatedly. Consistency solidifies the way we learn to interact and as soon as it is taken away, we are then forced back into learning mode all over again. Consistent interfaces can be achieved through a wide possible range of things such as: colors, directions, behaviors, positioning, size, shape, labelling and language.
Before we make everything consistent however, please let’s bear in mind that keeping things inconsistent still has value. Inconsistent elements or behaviors come out into attention from the depths of our habitual subconscious - which can be a good thing when you want to have things get noticed. Try it, but know when to break it.
Evidence Exists For A +1.1% Effect From This Idea
Convention is the big brother of consistency. If we keep things similar across an interface, people won’t have to obviously struggle as hard. If on the other hand, we all keep things as similar as possible across multiple interfaces, that decreases the learning curve even further. With the help of established UI conventions we learn to close screen windows in the upper right hand corner (more often than not), or expect a certain look from our settings icons. Of course there will be times when a convention no longer serves purpose and gives way to a newer pattern. When breaking away, do make sure it’s purposefully thought out and with good intention.
We like to win, but we hate to lose. According to the rules of persuasive psychology, we are more likely to prefer avoiding losses than to acquiring gains. This can be applied to how product offerings are framed and communicated. By underlying that a product is protective of a customer’s existing well-being, wealth or social status, such strategy might be more effective than trying to provide a customer with something additional which they don’t already have. Do insurance companies sell the payout that can be gained after the accident or the protection of the things we hold dear to us?
A good visual hierarchy can be used to separate out your important elements from the less important ones. A visual hierarchy results from varying such things as alignment, proximity, colour, tone, indentation, font size, element size, padding, spacing, etc. When these visual language elements are applied correctly, they can work together to direct and pause people’s attention within a page - improving general readability.
A visual hierarchy can be said to generate friction and slows us down from skimming through the full page top to bottom - for the better that is. With a good visual hierarchy, although we might spend a bit more time on the page, the end result should be that we register more items and characteristics. Think of it as as road trip. You can take the highway and get to your destination quicker (bottom of page), or you can take the scenic route and remember more interesting things along the way. Give the eye a place to stop.
Grouping related items together is a basic way of increasing fundamental usability. Most of us tend to know that a knife and a fork, or open and save functions can typically be found more or less together. Related items are just meant to be placed in proximity of each other in order to respect a degree of logic and lower overall cognitive friction. Wasting time looking for stuff usually isn't fun for people.
When dealing with forms and errors, it’s usually better to try to detect if something isn’t correct and show it sooner rather than later. The famous interaction pattern highlighted here of course is inline validation. By showing an error message as it happens (say to the right of the input field), it can be corrected right then and there as it appears in context. On the other hand, when error messages are displayed later on (say after a submit), it forces people to do some additional cognitive work of having to recall what they were doing from a few steps back.
Being more forgiving in terms of user entered data, computers can move one step closer towards becoming a bit more humane. Forgiving inputs anticipates and understands a variety of data formats and thereby makes your UI more friendly. A perfect example of this is when we ask people for a phone number which can be entered in so many different ways - with brackets, extensions, dashes, area codes, and on. Have your code work a bit harder so that your users won’t have to.
Urgency is a persuasion tactic which can be applied in order to make people act now rather than later (or possibly never). It works because it often implies some degree of scarcity, as the thing which is available now might not be available tomorrow. It also works because it touches upon loss aversion in the same way - as we don’t like losing out on opportunities. Urgency might also be one of those strategies that some look down upon as a pushy and dirty way of getting people to act. Nevertheless it’s available as a strategy to use and as long as it’s honest it’s valid. Be careful of creating a false sense of urgency, since when your audience calls you on it, it will backfire.
When there is less of anything, we tend to value it more. Scarcity suggests there was once more of something, today there is less of it, and tomorrow it might shrink yet even further. Think of a wholesale store vs. a boutique one and then look at how their pricing often compares. Then think back to the wholesaler and notice one scarcity strategy that they apply nevertheless, in light of having a wider product offering. Some wholesalers or mega retailers will actually do limited products that are only available until they are bought out, without replenishing the supply. In software, we often forget about scarcity because more often than not, bits and bytes can be so easily duplicated and there is so much abundance with the help of copy-paste. Nevertheless, in the world of UI, scarcity can still be used to show limits or bottlenecks that relate to the real world. Think of the limits behind the number of tickets you can sell to a webinar, the number of clients you can service in a month, or the number physical products you might have before the next batch is produced. All these things can be shown to the user to evoke action while being more informed. Think supply and demand. Think less is more.
Evidence Exists For A +10% Effect From This Idea
Links, forms and buttons can all be made easier to click on if their size is increased. According to Fitt’s Law, we need more time to click on something with a pointing device, the further away it is and/or smaller it is. For this very reason, do consider increasing your form fields, calls to action, and links. Alternatively, it's also possible to keep the visual element looking as is, but instead only increasing its hotspot or clickable area. A popular example of this are text links on mobile devices or within navigation menus, that are stretched with padding.
Speed matters. Be it how quickly a screen loads initially, or how fast it responds to a user action can both affect whether people will wait or not. It has been suggested that each second longer affects drop off, bounce and conversion rates.
Hence one tactic is to decrease the load times of our screens technically by optimizing code and images. Another tactic is to decrease the perception of load times by applying some psychology. Two tricks can be applied in order to make people feel like they aren't waiting for so long. Showing progress bars which set expectations is one. Keeping users occupied while something is loading, is another (think walking to the conveyor belt a bit longer instead of standing beside it and tapping your foot).
When you have a high use product, it’s always good to consider those advanced users who keep coming back and spend much time with your application. People will often seek ways which allow them to perform repetitive task quicker and keyboard shortcuts are one such way of providing this. Hot keys, once remembered, can speed up task performance over point and click graphical user interfaces dramatically. One example of this is the use of the J and K hot keys for next and previous which have been popularize by applications such as Gmail, Google Reader (now history), Twitter and Tumblr. Buttons aren’t bad, but they can be complemented with shortcuts for those fast fingers.
Evidence Exists For A +8.8% Effect From This Idea
There is more motivation for getting things done the closer we are to completion. For this reason, some companies give away prestamped coffee cards. Or in the virtual world, others reward the signup process as a completed item on the list of things to do. Stephen Anderson labeled this similar pattern as Set Completion in his Mental Notes, while more formally, it can be also referred to as the Goal Gradient Effect. Either way, do make people progress or feel like they are progressing sooner rather than later.
Evidence Exists For A -0.1% Effect From This Idea
Evidence Exists For A +9.4% Effect From This Idea
The modal window or dialog box is an attention hog, like it or not. Grabbing someone’s attention can be a good thing, but modal windows often come with some nasty problems. First of all, modal windows can block users from performing other functions or referencing information from behind the modal. They can also be difficult to get out of for some users. Dialog boxes are also at fault for often halting the computer from completing given work which can be irritating if the user is away. Finally, modals may frustrate with interruption if someone is deep in their task and not ready to take other actions. Why not consider more subtle inline or slide out methods which might be less obtrusive and can equally capture people’s attention?
Simplicity is often valued in design as it somewhat correlates with ease of use. Too much clutter may burn through our limited attention pools and the more parts there are, the more room for usability issues to creep up. One way for the user interface to achieve the same with less is to make UI controls more multifunctional. That is, you take one control and you squeeze two or more functions into it. As one example, we can combine a search input field with a filtering mechanism that affects a list below right as you type. This removes the need for additional filters. We can also combine a ranking display with a rating onhover function to further avoid additional parts.
Multifunctionalism isn’t all that golden though. Although it simplifies, it does so at the cost of discoverability. Functions which are less visible up front run the risk of not being found. It’s therefore probably better to reserve the multifunctional approach for repeat visitors which can deal with a slightly higher learning curve. Also, use it wisely and don’t over do it.
Evidence Exists For A +13% Effect From This Idea
Evidence Exists For A +3.3% Effect From This Idea
Evidence Exists For A +21% Effect From This Idea
Evidence Exists For A -7% Effect From This Idea
You can let people judge the value of your product completely on their own, or you can help to do it for them. If you decide to make use of human irrationality, you can show the price in a way so that your offering becomes perceived as more valuable. In the simplest way you can start off with framing words such as "only", "affordable", or "small fee of" alongside of the price. The price then can also be broken down into a per unit price (ex: 30¢ per page rather than $30 for a book, or $1 per day instead of $30 per month for a membership). Further, the infamous prices ending in a "9" instead of having a round number can also be used. Finally, prices can be shown with fewer digits ($30, instead of $30.00) for an additional effect of illusion.
Evidence Exists For A +0% Effect From This Idea
A user interface can do mathematical calculations, large or small, for users and thus remove unnecessary friction. As one example, let's say that some application shows used up credits out of an available pool. It might be more meaningful to calculate for users how many remaining days that actually is before their application stops functioning. Or yet an even simpler and more popular example when we try to understand how recent or old multiple rows of data really are. In this case a relative time stamp of "3 min ago" has more meaning and requires less effort to comprehend than say an absolute one of "4:37pm, Sept 2". Take out the pain of having to do the math.
People may be persuaded to act more often when their choice or free will is explicitly reaffirmed. There have been some studies done on the "But You Are Free" technique with cases where the effect to act sometimes even doubled. The idea is to call out an action or decision, followed by a simple statement suggesting that "it's your choice", or "you are free to refuse", etc. The persuasive power of this technique seemed the strongest when the request was made face-to-face and/or the request to act and reaffirmation were closer together.
Variable rewards are great way to get users hooked. When we (or mice at least) press levers that spit out pellets unpredictably (as in sometimes not spitting out anything), then such a schedule of reinforcement has the highest rate of response in the shortest amount of time. If eating pellets isn't your thing however, then please consider how addictive email checking can be as we never really know when those "rewarding ones" really do appear (assuming you receive more than just the same old email from Joe everyday).
Evidence Exists For A +29.7% Effect From This Idea
User interfaces sometimes require us to make comparisons of product characteristic which directly affects ease of use. There are a number of ways in which such comparisons can be made more understandable and therefore help users make a smoother decision.
First of all, limiting the number of things or properties to compare at any given time is one simple way of alleviating confusion.
Secondly, spacing out properties should help comparison making, instead of mixing various properties into a single column.
Thirdly, asking the user to make a single decision (instead of threaded or multiple ones at the same time) should remove additional cognitive friction.
Overall, the purpose of a table should be to show the difference of the most relevant attributes and help make a single decision.
Evidence Exists For A +160% Effect From This Idea
It's nice when people set expectations for each other. It doesn't take much effort for a person or interface to inform someone when the next task will be completed. You are on step 1 of X. Your choice will result in Y. You will receive something before Z. All those little promises not only inform but also build trust. Unhelpful interfaces on the other hand can come off a little cold as the user is kept in the dark.
Why should everything always have to be so serious all the time? It doesn't. You can always lighten up by throwing in a joke or something playful here and there. Adding humor to your UI might or might not work. When it does work however, humor can build up a stronger human relationship between you and your users/customers. Having an amount of such chuckles and smiles built up and stored away for the future is probably a nice to have. When the times get tough, people who have a stronger and more personal relationship with you may be more prone to forgiveness during erroneous situations.
When we perform an action or task, we want to know that it has been successfully completed. Feedback provides this closure to any action. It can be as subtle as the drying of ink on a piece of paper, or as blunt as a dialogue message confirming that one of your emails has been delivered. Silence on the other hand breeds uncertainty. Did it really work? Did I hear a click? Was the button really pressed? Should I try again? Feedback answers all these questions. It is a very valuable and essential element for any successful interaction.
Feelings of “yes this is exactly what I was looking for” may be brought on by some form of intent anticipation by the user interace. Having a UI which correctly guesses what the user is after, should in turn bring in more smiles and dollars (or at least less frowns). As one example, Amazon.com has achieved this at the micro interaction level with their mega drop down menu. The menu essentially detects intent of the correct sub-menu to display using some interesting geometry and front-end engineering. It saves the user the pain of moving the cursor across a diagonal line towards a desired sub-menu, only to discover that the sub-menu changed to something else or disappeared altogether.
Detecting the user’s intent however is a balancing act that may be easier with simpler and scripted interactions. The playing field is still wide open for more advanced intent detection which might require stronger artificial intelligence.
White space can definitely make content and/or data more readable. When elements are slightly separated away from each, they begin to be allowed to be perceived individually. This can be good for lists, tables, paragraphs or any sets of elements on a screen. One common way of applying white space is with extra padding all around an item. Without adequate padding on the other hand, elements begin to blur together into indistinguishable wholes. So when readability is concerned, padding may help.
Evidence Exists For A -12% Effect From This Idea
Evidence Exists For A +6% Effect From This Idea
Progressive Reduction has been discussed by LayerVault. It's a rather simple idea that as users learn to use your interface or application, the functions which where more important in the beginning, become easier or less important over time. For example, certain onboarding related calls to actions may be moved further away as room is made for other content. Or, icon labels may become hidden as the meaning of icons becomes understood. People learn to use an interface and the progressive reduction pattern respects that.
Evidence Exists For A -11% Effect From This Idea
Evidence Exists For A +3.9% Effect From This Idea
Evidence Exists For A +0.9% Effect From This Idea
There is nothing worse in the world than double scroll-bars. Seriously, it’s as cognitively taxing as looking at a map through a keyhole. Some of these weird situations might be caused unintentionally due to static layouts when looking at UIs on smaller devices. One way around this problem, of course, is with responsive layouts that adjust automatically for various screen shapes and sizes.
"All meaning exists in the context of polarities" writes Dondis in A Primer of Visual Literacy. We come to understand darkness in the context of light, belonging in the context of isolation, order in the context of disorder, large in the context of small. Picking a stance within such polarities and expressing them clearly through visual language, helps people understand the intent. The biggest disruptor of meaning is ambiguity. When things are somewhat different, yet not really, it creates confusion as our minds try to make sense of the visual. This is why it's better to be purposeful about grouping things (or spacing them farther apart), using more diverse font sizes (or making them exactly the same), and using more diverse tones (or making them exactly the same). Trying to figure out if a visual style was by mistake or by design is stressful and taxing on the mind.
It’s inevitable that people, the interface, or your business will make mistakes. Allowing correction to happen in such situations will ease the pain of having to start all over again. Perhaps a user has logged in with his friend’s account (for better or for worse), and would like to re-authenticate. Perhaps the user changes his mind about not wishing to order 8, but 7 oranges instead? Perhaps the user’s shipping address has changed last month and a change is needed. The UI should allow users to make such subtle corrections - it’s only natural.
Social commitments may be a form of self inflicted motivation, so to say. We tend to have a preference for a consistent self-image. In this regard, making a public or social promise of some sort, begins to hold us accountable. This has even been shown to be effective in the context of weight loss. Therefore, when we tell people that we'll do something (or take publicly visible actions), there is a higher chance that we'll actually follow through with consistent actions in the future.
Sometimes things will just not work out as intended during the process and users might wish to simply try again. Perhaps a file upload fails, or perhaps we’d like to reprint another version of a document without making any changes or corrections. The UI could make such redos and retries super easy or difficult. When the outcome of an action is not satisfactory and there is no way to try again, stress (and lost conversions) will surely follow.
The amount of choice should be questioned and possibly limited, as first hinted in idea #7 and recently rediscovered in an awesome write up (by ConversionXL). Apparently the more choices there are, the harder decision making may become. What's even more interesting is that with more choice our satisfaction is also at risk of diminishing as expectations, regret and self-blame tend to increase. However, not all choice is all that bad as it may also reaffirm freedom. As the famous jam study (with less choice leading to higher decisions) is still struggling to be replicated, we prefer to take somewhat of a middle ground approach and test this further.

Gradual reassurance emerged from this homepage test that turned out to be even more effective than video. Datastory #25 covers this design experiment in detail for you to learn from what took us a whole 5 months to execure.
Removing a coupon code can lead to more sales as we discovered in this amazing shopping cart test. The test contains interesting findings, a full story on how we ran it, as well as 3 amazing UI sketches for how to include coupon fields (if you really have to). Make better design decisions with Datastories.