{"id":7136,"date":"2017-03-14T17:26:35","date_gmt":"2017-03-14T17:26:35","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=7136"},"modified":"2020-11-12T13:20:26","modified_gmt":"2020-11-12T13:20:26","slug":"build-honest-uis","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/build-honest-uis\/","title":{"rendered":"How to Build Honest UIs"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can build the best product in the world, but if nobody knows it exists can it really be the best? Getting discovered can be as important as creating a great product nowadays. This has lead to many startups creating products the other way round: instead of \u2018<em>build it, and they will come<\/em>\u2019, it's become: \u2018<em>go to where they are, and build it\u2019<\/em>.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"You can build the best product in the world, but if nobody knows it exists can it really be the best?\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A great way to do this is to \u2018piggyback\u2019 top of an existing product or platform. For example, Paypal <em>piggybacked<\/em> eBay, and Buffer grew through Twitter. In fact, lots of businesses have been built upon larger platforms\u2014 from Chrome plugins to Facebook games and Slack integrations:<\/p>\n<div id='gallery-1' class='gallery galleryid-7136 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/appsplatforms.png'><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"580\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/appsplatforms.png\" class=\"attachment-full size-full\" alt=\"\" aria-describedby=\"gallery-1-7354\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/appsplatforms.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/appsplatforms-600x218.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/appsplatforms-768x278.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/appsplatforms-1500x544.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-7354'>\n\t\t\t\tApps &#038; Platforms\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/thinkgrowth.org\/building-on-slack-saved-our-startup-94953fdaf27a#.nrsav21o5\">Andy Cook<\/a> summarises how valuable this growth tactic can be in his article \u201cBuilding on Slack Saved our Startup\u201d:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">If you\u2019re early enough to a platform and build on top of it right, hopefully eventually you\u2019ll grow big enough to become a platform yourself.<\/span><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">How user experience can be affected<\/h3>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whilst it\u2019s a great growth tactic, it can also lead to large changes to the user experience of the established platform. For example, Google Adblock totally removes adds from a browser, changing the experience of reading on the web\u2014 this may be good for some people, but not for others:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div id=\"attachment_7201\" style=\"width: 510px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/blocker.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7201\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/blocker.png\" alt=\"Add Blocker Plus (Image: Add Blocker Plus on Chrome Library)\" width=\"500\" class=\"size-full wp-image-7201\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/blocker.png 832w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/blocker-600x279.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/blocker-768x357.png 768w\" sizes=\"(max-width: 832px) 100vw, 832px\" \/><\/a><p id=\"caption-attachment-7201\" class=\"wp-caption-text\">Add Blocker Plus (Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/chrome.google.com\/webstore\/detail\/adblock-plus\/cfhdojbkjhnklbpkdaibdccddilifddb\">Add Blocker Plus on Chrome Library<\/a>)<\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Smaller products may even take advantage of a large platform\u2019s network, introducing unethical design practices which can create breeding grounds for dark design patterns. There are many in-betweens, and unanswered questions on ethical approaches to building products on top of established ones, so this is what we\u2019ll explore in this article.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">What we'll cover:<\/h3>\n<section class=\"long-post-content\">\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"c-silver lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"#part1\">Part 1: Building Upon a Platform Ethically: <\/a><\/strong> Examples of how to build your app on top of an established platform in an ethical manner.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part2\">Part 2: Avoiding Dark Patterns: <\/a><\/strong> Sometimes a UI can trick users into spamming their friends\u2014 here's how to avoid that.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#part3\">Part 3: Ethical Design in Add-on Products: <\/a><\/strong> Google Chrome is a huge platform for developers to add extra functionality\u2014 in this part, we'll explore ethical approaches to creating such add-ons.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"#conclusion\">Conclusion: Work Together to Make Better Products: <\/a><\/strong> To wrap up, we'll see how working together is the best way to build better tools and products.<\/li>\n<\/ul>\n<\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><svg id=\"part1\" class=\"centered display-block marginTop-xl fill-slate\"width=\"48px\" height=\"4px\" viewBox=\"0 0 48 4\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"> <defs><\/defs> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Group-7\" transform=\"translate(1.000000, 1.000000)\" stroke=\"#3B4859\" fill=\"#3B4859\"> <circle id=\"Oval-2\" cx=\"1\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"23\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"45\" cy=\"1\" r=\"1\"><\/circle> <\/g> <\/g><\/svg><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\"><span class=\"marginTop-xl display-block c-slate fontSize-xxl lineHeight-xxl breakPointM-fontSize-xxxl breakPointM-lineHeight-xxxl breakPointL-fontSize-xxxxl breakPointL-lineHeight-xxxxl fontWeight-5\">Part 1: Building Upon a Platform Ethically<\/span><\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Piggybacking <\/em>is a term introduced by <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/platformthinkinglabs.com\/about\/sangeet-choudary\/\">Sangeet Paul Choudary<\/a>, best-selling author of the books \u2018Platform Revolution\u2019 and \u2018Platform Scale\u2019. He coined it as such since it gives the smaller company the chance to access the large user base of an established platform, and then grow through it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div id=\"attachment_7171\" style=\"width: 510px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-jYiGl2trONqM1kr6VxK8_Q-1.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7171\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-jYiGl2trONqM1kr6VxK8_Q-1.png\" alt=\"Piggybacking concept &quot;Udy and Emmy&quot; by Pablo Stanley\" width=\"500\" class=\"size-full wp-image-7171\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-jYiGl2trONqM1kr6VxK8_Q-1.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-jYiGl2trONqM1kr6VxK8_Q-1-600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-jYiGl2trONqM1kr6VxK8_Q-1-768x576.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-7171\" class=\"wp-caption-text\">Piggybacking concept \"Udy and Emmy\" by <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/shots\/2636519-Udy-and-Emmy-Piggyback\">Pablo Stanley<\/a><\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s most ethical and<em> useful<\/em> when the relationship is mutually beneficial. Both parties should add value to each other, whilst, maybe most importantly, creating a better product\/service for the end user.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Startups can piggyback on established platforms, & grow through their user base.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Let\u2019s take a look at a couple examples to see how it can be done well:<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">1. Paperbot + Slack ???? ????<\/h2>\n<div id=\"attachment_7187\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-e69nQaEGCgvhCWq74Oeq-w.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7187\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-e69nQaEGCgvhCWq74Oeq-w.png\" alt=\"Paperbot for Slack (Image: Paperbot.ai\" width=\"1600\" height=\"1029\" class=\"size-full wp-image-7187\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-e69nQaEGCgvhCWq74Oeq-w.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-e69nQaEGCgvhCWq74Oeq-w-600x386.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-e69nQaEGCgvhCWq74Oeq-w-768x494.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-e69nQaEGCgvhCWq74Oeq-w-1500x965.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-7187\" class=\"wp-caption-text\">Paperbot for Slack (Image: <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/paperbot.ai\">Paperbot.ai<\/a>)<\/p><\/div>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cBoth apps should bring value to each other, whilst creating a better product\/service for the end user.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A cool recent example is Paperbot\u2019s Slack integration. Paperbot is a useful tool for designers\u2014 it creates a \u2018Pinterest-like\u2019 board for inspiration, straight from links shared in your Slack channels. Users can even search through curated links:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-vD1OkeAIL_JA5v7Rb_IUJw.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-7190\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-vD1OkeAIL_JA5v7Rb_IUJw.png\" alt=\"1-vd1okeail_ja5v7rb_iujw\" width=\"1141\" height=\"487\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-vD1OkeAIL_JA5v7Rb_IUJw.png 1141w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-vD1OkeAIL_JA5v7Rb_IUJw-600x256.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-vD1OkeAIL_JA5v7Rb_IUJw-768x328.png 768w\" sizes=\"auto, (max-width: 1141px) 100vw, 1141px\" \/><\/a><p class=\"wp-caption-text\">Paperbot for Slack (Image: <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/paperbot.ai\">Paperbot.ai<\/a>)<\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s a good approach to building a product upon existing platform because it creates a win for absolutely <em>everyone<\/em> involved, <em>including<\/em> the end user:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Paperbot wins by reaching Slack\u2019s huge user base.<\/li>\n<li>Slack wins by becoming even more useful (cool links don\u2019t get lost).<\/li>\n<li>The end users win as they gain a curated list of content based on their team\u2019s interest ????<\/li>\n<\/ul>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"http:\/\/paperbot.ai\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Paperbot \u2014 Get it here<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">PaperBot organizes all links shared on Slack so you can focus on enjoying them.<\/span><\/span><\/span><\/a><\/section>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">2. Upscribe + Medium ????<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Another recent example is the Medium and Upscribe relationship. Medium is a large content platform, holding a huge network of writers. This network provides a great opportunity for smaller \u2018add-on\u2019 services to grow within the platform, that enable writers and readers gain more value.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Upscribe, provide this extra value by offering \u201c<em>Embeddable newsletter sign up forms for Medium<\/em>\u201d. Essentially, Upscribe enables writers to collect readers\u2019 email addresses through a form embedded <em>within<\/em> their articles, like this:<\/p>\n<div id=\"attachment_7187\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-nxBcgPgccpxsWNUKNu8RLQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7187\" class=\"aligncenter size-full wp-image-7193\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-nxBcgPgccpxsWNUKNu8RLQ.png\" alt=\"1-nxbcgpgccpxswnuknu8rlq\" width=\"1600\" height=\"870\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-nxBcgPgccpxsWNUKNu8RLQ.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-nxBcgPgccpxsWNUKNu8RLQ-600x326.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-nxBcgPgccpxsWNUKNu8RLQ-768x418.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-nxBcgPgccpxsWNUKNu8RLQ-1500x816.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-7187\" class=\"wp-caption-text\">Upscribe for Medium (Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.producthunt.com\/posts\/upscribe\">Upscribe on Product Hunt<\/a>)<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Just like Paperbot for Slack, this relationship creates value for everyone:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Upscribe gain access to Medium\u2019s huge network of users.<\/li>\n<li>Medium get a better way for users to subscribe to newsletters.<\/li>\n<li>Writers and publishers can gain value <em>outside<\/em> of Medium ????<\/li>\n<\/ul>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/upscri.be\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Upscribe \u2014 Get it here<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Newsletter Signup Forms for Medium. Build one in a couple clicks. Just paste the link in your Medium story and press enter!<\/span><\/span><\/span><\/a><\/section>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Ethicalness Depends on Context<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Looking at the examples above, despite both having similar outcomes, they do so in quite different ways:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\"><em>Paperbot <\/em>use existing features<em> of Slack\u2019s platform, whereas Upscribe <\/em>introduce a completely new feature<em> on Medium\u2019s platform.<\/em><\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The difference here shows just how much context can play a role in determining ethicalness, especially in the case of Medium:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Upscribe bring a large change to Medium, enabling users to gain value <em>outside<\/em> the platform.<\/li>\n<li>If Medium hadn\u2019t supported this themselves, debates on how ethical this use of their platform could have arisen.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Thinking forwards, what happens if the smaller product is able to abuse the large platform\u2019s network by using features in ways they weren\u2019t intended? Let\u2019s explore this next.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cWhen large platforms are very open, they become easier to access, and therefore take advantage of.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><svg id=\"part2\" class=\"centered display-block marginTop-xl fill-slate\"width=\"48px\" height=\"4px\" viewBox=\"0 0 48 4\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"> <defs><\/defs> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Group-7\" transform=\"translate(1.000000, 1.000000)\" stroke=\"#3B4859\" fill=\"#3B4859\"> <circle id=\"Oval-2\" cx=\"1\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"23\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"45\" cy=\"1\" r=\"1\"><\/circle> <\/g> <\/g><\/svg><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\"><span class=\"marginTop-xl display-block c-slate fontSize-xxl lineHeight-xxl breakPointM-fontSize-xxxl breakPointM-lineHeight-xxxl breakPointL-fontSize-xxxxl breakPointL-lineHeight-xxxxl fontWeight-5\">Part 2: Avoiding Dark Patterns<\/span><\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When large platforms are very open, they become easier to access, and therefore take advantage of. For instance, did you ever see these Candy Crush notifications on Facebook?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1m4NcmM_YKPKK_anr-MjNIA.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1m4NcmM_YKPKK_anr-MjNIA.png\" alt=\"1m4NcmM_YKPKK_anr-MjNIA\" width=\"425\" height=\"164\" class=\"aligncenter size-full wp-image-7145\" \/><\/a><p class=\"wp-caption-text\">Candy Crush Notifications<\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Well that happened mainly because of this:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-zLgpHDAzbr2_E-Xyp8I7uw.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-zLgpHDAzbr2_E-Xyp8I7uw.png\" alt=\"1-zlgphdazbr2_e-xyp8i7uw\" width=\"1452\" height=\"1120\" class=\"aligncenter size-full wp-image-7224\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-zLgpHDAzbr2_E-Xyp8I7uw.png 1452w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-zLgpHDAzbr2_E-Xyp8I7uw-600x463.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-zLgpHDAzbr2_E-Xyp8I7uw-768x592.png 768w\" sizes=\"auto, (max-width: 1452px) 100vw, 1452px\" \/><\/a><p class=\"wp-caption-text\">Candy Crush 'Ask Friends' Screen<\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u2026which probably lead to this, and lots of tears ????:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/16WDz-nx-rc8UTpdZANjLCQ.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/16WDz-nx-rc8UTpdZANjLCQ.gif\" alt=\"16WDz-nx-rc8UTpdZANjLCQ\" width=\"500\" height=\"169\" class=\"aligncenter size-full wp-image-7147\" \/><\/a><p class=\"wp-caption-text\">Facebook remove friend<\/p><\/div><\/center><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Friend Spam<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The mechanics and UI of Candy Crush encourage players to invite their friends just to continue playing. In doing so, Candy Crush (intentionally or unintentionally) takes advantage of Facebook\u2019s friend network, also leading to \u2018aggressive use of notifications\u2019. It\u2019s a behaviour can show shades of the dark design pattern, \u2018<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/darkpatterns.org\/types-of-dark-pattern\/friend-spam\">friend spam<\/a>\u2019.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">Dark Patterns are tricks used in websites and apps that make you buy or sign up for things that you didn\u2019t mean to. (Harry Brignull, creator of Darkpatterns.org)<\/span><br \/>\nTo ensure we design ethically upon another platform, we can make sure our app design doesn\u2019t cause a change in people\u2019s behaviour, making them do things they wouldn\u2019t normally want to do. Shades of dark design patterns can be unintentional too, so let\u2019s next look at some practical tips on how we can avoid such patterns.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cDoes the design cause a change in behaviour, making people do things they wouldn\u2019t normally do?\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><svg id=\"part1\" class=\"centered display-block marginTop-xl fill-slate\"width=\"48px\" height=\"4px\" viewBox=\"0 0 48 4\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"> <defs><\/defs> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Group-7\" transform=\"translate(1.000000, 1.000000)\" stroke=\"#3B4859\" fill=\"#3B4859\"> <circle id=\"Oval-2\" cx=\"1\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"23\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"45\" cy=\"1\" r=\"1\"><\/circle> <\/g> <\/g><\/svg><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Using Notifications Appropriately<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the case of Candy Crush, it\u2019s either invite your friends, or pay. Given these options, most of us choose the former, cheaper option which causes an increase in the number of notifications\u2014 bordering on being aggressive. Whilst there <em>is<\/em> an intent to send invites, it can be argued that the context of the game encourages it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1JYbMWobpnJ4qLgNhAnnrcA.gif\"><img decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1JYbMWobpnJ4qLgNhAnnrcA.gif\" alt=\"1JYbMWobpnJ4qLgNhAnnrcA\" width=\"400\" class=\"aligncenter size-full wp-image-7148\" \/><\/a><p class=\"wp-caption-text\">Facebook notification<\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Here\u2019s how Facebook dealt with this invitation\/notification overload problem:<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Make it convenient for users to unsubscribe<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Facebook managed to reduce aggressive notifications by attaching a useful action to their notification list elements. The \u2018x\u2019 icon (see below) gives the user an immediate chance to unsubscribe from related notifications\u2014 at the very same point from which they see them:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1D2Eou9PEfmOduqritvnEqA.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1D2Eou9PEfmOduqritvnEqA.png\" alt=\"1D2Eou9PEfmOduqritvnEqA\" width=\"471\" height=\"312\" class=\"aligncenter size-full wp-image-7149\" \/><\/a><p class=\"wp-caption-text\">Facebook remove friend<\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The user does not need to navigate away from the notification, or go into privacy settings\u2014 it can be done in the very same place.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Personalise notifications based on user behaviour<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Instead of causing people to dismiss notifications themselves, a better method could be to ensure the right people get the right message in the first place.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cEnsure the right people get the right message in the first place.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Some Facebook gamers truly <em>want<\/em> to receive game notifications, whereas others see those very same notifications as spam. Therefore, notifications can be made relevant if they\u2019re sent based on user\u2019s activity. Facebook actually took this approach, slowing the flow of notifications based on a user\u2019s gaming activity:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cThere are some tools that are kind of outdated that allow people to send invitations to people who\u2019ve never used a game, who have gotten invitations in the past but don\u2019t play games on Facebook. We hadn\u2019t prioritized shutting that down, we just had other priorities. But if this is the top thing that people care about, we\u2019ll prioritize that and do it.\u201d<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In line with this, only if a user plays Facebook games will they get game notifications, as they\u2019re more likely to want them.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Good notifications are timely, precise, and relevant<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To further ensure your notifications don\u2019t become aggressive, you can make sure they are timely, precise and relevant. Google provide some useful guidelines on effective notifications:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/tpnr.png\"><img decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/tpnr.png\" alt=\"tpnr\" width=\"300\" class=\"aligncenter size-full wp-image-7311\" \/><\/a><\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/engage-and-retain\/push-notifications\/good-notification\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">What Makes a Good Notification?<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">Don't annoy your users, or you'll lose access to them forever. Do we need to say anything more than that?<\/span><\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><svg id=\"part3\" class=\"centered display-block marginTop-xl fill-slate\"width=\"48px\" height=\"4px\" viewBox=\"0 0 48 4\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"> <defs><\/defs> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Group-7\" transform=\"translate(1.000000, 1.000000)\" stroke=\"#3B4859\" fill=\"#3B4859\"> <circle id=\"Oval-2\" cx=\"1\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"23\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"45\" cy=\"1\" r=\"1\"><\/circle> <\/g> <\/g><\/svg><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\"><span class=\"marginTop-xl display-block c-slate fontSize-xxl lineHeight-xxl breakPointM-fontSize-xxxl breakPointM-lineHeight-xxxl breakPointL-fontSize-xxxxl breakPointL-lineHeight-xxxxl fontWeight-5\">Part 3: Ethical Design in Add-on Products<\/span><\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As well as apps on platforms like Facebook, many great examples of \u2018piggybacking-like\u2019 activity are present in Google Chrome extensions, where third party developers can add extra functionality to the browser. This section will take a look at various Chrome extensions: from bookmarking apps like Refind, to spell checkers like Grammarly. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We'll see how we can avoid any shades of dark design, with the most common one being '<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/darkpatterns.org\/types-of-dark-pattern\/disguised-ads\">Disguised Ads<\/a>':<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Disguised Ads<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Smaller products built on established platforms often <em>add<\/em> features to the platform\u2019s interface (like Upscribe + Medium). Sometimes this additional content may actually become disguised to look just like content made by platform itself, showing shades of the dark pattern, \u2018Disguised Adds\u2019, defined as:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">Adverts that are disguised as other kinds of content or navigation, in order to get you to click on them.<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">However it <em>can<\/em> actually be done by accident with the good intention of keeping consistency with the main platform\u2019s UI. To demonstrate this, a Chrome plugin that comes to mind is the bookmarking app, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.refind.com\">Refind<\/a>. Once installed, Refind sits in the browser toolbar, and is used to bookmark web pages with a single click:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-0tEFO8-_6HrHDSolSrFUbQ.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-0tEFO8-_6HrHDSolSrFUbQ.png\" alt=\"1-0tefo8-_6hrhdsolsrfubq\" width=\"1138\" height=\"782\" class=\"aligncenter size-full wp-image-7316\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-0tEFO8-_6HrHDSolSrFUbQ.png 1138w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-0tEFO8-_6HrHDSolSrFUbQ-600x412.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-0tEFO8-_6HrHDSolSrFUbQ-768x528.png 768w\" sizes=\"auto, (max-width: 1138px) 100vw, 1138px\" \/><\/a><p class=\"wp-caption-text\">Refind browser extension (Image: <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/chrome.google.com\/webstore\/detail\/refind\/dlapbpopbcangbnjdhajdlanbfokjaja?hl=en\">Refind on Chrome Library<\/a>)<\/p><\/div><\/center><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cA problem emerges when a product does extra things\u2014 things unexpected by users of the platform.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A problem emerges when the product does <em>extra <\/em>things\u2014 things unexpected by users. Upon installing Refind, it can be a surprise to find your bookmarked pages appearing amongst Google search results, and <em>even<\/em> <em>looking<\/em> <em>just like <\/em>Google search results:<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Avoid Disguising Content<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-0hqPQtj8cKdaVMV5ntYYSQ.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-0hqPQtj8cKdaVMV5ntYYSQ.png\" alt=\"1-0hqpqtj8ckdavmv5ntyysq\" width=\"1600\" height=\"956\" class=\"aligncenter size-full wp-image-7319\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-0hqPQtj8cKdaVMV5ntYYSQ.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-0hqPQtj8cKdaVMV5ntYYSQ-600x359.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-0hqPQtj8cKdaVMV5ntYYSQ-768x459.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-0hqPQtj8cKdaVMV5ntYYSQ-1500x896.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a><p class=\"wp-caption-text\">Refind embedded search result<\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Personally, I actually find these additional results very useful, and sometimes more relevant than the Google search itself. A question here though is whether the feature actually enhances the experience of the search engine, or takes away from it\u2014 and this often depends on individual user preference.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cDoes it enhance a user\u2019s experience of the search engine, or take away from the search engine itself?\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Some may argue against the additional search results as the Refind links look almost exactly the same as Google\u2019s links, but they aren\u2019t in any way from Google (shwoing possible shades of disguised ads).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A couple ways to avoid this are to:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Make embedded content visually different.<\/li>\n<li>Make additional content self-contained (as seen in the next example of Evernote).<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We could also take further steps to improve this scenario such as by: informing the user, asking permission, or making it obvious to remove features\u2014 all of which we\u2019ll explore next.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Make it obvious to remove features<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Providing users a way to easily remove features is a good way of keeping them in control of the platform they\u2019re using. Therefore, as we saw previously in the Facebook notification example,  it\u2019s useful to have a way for people to dismiss features right from where they appear. Refind make it fairly straight forward:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-WrckdP-K5buSx2KbhegzRg.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1258\" height=\"208\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-WrckdP-K5buSx2KbhegzRg.png\" alt=\"1-wrckdp-k5busx2kbhegzrg\" class=\"aligncenter size-full wp-image-7322\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-WrckdP-K5buSx2KbhegzRg.png 1258w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-WrckdP-K5buSx2KbhegzRg-600x99.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-WrckdP-K5buSx2KbhegzRg-768x127.png 768w\" sizes=\"auto, (max-width: 1258px) 100vw, 1258px\" \/><\/a><p class=\"wp-caption-text\">Refind settings link on additional search results<\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You can simply click the settings button, which then allows you to edit all Refind\u2019s permissions. Similar to Refind, Pocket is a bookmarking app which also sneaks content onto your Google pages. They insert content onto the Google search page, but also add a quick way to remove it:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/pocketapp.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/pocketapp.png\" alt=\"pocketapp\" width=\"1695\" height=\"1601\" class=\"aligncenter size-full wp-image-7395\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/pocketapp.png 1695w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/pocketapp-600x567.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/pocketapp-768x725.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/pocketapp-1500x1417.png 1500w\" sizes=\"auto, (max-width: 1695px) 100vw, 1695px\" \/><\/a><p class=\"wp-caption-text\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/getpocket.com\">Pocket<\/a>: Removing trending pocket stories from Google search page<\/p><\/div><\/center><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Inform the user before adding features<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A better way to keep users in control and informed is to <em>ask them<\/em> before adding extra features and content to a platform.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cProvide information about what\u2019s going to happen\u2014 keep the user in the know\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Evernote is a good example, that works similarly to Refind and Pocket. However, before embedding content onto the Google search, they first provide information about what\u2019s going to happen\u2014 keeping the user in the know. A user can also dismiss the feature from the initial \u2018request\u2019:<\/p>\n<div id=\"attachment_7393\" style=\"width: 1858px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/evernote-screens.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7393\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/evernote-screens.png\" alt=\"Evernote \" width=\"1848\" height=\"911\" class=\"size-full wp-image-7393\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/evernote-screens.png 1848w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/evernote-screens-600x296.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/evernote-screens-768x379.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/evernote-screens-1500x739.png 1500w\" sizes=\"auto, (max-width: 1848px) 100vw, 1848px\" \/><\/a><p id=\"caption-attachment-7393\" class=\"wp-caption-text\">Evernote ask for permission<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div id=\"attachment_7157\" style=\"width: 510px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/14g2h-P_K4GouFjAZOEXXEg.gif\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7157\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/14g2h-P_K4GouFjAZOEXXEg.gif\" alt=\"Farewell\" width=\"400\" class=\"size-full wp-image-7157\" \/><\/a><p id=\"caption-attachment-7157\" class=\"wp-caption-text\">Farewell additional features and notifications<\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><svg id=\"part1\" class=\"centered display-block marginTop-xl fill-slate\"width=\"48px\" height=\"4px\" viewBox=\"0 0 48 4\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"> <defs><\/defs> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Group-7\" transform=\"translate(1.000000, 1.000000)\" stroke=\"#3B4859\" fill=\"#3B4859\"> <circle id=\"Oval-2\" cx=\"1\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"23\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"45\" cy=\"1\" r=\"1\"><\/circle> <\/g> <\/g><\/svg><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Make Add-on Content Relevant<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To add features without ruining the existing platform\u2019s user experience, it\u2019s also good to ensure that whatever gets introduced is consistent with the goal of the user in the given context.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cThe design must fit a user's intent in the given context\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Candy Crush achieved this to a certain extent by adding their invite button when a user needed more lives. However, despite being in the right place, it wasn\u2019t right for all users\u2014 it annoyed many people. Let\u2019s have a look at how Buffer have done it, as they have a more ethical approach:<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The content must fit the context<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The Buffer Chrome plugin works really well in combination with Twitter:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>On Twitter, two main user intents are to \u2018<em>retweet\u2019<\/em> (if viewing a tweet), or to simply \u2018<em>tweet<\/em>\u2019 (if writing a tweet).<\/li>\n<li>Buffer adds their own button in <em>both<\/em> these contexts, as it\u2019s the perfect time to add a tweet to your Buffer queue:<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div id=\"attachment_7402\" style=\"width: 606px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/bufferr.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7402\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/bufferr.png\" alt=\"Buffer Button\" width=\"596\" height=\"453\" class=\"size-full wp-image-7402\" \/><\/a><p id=\"caption-attachment-7402\" class=\"wp-caption-text\">Buffer button next to Tweet button<\/p><\/div><\/center><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cIt works well because the action matches the intent of the user.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It works well because the action matches the intent of the user. Furthermore, in accordance with the previous tips, the Buffer button is not disguised in any way\u2014 it\u2019s bright green and says \u2018Buffer\u2019.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Don\u2019t break the user\u2019s natural flow<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Another good example is the Grammarly plugin. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.grammarly.com\">Grammarly<\/a> is proof-reading app that checks your spelling and grammar as you type on the web.<\/p>\n<div id=\"attachment_7385\" style=\"width: 1448px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-15.33.24.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7385\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-15.33.24.png\" alt=\"Grammarly\" width=\"1438\" height=\"532\" class=\"size-full wp-image-7385\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-15.33.24.png 1438w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-15.33.24-600x222.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/Screen-Shot-2017-03-14-at-15.33.24-768x284.png 768w\" sizes=\"auto, (max-width: 1438px) 100vw, 1438px\" \/><\/a><p id=\"caption-attachment-7385\" class=\"wp-caption-text\">Grammarly<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Like Buffer, Grammarly matches the goal of the user and improves the overall platform. It attaches it's grammar-checking features to every text-box you can type in on the web, and gives you hints <em>as you type<\/em>. The timing is key, as the flow of the user isn't disrupted:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div id=\"attachment_7161\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1OoMYKePg85d4A8ioGo95ug.gif\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7161\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1OoMYKePg85d4A8ioGo95ug.gif\" alt=\"Thanks to Grammarly &amp; Facebook, I can share my important thoughts with my friends, whilst spelling really well.\" width=\"600\" height=\"201\" class=\"size-full wp-image-7161\" \/><\/a><p id=\"caption-attachment-7161\" class=\"wp-caption-text\">Thanks to Grammarly &amp; Facebook, I can share my important thoughts with my friends, whilst spelling really well.<\/p><\/div><\/center><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>You don\u2019t have to wait until you\u2019ve finished typing or even press \u2018check\u2019.<\/li>\n<li>Grammarly doesn\u2019t break up the flow of writing.<\/li>\n<\/ul>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cTiming is key\u2014 the user\u2019s flow shouldn\u2019t be disrupted\u201d<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Offer alternatives<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If an add-on doesn\u2019t work the way a user would like, they\u2019ll find a way to delete or remove it as soon as possible. Therefore, it\u2019s useful to offer alternatives. The newsreader app called <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/usepanda.com\/\n\">Panda<\/a>, for example, does this well. Panda is a design inspiration plugin which gives users the latest design news, and changes your \u2018new tab\u2019 page to their website in the process.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is useful to some, but others who prefer to use their 'new tab' page for other apps won\u2019t want the feature. Therefore, Panda provides a solution whereby people can use a \u2018shortcut\u2019 version of their app instead:<\/p>\n<div id=\"attachment_7334\" style=\"width: 1610px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-bVGBJBZzSugR05D5Hub97w.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7334\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-bVGBJBZzSugR05D5Hub97w.png\" alt=\"Shortcut version of Panda\" width=\"1600\" height=\"1296\" class=\"size-full wp-image-7334\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-bVGBJBZzSugR05D5Hub97w.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-bVGBJBZzSugR05D5Hub97w-600x486.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-bVGBJBZzSugR05D5Hub97w-768x622.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-bVGBJBZzSugR05D5Hub97w-1500x1215.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-7334\" class=\"wp-caption-text\">Shortcut version of Panda<\/p><\/div>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\"><\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This option only becomes available upon uninstalling Panda\u2014 maybe offering different flavours of an app from the very start could be a good way to go.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Avoid over-automation<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We\u2019ve mainly looked at Chrome extensions above, as they\u2019re one of the most common and popular ways for apps to reach larger audiences. However, any large platform that offers an API can be an avenue for smaller products to grow.<\/p>\n<div id=\"attachment_7335\" style=\"width: 748px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-DnQNFmDDJvdOxT9NFjMadQ.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7335\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-DnQNFmDDJvdOxT9NFjMadQ.png\" alt=\"Bots on Twitter\" width=\"738\" height=\"416\" class=\"size-full wp-image-7335\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-DnQNFmDDJvdOxT9NFjMadQ.png 738w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-DnQNFmDDJvdOxT9NFjMadQ-600x338.png 600w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><\/a><p id=\"caption-attachment-7335\" class=\"wp-caption-text\">Bots on Twitter<\/p><\/div>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Any large platform that offers an API can be an avenue for smaller products to grow.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, there are many \u2018Bots\u2019 built primarily to grow traffic and engagement on Twitter or Instagram. One bot is  called <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.archie.co\">Archie<\/a>, which \u2018auto-favourites\u2019 tweets based on predefined settings. Here\u2019s how it works:<\/p>\n<div id=\"attachment_7336\" style=\"width: 2010px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-wkvVFwhNC8pHGcOlncLX3A.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-7336\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-wkvVFwhNC8pHGcOlncLX3A.png\" alt=\"Screenshot from Archie.co\" width=\"2000\" height=\"732\" class=\"size-full wp-image-7336\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-wkvVFwhNC8pHGcOlncLX3A.png 2000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-wkvVFwhNC8pHGcOlncLX3A-600x220.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-wkvVFwhNC8pHGcOlncLX3A-768x281.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-wkvVFwhNC8pHGcOlncLX3A-1500x549.png 1500w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/a><p id=\"caption-attachment-7336\" class=\"wp-caption-text\">Screenshot from Archie.co<\/p><\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The question here is whether bots like this could actually be ruining Twitter, the platform the app is built for. For example, this is happening today:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>???????? A bot makes a tweet (e.g. from an RSS feed)<\/li>\n<li>????\u2764\ufe0f Another bot favourites it (using Archie.co)<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This creates both tweets and engagement, and also a bizarre cycle of bots talking to bots. Yes, it\u2019s effective in increasing engagement and stats, but how much of it is real? And does it embrace what social media is really for?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><svg id=\"conclusion\" class=\"centered display-block marginTop-xl fill-slate\"width=\"48px\" height=\"4px\" viewBox=\"0 0 48 4\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"> <defs><\/defs> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Group-7\" transform=\"translate(1.000000, 1.000000)\" stroke=\"#3B4859\" fill=\"#3B4859\"> <circle id=\"Oval-2\" cx=\"1\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"23\" cy=\"1\" r=\"1\"><\/circle> <circle id=\"Oval-2\" cx=\"45\" cy=\"1\" r=\"1\"><\/circle> <\/g> <\/g><\/svg><\/p>\n<h1 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black fontWeight-5 lineHeight-xxl fontSize-xxl breakPointM-lineHeight-xxxl breakPointM-fontSize-xxxl\" style=\"margin-left: auto; margin-right: auto;\">Conclusion: Work Together to Make Better Products<\/h1>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Making your product available and convenient to access for as many people as possible can be key to building a successful product. Additionally, making a platform as easy to <em>build<\/em> <em>upon<\/em> as possible can be great to help it grow even further. <\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"A platform without contributors will get left behind, and a tool without users will never be used\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We\u2019ve <em>even<\/em> seen this with design tools such as Sketch\u2014 it\u2019s almost become a development platform now, which sets it apart from similar vector tools. There are hundreds of plugins popping up, each bringing new features to the platform. You can find many in the <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/sketchtoolbox.com\/\">Sketch Toolbox<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><center><div id=\"attachment_7337\" style=\"width: 460px\" class=\"wp-caption aligncenter\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-bFU0JxFVDVhMaymGXpbNfw.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-7337\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2017\/03\/1-bFU0JxFVDVhMaymGXpbNfw.png\" alt=\"Sketch Toolbox\" width=\"450\" class=\"size-full wp-image-7337\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-bFU0JxFVDVhMaymGXpbNfw.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-bFU0JxFVDVhMaymGXpbNfw-600x153.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-bFU0JxFVDVhMaymGXpbNfw-768x196.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/1-bFU0JxFVDVhMaymGXpbNfw-1500x383.png 1500w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-7337\" class=\"wp-caption-text\">Sketch Toolbox<\/p><\/div><\/center><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">And don\u2019t forget to pick up ours too, we\u2019ve made it possible to play and record Prototypes from within Sketch! Check it out here:<\/p>\n<section class=\"pageWrap pageWrap--s marginBottom-l boxShadow-smoke boxShadow-smoke--xd--hover borderRadius-m transitionDuration-m transitionTimingFunction-ease\"><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvel7077.wpengine.com\/play-record-marvel-prototypes-sketch\/\"><span class=\"display-block padding-m paddingRight-xl position-relative\"><span class=\"display-block padding-xs paddingRight-m\"><span class=\"marginBottom-xs display-block c-slate lineHeight-l fontSize-l fontWeight-5\">Play and record Marvel prototypes in Sketch!<\/span><span class=\"c-slate lineHeight-l fontSize-l fontWeight-3 opacity-80\">The Sketch Plugin has a brand new bag. Or a little more specifically, a new feature that gets you get from A to B\u2026<\/span><\/span><\/span><\/a><\/section>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Overall, there must be some balance between the smaller app and the platform it's built on to maintain a good user experience. It's best when sustained from both sides:<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>The platform being built upon can monitor how the smaller product behaves (like Facebook monitoring Candy Crush notifications).<\/li>\n<li>Smaller products can be designed ethically in regards to the platform they\u2019re building upon (Like Paper Bot built upon Slack).<\/li>\n<\/ol>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"If you're building on a platform, try to make it better than it was before you touched it.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">In the end, a platform without contributors will get left behind, and a tool without users will never be used. So if you are building on a platform, try to make it better than it was before you touched it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can build the best product in the world, but if nobody knows it exists can it really be the best? Getting discovered can be as important as creating a great product nowadays. This has lead to many startups creating products the other way round: instead of \u2018build it, and they will come\u2019, it&#8217;s become: \u2018go to where they are,&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":76,"featured_media":7497,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-7136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build Honest UIs | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"You can build the best product in the world, but if nobody knows it exists can it really be the best? Getting discovered can be as important as creating a great product nowadays. This has lead to many startups creating products the other way round: instead of \u2018build it, and they will come\u2019, it&#039;s become: \u2018go to where they are,... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-14T17:26:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T13:20:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/octothing1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3676\" \/>\n\t<meta property=\"og:image:height\" content=\"3677\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"13 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/03\/octothing1.png\",\"width\":3676,\"height\":3677},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/\",\"name\":\"How to Build Honest UIs | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/#primaryimage\"},\"datePublished\":\"2017-03-14T17:26:35+00:00\",\"dateModified\":\"2020-11-12T13:20:26+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/1337c9c5832cfeda9a5ccf5371d24e19\"},\"headline\":\"How to Build Honest UIs\",\"datePublished\":\"2017-03-14T17:26:35+00:00\",\"dateModified\":\"2020-11-12T13:20:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/build-honest-uis\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/1337c9c5832cfeda9a5ccf5371d24e19\",\"name\":\"Graeme Fulton\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4a29443acaa7dc0b9b9c6698f976168024ca960660df55b8b5661fc52fbb3c92?s=96&d=mm&r=g\",\"caption\":\"Graeme Fulton\"},\"description\":\"Designer, Writer and Developer at Marvel! Say hello on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/7136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=7136"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/7136\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/7497"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=7136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=7136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=7136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}