Recently I enrolled in an online UX course through springboard.com. With the help of videos, articles, projects, and the support of a seasoned UX mentor who works in the field, I’ve come to learn a lot about how to develop good UX. But just as important, I’ve learned what makes for a bad user experience. Unfortunately, bad UX is all around us. I’m sure there are plenty of examples of apps on your phone right now. I’m going to share 3 examples of what every UX designer should do to avoid common mistakes found in so many applications today.

1. Help the User Answer the Question: What Happens Next?

A leading frustration for users is not knowing what the next step is to complete an action.

I recently downloaded an app for my local athletic club. My friend mentioned there was a way to create goals and earn reward points for completing goals. Upon opening the app, it was pretty obvious that I would have to click on the icon of a flag that read “Goal Center” in order to create my first goal. Creating a goal was straightforward, so I established one to complete 12 workouts in 4 weeks. This is where the problem arose. Now that my goal was set, how was I supposed to indicate that I’ve finished a workout in order to update the progress of my goal? I immediately started looking for clues in the sub-navigation of the goal center but nothing provided the answer I was looking for. So back to the main navigation, I went where I discovered a “workouts” section. But there was no indicator there either that explained how to apply a workout towards a goal. It was only until I added my first workout that I discovered the “goal center” updated automatically indicating that I had completed 1 workout and had 11 left to go.

This UX clearly lacked the wayfinding principle by not providing clear directions on how to update or track goal progress. Adding a simple pop-up modal after creating a goal that explained the next step in the process would be an easy solution or perhaps a navigational element in the goal center itself to track workouts. User flow is critical and needs to be as intuitive as possible to get from point A to point B.

2. Make Good Use of Hidden Affordances.

Hidden affordances are features or actions that aren’t vital to completing the main task, therefore they are hidden until the user does something to reveal a hint about that action.

Let’s use Snapchat as an example. One of the hidden features of Snapchat is the ability to add a filter overlay to a selfie. This is a great hidden affordance because you don’t have to add a filter if the goal is just to take a selfie — it’s just an added bonus. Yet, Snapchat’s filters are one of the most popular features in the app itself so why make it so difficult to find? Looking at the camera screen in selfie mode, it’s obvious you press the circle to take a photo which follows the pattern of most camera apps. But where is the hint on the screen that reveals the ability to add a filter prior to taking the photo? It is only after you touch and hold on your face on the screen that the filters appear. In this case, touching and holding down on your face is the action the user has to take in order to reveal the filters.

In the case of most camera apps, however, this pattern doesn’t exist — you don’t typically hold down on your face to add filters — they are generally indicated by icons that suggest photo editability. The pattern of pressing down on one's face in order to reveal filter options before taking a picture doesn’t follow the standard, and in which case, there needs to be a better indicator that this functionality exists. Just because a feature isn’t as important as others, doesn’t mean it has to be impossible to find. Especially when that feature is revealed in an unconventional pattern.

Recently, Snapchat introduced another circle icon on the bottom of the camera screen to indicate their new “memories” feature. It would be just as easy to add an icon for filters to clearly indicate that functionality to users. Some people may disagree with me on this, noting that Snapchat is leading the way in terms of creating new patterns and experiences for a younger generation (note: Snapchat recently rebranded, becoming Snap Inc. and released their first hardware product to use with the app called “Spectacles"). Regardless of opinion, product features — whether necessary or not — should not be so hidden that a user might never find them.

3. Follow Conventional Platforms and Practices.

When it comes to following design standards, the previously mentioned athletic club app falls short yet again. You have the ability to earn points by “checking-in” to the club. My immediate thought was that I could check-in to the club on Facebook via the social media navigation button to earn the points, but that wasn’t it. It actually wanted me to check-in to the club itself by scanning a barcode on my phone rather than scanning the barcode on my keychain card.

When you think of checking-in at a location in terms of icons, a common one is the map marker icon that indicates a location. The icon the club uses for check in is a barcode which wasn’t obvious to me at all until I put two and two together. I see now why they used the barcode to signify the check-in (because of the relation to the barcode on the keyring card) but simply adding the words “check-in” next to the barcode icon or the use of the map marker icon would’ve allowed a more instantaneous connection.

In all cases, each action I was trying to take resulted in massive frustration and an unnecessary amount of time trying to figure out the correct path to start or completion — which is exactly what you want to avoid.

As designers, we are very close to the project and it’s common to miss the obvious. That is why it is important to always look at things through the lens of the user and have them help validate or invalidate your user flows through user testing. Sometimes it can be tempting to reinvent the wheel, but when it comes down to it, sticking with basic UX principles is best.

References:

https://www.smashingmagazine.com/2014/06/affordance-most-underrated-word-in-web-design/

https://www.smashingmagazine.com/2014/10/wayfinding-for-the-mobile-web/

https://www.nngroup.com/articles/ten-usability-heuristics/

https://uxdesign.cc/snap-inc-the-new-snapchat-f376e28505ba#.sqmozy5sy