The average browser doesn't really know (or care) about the design work that goes into every website that they visit. They're only aware that they like one site, hate another, and are so-so about others. They generally don't know or understand why. In most cases the response is subliminal, which is exactly what you're aiming for. Good UX is invisible.
We've mentioned in a previous article that one of the top reasons visitors abandon their shopping carts is because of bad UX. It may be a perfectly functional website with all the elements necessary for a customer to find, select, and buy items, but if it doesn't provide an enjoyable experience then you're unlikely to attract many repeat customers.
Perhaps it was a hard time finding a particular button. It could be the load times were too long, or maybe they just got tired of scrolling. Nearly anything can end up causing a bad impression. In such cases, it behooves you to understand how properly designed UX patterns work.
Just to clear up any confusion, you need to remember there's a difference between the UI (user interface) and the UX (User Experience). UI is the actual platform you're using and UX is the impression your visitors have after browsing your site. A visitor who likes what he or she finds on the site is most likely to stay longer and come back more often.
It's like ordering steak from two different restaurants: You want to be the Kobe beef versus the steak and eggs at Denny's.
A meal is only as good as its ingredients, and the best ingredients to an eye-popping design are attractive and functional UX patterns. Like these:
On this page
- 19 UX Patterns
- Navigation tabs
- Lazy registration
- Breadcrumbs
- Pagination
- Vote to promote
- Progress bar
- Infinite scrolling
- Fat footer
- Input hints
- Autocomplete
- Discoverable (Hover) controls
- Recommendations
- Top menu
- Easy registration
- Primary Actions
- Search parameters
- Conversational Interface
- Hub and spoke
- Visual framework
1. Navigation tabs
Not exactly groundbreaking, seeing as tabs have been used since the first organized filing system was invented, but you can't argue with skeuomorphism when it works. You may want tabs on your website if you have three or more categories with several subcategories and you want to keep your home page available for promos, announcements, and featured deals.
2. Lazy registration
In general, people are reluctant to register on a site if they're unsure about the value of doing so. The lazy registration pattern addresses this issue by deferring registration until after the browser has had a chance to check out the site. While some may click away if they don't like or need what they see inside, those that do register are more engaged. And engaged visitors are the ones who buy, which is the whole goal, right?
3. Breadcrumbs
Most people don't realize that the Home>Blog>Articles they see above their content are actually called breadcrumbs, a pattern that lets you know where you are in the website. This is especially useful when your categories go down several levels because it makes it easy for the user to backtrack several steps without pressing the back button multiple times.
4. Pagination
If your customer searches for a general category, i.e. smart phone, your website might yield a lot of results that you won't want to load on a single page because that tends to overwhelm users (and take a long time). Having pagination in your design can be handy so you can break up the search results in chunks of 5 to 10 items.
5. Vote to promote
Consumers are all too happy to give answers about what they like, so a vote to promote pattern on your online store will definitely increase engagement. It accomplishes the same goals as a comment box, but it takes much less effort to click once, rather than taking time out to pen down your thoughts. It is often found in community-based content sites, but there is no reason why it won't attract participation in an eCommerce store.
6. Progress bar
If you really need multiple steps to process a purchase, then this design pattern will subconsciously soothe your customer by showing them light at the end of the tunnel. This will also work for websites that require an extensive registration process.
7. Infinite scrolling
Infinite scroll is a pattern alternative to pagination where the next set of data loads when the user reaches the end of the current set. Increasingly popular for product pages and online portfolios, infinite scrolling can be wonderful if you've got constantly updated information for your user to browse through.
8. Fat footer
A lot of websites are going this direction these days, and an online store can also benefit from the trend by keeping customers focused on the choices that they have available. A fat footer design contains links to major or featured pages on the site, found at the bottom of the current page.
9. Input hints
Sometimes you just need to give them a nudge. Some fields may seem complicated and leave your customers at a loss, so your website should be designed with helpful hints always near at hand. A simple option is to put some text under each field in your form. That way you give them an idea of what you need.
10. Autocomplete
Most visitors are used to the predictive text that comes up when they type the first letter into the search bar. Seeing their previous search terms appear on the drop-down menu reinforces their impulse to make a purchase, and breeds a sense of familiarity. It makes it easy for them and it's a great way to subtly cross-sell your popular items.
11. Discoverable (Hover) controls
Internet clutter is ubiquitous. Most visitors prefer clean layouts, but they still require the target destinations on your website to be easily located. Though it might seem difficult to reconcile these two needs, there's a simple solution: a discoverable controls pattern, where certain sections of a webpage (ones that are secondary to the main activity) only become visible when it is relevant based on the user's selections. In this example the controls don't appear until you've scrolled over the picture.
12. Recommendations
Amazon is known for this, but most successful e-commerce websites are quick to take advantage of having a recommendations pattern, which entices users to buy. Consumers also appreciate this because they may need suggestions to complete a set of books, or to see what other folks who share similar reading habits are into.
13. Top menu
Unless a user is already familiar with your site, the first thing they're liable to look at is the top of the page to find their bearings. Navigation bars can be sticky or static, but wherever users go on your site, they need to be able to make a quick detour to the other most traveled sections at a moment's notice. If your nav bar doesn't scroll along with you as you peruse the area beneath the fold, and if your front page contains a ton of content below what's immediately visible, you'll want to include a button that brings you back to the top.
14. Easy registration
.jpg)
Keep your registration short and simple, and more people will oblige you. Ask for the bare minimum. If you need more info, you can always ask for it later on; by that time you should have established a relationship and they are more likely to give you what you need. Until then, just gather the important stuff. Name, email, and if they're making a purchase, preferred method of payment.
15. Primary Actions
We're treading into the deep end of the design/marketing waters when we talk about color schemes in your UX pattern, but it is quite fascinating. It's been established that certain colors register first when used in marketing materials, and Calls to Action are often larger and in a contrasting color. Any paths to conversion should always use large brightly colored buttons, while the “decline” buttons are smaller and less noticeable.
16. Search parameters
After scanning the top menu, the average browser will look for a search field. This presents the perfect opportunity for you to acquire valuable data about your visitor's interests. For best results, make your search parameters are user friendly by giving them options about how they want to make a search. Common filters include price, category, size, color, etc. It really depends on what you're selling, though.
17. Conversational Interface
Because online marketplaces are essentially anonymous, creating rapport with your site visitors can be difficult. Designing your website so that there is a conversational interface pattern makes you seem friendlier. The approach is simple: think of your website as a venue where you meet and greet your customers. Your content should seem to be part of an ongoing conversation, hence the use of the user's name, “your” and “you” (i.e. “Here's what's happening to your account.”). Personalization is always a good idea.
18. Hub and spoke
A hub-and-spoke configuration means that a page presents only essential information to encourage users to focus on a single task, and then additional options open up as they complete a given task. Think about choosing a shirt design on a website: first you'd choose the design, then the color, and finally the size. Essentially, it requires a user to navigate to a main page (the “hub”) in order to navigate to any other page (the “spokes”). This cuts way down on cluttered space.
19. Visual framework
Last but not least, focus on keeping your site consistent. Most people would compare this pattern to a template: that is, the aim is to produce a website with certain elements that are consistent throughout the entire site regardless of the number of pages. It's a look that makes it easy for users to recognize the site, no matter what page they're on, but not necessarily because the pages are identical. Key elements that are usually consistent are fonts, color scheme, and certain “landmarks,” such as the exclamation point in Yahoo! It's great for brand building.
That's our list. What are your favorite UX patterns? Let us know what defines your user experience in the comments.
Best regards
Maria Luisa Morales