Case Study Article

UI elements you should start using right away…and a few to avoid

Your web design projects should be constantly evolving as new design trends and user patterns become familiar amongst consumers. Like fashion, trends come and go. Everything from color palettes and typography styles to animations and user interactions become stale within an ever-changing web landscape.

Iterative updates are an important part of maintaining a solid user experience and your users’ expectations are growing at almost unmanageable speeds.

Interactivity, ease of use and commonly accepted patterns are no longer an option, and they need to work intuitively regardless of device. In order to be successful, you have to be on top of what’s changing and adapt. And while conformity can be the antithesis of creativity, designers have a responsibility to create interfaces and experiences that are familiar for users.

Not sure where to start? Our guide includes seven user interface elements you can add to your next design project, plus a few UI faux pas to avoid.

Long scrolling

It was once considered a good practice to put the most important information for a given page above the fold. In theory, this makes sense because it establishes priority for users. In practice, this rule was taken too literally, and the result was a crammed experience with no clear call to action. In fact, recent data shows that web visitors are very likely to scroll, so let’s agree to kick this old habit.

Today’s site visitors are increasingly mobile, where scrolling is an inevitability. As users begin to favor handheld devices (upward of 75 percent in 2017), that catchy “mobile first” philosophy needs to be made a priority. Scrolling patterns work well on just about any device, regardless of size.

But don’t just add a bunch of text to a page that scrolls forever. Consider how you can use the transition of content through scrolling to add interactivity that pulls the user to the most important elements on the page. Effects like parallax and CSS transitions create visual differentiation so that new content is easy to see, identify and read.

Interesting navigation patterns

Interesting Navigation Patterns
Source: Sanctum Design Group

Although hamburger icons have become the defacto icon for mobile menus, a recent trend has emerged that uses it on desktop as well, to tuck away utility navigation items. Both styles “stick” with the design so that users are always just a click away from navigational elements.

Mixing up the navigation from the standard across-the-top format allows you to better curate how the user engages with your site. A novel navigation pattern is one that is obvious to the user, but pushes them in deliberate directions. But remember, if users need to hunt and guess in order to get around the site, they won’t do it.

‘Material’ layering

Material Layering
Source: Departures Magazine

The major takeaway from the tactile style of Material Design is layering. After all the flat aesthetics of the past few years, layering elements in a way  that looks and feels “real” should be your creative goal.

As described by Google:

“A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.”

“Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.”

“The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.”

If that just blew your mind (either in its elegance or complexity), don’t worry … it’s a design pattern that is still defining itself. What’s important about layering is that each part mimics the physical world. Whether elements move and interact or not, the definition of planes and intersections adds a level of usability that comes natural to users…and it’s something earlier design concepts left out.

There are several inspirational galleries that showcase material design, so if you’re the visual type (and I imagine you are), have a look at uplabs. They’ve done a great job curating design components that embrace the material design pattern.

Big & bold typography

Big & Bold Typography
Source: Casa Angelina

It’s important to remember that typography, although oftentimes beautiful, has the sole purpose of being read. When picking your font stack, be sure your choices are for legibility first, aesthetic second.

Sidenote: If you’re honest with yourself, do you always read every line of the content added to design?

If you are still using thin, condensed or novelty typefaces that aren’t immediately scannable, it’s time for a typography refresh. Opt for a display option with bold, thick strokes and a wider stance. Both serifs and sans serif options are OK. Pick one that matches your style and content, but make sure it can pass the 5 second test when it comes to readability.

As for the smaller type elements, we still recommend you pick a simple sans serif for large body copy blocks and include plenty of space (often 1.5 times the character height) between lines of type. If your body copy isn’t heavy, a serif can work as well, adding more flexibility to your design.

Font licensing for the web is not quite the problem that it used to be, so today we can use just about any font we want. However it’s not without it’s own set of considerations, especially if you need to serve the font files from your own server. You’ve likely noticed the “flash” of unstyled content. This happens because the server needs to load the font resource before it can be displayed for the user, and if you are on lower-end hosting, it might not be instant.

So, start your font search with a service like Google Fonts or Typekit. These services will take care of resource management for you, and they have a growing list of beautiful type.

Gradients and bright color

Gradients & Bright Color in UI
Source: NYC Pride

While simple color palettes were popular thanks to minimal outlines, gradients and bright color can add a nice pop of energy to a design that might otherwise feel flat. The current trend for gradients often fade from one bright color to another – such as magenta to orange – and can be used alone as a background or as a photo overlay.

What’s fun about gradients is that they can help show off your website or brand personality based on color choices. Go bright and bold for a fun and energetic feel or with a darker monotone fade for a more dramatic impression.

The trick is to think about the gradient and color choices in relationship to other elements, such as text or buttons. Make sure to choose colors that provide enough contrast between elements.

Subtle animations

Subtle UI Animations
Source: MoonFarmer

Ever feel that your website user experience is missing something? Add a few tiny animations on UI elements, such as buttons that move or navigation arrows that bounce to help guide users through the design. Keep animations simple, sharp and consistent. If there’s any doubt that an animation could be distracting, rethink it and opt for something simpler. When working with a developer to plan animated elements, show them examples of things you like to start the conversation.

Meaningful microinteractions

Micro Interactions
Source: iFly 50

Microinteractions are those tiny moments users share with a device,  like turning off an alarm, reacting to a post on Facebook or skipping a song in a music player. Almost everywhere you look, someone is telling you that your website needs to include plenty of these tiny touches for users.

But only if they are meaningful.

Don’t overwhelm users with microinteractions, instead pick one or two distinct actions that could benefit users who interact with your design. Common microinteractions on websites include hover animations that encourage clicks, 360-degree product view descriptions or forms that include cues or instructions — such as a check or X — as information is completed.

Think about the basics of the engagement loop outlined by Dan Saffer, who literally wrote the book on microinteractions, to help you determine whether an element interacts meaningfully or not:

  • Trigger: Initiates an action
  • Rules: What happens in the interaction
  • Feedback: How you know what’s happening
  • Loops and Modes: What happens next

Use a grid

For many designers, using a grid as part of their web design workflow feels like pulling teeth. I get it … those translucent pink columns are in immediate opposition to your creativity, and it’s the first thing you see when you begin a new project.

Here’s the thing: they are the single most important factor to keeping development costs predictable and within budget. They also help developers use frameworks, which handle a lot of the heavy lifting that comes along with a growing list of devices that need to be supported.

But that doesn’t mean you need to conform to the minimalist layouts that have become popular in the last few years. Here are some tips to help you make the leap for good:

  • Generally speaking, the number of columns, column width and gutter width are customizable. There are specific standards and best practices, but that doesn’t mean you are locked into them. Just keep in mind that certain numbers are more divisible than others, and standards are there for a reason.
  • The grid is a guide, not a rule. If you use it most of the time, you are using it correctly.
  • Consider only using the grid overlay when building out wireframes as these are almost always formulaic anyway. Once you have the wireframes stubbed out, you can hide the grid layer and reinitiate your creativity to subtly break out of the grid where it makes sense to do so.

Elements To ditch right now

And then there are the user interface elements that just won’t go away, regardless of how bad or dated they seem to be. If you are using any of these UI patterns, it is time to kick them to the curb.

  • Mega-navigation: It’s clunky, overwhelming and becomes incredibly challenging on  mobile devices.
  • Auto-play sound: Believe it or not, this still happens more than you might think. Sound is fine, but users need to opt in.
  • Novelty, handwriting-style typefaces: They can work occasionally, but tend to be difficult to read.
    Infographics that don’t stop: Yes, infographics are cool, but the long-scrolling single, image graphics that just get pasted into a design are a total waste, and difficult to digest.
  • Content slideshows: As we discussed, users are happy (and trained) to scroll. Tucking content into a slideshow is far more likely to go unnoticed.
  • Desktop First UI: It’s tough to design mobile first, especially when you are designing on a large screen. However, with every additional design component you add to page, you need to keep a log of how you imagine it would look on mobile. If that design is completely different, you are creating a lot of work for development.