Mobile search is an integral component of most mobile-friendly websites and mobile apps. Given the constraints which are associated with the restrictive sizing of mobile device screens, implementing features such as search has to be done with great precision and regard for user experience.
Without proper consideration, a mobile search can feel clumsy and be a put-off for users of a mobile website or app.
In this article, we are going to look at some effective implementations of mobile search and consider what makes them feel so natural and easy-to-use.
All the Mobile UI Kits You Could Ask For
Airbnb presents a clear and considered design which could be construed as fairly standard in iOS terms. There is clear placeholder text, a prominent cancel action for exiting the search screen, and the suggested and recent search list items are large, making them easy to view and tap.
The company has even managed to carry through their branding using subtleties such as fonts, brand colors, and iconography.
VSCO has taken a more minimal approach to the search design, continuing their design direction while maintaining a good level of usability. The search field is prominent and the cancel action is large and appropriately positioned in an easy-to-reach area and away from the main search actions.
There is a useful filter with clear active and inactive states, which requires just a single tap to change search type. The search results are presented dynamically while typing, and are well-spaced with large user avatars to allow for quicker recognition when searching for a known entity.
Another excellent example of search design is Flipboard. While not typical in form, it allows the user to easily filter by category as well as search term with just a tap. This allows them to refine their search considerably, without having to type an extensive number of characters into the search field.
The search field itself is clear and generic with medium-weight text and recognisable iconography. This example has the clearest and most prominent close action in the form of a large high contrast button at the bottom of the content as not to obscure the search field or results unnecessarily.
Facebook Messenger very effectively implements search in the emoji/stickers aspect of the messaging interface. It allows the user to quickly narrow down results through categories which can be scrolled left and right.
Through use of color and proportion, the indication here is that entering a search term is secondary – they are pushing the user towards scrolling horizontally and vertically to find their desired result with greater ease. This is achieved through clear subheadings and large thumbnails which are compactly spaced but easy to tap.
Which is your favourite implementation of mobile search? What is most important for you in designing a mobile search experience? Share your thoughts below in the comments!