Understanding User Experience In Website Optimization

The definition of UI (user interface) is the platform on which the user and website interact with one another. This includes elements like clickable links, forms, and other actions a user can complete on a website. This is basically how (the conduit) a user uses a website.

UX and UI work together by providing a better overall picture of how users interact with and get information from a website. Many elements of UX have to be implemented in the UI in order to give users the best experience possible.

UX: The Experience

Interaction design: the elements that users can interact with, meaning they can watch, read, click on, enter information, or browse.
Based on data, emotion, and user research: A/B testing, how users interact with specific colors, words, and layouts, and the website’s target audience all goes into it’s UX.
Wireframes: the “Map” or list of all the pages that will be on a website. This includes Home, About, Contact, Services, etc.
Sitemap: an automatically-generated list of ALL the pages on a website. This includes all blog posts, images, and other files. It can be auto-generated using the Yoast SEO WordPress plugin.
Personas: marketing personas that are fictional people that designers use to create a website for. Includes there demographics, likes/dislikes, wants, hobbies, and other personal attributes.

UI: The Medium

Visual design: the graphic elements of a site, like the branding, header images, photos, and other graphic elements.
Based on design trends and brand guidelines: uses the brand’s colour palette as created by the designer and uses the latest in design to craft the appropriate “feeling” of a website (e.g. modern, classic, old-fashioned, etc.).
Colours: what colours the website uses for the graphic elements, the background, the text, links, footers, and header.
Typography: what font and font layout are used throughout the site. Depending on branding guidelines and the desired “feeling” of the website (what you want it to convey).
Layout: how the website looks visually, and the order elements go in (e.g. the home page could have a menu, header, featured post image and text, recent blog posts, ad, text box, and footer.

UX and UI are important to website optimization to provide a better website that gives users the information they need when they need it.

The benefits of UX and UI:

More traffic to your website: the easier a site is to use and navigate, the more it’s likely to be shown to users in search engine results and the more it’s content will be shared on social media by customers/users. This all leads to more website traffic.

Increased retention: if the information is easy to find and comprehend, users are more likely to be repeat users and customers.

Increased average time on site: when users can find products and/or information they are interested in, they are more likely to browse related content and product pages as well. (This is why linking to related pages are so important).

Evoke an emotional connection with your audience: by playing up the design and usability to reach users on an emotional level, they will feel a greater connection with your brand and products. This can lead to better customer loyalty, a more positive brand sentiment, and possibly more conversions. Non-profits or brands with a cause like TOMS shoes are good examples of this. TOMS shoes donate a pair of shoes for every pair bought, leading every customer to feel like they are making a difference in the world whenever they are making a purchase.

Increased conversions: if a user is frustrated with a website and can’t find what they are looking for, they will likely leave the website immediately, sometimes after mere seconds. This leads to higher bounce rates, abandoned shopping carts, and high exit rates on conversion pages. By providing the user with a better experience, they are more likely to stay on the site and make a purchase or complete another conversion.

Return rates: online users value there time and want convenience. As a result, they are much more likely to visit or buy repeatedly from a website that saves them time and has high-quality information or products. They are also more likely to recommend the company or website to there colleagues and loved ones.

The principles of UX and UI are:

Accessibility: ensuring that the website is easy to use for any user, including vision or mobility impaired users. This should follow w3 guidelines (referenced below) but also follow design best practices to make text easy to read and making sure any design elements aren’t interfering with the user experience.

Clarity: the website is easy to understand and it’s purpose is clear – this should be key in all pages that are built. While a user could likely take many paths on your website, the goal is to build funnels that are taking them toward completing a conversion. For instance, on an e-commerce site, the home page might have different categories, like Women’s, Men’s, and Children’s clothing. If they click on Women’s, they should ideally be than taken to a page where they can search or narrow down into more niche Women’s categories, like Pants, Shoes, Dresses, or Accessories. This journey should be as clear as possible.

Learnability: the website provides valuable information that answers the user’s query or need. In addition to offering products or services that they are interested in, the website should also offer additional resources that allow the user to learn more about the industry, the company’s offerings, history, and more. For instance, a clothing store that’s been open since 1912 could have a page that shares the history of the company and the building it’s in. This makes the company feel more personal to the user and also gives them some more background on how it runs, which helps increase brand trust.

Credibility: the website uses reliable information from reputable sources to prove it’s the point or educate the user. In addition to establishing its own credibility through reviews, history, awards, or recognitions, the website design itself provides credibility by being easy to use and find information on.

Relevancy: the website layout and content is kept up-to-date with best practices for the industry, making it relevant to the user. If there is an outdated design or information, it decreases user trust and brand sentiment.

What should you test?

User intent: what is the user looking to accomplish on a page? (Include examples of a few different intent actions, such as an e-commerce website and a landing page to sign up for an email newsletter).

Points of friction: what is stopping a user from completing the desired action on your website? Places to examine include pages that have the highest bounce rate, abandoned shopping carts, landing pages that do not convert, CTAs on pages that aren’t clicked.

Causes of friction include:

Hard-to-understand content
Disruptive design elements (e.g. the colour yellow may turn some buyers away)
Shipping costs are too high
Order fulfilment time too long
Forms too complex and time-consuming.

Influence of web design on UX: how bad design can create a bad user experience, even if the website is useful and the company is well regarded. This could include off-putting or outdated colours or design elements, hidden CTAs, not enough content about products and services on the home page.

Navigation: navigation layout and the process can vary—should it be collapsible (like many mobile navigation layouts are) or should navigation expand with mouse hovers? Additionally, testing nesting of pages is important. E.g., where sub-pages go in the navigation—would the products page get more clicks if it was on the main navigation instead of as a subpage under “about us”?

This is a website with a poor UX and UI because:

There is no menu so the user can’t get to other pages on the site
The background and text contrast could be difficult to read
It doesn’t lead with how it benefits the user
The Facebook button is leading the user away from the website (where they make a conversion)
The layout is not modern or mobile-friendly, so it’s more difficult to use

This is a website with a poor UX and UI because:

The red text at the top of the page with contact information is hard to read
The site isn’t mobile-friendly, so it’s hard to use on different devices
The menu navigation is hard to read because the words run together, so that users may get frustrated or confused
There’s no CTAs, so users don’t know what to do with the information that is on the site.

Good website navigation:

Gets more clicks and traffic to interior sub-pages. This can help the user get around the site more easily and find pages they may have not been able to find on there own before.

It increases time on site and decreases the bounce rate because users can find what they are looking for. This gives users a better impression of the company and it’s a website and makes it more likely that they will make a purchase or complete a conversion.

It makes it easier for search engines to crawl the site for better indexing. This leads to better visibility in search results.

This is an example of good e-commerce website navigation because it is black text on a white background, the categories are broken out in a way that makes sense, and there is a drop-down to each top navigation item that lets users go straight to the most specific category page they are looking for.

This is an example of good website navigation because it is dark text on a white background, there are CTAs in the navigation and there is a red button in the top right corner (key since this is a non-profit), and what is most important (the content), is listed first in the navigation (topics). Users who go to this website want to learn more about the issues in a non-partisan, well-researched way, and that’s what this site does.

A responsive website across desktop, mobile, and tablet devices is better because:

Much better user experience: users are able to see all the information on the page and they aren’t having to pinch the screen, squint, or try to see something that is cut off. It also makes the text easier to read and the navigation easier to use.

Higher preference in search results: as mentioned earlier, Google announced that they are giving preference to websites that are mobile-friendly in search results over sites that aren’t.

Better design across devices: this is good for branding and credibility, as it makes the site look higher quality. This, in turn, is a reflection of the business.

User expectations and intent differ across difference devices:

What a user is looking for on mobile may be different than desktop: A/B test placement of contact information, reviews, services, and CTAs across different devices to see what gets more clicks.
Do users need to be driven to an app on the mobile website: e.g. would your app work better than the website on mobile? For some e-commerce sites, like Amazon, that is usually the case because the app has more features, like searching by photo and faster product page and search result load times.

User interface expectations vary: on mobile you need call links for the phone number and the number formatting for fields that ask for a phone number or specific number. This makes the mobile site easier to use.

user experience in website optimization

How to create the perfect CTA:

Use action words: this inspires users to take action. Examples are: Click now, buy now, Get ___, Order, Purchase, Contact.

Create urgency and scarcity: only offer things for a limited time or in limited quantities so users feel more pressured to buy right away. Something like, “Only 22 books remain” or “This sale only lasts for 24 hours,” or use a feature like a countdown timer to show when it will no longer be available.

Minimize risk: offer money-back guarantees so users feel more confident about making a purchase. Users will feel like it’s not so permanent and that they have more of a choice.

Focus on value: offer a list or honest perceived value (e.g. “Buy now for only $49, a $499 value”) so customers know what they are getting for there conversion or purchase.

Invite readers inside: give them an exclusive look or offer that they won’t get anywhere else. This makes them feel more exclusive and they feel like they are part of an exclusive club.

Get personal: use mass personalization on a website and in email campaigns, like mentioning users by name, listing their location, or using retargeting.

Foster curiosity and anticipation: make sure the user can interact with the page through elements like, “click to read more” or “see what discount you get.” You could also set a countdown timer until a certain sale goes live.

Show benefits and social proof: testimonials, comments on social media, photos of customers using the products, and other forms of social proof show potential customers that others enjoy the product. Listing out the benefits and what you get with the purchase also breaks down the hesitancy to buy.

User expectations and intent differ across different devices and audiences. Thus, you should shape your CTAs and user experience accordingly.

Select the best CTAs for your audience through testing different wording, feature boxes, offers, and more. (These may also vary by device). For example, “Call us today to get an appointment” with a link to call directly on mobile would likely get more clicks on mobile than a similar link on the desktop.

Align the user-experience to your specific audience: some audiences want a simpler experience, while others expect something more complex. For example, an older audience that is above age 60 would likely appreciate larger font sizes and bigger headers, with fewer animations since they read slower. Conversely, a tech-savvy crowd would expect more innovative and forward-thinking web design, like interactive elements (quizzes, games, etc.).

Improve CTA

This CTA works because it’s easy to find, simple, and will be what there specific audience is most likely to want to know when first going to there website. They likely don’t want country guides or blog posts; they want to know what tours EF Tours has available first.

The format also appeals to there audience – it has a photo of a global location, the text pulls them toward exploring the world, which is what EF Tours offers its customers.

Page Speed

Why is page speed for websites important for website optimization and SEO?

Page speed is a ranking factor for Google: they announced that for their mobile-first index, page speed would be a factor.
Mobile users, for instance, are much more likely to leave a page if it takes longer than 3 seconds to load. This is one of the reasons why Google invented AMP – to cache pages, so they load faster.
Page speed is an indicator of other issues with the site such as bugs in code; plugins aren’t updated, some interactive features or images that need to be compressed or removed.

How does website design errors affect website optimization?

Some elements don’t load correctly, leading to other “broken” areas of the site. E.g., if a slider is broken, the animations and images won’t load.
Errors can affect what information is shown. E.g., if navigation doesn’t work, the user can’t properly access different areas of a site.

Now tell us your own side of this story.

We would also like to hear what you feel about the topic we discussed today. Your feedback is very important to us. Feel free to drop your comments and recommendations. If you have a contrary opinion, you can drop that too.

You can also join our Facebook Page CRMNigeria for more updates. You can do that by clicking on the link or searching for our page on Facebook.

You can also join our WhatsApp Group Here.

Finding the right Long-tail Keywords? Start your journey here.