What the Past Five Years Have Taught Me About UX Design, Part 1

1. Mobile-First, Responsive Web Design

Mobile first is an essential approach to designing clean, high-performance Web pages across all breakpoints. It’s a key tenet of both adaptive and responsive design approaches. Even if you’re modifying a page on your desktop site, it’s important to consider taking a mobile-first approach. Why? Because it forces you to consider simplifying all page elements. I jumped on this bandwagon in 2012 after attending the An Event Apart conference. This approach was eye opening to me because everything that I’ve always held important, even critical to successful corporate Web design is what adaptive and responsive design hold sacred.

Strip Down Content to the Essential Elements

If only I’d had a 3x4-inch screen in 1997 to force a life-insurance business lead to answer this question definitively: “What is the one thing you want your users to know about this Annuity?” Or better yet, “Let’s find out the one thing a customer wants to know about this annuity.” When designing the content for a mobile-device screen, there’s no room to say, “Well, there are really three important things.”

For example, look at how the tedx.com site uses the number one position to keep the homepage simple and communicate that it’s all about the program—that is, the talks, as Figure 1 shows.

Prioritize a Page’s Sections According to Its Key Purpose

In contributing to Ask UXmatters, “Responsive Web Design for Corporate UX Design,” I wrote about Luke Wroblewski’s “What’s your 1, 2, 3? And only three…” I still ask that question. After identifying a page’s key purpose, determining what section is number one is difficult, but accepting that two and three have to follow in a specific sequential order is even more challenging for some people. This is just basic information architecture. But, to passionate business partners, it’s as if you’re asking them to decide to choose a favorite among their children.

Responsive design should ensure that the section that is of secondary importance keeps its secondary position on a page—no matter the size of the screen on which the content appears. Beware of placing a rotating banner in the number one position. If you look at tedx.com, you’ll see that all of the rotating images focus on the talks and, in doing so, tie the primary theme together. Even rotating promotions should have a central theme—for example, best deals, upcoming events, or games.

Keep Interactions and Navigation Clean and Simple

Good UX design should be device agnostic. A page should look good on any size device or display. I hear this all the time: “That design is really clean.” But what does clean truly mean? I don’t think it means there’s a lot of whitespace on a page. A clean page has well-spaced content—including images, icons, and calls to action—that shows hierarchy and flow. It doesn’t look crowded. Each of the page’s elements is laid out in a way that makes sense. Any page should be easy to read, and its purpose must be obvious. A clean page’s interactions have clear target areas, allowing a user to click, tap, or select by tabbing.

One good example of a clean interaction is a menu-driven landing page that employs iconography. Examples of this approach include Dolphin’s customizable mobile browser and Firestone’s mobile app, shown in Figure 2. While you could argue that this approach is outdated, I think the design pattern is simply the best. The icons are easy to scan, learn, and tap. We could debate the quality of the icons—flat versus dimensional—or what item should hold the first spot, but from a user perspective, these icons just work.

My biggest pet peeve with mobile design today is the trend designers blindly follow of using a stacked menu bar that resembles the navigation bar at the left of a desktop Web page from 1997. The home screen of the first iPhone was not a series of bars was it? No, it comprised the same evenly spaced, easily tappable icons that are still effective today. True, you don’t have to go further than Settings to see a stacked menu bar—and one that is packed a little too tightly for easy navigation. My point is that, even when you go the menu bar route, make the options easy to read and space them far enough apart that they don’t invite mistaps.

Check out Walgreens recent home page redesign for their mobile app. They’ve ditched the all-icons-all-the-time design pattern, but even their menu bars are big, well spaced, and easy to choose. They get it.

Above all, interactions and navigation must be simple, quick, and easy. When users interact with your site, they demand ease of use. A site’s interactions should drive users to their desired content and deliver your company’s desired outcomes.

So start your next redesign project by visualizing how you can make the essential page elements work on a very small screen. Do you think mobile-first Web design could be just a passing fad? If so, tell me why in the comments.

Next: Testing Web Sites on Smartphones: Ditch the Sleds Now!

In Part 2 of this series, I’ll make my case for why using rubberized sleds when capturing interactions with smartphones in usability labs leads to sterile results that don’t accurately reflect the ways people interact with their phone. The solution for more accurate usability testing already exists in the video-production industry.

In the meantime, please share—in the comments—trends from the last five years you think will carry us toward that enterprise Nirvana—the year 2020.