Pinterest的3个UX教训
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.
近年来， Pinterest 已从默默无闻的项目 爆炸 到全球现象。 为什么？ 以及Pinterest的用户体验如何能够通知开发人员和设计师各种？ 让我们从Pinterest的一些前沿设计决策中学习。
搜索与浏览：如何帮助用户发现内容？ (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)?
Pinterest是关于发现的。 它使查找精美的物品和想法变得如此容易。 但是，用户体验如何平衡用户主导的行为(搜索)或应用程序主导的行为(浏览)？
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".
在兼顾两种行为的同时仍建立一些信息层次结构 ，这是一个设计挑战，以免用户感到困惑。 在雅各布·尼尔森(Jakob Nielsen)的启发式方法中 ，这是“灵活性和使用效率”与“美学和简约设计”之间的平衡。
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.
您可以在主供稿上方的导航顶部突出显示搜索栏，以浏览Facebook在此处进行测试的方式。
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.
或者，您也可以像Google一样仅搜索结果，只保留结果部分。 Google搜索中没有默认的可浏览内容，因为它是一种意图驱动的产品，您通常会在其中提前知道要查找的内容。
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.
但这些都不是Pinterest的理想选择。 考虑到图搜索的推出以及Facebook用户将要搜索的相对更大和更复杂的数据，Facebook可能比Pinterest更加重视搜索。 而且，如上所述，用户有收获的意图：使用Facebook和Google，您更有可能要搜索人，主题或其他非常具体的对象。
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.
另一方面，Pinterest严重降级了跨平台的搜索。 对于初学者来说，单击漂亮的图片比找出要搜索的内容并逐个字符地键入搜索字段要容易得多，您必须先查找，单击并按回车，然后再按一次...您的查询已输入。
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可以识别用户上下文。 当您在公共汽车上，沿着粘在手机上的街道上或拥挤的电梯中时，搜索会很痛苦。 您的输入准确性以及因此的用户体验与输入的易用性密切相关。 换句话说，敲击图片比敲击5-20个字符要容易得多，当您在运动中时，这些字符占用的空间不到一个平方厘米，而键盘上这些字符几乎不到一个平方厘米。
桌面网站上的Pinterest (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产品设计师的屏幕空间甚至更少。 考虑一个4.87“ x 2.31”屏幕( iPhone 5 )与12.78“ x 8.94”( 13“ Macbook Pro )。表面积大约相差10倍(手机为11平方英寸，笔记本电脑为114平方英寸)。 )。
手机网络上的Pinterest(iPhone) (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不同(由于它通常内置在浏览器中，因此很少使用)。 但是对于Google来说，搜索是主要的用例，因此即使在有限的资源范围内，默认情况下暴露搜索字段也不可改变。
iPhone 5上的Google.com (Google.com on an iPhone 5)
Pinterest applies this same browse before search approach to its native mobile app.
Pinterest将相同的浏览之前搜索方法应用于其本机移动应用程序。
原生Pinterest移动应用(iPhone) (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-decision.
顺便说一句，搜索一键即可。 但是该界面肯定会降级搜索，包括阴影，渐变，覆盖对象(即通知)和故意排序。 值得注意的是，即使您确实选择搜索某项内容，Pinterest确实可以帮助您避免仅点击类别就不必键入内容。 与希克定律保持一致 ，Pinterest希望减少用户的决策时间。
Which experience is the right one for people who use your app? Is the precision that search affords users more important than the effortless experience that browsing enables? Web developers and mobile app designers need to think hard about product priorities and user context when designing applications given how new screen sizes force prioritization like never before.
对于使用您的应用程序的人来说，哪种体验最合适？ 搜索所提供给用户的精确度是否比浏览所带来的轻松体验更为重要？ Web开发人员和移动应用程序设计师在设计应用程序时需要认真考虑产品优先级和用户上下文，因为新的屏幕尺寸如何以前所未有的方式强制进行优先级排序。
转到用户所处的位置：将位置用户中已定位的动作定位 (Go Where Your Users Go: Position Actions in Locations Users Already Gravitate Towards)
Using HeatData, we found our biased, small group of users tend to scroll on the right side of the screen at an overwhelming rate on m.pinterest.com.
使用HeatData ，我们发现有偏见的一小部分用户倾向于在m.pinterest.com上以压倒性的速度在屏幕右侧滚动。
It's just a natural side of the screen -- not the center and not the left side -- for users to touch, assuming many users are right handed.
假设许多用户是右手操作，那只是用户触摸时屏幕的自然面，而不是中心而不是左侧。
Credit: iaptouch.com
信用： iaptouch.com
Notice they have put what I believe to be their most valuable user action "Repin" - not Comment, not Like, in that position. Repin is valuable because it adds content to the Pinner's board, generating more content and creating a ripple effect among the Pinner's followers -- unlike a one-way Like, and Repin is lightweight (unlike Comment, which requires the cognitive overload of thinking of a comment). Repins generate engagement for both users (in addition to the Pinner's following), and have become socially acceptable, whereas comments, I subjectively believe, require some form of greater intimacy between the Current Pinner and Original Pinner.
请注意，他们将我认为是他们最有价值的用户操作“ Repin”放置在该位置，而不是“评论”，“喜欢”。 Repin之所以有价值，是因为它为Pinner的董事会增加了内容，产生了更多的内容，并且在Pinner的追随者之间产生了连锁React-与单向Like不同，Repin是轻量级的(与Comment不同，后者需要认知上的超负荷思考评论)。 Repins为两个用户(除了Pinner的追随者)都带来了参与度，并已为社会所接受，而我主观认为，评论需要在Current Pinner和Original Pinner之间建立某种更大的亲密关系。
When designing your mobile interfaces, think about where your users feel the least physical pain in interacting. This draws from Fitts's Law, which "predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target". Based on the HeatData we collected and the observed size of the Repin button, Pinterest understands this law very well and has implemented a mobile design to maximize desirable user action.
在设计您的移动界面时，请考虑一下用户在进行交互时感觉上最不痛苦的地方。 这是从费茨定律得出的 ，该定律 “预测快速移动到目标区域所需的时间是到目标的距离和目标大小的函数”。 根据我们收集的HeatData和观察到的Repin按钮的大小，Pinterest非常了解此定律，并实现了移动设计以最大程度地实现所需的用户操作。
减少丰富互动所需的时间 (Reduce The Amount of Time Needed for Rich Interaction)
Products are driven by content - whether the product is a social network like Facebook (user stories and photos), a media platform like YouTube (user videos), or an enterprise tool like Salesforce CRM (sales records). Content. But how do you make your content interesting, especially in a world in which it seems like ADHD is on the rise alongside increased information technology in our lives?
产品受内容驱动-无论产品是Facebook之类的社交网络(用户故事和照片)，YouTube之类的媒体平台(用户视频)还是Salesforce CRM之类的企业工具(销售记录)。 内容。 但是，如何使您的内容变得有趣，尤其是在当今世界中， 随着人们生活中信息技术的不断发展，ADHD也在不断增长 ？
Help people. It's simple. They click a button? They had intent. Facilitate that intent. Notice how Pinterest does it. Preselected Board. Pre-filled text using the object's meta-data.
帮助他人。 这很简单。 他们单击一个按钮？ 他们有意图。 促进这一意图。 注意Pinterest是如何做到的。 预选板。 使用对象的元数据预先填充的文本。
"Books Worth Reading" could have been instead "Choose a Board", which would have forced yet another decision on me. "First Zombie Free House (10+) | (10 Beautiful Photos)" could have been an empty text field. That's not engaging and it puts a burden on me to make yet another decision. But what they have done here is make it so I am just one more click away from Repinning, easy. They could have chosen to not have this overlay show, and just Repin immediately, but that likely leads to a less engaging experience in the long term. I would not have been able to organize the Pin into a Board, nor would I have associated any specific comments or metadata the way that this overlay allows me to do.
“值得读书”可以改为“选择董事会”，这将迫使我做出另一个决定。 “第一家僵尸免费屋(10+)|(10张精美照片)”本来可以是一个空文本字段。 那没有参与，这给我增加了做出另一个决定的负担。 但是他们在这里所做的就是做到这一点，所以我只需轻按一下即可轻松实现“重新固定”。 他们本可以选择不显示此叠加显示，而只是立即Repin，但是从长远来看，这可能会导致不那么吸引人的体验。 我将无法将图钉组织到董事会中，也无法以该叠加层允许的方式关联任何特定的注释或元数据。
简介：明智地确定优先级，基于现有行为进行优化并消除摩擦 (Summary: Prioritize Wisely, Optimize Based on Existing Behavior, and Eliminate Friction)
Through the use of basic user interaction principles and custom HeatData, we made smarter product decisions. Pinterest has balanced consistency with customization across platforms in a way that matches the beauty inherent in the very products that they feature.
通过使用基本的用户交互原理和自定义HeatData ，我们做出了更明智的产品决策。 Pinterest在跨平台定制方面具有平衡的一致性，其匹配方式与其所提供的产品所固有的美丽相匹配。
How do you achieve this in your own web and mobile applications?
您如何在自己的Web和移动应用程序中实现这一目标？
试用HeatData：一个月免费 (Try HeatData: One Free Month)
Want to see HeatData like we got for Pinterest? For Script and Style & David Walsh Blog readers, we're offering a free month of any HeatData plan. Just use promo code walsh in the next two weeks. Email [email protected] if you have questions!
是否希望像我们在Pinterest上看到HeatData？ 对于Script and Style和David Walsh Blog读者，我们免费提供任何HeatData计划的月份。 在接下来的两周内只需使用促销代码walsh 。 如有疑问，请发送电子邮件至[email protected] ！