Design intuitive search experiences

Hi, I'm Rob, a designer on the Apple Design team.

Today, I'll be talking about how to design an intuitive search experience for your app. Search is one of the most important tools for helping people find, navigate, and discover content.

And with apps continuing to offer a wider range of content and experiences, Search gives users a superpower.

The ability to get to exactly what they need without the frustration of having to spend time looking for it.

And search is often the first thing people look for when opening your app. Whether it's getting back to a document in Pages, finding a movie on Apple TV, or exploring new artists and genre's in Apple Music, search plays a key role in making these interactions, feel effortless. Which is why designing a great search experience, is an important part of your app.

And with Liquid Glass, we introduced new patterns that make search more ergonomic on iOS and that take full advantage of the larger displays on iPad and Mac.

In this session, I'll start by introducing the Search Field and the core behaviors and interactions it supports.

Then, I'll provide an overview of the different search patterns that are available. And how to best choose where search lives in your app.

Finally, I'll talk about some general, best practices. And how to make common interactions like inputting text and filtering search results as intuitive and seamless as possible. Let's start by taking a look at the Search Field...

Apple provides developers a search component, that includes the core elements and interactions people have come to expect when searching. Such as… A leading Search icon that visually establishes the UI as a Search Field.

Placeholder text, that communicates where people can enter their search term. A clear button, that shows once text is entered.

And on iOS, when Search is focused, there is an additional Cancel button that is presented. Allowing people to exit Search while also dismissing the keyboard. Depending on where your Search Field is placed, it will automatically adopt the correct presentation style. Such as using glass when placed in a Toolbar or using standard content styling when placed in the scroll region of your app. If your app has its own distinct brand and set of iconography, make sure to keep the core elements of a Search Field intact. Any custom icons should closely resemble the symbols they are replacing, And symbols like the magnifying glass, have become universally recognizable as Search.

Now, let's explore some of the different search patterns that are available and how to choose which approach is right for your app. Starting with iOS. On iOS... Search can be placed as a field or button in the Toolbar.

As a tab, in the tab bar.

Or as a field underneath the top Toolbar or in the content area of your app.

It's important to highlight that where you place search, directly impacts where the field animates to, when active. When search is placed in the bottom Toolbar, the field elegantly animates up over keyboard, optimizing for reachability, and keyboard input. When Search is placed inline, as a field, it remains at the top when active, avoiding any UI at the bottom of your app.

When deciding where to place Search, there are two big questions to ask. The first... how are people navigating my app? This will help you understand if you need to accommodate certain components like a Tab Bar.

The second... what is the scope of my Search? Certain placements may impact people's perception of what content they are searching.

Let's put this into practice with a few of Apple's own apps.

In the Mail app, most of the navigation happens through the mail list, and there are contextual toolbars presented over each view.

This is a great example of when to place Search in a bottom toolbar. It's the most ergonomic position, and it's adjacent to other primary actions in the app.

The placement here also clearly conveys that once active, you'll be searching your mail.

And based on the number of adjacent items in the Toolbar, the width of the field automatically adapts. Accommodating both a leading, and a trailing action.

If you need more than two other toolbar items, search can also start as a button and then animate into a field when tapped.

While the bottom toolbar position is preferred, Search can also be placed in a Top Toolbar. The Stocks app is a great example of where this is useful. Here, the bottom of the Stocks list is occupied by a sheet. Precluding the placement of a bottom Toolbar or field.

Here, Search is placed in the Top Toolbar. And similarly pulls the field up over the keyboard when tapped.

Now, let's take a look at a different kind of navigation. Tabbed apps. A tab bar helps people quickly switch between the top level sections of your app. And tabbed apps often have a variety of rich content and views that can be made searchable. Here, it is generally recommended to create a primary entry point for Search. A single space where people can expect to find all of the relevant content within your app. You can do this by creating a Search Tab. With a Search Tab, you have two options.

The first, is to use a standard tab that keeps search uniform with the rest of your bar.

Here, tabbing over will navigate to a landing page with the Search Field presented at the top.

This leaves room to surface any content, or suggestions, that might be helpful before Searching.

The second option, is to use a button appearance by making Search a prominent tab.

This will convey to people that tapping, will immediately engage search, and bring up the keyboard.

The first approach can be useful when your app has a breadth of rich content, and people may be in a more exploratory mindset when searching. For example, Apple TV uses the Search Tab to present the various genres, and categories available before searching. This helps ground people in what's available. In cases where people generally know what they're looking for and need quick access to search, I recommend the second approach. Making Search a prominent tab. A great example is in the Phone app. Here, people just want to get back to a recent call or contact, and tapping search immediately brings up the keyboard.

This placement ensures search is always present and never more than a tap away.

While a dedicated Search Tab is great for offering a more unified, global search within your app, there are cases where just searching a specific tab can be useful.

Your Apple Music library is a great example. Here, search is placed directly inline with the content and underneath the title. Both, the title and more descriptive placeholder text in the Search Field, help to reinforce you'll just be searching the albums in your music library. And not the entirety of your app.

This pattern is particularly useful if your app has more than one Search Field and when location plays a critical role in the scope of your Search.

Now, let's take a look at iPad, and Mac... With both platforms offering a wider display and sharing similar navigation models in apps, the way you approach search is generally similar. And, I recommend trying to keep your iPad and Mac search experiences, as closely aligned as possible.

On both platforms, you can place your apps primary Search Field... in the trailing position of the Toolbar at the top of the Sidebar, or at the top of a dedicated Search Tab or section.

Let's take a look at a few examples, and I'll help you decide what's best for your app. For Splitview apps, where you need to search across multiple columns of information, such as Mail, place Search in the trailing position of the toolbar. It's a great use of space, as it lets people navigate results, while keeping the selected content visible in the detail view. This is also one of the most common and familiar search patterns for users. Leveraged in apps like Notes and Files.

You should also consider placing Search in the toolbar if you would expect search results to appear in the detail view of your app. For example, here in Freeform, where Search directly filters the boards below.

If your toolbar has multiple items and groups, the Search Field will scale, or collapse into a button, based on the space available.

When activated, search expands to a width optimized for text input, and moves any overflow items into a menu.

Another common pattern is to place search in the sidebar. For example, in the Settings app. I recommend placing Search here, when wanting to filter content or navigation that is directly in the sidebar.

This can be particularly useful, if your app has a rich detail view and you need to draw a clean line between the list you're searching and an adjacent view. For a good example, let's take a look at the Stocks app. Here, you can use search to find, and add symbols to your stocks list, and the sidebar placement makes it clear where you'll be searching.

If we were to place Search over the Top Stories section, it could set the expectation you would be searching for news and stories. Like on iOS, on iPad and Mac you can make Search a dedicated tab or item in the sidebar. When you have a rich, multi-section app such as Apple Music, this can be helpful in giving people a single place to search, for all of the content available in your app.

This more immersive approach, also gives you a larger canvas to express search results.

In this last section, I'll cover some key, best practices that will help elevate your search experience. Starting, with how to leverage search suggestions. When people turn to Search in your app, it might mean they didn't initially find what they were looking for. That's why it's important to make getting to their result, as easy and frictionless as possible. And in many cases, users may be returning to something they previously searched for. Displaying recent searches, can help people get back to a previous result, without the need to even start typing.

On iOS, recent searches should be shown directly inline when the field becomes focused.

On iPad and Mac, if your Search Field is placed in the Toolbar, or Sidebar, recent searches can be shown in a menu.

And if you have a Search Tab, they can be presented alongside other content suggestions on your page.

Consider being selective in the recent searches that are shown here. In some apps, it can be helpful to only surface the specific results, users viewed, or engaged with. It's important to think about what's most helpful to people in your app.

It's also important to let people remove their recent searches. You can use a swipe gesture on individual items, as well as a button in the section header to clear all searches. Once someone starts typing, it's important to show relevant results, as quickly as possible. Alongside results, predictive suggestions can be integrated, that help reduce the need to type out an entire query. These suggestions should directly correspond with what the user is typing, and feel like a natural completion of their search. To keep people oriented, visually distinguish between user input, and the predictive part of the suggestion. I also recommend limiting the number of suggestions being shown, so that search results feel front, and center. Remember, when results and suggestions are ranked efficiently, people generally shouldn't have to type out their entire search. Another key aspect of Search is helping people refine, or filter their results. This is especially important when searching across multiple locations, categories, or accounts.

For your app's primary Search Field, it's generally recommended to start with a broader search, and then let users narrow down results as needed.

For lightweight filtering, Apple provides a control called a scope bar.

In the Mail app, a scope bar allows people to switch between seeing results across all of their Mailboxes, or just their current Mailbox. In apps like Mail, where you might be navigating multiple Mailboxes or locations, this is a great way to help people see only the results they're looking for, while also reinforcing where they're searching.

For apps that search across multiple categories, it may be helpful to offer a more robust range of options for narrowing results. To avoid overwhelming people, consider only showing filters that are relevant, and contextual, to what someone is looking for.

A great example is in the Maps app. Here, filters are tailored to accommodate a wide range of location types, from restaurants to hiking trails. Another way people can refine their search, is with search tokens. Tokens filter results, by specific keywords that surface as they type. Once applied, tokens appear as highlighted text within the Search Field, and users can continue adding to their search. This makes it easy for people to narrow results, by a specific person, place, or type of content.

Because tokens live as text within the Search Field, they allow people to apply filters using more natural language, and in apps like Photos, they can even be combined to create personalized filters. For example, viewing your photos from Joshua Tree in 2021.

While powerful, tokens can also be less discoverable. So don't use them to replace more visible filtering UI in your app. In fact, tokens work great when paired with a scope bar, or other filter controls. Finally, let's talk about how to fail gracefully. In cases where a search doesn't return any results, it's best to display a well-considered empty state, or no results view.

A completely blank view can leave someone wondering if their search even went through. For this, Apple provides developers with a content unavailable view, that when configured for search displays a search symbol, title, and subtitle to communicate no results were returned.

Consider displaying the current search text in this view, to help people quickly catch any typos or errors.

And with that, this brings us to the end of our session today. I encourage you to take what I shared today, and think about the opportunities within your app. For example, are there places where search could be moved to the bottom, to help improve reachability? Or do you have a tabbed app that would benefit from a Search Tab? And finally, are you leveraging tools like suggestions and filters to make search feel as effortless as possible? To learn more about what I shared today, check out the Human Interface Guidelines.

For tools to help you get started, you can explore our design resources. And to go deeper on our design system, I suggest checking out these talks, from previous years.

I'm so excited to see how you leverage these updates and guidelines, in your own apps. Thanks for watching!