Clicking Fast and Slow

Written by: Paul Matthews

Through social psychology and cognitive science, we now know a great deal about our own frailties in the way that we seek, use, and understand information and data. On the web, user interface design may work to either exacerbate or counteract these biases. This article will give a brief overview of the science then look at possible ways that design and implementation can be employed to support better judgements.

Fast and slow cognitive systems: How we think

If you are even remotely interested in psychology, you should read (if you haven’t already) Daniel Kahneman’s master work “Thinking Fast and Slow.”1 In it, he brings together a mass of findings from his own and others’ research into human psychology.

The central thesis is that there are two distinct cognitive systems: a fast, heuristic-based and parallel system, good at pattern recognition and “gut reaction” judgements, and a slower, serial, and deliberative system which engages more of the processing power of the brain.

We can sometimes be too reliant on the “fast” system, leading us to make errors in distinguishing signal from noise. We may incorrectly accept hypotheses on a topic, and we can be quite bad at  judging probabilities. In some cases we overestimate the extent of our own ability to exert control over events.

The way of the web: What we’re confronted with

We are increasingly accustomed to using socially-oriented web applications, and many social features are high on the requirements lists of new web projects. Because of this, we need to be more aware of the way people use social interface cues and how or when these can support good decision-making. What we do know is that overreliance on some cues may lead to suboptimal outcomes.

Social and informational biases

Work with ecommerce ratings and reviews have noted the “bandwagon” effect, where any item with a large number of reviews tends to be preferred, often when there is little knowledge of where the positive reviews come from.2 A similar phenomenon is the “Matthew” effect (“whoever has, shall be given more”), where items or users with a large number of up-votes will tend to attract more up-votes, regardless of the quality of the item itself.3

Coupled with this is an “authority” effect, when any apparent cue as to authenticity or expertise on the part of the publisher is quickly accepted as a cue to credibility. But users may be poor at distinguishing genuine from phony authority cues, and both types may be overridden by the stronger bandwagon effect.

A further informational bias known as the “filter bubble” phenomenon has been much publicized and can be examined through user behavior or simple link patterns. Studies of linking between partisan political blogs, for instance, may show few links between the blogs of different political parties. The same patterns are true in a host of topic areas. Our very portals into information, such as the first page of a Google search, may only present the most prevalent media view on a topic and lack the balance of alternative but widely-held views.4

Extending credibility and capability through the UI (Correcting for “fast” cognitive bias)

Some interesting projects have started to look at interface “nudges” which may encourage good information practice on the part of the user. One example is the use of real-time usage data (“x other users have been  viewing this for xx seconds”), which may–through harnessing social identity–extend the period with which users interact with an item of content, as there is clear evidence of others’ behavior.

Another finding from interface research is that the way the user’s progress is presented can influence his willingness to entertain different hypotheses or reject currently held hypotheses.5

Screen grab from ConsiderIt showing empty arguments
Screen grab from ConsiderIt showing empty arguments

The mechanism at work here may be similar to that found in a study of the deliberative online application ConsiderIt. Here, there was a suggestion that users will seek balance when their progress is clearly indicated to have neglected a particular side of a debate–human nature abhors an empty box!6

In online reviews, much work is going on to detect and remove spammers and gamers and provide better quality heuristic cues. Amazon now shows verified reviews; any way that the qualification of a reviewer can be validated helps prevent the review count from misleading.

Screen grab showing an Amazon review.
Screen grab showing an Amazon review.

To improve quality in in collaborative filtering systems, it is important to understand that early postings have a temporal advantage. Later postings may be more considered, argued, and evidence-based but fail to make the big time due never gaining collective attention and the early upvotes.

In any sort of collaborative resource, ways to highlight good quality new entries and rapid risers are important, whether this is done algorithmically or through interface cues.  It may also be important to encourage users to contribute to seemingly “old” items, thereby keeping them fresh or taking account of new developments/alternatives. On Stack Overflow, for instance, badges exist to encourage users to contribute to old threads:

Screen grab from Stack Overflow showing a call to action.
Screen grab from Stack Overflow showing a call to action.

 

Designing smarter rather than simpler

We know that well-presented content and organized design makes information appear more credible. Unfortunately, this can also be true when the content itself is of low quality.

Actual interaction time and engagement may increase when information is actually slightly harder to decipher or digest easily. This suggests that simplification of content is not always desirable if we are designing for understanding over and above mere speedy consumption.

Sometimes, perhaps out of the fear of high bounce rates, we might be ignoring the fact that maybe we can afford to lose a percentage of users if those that stick are motivated to really engage with our content. In this case, the level of detail to support this deeper interaction needs to be there.

Familiarity breeds understanding

Transparency about the social and technical mechanics of an interface is very important. “Black boxing” user reputation or content scoring, for instance, makes it hard for us to judge how useful it should be to decision making. Hinting and help can be used to educate users into the mechanics behind the interface. In the Amazon example above, for instance, a verified purchase is defined separately, but not linked to the label in the review itself.

Where there is abuse of a system, users should be able to understand why and how it is happening and undo anything that they may have inadvertently done to invite it. In the case of the “like farming” dark pattern on Facebook, it needed a third party to explain how to undo rogue likes, information that should have been available to all users.

There is already evidence that expert users become more savvy in their judgement through experience. Studies of Twitter profiles have, for instance, noted a “Goldilocks” effect, where excessively high or low follower/following numbers are treated with suspicion, but numbers more in the middle are seen as more convincing.7 Users have come to associate such profiles with more meaningful and valued content.

In conclusion: Do make me think, sometimes

In dealing with information overload, we have evolved a set of useful social and algorithmic interface design patterns. We now need to understand how these can be tweaked or applied more selectively to improve the quality of the user experience and the quality of the interaction outcomes themselves. Where possible, the power of heuristics may be harnessed to guide the user rapidly from a to b. But in some cases, this is undesirable and we should look instead at how to involve some more of the greater deliberative power of the mind.

Do you have examples of interface innovations that are designed either to encourage “slow” engagement and deeper consideration of content, or to improve on the quality of any “fast” heuristic cues? Let me know through the comments.

References

1 Kahneman D. Thinking, fast and slow. 1st ed. New York: Farrar, Straus and Giroux; 2011.

2 Sundar SS, Xu Q, Oeldorf-Hirsch A. Authority vs. peer: how interface cues influence users. CHI New York, NY, USA: ACM; 2009.

3 Paul SA, Hong L, Chi EH. Who is Authoritative? Understanding Reputation Mechanisms in Quora. 2012 http://arxiv.org/abs/1204.3724.

4 Simpson TW. Evaluating Google as an Epistemic Tool. Metaphilosophy 2012;43(4):426-445.

5 Jianu R, Laidlaw D. An evaluation of how small user interface changes can improve scientists’ analytic strategies. Proceedings of the SIGCHI Conference on Human Factors in Computing Systems New York, NY, USA: ACM; 2012.

6 Kriplean T, Morgan J, Freelon,D., Borning,A., Bennett L. Supporting Reflective Public Thought with ConsiderIt. CSCW 2012; 2012; .

7 Westerman D, Spence PR, Van Der Heide B. A social network as information: The effect of system generated reports of connectedness on credibility on Twitter. Computers in Human Behavior 2012; 1;28(1):199-206.

Optimizing UI icons for faster recognition

Written by: Alla Kholmatova

What makes an icon a valuable addition to the interface, rather than a mere decorative element? Intuitiveness, aesthetic value, memorability, intercultural perception? While an effective icon would combine many of those characteristics, I’d like to focus on one measure–speed of recognition, or how fast a specific icon can be discovered and identified.

In a simple leisure app, the difference in speed of recognition may be too subtle to have any noticeable effect on the overall experience.

This may be different for a complex trading application: The requirements for iconography here are more likely to prioritize speed, since every second spent on processing individual elements can have a significant impact on the effectiveness of the overall interface.

Semiotic theory and structure of signs

User interface, like any language or other communication system, is a construct, made using series of signs. Semiotics, a branch in linguistics that studies signs, defines a sign as being composed of two elements–a signifier (the form which the sign takes) and a signified (the concept it represents).1 A sign is a recognizable combination of a signifier with a particular signified.

The same signifier (form) could stand for a number of different signified (concepts), and multiple signifiers could be used to represent the same concept.2 It is this unique pairing that forms a sign and makes it meaningful in a particular context.

Example of signifier (a traffice sign) vs signified (a photo of an at-grade railroad crossing).
Rail crossing signs

For example, the concept of a railway crossing can be represented in a number of different ways. At the same time, numerous interpretations can be suggested for the railway crossing road sign, by someone unfamiliar with the road sign system.

Based on this relationship between a signifier and signified, and their level of convention (symbolism), signs are classified into three categories:

  • iconic: relate to the concept through resemblance
  • symbolic: relate to the concept through convention, and
  • indexical: relate to the object through causation3

Typically UI icons are symbolic or iconic in nature, and many fall somewhere in between.4

Symbolic signs are often arbitrary and represent a concept in somewhat abstract way (using An icon with a circular arrow. to represent ‘refresh’ function). Their meaning is usually difficult to guess and has to be learned.

Iconic signs, on the other hand, can represent concepts in a more literal way and their meaning can often be guessed using common knowledge (such as An icon with a telephone handset. to represent ‘call’ functionality). Both types can adopt metaphors to enhance understanding.

Iconic versus symbolic

Some time ago I carried out a small icon intuitiveness test on Adobe InDesign and Quark XPress toolbars.5 The test participants, who were using the applications for the first time, were asked to guess the possible meaning of the icons.

I observed an interesting (although hardly surprising) pattern: When people were presented with unfamiliar signs, they usually tried to interpret them as iconic–based on the objects they resemble–and use existing common knowledge to understand them.

For example, the iconic ‘button’ sign An icon with an oval button. in the InDesign toolbar was quickly understood and interpreted by all participants correctly. On the other hand, the ‘Free transform tool’ An icon with a dotted box and an arrowhead. was less successful in terms of its communicative function. The latter is a symbolic sign with indexical features.

For designers, it is obvious that the An icon with a dotted box and an arrowhead. icon is based on the graphical representation of the state that indicates an object has been selected for transformation. However, the people new to the jargon of the application tried to interpret it based on the elements of the sign they were already familiar with. Suggested interpretations included ‘cut rectangular shapes,’ ‘resize,’ ‘select an object by choosing points,’ and ‘select points.’

Naturally, interpreting more abstract (symbolic) icons took significantly longer than iconic signs.

Visual style and speed of recognition

If the icons have the same general shape and denote the same concept, what effect does their visual appearance have on the process of interpretation?

The author of an article recently published on Medium claims that a particular style–line icons–are harder for the brain to process than their solid style equivalents, and can ultimately lead to “cognitive fatigue.”

Setting aside cognitive psychology and theories on how brains process shapes, I wanted to compare the two styles of icons using the semiotic approach6 and some basic user testing.

This time, instead of guessing the meaning of icons, I was reading out the object names (e.g. Camera, Mail) and timing how fast people pointed to an icon that represented that concept.

Two versions, line and filled, of the same icon set were compared.

Icon sets shown to participants.
Icon sets shown to participants.

The participants7 were divided into two groups; each group was given one of the icon styles, initially, before trying the other style. The time taken to find and identify the icons is recorded in the table below.

Group A Group B
Filled Line Line Filled
64.2 28.2 72.6 31.2
63.0 27.6 61.8 26.4
71.4 35.46 60.6 27.6

The icons were in the same position for both rounds of the test, so due to the increased familiarity, the speed of recognition naturally increased for the second style, regardless which style it was.

On average, people who were shown the filled set first discovered the icons in 66.2 seconds, and those who were shown the line set first discovered them in 65 seconds. In the second round, the filled set was complete in 28.4 seconds on average, and the line set took about 30.4 seconds. The average increase in speed for the second part of the test was approximately 36 seconds for both groups.

There was no noticeable difference in speed of recognition for the two styles. So we could suggest that, if an icon is well designed and represents a particular recognizable shape clearly, its style doesn’t have a significant effect on the speed of recognition.8 The more notable difference, however, was in how individual signs relate to the concepts they represent–the relation of signifier to signified in particular signs.

The icons that performed faster in both sets were iconic signs–‘calculator,’ ‘camera,’ ‘mail.’ On the other hand, the icons that seemed to have required a short pause were symbolic: ‘download,’ ‘back,’ ‘copy.’ Even the ‘delete’ icon caused a slight delay in participants’ response.

Interestingly, even though some icons were slightly slower to be recognized, they were not always perceived as being harder to find. When interviewed afterwards, participants classified the ‘delete’ icon as being very easy to find even though it took them slightly longer than some of the others. My guess would be that the reason for it is psychological. We experience a certain satisfaction when discovering the signs we learned well, such as a trash can for ‘delete,’ a floppy disk for ‘save,’ and the like. They are like a secret code, and, feeling pleased with ourselves for learning them, we don’t notice that it took slightly longer to recognize.

The table below summarizes the performance of the individual icons in both sets. The icons with a red outline took slightly longer, on average, to recognize in both sets than the ones outlined in green.

The same icon list as prior, with highlighting showing which were harder or easier to find. (Also discussed in text.)
Icons flagged with relative ease/difficulty of identification.

Other factors

Consistency in the use of terminology for the icon labels and functionality they represent also seemed to impact the speed of recognition. For example, those who were asked to find a ‘clock’ completed the task slightly faster than those who were trying to find a ‘recent or history’ function. In both cases, the function was represented by the same ‘clock’ icon.

Another aspect that could influence speed is proximity of similar shapes, as well as proximity of icons which represent related concepts. For example, both flag and folder icons (top right) are based on a similar size rectangular shape, which may have caused a slight delay in response. Another example is ‘important’ (flag) and ‘favorites’ (star)–they represent similar concepts and could therefore be mistaken for one another, particularly if placed close to each other.

Therefore, it was not the style of the icon set but rather the individual icons in both sets, their shapes, and their position in relation to each other that made the most difference in the speed of recognition in this test.

Guidelines for ‘faster’ icons

It is well known that icons with labels are more effective than icons alone, particularly for the learners of the application. This is expected, since a text label is a direct link that serves to bridge the gap between the signifier and signified.

However, sometimes, for whatever reason, you may need to use icons alone or use hover over tooltips only. You may also need those icons to be discovered and recognized quickly. Here are the guidelines when that’s the case.

Two different icons showing the concept of calculator.

When possible, choose iconic signs that relate to concepts through resemblance, rather than symbolic signs. For example, the ‘calculator’ icon on the left is expected to be discovered and recognized faster than the one on the right.9

Icon showing the classic red, octagonal stop sign.

For crucial concepts that must be understood fast and also for abstract concepts, a combination of word labels and color is more effective than an icon. For example, it’s this combination that allows the ‘stop’ road sign to be recognized quickly.

Placing icons that represent similar concepts close to each other–for example, ‘tasks,’ ‘inbox,’ ‘notifications’–may slow down the recognition of each individual icon in the group.

Terminology used in the user interface should relate to the icon labels as closely as possible. For example, if you are using a flag icon to represent ‘important,’ label it ‘flag as important’ rather than ‘mark as important.’

Above all, when testing the icons, the main focus should be not on the style but rather individual shapes of the icons, how they relate to the concepts they represent, and how they work with each other–visually and conceptually.

Footnotes

1This is the original definition by a Swiss linguist Ferdinand de Saussure. Another well known sign structure was suggested by Charles Peirce.

2In fact, the number of combinations is unlimited–which is known in linguistics as unlimited semiosis.

3Although Peirce’s original classification of signs is much more elaborate.

4This classification is made when comparing the interface icons to each other. In a more general sense, all UI icons are essentially iconic signs.

5The test was part of my BA dissertation based on a comparative semiotic analysis of the two interfaces.

6A semiotic approach views an interface as a medium of communication which operates through a form of metalanguage. All elements are seen as encoded signs and all operations represent communicative processes between the designer and the user of the system. The semiotic approach is not an alternative but rather complementary to the user-centred approach. While the choice of signs in the user-centred approach is mainly determined by empirical studies (the sign is considered to be successful when it is recognised by a statistically significant number of users), semiotics aim to provide a theoretical basis to explain the phenomenon of user-centeredness and direct the designer towards the correct choice of signification systems amongst all of the possible signifiers. A book by C. de Souza provides a great insight into the semiotic approach.

7Six people took part in the test (thanks to my brave and adventurous colleagues). While the number of participants was too low to make any definite conclusions, it helped to see the general pattern in interpreting the icons.

8It may be worth mentioning that two of the participants found the full set “easier on the eye.” While this could be the case, it could also be due to the their better familiarity with the solid style. Four other participants did not notice the difference between the two styles, and only mentioned that one was ‘black’ while the other was ‘white’ which they didn’t see as notably different.

9Note: This is based on my assumptions and observations of testing similar icons; those particular examples have not been verified by user testing.

References

Andersen, P. B. 1990. A Theory of Computer Semiotics. Cambridge: Cambridge University Press.

Barr, P. 2003. User-Interface Metaphors in Theory and Practice
http://www.pippinbarr.com/academic/Pippin_Barr_MSc_Thesis.pdf

de Souza, C. S., 2004. The Semiotic Engineering of Human-Computer Interaction. Cambridge: The MIT Press.

Eco, U. 1978. A Theory of Semiotics. Bloomington: Indiana University Press.

Peirce’s Theory of Signs
http://plato.stanford.edu/entries/peirce-semiotics/

Peirce, Eco, and unlimited semiosis
http://courses.logos.it/EN/2_20.html

Peirce, C.S. 1998. The Essential Peirce. Volume 2. Indiana University Press.

Semiotics for beginners
http://www.aber.ac.uk/media/Documents/S4B/semiotic.html

Saussure, F. de. 1983. Course in General Linguistics. London: Duckworth.

Wiedenbeck, S., 1999. The use of icons and labels in an end user application program: an empirical study of learning and retention.
http://portfolio.educ.kent.edu/daltone/cmc2/articles/jp_use%20of%20icon%20labels_wiedenbeck.pdf

Emotional Design with A.C.T. – Part 2

Written by: Trevor van Gorp

Back in Part 1, we looked at how the emotions expressed by people and products communicate personality traits over time. We also learned that customers are attracted to things that have an aesthetic personality that’s similar to their own,1 but they prefer products that take on a complementary role during interaction.2

In Part 2, we’ll look at how relationships are formed when people interact with products over time, and we’ll explore how people experience the emotion of “love.” Then, we’ll examine how basic product goals like desirability, usability, and usefulness relate to the different types of love. Finally, we’ll explore the A.C.T. model, a user-friendly take on using existing frameworks for designing emotional experiences.

Designing relationships

People attribute personalities to products and interfaces and expect those products to interact according to human social rules.3 Our emotional responses to the marketing, purchase, and use of products combine over time to create emotional experiences, which further combine to create emotional relationships.4 The quality of these accumulated interactions can mark the beginning (or end) of a “relationship” between the person and the product.

Throughout our lives, we’ve all been exposed to different types of relationships, both personally and through media. We have acquaintances, coworkers, companions, friends, lovers, wives, husbands, and every combination in between. While all these relationships are important, the people we love tend to have a special place in our hearts and minds.

But even amongst those we “love,” there are a number of different relationships. Some relationships are short, passionate flings based solely on attraction or lust. Others, though lacking in physical attraction, are deep, intimate friendships formed through ongoing interaction and conversation. Others are simple marriages of convenience with a firm commitment, but little passion or intimacy.

Although these relationships might seem to be very different, the people involved might still call the emotion they share “love.” This suggests that we’re using a single term to describe what may be several different emotions. Because of this, it can be difficult to come to a mutual understanding of what the word love really means.

Some people, for example, will emphatically say how much they love certain products. But when they say they “love” products, what do they really mean? What exactly is required to feel love for a product? Is it different from the love two people might feel for one another? Is love an appropriate emotion for relationships with products?

We can gain new insights into the formation of human-product relationships by understanding how humans form relationships with one another. Let’s take a look at the different ways people experience the emotion of love to get a better understanding of what it means to “love” a product.

How do I love thee?

Sternberg5 has described human relationships in terms of three forms of love.

Forms of Love

  • Passion (Infatuated Love)
  • Intimacy (Friendship)
  • Commitment (Empty Love)

 Passion, Intimacy, Commitment
Forms of love
(Sternberg, 1988), diagram: (van Gorp, 2009)

Passion

Passion is based on aesthetics. We’re passionately attracted to certain people because of how they look, sound, smell, feel and taste. These aesthetic cues communicate information about health, reproductive fitness, fertility, and social status to potential partners 7 8. We generally evaluate these cues automatically without conscious consideration.

If a relationship had Passion but lacked Intimacy and Commitment, it would be called Infatuated Love, or lust5. This form of love would describe the quick fling or one-night stand. According to Sternberg5, relationships based solely on Passion tend to burn out quickly. We tend to be attracted to people who are about as attractive, wealthy, and educated as ourselves (i.e. those who are similar to us).

Intimacy

Sternberg5 defines Intimacy as Friendship, rather than sexual intimacy. Achieving Intimacy usually requires repeated conversation and interaction over time. You don’t really get to know someone well without spending time together in a variety of situations.

When we engage in conversation with another person, we make both unconscious and conscious evaluations of them. We judge whether our styles of interaction are complementary and comfortable, or similar and conflicting. Does the other person constantly interrupt when you’re talking? Are you always butting heads over who’s in charge? Does he or she give you the amount of respect you feel you deserve?

If all you had with another person was Intimacy, you’d probably be very close friends. However, you’d likely not feel much Passion or sexual attraction. If someone has ever told you that they love you, but aren’t “in love” with you, it’s likely that they were talking about feeling Intimacy without Passion.

Commitment

Commitment is a mutually agreed upon agreement. In marriage, an individual consciously enters into a public contract with another person. Even in long-term relationships outside of marriage, the majority of couples in the western world still commit to an exclusive partnership. And yet, without Passion or Intimacy, Commitment is merely an empty agreement. If the only thing you had with someone was a Commitment, without any Passion or Intimacy, you’d have what Sternberg5 calls “Empty Love.”

Depending on the context, one or more of the three forms of love can occur at different times in a relationship. In the western world, Commitment usually comes after we’ve had a chance to evaluate our levels of Passion and Intimacy. At that point, we’ve hopefully decided whether the other person’s personality is a good fit for our own. In other parts of the world this may not be the case. Arranged marriages are one example of a relationship that begins with Commitment, with the expectation of Passion and Intimacy developing later.

Design goals, types of reactions & triune brain

At this point, you may be wondering how all of this relates to designing emotional experiences that encourage relationships. To start with, we could draw some parallels between the three forms of love and the three categories of product requirements I mentioned in Part 1. Here’s a quick recap:

  • Desirable
  • Usable
  • Useful

(Sanders, 1992)

Useful, Usable, Desirable

Design Goals
adapted from: (Sanders, 1992), image: (van Gorp, 2012)

Discussions of emotional design often focus almost exclusively on the aesthetics or Desirability of a product. However, much like a three-legged stool, the qualities of Usability and Usefulness still need to be there for the product to stand on its own. For software and web applications, all three legs of the stool need to be there to support repeat usage and interaction.

The most primitive part of our brain (i.e. the reptilian brain), is automatic and generates unconscious emotional responses. The part of our brain that we share with mammals and a few other vertebrates (i.e. the mammalian brain), is also largely unconscious and creates our emotional experiences. The most highly evolved part of our brains (i.e. the neomammalian brain), is conscious and is where we form complex emotional relationships. These different levels of brain function can help us understand how relationships develop through small, repeated interactions.

Emotional: Responses, Experiences, Relationships

(Demir, 2008), diagram: (van Gorp & Adams, 2012)

Over time, simple emotional responses from the reptilian brain combine with the processing of social cues from the mammalian brain to form experiences, which combine with our thoughts and emotions from the neomammalian brain to create relationships.

Design goals, types of reactions, and forms of love

Let’s quickly examine how the different types of love relate to designing for emotion. The user is attracted to the product’s aesthetics, triggering the Desire or passion to approach. If the user finds the product Usable and easy to interact with, he or she may begin to feel greater connection or intimacy with the product. If the product then displays its Usefulness by reliably and consistently fulfilling its purpose, trust and commitment can result.

Design Goals, Forms of Love, Product Elements, Types of Reactions

Comparing Models

(Sanders, 1992)(Sternberg, 1988)(Demir, 2008)(McLean, 1990), diagram: (van Gorp & Adams, 2012)

Desirability is connected to product aesthetics. Usability is connected to the quality of interaction, and usefulness is connected to how well the product functions. For complex products, this process repeats itself with each use, continuing over time to form deeper relationships.

The types of love

Just as there are different types of relationships between people, there are different types of relationships between people and products. For products where the context of use is a short relationship (as with a disposable product), focusing on a single type of love (or a single leg of the stool) may be fine. Various combinations of the three forms of love describes many of the common relationships we see in our lives.

Types of love

  • Passion + Intimacy = Romantic Love
  • Passion + Commitment = Fatuous or Illusory Love
  • Intimacy + Commitment = Companionate Love
  • Passion + Intimacy + Commitment = Consummate Love

(Sternberg, 1988)

Ideal Human Relationship model

Types of Love
(Sternberg, 1988), diagram: (van Gorp, 2009)

Passion (Desirable) + Intimacy (Usable) = Romantic Love

When you combine the attraction of passion with the interaction and conversation of intimacy, you get Romantic Love. In human relationships Romantic Love describes physical attraction, along with a sense of deep intimate connection, without any formal commitment.

In relationships with products, we can envision attractive, usable products and services that don’t require long-term investments. Virgin Mobile, for example, offers attractive usable phones with no contractual commitment. The target audience is young and drawn to the idea of not committing to a phone plan. Even the marketing of the page–Why “Go” Beyond Talk?–could be taken as a metaphor for moving to another stage in a relationship.

Virgin Mobile

http://www.virginmobileusa.com/cell-phone-service

Passion (Desirable) + Commitment (Useful) = Illusory love

Combining passion and commitment without any intimacy generally makes a poor foundation for a long-term relationship. This may be why Sternberg5 calls this combination “Fatuous” or Illusory Love. One example of this type of relationship would be a “sugar daddy” style relationship, where one partner is involved purely for passion, and the other is involved purely for commitment and the financial rewards that come with it.

In the world of design, attractive but unusable products are one source of this type of Illusory Love. We may purchase a product, attracted purely by its slick marketing or pleasing visual design, only to find that although it looks good on the surface and functions acceptably, it’s difficult to operate and frustrating to use.

Intimacy (Usable) + Commitment (Useful) = Companionate Love

When we combine Intimacy and Commitment, we get a good companion, hence the label Companionate Love5. This type of human relationship would describe a couple who are not physically attracted to each other, but are friendly and committed.

When we think of Companionate Love in terms of product relationships, we can imagine more utilitarian products. They’re easy to use, reliable, and perform the task for which they were designed. However, they don’t create that spark of attraction and desire, so there’s little passion involved. An example of this type of love would be your favorite hairbrush. This brush might be the one that does such a great job of styling your hair, you don’t need any other brushes. You probably don’t think much about your hairbrush when you’re not around it. But like the loss of an old friend, you may only really appreciate it once it’s gone.

Hairbrush

Passion + Intimacy + Commitment = Consummate Love

Occasionally, human relationships seem to encompass all three forms of love. These relationships have achieved what Sternberg5 calls “all consuming” or Consummate Love. The people involved are passionately attracted to one another, have a deep intimate friendship, and a strong abiding commitment.

In human-product relationships, if a product has achieved trust by communicating a clear and consistent personality over repeated interactions, the user may be willing to consciously Commit and engage in transactions with the product. Transactions that lead to the formation of relationships leave us practically and emotionally satisfied in the long term. For interactive products that are used repeatedly, Consummate Love is what we are seeking to elicit from our users.

Designing relationships with A.C.T.

The A.C.T. model embodies the different forms of love, and can help you envision product development as a process of building relationships with users. The terms in the acronym A.C.T. were chosen to help designers understand the requirements they need to fulfill at each stage: Attract, Converse, Transact.

A.C.T. explores the relationship between Sternberg’s levels of love (passion, intimacy, and commitment) and product requirements to produce a model that is both more prescriptive for designers and more communicative for business stakeholders.

Ideal Product Relationship
A.C.T. Model

(van Gorp, 2009)

Let’s quickly summarize the perspectives embodied in the A.C.T.

Attract

  • Desirability (do users find the aesthetics appealing?)
  • Aesthetic properties of the product (i.e. look, sound, smell, touch, and taste)
  • Passion
  • Unconscious, automatic responses
  • Reptilian brain

Converse

  • Usability (i.e. ease of use)
  • How the product interacts with the user
  • Intimacy
  • Unconscious and conscious experiences
  • Mammalian brain

Transact

  • Usefulness
  • Whether the product fulfills its function
  • Commitment
  • Conscious relationships
  • Neomammalian (human) brain

A.C.T. Model

A.C.T. Model Comparison

adapted from: (Sanders, 1992)(Sternberg, 1988)(Demir, 2008)(McLean, 1990), diagram: (van Gorp & Adams, 2012)

Conclusions

We judge products by the personalities we sense through their aesthetics and style of interaction. It takes the skill and sensitivity of designers, marketers and user experience professionals to properly identify the personality that appeals to their target audience, and then consistently design, market, advertise and package that product with the appropriate personality in mind. The A.C.T. Model can help practitioners to more fully and systematically address the requirements that lead to successful products.

To explore this idea in depth, Edie Adams and I have written a book on creating better relationships between people and products. If you’re interested in learning more about emotional design, designing personality and the A.C.T. Model, pick up a copy of Design for Emotion. The book includes over 130 images and examples, interviews with industry experts, and case studies to help you do a better job of designing for emotion, personality and relationship. You can also get a free copy of Chapter 1 of Design for Emotion here.

– Portions of this post are excerpts from Design for Emotion, by Trevor van Gorp and Edie Adams –

References

Govers, P. C. M., & Schoormans, J. P. L. (2005). “Product personality and its influence on consumer preference”. Journal of Consumer Marketing, 22(4), 189–197.

Markey, P. M., & Markey, C. N. (2007). “Romantic ideals, romantic obtainment, and relationship experiences: The complementarity of interpersonal traits among romantic partners”. Journal of Social and Personal Relationships, 24(4), 517–533.

Reeves, B., & Nass, C. (1998). The media equation: How people treat computers, television and new media like real people and places. Cambridge: Cambridge University Press.

Demîr, E. (2008). “The Field of Design and Emotion: Concepts, Arguments, Tools and Current Issues”. METU JFA, 1(1), 135.

Sternberg, R. J. (1988). The Triangle of Love: Intimacy, Passion, Commitment. New York: Basic Books.

van Gorp, Trevor. (2009). Emotional Design with A.C.T. Poster: 2010 IA Summit. Phoenix, AZ.

7Buss, David. (2003). The Evolution of Desire: Strategies of Human Mating. New York: Basic Books.

Etcoff, N. (2000). Survival of the Prettiest: The Science of Beauty. Anchor Books.

Sanders, E. B. N. (1992, Fall). “Converging perspectives: Product development research for the 1990s”. Design Management Journal, 3(4), 49–54.

10 van Gorp, Trevor, & Adams, E. (2012). Design for Emotion. Boston: Morgan Kaufmann/Elsevier.

11 McLean, P. D. (1990). The triune brain in evolution: Role in paleocerebral functions. New York: Plenum Press.

In Defense of Floppy Disks: The Vocabulary of the Interface

Written by: Lis Pardi

I work on interfaces used by college students to search for academic articles. Librarians buy these databases. Librarians happen to be wonderful clients to build products for because they always let you know what they don’t like.

A few years ago, my department started hearing complaints about the “save” icon on our interface. The librarians were concerned that, since college students had never seen floppy disks, they wouldn’t know what the icon meant. In the next round of user testing, we dutifully asked college students if they understood the “save” icon–they did–and if they’d prefer a different icon–they didn’t. So we left it at that.

But librarians are a naturally curious and skeptical people and one round of qualitative research would not satisfy them. I needed 100 people to say I was right. So I conducted a survey to find out if people understood the meaning of the icon, and whether they could identify the symbol represented in the icon–the icon’s origin. I got 224 respondents, ranging from elementary school children to art professors. But I was only concerned with the college students, so I narrowed my results to the 131 people who selected the 18-25 age range. And I figured if I was going to ask them about one icon, I might as well ask them about 11 icons.

The save icon

Save icon
Save designed by Cris Dobbins, from The Noun Project

96% of respondents knew that the square icon with the notch cut out of the top right represented a floppy disk (one person guessed that it was an SD card, which was wonderful because that also represents file storage). If I’d asked only about the icon’s meaning, I would have declared this an unequivocal win. However, I also asked people to tell me what the icon meant on a computer or phone. Around 80% said it represented save. The rest of the answers were in the ballpark of save functionality (storage, memory, files, dark matter) but I had expected every single person to respond with “save.” Apparently one exasperated survey taker had the same assumption because they wrote, “Seriously, I’m only 20, but young people aren’t THAT blind to old tech.”

“Seriously, I’m only 20…” (pdf)

Clear origins, cloudy meanings

Magnifying glass icon
Magnifying Glass designed by Hafizh from The Noun Project
Pencil icon
Pencil designed by Blake Thompson from The Noun Project

Two icons represented objects that were common enough to be identified, but their meanings were not clear. The magnifying glass and pencil illustrations were obvious, but both have been used for many different functions on interfaces. The magnifying glass went roughly 80/20 for search/zoom. The pencil was split among many good answers, such as compose, write, draw, highlight, note and edit. Their high recognition shows that they’re still good to use and likely identifiable in context.

More confusing icons

Contact icon
Contact designed by Johan H. W. Basberg from The Noun Project

When I constructed the survey, I threw in some easy icons that were recognized by everyone (envelope, telephone handset, trash can), but I also put in a couple just to stump people. These were icons for voicemail and contacts as represented by an abstracted reel-to-reel and a Rolodex card, respectively. In both cases, the guesses for what object the icon represented were across the board (some guesses for the voicemail icon included “opera glasses,” “googly eyes,” “two circles connected by a line,” and “I have no fucking clue.”) The surprising result was that, despite not being able to pick a Rolodex card out of a lineup, 80% knew that the icon meant contacts.

Voicemail icon
Voicemail from The Noun Project

It was not such a clear win for the Voicemail icon (52% got it correct), but it may be that a less frequently encountered icon is harder to recognize out of context. When I showed the survey to a 40-year-old coworker, he couldn’t figure out what the icon represented either. Then I had him take out his phone. And right there in the status bar was the icon showing that he had unheard voicemails.

Link icon
Link designed by David Waschbüsch from The Noun Project

The chain link icon, used to represent links, fared the worst of all. Around 60% knew that it was a picture of a chain, but only 45% said it was used for linking. Many thought it was a paperclip, for attaching, and 25% didn’t even attempt to guess what it represented on a computer.

Now what?

My research shows that there’s definitely some confusion around the meaning of most of these icons. But I’m advocating their continued use because basing them in real-life objects makes them familiar to some users, if not all. Ultimately, the most important thing is to have icons that make it clear to as many people as possible what they do in the interface. It’s better to have 80% of users see the floppy disk, dig back into their memories of childhood technology and connect to this image as representing the act of saving, than have 100% of users see a downward facing arrow and wonder what it means.

We’ve already chosen to stick with familiar imagery in our written language. We talk about “stock tickers” and “diplomatic cables” even though tickers don’t actually tick anymore and none of the diplomatic cables published on WikiLeaks were sent using a telegraph. Our vocabulary has evolved past the objects the words represent and our visual language should do the same. If you disagree, then I challenge you to first stop using the phrase “hang up the phone,” because phones haven’t actually hung in decades.