UX design tips for your app

A gorgeous app with poor UX isn’t a gorgeous app — it’s an invitation to frustration. Your users deserve better than that.

The UX design tips in this article aren’t groundbreaking. Hopefully, you will already be familiar with most (if not all) of them. But for some reason or other — maybe due to oversight or perhaps we were given unrealistic project deadlines — we sometimes neglect these crucial UX design considerations.

“A gorgeous app with poor UX isn’t a gorgeous app — it’s an invitation to frustration.”

Here are a few tips that will help enhance your app’s UX. You will also see a few examples of apps that demonstrate each UX design tip.

The UX should adapt to the user

Everybody’s different, so why should the UX be one-size-fits-all?

Your app should be aware of my personal condition. Take advantage of all data you have on me. Use it to give me a customized experience.

My favorite travel apps, for example, present the right information before I even ask because they have learned my preferences through data such as geolocation, usage, and app settings.

“Everybody’s different, so why should UX be one-size-fits-all?”

Digging through a bunch of content to find something I’ve seen before is a waste of time.

Adaptive UX examples

OpenTable is a restaurant reservation app. It also knows a lot about the user, such as what they like to eat.

When I make a reservation using OpenTable, it’s presented in the main menu area — I can’t miss it. The app’s UI adapts to me, making it easy for me to see crucial, time-sensitive content.

And when I’m thinking about making a reservation, OpenTable suggests places it thinks I’ll like based on my previous restaurant reviews and my current geolocation.

When you search for a restaurant only by its name, Google Search determines your geolocation and then shows you results that are nearby. That way it’s not showing you a Burger King in Thailand when you’re in San Francisco.

To the user, it’s quick and seamless — and that’s what good user experience design is all about — but behind the scenes the app needs to determine that my search query is a restaurant (even though I didn’t say it was a restaurant), determine if I’m near a location, and then present the relevant info on a map. Magic.

Network awareness means good UX in any context

Imagine setting your mobile device to Airplane mode. If your phone doesn’t have this feature, just imagine switching off its internet connection.

Which of your apps would still be useful?

And which ones would be completely useless?

For me, maybe a couple out of hundreds of apps have offline functionality worth a dang.

And beyond simply knowing if an internet connection is available or not, the app should also sense the context of the connection.

Am I on wifi? Am I out roaming? Am I anywhere near the event your app is about to send me a notification for?

Some of the worst offenders send down egregious amounts of images and assets for relatively simple experiences. I don’t need 39 photos to load as soon as I enter an image-gallery screen, thank you very much. Please wait until I actually browse to them. We’ve learned that user satisfaction is inversely tied to loading time. Why waste precious seconds loading those huge retina photos no one’s going to look at?

“We’ve learned that user satisfaction is inversely tied to loading time. Why waste precious seconds loading those huge retina photos no one’s going to look at?”

Microsoft Research has done several studies on network-aware applications. Here’s one of them (opens PDF): Network Aware Applications.

Network-aware UX example

Pocket is a save-for-later Web content manager. But the app is just as — if not more — useful offline.

When I add an article to Pocket, it’s automatically downloaded to my device so I can read it later without an Internet connection.

Downloading web content onto my device seems like it would be a task- and bandwidth-intensive process. But Pocket pulls it off so slickly that I hardly even notice what it’s doing. It just works.

We’re all used to music- and video-syncing, but seeing it done so seamlessly with Web content is a treat.

Out of the box, Pocket makes some default choices for you, then gives specific, granular control over how your articles are saved, how your data is used, and more.

Google apps fine-tune a lot of its bandwidth and network usage. For example, when using Google Photos as a photo-backup service, bandwidth-heavy uploads only happen on wifi by default.

Don’t assault your users with notifications

Being frivolous with your app notifications makes your app seem needy.

Notification-abusive apps are like that annoying friend who just can’t take a hint that we’re too busy right now to meet up for coffee to talk about their “revolutionary business opportunity” which, by doing the design/coding work for them with no pay, will grant us a “once-in-a-lifetime opportunity” to be a part of something that will “change the world”.

And even when your notification UX is good, things can go south fast when they aren’t kept in sync across the user’s devices. No one wants to see the same notification over and over. Just like in software programming, a good principle to live by is to keep your notifications DRY.

“Even when your notification UX is good, things can go south fast when they aren’t kept in sync across the user’s devices.”

Even worse: Using notifications to deliver useless things like ads, or other unwanted blasts. Only in very few situations do I want to know your iOS game added 3 new characters available for micro-purchase.

I take it back. I never want to know that.

Notification UX example

Twitter is my favorite way to communicate online, due in part to its commendable notification UX.

Twitter has some of the most granular notification settings around. Even the individual options have sub-options of their own. This way, the user can tailor their Twitter notifications based on their personal needs and priorities.

To top it off, there’s a master toggle for silencing all notifications at once (without mussing up each setting).

Outside of the app, their notification emails feature easy, one-click unsubscribe, with no questions asked. You’d think that would be commonplace by now, but here we are.

You need a search interface

Having no content is lame.

But a ton of content with no way to navigate to them can be just as lame.

Content that isn’t surfaced is content that doesn’t exist.

Without a solid search interface, as a user, I’m left with little defense against the horde of status updates, user profiles, and new uploads.

All search interfaces are not created equal, however. Sometimes a page filled with low-quality search results and a lack of filters is just as bad as not having search at all.

Your customizable, groundbreaking app needs a customizable, groundbreaking search feature.

Search UX examples

Etsy is a marketplace that lets anyone sell just about anything. That means they have a lot of content on the site.

Just to give you a scale of how many products Etsy has on the site: my recent search for “wedding invites” yielded over 200,000 results.

Good thing Etsy has a killer faceted search navigation interface. With a few taps, you can drill down into their search results with categories, product trait filters (like price or style), and sort the results to your heart’s content.

Imagine sorting through 200,000+ results for the term “wedding invites” with zero search customization. Page after page of plain listings, hundreds of thousands deep. You will never be able to send out your wedding invitations because you were too busy looking for a wedding invitation template.

When I search for images that’ve been backed up by Google Photos, something magical happens.

All my photos are automatically organized by keywords that I didn’t have to enter manually. Google just sniffs out what’s being shown in each photo somehow.

Big-brother concerns aside, that makes for an awesome UX design while searching your photos. Even when it’s several years’ worth of photos.

Flickr recently launched a similar search interface, and I can only imagine our image searches will continue to get smarter from here on out.

Create a good user onboarding experience

Roll out the red carpet for your new users.

User onboarding is the process of getting users using your app as soon as possible.

The user-onboarding experience should start as soon as the app is launched for the first time. This is often referred to as the first-run experience.

Presenting new users with an empty screen and scant direction creates a terrible first impression. And, first impressions are the most lasting.

“Presenting users with an empty screen and scant direction creates a bad first impression.”

Imagine Instagram with no photos when you launch it, or Twitter with no tweets to read.

Some of the big offenders when it comes to poor user onboarding include empty content wells, friends lists with 0 friends, and a sea of confusing, equally-weighted app options/settings.

The solution is straightforward: take the time needed to design for the blank slate.

It sounds simple, but so many apps stumble with user onboarding. So much so there’s even a website for collecting and critiquing onboarding processes from popular apps.

Onboarding UX examples

Pinterest is a place to collect all the things you love.

When a new user joins, Pinterest asks questions and learns the best types of content to present.

After picking topics, a user can connect with friends from other social networks and start viewing their friends’ content. Progress bars and cheeky messages cheer new users to the finish line.

In seconds, a new user is transformed into a Pinterest pro through a totally decked-out user experience.

Slack is a communication platform designed for teams. When a new user joins, they immediately get a message from a playfully helpful “robot” named Slackbot.

Slackbot introduces the key parts of the platform, via the platform itself. The hands-on onboarding process gets users using the app instantly.

Not only is the Slack onboarding hands-on, answering questions from a robot somehow carries a lot more charm than filling in an old-school web form for your name, location, etc. Slack’s onboarding UX helps new users get engaged and enthralled with the platform quickly.

“Even when things are humming along, find time to take real stock of your app’s UX.”

Slack has a fantastic guided tour which trickles out over time. Instead of dumping a 14-step instructional manual on you, Slack presents just 2–3 key tips per session, spacing things out for your sanity.

Is there room to improve your app’s UX design?

There’s no shame in overlooking anything on this list. And if you feel you can enhance a certain aspect of your app, look at those areas as potential opportunities for growth.

And even when things are humming right along, it’s not a terrible idea to find time to take real stock of your app’s user experience.

Originally published at blog.invisionapp.com on August 3, 2015.