A considerable amount of that success derives from the ongoing effort of Airbnb’s design team to create a user experience for its booking platform which surpasses that of other similar services.

Airbnb’s Landing Page design (above the fold) as I am typing this

As a designer, I was always astonished of how Airbnb approaches their product design challenges and delivers a product that converts, for years now. So in this article, I’ll try to identify what makes their landing page design different and why it is successful.

Visual Clarity and Minimalism

I strive for two things in design: simplicity and clarity. Great design is born of those things.” — Lindon Leader

Using colour contrast and shadows, the user interface is basically structured as two layers: The card, which contains the explanatory text and the Call-to-Action (CTA) button, forms the upper layer, while the rest of the page is perceived as the background layer.

Perceived layers of user interface

With little to no cognitive effort, users can identify the upper layer (card) as the area with which they can interact. The page as a whole does not overload the users with information, hence framing a clear interaction path for users who land on it.

Reducing the cognitive load the user needs for achieving his goals is of the utmost importance when designing for humans.

Let’s see how it compares to Booking’s landing page design, in terms of visual clarity, by using predictive technology:

Measuring optical clarity of the landing pages (above the fold) for Booking.com and Airbnb via VisualEyes plugin

More clarity contributes to easier and driven scanning of information. Two metrics that can determine how an interface is efficiently designed for human interaction is Visual Complexity and Prototypicality. The conjunction of those two metrics affects the aesthetics processing of the user significantly and, thus, defines how he will interact with the interface.

More complexity requires more cognitive load. More cognitive load means less user engagement and, sequentially, less conversion and profitability.

Key Takeaway:

Airbnb has set an interaction focal point; therefore users have already determined where they will have to “lay their eyes” in order to forage information.

The Double Z-Pattern

The Z-Pattern (for people that read from left to right)

Humans have a natural reading pattern, which is applied when visual stimuli are present. Following the natural flow of eye-scanning a layout, the Z-Pattern complements better single-purpose webpages that contain only one CTA.

This specific pattern “traces” eye movement of the users, thus allowing for strategic placement of visual elements.

So, Airbnb used the Z-Pattern.

Twice.

Airbnb is setting focal points for their users, using the Z-Pattern

By utilising this layout, Airbnb’s designers achieved to establish a concise visual hierarchy. Areas of interest that convey some kind of message are pinpointed and brought up to the user’s attention. Below you can view how Airbnb’s Z-layout translates into attention heatmaps:

Attention Heatmaps generated in Figma, using the VisualEyes plugin.

Attention heatmaps suggest that the selected areas are drawing the most of the user’s attention in this particular instance.

As it is shown on the right image, the Area of Interest, in which the Card is placed, stands out three times more than the focal point of the hero image, while the CTA Button on the bottom right of the white card is almost three times more prominent than the card itself.

Key Takeaway

Airbnb augments, even more, the pre-established interaction path, by driving most of the attention to the single action -clicking the button- needed in order to “dive deeper” into their product.

Read more on the Z-Pattern here.

Priming

“Priming is a technique whereby exposure to one stimulus influences a response to a subsequent stimulus, without conscious guidance or intention.”

In other words, priming takes place when taking one’s memories or mental associations and using them to influence his future behaviour towards an upcoming matter.

The first image (Hero) someone views when interacting with Airbnb’s website

Almost all websites/products apply the “priming” effect to their audience in some way. In our case, the Airbnb landing page design, visitors are subject to associative priming with the use of imagery. The design team is doing an excellent job in finding images that fit the company’s target group perfectly, so they can ensure that the desired emotions will be triggered.

Different target audiences, different hero images.

Which words pop in your mind when viewing the house on the left image? Maybe something like soothing, peaceful, refreshing, unique, care-free or even vacation-material?

Key Takeaway:

By “priming” their target audience, Airbnb’s designers use carefully-picked images to spark the emotions that could be associated with the subsequent expected experience: Staying in an awesome place for their vacation.

Read more on Priming from NN/g here.

Simple, strong and effective language

The text serves two purposes:

1. Validate the reason a user visited the website in the first place — “I’m where I was supposed to.”
2. Set a user goal — “Now I should search for places I want to visit.”

Using simple and clear language when communicating messages is essential in web design, as it establishes that your audience will not misinterpret your offering. Remember that communication is a “two-way street”:

“How well we communicate is determined not by how well we say things, but how well we are understood.” — Andrew Grove

Airbnb avoids unnecessary jargon, while choosing a set of words that their target audience will comfortably understand.

Key Takeaway:

Text content was carefully selected to disclose a specific message and the value of the product as quickly as possible, with few words in the play. All that without endangering that their audience will not understand the offering.

Conclusion

Insightful design is human-oriented and drives human actions and emotions. Airbnb’s design team found a very subtle -almost transparent- way to direct users’ actions on their website. The framing of the experience was so delicately designed that it accelerates interaction while keeping the primary user goal in mind.

Thanks for tuning in!

Written by: Thanos Dimitriou (via Medium)
Posted by: CueCamp

The post How Airbnb drives users’ actions with their landing page design — a UX analysis appeared first on CueCamp.

User-friendly Experience + Simplified Buying Journey = More Sales

For the business owner, a well-designed e-commerce platform allows them to run their business easily, and can help streamline daily operations and customer service calls. Following are some tips and best practices to follow to help grow both organic traffic and sales conversions.

Search Engine Optimization (SEO) and UX

User Experience and SEO are critical components of any e-commerce site, especially as industry verticals are becoming more competitive. Digital advertising prices continue to rise and generating organic traffic is essential. In addition, cross-functional expertise is required to build a website that has good UX and SEO, as these fields continue to overlap. Google algorithms are becoming better at reading page content, placing priority on well-designed content that is not artificial. Prior black-hat tactics to raise search rank, like loading page footers with keyword-dense text, are now causing page ranks in search engines (like Google or Bing) to drop. Driving organic traffic can feel daunting and will take time, but will pay-off in the end with good SEO practices.

Website Sitemap

Part of good UX and SEO involves a well-designed sitemap. A sitemap reflects the website page and navigation structure, and hierarchically organizes website content. Adding a sitemap to Google Search Console is important for any e-commerce site, so that search engines crawl and understand product information. Google will be notified to any changes that you make to your site, which should happen on a frequent basis so content does not become stale. A sitemap not only makes the new content you post discovered quickly by search engines, but is reflected in the website navigation to users (helping tell them about the content on your website).

Simplify Page Content (and Clutter)

Clear, simple to understand content can raise engagement with your audience. In many instances, “less is more” – as said by Ludwig Mies Van der Rohe, a German-American architect that pioneered the minimalist movement. Your website visitors appreciate you communicating your message in a simple, yet efficient manner.

Similar to a cluttered advertisement, websites with distracting content, too much text, or an unclear message will lose their effectiveness. Over time, more and more things fight for our attention, and the average user has a shorter attention span. Users are willing to spend less time figuring out what you’re trying to get across, so get the job done with simple, clear messaging on your website. Design each page using proper keyword research and ensure landing pages have a clear engagement goal in mind so that your content has a purpose.

Optimizing Website Structure and User Journey

Supporting the intentions of website visitors is critical to raising conversion rates. Whether the goal is to sell a product or communicate an important piece of information, users should be able to fulfill their needs as efficiently as possible when using your website. If a product is difficult to find or a message becomes muddled, conversion rates will fall.

Part of optimizing the user experience (UX) of a website is to ensure that different types of users (personas) are able to achieve their goals efficiently: whether it be completing an action or finding information. A well-designed navigation structure will help the user journey, so that users can find what they want in the least amount of clicks (and with less confusion along the way).

Make Sure Your Site is Responsive

More people are becoming accustomed to purchasing groceries, clothing, home décor, and vehicles in the comfort of their homes. According to Forbes, Cyber Week had 62% of traffic coming from mobile in 2018, and fifteen percent of orders of were placed on mobile phones over the Thanksgiving holiday. Other sources place over 60% of website visitors (and climbing) using a mobile device like a phone or tablet. With this in mind, websites need to use a responsive design to be sure that content is optimized for mobile devices. The lack of an intuitive UX can result in user frustration, causing visitors to leave before completing a purchase on a website.

Website speed

Website performance contributes heavily to page rank and SEO, as well as usability. Research by Google describes how sites appearing on page one of Google display content in 1.19 seconds on average, while those on page two display primary content in 1.29 seconds. Some tools that can help you gauge and improve your website speed are Website Grader by HubSpot, Google PageSpeed Insights, and Pingdom Website Speed Test.

SSL (Secure Socket Layer) certificate

An SSL certificate authenticates your website to encrypt data that is being transferred from a website to users. SSL certificates ensure that a website is secure when visitors make purchases, which is important is the growing age of e-commerce. An SSL certificate encrypts sensitive user data, such as personal bank information, phone numbers and addresses.

Google Chrome, the most-used browser, has begun notifying users when a website is not fully secured with an SSL certificate. Fully encrypting data using SSL will provide users the best, most secure experience: ensuring that sensitive data is transmitted securely between the browser and web server. In a world where data breaches and security are becoming commonplace, users will trust and show loyalty to brands that value their privacy and sensitive information: highlighting the need for SSL certificates on websites.

Conclusion

Optimizing your website has a powerful effect on your marketing effectiveness, as well as your bottom line. Increasing conversions on your website, whether serving a goal of purchasing products or communicating information about your business (in a clear, efficient manner) will attract new customers and build loyalty. By optimizing the user journey for your website, different types of users can be served in a more effective manner.

The skill sets involved in designing a website continue to broaden and overlap. Experts in development, graphic design, SEO, UX, marketing and content writing need to know how their design decisions impact other areas of design. For example, designing a page around a keyword (SEO) impacts the website structure (UX), written content, and image content on the page (which can also impact website speed). A working knowledge of these fields is required to balance design decision trade-offs to make websites more effective, and this expertise can yield powerful improvements. In many instances, a simple analysis of a website by an expert can present some low-hanging fruit, which can have a huge impact on results.

To gauge how your website currently measures up, and identify some low-hanging fruit that can improve your website, request a free website marketing analysis from CueCamp. This report is in video form, generated by CueCamp’s team of experts to show the user-friendliness and marketing effectiveness of your website. Start out on the right foot, and reach out today.

Authors: Shannon Olear & Matt Sharritt, Ph.D. (CueCamp)

The post Boost Store Profits: E-commerce Experience Optimization appeared first on CueCamp.

Consider the ease of simply clicking a button within an attractive user interface, following the vehicle as it comes to your door and enjoying a smooth ride. For all the talk about their technology, their business model and their strategy, experience is what ensures customers continue to use the service. This idea has brought me to the concept of UX as strategy. It’s the idea that today, more than anything else, your UX will determine the success or failure of your software and your business.

A killer UX creates deeper customer engagement and loyalty.

A powerful and engaging UX doesn’t just make your product easier to use — it helps you engage more deeply with your customers, ensuring they stay loyal to you rather than looking to your competition. It builds brand loyalty and increases the chances that your customers will become your most effective advocates. Your UX also plays a key role in enrichment, ensuring your customers purchase additional products and services.

Your UX now forms the heart of your competitive differentiation.

I don’t believe I’m writing anything new in highlighting the importance of UX for software and applications. What is new, however, is how your UX can form the basis of your competitive differentiation. Building long-term, sustainable, competitive differentiation is one of the toughest objectives that executives face. In today’s digital world, the UX of your products and services plays a fundamental role. People engage with brands and companies via their software, and thus via their UX.

It is your brand, plus highly satisfied customers and fans, that will result not just in your business growing, but in building competitive differentiation. For example, it’s incredibly hard for other companies to match the loyalty of people who love Apple’s products and services. Even when other manufacturers build products that can compete on a technical and functional level, and that may even sell at lower price points, people remain loyal to the brand. Apple has been at the forefront of blending the concept of a brand with people’s identity, their image of who they are as individuals. Apple’s UX is at the very heart of this.

Making UX Your Strategy

At a high level, I recommend the following actions as you make UX your business strategy:

• Link your design metrics to your business metrics.

Those individuals responsible for the design of your software are now at the heart of the success of your business. As a result, we also need to ensure that their success, and that of your design, becomes linked to your business’s key performance indicators.

• Use the latest technology to build hyperpersonalized services.

Increasingly, in order to build these powerful experiences, organizations will need to use the latest technologies, from automation to machine learning. Customers now consider such personalization the norm, part of the overall experience of using your software. Airbnb’s personalized travel recommendations after you book a trip, such as offering a tour of Boston’s live music scene just after you reserve a stay in the city, is one such example.

• Build design systems.

Leading organizations such as Adobe and Salesforce have increasingly spoken about the need to create “design systems” to build these powerful user experiences. These are the systems and processes that enable them to scale their design best practices, rather than constantly reinventing the wheel. Forrester analyst Gina Bhawalkar points out that they also play a key role in linking your design team to your development team. She mentions that design systems should “also include the reusable code behind those design elements, and for this reason they should be created as a partnership between design and development teams.”

• Foster a product-centric culture and mindset.

If you listen to any of the founders of the UX-centric companies I’ve mentioned before, you will realize that they obsess about their products and the experiences their customers have with them. I would argue that if it’s not their top priority, it probably ranks very high. This is something easy to achieve as a startup, but much harder when you are, for example, a large financial institution that is used to thinking that your “product” is a checking account or a home loan, instead of the app or website your customers use to buy and manage those financial solutions. I often wonder whether the top executives at large firms even use their software products because some of them are so bad.

The democratization of technology helps drive better UX.

Ultimately, this is all part of what many people have referred to as the “democratization of technology.” This is because, fueled by cloud computing and new open-source technologies, it’s not just large companies or tech giants that can create these compelling user experiences.

So while effective UX design is one of the hardest aspects of product development, new technologies, tools and approaches are making it possible even for startup teams on a budget to build these compelling digital experiences. We’re seeing organizations take advantage of this to move nimbly and build light, attractive, mobile-first experiences. This is what it means to make UX your strategy, and in 2019, I believe it is the only way your organization will achieve success.

Written by: Alex Robbio (Co-founder of Belatrix Software and Member of Forbes Technology Council)
Posted by: CueCamp

The post User Experience (UX) Is Now Your Business Strategy appeared first on CueCamp.

Common landing page design element mistakes to avoid

1. Content is not broken down into logical blocks

It is easier for users to digest information if it’s grouped into logical blocks. Set padding to 120 px-180 px and separate blocks of text by using colour backgrounds.

There is little padding between sets of related information, plus this design needs colour blocks to divide content into logical sets. As a result, this information is hard to digest and it is unclear which text should go with each block

Paddings are large enough, and the blocks are separated by colour, which makes one thing immediately clear – these blocks contain different types of content

2. Uneven spaces between items on a webpage

Same-size spaces should be set around logical blocks. Otherwise your page will look messy, and users may not give equal consideration to each section.

Spaces of various widths look uneven and create an impression that company information is linked to the header although every block is equally important

Same-size spaces around headings and the body copy help perceive the logical blocks as carrying equally important information

3. Padding that is too small means that users cannot break down content into logical blocks

To avoid logical parts from blending in, keep them separate and insert a large space (at least 120 px) between them.

Use narrow padding, and the blocks that make up the site stick to each other. This overloads the page and is quite confusing — a site visitor is led to believe that this is one solid text and not parts with different meaning

Padding is large enough so the difference between these two blocks is immediately visible

4. Avoid low contrast for text copy on an image

There should be sufficient contrast between text and background. To make copy prominent, place a contrasting filter over the image. Black is a popular colour but you could also use bright colours and mix and match them.

Another option is using a contrasting image from the start and placing the copy on top of a dark section of a photograph. This image is too light, which makes reading the text copy too difficult

A filter applied to the photo makes the copy easy to read

5. Too many styles on one page

Too many typographic and webpage design styles on one page make it look unprofessional and hard to read. To avoid this, limit yourself to a single font and two options for saturation, for example, normal and bold.

Because of too many typography styles beings used, it’s unclear where the emphasis lies

One font, one colour and two types of saturation. The typography on the page looks neat and clear

6. The colour block is too narrow

Avoid emphasising narrow page elements with colour. It just doesn’t look good. For example, headings are already well marked thanks to their size, type saturation and paddings. Would you like to highlight a particular point on a page? Use a colour background for the entire block, including a related heading and text copy.

Headings placed on a colour background break up the page’s continuity and look like separate, independent design elements

Both the heading and a related text share the same background. It shows they belong to the same logical set

7. Too much text copy inside narrow columns

When there is a lot of text copy in narrow columns, it is difficult to read because site visitors have to skip from one line to the next. Plus, it just doesn’t look good! It’s best to cut on the number of columns and shorten the text copy, otherwise nobody will read it.

Long, contered columns are hard to read

There is little text in these columns, so reading it is easy

8. Too much centered text

Centering text on the page works well when there is little text, otherwise it’s hard for users to navigate it efficiently. At the same time, increase the font size starting from 24 pixels.

If you need to include a lot of text, use the blocks featuring collapsable text copy (in Tilda, it’s blocks TX12, TX16N or the button BF703).

Long, centered texts are not easy to read

A short text under a headline (both centered) look good on a page

9. Text copy is superimposed over an essential part of an image

Avoid covering meaningful parts or small details of an image with text. This way, you will both obscure the image and make the text illegible. Try different positions for the lines such as centering them or aligning text left or placing them vertically.

This headline gets in the way of the woman’s face. With so many tiny details, it’s hard to read the text

The image and text copy are easy to read and form good composition

10. Misusing visual hierarchy

For information hierarchy to be clearly visible on a page, the title on the cover should be bigger than the rest of the headings or at least the same size, especially if the headline is long, for example.

The heading on the header is disproportionally smaller than the following heading, which is confusing. Why? It makes the second heading appear more prominent

The heading on the header is bigger than the one in the following block, so the whole page looks consistent

The same principle applies to visual hierarchy within a logical block. The headline should be the largest design element on the page, followed by a smaller, less prominent subhead. Next, features titles that follow should be noticeably smaller than the heading, and of the same weight. The smallest fonts should be used for features descriptions.

This will help site visitors distinguish between the most important and less important information.

The headline is smaller than features titles and seems secondary, although it’s more important in this context

The headline is the most prominent design element on the page and although features titles are written in a smaller type, they are still clearly visible

11. One logical set is split into two

A full-screen image or gallery, following a text, resembles a separate, independent block. If you add padding around the gallery, both text copy and images will look as a logical whole thanks to a shared background.

A full-screen gallery looks disjointed from the headline above and looks like a standalone block

The gallery shares the same backdrop as the heading right above it, which makes the whole composition look solid

12. The title is too large and long

A very large font is perfect for a short sentence. If the headline is long, use a smaller size font. It will be easy to read and leave plenty of space to all other design elements on the page.

A headline that is too big takes up an entire cover, while design elements jostle for space and the headline is hard to read

This page is composed well, all the design elements are in balance with each other, and the copy is easy to read

13. Wrong use of border styling for buttons

Borders are necessary when a button is transparent. Adding a border for a colour button does not make sense, it’s just another meaningless design feature that overloads a page and makes it difficult to read it.

14. Using too many colours

Using too many colours on a page is confusing, and it’s unclear which bits are more important. One or two colours are enough to give visual prominence to what’s really important.

There are too many bright colours on the page; this is confusing

One colour accent creates variety and doesn’t distract from the contents of the page

15. Overloaded menu

People visit websites to find solutions to their problems. Help them! Use the menu to help people navigate the website and find what they need quickly and easily. Don’t overload them with with excessive information. It’s enough to have 5-7 menu items. This menu carries too much information, making site navigation more difficult

A simple menu makes finding what you need easy

Mistakes in article design

1. Long, solid copy

A wall of text makes reading difficult to understand. For easy navigation, split it into paragraphs or introduce breaks such as a key phrase or an image.

A wall of text is hard to look at

Elements such as pull quotes or images make reading texts easier

2. Headline is positioned at the same distance between previous and next paragraphs

A headline should not ‘hang’ between chapters at a similar distance because it belongs to the paragraph that follows. The distance above a headline should be 2-3 times bigger than the space under it. At the same time, the distance under a headline should be roughly the same as the space between paragraphs, or slightly larger. This way, the header will visually refer to the subsequent text.

The heading is positioned at an equal distance between paragraphs above and below it, and it’s unclear which paragraph it belongs with

Thanks to the use of padding under the heading, it’s obvious that the heading belongs with the text that follows

3. There is no logical order

In typography, contrasting is used to visually divide different levels of text and establish a strict hierarchy. Main headings should be the most prominent on page, subheads should be considerably smaller but still clearly visible.

A heading and subhead are approximately the same size, and there is no clear hierarchy between them

Logically, the heading is more important than a subhead

4. Different padding above and below blocks

If blocks carry the same weight, they should have the same look and feel and be positioned at an equal distance from each other.

If the space between the header and an author’s image is too narrow, it looks as if the author has more to do with the header rather than the text that follows

Thanks to identical size padding above and below the image, blocks appear equal

5. Caption is positioned too close to an image

On one hand, an illustration and its caption form a whole but these are two separate design elements, and captions should not interfere with images.

The caption sticks to the image and we have trouble properly engaging with either of them

There is a lot of white space between the image and its caption, yet it’s clear that the caption goes with the image

6. There is too little space between subhead and text copy

A subhead and text copy that follows belong together but if the space between paragraphs in an article is bigger than the space between the subhead and the following paragraph, the article looks disjointed.

Space between a heading and a paragraph is smaller than between paragraphs themselves

Space after the heading is slightly bigger than space between paragraphs

7. Stand-out design elements are placed too close to the main text

Design elements used as expressions of emphasis such as key phrases or quotes are independent objects. For them to truly stand out, set them at 75-120 px from the main body copy.

There is too little space between the main text and stand-out elements

A pull quote truly stands out thanks to big padding

8. Low-contrast design elements

If you’d like to emphasise a certain phrase, be bold, make a key phrase bigger than the main text by 10-15 px. Let the key phrase really stand out from the rest of the text.

Now everyone can see it thanks to a large font and sufficient padding around the text

9. Colour background for a narrow text block

If you’d like to highlight a small section of a page such as author information, it’s enough to set sufficient padding around this, which will create an impression of space. Don’t place this section on a colour background; this will look out of place.

Don’t use colour for the subhead. Using a bigger font and padding should be sufficient to make it pop on the page

10. There is an empty space between two full-screen images

When you are using several full-screen images in a sequence, avoid leaving a space between them. The border will still be visible, and there is no need to add an additional design element. It just doesn’t add anything.

An empty space between full-screen images make no sense and doesn’t look good

There is a harmonious flow between images in this example

11. Too many design accents being used

Design accents (such as boldface here) work well when there are few of them. Put in too many, and this will get in the way of reading the page. |
Many words are marked in bold, so the text copy appears broken

A few marked words draw attention to themselves, and don’t interfere with the rest of the text

12. Too many typography styles

Design should not interfere with readability. The fewer typography styles there are, the more important design elements are visible. It’s enough to emphasize headlines and subheads, and use contrast for key phrases.

This text has too many typographic devices. They are distracting to the reader

Very few typography styles, emphasis is clear, and text hierarchy is observed

13. Centering text in a long article

Centering is usually applied to headlines and block quotes to distinguish them from the rest of the text. A centered long text is difficult to read.

A centered text looks messy, plus it’s hard to read

A text aligned to the left is easy on the eye

14. Headline appears too close to the image

A headline is an individual design element. It should not sit too close to an image that follows. For a winning combination, set padding at no less than 60 px, and add a subhead – it will unfold the contents of the page and place the right emphasis where you need it.

The headline sits too close to the image, there is no breathing room on this page

Here the headline is separated from the image by a subhead, and it relates to the entire section, not just the image

15. Using italics when they are not needed

Italics are used to highlight a word or a short phrase within a text. It is not as immediately noticeable as bold type but it does allow you to make an emphasis where you need it.

Don’t write everything in italics (body copy, headlines). And if sans-serif fonts are used in text copy, avoid italics altogether.

The phrase stands out already thanks to the font size and padding, so the italics are not really needed here

Italics are in the right place, adding the right amount of emphasis

16. Blocks appear out of place relative to the centre of the page and each other

You can spot this error easily yourself if you take a small break after editing your page (changing font size, alignments or indentation) and taking a look at what’s on it.

In this example, the headline is shifted to the left, and text copy to the right

All text elements are in harmony with each other

Written by: Ira Smirnova, Masha Belaya, Julia Zass (via Tilda blog)
Design and layout: Julia Zass
Posted by: CueCamp

The post Common Webpage Design Element Mistakes appeared first on CueCamp.

With 1.3 billion websites on the internet, there is competition aplenty in nearly every industry. If your site doesn’t provide the best experience, users will simply find another. A user-centered design is going to be highly usable. Everything will function perfectly and without error. Here are nine simple things you can focus on to create a usable site:

1. Get Right to the Point

If you have targeted the right audience, they are already interested in your service or product when they land on your page. Instead of adding in unrelated things, simply get to the point. People are quite busy and don’t have time to wade through a lot of information to get to what they want. Add prominent call to action (CTA) buttons that are easy for the consumer to find.

Note how Grace gets right to the point about why you’ve come to their site. They give a quick explanation of how their box subscription kits work and offer a CTA in green that says, “Get Started.” They also offer half-off your first box to entice you a bit further.

2. Visible Navigation Structure

Your navigation structure is the backbone of your website. It guides the user through your pages almost from the first minute they arrive. Among visitors referred to your website, on average, 50 percent of them will use the site’s navigation to get themselves oriented. But navigation isn’t simply your nav bar across the top of your page — it’s also the sales funnel you guide the user through from the landing page, plus minor details such as linking your logo to the home page to serve as a breadcrumb for visitors to find their way back to start.

3. Actionable CTAs

Your call to action invites your site visitor to take a specific action and to convert from simple site visitor to subscriber or customer. A lot of factors come into play when creating the perfect CTA. The language you use, the color of the button and even page placement can make a difference. You also aren’t limited to a single CTA on a page, but you do need to make sure each one has a clear direction.

HydroWorx offers very clear CTAs on their landing page so site visitors know exactly what action to take and when. The CTAs are a bright orange, which stands out against the white background and complementary dark blue design. The placement is smart because it lines up with each section and helps answer questions the user might have. The wording is clear and includes, “Request a consultation,” “Estimate profit” and “Get a profitability analysis.”

4. Instant Feedback

Have you ever filled out a contact form, hit submit and then weren’t sure if it was sent to the company or not? This is very frustrating for users. Site visitors should receive feedback for any action they take. If the visitor clicks on a submit button, a message should pop up that the form has been received and what the visitor can expect next. Look at the different actions a visitor can take on your site and make sure each one has a response appropriate to that action, such as loading a new page that says, “Welcome!” or “Thank you for us.”

5. Customer Service

The way your company interacts with site visitors has an impact on their overall experience. Do you have a customer service philosophy in place? Is it effective? Around 86 percent of consumers say they will pay more for a product if the overall customer experience is better.

Even though the entire customer experience is about more than just service, the way you handle complaints and questions plays a big role in the overall impression the customer has of your brand. Take the time to get a customer service philosophy in place.

Trader Joe’s has a reputation for excellent customer service. Walk into any brick-and-mortar store and you’ll be treated like royalty. One example of them going above and beyond for a customer was reported on Reddit. In this example, the company went out of their way to deliver food to an elderly man who was snowed-in. Not only did they deliver the food, but they also gave him the food for free. That’s a brand that cares about their customers.

6. Use Heatmaps

Figure out which areas of your site are most attractive to your site visitors and limit choices to those main links. You can, of course, add other elements within the overall structure of your site, but when it comes to where to focus, you want the main elements people are looking for to be front and center. You may also want to move these sections higher up on your landing page so visitors can find them quickly.

7. Offer Valuable Information

One way you can engage users is by educating them on what you sell. The person may or may not have tried your product before, so offering in-depth information allows the user to make an informed decision about whether or not they want to try your product. You can offer this information in the form of guides, articles or a comparison chart. Try offering it in a variety of ways, remembering that visuals are well received by site visitors. You can even conduct some split testing to see which elements work the best for conversions.

The Whiskey Exchange does a good job of educating their site visitors. They offer different topics the user might be interested in along with a CTA to “Learn More.” The topics rotate from time to time, so those who visit the site regularly can still learn new things. For example, some topics featured include popular products from New Zealand and winter drinks.

8. Social Media Integration

Some of us have multiple social media accounts, but 81 percent of Americans have one at least. The public loves social media because it’s an easy platform to grab information and then share it. There are several ways your site can integrate with social media. Allowing users to share photos and blog posts is one simple way. However, you can also add apps that allow a user to log into your site with Facebook, Twitter or Instagram. Start with the basics of allowing users to share your information and then see what else might be viable.

9. Integrating Video

The statistics on using video in your online marketing is something you can’t ignore — 87 percent of those who market for a living use online video content to drive conversions. Video is a way to get your message across in a way that sticks with the consumer. Videos add information to your website for the user who prefers to watch a video rather than read text or even an infographic.

Bellroy uses a video that highlights some of their products and what they do. If the shopper doesn’t want to read through descriptions, they can view the video and learn a little more quite easily. On the Bellroy site, the video is located under the header, but for the purpose of this case study, we’ve moved the video up so you can see it easily.

Last Thoughts

UX strategies shouldn’t be one of the last things you implement on your site — it should be the first. This will help you avoid frustration on the part of site visitors and retain more of the traffic you drive to your page. Take the time to conduct A/B testing to see which elements work best with your target audience. You should also go through your site step-by-step as though you are a first-time visitor and look for possible issues.

Written by: Lexie Lu, Design Roast (via Website Magazine)
Posted by: CueCamp

The post Make UX Strategies Less Complex & More Functional appeared first on CueCamp.

#6: Company Website Pages Take Forever to Load

If your website does not load in an expected amount of time, users will leave. It may sound like an unreasonable ultimatum, but it’s true: 47 percent of customers on e-commerce websites expect their site to load in two seconds or less, and 40 percent will abandon a site that takes more than three seconds to load.

Do yourself a favor – check out Google’s Page Speed tools to make sure your website is as quick as it needs to be. If it’s not, consider either upgrading your hosting or cutting content that takes to long to load from your website’s pages. A variety of things like interactive ads, uncompressed images, and JavaScript can negatively impact page load times.

#7: Unnecessary Content

It’s incredible how some people have a knack for talking your ear off without saying anything remotely useful. That’s not a good talent to have, especially online where users are bombarded with information.

From a Web design perspective, that means that if your website is loaded with unnecessary information, or the sitemap is filled with too many bells and whistles, people are likely to get frustrated and ditch out for a competitor. Be succinct and keep it simple. Lengthy text should be shortened, making use of headings and subheadings to break up the text and help users scan through page content.

#8: Neglecting Mobile Users

It’s somewhat baffling how many webmasters still don’t see the importance of mobile. After all, mobile searches now outrank desktop searches, and smartphones are quickly supplanting computers as the browsing device of choice. If you haven’t taken active measures to support mobile – for instance, through the implementation of responsive web design – you need to pull yourself out of the past immediately. Mobile-optimized content is vital for good usability on the mobile devices that your visitors use to visit your website. Mobile website visitors should be able to easily scan and read important content, as well as complete basic tasks like finding your contact information.

#9: Missing Your Target

As a web marketer, you understand how important it is to know your target audience. You’ve probably spent hours creating customer profiles and figuring out how to attract consumer attention. This is just as significant in web design. The way your website looks and “feels” will naturally attract a certain type of visitor. Some websites are highly professional; some are trendy and hip, while others are fun and bubbly. Sometimes, a website tries to speak to too many audiences. If you try to please too many types of customers, you can end up with a confusing website that appeals to none of them. Identify and profile your target audience, and cater to their needs.

#10: Poor Navigation

Navigation issues will kill your website’s popularity fast. We live in an age where everything is delivered to us in an instant, and anything longer will make visitors abandon your site. Making your navigation menu difficult to find or use are common web design mistakes. Have you ever been to a website and you can’t find the menu or a search bar? It’s quite frustrating. Make sure the navigational aspects of your website are easily understood and even easier to notice.

Conclusion

If you want to avoid frustrated users that abandon your website, you need the following features:

• Support for mobile users
• A clean, crisp interface
• No excess information; provide users only what you know they’ll want to see
• Fast load times
• A clear and consistent brand message throughout
• Professional, high-quality content that is free of mistakes (e.g. broken links, spelling errors)

To get started fixing up your website, you can check out our top 5 tips for creating a powerful homepage for your website. In addition, if you would like your website reviewed by one of our experts for free, please visit CueCamp and request your free marketing analysis video. You will receive a 5-10 minute video that analyzes the usability and marketing effectiveness of your website, delivered within 48 hours.

Written by: Michel Ann Sharritt
Posted by: CueCamp

The post Part 2: Are You Making the Biggest Web Design Mistakes on Your Company Website? appeared first on CueCamp.

CueCamp has put a list together of the top five items a powerful homepage design should have in order to retain users.

#1 Include Sharp Imagery

The images that you use on your homepage should be crisp, clear, and showcase your company in a way that embodies your brand’s vision. The images should inspire your website visitors to learn more about your company. One should remember that a website is a highly visual experience. People react to graphics and visuals differently than they do to words.

TIP: It’s also important to avoid using obvious stock photos. While sometimes useful, generic images are a dead give away that your company didn’t spend time on design.

#2 Choosing Fonts

You might not realize it, but the font you choose for your homepage has a psychological effect on your visitors and greatly influences how they feel towards your brand. Understanding your product or service is key to figuring out what font to choose for your website. Always choose a font that is simple, easy to read, and reflects the personality of your business culture.

TIP: Avoid using too many different fonts on your homepage; you want the homepage to have a feel of cohesion and uniformity.

#3 Use of Color

In the same way that your fonts have a psychological effect on your users, your color scheme affects how users interpret and engage with your website. Not only can a poor choice of color send users away, it affects how you communicate your brand to the public. Incorporating too many colors will confuse your branding, while the wrong colors will make the wrong impression.

TIP: Always choose colors for your website that are welcoming and true to your brand. It is always best to start with the colors that are used within your company logo. It helps to keep branding consistent throughout the website.

#4 Keep it Simple

Whenever our team designs a homepage we always look at the design like we are the user coming to the website for the first time. What impression do you want to give? What items need to be front and center?

The mistake that many designers make is adding tons of widgets, calls-to-action, links and other clutter that can distract or overwhelm the user. Ultimately the user is going to get confused and leave the website.

Here are a few design tips for keeping your homepage simple:

• Use easy-to-read text
• Provide plenty of white space
• Clearly label the different sections of your website (don’t make users hunt for info)
• Do not clutter up your homepage with ads, links, calls-to-action, or pop-up chat boxes

#5 Establish Your Identity

You want your website to make a statement about what your company is all about. This is probably the #1 most important part of your homepage design. Too many times, your homepage is designed with too many goals in mind. Creating a unique design, including an interesting logo and memorable look for your homepage, is important in retaining users and encouraging them to return to your site in the future.

Your homepage should:

• Introduce your company to your website’s visitors
• Provide them with clear paths to other pages on your site
• Give them a strong sense of your company’s brand and identity

Your homepage design is undoubtedly an important part of both your website and your company’s success. From immediately appealing to your visitors, to providing them with a user-friendly navigation experience, your homepage is the portal through which they can discover your company and ultimately, your brand.

We hope that this article helped to inspire your company to re-examine your company homepage. In the meantime, if you would like your website reviewed, please visit CueCamp and request your free marketing analysis video. You will receive a 5-10 minute video that analyzes the usability and marketing effectiveness of your website, delivered within 48 hours.

#cuecamptips

Written by: Michel Sharritt
Posted by: CueCamp

The post How to Create a Powerful Homepage for Your Website appeared first on CueCamp.

Thankfully there are a few warning signs that indicate whether information on your site is delivered to users in a way that’s easily digestible and navigable, including:

It Takes Forever to Load

If your website does not load in an expected amount of time, users will leave. It may sound like an unreasonable ultimatum, but it’s true: 47 percent of customers on e-commerce websites expect their site to load in two seconds or less, and 40 percent will abandon a site that takes more than three seconds to load. Do yourself a favor – check out Google’s PageSpeed Tools to make sure your site’s as quick as it needs to be. If it’s not, consider either upgrading your host or cutting excess fat from your site’s pages.

Everything’s Convoluted

It’s incredible how some people have a knack for talking your ear off without saying anything remotely useful. That’s not a good talent to have, especially online where users are bombarded with information.

From a Web design perspective, that means that if your site’s loaded up with unnecessary information or the sitemap is filled with too many bells and whistles, people are likely to get frustrated and ditch out for a competitor. Be succinct and keep it simple.

Doesn’t Cater to All Users

It’s somewhat baffling how many webmasters still don’t see the importance of mobile. After all, mobile searches now outrank desktop searches, and smartphones are quickly supplanting computers as the browsing device of choice. If you haven’t taken active measures to support mobile – for instance, through the implementation of responsive Web design – you need to pull yourself out of the past immediately.

Inclusion, Not Alienation

If you want to avoid having frustrated users abandon your site in droves, your site needs the following features:

• Support for mobile users
• A clean, crisp interface
• No excess information; provide users only what you know they’ll want to see
• Fast load times
• A clear and quick brand message throughout
• Professional, high-quality content that is free of mistakes (e.g. broken links, spelling errors)

Simple enough, right?

Written by: Maxim Emelianov, HostforWeb (via Website Magazine)
Posted by: CueCamp

The post 3 Warning Signs Your Website Annoys Users appeared first on CueCamp.

You need more than top rankings on Google. People have to be able to navigate to the product they want and trust you enough to buy. Your website’s user experience (UX) should focus on building your visitor’s confidence by helping them complete their goals. 

Home Page UX Tips That Build Trust On A Quick Glance

Your home page gets the most traffic. Make it obvious that you sell products. Think of your home page as the window to your store. Think Macy’s on Magnificent Mile. Dress your home page with your best products and images. One thing you never see at Macy’s is different dresses swooping by one by one in the window. I’m talking about sliders here. If you have to use them, make sure they are user friendly.

Hero Area Best Practices

Your hero area (also called featured area) is the most prominent real-estate on your home page. You only have 50 milliseconds to leave a good impression, here is how to make it count.

Hero Area Do’s

1. Use simple, uncluttered design. Use as few words as possible.
2. Eliminate everything that does not make an impact. For example, your recent blog posts.
3. Use visual queues like color or arrows to focus attention on a single call to action.
4. Make it easy for people to self identify. Do you sell pricy jackets for women?

Hero Area Dont’s

1. Decorate. Swirls, sparkles, and other meaningless symbols add to the cognitive load and distract your customers.
2. Have outdated content like promotions from last week or even last month. You will instantly lose credibility.
3. Clutter the area with too many messages or promotions.
4. Have an automatically advancing slider or carousel.
5. Emphasize a product that is not representative of your overall mix.

Home Page Navigation

When people visit your site, you want to help them find what they came for. According to conversion expert, Tim Ash, the main focus of your home page is to provide category level navigation. Follow these pointers to help visitors find what they are looking for.

Home Page Navigation Do’s

1. Give visitors a “30,000 foot view” of what your site sells so they can drill down to specific categories.
2. Add your most used tools or buying guides.
3. Provide links to return policy, customer service, shipping and privacy pages.

Home Page Navigation Dont’s

1. Assume you know what people are looking for.
2. Jam every category and subcategory on your home page.
3. Push product level promotions. If you only have a few products, you can ignore this.
4. Use generic stock photos. This screams inauthenticity.

Solid Ecommerce User Experience Boils Down To Simple Primary Navigation

Navigation is critical when you have a lot of categories, variable products or products with many options. Nothing is more frustrating than a cumbersome menu. The quicker people can find what they want, the quicker you can move them through to the checkout process.

The purpose of a navigation menu is to get people where they want to go. Here is a breakdown of what you should address:

Primary Navigation Menu Do’s

1. Limit top menu to 7 choices.
2. Use a secondary navigation at the top right for items like “Contact Us”
3. Use a multi column menu that organizes categories and sub categories.
4. Show high quality images of your product.
5. Make your navigation menu prominent with contrasting colors.
6. Cross reference products into multiple categories. Someone looking for a USB drive may look under Laptop, Accessories, or Computers.

Primary Navigation Menu Dont’s

1. Have a single drop down that takes up a long column.
2. Show link empty category pages to main nav.
3. Over-classify products. If there is only one product in a (sub)category, remove the category and reclassify the product.
4. Don’t use vague options like “more.”

Cart Menus

A cart menu is likely the last button a user will click before taking out the credit card. Don’t over look this tiny icon.

Cart Menu Do’s

1. Show total price and number of items in cart.
2. Link to the cart page where they can see details of their contents

Cart Menu Dont’s

1. Substitute a “mini cart” for a full cart. Your ecommerce site, needs a cart page, not just a cart widget.
2. Link directly to a checkout page that doesn’t show every detail of the products in the cart.

Search

Many users skip the navigation menu altogether and rely on search/faceted search to drill down further. Faceted search can get complicated quickly. From a development and cost perspective, but also a user perspective.  Follow these guidelines to keep things simple and helpful.

Search Do’s

1. Use an open text field box at the top of every page.
2. Use faceted search when there are over 20 products within a category.
3. Filter by price, color, size are basic faceted search options.

Search Dont’s

1. Use filler text on search input. Leave it blank, or say “Search.”
2. Use subjective filtering options such as “heavy-duty” or “light-duty.”

Ecommerce UX Tips For Product Pages

Full product details are critical. For SEO and for user experience. Internal links boost SEO and help the user navigate back to the product listings page. A user friendly layout will have essential product information above the fold.

Product pages are the meat of your site, they need to convert. If  your customer has to select an option before adding to cart, display an error message when the “Add to Cart” button is clicked.

Product Page Content Layering

Your product page can quickly suffer from information overload. You want the right level of product information for people that already know what they want to buy, but also cater to shoppers that need every last product detail. By layering your information, you can cater to both types of buyers.

Product Page Content Layering Do’s

1. Provide a short product summary at the top of the page or next to the photo.
2. Add a border or shaded background to your “action area” – where people select options and click your button.
3. Present the ordering options near the top in the action area
4. Have breadcrumbs on the product pages.
5. Put product details, reviews, data, etc. below the product image and CTA area.

Product Page Content Layering Dont’s

1. Put a large block of copy near or above the CTA button.
2. Hide your add to cart button until someone makes a selection.
3. Make availability information an extra click away.
4. Have a subtle change when someone clicks your add to cart button. People will miss your “Successfully added” message.

A common mistake with many WordPress ecommerce themes was hidden “Add To Cart” buttons.

Product Page Images

Large photos and zoom is about the closest your buyer can get without physically touching the product. Fuzzy, poor quality images make the products look poor quality too. Check out this case study, where bigger, better product images increased conversions by over 300%.

Product Page Images Do’s

1. Use large, high res photos on a white background.
2. Use zoom features to let users see details for themselves.
3. Allow users to scroll to back and forth between images.
4. Provide clear instructions that additional images or zoom features are enabled.

Product Page Images Dont’s

1. Show “lifestyle” images or your product. Show just the product.
2. Don’t muddy up your photos with logos, watermarks or backgrounds.
3. Force an image pop-up to see more details or additional photos.

Build Trust With Buyer Friendly Checkout Process

Your checkout process needs to be simple, logical and distraction free. Don’t complicate it. Macy’s cart page hits many of the main points. The cart shows product details with images, pricing, tax and links back to individual product pages.

Cart Page

The first page in your checkout process is your cart page. You never want to send a user past this page. This page reaffirms what they have purchased in detail. This helps them build confidence and trust in your store.

Cart Page Do’s

1. Confirm everything. Product, size, color, quantity, availability, ship date, estimated delivery.
2. Allow users to navigate directly back to products in their cart.
3. Make it easy to change quantity or delete products. Let users change qty to 0 to remove products or click a “remove” button.
4. Show a picture of the product, in the color it was ordered in. If your customer orders a black jacket and sees a blue one at checkout, they lose confidence.
5. Make the continue checkout button prominent, but allow people to continue shopping.
6. Show the total out the door price.

Cart Page Presentation Dont’s

1. Prematurely ask for a credit card or email address. Let people confirm what they are buying.
2. Don’t use an “Update” button to remove products.

Checkout Page

After buyers feel confident that they are ordering the right product from the right company (yours), it is time to get the party started.

Once users start the checkout process, they want to complete the purchase as quick as possible. Help them help you. Remove distractions and make the process as easy as possible. Don’t make them re-enter their address or guess how to complete the form.

Checkout Page Do’s

1. Ask for only the minimal required information.
2. Replace the main navigation with a “contact” navigation.
3. Keep your checkout process short and your steps clear and logical.
4. Show progress during the checkout process.

Checkout Page Dont’s

1. Present new information or choices.
2. Force people to “join” or “become a member.”
3. Make people re-enter the same information twice.
4. Let users use billing address as shipping address with a single click.

How Does Your Site Stack Up?

You don’t have to have a million dollars to create a positive user experience. Nail these basics and you will get Google and customers to love your site and buy from you.

Interested in learning more about mobile shopping guidelines? Join our webinar on February 10, on “Mobile Shopping: Key Features Users Want” hosted by Michel Sharritt, VP of CueCamp and Situated Research.

Written by: Darren Dematas, Intertwine
Posted by: CueCamp

The post User Experience Tips: How to Seduce Ecommerce Visitors to Buy appeared first on CueCamp.

When we review main menu navigation on websites, the first thing we examine is the menu location. Users want to see the main menu navigation at the top of the page versus the page footer as observed on the Standard Market website. Why? Users are used to seeing the menu navigation on most websites at the top of the page. Additionally, users do not want to have to scroll through a site to find what they are looking for, or to start a search query.

The next thing we look at is labeling. We asked users to find out what beer was on tap at the Naperville Standard Market location. Users first looked at the top of the site to find the main menu navigation, and when they didn’t find it, they scrolled down. Many users said they will leave a website and give up on their search when navigation is missing, or they simply find the contact information and give them a call to ask their question.

Next our users were confused with the labeling of the menu options that they found. Under DEPARTMENTS they found a label named Beer. But then under the label THE CUBE, they found wine/beer/cheese bar. This is an example of poor labeling, as ‘Beer’ is located under two different menus. This confuses users and makes them unsure of what to click on to find the information they want. It also makes the search process longer and more difficult for the user.

It took users several minutes to navigate through the website to find the information they wanted, which caused frustration, confusion, and lowered the likelihood that they would return to the site in the future.

CueCamp helps clients alleviate these kind of frustrations users by carefully organizing web content and creating clear, distinct labels for good website navigation. CueCamp offers a free usability report that reviews 20 different areas of usability in your website, including menu navigation. The report is straightforward and easy to follow, and includes a one-on-one review to ensure any follow-up questions are fully answered.

To request your free usability report, visit www.cuecamp.com and simply fill out the short form. You will have your report within 48 hours. If you have any questions or feedback, please feel free to leave them in the comments below.

Written / Posted by: CueCamp

The post Is Your Website Navigation Easy to Use? appeared first on CueCamp.