Nikos Pappas • Crafting Impactful Digital Experiences
Nikos Pappas • Digital Product & Service Designer

Notebook

This digital notebook is about documenting interesting ideas, opinions and findings around user and customer experience, product design, strategy, processes and tools.

Posts in Product Design
The role of visual in product design

Quite commonly people ask me: isn’t it better to make something usable instead of just fancy? Should we focus on visual or usability. Well, these two go hand in hand in product design, to be honest.

Recently Jonny Czar, currently product designer at N26, wrote an article on the matter that explains brilliantly The power of visual in product design - https://uxdesign.cc/@jonnyczar. I’ll summarize the key takeaways for you (and for myself) in the next few lines:

0. It’s in our DNA

The first reason comes from our DNA. Eric Jensen, in his book Brain Based Learning, shows that 40% of the brain nerves are connected to the retina; more neurons are devoted to vision than all the other senses combined, and probably 90% of everything that comes to our mind is triggered by visual stimuli. In addition, recent studies show that approximately 65% of the population are visual learners, preferring to study and engage with information when linked to visual elements.

1. It speeds up data perception

It happens very fast. According to a study by S.Thorpe, D.Fize and C. Marlot called The processing speed in the human visual system, it takes only 150 milliseconds for the brain to process an image and another 100 milliseconds to understand its meaning.

A recent study of 60 participants (Icon recognition speed in interactions in digital interfaces) reviled that that icons illustrating real objects were more recognizable than symbolic and subjective icons (e.g. using a clock to represent the alarm icon - see image below).

2. People can retain visual data for much longer

In a study by Roger Shepard called Learning 10000 pictures, it was shown that an audience exposed to 612 images for about 6 seconds achieved a 98% hit rate when asked to remember them in two-alternative tests. Compared with similar tests to remember words and short sentences, the rate drops to 88%.

3. It triggers pleasure

When our mind reaches a quick understanding by being exposed to a small cognitive effort, our body reacts positively, triggering a sense of pleasure. This is what’s shown by a study called “Mind at ease puts a smile on the face” by researchers Piotr Winkielman and John T. Cacioppo.

4. It guides attention

Eye-tracking studies show that readers pay more attention to information loaded with visual elements.
They spend even more time looking at them than reading the text itself when images are relevant (see example below).

5. It makes it universal

Lastly, icons, colors, illustrations, and other types of visual components in the interface can make an app or website more accessible, especially when it’s used by people from different countries.

Thus, we can say that the use of icons improves overall comprehension. In addition, images push the boundaries of perception for people who are affected by text recognition disorders, such as dyslexia, have difficulty reading or who can’t read.

_

Source: The power of visual in product design

#productdesign #visual

10-year challenge: Is Minimalism and Content-driven design the current trend?

“As the #10yearchallenge is making its way around the internet, I thought I would look at how some of the most visited websites on the internet have aged over the last 10 years,” Carrot’s co-founder Arun Venkatesan explains in this: https://www.arun.is/blog/10-year-challenge/ nostalgic article about the evolution of various websites over the last decade.

Going through Arun’s article made me realize that content-driven design, with focus on visual elements like images and videos, and minimalism have become the mainstream thing in design and for a good reason: they bring order to chaos of the information available on each page.

Enjoy the extended collection of popular sites’ transformation that Arun has posted on his personal website (https://www.arun.is/blog/10-year-challenge/) below:

What good design is: Dieter Rams’ 10 principles


At some point is his life Dieter Rams once asked himself an important question: is my design good design?

To determine that, he came up with 10 principles that define what good design means. Nowadays, this principles are also known as “The 10 commandments” in design circles.

“I summarized my [design] philosophy in 10 points, and I’m actually very surprised that people today, especially students, still accept them. I didn’t intend these 10 points to be set in stone forever. They were actually meant to mutate with time and to change. But apparently things have not changed greatly in the past 50 years. So even nowadays, they are still accepted” he explains.

These 10 points include the following “Good design is” statements:

  1. Good design is innovative.

  2. Good design makes a product useful.

  3. Good design is aesthetic.

  4. Good design helps a product to be understood.

  5. Good design is unobtrusive.

  6. Good design is honest.

  7. Good design is durable.

  8. Good design is consistent to the last detail.

  9. Good design is environmentally friendly.

  10. Good design is as little design as possible.

I was reminded of these principles by a great documentary released recently about Rams’ life in selected theaters across the globe, and that the rest of us can now watch a on Vimeo.

You can watch (paid streaming) the full documentary on following link: https://vimeo.com/ondemand/ramsfilm

A scene from "Rams", Gary Hustwit's new documentary about legendary designer Dieter Rams, with original music by Brian Eno. Motion graphics by Trollback & Co. Watch the full film now on Vimeo On Demand: https://vimeo.com/ondemand/ramsfilm More info, trailer, or to pre-order the book/disc edition: http://hustwit.com/rams

The art of persuasion & the role of Scarcity

In 1984, Dr. Robert B. Cialdini wrote a book called “Influence: The Psychology of Persuasion.” Since then, it’s been widely hailed as a seminal book on marketing, something everyone who’s doing product development should read.

The book is quite revealing, as it is effective in outlining the various tactics used to affect people through influence and persuasion. In this book, Cialdini also reveals for first time the Six Principles of Persuasion (Reciprocity, Commitment & Consistency, Social Proof, Liking, Authority & Scarcity), a collection of very effective “shortcuts” that someone could employ in order to persuade individuals or groups.

Over the years, these tactics have found their way into digital interfaces too.

Source: https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a - by  David Teodorescu

Source: https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a - by David Teodorescu

David Teodorescu wrote really interesting article reviewing the use of Scarcity on the modern web.

“It [Scarcity] makes things desirable. Scarcity is the psychological bias that makes us place a higher value on things that are scarce than those in abundance. Basically, we tend to like things that are harder to obtain,” he writes in order to explain Scarcity effect. ”You know how it works,” he continues. “Casually watching a review on Unbox Therapy about this mug that apparently is unspillable. I’m having a laugh but by the end of the video I’m also intrigued what people ask for it. There it is on Amazon! On sale at $14.99 from $24.99. For a limited time only. Only 3 left in stock for the stainless steel version. It’s a bargain and it will soon be gone,” he explains.

Then, he analyses some real cases of use:

Lightning Deals on Amazon: Good

They last a few hours and show the deadline. They are accompanied by the percentage claimed by other people to highlight the urgency.

Source: https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a - by  David Teodorescu

Source: https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a - by David Teodorescu

Courses on Interaction Design Foundation: Smart

Present the time until enrolment ends. Fully booked courses are still displayed to show people what it’s like to miss the opportunity.

Source: https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a - by  David Teodorescu

Source: https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a - by David Teodorescu

Buying things on eBay: Bad

Time limited products are marked with a red icon and a vague “Almost gone” tag. Not showing when the offer ends is unthoughtful and manipulative.

Source: https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a - by  David Teodorescu

Source: https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a - by David Teodorescu

He continues with even more examples on his article “Scarcity in UX: The psychological bias that became the norm” that you can find at the following link: https://uxdesign.cc/scarcity-in-ux-the-psychological-bias-that-became-the-norm-3e666b749a9a

Right before summing his article up, Teodorescu highlights the following paragraph:

”Some might argue that this forces them to make a decision, but as long as the numbers are real, what’s the alternative? Isn’t the sense of regret or frustration caused by us failing to tell them about the scarce product in time just as bad? Aren’t we offering an awful user experience if that happens? Rushing people into making a decision seems rather fair as long as we’re presenting them the facts.

Then, he ends the article with some interesting DOs and DON’Ts, for who are interesting in keeping a balance between a fair, ethical and sincere use of this tactic:

”Below are some suggestions for making the best out of scarcity and actually improve the UX:

DO:

  • use scarcity to increase perceived value and expedite conversions

  • use time scarcity to promote products that are time sensitive

  • use quantity scarcity to make people aware of stock shortages

  • use access scarcity to highlight the advantages of the restricted features

  • use A/B testing to test what scarcity message works best for your audience

  • use usability testing to test the impact of messages on credibility and trust

  • use animated elements to emphasise urgency (e.g. showing a glowing red icon to highlight the real-time status)

DON’T:

  • do not use scarcity without testing it first with users

  • do not use scarcity if stocks are not reliable

  • do not use scarcity if the messages are not bug free

  • do not use fake numbers to create artificially scarce products”

_

#artofpersuasion #scarcity #cialdini #productdesign

Designer's toolkit 2018

What were the most popular product design tools in 2018?
Which tools (if any) do digital designers use for handoff?
What tools are designers most excited to try in 2019?
And many other questions answered by 2,775 designers from all over the world in an extensive survey about product design tools from uxtools.co: https://uxtools.co/survey-2018

_

Read the full report on:
https://uxtools.co/survey-2018
#uxtools #tools #designtools #product design

Modality: The UX Concept That Most Designers Don’t Fully Understand
  1. “Use Modal Screens for self-contained processes, use Non-Modal Screens for everything else.

  2. Use Modal Screens for critical information that requires a specific user task, decision, or acknowledgement.

  3. Try to minimize the use of modality. Generally, people prefer to interact with apps in nonlinear ways. Consider creating a modal context only when it’s critical to get someone’s attention, when a task must be completed or abandoned to continue using the app, or to save important data. “

_

Intrigued? Read the full article by Fabian Sebastian at the following link:
https://uxplanet.org/modality-the-one-ux-concept-you-need-to-understand-when-designing-intuitive-user-interfaces-e5e941c7acb1

Barry Katz on [Product/Service] Design

“High quality of design, and I mean that in the sense not just of how a product looks or even just how a product works but the entire emotional valance of using product from beginning to end, is now a condition of entry into the market. It's the competitive difference and the competitive advantage that functionally similar products will have.”

_

Originally posted on YouTube at the following link:
https://www.youtube.com/watch?v=cB43c3o18Tk

#productdesign #customerexperience #servicedesign

To be strategic

How to be strategic” by Julie Zhuo is one of the best essays I’ve ever read on product strategy.

According to Zhuo these 3 things are the “secret sauce” of being strategic:

  1. Create alignment around what wild success looks like.

  2. Understand which problem you’re looking to solve for which group of people.

  3. Prioritize. And cut.

_

The full post is well worth a read.
Find it at the following link: https://medium.com/@joulee/how-to-be-strategic-f6630a44f86b

#productdevelopment #productdesign #productmanagement #strategicthinking #strategicdesign

Product image galleries break out of the carousel
Nike Pages.gif

“There is simply no comparison between scrolling through six lovely images and seeing the product from every angle, and clicking staccato-like through a series of tiny thumbnails in a left hand side carousel.

The new Nike product page is all about showing off that trainer. Adidas is no disgrace, this thumbnail carousel is pretty much the default for all ecommerce product pages. Nike used to use it, too (check it out here).

Where the new imagery layout really comes into its own is where autoplaying video is part of the image tiling. Here’s an example (I’ve only captured a very short loop of the video, it is actually much longer).” (Ref: Why Nike’s refreshed product pages improve CX (& beat Adidas) | By Ben Davis • March 4th 2018)

And this is how “video is not anymore a single explainer video on top of your home page. This is how video became a continuum embedded in the customer journey. Go to any other website, app, or social feed from one of the digital unicorns and the use of video transcends the typical boundaries. You see motion graphics interacting with content; delightful micro-narratives explaining key featuresanimation merging with UI elements; even self-generated videos incorporating real-time data.” (Ref: Move over, UX. A new movement is here | Yann Lhomme  •  Jul 26, 2018)

_

Read more on: https://econsultancy.com/why-nike-s-refreshed-product-pages-improve-cx-beat-adidas/ & https://www.invisionapp.com/inside-design/video-experience-vx

People are creatures of Emotion
how people think.png

"When dealing with people, let us remember we are not dealing with creatures of logic. We are dealing with creatures of emotion, creatures bustling with prejudices and motivated by pride and vanity"
 - Dale Carnegie

#productdesign
_

Found in an article by Eugen Eşanu, Designer & Founder of Laroche.co and host of Laroche.fm
Read more at the following link https://uxplanet.org/product-design-expectations-vs-reality-2e5b24473dc5

The collaboration gap
Airbnb's DLS

"Technology companies are expected to move at an incredible pace, and building software is complex. Add ever growing teams to the mix and you often end up with disjointed experiences. This has led us to try to better understand how multiple teams can efficiently collaborate to build great, cohesive software.

Software design has unfortunately not evolved at a similar pace. The gap between designers and engineers has only increased. Design teams can often struggle to reach a cadence that balances the creative process and cycles of continuous innovation. Quality suffers, the experience becomes less cohesive, and talented people spend an inordinate amount of time simply managing communication across disciplines."

Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.

This led Airbnb to the development of its new Design Language System (or DLS), as well as a suite of internal and third-party tools that allow Airbnb's teams to not only work smarter, but also closer. The DLS is a collection of components defined by shared principles and patterns. This allows for rapid iteration using a shared vocabulary across design, engineering, and other disciplines. The structure of the DLS is simple and coherent, easing communication across teams.

Christopher Alexander, who wrote the seminal The Timeless Way of Building, states that “when language is shared, the individual patterns in the language are profound.” For this to happen, these patterns need to be fundamentally simple. “Nothing which is not simple and direct can survive the slow transmission from person to person.

So Airbnb's DLS focuses on common ingredients that follow Airbnb's core design principles: unified, universal, iconic, and conversational. Universal and Unified define the system’s approach we apply when defining patterns. Is it part of a greater whole? Does it work across devices? Iconic and Conversational help define the character of the system — its unique human qualities that tie back to Airbnb's community and brand values."

#designsystems
_

Read more on https://airbnb.design/the-way-we-build/
An article by Alex Schleife, VP of Design at Airbnb