{"id":124,"date":"2021-03-20T13:14:57","date_gmt":"2021-03-20T20:14:57","guid":{"rendered":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/?p=124"},"modified":"2021-03-21T10:31:43","modified_gmt":"2021-03-21T17:31:43","slug":"task-10-attention-economy-interface-design","status":"publish","type":"post","link":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/2021\/03\/20\/task-10-attention-economy-interface-design\/","title":{"rendered":"Task 10 &#8211; Attention Economy &#038; Interface Design"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">It took me roughly 7 minutes to complete the <\/span><a href=\"https:\/\/userinyerface.com\/\"><span style=\"font-weight: 400;\">User Inyerface<\/span><\/a><span style=\"font-weight: 400;\"> game, and I think about 4 &#8211; 5 of those minutes were spent trying to fulfill the supposed password requirements. I had to conduct a quick search on the meaning of cyrillic characters, and questioned the degree of information privacy I was afforded. Initially, I thought this was just an exceptionally poorly designed website, which raised a red flag for me in terms of what information I should truly divulge. As I progressed through the game, I came to realize this was simply a cleverly designed interface meant to challenge and frustrate internet users by highlighting a multitude of <\/span><a href=\"https:\/\/alistapart.com\/article\/dark-patterns-deception-vs-honesty-in-ui-design\/\"><i><span style=\"font-weight: 400;\">dark patterns<\/span><\/i><\/a><i><span style=\"font-weight: 400;\">.<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">Ultimately, the User Inyerface game by Bagaar is essentially and completely counterintuitive to the ways in which we\u2019ve been (un)consciously trained to understand and utilize the fundamental design conventions within the Internet; basic patterns of recognition like directive buttons that draw your eyes, hyperlinked words and links, checkbox and form-filling functions and webpage symbols\/ images have all been reworked in a way that do not reflect the current accordances of internet functionality. It almost felt like I was sort of learning a new internet language while playing this game. Perhaps more significantly, I was forced to recognize the depth of online marketing strategies and considerations developers need to contemplate when building web spaces and internet interfaces. I certainly won\u2019t be taking the auto-delete function for granted anymore when I need to fill out an online form. With that said, however, the User Inyerface was not attempting to sell anything or truly strive to elicit dark patterns rather than venture to illustrate the degree to which dark patterns can appear within internet interfaces, challenge users to recognize them, and enquire about the importance they have within marketing strategies that influence social and cultural behaviours (Tufekci, 2017).\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The most obvious deception is the giant green button on the first page; it draws your attention away from other page elements, tempting you to click it despite clearly reading \u201cNO\u201d as if satirically indicating it is not the right pathway. The button expands when you hover your cursor over it, implying the button actually does something. The small fine print below the button is written in a different colour font, and reads \u201cPlease <\/span><span style=\"font-weight: 400;\">click<\/span><span style=\"font-weight: 400;\"> HERE to GO to the next page\u201d- I could spend my entire post reflecting just on these 9 words.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-126 aligncenter\" src=\"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.10.45-PM-249x300.png\" alt=\"\" width=\"422\" height=\"508\" srcset=\"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.10.45-PM-249x300.png 249w, https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.10.45-PM-849x1024.png 849w, https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.10.45-PM-768x926.png 768w, https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.10.45-PM.png 1108w\" sizes=\"auto, (max-width: 422px) 100vw, 422px\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">An internet user reads these words, recognizes the <\/span><a href=\"https:\/\/www.darkpatterns.org\/types-of-dark-pattern\"><span style=\"font-weight: 400;\">misdirection<\/span><\/a><span style=\"font-weight: 400;\">, and immediately becomes confused as to where exactly to be clicking. For me, my first instinct was to click on the underlined \u201c<\/span><span style=\"font-weight: 400;\">click<\/span><span style=\"font-weight: 400;\">\u201d particularly because I have come to understand typical hyperlinked words as underlined or shaded in different colours as a means of making a distinction from other text in that line. Of course, that goes nowhere. The next determination I made was to click on the \u201cnext page\u201d text because it was written in a light blue hue. Nothing. Consequently, we are left with the capitalized words \u201cHERE\u201d and \u201cGO\u201d. Both words indicate a direction, but none make it clear where the next pathway leads; turns out we need to literally click HERE. None of these design features adhere to the traditional understanding of effectively navigating the internet.<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-128 aligncenter\" src=\"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.17.01-PM-268x300.png\" alt=\"\" width=\"465\" height=\"521\" srcset=\"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.17.01-PM-268x300.png 268w, https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.17.01-PM-914x1024.png 914w, https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.17.01-PM-768x861.png 768w, https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.17.01-PM.png 1162w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Perhaps the most frustrating aspect for me was the password creation page. Similar to the examples Brignull provides, the Inyerface UI utilizes a number of double negatives meant to confuse users (Brignull, 2011). Things like \u201cI do not accept the Terms and Conditions\u201d and \u201cYour password is not unsafe\u201d plastered in red text gives rise to concern for some users. For me, I noticed this and began continually reworking my password until I somehow met the requirements (It took me a few minutes to decipher that my password being \u2019not unsafe\u2019 was actually a good thing). I absolutely despised the fact that when you click into the form-filling boxes, the text didn\u2019t automatically disappear, and again, the button below labelled \u2018cancel\u2019 plays on the users traditional assumptions that this button is the correct button to use in proceeding to the next page.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-129 aligncenter\" src=\"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.22.01-PM-216x300.png\" alt=\"\" width=\"428\" height=\"594\" srcset=\"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.22.01-PM-216x300.png 216w, https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.22.01-PM-736x1024.png 736w, https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/files\/2021\/03\/Screen-Shot-2021-03-20-at-12.22.01-PM.png 966w\" sizes=\"auto, (max-width: 428px) 100vw, 428px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The user\u2019s interest form is another example of an interface designed to play on the inherent design customs embedded within the traditional understanding of internet navigation. Firstly, the blue button labelled \u201cdownload image\u201d draws the users eyes and implores them to click, but any critical thinker will recognize that we do not need to download, but rather upload an image to proceed. Of course, this is uncharacteristically buried in a hyperlinked text above. Secondarily, the instructions prompt users to select three interests from a list of questionable selections. The twist, of course, is that all the selections are checked off, inclusive of both options providing users the possibility of selecting or deselecting all choices. I couldn\u2019t help but remember a quotation from Brignull here:<\/span><\/p>\n<p style=\"text-align: center;\"><i><span style=\"font-weight: 400;\">Those who ignore both the checkboxes will unknowingly give some marketing permissions, while those who zealously tick both checkboxes will also end up giving some marketing permissions (Brignull, 2011).<\/span><\/i><\/p>\n<p><span style=\"font-weight: 400;\">The last step of the game is the CAPTCHA stage where the interface asks users to select all images pertaining to an incredibly ambiguous word in order to discern whether we are human. I was almost offended at this point &#8211; You want to confirm I\u2019M human when you can\u2019t even design a simple form properly? You can\u2019t adhere to the basic conventions of internet navigation and you are challenging my humanity?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Regardless, \u201cchoose all the images of a bow\u201d could be interpreted as selecting a bow tie, a bow and arrow, or perhaps the action of bowing. \u201cChoose all the images of checks\u201d could manifest itself in check marks, a monetary cheque, or the act of putting your opponent in check while playing chess. All of which turn out to be correct, and in fact, all of which are needed to be selected to succeed in this final task.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consequently, this game is designed to infuriate the user on purpose. It\u2019s meant to highlight the fundamental design aspects needed to be considered when navigating the internet on the most basic level. It challenges users to creatively problem solve when these patterns are not adhered to, and provokes participants to begin recognizing dark patterns in online marketing strategies. For me, it made me begin questioning: How did I learn to use the internet effectively? Who taught me how to navigate? To what degree are internet design aspects responsible for facilitating my unconscious understanding of online navigation?<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Brignull, H. (2011). Dark Patterns: Deception vs. Honesty in UI Design. <\/span><i><span style=\"font-weight: 400;\">Interaction Design, Usability<\/span><\/i><span style=\"font-weight: 400;\">, <\/span><i><span style=\"font-weight: 400;\">338<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Harris, T. (2017). <\/span><i><span style=\"font-weight: 400;\">How a handful of tech companies control billions of minds every day<\/span><\/i><span style=\"font-weight: 400;\">. Retrieved from<\/span><a href=\"https:\/\/www.ted.com\/talks\/tristan_harris_the_manipulative_tricks_tech_companies_use_to_capture_your_attention?language=en\"><span style=\"font-weight: 400;\"> https:\/\/www.ted.com\/talks\/tristan_harris_the_manipulative_tricks_tech_companies_use_to_capture_your_attention?language=en<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">Tufekci, Z. (2017). <\/span><i><span style=\"font-weight: 400;\">We\u2019re building a dystopia just to make people click on ads<\/span><\/i><span style=\"font-weight: 400;\">. Retrieved from<\/span><a href=\"https:\/\/www.ted.com\/talks\/zeynep_tufekci_we_re_building_a_dystopia_just_to_make_people_click_on_ads?language=en\"><span style=\"font-weight: 400;\">\u00a0 <\/span><\/a><a href=\"https:\/\/www.ted.com\/talks\/zeynep_tufekci_we_re_building_a_dystopia_just_to_make_people_click_on_ads?language=en\"><span style=\"font-weight: 400;\">https:\/\/www.ted.com\/talks\/zeynep_tufekci_we_re_building_a_dystopia_just_to_make_people_click_on_ads?language=en<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It took me roughly 7 minutes to complete the User Inyerface game, and I think about 4 &#8211; 5 of those minutes were spent trying to fulfill the supposed password requirements. I had to conduct a quick search on the meaning of cyrillic characters, and questioned the degree of information privacy I was afforded. Initially, &hellip; <a href=\"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/2021\/03\/20\/task-10-attention-economy-interface-design\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Task 10 &#8211; Attention Economy &#038; Interface Design<\/span><\/a><\/p>\n","protected":false},"author":65284,"featured_media":125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tasks"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/posts\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/users\/65284"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":3,"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"predecessor-version":[{"id":131,"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/posts\/124\/revisions\/131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/media\/125"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/etec540techtextthoughts\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}