Intuitive UI & How it Can Help Improve UX

A user interface can be called intuitive when users understand its behavior and effect without the use of reason, experimentation, assistance, or special training.

It is a known fact that humans always correlate things in the virtual world to those of the physical world. When it comes to sailing chartering, they always look for patterns in order to understand how certain things work.

There is an expectation of how things on a website works, and if those things change from one page to another, it doesn’t only create confusion, but also frustration.

What is an Intuitive UI?

This is why, when it comes to heavy web pages, it is always advised to display a part of the content or a loading bar to keep users on the page.

what's intuitive UI

This is something that UX designers could leverage upon — the human tendency to seek patterns.

To counteract the latter, you can incorporate tooltips or integrated help messages that would guide users how the website works.

Now that we have a little understanding of what intuitive really means, let us go through the different aspects of creating a familiar and intuitive UI.

For example, if something looks like a button, we know that if we click on it, it will prompt some action. Similarly, if there is a link, we know that clicking it will result in either opening another web page or take to a different site.

However, if we come across a UI, which is not only difficult to navigate, but also contains triggers that sound unfamiliar to us, then that UI is possibly non-intuitive.

Creating a Familiar and Intuitive UI

In the end, the fact remains that a website that is difficult to figure out or has several distractions will never become intuitive. Other than keeping an eye out for usual design issues like picking the right color scheme, or the perfect content structure, you also need to ensure that your design is intuitive.

Usually, we do not like changes to common patterns. For example, a Windows user may find it awkward, after moving to OS X, that the Minimize, Maximize and Close buttons are on the left side, of the window. The same is true vice versa.

1. Don’t Reinvent Patterns

A non-intuitive design is similar to this scenario in that it obstructs the focus of the user with an unfamiliar situation, with no obvious solution. When it comes to website design, the design is intuitive as long as the user is able to complete the task without any interruption. On the other hand, unintuitive design shifts the focus of users to elements that are not related to their task.

don't reinvent patterns

2. Be Consistent

The way the adage goes is that if you give the customer time to think, they will most probably not buy. The same holds true when it comes to website design. If a page takes “too long” to load, then there is a huge possibility that the user will won’t wait it out and will just move to another website.

One cannot focus enough on the aspect of consistency when it comes to creating an intuitive design. While designing a website, there is a need to have consistency between pages.

If you see two user experience designers talking to each other, the topic of discussion would most probably be revolving around “intuitive user interface”. For any design project these days, the foremost criteria is probably on how to make it intuitive. In fact, intuitive has become the most common adjective of the user interface.

3. Ensure Minimal Steps are Required for a Task

Flipping between using a top navigation bar for one page while using a sidebar with navigation links on another page is an example of how to cause needless distractions and frustration that will ultimately drive your visitors away.

It is a seamless way of offering help while someone is actually using your website. This doesn’t only saves them time, but also makes the entire user experience more pleasant, less confusing and more effective.

4. Use Tooltips & Integrated Help Messages

In this post I will try to shed some light on the hidden facets of intuitive user interface.

Even a small decision like lacking the discipline to be consistent with the position of navigation bars is crucial in making your site design intutive.

use tooltips

Nobody wants to spend a whole minute to create an account. This is why you need to streamline the signup process and ensure minimal steps. Simplification and the reduction of redundant steps are key to retaining and converting visitors.

This is one of the most critical aspects of an intuitive UI. The fact remains that it is difficult to create a universal UI. While for some users your UI might be intuitive, there might be others who would disagree.

5. Make Sure the Website Loads Quickly

We are accustomed to certain patterns, and moving away from these patterns is just not user-friendly.

Given this, it is reasonable to ask what it means for a UI to be intuitive. Although every other designer uses this term, it’s hard to find a specific and meaningful explanation that defines intuitive UI properly.

making sure website loads quick

Conclusion

Editor’s note: This post is written by Manish Bhalla for Hongkiat.com. Manish is the founder and CEO of FATbit Technologies, a web agency that builds cutting-edge ecommerce solutions for startups. Manish counsels businesses on technology, online marketing tactics and help startups formulate the right strategy for their individual needs.

Imagine that you are looking to buy a luxury car. You head to a showroom. The salesperson takes you to the car, and you take a step forward to get in it while admiring its beauty. Just as you try to open the door handle, you realize that there is no door handle and instead of admiring the car, now your primary focus is figuring out how to get into the car.

User experience is often mistaken as visual appeal; in fact that’s only one part of it. The other significant factor is how well your product gets adopted by users. If you fail to effectively offer an intuitive UI that is easy to understand and can help complete intended tasks, then your visitors will probably move to a competing product that does.

How to Use CSS3 Transitions & Animations to Highlight UI Changes

Although CSS3 offers great ways to build sophisticated animations, it’s usually harder to create them than transitions, that’s why there are many great animation libraries out there, which can facilitate our work.

In the example below you can see a cool animated dropdown menu. The animation starts when we click on the button. This is achieved by adding extra classes to the list elements with jQuery when the click event occurs.

Bridget Riley Fall, 1963

Fall (1963) by Bridget Riley, Tate Modern, picture courtesy of Flickr.com

Transitions and animations are both used to visualize changes in the state of an HTML element by modifying one or more of its CSS properties.

Transitions

We could use the shorthand animation property as well, or could define the keyframes with the more simple from {} to {} rule in the following way:

We can alter more than one CSS property in one transition, in this case the code above would be modified like this: transition-property: background, border;. We can also use the transition-property: all;, if we don’t want to specify each property separately.

We can choose the shorthand transition property as well. If we do so, we always need to pay attention to the proper order of the inner properties (see the syntax in the docs).

The most important thing with both transitions and animations is that we always need to specify the CSS properties that will be modified during the state change. With transitions it looks like this:

If we want to visualize state changes with more complicated movements, or if we don’t have an explicit trigger, e.g. if we want to start the effect when the page loads, animations are the way to go.

  1. They always have a beginning and an end state.
  2. The states between the start and end points are implicitly defined by the browser, we can’t change that with CSS.
  3. They require explicit triggering, such as adding a new pseudoclass by CSS, or a new class by jQuery.
 .element { background: orange; transition: background 3s ease-in; } .element:hover { background: red; }

If we want to create an animation, we are required to specify the related keyframes. The CSS properties need to be modified in separately defined @keyframes at-rules. Here is an example of how we can do this:

CSS3 animations and transitions worked with vendor prefixes for a long time, which we don’t have to use any more, however the Mozilla Developer Network still recommends to add the -webkit prefix for a while, as the support for Webkit-based browsers only recently achieved stability.

Animations

The two main techniques CSS3 offers are transitions and animations. In this post we will take a look at what they are, what is the difference between them, and how you can make use of them.

 a { color: orange; } a:hover { color: red; } a:focus { color: blue; } a:visited { color: green; }

Transitions are used when an HTML element changes from one predefined state to another. CSS3 introduced new properties that allow more sophisticated visualizations than before, such as timing functions or duration control.

Changing CSS properties of a link on hover (or focus, or click) is the oldest and simplest form of transitions, and it existed well before the CSS3 era.

 .element { background: orange; transition-property: background; transition-duration: 3s; transition-timing-function: ease-in; } .element:hover { background: red; }

We specified the background property, because this is what will be changed during the transition.

  1. they don’t require explicit triggering, they can start on page load or when another DOM event takes place in the browser
  2. they can be used in cases when transitions are used, for example when a new class or pseudoclass is added or removed (although it’s a less frequent use case)
  3. they require us to define some keyframes (intermediate states)
  4. we can specify the number, the frequency, and the style of these keyframes

Since then newer and newer approaches have popped up, such as the recently popular kinetic art that extends the viewer’s perspective by using multidimensional movement. Motion also appeared in computer science with the invention of the first blinking cursor in 1967.

The simplest form of state change visualization is altering the colour of a button or a link when it’s hovered on. When it happens, the element gets a slightly different style, which is usually noticed by the viewer as if something have moved on the screen.

The most important things you need to know about CSS3 animations include:

CSS Properties and The @keyframes At-Rule

 .element { position: relative; animation: slide 3s ease-in; } @keyframes slide { from { left: 0; } to { left: 400px; } }

The creation of more complex animations is its own form of art, if you are interested, you can read two of our animation tutorials on how to create an advanced marquee, and how to create a bounce effect.

 .element { position: relative; animation-name: slide; animation-duration: 3s; animation-timing-function: ease-in; } @keyframes slide { 0% { left: 0; } 50% { left: 200px; } 100% { left: 400px; } }

In the example above we created a very simple sliding effect. We defined the animation-name, then bound 3 keyframes to it which we specified in the @keyframes slide { ... } at-rules. The percentages refer to the duration of the animation, so 50% happens at 1.5s in the example.

In front-end development DOM elements were usually animated by JavaScript before CSS3 was released, and it’s a method that still works, but the new properties introduced by CSS3 allows us to enhance our designs with different effects and motion in a more intuitive way.

These new classes are animated with specified @keyframes rules in the CSS file. The extra classes are removed by jQuery when the user clicks on the button the next time, and the menu becomes hidden again.

You can see a beautiful example of smartly utilized CSS3 transitions below, in which the author reveals hidden information in a way that’s non-intrusive but still steers users’ focus on the new content.

For transitions we can use either the transition shorthand property, or 4 single transition-related properties: transition-property, transition-duration, transition-timing-function, and transition-delay. The shorthand property contains all the single properties in an abbreviated form.

When building transitions and animations, you need to know that not all CSS properties can be animated, so it’s always a good idea to check the property you want to change in the CSS Animatable.

Designers and artists have a long history of experimenting with motion, effects, and different kinds of illusions with the aim of adding an extra layer to their work. The op art movement began to use optical illusions in the 1960s to give the impression of motion.

Animations make it possible to define a more complex path by setting and configuring our own keyframes. Keyframes are intermediate points in the course of the animation, that allows us to change the style of the animated element as many times as we want.

We will take a look at the new CSS properties in the next section, after understanding how animations differ. For now, let’s see the most important things you need to know about transitions.

For animations there’s the animation shorthand property at our hands which stands for none less than 8 single animation properties, namely animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.


Utility Navigation: How it Influences User Experience Design

As you can see below, Reuters has positioned most of its utility tools into these two typical areas, the top right corner of the site, and the lower part of the footer below the content-based navigation. The unique solution here is the fixed extra footer with 2 utility items that designers thought to be the most important: “Login or register” and “Latest from My Wire”.

Two great examples of effective visual design can be found on Walmart‘s and Etsy‘s website. Designers placed utility navigation on the topmost of both sites, and highlighted it with colours that vary from the rest of the navigation, Walmart with a blue background, and Etsy with blue fonts.

How Utility Navigation Impacts UX

To design an effective and user-friendly navigation, we don’t only need to think about how to group our content into well-structured menus to enable users to easily find what they want, but also about how to design the tools they will need to interact with the site

If you take a look at the screenshot below, you can see that The New York Times informs users about the availability of 3 different editions: American, International, and Chinese, and also enables them to quickly switch between the three. This great example of smart utility navigation shows users less-obvious options they probably wouldn’t find on their own, in a non-obstrusive and elegant way.

They didn’t only place utility navigation on the top-right corner where users expect to find it, but they also divided it into 3 main groups: (1) a search bar, (2) user-related information (below the search bar), and (3) actions that users can perform on the site.

Washington Post for example displays utility navigation on its single post pages differently from on the homepage. This way users only meet utility tools that are relevant, and are not pestered with options that they wouldn’t want to use anyway.

AirBnB Utility Navigation

Thirdly, users need to quickly understand what they can do on our site. Visitors don’t necessarily know what they want, so we always need to provide them with information about the options they have.

It’s smart because, thanks to the visual cues such as the shopping cart or the search icon, customers can decide in the twinkling of an eye which group they want to use, and from then on they can ignore the other two. There’s only one group (“Your Account”, “Try Prime”, “Basket”, and “Wish List”) that has submenus that are also logically structured, and the different submenu groups are divided by discreet but visible separators to help users quickly find what they want.

Navigation that is not strictly related to the content, and helps users perform different actions is called utility navigation, and it’s a less widely discussed but hugely important aspect of user experience design. Search bars, login and signup forms, subscribe, sharing and print buttons, shopping carts, contextual menus, and tools that allow users to switch languages or font size are typical examples of utility navigation.

There are 3 utility navigation items that visitors may want to use site-wide. These are smartly included in the fixed top bar (search tool, “Sign In”, and “Subscribe”), but users don’t have to think about options related to single posts such as “Reading List” when they are browsing the home page or one of the category pages.

Washington Post Utility Navigation

There are typical placements for utility navigation where users intuitively look for these tools, as that’s what they’ve got used to on the majority of websites. Breaking web design conventions is considered bad user experience practice, and it’s especially true for utility navigation that, in most cases, is more about usability than creativity.

It’s interesting to note that the extra utility navigation area is still placed into a kind of footer where users would normally look for similar tools, so Reuters’ designers were creative in a way but still followed web design conventions to maintain usability.

New York Times Utility Navigation

Find The Best Place

Both sites emphasize the most important user actions with different visual design elements, Walmart uses yellow for the Search and the Sign In buttons, while Etsy gives a discreet blue border to the Sign In button, and includes a gray shopping cart icon above the Cart menu.

This is the only place where Etsy uses an icon in its utility menu, while Walmart displays an icon next to each item, but still doesn’t forget to include the necessary text labels right next to the icons.

Grouping utility tools into a logical structure is crucial if we want to build a site with a high conversion rate. This can be a challenge even if we don’t want to provide users with many options, but Amazon takes the complexity of utility navigation to the next level. Amazon has an incredibly complicated utility navigation with many options, but if we use Amazon regularly enough, it doesn’t appear so. This is the magic of smart design.

When we design utility navigation we need to decide how we want our users to interact with our site. We need to provide them with an interaction structure that fits our business goals, leads users through the customer journey, gives them easy-to-understand options, and provides them with a pleasant user experience.

Reuters Utility Navigation 1
Reuters Utility Navigation 2

Build A Logical Structure

The visual design of effective utility navigation needs to follow the famous KISS principle (Keep It Simple, Stupid). It’s recommended to provide icons with text labels, make controls look like controls, and visually emphasize the most important actions. It can also be a good idea to distinguish utility and content-based navigation by using a slightly different design.

Designing them is not as easy as it seems at first sight, it requires consideration to find out what elements we need, where to place and how to display them to make sure that our visitors can quickly find them and understand how they work.

Secondly, users don’t need superfluous utilities, as too much clutter distracts attention and reduces focus. What tools are necessary in our utility navigation and what are not depend on the nature of our site. For example it can be useful to include a Print view on a blog or a news site, but the same feature can be an unnecessary distraction on a forum board or a social media website.

Amazon Utility Navigation

Create An Effective Visual Design

First of all, they need to be able to quickly perform the actions they want. If we enable them to do so, customer satisfaction will grow, and pleased users tend to spend more time and more money on websites.

The 4 top menu items target the 4 main personas who usually visit AirBnB’s site: people who are interested in becoming a host (“Become a Host”), people who want to solve a problem that took place while they used the service (“Help”), new and returning users (“Sign Up” and “Log In”). AirBnB’s utility-focused home page also contains a quick search bar that is a crucial tool on an accommodation renting website.

The home page of AirBnB follows this UX principle, and its top menu only contains utility tools. It’s not a usual solution, but if we take a look at AirBnB’s incredible growth rate, it’s the perfect choice for them.

As utility navigation is secondary to content-based navigation in most websites, it’s frequently placed in less prominent but still visible areas. This usually means the (1) top-right corner of websites, and the (2) lower part of the footer. It’s a good idea to follow these conventions, as these are the places where most users look for utility tools first.

Walmart Utility Navigation
Etsy Utility Navigation


Four UX Design Techniques to Encourage User Engagement

There is no single answer on how to design (or fix) websites to enhance usability. Yes there are some things you can try but each site is a little different and the study of UX design is very complicated.

The best place to start is by researching UX design and the process of how users interact with an interface. From there you’ll be able to draw conclusions relevant to your own projects and ideally simplify your interfaces to their greatest potential.

When you’re forced to consider screen size, it places critical features in a whole new light. As a designer you need to choose which features are most important and how they should appear on smaller screens. This responsive design strategy takes time to learn but the best way is to study other websites and pick up techniques that you like.

reddit homepage design

It’s fair to say a good portion of Internet users browse from their mobile phones. Links that get shared to social sites like Facebook and Twitter are often visited right on smartphones and tablet devices.

Use contrast to draw attention towards certain page elements that engage visitors into a particular task. If your goal is to build more newsletter signups then your subscription box might have a bright animated signup button or a unique vector icon.

1. Use Contrast to Draw Attention

Different types of animations can imply certain behaviors. For example, when hovering over a button it might bounce up to show that it’s clickable. Error messages often shake to draw attention from the user.

The truth is responsive design works and it’s becoming more accepted by the design community with each passing year.

The secret lies in user experience and the consideration of how a website functions. Interactions stem from page elements and action flows that move from one page to the next.

smashing magazine newsletter signup

Every site is built with a handful of elements made for user interaction. Hyperlinks, buttons, input fields, sidebar widgets, the list goes on and on. But not all elements should be created equal. Some are naturally more important to visitor engagement and should be designed with higher contrast to stand out from other elements on the page.

The subject of user experience is vast and requires patience to fully understand. But the more you practice the more you’ll understand

2. Tasteful UI/UX Animation

If someone lands on your webapp and doesn’t understand how to signup right away, that’s a huge problem. It should be blatantly obvious to the user what your site does and how they can be apart of it.

Remember that UX animation should be visible yet subtle. Wild over-the-top animations are more for TV and movies rather than interfaces.

button animation states

This idea stems from high color contrast and the way humans process visual data in patterns. When something stands out from its surroundings whether by color, size, shape, or whitespace, it can appear more important based on context.

If you have the time it might be worth running a few A/B case studies to see which colors/elements play best together. Statistics are difficult to pinpoint but you’ll be surprised how much can be learned from a simple split test.

3. Responsive Design as a Requirement

But in truth it doesn’t matter how you plan out the experience. Just be sure that you’re planning the quickest and simplest experience possible. When it comes to encouraging activity you’ll want the important stuff to be implied by the design.

The best thing you can do is play around on websites you like and figure out what you like about them. From your experiences you can extrapolate consistent ideas and figure out what keeps you (and perhaps others) engaged on a website.

The goal is to capture attention by building an interface that lures visitors into performing some desired action(s).

animated responsive layout

Users are also expecting websites to be fully responsive so they’ll cater to any device screen. When a site doesn’t fit nicely into a mobile web browser it can be off-putting to the user experience.

But that doesn’t mean your interfaces should remain flat. In fact most users would rather have some type of animation because it gives the illusion of a smoother experience. Digital design is partially about creating an illusory interface, but the more realistic it appears, the more your users will want to interact.

4. Simplify the Interaction Process

I like to build UX flowcharts for each interactive page element whenever I’m sketching wireframes. These help to visually conceive how the site should look and function.

Smashing Magazine recently published one of the best posts I’ve read in support of simplification for interface design. It states that nobody wants to jump through hoops to use your website or application. People are only interested in the end result, and the quickest means to get there.

Encouraging users to stay on and use a website doesn’t always involve slimmer code or prettier graphics. Some of the simplest layouts like Reddit still keep users engrossed with the content, and thrilled to interact with the site.

For related reading on the topic of user activity, check out these posts:

In this post I’ll take a look at some UX design techniques that can be applied to improve user experience & increase user engagement. Note that these are not always applicable to every website and it’s more important to understand why these techniques work so you can use your own judgement.

This means every website should be optimized for mobile in some manner – preferably with a completely responsive design.

  • Breaking Web Design Conventions = Breaking the User Experience
  • Usability & User Experience Archives on Smashing Magazine
  • Web Design Concepts to Entice User Interaction

Wrap-Up

I recently stumbled onto a post entitled What Does Disney Know About Interface Animation. It covers the vital points of animation and how these play to the psyche of users interacting with a flat 2D screen.

I hope this article can get you started thinking about some common techniques for building highly usable interfaces. The best thing you can do is place yourself in the shoes of a typical user and try to determine the major flaws of an interface. And once you recognize a problem you’re already halfway to the solution!


UX Design: 10 Things Travel Websites Can Teach You

Therefore you need to offer an engaging content and layout on the home page if you want to keep your visitors on your site.

person with macbook

While selecting the best locations, hotels and scheduling your trip, it’s a good idea to pay attention to what works and what does not, what inspires you and what makes you immediately jump to another site. Your reactions, delights and aversions are all great hallmarks of the efficiency of the site’s user experience design.

To make the widget visually interesting the rating, the price, a small thumbnail and a short quote from the latest review are also included to give the maximum help to visitors to decide which accommodation suits the best to their needs.

The Difference Between UI and UX

Usability is one aspect of a more complicated notion called user experience. User experience involves everything that affects the experience of the user – either negatively or positively. A good UX meets every need of prospective customers but that’s not all.

The Hotel Reviews section is designed in a smart way that makes the content easy to digest: a small profile photo and the ranking of the reviewing user, the name of the reviewed hotel, a short citation from the review itself, and a rating icon that well suits to the general design of the site.

The concept of social proof is based on a psychological principle that says people are more likely to do something if they see others around them do the same thing. External validation is a great motivation for most of us, so wise designers build social proof into their sites in a way that encourages visitors to repeat the behaviour of their fellow users.

Related, recommended and popular product widgets are used by all the big e-Commerce players, so it’s not a big surprise that travel sites also take leverage of them.

The alternative of stock photos is high-impact imagery that provokes strong emotions in the users. And we all know that increased emotions lead to higher customer loyalty.

UX is not UI

IMAGE: University of Maryland

1. Give Users A Place to Start

On Booking.com’s home page everybody gets the necessary incentive and positive feelings to move on on the site before even touching the scroll bar.

When people talk about social proof they usually mean social media widgets like Facebook Likebox which is also a great element of well-designed UX, but TripAdvisor‘s home page provides a great example how other forms of social proof work.

The remaining space on the screen over the fold gives a lot of inspiration to the less determined: three big pictures of popular locations (Abu Dhabi, New York City, and Dubai) provide suggestions, an AJAX stream about the “Just Booked” trips shows what other users are currently up to, and there’s even a small section that ensures prospective customers about the free cancellation policy.

A Place to Start

LonelyPlanet’s home page is especially smart from the aspect of user experience as the thumbnails also serve as navigation while they give users an easily understandable visual key.

Peer pressure is one of the strongest motivations after all. TripAdvisor also keeps its visual content fresh by adding high-impact photos shot by users.

2. Make Your Navigation Obvious

“Keep it simple” is the UX principle that Lonely Planet seemingly followed on its home page. The most important topics that intrigue their users are arranged in a tidy grid of attractive thumbnails supported by one-or two words long headlines.

First and foremost, you need to give your visitors a place from where they can start. It’s usually the home page that receives the most clicks, not just because it’s the main entrance to a site but when users come from a search engine, the next click will most likely be the home page.

Obvious Navigation

The grid is responsive thus it works on every viewport. On mobile and tablet size the thumbnails look like icons of mobile apps which is a familiar layout to all mobile users, and familiarity is also something that gives comfort to visitors therefore raising their engagement with the site.

TimeOut designed its navigation system in such an intuitive way that gives visitors further incentives to explore the site. The small thumbnail right next to every sidebar item gives a visual key, the short description under the Food & Drink headline ensures visitors that they are on the right spot, the breadcrumbs make it super-easy to move on, and the top search bar helps users jump to the next location if they are bored with the current one.

3. Use High Impact Imagery

On TripAdvisor the engaging social content is built into a handy tab navigation with three sections: Hotel Reviews, Photos made by users and Forums. The title of the widget is “What travellers are talking about” which is less pushy than the average subtitle on commercial sites; it therefore catches the visitor’s eye at once.

High Impact Imagery

The tabs contain five different search forms related to the five areas (Hotels, Flights, Cars, Vacation Packages, Cruises) the company is involved with.

Reviews, ratings, directed and moderated comments, statuses, blog posts, personal stories, recommendations, all add personality to your site therefore introducing high-quality information your visitors can emotionally connect to.

4. Keep It Simple

The colourful icons, the highlighted links, and the specific data (such as “701,118 properties worldwide”) all make the users believe that they are on a professional website they can trust. The showcase of popular locations from Sydney to Dublin on the left-hand side and the small widget of the third-party ReviewCentre all support the experience and build trust.

Each element supports the other ones – a clear sign of great UX design.

Keep It Simple

Booking.com‘s home page proves that they understand their customers’ needs well. Just think about it. What do you want to do on a travel site? You either know where you want to go and want to look up the possibilities as fast as you can, or you are unsure about the location of your trip and need some inspiration.

Travel websites usually all use high quality pictures, but TripAdvisor takes it to the next level by encouraging users to add their own photos to each restaurant. This way TripAdvisor spices up its content with user-generated images that usually are more interesting for the average travel site visitor than photos taken by professionals.

5. Use Action Verbs

UX is not UI, it’s like an unwritten law. When you read about a website’s usability, you need to think about the user interface.

Has it ever crossed your mind that you can still grow professionally while you are planning your vacations? Popular travel websites, booking and checkout forms, trip planners and hotel timetables are all excellent sources to enhance your knowledge in the field of user experience design.

Use Action Verbs

After all what do you remember more? Something you did by yourself or something you just read in a book? See? Interaction engages you too. So if you want to increase your site’s user experience, don’t hesitate to use action verbs where they are appropriate.

Showing visitors the benefits they can gain on your site is always more user-friendly than pestering them with dry facts that makes them fall asleep.

6. Streamline Your Forms

UI refers to how easy it is to use a website (learnability), how fast users can achieve specified goals (efficiency), how easily they can recollect their memories about the way the site works (memorability), and how pleasant it is to use (user satisfaction).

Booking.com placed an overall search form on the left-hand side of its home page for those who are sure about their future trip. The visitors don’t have to waste their time browsing through irrelevant content. This leaves them with an increased determination and a boosted self-confidence.

Streamline Your Forms

The designers of HotelTravel.Com took one more step further and they placed the related products into a handy accordion that enables the user to group recommendations according to four different criteria (Best Value, Best Service, Best Room Standard, Best Location).

The popular accommodation-sharing social network, AirBnB uses them everywhere on its site. Belong anywhere, Rent, List your space, Discover places, Explore the world, See where people are travelling, Share your experience, etc.

7. Make Impact with Personal Stories

HotelTravel.Com solves the task in a very tricky and efficient way. Its recommendation engine takes the location the visitor looks for – in our case it’s Hong Kong – and shows some more hotel options recommended by other users. The related hotels are also the recommended ones, a 2-in-1 solution which is always a good idea.

Personal Impact

The adventures of real people are always more interesting than over-refined marketing babble. Your visitors don’t want to read the same tiring cliches they can read on your competitor’s site – they can even generate the same low-impact blether by themselves after all.

TimeOut.com‘s navigation is like a smart hostess: it gives visitors valuable help when they need it but doesn’t annoy them. If you take a look at the picture below, you can see that the navigation system has four different elements: a huge, easily recognizable search bar, a main menu with clearly defined items (City Guides; Film; Music, Arts & Culture; Food & Drink; About Us; Time Out Shop), a well-designed breadcrumbs bar, and a sidebar listing of the most popular cities.

GoBackpacking populates its home page with personal stories of its users which makes visitors immediately immerse in the content of the site without even knowing it.

8. Include Related Products

On Booking.com‘s home page we can see a smart utilization of this UX design principle. On the right-hand side of the screen you can see the “Why Use Booking.com?” section which includes six benefits that are all in accordance with the values of the average traveler (low price, board range of choice, ease of use of the interface, populated reviewing system, quality customer service, and 24/7 availability).

According to the user-experience research firm Nielsen-Norman Group:

As too complicated forms often lead to an instant abandonment the smartest thing you can do for your users’ experience is to streamline the forms on your site as much as it’s possible. What do I mean under streamlining?

Include Related Products

You can see an excellent example if you take a peek at Priceline.com‘s universal search form on their home page. Priceline’s search forms are hidden inside a handy horizontal tabbed navigation section.

9. Talk About Benefits

Less is usually more so it’s always a good idea to keep things simple, and focus on only relevant information. The world is so full of distractions that your visitors will surely be grateful if you save them from the unnecessary fluff.

In this article you can learn 10 lessons about user experience you can pick up from popular travel sites.

You can increase user engagement with the smart use of personal stories, like you’re actually experiencing it, on the home page of GoBackpacking.com.

Talk about benefits

The screenshot below is of one of TripAdvisor‘s restaurant profile pages. I’m sure that you already read that stock photos doesn’t make a good user experience: they usually bore visitors and don’t motivate them to move forward in the conversion funnel.

10. Provide Social Proof

You are most likely familiar with action verbs from career sites. Action verbs don’t only engage recruiters scanning through resumes but also websites visitors browsing through the web.

Of course these values are drafted in a more engaging way and come with links where prospective customers can move on. The “Why Use Booking.com” widget is in fact the enhanced version of the regular “Features” section of an average small business website but it includes many supporting elements.

The really cool thing here is that users don’t have to bother with stuff they are not interested in, they can jump right to the search form they need. Therefore they are not burdened with extra data fields, the form fields are kept to an absolute minimum, which means increased efficiency, reduced annoyance, and fast understanding – the best user experience ever.

Provide Social Proof

If you want users to stay on your site you need to provide them with an obvious and easy-to-use navigation.

Action verbs are incredibly efficient because they move users from a passive state to an active one. Positive experiences always require activity on behalf of the user; that’s why adventure parks are so popular.