{
    "componentChunkName": "component---src-templates-blog-post-mdx-js",
    "path": "/blog/facebook-reactions-from-conception-to-release/",
    "result": {"data":{"site":{"siteMetadata":{"title":"Andrew J Wright"}},"mdx":{"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Facebook Reactions: the path from conception to release\",\n  \"description\": \"Geoff Teehan shares the story of how Facebook developed Reactions!\",\n  \"date\": \"2016-02-27\",\n  \"imageURL\": \"http://d.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2016/02/3057113-poster-p-2-facebooks-product-design-director-explains-one-of-its-biggest-ux-changes-in-years.jpg\",\n  \"tags\": [\"user experience\"],\n  \"editorsNote\": \"This is a brief reflection on an article posted on fastcodesign.com\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"http://d.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2016/02/3057113-poster-p-2-facebooks-product-design-director-explains-one-of-its-biggest-ux-changes-in-years.jpg\",\n    \"alt\": \"Facebook Reactions from FastCompany Design\"\n  })), mdx(\"h2\", null, \"The challenge\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"We have spent a lot of time refining the Like, Comment, Share buttons so that it\\u2019s easy to use and understand. It is a surface that is interacted with a lot, so any change will affect the understandability and usability of millions of people\\u2019s actions. We needed to thoughtfully curate any change so it felt like a natural evolution, taking care not to feel abrupt or disrupt everyone on our platform.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"\\u2013 Geoff Teehan (\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://www.fastcodesign.com/user/geoff-teehan\"\n  }, \"fastco.design\"), \")\")), mdx(\"h2\", null, \"Highlight #1 \", \"\\u2014\", \" Principles\"), mdx(\"p\", null, \"I really like that they had key principles for the two challenge tracks they were working on.\"), mdx(\"h3\", null, \"Defining the Reactions\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Reactions should be universally understood\"), \". Reactions should be understood globally, so more people can connect and communicate together.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Reactions should be widely used and expressive\"), \". Reactions should allow people to give feedback in more expressive ways that better align with the varied ways we react to things in real life. (\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://www.fastcodesign.com/3057113/facebooks-product-design-director-explains-one-of-its-biggest-ux-changes-in-years#The_Reactions\"\n  }, \"source\"), \")\")), mdx(\"h3\", null, \"Designing the System of interaction and presentation\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Reactions should be an extension of the Like button\"), \". Like, Comment, and Share are ubiquitous to Facebook, and adding a fourth option at this point would introduce more complexity.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"Reactions should not make existing behavior more difficult\"), \". It was important that we introduced this feature responsibly, in a way that didn\\u2019t disrupt the way a billion people already used the product. In other words, we wanted to retain the simplicity and ease of Liking\\u200A\\u2014\\u200Awhen you tap on the Like button, you are \\\"liking\\\" the post. (\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://www.fastcodesign.com/3057113/facebooks-product-design-director-explains-one-of-its-biggest-ux-changes-in-years#The_System\"\n  }, \"source\"), \")\")), mdx(\"h2\", null, \"Highlight #2 \", \"\\u2014\", \" Sources of data\"), mdx(\"p\", null, \"One year of research using an interesting set of sources:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Top Stickers\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Most used search terms for Stickers\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Top short comments\")), mdx(\"p\", null, \"These sources provided some excellent data that permitted the design team gain understanding of the intent and behaviour of millions of users world-wide. This is a really interesting way to research what people are trying to express on their platform.\"), mdx(\"h2\", null, \"Highlight #3 \", \"\\u2014\", \" Prototypes\"), mdx(\"p\", null, \"I love all of the prototyping and iteration of the interaction. Some look like they could have been acceptable but not award-winning. I would have loved to have been involved in that usability testing!!\"), mdx(\"div\", {\n    \"className\": \"gatsby-resp-iframe-wrapper\",\n    \"style\": {\n      \"paddingBottom\": \"75%\",\n      \"position\": \"relative\",\n      \"height\": \"0\",\n      \"overflow\": \"hidden\",\n      \"marginBottom\": \"1.0725rem\"\n    }\n  }, \" \", mdx(\"iframe\", {\n    parentName: \"div\",\n    \"src\": \"https://www.youtube.com/embed/gK9NG7XigvQ\",\n    \"frameBorder\": \"0\",\n    \"allowFullScreen\": true,\n    \"style\": {\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\",\n      \"width\": \"100%\",\n      \"height\": \"100%\"\n    }\n  }), \" \"), mdx(\"hr\", null), mdx(\"p\", null, \"Now, I recommend that you go read the \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://www.fastcodesign.com/3057113/facebooks-product-design-director-explains-one-of-its-biggest-ux-changes-in-years\"\n  }, \"original article on fastcodesign.com\"), \".\"));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"frontmatter":{"title":"Facebook Reactions: the path from conception to release","subtitle":null,"imageURL":"http://d.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2016/02/3057113-poster-p-2-facebooks-product-design-director-explains-one-of-its-biggest-ux-changes-in-years.jpg","date":"February 27, 2016","description":"Geoff Teehan shares the story of how Facebook developed Reactions!","tags":["user experience"],"editorsNote":"This is a brief reflection on an article posted on fastcodesign.com"}}},"pageContext":{"slug":"/blog/facebook-reactions-from-conception-to-release/","previous":{"id":"2b2a6c63-87e3-5651-9c16-16c2b3307a08","fields":{"slug":"/blog/week-of-jan-11-2016/"},"frontmatter":{"title":"Collected articles - Week of Jan 11, 2016"}},"next":{"id":"0d068b82-0a3e-524b-9814-bafec05de16f","fields":{"slug":"/blog/week-of-jun-10-2017/"},"frontmatter":{"title":"Collected articles - Week of Jun 10, 2017"}},"id":"5dab99c3-721a-59f7-beff-42c74f619842"}},
    "staticQueryHashes": ["3816294676"]}