Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Play, Engagement & Addiction: Semiotics & Digital User Interface Design

Presented by Sarah Johnson of Athena Brand Wisdom at Semiofest 2016 in Tallinn, Estonia.

  • Login to see the comments

Play, Engagement & Addiction: Semiotics & Digital User Interface Design

  1. 1. Play, Engagement & Addiction: Semiotics & Digital User Interface Design Semiofest 2016 - Tallinn, Estonia
  2. 2. Three Opening Thoughts 2 Every user interface can be evaluated by how effectively it communicates. No digital artifact is as culturally situated as a website. All seek to provide information, while at the same time conveying, through imagery, modality & interaction, a representation of culture. The text you write must prove to me that it desires me. Roland Barthes The Pleasure of the Text Everett N. McKay UI is Communication Roxanne M. O’Connell Visualizing Culture
  3. 3. Today’s Marketing Obsession The philosophy du jour is User Experience 3 Persuasion Emotional Involvement User Experience As marketers attempt to find new and improved ways to convince consumers to buy their products, they continually embrace evolving philosophies of how to drive engagement.
  4. 4. UX Defined A Sub-Set of Overall Customer Experience CX Customer Experience UX User Experience Customer Experience (CX) Encompasses all interactions a person has with a brand, across all touch points. User Experience (UX) Is the subset of Customer Experience that is about interactions with a device or product, or - in a digital context, a website, software applications, or app.
  5. 5. Why Is It Growing In every category, it is being recognized as a significant brand differentiator & choice driver. Businesses have now come to recognize that providing a quality user experience is an essential, sustainable competitive advantage. It is user experience that forms the customer’s impression of the company’s offerings, it is user experience that differentiates the company from its competitors, and it is user experience that determines whether your customer will ever come back. Jesse James Garrett Because increasingly there’s an understanding that UX in all contexts profoundly affects brand relationship. 1 2 ?
  6. 6. Central Tenet Of UX Designing for optimal UX means working to reduce the amount of thinking people need to do when using your product, by making things as self- evident as possible. The more people have to stop & think about how to do what they want to do, where to click, where to find things, what things mean, whether something is clickable, etc. the more confidence and user satisfaction, are eroded. 1 2 Making pages self-evident is like having good lighting in a store: it just makes everything seem better. Using a site that doesn’t make us think about unimportant things feels effortless, whereas puzzling over things that don’t matter to us tends to sap our energy & enthusiasm - and time. Steve Krug Author of Don’t Make Me Think Don’t Make Me Think
  7. 7. UX Is Fundamentally About Reducing Ambiguity 7 Ensuring cues for interaction are immediately understood GOAL Guiding viewer’s eye to critical information Conforming to expectations already established by interactions with other websites Avoiding misunderstandings about how to perform a task Providing feedback to assure users the system is working in the way they expect (and doing what they want it to do)
  8. 8. UX Research: Focused On Navigation Considered to be a critical component of design process 8 Primarily concerned with conscious comprehension of cues and directions Focused on barriers to task completion Examines behaviour: how users interact with platforms
  9. 9. Navigation Heuristics Checklist of best practices for facilitating clarity 9 Top and/or left navigation provides links to other areas of your site. Sites that use both top and left navigation should put more general links in top navigation. A Table of Contents at the start of each section lets you easily see if this is the page you need. Links quickly take you to the right spot. Site maps help navigation, and they are a must for accessibility A Search Function that tolerates spelling mistakes is best. Breadcrumbs at the top of the page show where you are now and how you got there. The right navigation contains important information or links. The last updated date tells users how current the information is.
  10. 10. This Means That Design Cues Are Seen As Functional Guides 10 The Role of Colour The Role of Typography – Warm colours tend to advance to the foreground. Cool colours tend to recede, creating a visual hierarchy. – Strong colours create a focal point and are used to highlight most important information. – Colour affects accessibility. Approximately 8% of adults have some form of colour blindness. – Letters that are heavy and larger than the rest of the content are interpreted as entry points... – Large blocks of text that are left justified and evenly spaced are taken to be body content. Sources: UI is communication, Visualizing Culture
  11. 11. “Affordances” Must Provide Clear Guidance 11
  12. 12. “Icons” Must First And Foremost Be Legible 12
  13. 13. They Must Also Be Simple & Standardized Comprehension & Navigation Conventions must be established about “what stands for what” To Facilitate
  14. 14. They Must Also Be Simple & Standardized Comprehension & Navigation Conventions must be established about “what stands for what” To Facilitate
  15. 15. Symbolic Richness Can Be Undesirable A picture is worth a thousand words, unless it’s an icon: instead of icons explaining, icons often require explanation. Everett N. McKay Metaphors, Metonyms & Synecdoches can be difficult to understand. Sources: Everett N. McKay, UI is Communication, 2013; Jeff Raskin, The Humane Interface, 2000
  16. 16. Semiotics Can Facilitate Navigation Semiotic Inspection Method pioneered by Clarisse De Souza as an approach to assessing the communicability of interactive discourse 16 ANALYZES THE SIGNS Used by the designer to convey expectations of how users should interact with the system IDENTIFIES ASSUMPTIONS Made by designer about the user as conveyed through the use of signs ASSESSES How effective signs are at communicating intended meaning Source: De Souza et al, “The Semiotic Inspection Method”, November, 2006
  17. 17. But, There Is More To UX Than Navigation The goal of good UX is not only to allow users to complete tasks but also to feel drawn in and engaged 17 INCREASING MOTIVATION REMOVING FRICTION Usability Psychology Source: Stephen P. Anderson, Seductive Interaction Design, 2011
  18. 18. Frameworks & Principles The Quality Hierarchy Experiences & Emotion MEANINGFUL Has personal significance A memorable experience worth sharing Feels “natural” to use I am able to use it easily It’s Functional & Reliable / Does what it’s supposed to Functional Usable Convenient Pleasurable 18 UX Design Research Tasks Usability Testing MORE ABOUT: INFORMED BY: Adapted from: Stephen P. Anderson, Seductive Interaction Design, 2011
  19. 19. “Attractive Things Work Better” 19 Visual appearance has a positive effect on performance, leading to reduced task completion times for the attractive version. Source: Donald Norman, Emotional Design, 2003
  20. 20. The Critical Importance Of Emotions Of information processing goes on at the emotional (sub-conscious level) 95% Emotions drive decisions, which are then consciously justified by reason
  21. 21. The Role For Semiotics Neuropsychology Tells Us That the emotional aspect of consumer decision-making is driven by non-verbal cues such as imagery, colour and tonality – the province of Semiotics. So, There Is A Role For Semiotics In helping make websites more emotionally compelling to users.
  22. 22. Semiotic Cues Drive Perceptions Of Trust & Efficacy 22 Source: Seductive Interaction Design
  23. 23. Semiotics Help Encode The User Adding meaning to the “User Persona” 23 – User personas create an implied user for whom the interface is intended – UX usually focusses on functional needs – Semiotics can help assess whether the codes deployed reflect the values and culture of the user
  24. 24. Reflecting The User Well or Badly 24 A user who is seeking to reconcile the desire to project traditional masculinity with the use of “feminine” personal care products may find that the codes deployed here resolve his inner tension. If the implied user is a “fighter” who does not see herself as a disease victim, images depicting a paternalistic doctor/patient message are encoding the wrong message.
  25. 25. Reflecting Cultural Contexts Logocentricity vs. Image-Centricity Information Requirements Individualism vs. Collectivism Colour Symbolism
  26. 26. Semiotics Helps Convey The Brand’s Values Ensuring That Intended Messages Are conveyed and identifying any messages that might not be intentional As With Any Form Of Brand Communications, Semiotics can also assess what messages the brand is sending about itself
  27. 27. And Perhaps Most Importantly Semiotics Can Help Create A Sense Of Play & Pleasure 28
  28. 28. Sources Of Pleasure Three Key Qualities Required to Create a Sense of Pleasure in a User Interface 29 CHALLENGE Is there a clear goal in the activity? And is the outcome uncertain enough to tease the user? CURIOSITY Does the activity provide an optimal level of informational complexity? Does the interface use randomness in a way that adds variety without making tools unreliable? FANTASY Does the interface embody emotionally appealing fantasies? Source: Thomas, Malone, Heuristics for Designing Enjoyable User Interfaces: Lessons from Computer Games, 1982
  29. 29. Examples Of Play 30
  30. 30. An Interesting Tension The Celebration of Ambiguity, thus contradicting Navigation’s Imperative of Clarity. Textual Pleasure arises from the pursuit of a mystery: the deferral of meaning that makes the reader want to know more. (Barthes’ Hermeneutic Code) Pleasure & Play Are About
  31. 31. Ambiguity vs. Clarity: The Role For Semiotics 32 Navigation Engagement Removing the wrong kind of challenge to keep users from leaving: – Semiotic Inspection Method to assess how effective signs are at communicating desired interaction. – Standardized Icons with conventional meanings. Seeding the right kind of challenge to keep users progressing deeper into the text: – Rich cultural symbolism that connects deeply with the user. – Playful deferral of meaning to tempt pleasurable interaction.
  32. 32. Conclusions 33 UX IS AT THE HEART Of innovation design and marketing theory today SEMIOTICS HAS THE OPPORTUNITY To assist in both improving usability & increasing user engagement thereby becoming a critical innovation tool UX RESEARCH Is already embraced by the digital community, but tends to focus on the rational domain of “usability” vs. the more emotional aspect of user engagement
  33. 33. An Analysis Thought-Starter 34 Source: Stephen P. Anderson, Seductive Interaction Design, 2011
  34. 34. Thank You! Athena Brand Wisdom Inc. 416-778-4275