{"$schema": "https://raw.githubusercontent.com/guitaripod/wwdc-sessions/master/schema/transcript.schema.json", "id": "wwdc2026-292", "language": "eng", "source": "https://developer.apple.com/videos/play/wwdc2026/292", "wordCount": 2514, "segments": [{"start": 7.0, "text": "Hi, I'm Rob, a designer on the Apple Design team."}, {"start": 11.0, "text": "Today, I'll be talking about"}, {"start": 13.0, "text": "how to design an intuitive search experience for your app."}, {"start": 17.0, "text": "Search is one of the most important tools for helping people find, navigate,"}, {"start": 22.0, "text": "and discover content."}, {"start": 24.0, "text": "And with apps continuing to offer a wider range of content and experiences,"}, {"start": 29.0, "text": "Search gives users a superpower."}, {"start": 31.0, "text": "The ability to get to exactly what they need"}, {"start": 33.0, "text": "without the frustration of having to spend time looking for it."}, {"start": 38.0, "text": "And search is often the first thing people look for when opening your app."}, {"start": 41.0, "text": "Whether it's getting back to a document in Pages, finding a movie on Apple TV,"}, {"start": 46.0, "text": "or exploring new artists and genre's in Apple Music,"}, {"start": 49.0, "text": "search plays a key role in making these interactions, feel effortless."}, {"start": 54.0, "text": "Which is why designing a great search experience,"}, {"start": 56.0, "text": "is an important part of your app."}, {"start": 60.0, "text": "And with Liquid Glass, we introduced new patterns"}, {"start": 62.0, "text": "that make search more ergonomic on iOS"}, {"start": 65.0, "text": "and that take full advantage of the larger displays on iPad and Mac."}, {"start": 70.0, "text": "In this session, I'll start by introducing the Search Field"}, {"start": 74.0, "text": "and the core behaviors and interactions it supports."}, {"start": 78.0, "text": "Then, I'll provide an overview of the different search patterns"}, {"start": 81.0, "text": "that are available."}, {"start": 82.0, "text": "And how to best choose where search lives in your app."}, {"start": 86.0, "text": "Finally, I'll talk about some general, best practices."}, {"start": 90.0, "text": "And how to make common interactions like inputting text and filtering search results"}, {"start": 95.0, "text": "as intuitive and seamless as possible."}, {"start": 99.0, "text": "Let's start by taking a look at the Search Field..."}, {"start": 102.0, "text": "Apple provides developers a search component,"}, {"start": 105.0, "text": "that includes the core elements"}, {"start": 107.0, "text": "and interactions people have come to expect when searching."}, {"start": 110.0, "text": "Such as… A leading Search icon"}, {"start": 113.0, "text": "that visually establishes the UI as a Search Field."}, {"start": 117.0, "text": "Placeholder text, that communicates where people can enter their search term."}, {"start": 122.0, "text": "A clear button, that shows once text is entered."}, {"start": 126.0, "text": "And on iOS, when Search is focused,"}, {"start": 129.0, "text": "there is an additional Cancel button that is presented."}, {"start": 132.0, "text": "Allowing people to exit Search while also dismissing the keyboard."}, {"start": 137.0, "text": "Depending on where your Search Field is placed,"}, {"start": 139.0, "text": "it will automatically adopt the correct presentation style."}, {"start": 143.0, "text": "Such as using glass when placed in a Toolbar"}, {"start": 146.0, "text": "or using standard content styling when placed in the scroll region of your app."}, {"start": 151.0, "text": "If your app has its own distinct brand and set of iconography,"}, {"start": 156.0, "text": "make sure to keep the core elements of a Search Field intact."}, {"start": 160.0, "text": "Any custom icons should closely resemble the symbols they are replacing,"}, {"start": 165.0, "text": "And symbols like the magnifying glass,"}, {"start": 167.0, "text": "have become universally recognizable as Search."}, {"start": 171.0, "text": "Now, let's explore some of the different search patterns that are available"}, {"start": 175.0, "text": "and how to choose which approach is right for your app."}, {"start": 178.0, "text": "Starting with iOS."}, {"start": 181.0, "text": "On iOS... Search can be placed as a field or button in the Toolbar."}, {"start": 187.0, "text": "As a tab, in the tab bar."}, {"start": 190.0, "text": "Or as a field underneath the top Toolbar or in the content area of your app."}, {"start": 196.0, "text": "It's important to highlight that where you place search,"}, {"start": 198.0, "text": "directly impacts where the field animates to, when active."}, {"start": 202.0, "text": "When search is placed in the bottom Toolbar,"}, {"start": 205.0, "text": "the field elegantly animates up over keyboard,"}, {"start": 208.0, "text": "optimizing for reachability, and keyboard input."}, {"start": 212.0, "text": "When Search is placed inline, as a field,"}, {"start": 215.0, "text": "it remains at the top when active, avoiding any UI at the bottom of your app."}, {"start": 221.0, "text": "When deciding where to place Search, there are two big questions to ask."}, {"start": 226.0, "text": "The first... how are people navigating my app?"}, {"start": 229.0, "text": "This will help you understand"}, {"start": 231.0, "text": "if you need to accommodate certain components like a Tab Bar."}, {"start": 235.0, "text": "The second... what is the scope of my Search?"}, {"start": 239.0, "text": "Certain placements may impact people's perception"}, {"start": 241.0, "text": "of what content they are searching."}, {"start": 243.0, "text": "Let's put this into practice with a few of Apple's own apps."}, {"start": 248.0, "text": "In the Mail app, most of the navigation happens through the mail list,"}, {"start": 252.0, "text": "and there are contextual toolbars presented over each view."}, {"start": 256.0, "text": "This is a great example of when to place Search in a bottom toolbar."}, {"start": 260.0, "text": "It's the most ergonomic position,"}, {"start": 262.0, "text": "and it's adjacent to other primary actions in the app."}, {"start": 266.0, "text": "The placement here also clearly conveys that once active,"}, {"start": 270.0, "text": "you'll be searching your mail."}, {"start": 272.0, "text": "And based on the number of adjacent items in the Toolbar,"}, {"start": 276.0, "text": "the width of the field automatically adapts."}, {"start": 279.0, "text": "Accommodating both a leading, and a trailing action."}, {"start": 282.0, "text": "If you need more than two other toolbar items,"}, {"start": 285.0, "text": "search can also start as a button and then animate into a field when tapped."}, {"start": 291.0, "text": "While the bottom toolbar position is preferred,"}, {"start": 294.0, "text": "Search can also be placed in a Top Toolbar."}, {"start": 297.0, "text": "The Stocks app is a great example of where this is useful."}, {"start": 301.0, "text": "Here, the bottom of the Stocks list is occupied by a sheet."}, {"start": 304.0, "text": "Precluding the placement of a bottom Toolbar or field."}, {"start": 309.0, "text": "Here, Search is placed in the Top Toolbar."}, {"start": 312.0, "text": "And similarly pulls the field up over the keyboard when tapped."}, {"start": 317.0, "text": "Now, let's take a look at a different kind of navigation."}, {"start": 320.0, "text": "Tabbed apps."}, {"start": 322.0, "text": "A tab bar helps people quickly switch between the top level sections of your app."}, {"start": 326.0, "text": "And tabbed apps often have a variety of rich content"}, {"start": 329.0, "text": "and views that can be made searchable."}, {"start": 332.0, "text": "Here, it is generally recommended to create a primary entry point for Search."}, {"start": 337.0, "text": "A single space where people can expect to find"}, {"start": 339.0, "text": "all of the relevant content within your app."}, {"start": 342.0, "text": "You can do this by creating a Search Tab."}, {"start": 345.0, "text": "With a Search Tab, you have two options."}, {"start": 348.0, "text": "The first, is to use a standard tab"}, {"start": 351.0, "text": "that keeps search uniform with the rest of your bar."}, {"start": 354.0, "text": "Here, tabbing over will navigate to a landing page"}, {"start": 358.0, "text": "with the Search Field presented at the top."}, {"start": 361.0, "text": "This leaves room to surface any content, or suggestions,"}, {"start": 364.0, "text": "that might be helpful before Searching."}, {"start": 367.0, "text": "The second option, is to use a button appearance"}, {"start": 370.0, "text": "by making Search a prominent tab."}, {"start": 373.0, "text": "This will convey to people that tapping, will immediately engage search,"}, {"start": 377.0, "text": "and bring up the keyboard."}, {"start": 380.0, "text": "The first approach can be useful when your app has a breadth of rich content,"}, {"start": 383.0, "text": "and people may be in a more exploratory mindset when searching."}, {"start": 387.0, "text": "For example, Apple TV uses the Search Tab to present the various genres,"}, {"start": 392.0, "text": "and categories available before searching."}, {"start": 395.0, "text": "This helps ground people in what's available."}, {"start": 398.0, "text": "In cases where people generally know what they're looking for"}, {"start": 401.0, "text": "and need quick access to search,"}, {"start": 403.0, "text": "I recommend the second approach. Making Search a prominent tab."}, {"start": 407.0, "text": "A great example is in the Phone app."}, {"start": 410.0, "text": "Here, people just want to get back to a recent call or contact,"}, {"start": 414.0, "text": "and tapping search immediately brings up the keyboard."}, {"start": 418.0, "text": "This placement ensures search is always present and never more than a tap away."}, {"start": 424.0, "text": "While a dedicated Search Tab is great for offering a more unified,"}, {"start": 428.0, "text": "global search within your app,"}, {"start": 430.0, "text": "there are cases where just searching a specific tab can be useful."}, {"start": 435.0, "text": "Your Apple Music library is a great example."}, {"start": 438.0, "text": "Here, search is placed directly inline with the content and underneath the title."}, {"start": 443.0, "text": "Both, the title and more descriptive placeholder text in the Search Field,"}, {"start": 448.0, "text": "help to reinforce you'll just be searching the albums in your music library."}, {"start": 452.0, "text": "And not the entirety of your app."}, {"start": 456.0, "text": "This pattern is particularly useful if your app has more than one Search Field"}, {"start": 460.0, "text": "and when location plays a critical role in the scope of your Search."}, {"start": 464.0, "text": "Now, let's take a look at iPad, and Mac..."}, {"start": 467.0, "text": "With both platforms offering a wider display"}, {"start": 470.0, "text": "and sharing similar navigation models in apps,"}, {"start": 473.0, "text": "the way you approach search is generally similar."}, {"start": 477.0, "text": "And, I recommend trying to keep your iPad and Mac search experiences,"}, {"start": 481.0, "text": "as closely aligned as possible."}, {"start": 484.0, "text": "On both platforms, you can place your apps primary Search Field..."}, {"start": 488.0, "text": "in the trailing position of the Toolbar"}, {"start": 492.0, "text": "at the top of the Sidebar,"}, {"start": 495.0, "text": "or at the top of a dedicated Search Tab or section."}, {"start": 500.0, "text": "Let's take a look at a few examples,"}, {"start": 502.0, "text": "and I'll help you decide what's best for your app."}, {"start": 504.0, "text": "For Splitview apps, where you need to search across multiple columns of information,"}, {"start": 509.0, "text": "such as Mail, place Search in the trailing position of the toolbar."}, {"start": 514.0, "text": "It's a great use of space, as it lets people navigate results,"}, {"start": 518.0, "text": "while keeping the selected content visible in the detail view."}, {"start": 522.0, "text": "This is also one of the most common and familiar search patterns for users."}, {"start": 526.0, "text": "Leveraged in apps like Notes and Files."}, {"start": 529.0, "text": "You should also consider placing Search in the toolbar"}, {"start": 532.0, "text": "if you would expect search results to appear in the detail view of your app."}, {"start": 536.0, "text": "For example, here in Freeform, where Search directly filters the boards below."}, {"start": 543.0, "text": "If your toolbar has multiple items and groups,"}, {"start": 546.0, "text": "the Search Field will scale, or collapse into a button, based on the space available."}, {"start": 553.0, "text": "When activated, search expands to a width optimized for text input,"}, {"start": 558.0, "text": "and moves any overflow items into a menu."}, {"start": 562.0, "text": "Another common pattern is to place search in the sidebar."}, {"start": 565.0, "text": "For example, in the Settings app."}, {"start": 568.0, "text": "I recommend placing Search here, when wanting to filter content or navigation"}, {"start": 572.0, "text": "that is directly in the sidebar."}, {"start": 576.0, "text": "This can be particularly useful, if your app has a rich detail view"}, {"start": 580.0, "text": "and you need to draw a clean line between the list you're searching"}, {"start": 583.0, "text": "and an adjacent view."}, {"start": 585.0, "text": "For a good example, let's take a look at the Stocks app."}, {"start": 589.0, "text": "Here, you can use search to find, and add symbols to your stocks list,"}, {"start": 594.0, "text": "and the sidebar placement makes it clear where you'll be searching."}, {"start": 598.0, "text": "If we were to place Search over the Top Stories section,"}, {"start": 601.0, "text": "it could set the expectation you would be searching for news and stories."}, {"start": 605.0, "text": "Like on iOS, on iPad and Mac you can make Search a dedicated tab"}, {"start": 610.0, "text": "or item in the sidebar."}, {"start": 612.0, "text": "When you have a rich, multi-section app such as Apple Music,"}, {"start": 616.0, "text": "this can be helpful in giving people a single place to search,"}, {"start": 619.0, "text": "for all of the content available in your app."}, {"start": 622.0, "text": "This more immersive approach,"}, {"start": 624.0, "text": "also gives you a larger canvas to express search results."}, {"start": 629.0, "text": "In this last section, I'll cover some key, best practices"}, {"start": 633.0, "text": "that will help elevate your search experience."}, {"start": 636.0, "text": "Starting, with how to leverage search suggestions."}, {"start": 639.0, "text": "When people turn to Search in your app,"}, {"start": 641.0, "text": "it might mean they didn't initially find what they were looking for."}, {"start": 645.0, "text": "That's why it's important to make getting to their result,"}, {"start": 648.0, "text": "as easy and frictionless as possible."}, {"start": 650.0, "text": "And in many cases, users may be returning to something they previously searched for."}, {"start": 656.0, "text": "Displaying recent searches, can help people get back to a previous result,"}, {"start": 660.0, "text": "without the need to even start typing."}, {"start": 663.0, "text": "On iOS, recent searches should be shown directly inline"}, {"start": 667.0, "text": "when the field becomes focused."}, {"start": 669.0, "text": "On iPad and Mac, if your Search Field is placed in the Toolbar, or Sidebar,"}, {"start": 674.0, "text": "recent searches can be shown in a menu."}, {"start": 678.0, "text": "And if you have a Search Tab,"}, {"start": 680.0, "text": "they can be presented alongside other content suggestions on your page."}, {"start": 684.0, "text": "Consider being selective in the recent searches that are shown here."}, {"start": 688.0, "text": "In some apps, it can be helpful to only surface the specific results,"}, {"start": 692.0, "text": "users viewed, or engaged with."}, {"start": 695.0, "text": "It's important to think about what's most helpful to people in your app."}, {"start": 699.0, "text": "It's also important to let people remove their recent searches."}, {"start": 703.0, "text": "You can use a swipe gesture on individual items,"}, {"start": 706.0, "text": "as well as a button in the section header to clear all searches."}, {"start": 710.0, "text": "Once someone starts typing,"}, {"start": 712.0, "text": "it's important to show relevant results, as quickly as possible."}, {"start": 716.0, "text": "Alongside results, predictive suggestions can be integrated,"}, {"start": 720.0, "text": "that help reduce the need to type out an entire query."}, {"start": 723.0, "text": "These suggestions should directly correspond with what the user is typing,"}, {"start": 727.0, "text": "and feel like a natural completion of their search."}, {"start": 731.0, "text": "To keep people oriented, visually distinguish between user input,"}, {"start": 735.0, "text": "and the predictive part of the suggestion."}, {"start": 738.0, "text": "I also recommend limiting the number of suggestions being shown,"}, {"start": 742.0, "text": "so that search results feel front, and center."}, {"start": 745.0, "text": "Remember, when results and suggestions are ranked efficiently,"}, {"start": 749.0, "text": "people generally shouldn't have to type out their entire search."}, {"start": 752.0, "text": "Another key aspect of Search is helping people refine, or filter their results."}, {"start": 758.0, "text": "This is especially important when searching across multiple locations,"}, {"start": 761.0, "text": "categories, or accounts."}, {"start": 764.0, "text": "For your app's primary Search Field,"}, {"start": 766.0, "text": "it's generally recommended to start with a broader search,"}, {"start": 769.0, "text": "and then let users narrow down results as needed."}, {"start": 773.0, "text": "For lightweight filtering, Apple provides a control called a scope bar."}, {"start": 778.0, "text": "In the Mail app, a scope bar allows people to switch between seeing results across"}, {"start": 783.0, "text": "all of their Mailboxes, or just their current Mailbox."}, {"start": 787.0, "text": "In apps like Mail, where you might be navigating multiple Mailboxes or locations,"}, {"start": 792.0, "text": "this is a great way to help people see only the results they're looking for,"}, {"start": 796.0, "text": "while also reinforcing where they're searching."}, {"start": 800.0, "text": "For apps that search across multiple categories,"}, {"start": 803.0, "text": "it may be helpful to offer a more robust range of options for narrowing results."}, {"start": 808.0, "text": "To avoid overwhelming people, consider only showing filters that are relevant,"}, {"start": 812.0, "text": "and contextual, to what someone is looking for."}, {"start": 815.0, "text": "A great example is in the Maps app."}, {"start": 818.0, "text": "Here, filters are tailored to accommodate a wide range of location types,"}, {"start": 823.0, "text": "from restaurants to hiking trails."}, {"start": 826.0, "text": "Another way people can refine their search, is with search tokens."}, {"start": 830.0, "text": "Tokens filter results, by specific keywords that surface as they type."}, {"start": 835.0, "text": "Once applied, tokens appear as highlighted text within the Search Field,"}, {"start": 839.0, "text": "and users can continue adding to their search."}, {"start": 842.0, "text": "This makes it easy for people to narrow results,"}, {"start": 845.0, "text": "by a specific person, place, or type of content."}, {"start": 850.0, "text": "Because tokens live as text within the Search Field,"}, {"start": 853.0, "text": "they allow people to apply filters using more natural language,"}, {"start": 857.0, "text": "and in apps like Photos, they can even be combined to create personalized filters."}, {"start": 862.0, "text": "For example, viewing your photos from Joshua Tree in 2021."}, {"start": 868.0, "text": "While powerful, tokens can also be less discoverable."}, {"start": 871.0, "text": "So don't use them to replace more visible filtering UI in your app."}, {"start": 875.0, "text": "In fact, tokens work great when paired with a scope bar,"}, {"start": 879.0, "text": "or other filter controls."}, {"start": 881.0, "text": "Finally, let's talk about how to fail gracefully."}, {"start": 885.0, "text": "In cases where a search doesn't return any results,"}, {"start": 888.0, "text": "it's best to display a well-considered empty state, or no results view."}, {"start": 892.0, "text": "A completely blank view can leave someone wondering if their search even went through."}, {"start": 897.0, "text": "For this, Apple provides developers with a content unavailable view,"}, {"start": 902.0, "text": "that when configured for search displays a search symbol,"}, {"start": 906.0, "text": "title, and subtitle to communicate no results were returned."}, {"start": 912.0, "text": "Consider displaying the current search text in this view,"}, {"start": 915.0, "text": "to help people quickly catch any typos or errors."}, {"start": 920.0, "text": "And with that, this brings us to the end of our session today."}, {"start": 923.0, "text": "I encourage you to take what I shared today,"}, {"start": 926.0, "text": "and think about the opportunities within your app."}, {"start": 929.0, "text": "For example, are there places where search could be moved to the bottom,"}, {"start": 933.0, "text": "to help improve reachability?"}, {"start": 935.0, "text": "Or do you have a tabbed app that would benefit from a Search Tab?"}, {"start": 938.0, "text": "And finally, are you leveraging tools like suggestions and filters"}, {"start": 942.0, "text": "to make search feel as effortless as possible?"}, {"start": 945.0, "text": "To learn more about what I shared today, check out the Human Interface Guidelines."}, {"start": 950.0, "text": "For tools to help you get started, you can explore our design resources."}, {"start": 955.0, "text": "And to go deeper on our design system,"}, {"start": 957.0, "text": "I suggest checking out these talks, from previous years."}, {"start": 962.0, "text": "I'm so excited to see how you leverage these updates and guidelines,"}, {"start": 966.0, "text": "in your own apps."}, {"start": 967.0, "text": "Thanks for watching!"}]}