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."
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.
courtesy of http://mashable.com
No comments:
Post a Comment