15 User Experience Details You Missed

3
3197

15 User Experience Details You Missed, with bonus details provided by UX gurus!

15-User-Experience-Details-You-Missed-UsefulUsabilityThese 15 user experience details can be missed by novice and expert web designers alike. Paying attention to these UX details will improve your website, guaranteed!

And as a special bonus, included with these 15 UX details is a special extra section of additional UX details from leading UX gurus including; Daniel Szuc (Founder UX Hong Kong), Jan Jursa (@IATV), Dave Garr (Co-founder UserTesting) and Rich Gunther (Former UXPA President).

 

Navigation

1. Don’t bury important stuff below the fold.

Never forget UX golden rule number 1: If your website visitors don’t see it, it’s not there. According to Chartbeat CEO Tony Haile, among millions of sessions evaluated across the web, the average visitor spends ONLY 15 SECONDS on a page! Put your important stuff near the top, above the fold, and for good measure repeat it at the bottom of a page if you have longish pages.

Dont-Bury-Important-Stuff-Below-The-Fold-UsefulUsability

2. Don’t break the back button.

For navigation within your own site, do not use hypertext or other links using “target=_blank” to spawn new tabs. This breaks the back button, which web visitors use when they go the wrong way looking for their content.

Remember UX golden rule 2: Do not break the back button, or you’ll potentially lose your visitors forever.

Dont-Break-The-Back-Button-UsefulUsability

3. Mobile UX: Use hamburger menus.
Click here to view latest job postings

The defacto system for mobile main navigation is a hamburger menu. Most mobile visitors know hamburger menus and use them to reveal navigation. Since they are a standard today don’t fight human nature, use hamburger menus in mobile versions of websites.

Use-Hamburger-Menus-For-Mobile-Websites-UsefulUsability

4. Desktop UX: Don’t use hamburger menus.

Do not use hamburger menus on desktop sites! Remember, mobile hamburger menus HIDE navigation. On desktop screens, you have PLENTY of room to provide your web visitors with the visual navigation they need to be more efficient. Remember, if your website visitors don’t see it, it’s not there. Do NOT use hamburger menus for desktop based websites.

Desktop-UX-Dont-Use-Hamburger-Menus-UsefulUsability

5. Always provide a “home” page link.

Typically, long-tail search queries (meaning search queries with more than 3-4 words, drive the bulk of your website traffic. Those visitors typically visit a deep page in your website first, before they visit your home page. Providing those “deep-link” visitors with a global navigation link to your home page will help you engage with and retain more of your deep-linking website visitors.

Always-Use-Home-Links-UsefulUsability

Visual Affordance

6. Links should look like links.

Do not hide your all important links, use different colors and/or underlines to visually identify your link. Never forget UX golden rule 6, Content is not King, Engagement is. Content is but a tool to drive engagement, never the other way around.

Make-Hypertext-Links-Visually-Obvious-UsefulUsability

7. Visited links should look like visited links.

It’s important to help your website visitors navigate your pages, to help them quickly find the content they seek. Use different colors for visited versus unvisited links to help them navigate your site more efficiently and let them know where they’ve been.

Use-Visited-Link-Colors-To-Help-Users-Navigate-UsefulUsability

8. Use buttons that look like buttons.

Flat design has caused some designers to make buttons look like other (non clickable) design elements. Use visual affordance to make your buttons look like buttons and you will have more website visitors clicking them.

Visual-Affordance-of-Buttons-UsefulUsability

9. Use contrasting colors.

Readability and thus usability of content requires strong contrasting colors. Dark text on a light background works best for easy reading. Use of subtle shades of like-colors, or lightly colored text on a light background, often cause usability issues, especially among older readers. Keep your colors strong and contrasting.

Use-Strong-Contrasting-Colors-for-Text-UsefulUsability

10. Calls To Action must have a strong, unique color.

Each page on your website should have a goal, and hopefully that goal aligns with the visitor engaging with your business. Calls To Action stimulate engagement and thus are the most important thing on a page for obtaining that goal. Emphasize CTA importance by using strong unique colors for your CTAs so web visitors can easily find and use them.

CTA-Must-Use-Unique-Color-UsefulUsability

Scanning

11. Use headings and subheads (h1, h2, h3, etc.).

Web visitors scan, they don’t read, at least not until they find the content they are interested in. Use headings and sub-heads to help improve scanning of content.

Use-h1-h2-h3-tags-to-break-up-long-sections-of-text-UsefulUsability

12. Visually chunk content.

Content chunking is a method of combining and grouping items into smaller pieces or chunks to make them visually easier to scan. As an example, consider two identical phone numbers: 15125551212 and 1 (512) 555 1212. Both are the identical number, but by chunking the numbers into smaller groups it becomes much easier for us to scan and read the content.

Visual-Chunking-Example-UsefulUsability

13. Use whitespace to improve scanning.

Adding whitespace to visually separate content enables improved scanning.

Break-up-long-sections-of-content-with-whitespace-UsefulUsability

14. Use photos or videos to help communication.

Using photos and videos, especially for eCommerce websites or for educational content, helps communicate concepts that can be hard to comprehend using text only.

images-help-reinforce-text-UsefulUsability

15. Utilize ordered and unordered lists.

Ordered and unordered lists help improve readability and scanning, by visually chunking or clustering information into content chunks and adding icons or bullets to help improve fixation and scannability.

ordered-and-unordered-lists-improve-readability-and-scanning-UsefulUsability

Bonus Section, UX Details You Missed From UX Gurus

I reached out to several UX gurus, and here’s what they had to say about small but important UX details that are often missed.

Daniel Szuc:

Daniel-Szuc-Photo-171x200-from-UsefulUsability

Dan is the co-founder of Apogee, a top-notch design and UX firm in Asia. He’s a co-author of the book “Global UX” and was founder of UX Hong Kong. He’s a frequent speaker, lecturer and expert on usability, User Experience, Customer Experience and how they interrelate with businesses.

User-Centered Design. Understanding the customer’s task flow

Dan reminds us that a small but important detail to UX is to always consider the user’s needs, wants and mental map when designing any experience. It’s easy to get caught up in the need to execute functions and features, especially in an Agile environment. Rather than just producing features to hit a sprint timeline, carefully consider what the user wants in terms of their goals, how they think about a process, and craft the user experience to benefit and augment their task-flow.

Jan Jursa:

Jan-Jursa-Photo-150x175-UsefulUsability

Jan is a highly active IA and UX leader and among other things is co-founder of the German IA Summit, MOBX Conference, MEDLove Summit and Editor in Chief of UX Stories. He tweets voraciously at @IATV. Here are Jan’s picks for UX details that often get missed:

Breadcrumb navigation. Gets omitted a lot in mobile web and app context–but is still important and valuable to the user.

Strong Calls To Action. Decide what action you want the user to undertake and present a call to this action that does stand out.

Context-sensitive Social Sharing. Provide social media buttons only on pages that actually have content users might want to like or share in a real world scenario.

Dave Garr:

Dave Garr photo, co-founder of usertesting.com
Dave Garr, co-founder of UserTesting.com

As a co-founder of UserTesting way back in the dark days of 2007, Dave and his team have made a major impact for all usability practitioners across the world; a fast, low-cost and useful usability testing service that provides results in a day versus what used to take weeks. Here are Dave’s picks for small UX details that often are missed:

Label Confusing Icons. Use text labels on any icons that could be unclear

Strong Calls to Action.  Choose one primary goal or desired action for each page, and make it obvious.

Real-time Form Validation.  Use real-time validation on form fields (so users immediately know if they made a typo before they click “Submit”).

Improve Readability. Make sure fonts are large enough to be read easily (50-75 characters per line at 16 point font for desktop).

Test with Real Users.  Most importantly, test your new designs with real users before they go live!

Rich Gunther:

RichGuntherColor-125x171-UsefulUsabilityRich is the former President of the User Experience Professional’s Association and Principal of Ovo Studios, The Usability Team, and Principal Interaction Designer for Oracle.

Use Modality Judiciously. Users don’t like to feel boxed in.  Make sure that you aren’t locking them into a modal flow if it doesn’t have to be modal.

Ensure Accessibility. This isn’t just about alt-tagging your images.  As the web and mobile apps become more and more interactive, it’s imperative to consider how assistive technology can interact with your UI to provide a clean experience for users.

Look at things on Multiple Browsers. This is still a thing, even here in 2015.  Different browsers interpret the DOM (Document Object Model) of the page in different ways, and it can have catastrophic effects on layout, styling, and interaction.

Convey a Sense of Place. Whether it be a breadcrumb, a color scheme that alludes to different functional areas of the UI, or some other affordance, letting the user know where they are in the grand scheme of things reduces frustration.

Use White Space Effectively. Years of designing for desktop applications left us feeling like we need to draw a box around everything.  That isn’t en vogue anymore.  Simply grouping like elements together, and then separating them from other elements by space alone, still conveys the organization of information on the page, without cluttering it with “chrome”.

Conclusion: 15 UX Details You Missed

These 15 UX Details that You Missed, and those provided by our UX gurus, are important as many times experts and novices alike miss some of them. Review your websites to ensure you are maximizing your web visitors user experiences by checking for all 15 of these small UX details. By making sure you are using them, you will improve your UX and your website visitor’s engagement with your business.

Have we missed any? What are YOUR favorite small but important UX details that can get missed? List them in the comments section so we can all grow wiser in the ways of the force UX together!

Additional UX Details Resources:

How to Optimize Conversion with Six Persuasion Principles

Why do Pop-ups work so Damn Well?

Kill Conversion Killing Carousels Now

How One Word Increased Open Rates by 19 Percent

3 COMMENTS

  1. Great stuff. I realy enjoyed this article. I love it love it love it.
    A lot of good idea’s to start improving

  2. Very informative for us website tester newbies! Thanks for all of the great tips to watch for as I am testing sites.

Comments are closed.