10 Simple User Experience Best Practices

Size: px

Start display at page:

Download "10 Simple User Experience Best Practices"

Jemimah Reed
6 years ago
Views:

1 10 Simple User Experience Best Practices That Make Your Website Design 100% More Powerful Presented by

We all know that feeling of frustration. As a user, it starts off as mild annoyance, but eventually becomes resignation, as we decide the site or app is just too hard to figure out and give up.

2 We all know that feeling of frustration. As a user, it starts off as mild annoyance, but eventually becomes resignation, as we decide the site or app is just too hard to figure out and give up. As marketers and technology experts, we like to believe our sites are different. We d never force users to put up with the types of experiences that make us turn away from other s sites in disgust. But when was the last time you watched a visitor interact with your site? Regular user testing can be essential in pointing out friction points you may not know exist. It can help you iterate on your existing design to gradually improve your site s overall performance and experience. If user testing isn t currently an option, the next best thing is an evaluation of your site against standard design best practices to see where you stack up. In this white paper, we look at 10 of the top UX/UI best practices and the science behind them. We ve all been there... struggling to get a website or app to do something that we want it to do, only we can t seem to figure out how to do it. 10 Simple User Experience Best Practices 2

1 Provide users with a clear call to action (CTA). Clearly stating your call to action will help increase conversions; avoid confusing or conflicting CTAs. Why?

Site visitors aren t sure where to click, or what will happen if they do click which means they re less likely to click at all.

3 1 Provide users with a clear call to action (CTA). Clearly stating your call to action will help increase conversions; avoid confusing or conflicting CTAs. Why? When you include too many CTAs in one place, or have a CTA that s unclear to the user, you create confusion. Site visitors aren t sure where to click, or what will happen if they do click which means they re less likely to click at all. According to Go-Globe, 47% of [Fortune 500 company] websites have a clear call-to-action button that takes users 3 seconds or less to see. ¹ Establishing a clear CTA is a small, easy step that can have a big impact to differentiate you from competition. Source 1: G0-Globe When you include too many CTAs in one place, or have a CTA that s unclear to the user, you create confusion 2 Use a distinct visual hierarchy to emphasize important content to users. A clear visual hierarchy is an on-screen design that helps users move through the elements of the site, in a logical and helpful way moving their eye naturally across the page, while directing them to the section of the page they are most likely to be looking for. It takes into account traditional elements of visual hierarchy (font size, colors, shapes, etc.) as well as web-specific research, like that found in eye-tracking studies. It s about helping users find what they are looking for, as quickly and seamlessly as possible. 10 Simple User Experience Best Practices 3

4 Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements. A successful visual design does not take away from the content on the page or function. Instead, it enhances it by engaging users and helping to build trust and interest in the brand. Source 2: usability.gov 10 Simple User Experience Best Practices 4

5 3 Sites should follow established user experience and user interface conventions. Websites have been the mainstay of our digital world for almost two decades, and over that time, certain standards have become accepted as the norm. Users have become accustomed to finding certain pieces of information in key locations. For example, most users expect primary navigation to be across the top of the screen and secondary navigation to either be underneath it, or on the left-hand side. Users also expect to find some type of contact information within your footer. By including these accepted conventions in your site, you conform to users expectations and the more closely a user s actual experience of your site matches their expectation, the better the experience. 4 Navigation should communicate to users in a consistent and easy-to-understand way. Site labels need to be in the language of the user, avoiding internal corporate or industry jargon. Why? When a label doesn t intuitively make sense to your users, they re much more likely to get lost, and it s feeling lost that often causes frustration. When establishing navigation, you want to simultaneously avoid structuring the site so that navigation is too deep (users have to click too many times to find what they re looking for), or too shallow (everything is in your navigation, causing it to be cluttered and making it hard for users to find a specific link). When designing a website there are a lot of easy tests, like card sorting, that can help to ensure information gets placed where your users (not you) would expect to find it. 10 Simple User Experience Best Practices 5

6 What Is Card Sorting? Card sorting is a method used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics into categories that make sense to them and they may also help you label these groups. Source 2: Usability.gov 5 Use well-organized, hierarchical breadcrumbs. When a user is several layers deep into your site, it can be hard to quickly navigate back to a higher-level page. Breadcrumbs provide help as a secondary navigation scheme that shows the user s path through a website. Just as in the fairytale Hansel and Gretel, breadcrumbs help a user get back to where they started by providing quick links to all the previous pages where the user has been. They are often shown as a horizontal line of text, listing page titles with a carrot between them, like this: Home > About > Company History > Founder Bio By making it easier for a user to jump back several steps with a single click, breadcrumbs make navigating a complex site much easier for a busy user. According to GO-Globe, 93% of Fortune 500 Companies have a logo in the top left corner of their site and 87% have a search field. Source 1: G0-Globe 10 Simple User Experience Best Practices 6

7 6 Use consistent buttons, links, and heading styles to reduce the amount of learning required to use the site. According to data from Nielsen, 79% of users scan when reading on the web only 16% read word-by-word³. Reusing certain key components of a design (including button styles, links, and heading styles) consistently across your site makes it easier for users to quickly scan a page and find the information they are looking for, even when content changes from page to page. While we often design to try and draw a user s attention to the elements we most want them to see, that often leads to a poor user experience. Instead, designs should highlight the information users are most likely to be looking for, helping them find it quickly when scanning and creating the best possible experience. 79% 16% of users scan when reading on the web read web content word for word Source 3: Nielsen Norman Group 10 Simple User Experience Best Practices 7

8 7 Related items should be grouped, helping users find what they need. Grouping related items is a basic way to increase fundamental usability. Placing relevant items in proximity is logical and reduces friction. For example, think about a restaurant s website where would you expect to find the restaurant s address, hours, and contact information? Since these are all pieces of information I need to determine how to visit your restaurant, I d expect to see them on the home page (and likely again on the contact page), all grouped together. The same is true of other types of sites for a car manufacturer, perhaps it s all the models they offer; for an ecommerce site, I d expect women s clothing and men s clothing to be grouped separately; tops in one section, pants in another. Again, it s about putting information where users expect to find it, as a way of improving their experience. Reducing friction improves user experience. 8 Use short, concise forms when asking users for information. Forms are often how we, as businesses, collect the information we need to reach out to that visitor and offer other services or information that might be helpful. But the longer the form, the less likely a user will take the time to fill it out. For that reason, it s important to have a form be only as long as it needs to be, but no longer. The only exception to this rule is if you need to filter out unqualified leads from your marketing funnel intentionally adding a small amount of user friction into your form designs is an easy way to weed out all but the most determined (i.e. those with the greatest need and likely your target customer). 10 Simple User Experience Best Practices 8

9 When using a website, users have a particular goal. If designed well, the website will meet that goal and align it with the goals of the organization behind the website. Standing between the user s goal and the organization s goals is very often a form, because, despite the advances in human and computer interaction, forms remain the predominant form of interaction for users on the Web. ⁴ Source 4: Smashing Magazine 10 Simple User Experience Best Practices 9

10 9 Site should load quickly on desktop, tablet, and mobile devices. Site speed can contribute significantly to a user s experience. Load time is a major cause of page abandonment that is, leaving your site to find what they need elsewhere, likely from your competitor. So, how fast is fast enough? According to studies done by akamai.com, nearly half (47%) of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn t loaded within 3 seconds.⁵ Not sure how well your site measures up? A quick Google search will turn up a multitude of free tools to measure how long your site takes to load. Source 5: akami.com Of course, knowing where you stand is one thing knowing how to improve site load time is another. This is perhaps one of the most complex things to improve on this list. Still, here are a few small things that can help: Use GZIP Compression (check with your web host to see if they provide it) Have Javascript and Stylesheets load in external files, instead of within the code of each page Optimize your images ( save for the web ) Don t rely on HTML to resize Images Cache pages when you can Only use redirects when necessary For heavy traffic sites, consider a Content Delivery Network (CDN) Source 6: Kissmetrics 10 Simple User Experience Best Practices 10

11 10 On mobile, site links are well spaced and click areas are large enough to allow easy touch interaction. Links or buttons that are placed too closely together when a site is accessed from a mobile device can cause users to accidentally click on the wrong link, taking them to a place they never intended to go. Similarly, buttons or links that are too small can be hard to click on a mobile device, further adding to a user s frustration. An MIT Touch Lab study found the average width of the index finger, for most adults, is 1.6 to 2cm, which translates to pixels. The average thumb was 72 pixels on. However, those sizes, while ideal, aren t always practical or pretty. The takeaway? Think about your button placement on the screen, and the likelihood that a user will use their index or their thumb to access it when determining size. Then make an informed decision, keeping in mind that in this case, at least, bigger is usually better. Mobile traffic is responsible for percent of internet traffic in 2017 compared to percent from the previous year.6 Source 7: HostingFacts Conclusion On their own, any one of the 10 items on this list may not significantly detract from a user s experience, but put a few together, and a user s frustration will quickly build. As marketers and developers, we typically know our sites inside and out. We know how to navigate back to a previous page when we end up too deep, or where to find a link to the latest ebook or whitepaper. So we often forget to think about how a visitor feels when they land on the page. Take a few minutes to review your own site. Pretend to be a first time visitor and consider each of the 10 best practices we just reviewed. 10 Simple User Experience Best Practices 11

User Experience Assesement For digital marketers and technology experts seeking e cient, measurable improvements of their website s user experience, icidigital s User Experience (UX) Site Assessment

12 User Experience Assesement For digital marketers and technology experts seeking e cient, measurable improvements of their website s user experience, icidigital s User Experience (UX) Site Assessment provides an analysis of your website against our 80 UX best practices. We ll identify opportunities that can quickly improve the user experience of your website, producing actionable recommendations within two weeks that you can start implementing immediately, often without the need for help from a developer or agency. Measurable outcomes are usually seen within 45 days. Interested? Contact Mark Kelley VP, Digital Engagement mark.kelley@icidigital.com x124 Corporate Office: 4000 Westchase Blvd., Suite 280 Raleigh, NC icidigital relentlessly delivers market-leading enterprise technology solutions that give you a decided advantage. We create a trusted partnership with you and your business to e ectively plan, design, and build digital strategies, interactive experiences, and enterprise platform solutions. Our creative, business, and technology experts integrate seamlessly with your team to strategize how to best leverage collective talents, maximize e ciencies, and produce the exact outcomes you desire. icidigital s team of experienced specialists, plus our track record of successful partnerships, gives us an edge in industry know-how and an understanding of the big picture. With expertise in AEM, and experience building adaptive systems with Adobe Marketing Cloud, icidigital is a powerful partner for enterprise organizations. Sources: 1 - Web Design Trends of Fortune 500 Companies, Infographic by GO-Globe. 2 - Visual Design Basics, at Usabillity.gov 3 - How Users Read on the Web, by Jakob Nielsen, Nielsen Norman Group 4 - An Extensive Guide to Web Form Usability, by Justin Mifsud, in Smashing Magazine 5 - Akamai Reveals 2 Seconds As The New Threshold Of Acceptability For ECommerce Web Page Response Times, akamai.com 6 - How Loading Time Affects Your Bottom Line, by Sean Work, published by Kissmetrics 7 - Internet Stats & Facts for 2017, by John Stevens, published by HostingFacts 10 Simple User Experience Best Practices 12

White Paper SIMPLE USER EXPERIENCE BEST PRACTICES THAT MAKE 10YOUR WEBSITE DESIGN 100% MORE POWERFUL

White Paper SIMPLE USER EXPERIENCE BEST PRACTICES THAT MAKE 10YOUR WEBSITE DESIGN 100% MORE POWERFUL 1 We ve all been there struggling to get a website or app to do something that we want it to do, only