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

Size: px

Start display at page:

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

Lindsay McCarthy
5 years ago
Views:

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

2 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. 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. 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. 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 whitepaper, we look at 10 of the top UX/UI best practices and the science behind them. 1

3 BEST PRACTICE # 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. That means establishing a clear CTA is a small, easy step that can have a big impact when differentiating you from the potential competition. When you include too many CTAs in one place, or have a CTA that s unclear to the user, you create confusion. 2

4 BEST PRACTICE # 2 HOME SERVICES ABOUT US CONTACT Use a distinct visual hierarchy to emphasize important content to users. A clear visual hierarchy is a visual 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. This takes into account traditional elements of visual hierarchy (font size, colors, shapes, etc.) and web-specific research, like that found in eye-tracking studies. Again, it s about helping users find what they are looking for, as quickly and seamlessly as possible. LOGO COPY BLOGGER Headline olor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, olor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, dolore magna aliqua. Ut enim ad minim veniam, To quote usability.gov, 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. Where does your eye go first? 3

5 BEST PRACTICE # 3 HOME SERVICES ABOUT US CONTACT 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 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. sed do LOGO eiusmod tempor incididunt ut labore Headline olor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, olor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, COPY BLOGGER dolore magna aliqua. Ut enim ad minim veniam, 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

6 BEST PRACTICE # 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. 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: Usability.gov 5

7 BEST PRACTICE # 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 HOME SERVICES ABOUT US CONTACT LOGO COPY BLOGGER Headline olor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, olor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, dolore magna aliqua. Ut enim ad minim veniam, 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. 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. 6

8 BEST PRACTICE # 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% 79% of users scan when reading on the web only 16% read word-by-word. 16% 16% Source: Nielsen Norman Group 7

9 BEST PRACTICE # 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. Reducing friction improves user experience. 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. Reducing friction improves user experience. 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, II 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. 8

10 BEST PRACTICE # 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). 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-computer interaction, forms remain the predominant form of interaction for users on the Web. Justin Mifsud, An Extensive Guide to Web Form Usability, Smashing Magazine. 9

11 BEST PRACTICE # 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 and Gomez.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. 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, from Kissmetrics: n Use GZIP Compression (check with your web host to see if they provide it) n Have Javascript and Stylesheets load in external files, instead of within the code of each page n Optimize your images ( save for the web ) n Don t rely on HTML to resize Images n Cache pages when you can n Only use redirects when necessary n For heavy traffic sites, consider a Content Delivery Network (CDN) 10

12 BEST PRACTICE # 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 2 cm, 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. 60% comscore reports that smartphones and tablets now account for 60% of all online traffic, and that number is expected to continue to rise. 11

13 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. Sources: Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes, by Anthony T., in Smashing Magazine Web Design Trends of Fortune 500 Companies, Infographic by GO-Globe. An Extensive Guide to Web Form Usability, by Justin Mifsud, in Smashing Magazine How Users Read on the Web, by Jakob Nielsen, Nielsen Norman Group Visual Design Basics, at Usabillity.gov How Loading Time Affects Your Bottom Line, by Sean Work, published by Kissmetrics Speed is a Killer Why Decreasing Page Load Time Can Drastically Increase Conversions, by Sherice Jacob, published by Kissmetrics Take a few minutes to review your own site. Pretend to be a first time visitor to your site and consider each of the 10 best practices we just reviewed. 12

USER EXPERIENCE ASSESSMENT For digital marketers and technology experts seeking efficient, measurable improvements of their website s user experience, icidigital s User Experience (UX) Site

14 USER EXPERIENCE ASSESSMENT For digital marketers and technology experts seeking efficient, 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 Jymmi Jacobs j.jacobs@icidigital.com x1 Corporate Office: 4000 Westchase Blvd., Suite 280, Raleigh, NC Additional Locations: Chicago, IL Denver, CO Washington, DC Since 2006, icidigital has been relentlessly delivering market-leading enterprise technology solutions that give our clients a decided advantage. We ve since combined that engineering heritage with deep-seated marketing savvy to create award-winning websites and digital strategies for companies like Time Warner Cable, SAS, Ingersoll Rand, and Hyatt. Today we re a full-service, end-to-end integrated solutions company, that delivers digital strategy, user-centered UX and UI, industry-leading AEM enterprise technology services, and consulting. That means we have both the specialized knowledge, and the big-picture understanding, to help you create the best possible experience for your customers

10 Simple User Experience Best Practices

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