UI/UX

6 things that take your UX from above average to world class

by

on

View all posts

Many parts of applications are rarely experienced, yet we have to consider how the presence or absence of these states affect a user’s experience. It’s the UX designer’s job to go beyond visual design and make the best experience possible—including all the parts of the experience that nobody thinks to design.

Onboarding

The first thing your user experiences is onboarding. The knee-jerk response to onboarding is to darken everything besides the button the user should click on, make detailed instructions telling the user how this button is used, and repeat for each button.

Standard. Easy. Done. Right? Wrong.

“‘I wish this app had a splash page,’ said no one ever.”

For one, nobody remembers all those tips along the way—they just click right through because they want to get to the experience. Secondly, you should have created an experience that’s so easy, the user’s only choice is to be right. If your design is so complex that users need a step-by-step walk through, you need to reconsider what you’ve created.

The best way to onboard a user is to not onboard them at all. Let the user dive right into the experience and play around, free of anxiety or fear that they might get lost and not know what to do.

Design by Georg Bednorz.

Design by Georg Bednorz.

Tips for a better onboarding experience

  1. Let users interact with your experience—don’t hide it behind some pay wall, info grab, or layer of instructions.
  2. Don’t interrupt the user’s experience just because you want their data. Users know you make your money off their data, and they’re not as excited to give it out as you are to take it. If you’re going to ask for info, make sure the user feels like they’ve gotten something in return.
“The best way to onboard a user: don’t onboard them at all.”

Form fields

Form fields are often the hardest to design, both from a design and a code perspective. From a design perspective they have to be fairly straight forward so they’re understandable, and from a code perspective they’re pretty much the farthest behind of all HTML elements in terms of ability to customize.

However, form fields are often one of the most crucial pieces of your site or application—they’re where you get info from your users. If your form fields create a poor experience for your user you need to reconsider what you’re doing.

Tips for better form fields

  1. Make sure your user always knows what form they’re interacting with. Getting up for something then coming back and forgetting what you were doing is totally a thing.
  2. Use autofill whenever possible—especially on mobile. Not only does it speed up the process, but on mobile it also means less typing on that tiny mobile keyboard!
  3. Give users real-time feedback about whether the info they gave you is valid, and what to do if they messed up.
  4. Let the user know how far along they are in the process. Sometimes just knowing there is an end is comforting.
  5. Design the experience to feel secure, especially if you’re asking for sensitive or private information.
“Design the experience to feel secure.”

Copy

Right off the bat, I already know what you’re thinking—“I’m a UX designer. I wasn’t hired to be a copywriter!” And you’re absolutely right—you are a UX designer. But here’s the deal: The copy users read and interact with is part of the experience you’re designing.

Design by Igor Izhik.

Design by Igor Izhik.

Tips for better copy

  1. Be creative, but make sure it also makes sense
  2. Know your audience. A younger audience might be fine with your fun button copy but an audience that’s less tech-savvy probably just wants to know what happens when they click.
  3. A/B test your copy—either online or with users in real life

404 errors

The 404 page is one of the most forgotten experiences outside of empty states. While it is our hope that users will never have to see the 404 error as long as the experience is developed well, we can’t just forget about it. The 404 page is one of the best places to turn a frustrated user into a delighted, returning user.

For 404 error inspiration, check out this 404 inspiration post by Muzli.

Design by Viktor Kern.

Design by Viktor Kern.

Tips for better 404 errors

  1. Make the user laugh or distract them otherwise.
  2. Admit your failure.
  3. Give your users directions on how to fix the situation or when you will have it fixed for them.

Empty states

Empty states are places users don’t expect to be engaged but are surprisingly delighted when they are. Only true UX pros take advantage of the empty states.

An empty state can include the view a user experiences when they first arrive on a screen, the view they see when they zero out their inbox, the loading screen, and many more. You can consider an empty state pretty much any state that has no data to interact with.

Design by Kim Sullivan.

Design by Kim Sullivan.

For empty state inspiration, check out a site dedicated solely to the best of them: emptystat.es.

Tips for better empty states

  1. Give directions on how to change the empty state to an active one
  2. Make calls to action very clear, with well-written copy
  3. Distract the user from excessive load times with dummy content or entertaining animations

Notifications

Lastly, when creating the best experience possible we can’t forget about notifications. Why does our user need to be notified, when do they need to be notified, and how?

So much data is involved in notifications, yet they’re often the most overlooked part of our application because they aren’t states our users experience within the app. Notifications represent the experience beyond the interface, and only the best UX designers consider how they fit in the experience they’re designing.

“We need to consider how notifications fit into the experience we’re designing.”

Being intelligent about how we design our notification experience can be a make or break feature of our application. One of my favorite is the ESPN app.

My favorite basketball team is the Golden State Warriors, but I’m a busy man and I don’t always notice when things outside of my immediate attention are happening. ESPN allows me to customize my notifications so that I receive alerts about what is happening with my favorite team(s). But they don’t just send me every notification in their system, they allow me to choose which ones I want.

espn-notification

Beyond team notifications, I can set notifications per game as well.

espn-notification-2

The control ESPN gives me when it comes to managing my sports news and information is incredibly well thought through. It makes me feel important and like I’m in control of my experience, not someone that created the app.

Tips for better notifications

  1. Ask users what kind of content they want to be notified about
  2. Ask your users whether there’s a specific time of day they want to be notified or if they want notifications to be real time
  3. Monitor your analytics to find out if your notifications are increasing the KPIs you hoped they would. If they’re not, figure out how they should change based on that data.

Design is in the details

Steve Jobs’ dad used to make him build the inside of their fence just as nice as the outside—not because the inside mattered as much, but because “For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.”

With the amount of data we’re sending, receiving, and tracking daily, with the availability of users and test users, with all the inspiration out there on the web, there’s really no reason we shouldn’t be doing these 6 things well. The details are what separate the good UX designers from the great.

It’s easy to forget about the pieces that we feel no one is ever going to see. Remember, though, every piece of the experience is an opportunity for engaging design.

To be a great UX designer, we have to push ourselves to create the best experience possible!

CTA for those not in hs to DO UI kit
Author

Joe Toscano
Experience designer for R/GA's Google team in San Francisco, CA. Joe plans to change the world with a smile, design and some code. If you want to keep up with what he's doing outside of InVision, follow him on Twitter or Medium!

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.