•  

Northwoods Blog

User Experience and Trendy Web Design

April 27, 2017

Animations, videos and interactions have made websites more engaging. Done well, these tools help users navigate a website, absorb content and accomplish their goals, and thus enjoy a good user experience (UX). Done poorly, they annoy and frustrate users.

Users should enjoy the tools at your site. Those tools should be intuitive. Long learning curves drive visitors from your website before they see what you offer.

Good UX makes your site memorable for all the right reasons: It’s engaging, useful and rewarding. Keep in mind that the latest trends and wow factor can also make your site memorable, but sometimes for the wrong reasons. (Remember those annoying animated site loading pages that sprang up a few years ago, the ones that made you wait to get to the actual home page?) Building good UX means building what’s best for your users.

Don’t neglect the simple, quick, even obvious things that improve UX.

Remember: You are not the user!
What we designers and developers like and want is not always best for the target user.

Without talking to actual users of the website, we can only guess about what they find useful and engaging. User research, both active (interviews and testing) and passive (analytics), provide a wealth of information about what users want and need and about how they would use certain features.

Good UX cannot exist without research. Research verifies or disproves our assumptions about the user and thus shapes the project we build. Real user data improves the likelihood of UX success. Furthermore, gathering the data shows users that you care about them. The resulting interactions, calls to actions, conversations, stories, content, and visual design – the sum of which is UX -- speak to them. It’s as if you personalized the website for each user.
 

1. Make sure the site works on many device types
Trend tools are cool. But many aren’t thoroughly tested for functionality, usability, and user acceptance. I may still be in the stone age with my iPad 2; most websites barely work on it – or don’t work at all. OK, my bad for clinging to an ancient device. But know your customer; does its sales force work with older, company-issued devices? Note that lots of trendy stuff doesn’t work well on newer devices (desktop touch screen, tablets, phones, and things just over the horizon). The point is, what works on one device type does not necessarily work on another. If the cool new gizmo helps users complete their tasks easily, keep it. If it gets in the way, find another way to help. Sometimes the “wow” factor can be nearly invisible, working beneath the user’s radar in the small, simple things.
 

2. Fast loading websites
Trendy tools and features can slow down websites. Users hate that. It impedes their ability to get things done. At the start of a website project, discuss a performance budget. Show the things that can slow down a website, prioritize these items, and decide which can be improved – or removed -- to speed things up. Among them:

a. Large banner images and carousels
No matter how you use images, their file sizes should be as small as possible, without sacrificing image quality.
Carousel
Carousels rotate several images to convey lots of information in a small space. Large, dense carousel images slow down loading. Smaller and fewer images speed up the website.


 

Large single banners
Banner images have become very large on many websites. In these cases, it could be best to only have one image, with no carousel. Another option is to place several somewhat smaller banners throughout the page, a design that works especially well on very long pages.


Parallax Scrolling

In parallax scrolling, an image in the background scrolls at a different rate than other content. See this in action in this New York Times story.

Parallax has slowly developed become more popular over several years, as it has taken time for parallax to become useable on different device types. (My ancient iPad 2 does not like it at all.)

Each of the trending banner-image types has its pros and cons. Your target audience, content needs and performance budget should guide you as you decide which will best serve your new website’s users.

Reduce the Number of Plug-ins
Site speed and user impact count even more when a trendy new tool or feature requires code. Usually, user experience designers look at both factors, as site speed certainly impacts users.

Why add more code for a feature the user doesn’t really like? And how will the additional code affect the performance budget? Prioritize. Determine what will have greater positive impact on the user. This can help the web team decide what is best for the business goals, user needs/wants, and site speed. A slow-to-load plug-in can be distracting, not perform well until fully loaded, and cause the user to sit and wait to for  content. They don’t wait very long.

3. Long pages and improved navigation

Pages should serve their specific purposes – display a product, say, or complete a conversion -- and then help the user navigate to related information. Ambition beyond those two things leads to confusion. And if all pages give the user the same things, no page serves a clear purpose and the user won’t figure out how to use the website.

Long pages

In the past few years, longer pages became trendy. Increased use of mobile devices drove this trend; navigating among pages is much harder on mobile. Long pages reduce both the number of pages on a website and the complexity of navigation. Instead of chunking content onto different pages, we chunk content onto different sections of the same page.

The three-click-rule myth
Remember the Three Click Rule? It held that users should find the content they need within three clicks. These days, we consider it a myth. The number of clicks is not as important as the quality of the content at each click within an intuitive user experience. Complex navigation can work, if content at each click builds user confidence. If users feel progress in the right direction, they don’t mind clicking more than three times.

Megamenus and dropdown menus

Striped pages, currently trending, divide into horizontal bands of color and do away with dedicated primary and secondary navigation on the left or right.


Striped design looks really nice, allows versatility in content placement, and helps users understand content chunking on long pages. Overall site navigation resides in megamenus. Page-content related navigation resides within the content.

Megamenus and dropdown menus make it easy for users to understand the overall navigation of the website. They show the main areas of the site in one view. Good taxonomy (wording of the links) leads users to easily find what they seek.

Dropdown menus are simpler versions of megamenus. They have fewer items.

 

Megamenus have more items and levels of navigation, and can contain calls to action. They can fill the browser window. Megamenus need not show everything on the site. They should group like items together and be easy to scan.


 

Your choice of menu type depends on your information architecture and the number of pages on your website. A megamenu can be overkill for a site with 30 pages, but can be perfect for a site with hundreds of pages.

Content-Related Links

Links to related content help users stay on task. Such links also help them see and find what else you offer. Pages with related links usually end up as dead end pages for the user. It’s also within their current view of the page.

A stripe can provide links to other pages and can show users an array of related services in a nice, scan-able view:

Or provide links in text itself. Less scan-able, but it’s right where they are looking when reading.

 

4. Make Content Readable
Seems simple enough. But sometimes we get caught up in the trends at the cost of simple usability.

Years ago, small fonts were the trend; no more, and good riddance. Larger fonts are on trend right now, for good reason. Users don’t like to strain their eyes. A positive side effect is that pages feel less text-heavy.

White space also makes pages more readable.

White space plays a big role in chunking content into sections on a page. Grouping like content together and placing white space between content groups visually defines sections, helps the

user understand what content goes together, and makes scanning easier.

“White space” need not be literally white. Any color could clearly separate content groupings.

Striped pages automatically group content. With the Dispense-Rite home page, we see clear areas for the main navigation, the banner, products, a mission quote, and support. In the support section, we also see clear spaces between the four items (Products, Company, Support, and Where to Buy). The space between the icons cues us to perceive each as a discrete piece of content within this stripe.

 


 

5. Have clear calls to action

Look again at the Dispense-Rite example. Any questions about where the links lie? Pretty obvious, aren’t they? That’s good.

For the most part, anything red is clickable. Red buttons emphasize pieces of content that encourage users to click on the related buttons. When the user hovers over a link, it changes colors. The user knows what to do without thinking about it. That’s great usability because:

  • It completely fits what the user already knows before coming to the website.
  • It didn’t obstruct users from actually using the website.
  • It clearly indicated what the user can do immediately, without learning something new.

 

6. Don’t distract the user

Lots of trends involve animations and other moving pieces. Animation is a great way to reinforce user engagement – IF the animation relates directly to content users want and if they can interact with the animated content. Simply animating buttons when users hover over them clearly shows users that they can do something with those buttons.

But animations that just happen on the page and are not germane to a user’s activity can be distracting. Animations direct the user’s eyes away from reading or the task at hand and disrupt efforts to complete that task. Think of the effort involved in ignoring animated ads on the edges of media sites.

The social media icons at the bottom of the SKYGEN USA site represent a good use of animation. Hovering over the icons animates them and adds a little something extra to the site. The animations relate directly to user action and indicate that something more happens in this area.
 


Summary

The best user experiences promote happiness, engagement, adoption, retention, and task success. Trendy tools and features that support these five conditions will make your site a success. Those that don’t will frustrate and alienate the target user and make your site look like it’s wearing bell-bottoms.

New, exhilarating ideas can sweep into the industry and become trends. Trends drive evolution in websites. We’re seeing that now with striped design and changes in navigation. But we also see evolutionary blind alleys and flashes in the pan. Look at every hot new trend through the eyes of the user.

  • Has the project team forgotten about tried and true usability, like indicating what it clickable?
  • Does the target user like particular trends?
  • Does the trendy item improve usability?
  • Does it distract users from completing their tasks?
  • Will your project’s target user tolerate certain frustrations?

Finally, repeat after me this quotation from Robert Stuberg: “The trouble with so many of us is that we underestimate the power of simplicity.”

Ann Junker

User Experience Designer & Front End Devloper

Ann Junker is an information architect, user experience designer and front-end developer with over 15 years of experience. She has been a part of the Titan CMS development team and works on variety of projects types, from Milwaukee Public Schools, Medical College of Wisconsin, and several Law and Financial Firms. She focuses on creating meaningful user interactions with affective branded visual design, and is Nielsen/Norman Group UX Certified. Ann also past her IAAP - Certified Professional in Accessibility Core Competency examination. 

Connect with Ann on LinkedIn

Read Ann Junker's Blogs

Ready to Learn More?

Contact us with any questions, comments, or suggestions.

Northwoods Web Solutions

1572 E Capitol Drive

Milwaukee WI 53211

414-914-9100

847-752-1095 (Chicago)

Microsoft Partner SIlver
© 2017 Northwoods - all rights reserved.
top