Pinterest has exploded in recent years from obscure project to global phenomenon. Why? And how can Pinterest’s user experience inform developers and designers of all sorts? Let’s learn from some of Pinterest’s bleeding ...
Pinterest has exploded in recent years from obscure project to global phenomenon. Why? And how can Pinterest’s user experience inform developers and designers of all sorts? Let’s learn from some of Pinterest’s bleeding edge design decisions.
Search vs. Browsing: How Do You Help Your Users Discover Content?
Pinterest is about discovery. It makes it so easy to find beautiful items and ideas. But how does a user experience balance user-led behavior (search) or an application-led behavior (browsing)?
It is a design challenge to balance accommodating both behaviors while still establishing some information hierarchy, so that users don’t get confused. In Jakob Nielsen’s heuristics, this is the balance between “Flexibility and Efficiency of Use” and “Aesthetic and Minimalist Design”.
You could prominently slap the search bar across the top of the navigation above the main feed for browsing the way Facebook is testing here.
Or you could make a search-only experience the way Google has, with browsing reserved for the results section only. There is no default browsable content in Google Search because it is an intent-driven product in which you often know what you are looking for ahead of time.
But neither of these are ideal for Pinterest. Facebook likely weights search more heavily than Pinterest, given the rollout of graph search and the relatively larger and more complex data that Facebook users would be searching. Moreover, as mentioned above, there is user intent to harvest: with Facebook and Google, it’s much more likely that you want to search for a person, topic, or other very specific object.
On the other hand, Pinterest heavily demotes search across platforms. For starters, it’s easy to click on pretty pictures than figuring out what to search for and typing it in — character by character — into a search field you would have to first find, click into, and hit enter for…once your query was typed.
But on mobile especially, Pinterest recognizes the user context. Search is painful when you’re on the bus, walking down the street glued to your phone, or in a crowded elevator. Your input accuracy, and consequently user experience, correlates positively with an input’s ease of use. In other words, tapping on pictures is a lot easier than tapping 5-20 characters that each occupy less than a square centimeter on a just barely usable keyboard when you’re in motion.
Pinterest on Desktop Web
Here you can barely find search in the top left. It doesn’t stand out because there is no color contrast. The images that are front and center capture attention. But it’s there if you need it.
But on a mobile website, Pinterest product designers have even less screen real estate. Consider a 4.87″ x 2.31″ screen (iPhone 5) vs. 12.78″ x 8.94″ (13″ Macbook Pro). That’s approximately a 10x difference in surface area (11 sq. inches on mobile phones vs. 114 sq. inches on laptops).
Pinterest on Mobile Web (iPhone)
That’s when you really see what their priorities are. Search is now hidden behind an icon, unlike Google.com on mobile (which is rarely used anyway, given that it’s often built into the browser). But for Google, Search is the primary use case, so even with the limited real estate, exposing the search field by default is an immutable priority.
Google.com on an iPhone 5
Pinterest applies this same browse before search approach to its native mobile app.
Native Pinterest Mobile App (iPhone)
Search admittedly is just one click away. But the interface definitely demotes search through shadows, gradients, overlay objects (i.e. notifications), and deliberate ordering. Notably, even when you do choose to search for something, Pinterest really helps you avoid typing in favor for just tapping a category. Aligned with Hick’s Law, Pinterest wants to reduce user’s time-to