5 Pillars of Successful Mobile Design

Designing for mobile has evolved dramatically. Users now expect fast, immersive mobile experiences, and catering to this is increasingly difficult.

When Luke Wroblewski introduced the concept of Mobile First more than four years ago, it radically changed how we approach design. According to him, the reason was threefold:

It was clear mobile use was going to take over; designing for mobile pushed you to better and simpler designs because of constraints like small screens and slow networks; and last but not least, mobile devices had capabilities like multi-touch and location detection that allowed you to create new kinds of experiences.

Wroblewski is founder of Mobile First, a former Yahoo VP, co-founder of BagCheck (which was later acquired by Twitter). He recently launched Polar, which lets users quickly set up polls to get feedback on timely issues.

We asked Wroblewski for five powerful app design tips, ranging from speed and signup processes to enforced constraints and the importance of taps.

1. Perception is not reality.

People now expect a lighting-fast user experience each time they use a mobile application. However, Wroblewski concedes the situation is actually "more dire than that, as people expect a faster experience on mobile than on the desktop, but the networks are slower." So, you're fighting performance on both sides, he says. While you can help speed things up by minimizing assets and improving response times, for example, you can only go so far. "Eventually you'll bump into the realities of mobile networks."

Wroblewski notes techniques that improve perceived performance, giving the "sense that the app is reacting to your input, despite the fact that nothing has actually happened yet."

Instagram co-founder Mike Krieger calls this technique "performing options optimistically," meaning you can create the illusion that your action has taken effect, when in reality, it hasn't yet.

Wroblewski uses an example: When you like a photo on Instagram, the button instantly informs you that your action is complete. In reality, a network connection is in the process of telling a server what you did. "But Instagram's user interface doesn't wait for the server to verify this actually happened. They optimistically assume it happened," he says. "If something goes wrong later, they deal with it then rather than incurring a delay up front. Commenting works the same way."

The same principle applies to acknowledging touch gestures with subtle UI changes. Immediately when you tap or swipe, your app responds. "Techniques like this increase the perception of performance and, alongside actual performance improvements, they can go a way toward creating fast mobile experiences," says Wroblewski.

2. Postpone signup to improve engagement.

Creating an interface and user experience that will get people to actually engage with your mobile app (and most importantly, keep using it) is a challenge all app developers face. The statistics Wroblewski states are sobering: The average iOS and Android user only downloads three to five apps per month. Of those, 26% are only opened once and never used again, and another 48% are opened 10 times or less.

According to Wroblewski, you have two options. Get the most out of every user when he first downloads and opens your app: Ask for his email address, grab his address book, connect him to Facebook, and so on — with the intent of providing a better experience that keeps him coming back. However, this approach tends to frustrate people, enough that they either skip it or, worse yet, abandon the app. Usually, less than half of people who download an app actually complete the signup process.

Your other option is to postpone signup and let people actually jump in and start using your service. In this model, defer all your asks until they're more appropriate. This approach can foster action. Wroblewski is an advocate of this approach: "letting people get going instantly, then bringing things to them." He incorporated it into Polar, which "targets people when they are actually engaged with our product ... The 'everything at once' before you ever use the app can be effective for some, but it can also turn others away."

3. The mobile canvas comes first.

Presenting large amounts of information on the limited real estate of a mobile screen is difficult. Wroblewski admits, "Complex interfaces with lots of information were designed for a specific medium — where you can fit lots of things on a big screen, using the precise input of a mouse cursor or keyboard."

But Wroblewski observes people who often don't actually take the time to try to make their app work for mobile. "Many times that's all it takes." He points to an example, Jason Grigsby at Cloud Four, who designed an expense-report application using responsive web design. After staring at the desktop version of the app for a while, Jason couldn't fashion a workable approach. Instead, he moved on to designing a mobile version. "As he did, everything snapped in place. Not only could he see how the app could become responsive, but he found a number of ways to make the full screen experience better."

"There is power in starting from the mobile canvas, instead of from your existing interface," says Wroblewski. "When you instead start with a different medium, defined by small screens and much coarser inputs like touch, you end up with a different design."

While there are other more-detailed interface design techniques, such as responsive tables and off-canvas elements, Wroblewski is keen to emphasize, "Those are implementation techniques that will only help you when you've got the big-picture approach in place."

4. Enforce constraints.

One of the biggest challenges in mobile design is "unshackling yourself from 20+ years of desktop computing and the web." Both create a lot of unconscious baggage, says Wroblewski. "That is, you are drawn toward familiar solutions, patterns common to the PC era of software."

While mobile has many similar capabilities to the PC, it has limitations, too. "Many of your instincts will be wrong," says Wroblewski. "I've been designing web apps since 1996, so I have a lot of 'best practices' to unwind, and I often learn the hard way that I'm making things too complex for mobile."

Wroblewski uses creative constraints that force him "to deal with the reality of mobile use." For instance, he makes sure someone can do things with just one thumb, ensuring a certain task can be completed in seconds, not minutes. "When these constraints are grounded in how people actually use their mobiles, you've given yourself a great way to tell if you're going in the right direction with your design."

5. Respect the importance of taps.

Every swipe, tap and action a user takes is important and has a lasting impact on user experience. "When people feel like they are making progress towards something they care about, they'll be more tolerant of an extra tap or swipe," says Wroblewski. "But for the most part, if you increase effort, you tend to decrease participation."

The CEO of Hotel Tonight illustrated that booking a hotel on his app requires only three taps and a swipe, totaling about eight seconds. He compared it to Priceline's mobile process (52 taps, 102 seconds) and Hotels.com's app (40 taps, 109 seconds).

The inverse is also true — moving actions a "tap away" can have negative consequences. Wroblewski cites the Microsoft mobile Internet Explorer team, which, in an effort to simplify their UI, moved the buttons for browser tabs and favorites under a "more" menu. After all, what's one more tap? Turned out it was a lot. Restoring one-tap access to tabs and favorites was overwhelmingly the No. 1 feature request of mobile IE; it actually made the top 20 list across all of the Windows Phones.

While recent years have seen an explosive growth in the mobile app industry, Wroblewski feels there is still a lot to be learned, which is why mobile remains so exciting. We're still in a period of enormous growth as more of the world comes online, increasingly through a mobile device. It's taken some time to start shedding our PC tendencies, but more uniquely mobile designs emerge every day.

Image via iStockphoto, luismmolina