Lessons Learned From the RWDevCon 2018 Design Lab

Recently two advanced UI/UX designers troubleshooted the design of many reader’s apps. Check out some common problems and solutions!

Design Lab? Sounds dangerous…

This year at RWDevCon 2018 held in Alexandria, VA, the conference boasted its very own Design Lab, and it was open to anyone who stopped by.

The Design Lab is a space wherein you can get help with any design-related questions you may have about your hobby or client mobile app — even if it is just in the idea stage.

We may be experienced designers but rest assured that we don’t bite; in fact, we admire the time and effort you’ve put into your apps. Making mistakes or having questions are an essential part of the learning process; we don’t punish you if there’s something we think you could improve in your app! Our Design Lab reviews are intended to help you create a better app for yourself and your users.

This article will give you insight into the top four design issues we saw again and again over the course of two days, working with developers like you. We hope the following examples will help answer some of your own questions and set your app up for success!

The Design Lab Victims

It was very inspiring to see the achievements of professional and hobbyist iOS developers as they develop their own apps, many thanks to the content published on raywenderlich.com; it was exciting to see the hard work of our tutorial writers, podcasters, screencasters and video teams pay off with the readers of the site.

We were also impressed by the variety of apps!

We saw a gardening fan who followed the tutorials on this website and taught herself iOS development, including CoreData, in order to manage her plants and get insights on her garden’s yield and costs.

There was an ML-powered stocks app, a fitness app, an app to search for movies that pass the Bechdel–Wallace test, ones to track medication, help in the Operating Room, view Mars Rover images, manage accounting, track equipment maintenance and to keep track of donations.

Of course, everything is a process, and we saw a number of similar issues that we’d like to share with you.

Top Lessons Learned

Across the dozens of apps we reviewed over the two days we ran the Design Lab, there was a list of issues that kept surfacing regardless of the app and its domain:

  1. Gestalt Principles
  2. Native Components
  3. Competitor Research
  4. Copywriting

1. Gestalt Principles

Ges-what?

Gestalt Principles describe how proximity, similarity and other visual characteristics change how we perceive visual elements. This is especially important when working with user interfaces.

Example: Grouping by Proximity

The above image shows an app featuring a screen that contains an illustration, messaging and a button. Because the button is away from the messaging, it reads as a separate entity, creating confusion for the user. The simple solution is to place it in close proximity to the messaging it relates to.

In the above image the illustration, messaging and buttons are closer together. It’s clear the messaging and buttons are related.

Example: Grouping With Colors and Lines

Grouping With Colors and Lines

Proximity is only one of the ways you can group elements; you can also use color or lines. In the first image above, you can see how a separator line can group two items that are on opposite edges of the screen. In the second image, Booking.com has used a yellow background to make it easy for users to interpret the fields as a single form.

2. Native Components and Behavior

Many of the apps we reviewed used custom components for common features such as search or navigation.

Angry Birds Custom UI

Angry Birds custom interface design matches the style of the game.

Some games and certain specialist apps have a good reason to abandon native components. For example, an app made to be used in an operating room may discard the standard navigation bar and associated edge gestures in favor of a single, large back button on top that needs to be pressed for duration of time in order to prevent accidental navigation while handling the device with gloves or when placing it down on a table.

iOS Search Component

The Xcode Interface Builder ensures you shouldn’t need to build common interface components from scratch.

But for the majority of the apps, using native components that are shipped with iOS and available within Xcode Interface Builder, will be the best approach.

iOS Search Component

WhatsApp, Medium and Podcasts all utilizing the Interface Builder search component.

The reason for this is that your customers are already used to seeing these components in Apple’s own apps and many other third-party apps users have installed on their devices. So when they pick up your app, there’s nothing new to learn: They know that an edge swipe will take them back to the previous screen; they know that looking at the navigation bar will tell them where they are in the app; and they know that a text field with rounded corners and a magnifying glass gives them access to search.

Our recommendation is for you to get familiar with the native iOS components by reading the Apple Human Interface Guidelines, as well as Google’s Material Design Guidelines. These describe when each component is best used and more. Also pay attention to the apps you use on a daily basis and take note of which ones use native components and how.

All in all, native components save you from coming up with your own solution to an already-solved problem, and they make your users happier as they’ll feel more confident when using your app. Native components also come with support for accessibility features like Dynamic Text and VoiceOver, easier than implementing those yourself when you want to make sure everyone can use your app.

3. Competitor Research

It can be tempting to try and find a novel solution to a design problem. And as impressed as we were with the pioneering styles at the Design Lab, sometimes you can waste a lot of energy that could be better focused elsewhere. Before jumping into the code when designing a feature for your app, you might want to see what you can learn from your competitors’ designs. As Picasso famously said, “Good artists copy; great artists steal.”

Example: Tinder vs. Bumble

Tinder v Bumble Design Pattern

Who wore it better?

When the dating app Bumble launched, the developers could have spent a lot of time researching new ways for users to interact and find matches. Tinder already pioneered the swipe-right interaction, but Bumble had no problem adopting the same technique as they recognized its success with similar users. Bumble created a profitable company by focusing its resources on other areas of design and development and making the app unique in alternative ways. Taking design patterns from competitors in a similar vertical to your own means they’ll likely have similar users with similar needs. This increases the designs success if your competitor has designed with their users in mind.

Example: Great Little Place

Great Little Place before and after

From swiping to scrolling: GLP changed its marketing to match its main interaction pattern.

The swipe-right design pattern wasn’t as successful for the restaurant recommendation app Great Little Place. When it initially launched, the UI was designed in a style similar to Tinder. This was unconventional as it was only possible to view restaurants one at a time. In a later version of the app, the developers switched to a more typical list view. They could have changed the design for numerous reasons, but taking ideas from designs in other verticals can be riskier as the user base is often vastly different.

Competitor research can save you time, money, resources and allow you to discover great ideas. Select some competitors and apps with similar features to yours. Then ask some users (friends or colleagues, if you are short on resources) to go through the apps while you watch. Give your test subjects common goals that you would expect them to achieve with your own app. Ask them to describe aloud why they made certain decisions or what features frustrate or delight them.

By examining how they interact with your competitors’ features, you’ll be able to see what works well. It’s IMPORTANT to TEST out competitor designs and not just choose what looks good. You might even discover ideas and techniques you never thought existed. The beauty of this testing is that you don’t have to build anything, and you’ll learn a lot in a short period of time.

4. Copywriting

Writing text for your app is important and often overlooked once design and development has been completed. Well-written headlines, descriptions, labels and button text help the user to navigate and complete goals. Here’s some common copywriting mistakes we saw at the design lab and how to fix them.

Example: Button/Input Labels

It’s typical to go with the first thing that pops into your head when labeling buttons, links and input fields. It might be obvious to you what your chosen label describes, but is actually confusing to your users. These choices must be appealing when trying to get the user to complete a goal, like creating an account. The result is a sub-optimal experience with incomplete forms, fewer sales, misinterpretation of the features and general confusion when interacting with your user interface.

Airbnb home screen

On Airbnb’s home screen, for example, developers want to make it as easy as possible for the user to discover properties and manage their trips. They’ve achieved this with well-chosen and thoughtful labels:

  1. To encourage users to search and discover properties, they’ve swapped out what would be a typical input placeholder like ‘Search Here’ with a more appealing prompt for the user to try a destination, such as ‘Try Costa del Sol.’
  2. The navigation labels on this page convey the expected behavior and you can interpret what’s behind each tab like ‘Saved’ and ‘Trips’ without much guesswork. The button elements ‘Dates’ and ‘Guests’ are succinct and support the context of the search field.

User testing can help to uncover how effectively your interface labels are written. Go through your app with a colleague and ask him or her to describe what your labels convey. Your labels should be self-explanatory, so you’ll quickly discover if you’ve made poor choices when their descriptions misalign with your intentions. You can get a nice bump in account sign-ups, user retention and in app purchases by paying attention to the button labels on sign-in and transaction pages. Try to upgrade bland actions to more appealing ones. ‘Get Started Now’ is always better than ‘Create Account,’ as it sounds like an action and not a process.

Example: Being Too Descriptive

It can be easy to get carried away telling the user about every problem your app solves when trying to get them to sign up or subscribe to a paid service. In reality, users don’t read large blocks of text; they scan for the most appealing information.

Duolingo Sign In Screen

Looking at Duolingo’s sign-in page, its aim is for users to create a free account. The page is blissfully simple with a short headline and clear call to action. There’s a couple of things to take note of in this design:

  1. It’s short. There are no paragraphs and it describes the outcome of using the app in under seven words. The developers could overwhelm the user here and say that you can learn over 10+ languages and be part of a community of thousands of other students. Instead, they’ve done well to keep it succinct, easy to digest and distraction free.
  2. It highlights that the product is free, which is always appealing and an important feature for most users.
  3. The page is completed with a positive ‘Get Started’ button instead of something that sounds like a lot of effort like ‘Create Account’.

Apple Music

In contrast, let’s take a look at a call to action in Apple Music. At this point, Apple is trying to convert users to paying a subscription by highlighting its recommendation service. The copy here is sub-optimal, and there’s room for improvement in this design:

  1. The headline ‘Let us find your next favorite,’ although short, fails to focus on the outcome for the user. It reads passively and could have multiple interpretations.
  2. The paragraph below has appealing benefits, but most users will not take the time to read it. One of the best features of subscribing is that you can download music and listen to it offline, but that’s hidden away in this text.
  3. Finally, ‘Choose Your Plan’ probably isn’t the best call to action here. Even if there is a free option. Mentioning the plan at this stage makes the user think about the exchange of money and they’re less likely to click through.

Good copywriting is a learning process. The most effective way to achieve success is to design several options and A/B test them. This way, you get to quantitatively improve your copy and discover what features are most appealing to your users. Good copywriting on sign-in and payment screens can increase account sign-ups, transactions and improve user retention. To entice users, choose the most important features of your app and highlight it in the fewest words possible. If you must include multiple features in your copy, try a short bullet pointed list instead of blocky paragraphs.

Where to Go From Here?

We’ve taken a look at some of the common design problems that arise when creating mobile apps. To avoid making these same mistakes, we recommend user testing as one way to uncover some of these issues. Talk to your users to find their pain points. There’s some powerful tools out there that can help you recruit users and record their actions like usertesting.com.

Leverage the design systems that mobile apps are built on by reading the Apple and Google Material Design guidelines. These guides provide a lot of information you can use right away to improve the appearance and user experience.

Conduct regular competitor research to ensure your experience is modern and as good or better than the others apps in your market.

Review your copy; it’s important! Don’t just go with the first thing that comes to mind.

Extra reading: Learn about the when and why of choosing design patterns here.

Contributors

Comments