Discoverable design

Hello! I'm Jiabao Li, a designer on the Prototyping team. I'll be joined later by my colleague, Mylène Dreyer. We are so excited to talk about how to design user interfaces that are discoverable. Your app has amazing features, but people might not know the features exist if they are not self-evident. So, today, we are going to talk about how people learn about what your app can do.

If your interface is discoverable, it means that people should be able to look at a screen and, before they touch anything, know what they can do, and how. Let's use an example to explore different ways to make your app more discoverable. For several years now, our team has worked on a boutique app for finding the best toast. This year, our app is expanding into making toast. Introducing Toasty! The premier smart toast recipe generator. You can choose recipes from curated selections of toast. You can see fancy toast your friends made. You can even generate a recipe by taking a picture of toast that's right in front of you.

How will people learn about all the features? Hmm, let's line them up one by one in our onboarding tutorial.

Let's tell people how to browse toast, and about generating recipes from a picture. Oh, but also all the instructions about how to take a picture in Toasty, specifically to make for the best results. OK, except, let me be honest. I always skip through these onboarding screens. I don't even read them, so why would people want to read onboarding screens I made? When I open up this Toasty app, these screens are just another thing between me and fancy delicious toast. Even if people had the patience to read each screen, why would they remember everything later? You need an interface that stands on its own, without heavy-handed tutorials, because learning by doing is a lot more fun and effective than reading a list of instructions. So, here are five fundamentals to make your app more discoverable. First, rank your features so you can make the most important ones visible. Second, use words and symbols people are familiar with to provide visual cues. Third, use gestures for fluid navigation, but hint at gestures. Fourth, group content to fit people's behavior. And fifth, convey a sense of control over personalized content. These concepts may seem basic. In a way, they are. They are so fundamental, we take them for granted. But there are nuances here that might not be obvious and are worth unpacking because your app doesn't get a second chance at a first impression. So, first, prioritize important features. Not all pixels are created equal. Which is great because neither are all of our features. The essential parts of your app should be immediately visible to people. It's okay for the non-essential parts to require some navigation to reach.

When we were designing Toasty, we wrote down a list of all the important features of our app. These are a lot of features, and there's no way they're all going to fit into one screen. We really need to prioritize which features are important so that we're not trying to cram all of them onto one screen. So, we ordered a list of features by their level of importance.

Browsing toast recipes and viewing my recipes are very important for people to see. "Settings" and "About Us" are less critical, especially the "About Us" page. A person using your app might want to know the developer of the app to report a problem or make a suggestion, but it's not one of the top three things they'll want to do. When designing your app, try to understand what is important from your user's perspective. Great! So, we have our ten main features, and we know people love clean interfaces. So, we'll just throw all the non-essential features into a menu. Clean and easy, right? You may have seen this icon before. It's called a hamburger menu. When we tested our interface in the hands of people and found out that, when the hamburger menu is closed, people don't know what's inside. The three lines don't convey anything about the features inside. So, instead, we decided to go with a tab bar navigation system, which appears at the bottom of an app and lets people quickly switch between different sections. It's better because you can immediately see the most important features of the app.

The most minimal user interfaces might not be usable or simple because people won't know what to do. Because when we hide things to make the app look minimal, we increase the risk that people won't find features. They might even forget that your favorite feature exists.

On the other extreme, what if all the features are equally important, and I have to cram them all into one space with six tab buttons? But too many tabs reduces the tappable area of each tab and increases the complexity of your app, which can make it harder for people to locate information. Look, I understand that you have been in these situations. Some people think everything is important to show first, and some people want to hide everything for a cleaner look. It's hard to serve both of them, and you have to make hard decisions in terms of what to prioritize. It's a balancing act.

What are the reasons features might be worth showing front and center in your app? The features are the main points of the app, or people use the features frequently. The main unique points of Toasty is browse toast recipes, view my recipe, and take a picture to generate a recipe. And people browse through pieces of toast and collect a set of recipes most frequently. We divided these features into two screens. We named the screens "For You" and "Recipes." We placed these screens in the most visible and reachable place, the tab bar. And as an added bonus, it aligns the ergonomics of the screen with the expected frequency of actions. Taking a picture is to generate a new recipe in my Recipes page. It's an important feature. So, we put a prominent button at the top, before other recipes. The Search Bar is placed on the top, for very visible access. We are fine with it being further to reach for my thumb because we imagine it as an action people use less frequently, relative to our tab bar actions. The rest of the features from our list relate to my personal preferences, so we put them into the Profile icon on the top. My preferences do not change frequently, so it's OK if it takes an additional tap to get there. To summarize this section, prioritize important features, make the essential features immediately visible. To make other actions and navigation discoverable, use visual cues to direct attention. Visual cues are elements that guide people toward a particular piece of content or action. How we think about visual cues begins with knowing your audience. Knowing your audience is key because it helps you understand what needs to be spelled out and what can be inferred by people. First, think about, who is your product for? In the case of Toasty, our product is for toast lovers, who might not be professional chefs, but still want to make tasty toast on their own with the help of a recipe. Toasty is an app for a general audience, not a professional tool. So, there is not much tolerance for spending time and effort to learn this app. As in, people are unlikely to want or think it's necessary to have extensive how-to instructions, like a multi-step onboarding tutorial. We want to provide as many visual cues that clue them into how to use the app while they're using it, instead. So, we ask, what do people know already? We assume people can infer this icon relates to toast because, as toast lovers, they've naturally come across bread that resembles that shape. Our icon is tied to the physical world. But, hey! It's not just people's physical, lived experiences we can count on. We can expect some familiarity with common digital patterns because most people using Toasty aren't new to having a phone.

For example, people using iOS associate the action of going to a previous screen with tapping a chevron on the top left of the navigation view. Because people are familiar with this interaction, we don't need to add extra visual cues.

If you are building unique designs or interactions that people may not be familiar with, you should include words or on-screen elements that help people understand what to do.

Even recognizable icons can be vague. Is that a book? A favorite newspaper? By adding labels, we clarify the meaning of each icon: to browse suggested kinds of toast, to view saved recipes. Even the camera icon that we are familiar with could have many possible uses, such as taking a picture, scanning a document or a QR code. When we add text labeling the button "New," we clarify this button is for capturing toast to add a new recipe. Beyond the visual cues that make it clear what the action will be, you can also provide visual cues that help people understand how to make use of that action.

Take the search bar, for example. People are familiar enough with the search icon and action, but draw a blank on what to write, because we haven't clued them in on how to search in the app. We call this the blank page problem. When you create things, presenting people with a giant, blank white screen can lead to indecision because people don't know what they want to make when there's nothing in front of them. It's something you can get around by guiding people with various options.

So, we decided to provide examples of possible types of input, such as searching by ingredients, places, or friends. In this way, people can quickly discover different methods for how to search. Besides guiding people with words and visuals, you could also use animation and interactivity to teach gradually and in context. In Toasty, for example, we have the ability to scan real toast, using the camera to generate a recipe and set a cover photo for that recipe. It's a unique feature, so we'll have to guide people through how to do this. The toast outline hints at keeping the toast in the center and a certain distance away. Before you have toast in view, the shutter button is deactivated, and we let you know it's because the camera is looking for toast.

When a camera is at the right angle, the outline visually changes. And then, there's haptic feedback to indicate the recommended moment to take a picture of your toast. These animations and visual cues help ensure people get our instructions, when the info is relevant, instead of early on in the onboarding.

So, design your app by considering what knowledge people are already equipped with and when they need an extra helping hand. Number three, hint at gestures. Making use of gestures in your app will make your app feel more fluid and responsive than navigating through with only discrete taps. Gestures are great as shortcuts to certain actions or navigation, but are invisible, and so might not be as immediately discoverable.

First, as a general rule, use the accepted gesture for the platform. If you're inventing a new gesture, try to mimic real-life interactions. People can have a hard time learning new gestures that do familiar interactions. In games and other immersive apps, custom gestures can be a fun part of the experience. In other apps, it's best to use standard gestures, so extra effort isn't needed to discover or remember them.

Some standard gestures are Tap, Swipe, Long Press, Pan, Pinch, and Rotate.

People generally expect these standard gestures to work the same across the system and in every app. Some experiences don't have standard gestures. If they are new, make sure to align interactions with real-world behaviors.

For example, in Scribble with Apple Pencil, we can scratch out the text that you want to delete. The gesture works the same way in the real world to create a familiar interaction.

In my recipes, we use pinch to show more recipes, similar to the Photos app that uses the same gesture to pinch to show more photos. People should be familiar with this standard gesture. But even some gestures that people are familiar with can be confusing. For example, people who heavily use social media apps might be familiar with Double Tap to Like. But people who use a lot of Photos and Maps might expect Double Tap to zoom in. In designing Toasty, we show a clear "Like" icon for Tap to Like, but also include the Double Tap gesture as a shortcut.

This leads to the second point. Use gestures as a shortcut, not a replacement. Because gestures, no matter how intuitive they might be, are still invisible. If there's no way to look at interface and know how to use a gesture, then treat a gesture as an accelerator. You should still have a primary way to perform the same action that is clearly legible. And third, make gestures more discoverable through your animated transitions.

In my recipes, we could tap a toast to see its recipe. To get back to all the recipes, we use swipe down as a shortcut. Similar to the Photos app, where you can swipe down to go back to all photos from viewing one photo. Even though it's a common gesture, we kept an explicit button to go back because we can't assume everybody knows this gesture. And gestures have directions. Tapping the back chevron still triggers a sliding down animation, which hints that you can also swipe down to go back. So, ensure your transitions are consistent with the motion of the associated gesture.

We want to let people navigate between recipes by swiping left or right. But just by looking at a screen, people wouldn't know they can do that. So, let's give a visual cue, by adding the smaller toast images on either side.

To summarize this section, use standard iOS gestures, or gestures that are similar to real-life interactions. Provide a primary, legible way to perform the same action. And use animation to hint at gestures. These are three methods to improve discoverability, by ensuring people can easily move through your app, can understand what actions are available, and can learn how to do so in the moment.

As general principles, when people use your app, they should be able to know what to do immediately, without having to touch the screen. Try to understand how people know things. Do they know this from the real world? Do they know this from iOS? Do they know this because they've used our app before? Next, my colleague, Mylène, will speak to discoverability for content. Thank you, Jiabao! Making the functionality of your application easy to understand will be pointless if people cannot find the content they are looking for.

The best apps have features you know how to use and content you know how to navigate. The core content of Toasty, is toast recipes. A lot of them. Hundreds! And people will keep adding recipes, so, eventually, we'll have thousands.

With that much content, how are we going to ensure people can discover the kinds of toast they want? To answer that question, here's our fourth principle: organize by behavior. Organize the content of your app into categories that fits people's motivation and natural behavior. Let's start by choosing what these categories are. We think people get very excited about what kind of topping or unique ingredient combinations they would like to find on a toast. So, naturally, when choosing categories for our app, we decided to organize by ingredients.

People can have grouped selections of avocado or blueberry toast. But that doesn't scale well because there are just too many possible ingredients. It is a legitimate choice to categorize by ingredient.

There are tons of different ways to organize content, and we know how difficult it can be to make choices. But this isn't helping make a decision about the pieces of toast people want to try next. The amount of ingredients categories is overwhelming. With Toasty, we want to help people explore and discover new toast recipes. So, we put ourself in the position of the people using our app. How would people discover toast in real life? In what context? What is people's behavior regarding toast? Well, they find new toast when they try new restaurants or when friends recommend them. This led us to organize recommendations based on whether they are from restaurants or shared by friends. These two categories apply to other motivations than just making a piece of toast. It's about getting to know restaurants in your area better and connecting with friends.

It is more interesting and engaging to discover content this way. But we felt we were still missing one strong category that would connect with the individual's personal taste and the flavors they favor. That leads us to our second point, which is to use personalization. Organize content into a dedicated section that will surface suggestions from a machine-learning-powered recommendation engine. Because food taste is something personal, it makes sense to personalize content. As I said earlier, we can't have a category for each ingredient, but we can have a recommendation engine that will target people's favorite toast recipes based on ingredients they like.

So, adding to our existing categories, we've created a new one we're calling "Tasty Picks." Tasty Picks shows the best toast recipes generated by our own recommendation engine. For certain types of application, personalized content can improve the app's experience if it's implemented well. Especially when dealing with a lot of content, it's possible people could find something they might like faster. And when people don't have to type in a search bar, it is usually a sign that your content is discoverable. Once we have organized the content into categories that match people's behavior, we need to visually perceive these divisions. Which brings us to the final point about organizing content: visualize the content organization by making the categories clear at a glance. When designing the user interface of Toasty, we started by just putting every item on screen.

When we do this with our toast recipes, you can already see this is overwhelming. There are too many items that are equally important. It becomes difficult to discover the one you really want. Moreover, without clear division, people have no sense of existing categories. The content is just one giant, unsorted box of toast recipes. By grouping the categories into different logical sections, separated by a header title, it feels immediately more understandable. People can easily ignore one category and explore deeper in one specific section. Organize content into categories that translates people's behavior and real-life context. Use personalization so people can more easily find what they like. Finally, visually reinforce these categories by having clear divisions. Now, let's move to our last and fifth principle: convey a sense of control, so people know how to easily influence a machine-learning system and edit irrelevant personalized content.

First, let people provide explicit feedback about the item on their screen. Explicit feedback comes from people's intentional input. When an option exists to tell a system about content you want to see more or hide, this is explicit feedback. If you clearly invite people to provide feedback, they are more likely to give feedback. This will feed the recommendation engine's useful data that will reinforce relevant items and discoverability of the content. So, be mindful about how you communicate and make these feedback actions discoverable.

After browsing hundreds of toast, people eventually land on a yummy toast page. As Jiabao mentioned earlier, visual cues are elements that guide people toward a particular piece of content or action. Because we want people to tell us if they like this toast, we decided to use a heart button. We showed our design to friends and colleagues to find out what is or isn't working. We quickly realized most people thought this action meant "add to favorites" rather than "I would like to be recommended more toast like this." The heart icon alone doesn't help to discover what this feature does. It is open to interpretation and not clearly indicating that tapping on it will have any consequences on the system.

Moreover, in iOS, the standard is that you can only unloved once you have loved. So if we can't use the unlove icon, what would be a good input to say "show me less this type of toast"? The iOS guidelines for recommendation feedback icons is to pair thumbs up and thumbs down. So, we went with that. We showed this updated design to our friends, and they were still confused. It could be that, this thumbs up meant other people would see that they have liked this toast. They just weren't understanding that it's going to change a recommendation engine within their own iPhone.

So, we tried even harder to be clear and upfront about the consequences. Using the label "Suggest toast like this" has clear consequences because "Suggest" is a term that is much more closely associated with recommendation engines. Now, by just looking at the screen, you know what will happen after tapping the button "less." Future recommendations will be adapted to show less banana toast.

Communicating how your system works, where you can interact with it, and what will result from a person's actions is crucial if you want people to easily discover how to give useful feedback. So, now that we know how to design feedback and actions, the next step is to be mindful about the outputs of these actions. So, in order to do this, disclose implicit feedback. Implicit feedback is information that arises as people interact with your app's features. "Implicit" means that it happens without people consciously asking for it. For example, when viewing a recipe or sharing toast with a friend. By disclosing the implicit inputs, we inform people of the system recommendation input source and, therefore, increase the discoverability of the content and the understanding of the system.

In the "For You" tab of Toasty, we have the section "Tasty Picks." Without an explanation, it's difficult to understand where this content is coming from. Why am I seeing these particular toast recipes? Is this curated content from the developer themself or machine learning? So, after considering these questions ourself, we added a description, "Because you added avocado toast." Adding a text label is a simple but efficient method to clarify anything on screen. In this case, it helps people know they'll get more personalized recommendations as they add recipes to their collection. Now, what if people don't want their added toast recipes to be used as an input to get recommendation? How do they edit personalized content if the results are no longer valuable, or simply not as good as expected? These questions brings us to the last point of our talk today, which is to give control over recommendations. Allow people to act on the recommendations they receive, in case they are not happy with the results. Let me tell you a little story to illustrate that. I'm used to eating an avocado toast every morning, and I get most of my recipes from Toasty. Now, let's say I move to a new country. Everything is exciting and new, but I realized one terrible thing there: I just can't find or purchase avocados anywhere! How terrible would it be to still get delicious avocado toast suggestion, when I can't get that ingredient anymore? Yes, indeed, that would be very frustrating. The app needs to stop showing me what I can't have.

For this reason, you should allow recommendations to be edited so people feel in control.

Allow them to act on something that is frustrating and that they want to correct. But most importantly, make that action easy to find and quick to perform.

In the "Tasty Picks" section, next to the description "Because you added avocado toast," we've put a "More Options" button. By doing so, people know they can act directly on the recommendation. But from the perspective of discoverability, you should already sense something wrong here. We've hidden everything behind a "More Options" menu, where people might not find it. Maybe we should try to be even more descriptive? So, for our last design, we simply added a green text button, right at the end of the descriptions, that says "edit suggestion." After tapping on that button, different options are presented to people. "Suggest Less Avocado Toast" and "Stop Suggesting Avocado Toast." By just reading the button label, people should easily understand what to do and perceive what would result from both actions.

By using a thumbs-down icon, the same way as we do for the explicit feedback, we show people that these buttons have the same outcomes as ones elsewhere in our app, which is to show more or less of certain content.

So, use descriptive labels and use icons to help clarify or emphasize the description.

Some people might want to provide even more specific feedback than just "suggest less avocado toast" and "stop suggesting avocado toast." I mean, there are many situations where "suggest less" or "stop suggesting" aren't exactly how I want to change my recommendations. Maybe people are just not in the mood for avocado on this particular day. They might want to see different recommendations today, but still be suggested avocado toast in the future. Or maybe they just don't like one specific item in "Tasty Picks" and would like to remove it.

For the sake of discoverability, it's fair to debate exactly what kind of feedback to provide to a recommendation engine and how to label those actions. Even Jiabao and I have different opinions on which controls would be best here. So, to be confident when making such difficult design decisions, make a prototype of your app, show it to people, and learn from their feedback. Repeat the process until you are happy with the result.

Here is what we discussed for the fifth and final principle. People should feel and have control over your app personalized content. They should be able to quickly understand what explicit feedback to provide and how to edit or remove content they don't value anymore. Let's recap the five principles to make your app more discoverable.

Prioritize important features. Have the essential features of your app immediately visible. Provide visual cues. Use words to disambiguate. Teach in context with animations and interactivity. Hint at gestures: make gestures discoverable by using animations. Use standard gestures as much as possible. If using custom gestures, provide a legible way to perform the same action. Organize by behavior. When dealing with a lot of content, categorize by people's behavior. Visually organize these categories and use personalization in order for people to quickly find what they want. And finally, convey a sense of control. Make sure people are in control. Allow them to make corrections and edit personalized content.

You can have the most innovative app, with the most polished custom icons. But when using your app, if people get lost or don't understand what those beautiful icons mean, they might get confused. You have worked very hard to build your app's features and content, so you really want people to find them.

As general principle, when people use your app, they should be able to know what to do immediately. Even without having to touch the screen. Think about your audience, and what they might know. Do they know this icon from iOS, or do they understand this symbol from the real world? Great design requires trial and error. So, make things, show them to people, and learn from their feedback.

If you are interested to know more about design principles and how to make apps that feel fluid to use, here are some videos we recommend. Thank you for watching! [music]