small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="http://ift.tt/2oGZADM">UX Planet &mdash; Medium</a> | Nick Babich <img alt="" src="http://ift.tt/2oUyULT"></p>
<h4>by <a href="http://babich.biz">Nick Babich</a></h4>
<p>Human computer interaction and user experience design have always relied on analogies and metaphors to bring attention to technology’s features and affordances. While analogies and metaphors are closely related, it’s smart to understand the differences. The distinctions among metaphors and analogies will also help to underscore why you may want to use one and not the other in certain situations.</p>
<h3>Metaphor</h3>
<p>Metaphor is about using something <em>from another space</em> to referring to something you actually designing.</p>
<h4>Do: Make the unfamiliar familiar (Desktop metaphor)</h4>
<p>Metaphors help us explain something new and unfamiliar in terms of the familiar. The most famous metaphor in human computer interaction and user experience design is Alan Kay’s “desktop metaphor”. The desktop metaphor moved us from command line commands to direct manipulation with digitally rendered objects.</p>
<p><img alt="" src="http://ift.tt/2oH0a4B"><em>The original 1984 Mac OS desktop that popularized the new graphical user interface.</em></p>
<h4>Do: Awake positive associations (Apple iMac)</h4>
<p>With metaphors you can trigger emotions. When Apple designed a second generation of iMac, Steve Jobs and Johny Ive were walking though the garden and trying to image what the next generation would look like. Steve noticed a sunflower and suggested that the second generation should look like a sunflower. If you look at the picture below, you notice the way the screen can be maneuvered (the way it can be tilt) makes it look like a sunflower.</p>
<p><img alt="" src="http://ift.tt/2oUyViV">Using a metaphor of a sunflower makes an iMac feel more human.</p>
<h4><strong>Do: </strong>Persuade people <strong>(Pinterest)</strong></h4>
<p>If you offer a product that is unlike anything out there, you may need to describe it at least partly in terms of something customers already understand. Pinterest, which reached 10 million users faster than any other social networking site, revolves around the metaphor of a pin board. Users “pin” photos they find on the web and organize them into topical collections. This metaphor actually foster creative thinking.</p>
<p><img alt="" src="http://ift.tt/2oGYWq2"></p>
<h4>Don’t: Simplistically literal metaphor (Microsoft Clippy)</h4>
<p>Picking a design metaphor is really hard. There is always a possibility to pick a design metaphor that can go terribly wrong. And we all know a bad metaphor can lead one astray. Microsoft Clippy was one of them. Clippy is famous for being one of the worst user interfaces ever deployed to the mass public. It turned out to be one of the most unpopular features ever introduced. Clippy reminds us that if we make metaphors too real, if we take them too far, they can become troublesome.</p>
<p><img alt="" src="http://ift.tt/2oUkMm9">Microsoft Clippy was annoying animated paperclip that popped-up in the corner of the screen in Microsoft Word and completely distract your flow.</p>
<h4>Don’t: Blindly mimic a real-world precedent (Apple iBooks)</h4>
<p>Apple’s iBooks is a prime example of that. iBooks used a bookshelf design, complete with 3D shelves and wood textures. The bookshelf metaphor was intended to help users transfer previous knowledge about bookshelves (as a place to store and organize physical media) to the digital environment. The shelves and wood textures are irrelevant to the app’s functionality but were supposed to reinforce the metaphor. Apple later removed the skeuomorphic bookshelf design from the UI.</p>
<p><img alt="" src="http://ift.tt/2oH6M31">Apple iBooks use a familiar and understandable metaphor of a pine-wood bookshelf to give the user an understanding of what is being shown and to be able to relate to it.</p>
<h3>Analogues</h3>
<p>Analogy is comparing two things of partial similarity often from <em>the same category</em>. The difference between analogy and metaphor is that metaphor is often reference something outside of the category.</p>
<h4>Do: Seeing the familiar in a different light (Nest)</h4>
<p>Human beings continually and naturally draw analogies as a way of making sense of the world. Analogies help us see the familiar in a new light, which in turn, enables us to generate novel solutions to problems. One good example is Nest which is using analogy in its thermostat design. Basically, the design is referring to the original Honeywell thermostat: its round and you can rotate it to configure your temperature. Nest could choose from a merative other ways to actually present its functionality, but they’ve choose this one. This made Nest thermostat look “<a href="http://ift.tt/2aIosnE">strangely familiar</a>.”</p>
<p><img alt="" src="http://ift.tt/2oH6Ob9">Honeywell’s original, iconic round thermostat (left) and Nest thermostat (right). Novel technologies, all described in terms of something comfortably familiar.</p>
<h4>Do: Help people understand new concepts (Facebook)</h4>
<p>Our minds constantly, unconsciously compare new concepts to things we already know, as a way of understanding them. We look for similarities between our past experiences and any new situation to help us understand the new products. Before there was Facebook, the social media juggernaut which is changing how we communicate — and might change the face of media — there was MySpace. MySpace was targeted at the same audience and was to market long before Facebook. But there was a huge problem with MySpace — profile pages looked a bit odd for many users. Also MySpace allowed users to customize their profile. The final result of this you can see in example below.</p>
<p><img alt="" src="http://ift.tt/2oU5mhK">A typical MySpace profile page</p>
<p>Facebook took quite orthogonal approach. It used an analogy with printed student profiles. Since many people had an experience with this type of data, this made Facebook very understandable and friendly for the majority of users.</p>
<p><img alt="" src="http://ift.tt/2oH3QTK">Facebook used an analogy with a physical profile page for user digital profile.</p>
<h3>Conclusion</h3>
<p>Using symbols like metaphors and analogies for conveying meaning simplifies what you want to say. Metaphor and analogies aren’t just useful tools for educating and assisting users, they are an alchemy that transforms usable content into richly influential content and good products into great products.</p>
<p>Thank you!</p>
<p><em>Follow UX Planet: </em><a href="https://twitter.com/101babich"><em>Twitter</em></a><em> | </em><a href="http://ift.tt/1rBot0L"><em>Facebook</em></a></p>
<p><em>Originally published at </em><a href="http://ift.tt/2ozrAZy"><em>babich.biz</em></a></p>
<p><img src="http://ift.tt/2oUqaW3" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="http://ift.tt/2pejIfv">Metaphors and Analogies in Product Design</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Metaphors and Analogies in Product Design

Metaphors and Analogies in Product Design

by Nick Babich

Top Stories