UX: What Is It and Why Is It so Important?

UX is a popular acronym for user experience. Simply put, the term describes how the user interacts with the software. Was it easy to navigate? Did they have to deal with multiple pop-up ads? How long did it take for the page to load?

The best digital marketing campaigns offer seamless experiences that compel users to take action and share the pages with other prospective users. This is why you need to invest in the services of an experienced UX developer or at least learn advanced UX through online courses if you want to control your campaign.

How Does UX Impact Your Content Strategy

The user experience of your website, mobile application, or blog can affect your content strategy positively or negatively. This piece addresses some of the positives of investing in high-quality user experience.

1. Improves User Engagement

Digital marketing campaigns allow you to widen the horizon and increase your reach. However, digital users need to remain engaged long enough to find out if your products or services are worth their time. By investing in a high-quality user experience, you will improve content engagement, thus increasing your chances of generating leads for your business.

2. Faster Return on Investment (ROI)

The more engaging and efficient your digital marketing campaign is, the faster you will get a return on your investment. It is important to note that digital marketing campaigns are more affordable than traditional marketing campaigns and they are also more likely to go viral. One client who is satisfied with your content can share it with others who will be more willing to trust your brand.

3. High-Value UX Puts You Ahead of the Competition

Digital marketing is evolving faster than any other form of marketing. If you pay attention to trends and implement UX best practices, you will stay ahead of the competition. Search engines also rank websites higher when they have good UX and a low bounce rate. Since people are more likely to click on the first few websites when they search for a product or service, using UX to boost your ranking is a good idea.

4. Promotes Customer Retention

Everyone loves return customers but getting people to return to your business requires building their trust and incentivizing loyalty. If customers have a terrible user experience because you did not invest in a great UX, they are unlikely to patronize your service a second time. It may seem like you are spending a lot during the initial creation, but it would be worth it for conversions in the long run.

5. Cuts Down Maintenance Cost

If you are trying to create websites as part of your digital marketing campaign, you will have to keep a software engineering team on standby for web or mobile app maintenance. The cost of maintenance will be significantly higher if the initial UX was less than adequate. In no time, you may need to overhaul the entire platform instead of performing basic bug fixes.

6. Increased Sales

A good UX should come with a good user interface and high-quality products or services. Combined, all these features will help you create a lucrative sales funnel that will boost revenue for your business. There are different ways great UX can improve sales. You can provide real-time support, smart searching, quick payment, quick checkout, and an all-around smoother experience.

Conclusion

Digital marketing isn’t going to lose relevance anytime soon. Digital advertisers are projected to spend over $616.00 billion on advertising by the end of 2022, according to Statista. Since you have already established that UX is an important aspect of any digital marketing strategy, you should look for ways to optimize your UX to improve sales, increase customer retention, and get a faster return on investments in your business.

The post How UX Impacts Your Digital Marketing 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.

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.

The scarcity principle is a well-documented social-psychology phenomenon that causes people to assign high value to things they perceive as being less available. In real life, Black Friday is a good example of scarcity: a sale that occurs on only one day of the year (the day after Thanksgiving in the United States) and consists of a limited number of products offered at discounted prices. In the case of Black Friday, the mobs of eager customers are most often a good thing for retailers…until the mob turns violent.

Scarcity Interface Pattern Examples

Limited Time and Quantity

Limited Inclusion

Limited Information

Background of the Scarcity Principle

The Scarcity Principle is 1 of 6 influencing principles coined by Dr. Robert Cialdini, a professor at Arizona State University famous for his 1984 book “Influence: The Psychology of Persuasion.” Cialdini’s book is a study of the psychology of compliance. As a psychology professor, he and his students conducted numerous research studies to identify and prove the 6 influencing principles discussed in his book.

Scarcity is largely effective because of a cognitive bias known as loss aversion, first demonstrated in research conducted by Daniel Kahneman and Amos Tversky. Kahneman and Tversky determined that people put more subjective value on loss than on gain and thus strongly prefer to avoid losses instead of acquiring gains. In other words, the pain of losing $100 is perceived as bigger (in fact, twice as big according to Kahneman and Tversky) than the satisfaction of gaining $100.

The strong tendency to avoid losses explains why scarcity is so effective: we feel that if we don’t act upon the scarce product or information, we lose it. For example, if a person is shopping for airline tickets and finds a flight that meets her criteria, but the description indicates this is the last ticket at that price, the person might buy the ticket for fear of losing out even if she wasn’t quite ready to book yet. (The agony of losing the current $100 discount will only be overcome if the user could save $200 on some future deal, and that’s sufficiently unlikely to happen that many users prefer to act to lock in the savings.)

Scarcity is a particularly effective persuasion tool because what, specifically, is scarce can take several forms: quantity, time, or information. Knishinsky ran an experiment that proved the additive effects of these factors upon persuasion. In his study, salesmen were able to double order sizes when they told wholesale beef buyers that the supply would be scarce in upcoming months. The most incredible finding of this study is that they were able to increase order sizes 6 times when they altered their pitch to not only indicate scarcity of supply, but that this information was a secret and only being divulged to the buyer. The double-scarcity pitch (low supply, secret information) was 3 times more compelling than the single-scarcity pitch (low supply)!

When to Use the Technique on the Web

Expediting Desirable Actions: If you find that most people who convert on your site visit your site more times than you think should be necessary before converting, you might try using scarcity to reduce that time lag

Increasing Perceived Value: Indicating that an item has low availability or using photographs that show limited quantity can impact end-users valuation of the object. For example, in fine dining, small portions on large plates can imply that the ingredients are rare and, therefore, should be more expensive.

Testing the Scarcity Principle

The most significant risk with using scarcity is decreased trust and credibility. If your users suspect that the presented scarcity isn’t real, they could go elsewhere. That’s why it’s important to test scarcity as a motivational device before fully embracing it. Here are some questions that you should aim to answer, together with techniques that you can use to do so:

Conclusion

Scarcity, used in moderation and with true information, can encourage users to move more swiftly toward converting on your site. However, the technique has been adopted by so many sites, that its impact may be decreasing. Therefore, we do encourage design teams to test pages and flows with and without scarcity-based elements to determine how the technique impacts conversions, perceptions, and long-term business goals.

References

Robert B. Cialdini, Influence: Science and Practice. Pearson Education Inc., 2009.

Amos Tversky and Daniel Kahneman. Loss Aversion in Riskless Choice: A Reference-Dependent Model. The Quarterly Journal of Economics. Vol. 106, No. 4 (Nov., 1991), pp. 1039-1061.

Knishinsky, A. The effects of scarcity of material and exclusivity of information on industrial buyer perceived risk in provoking a purchase decision. Unpublished doctoral dissertation, Arizona State University, Tempe, 1982.

Daniel Kahneman, Thinking, Fast and Slow. Farrar, Straus and Giroux, New York, 2011.

Written by: Jennifer Cardello, Nielsen-Norman Group
Posted by: CueCamp

The post Scarcity Principle: Making Users Click RIGHT NOW or Lose Out appeared first on CueCamp.

So it was really great to read Paul Olyslager’s recent post on the “9 Common misconceptions about users.”  One or two of them are common knowledge, but they are all spot on.  I want to share a few of the really good ones and perhaps add a few cents of value of my own.

His first one is perhaps the best.  Users want choices.  One of the primary motivations that drive human behavior is the need for perceived autonomy (see my gamification posts for more on that). We crave feeling in control of our lives and our decisions. Having options is a salient signal to ourselves that we are in control.  In fact a recent TED talk by Alex Wissner-Gross makes the (a little too far reaching) claim that the best measure of intelligence is the ability to keep your options open.

Unfortunately, it doesn’t end there.  Designers make a huge mistake by taking this as a maxim and giving users tons of choices.  This leads to many negative outcomes.  Because users also hate cognitive load.  If making a decision among all of these options feels like a lot of work we absolutely hate it.  That is not perceived autonomy, that is perceived helplessness.  Sheena Iyengar (about whom I have blogged before) calls this choice paralysis.

There is also the strong likelihood of loss aversion.  While making decisions we worry that we might make the wrong decision.  And we HATE that because it reduces perceived competence (another one of those fundamental motivations).  Then after decisions we are susceptible to post-decision regret, also known as buyer’s remorse.  The only thing worse than being forced into an option is being forced to live with that outcome afterwards, always wondering (or knowing for sure) that another option would have been better.  Some of us have this more than others (who Barry Schwartz calls “maximizers” in the fantastic book (and TEDtalk of the same name) the Paradox of Choice), but most of us have it to some extent.

And all of this just in his first misconception.  Thanks for the great post Paul.

Written by: Marc Resnick, Human Factors
Posted by: CueCamp

The post Users Like Options, But Hate Making Decisions appeared first on CueCamp.

Moreover, “highly prototypical” sites – those with layouts commonly associated with sites of it’s category – with simple visual design were rated as the most beautiful across the board.

In other words, the study found the simpler the design, the better.

But why?

In this article, we’ll examine why things like cognitive fluency and visual information processing theory can play a critical role in simplifying your web design & how a simpler design could lead to more conversions.

We’ll also look at a few case studies of sites that simplified their design, and how it improved their conversion rate, as well as give a few pointers to simplify your own design.

What is a Prototypical Website?

If I said “furniture” what image pops up in your mind?  If you’re like 95% of people, you think of a chair. If I ask what color represents “boy” you think “blue”, girl = pink, car = sedan, bird = robin, etc.

Prototypicality is the basic mental image your brain creates to categorize everything you interact with. From furniture to websites, your brain has created a template for how things should look and feel.

Online, prototypicality breaks down into smaller categories. You have a different, but specific mental image for social networks, e-commerce sites, and blogs – and if any of those particular websites are missing something from your mental image,  you reject the site on conscious and subconscious levels.

If I said “Online clothing store for trendy 20-somethings” you might envision something like this:

image credit

This follows the “online clothing store” prototype so closely, that it shares many attributes with the wireframe for an online clothing store that sells hip-hop clothing.

image credit

Neither  lacks originality, and it’s unlikely they “stole” from each other. Instead they’re playing into what your basic expectations are of what an e-commerce site should be.

What do you Mean By Cognitive Fluency?

The basic idea behind cognitive fluency is that the brain prefers to think about things that are easy to think about.

That’s why you prefer visiting sites where you instinctively know where everything is at, and you know what actions you’re supposed to take.

“Fluency guides our thinking in situations where we have no idea that it is at work, and it affects us in any situation where we weigh information.” – Uxmatters.com

Cognitive fluency is an stems from another area of behavior known as The Mere Exposure Effect, which basically states that the more times you’re exposed to a stimulus, the more you prefer it.

image source

Again, the rules are the same online.

It’s “familiar” for blogs to have opt-ins on the right sidebar, or e-commerce sites to feature a large hi-resolution image with an attention grabbing headline & the company logo on the top left hand side of the screen.

If your visitors are conditioned to certain characteristics being the standard for a particular category of site, deviating from that could subconsciously put you in the “less beautiful” category.

Here are a handful of e-commerce sites. See if you notice any similarities.

Warning: Whatever you do, for the love of GOD, don’t take what I’m saying as “do what everyone else is doing.”  If you’re not careful, you could really hurt yourself that way.

It’s important to know what design choices are prototypical for a site in your category, but it’s more important to find evidence that supports those design choices resulting in some sort of lift.

A lot of designers make bad choices. Without doing the research, you could make them too.  For example, many e-commerce sites use automatic image sliders to display products, but study after study shows that automatic sliders tank conversions.

What Happens When You Meet Basic Expectations? – A Case Study

In the three images above, everything you’d expect from an ecommerce site is exactly where it’s supposed to be. Even if you’ve never been to the site, there’s inherent “credibility” to the design.

With a high level of fluency, a site will feel familiar enough that visitors don’t need spend mental effort scrutinizing and can instead focus on why they’re on your site in the first place.

When the experience is dis-fluent however, you feel it immediately. Take online tie retailer, Skinnyties.com, who didn’t really look like an e-commerce site until their redesign in October 2012.

Before:

After:

A few key changes that lead to huge results:

• Follows prototypical e-commerce layout themes
• Much more “open” with whitespace.
• Images feature a single product with high-resolution pictures & contrasting colors.

Check out the full case study on this particular redesign, as it shows what is truly possible when updating a site to “fit in” with current prototypical standards.

These are the results of the redesign are staggering for only 2.5 weeks after the launch:

The redesign itself, while pretty, isn’t doing anything groundbreaking. It plays exactly into the expectations of what a modern online clothing retailer should be. It’s “open”, responsive, and has a consistent design language across all of the product pages.

But when contrasted with the old site, it’s very clear that the lack of these common elements were preventing buyers from making purchases on the site.

What Visual Information Processing Has To Do With Site Complexity

In this joint study by Harvard, University of Michigan, and University of Colorado, researchers found strong mathematical correlations for “aesthetically pleasing” between different demographics – For example, participants with PhD’s did not like high colorful websites – but there were no guidelines that emerged for universal appeal.

The only thing that was universal was that the more visually complex a website was, the lower it’s visual appeal.

(Sidebar: if you wish to take the test, you can do it here)

Why Simple is Scientifically Easier To Process

The reason less “visually complex” websites are considered more beautiful is partly because low complexity websites don’t require the eyes and brain to physically work as hard to decode, store and process the information.

Watch this quick video about how the eye sends information to the brain for that to make more sense.

Basically, your retina converts visual information from the real world into electrical impulses. Those impulses are then routed through the appropriate photoreceptor cells to transmit the color and light information to the brain.

The more color and light variations on the page (visual complexity) the more work the eye has to do to send information to the brain.

“…the eye receives visual information and codes information into electric neural activity which is fed back to the brain where it is “stored” and “coded”. This information can be used by other parts of the brain relating to mental activities such as memory, perception and attention.” – Simplypsychology.org

Every Element Communicates Subtle Information

image source

This is why it’s important when designing a website to remember every element –typeography, logo, and color selection – communicates subtle information about the brand.

When these elements don’t do their job, the webmaster often compensates by adding unnecessary copy and/or images, thus adding to the visual complexity of the website, and detracting from the overall aesthetic.

Optimizing a page for visual information processing – specifically simplifying information’s journey from eye to brain – is about communicating as much as you can in as few elements as possible.

While that’s an article all on it’s own, consider MailChimp’s logo redesign as food for thought.

When they decided make the brand grow up, they didn’t add the usual “we’ve been doing email since 2001, 3 million people trust us, here’s why we’re awesome, blah blah blah”

Instead, they tightened up the writing, simplified the website – the top headline simply reads “Send Better Email” – and added an even simpler explainer animation of the core product.

Even though this was part of a bigger growth strategy, the results are still impressive, over a million new users have been added since June, when the new logo was first debuted.

 ”Working Memory” & The Holy Grail of Conversion

What all this simplicity is leading to is what happens once visual information finds it’s way to the brain.

According to the famous research of psychologist George A Miller of Princeton, the average adult brain is able to store between 5-9 “chunks” of information within in the short term, working memory.

Working memory is the part of your brain that temporarily stores and processes information in the course of a few seconds. It’s what allows you to focus attention, resist distractions, and most importantly, guides your decision making.

image source

Everything we’ve been talking about up to this point is to reduce the amount of “noise” that makes it’s way into the working memory.

On a “low complexity, highly prototypical website”, the 5-9 “chunks”  the working memory tries to process are things like guarantees, product descriptions, prices or offers. When the working memory can stay focused on fixing the problem, it will try and solve the problem as quickly as possible.

Deviation Causes Disengagement

When you deviate from a person’s  expectations – the price was higher than expected, the color scheme and symmetry were off, the site didn’t load fast enough, the photos weren’t high enough resolution – the working memory processes those disfluent “chunks” instead of what matters.

That’s because the working memory calls the long term memory to use what it already knows to perform the task. When the long term memory can’t aid in processing the information, flow is broken & the working memory disengages and moves on.

That’s why it’s vital you understand your visitor’s level of exposure – not just for sites in your category, but to websites in general -If you want to “hack” their working memory with design.

The blogs they read, the sites they shop on, their browser, age, gender & physical location, all hint at how  will impact their level of familiarity on first impression.

Conclusion

If the visitor can’t rely on their previous experience, they’re not thinking about how innovative your site is. They’re just left wondering why things aren’t where it’s “supposed to be.” Not the best frame of mind if you want them to buy stuff.

Bonus: 7 Things To Do When Planning A Simpler Site.

1. Research your audience and the sites they visit the most. Look for case studies on design changes from said sites & how those resulted in improvement is key areas.
2. Create a mashup of all those “working” components for your own site.
3. Obey the rules of cognitive fluency when you lay out your design. Put things where your visitors have grown accustomed to finding them.
4. Rely on your own colors, logo, and typeface to communicate clearly and subtly. Don’t add copy and/or images unless it communicates something your visitor actually cares about.
5. Keep it as simple as possible – one large image vs a bunch of little ones, one column, instead of three – utilize as much white space as possible.
6. Double check to make sure your site fits the public expectation in pricing, aesthetics, speed, etc.
7. Remember that “prototypical” doesn’t mean that every aspect of your site should fit that mold.

Don’t think of your site as some unique snowflake piece of art. Instead make it a composite of all the best stuff.

Your visitors will love you for it.

Written by: Tommy Walker, ConversionXL
Posted by: CueCamp

The post Why “Simple” Websites Are Scientifically Better appeared first on CueCamp.