affective design

Exploring Emotional Design

The User Experience Iceberg

Jesse James Garrett’s Elements of User Experience is a great illustration of the components required to create engaging and rewarding experiences. But, it can be too much information for clients to fully comprehend during a quick presentation. The analogy of The User Experience Iceberg is a great way to help your clients realize that visual design is only the “tip” of the iceberg.

The Elements of User Experience

Clients with a lower level of design maturity have a tendency to focus exclusively on the Surface layer, the visual design (look and feel). This is natural, since it’s the most immediately processed emotional level of the user experience.

But the relationship between the user and the product is like the relationship between the user and another person. That relationship begins with a sensory input and evolves over time.

The user encounters the other person, usually by seeing and/or hearing them. If initial judgments based on appearance are positive (meaning pleasure or the anticipation of pleasure), the user approaches and the interaction then continues, evolving over time based on the behavior of both actors. This initial judgment is the “first impression”.

Over several interactions, the user characterizes the other person, attributing one or more personality traits. “Bill is a happy guy.” “Sarah is insecure.” etc. In the case of user experience, the user also characterizes the personality of the interface or product by how it interacts and behaves.

The Elements of User Experience is a great model for addressing the three emotional levels of Sensory, Interaction/Behavior and Personality. It’s natural and unconscious that the visual design of a product or interface should command the lion’s share of attention, just as appearance does in human to human interaction.

But when the User Experience Iceberg is used to add context to the Elements, it illuminates the dark, unknown depths for project stakeholders who are new to UX. Because in the end, the unseen elements of user experience are the parts of the iceberg that will sink your project, while your stakeholders are busy focusing on the “tip”.

You can view the UX Iceberg slides below and download the UX Iceberg slides from Slideshare to add to your UX presentations.

UPDATE: The idea for the UX Iceberg came up in a conversation I had with Vance Blackburn about communicating the importance of user experience. After using the illustration with a client and writing this post, I discovered that Peter Morville had used this analogy back in 2000, calling it the Iceberg of IA.

For more on Design for Emotion Models, see:
Understanding Design for Emotion Models

Subscribe via email or RSS for more on emotion and design.

< < Back to affective design

Be Sociable, Share!
19 comments

19 Comments so far

  1. Sergio Sánchez Mancha January 28th, 2008 8:27 am

    El iceberg de la experiencia de usuario…

    El diagrama de los elementos de la experiencia de usuario de Jesse James Garrett es un gráfico muy utilizado para transmitir al cliente las etapas necesarias en un proyecto al definir una interfaz. Pero a nivel conceptual puede ser demasiada……

  2. Victor Lombardi February 5th, 2008 12:53 pm

    Very nice Trevor! I like how you used an object from nature to illustrate the concept, it’s very powerful, and becomes even more powerful the way you expose it in the slides (consider embedding the slides on your blog :).

  3. trevvg February 5th, 2008 2:12 pm

    Thanks Victor! I found that illuminating the underwater bits, along with all the connotations of the “Titanic”, made the UX Iceberg highly affective/effective in illustrating this idea. I’ll look into embedding it. Good suggestion… :-)

  4. Dave Roberts - IBM February 5th, 2008 3:22 pm

    Interesting to see this analogy turn up again. We first used it back in the early 1990s. We published it in the IBM Common User Access books in 1992.

    The structure was different. We talked about only three parts, visible items, interactions, and the user model.

  5. alex james February 7th, 2008 10:04 am

    I disagree I think the Skeleton should encompass the whole iceberg, above and below.

  6. trevvg February 7th, 2008 11:00 am

    Hi Alex,
    I considered the same thing, since items that fall under the “Skeleton” level, like “interface design” are visible. But in this case, the “Surface” level is like the skin. It’s what you see externally. You don’t actually see the skeleton of a person directly, but can definitely make out its shape underneath the surface or skin. Ultimately, I felt this was a better way to communicate the point – that visual design is only the “tip” of the iceberg. So stop focusing ALL your attention there, or the ship (your project) will likely sink!

  7. Paul Blunden June 12th, 2008 2:06 pm

    I think the analogy is nice but wonder if the tip of the iceberg is experience and everything else is “underwater”. I take the point that immature clients focus on visual design but as they mature the bit they will focus on, that ads value to their business is the experience. Perhaps we can educate them a little further on?

  8. [...] 原文链接 [...]

  9. Shao Kelake July 27th, 2008 7:28 pm

    The User Experience Iceberg…

    Jesse James Garrett’s Elements of User Experience is a great illustration of the components required to create engaging and rewarding experiences. But, it can be too much information for clients to fully comprehend during a quick presentation. The an…

  10. [...] Pearce from Poke presented an interesting take on the User Experience Iceberg at the recent Future of Web Design (FOWD) conference in London, [...]

  11. [...] really loved Affective Design’s iceberg analogy to explain the difference between Visual Design and User [...]

  12. [...] Design” er det øverste laget – det folk ser først når de kommer til et nettsted, eller ”toppen av isfjellet”, som det også har blitt omtalt [...]

  13. uxforward » The User Experience Iceberg (f… February 23rd, 2009 10:45 am

    [...] The User Experience Iceberg (from Affective Design) http://www.affectivedesign.org/archives/209 [...]

  14. [...] RT @jessmcmullin: UX iceberg diagram by Trevor van Gorp based on @jjg’s Elements Diagram http://www.affectivedesign.org/archives/209 [...]

  15. [...] como fez Trevor Van Gorp da Affective Design com o UX Iceberg melhorando aquele gráfico (postei no blog da colmeia no ano passado), pra mim [...]

  16. [...] The user experience iceberg Jesse James Garrett’s Elements of User Experience这张图大家应该都再熟悉不过了吧! 但是虽然我们熟悉它, 但是客户能真正的了解吗? The user experience iceberg从另一个角度来讲解UX. [...]

  17. [...] como fez Trevor Van Gorp da Affective Design com o UX Iceberg melhorando aquele gráfico (postei no blog da colmeia no ano passado), pra mim [...]

  18. [...] Design” er det øverste laget – det folk ser først når de kommer til et nettsted, eller ”toppen av isfjellet”, som det også har blitt omtalt [...]

  19. The iceberg | Smarter thoughts… June 18th, 2012 3:31 am

    [...] I came across this very smart representation of the Garrett’s model by Trevor Vangorp, which he calls The UX Iceberg: [...]

Leave a reply