Joy as Hidden Value. How We Tested Emotional Design In Practice

However, apart from such obvious things like the Colosseum, the Grand Canal in Venice or Tuscan hills, there’s one thing without which this south European country wouldn’t be the same – industrial design from the early 70s.

That specific time in design history has made a huge impact on the style and shape of today’s appliances, building a strong foundation for the term "emotional design".

What does this term actually mean and how can we use the emotionally-oriented approach when working with IT products? A couple of months ago we had a chance to verify it. The results appeared to be quite intriguing…

Iconic Olivetti's human-centered typewriter

We need tools to work. Nowadays, in most cases, all we need to perform our duties properly are laptops and smartphones. Accountants no longer use physical ledgers, while music producers more and more often, instead of taking music lessons and polishing the traditional craft, invest in new samples and add-ons for beat-making applications. But it wasn’t always like this – before the PC era, office work tended to be a real struggle.

Tools like typewriters (which were basically invented in order to make the process more efficient) also caused some non-obvious problems. Unwieldiness, failing font mechanisms, and the noisy clattering emitted by multiple typewriters working at the same time made the overall experience irritating and tiring. There was a lot of room for improvements.

Olivetti’s team knew about it very well. They understood the technology needed to be human-centered and that it should make daily work more… enjoyable.

One of the first products that represented this idea was actually… a typewriter named "Praxis 48". Designers responsible for that product decided to enrich it with a kind of hidden joy-value by creating non-standard green keyboard covered with a pleasing-to-the-touch fabric.

Praxis 48, source: https://oztypewriter.blogspot.com

Over the years, we’ve seen many great products that have been designed while keeping in mind the 'joy-as-a-value’ approach. The ‘Olivetti’ typewriter, the iconic iMac G3 or the Alessi lemon squeezer… All of them appeared to be milestones on the road to "emotional design".

Emotional design in practice

Some time ago, I worked on a website for a financial product together with an amazing team of people. Our aim was to prepare branding materials and a responsive web layout enriched with a couple of high-quality visuals and animated icons. Roughly estimating – around 2 months of work for 2 product designers. You may think – quick and easy project. Not really...

During the kick-off meeting, our client showed us a couple of benchmarks he found which perfectly depicted the answers to his business needs. We analyzed them thoroughly and especially one appeared to be very intriguing.

It was a colorful webpage with plenty of smoothly animated flat icons reflecting the meaning of the offered features and terms. The thing our client liked the most was the way the icons were moving inside oval backgrounds while hovering the cursor over them. In fact, the transition itself was very smooth but what really struck us… it was satisfying as hell.

Every single animation on the website, including UI animations, appeared to be tailored to bring joy and emotional pleasure to the eyes of prospective clients. Was it just a pure coincidence? I don’t think so. We decided to use a similar strategy and pay attention to the emotional aspect of our product.

Three aspects appealing to user's decision-making process: the color theme, forms of visual elements, UI animations.

User’s visceral decision-making process

In our case, there were 3 very important aspects in terms of the user’s visceral decision-making process:

• A. The color theme of the brand.
• B. Basic forms and characteristics of visual elements, like illustrations or icons.
• C. UI animations and microinteractions.

When we were starting the design phase we already knew which direction we should follow to meet our client’s expectations from point A and B.

Backgrounds filled with blueish gradients and abstract geometrical shapes, geometric fonts, subtle roundnesses of buttons and text components. Basically, It was clear from the very beginning.

But what about point C? Despite the fact that we had a really strong benchmark, the product we were working on was quite different. Apart from that, we didn’t have any exact animation specifications or ready-to-go parameters that would serve as the code-base for the micro-interactions or UI animations.

We had to create every single transition from scratch, generate the code and, what’s the most relevant, we also decided to test them for possible emotional feedback. We aimed to be 100% sure that the transitions or UI animations we’re providing are satisfying and bring a touch of joy to the general visual and interactive experience.

So did we approach it?

Being familiar with Don Norman’s emotional design theory, we decided to construct our custom emotional design test pattern and validate the effects of our work inside the team involved in building the product. Surprisingly, the results appeared to be very interesting and convinced us that thanks to testing users’ emotions we are able to obtain tangible and reliable results which in consequence leads to the best possible end-code passed to the front-end development team.

So what did the test look like?

Special diagram of emotions created by Netguru for testing sessions

For the purpose of the test, we created a special diagram of emotions which aimed to help users specify the emotions they felt while participating in the test. It would be a lie to say that the method itself was somehow groundbreaking – our main inspiration was the Microsoft Reaction Card, a well-known method for measuring the desirability of a product.

The innovation was the way the chart was been depicted. Referring to the Ekmans’ Atlas of Emotions and the fact that most of the population are visualizers who use emojis and stickers on day-to-day basis, designing the diagram in a more ’self-explanatory’ way seemed to make sense and theoretically guaranteed more intuition-based results.

The diagram is split into two parts. On the left side, which is represented by red, testers can find the 5 most common negative emotions, like anger, hate, fear, disgust, and sadness.

On the left side, 5 positive emotions are distributed around the green half of the shape. It’s also worth mentioning that the diagram allowed us to verify the intensity of a given emotion (the further from the center, the less intensive the emotional feedback) and collect personal comments, mainly due to the fact that we chose Invision as the testing platform.

Structure of the test

The test itself was based on three steps. Referring to Don Norman’s theory, which holds that our product-related preferences stem from the threefold nature of brain’s physiology, we split the test into 3 parts:

• visceral, which aimed to gather pure intuitive feedback;
• behavioral, giving us information about whether the given micro interaction / UI animation is natural enough and fits the context;
• reflective, during which the user had to think about the product and the offered solution as a whole.

Splitting the test into three phases provided us with a pretty wide spectrum of answers and allowed us to weigh the pros and cons of issues like microinteractions and UI animations. Practice makes perfect, doesn’t it?

Three parts of tests: visceral, behavioral, reflective.

Testing sessions

Because of the time pressure and experimental character of the test, we weren’t able to prepare real-life clickable prototypes using a tool such as Framer. In every case, our main tool was After Effects which, surprisingly, appeared to be a perfect match – every single iteration didn’t take a lot of time and the add-ons we use on a day-to-day basis provided clear and easy to implement source development code.

All of the animations prepared for testing sessions were distributed on artboards with a relevant part of the webpage as the background. That was really important because results received during such specific tests may depend on the visual context.

As I mentioned before, the test was split into three parts. At the start of the process, testers participating in the procedure had to watch the animation and pin an empty comment into a place on the diagram accordingly to the type and intensity of their subjective feeling.

A few moments later they got some information that might help them understand the purpose of a given animation and their task was to take a stance on the usefulness and correctness of the analysis’ object. During the third phase the testers were familiarised with a set of general information related to the product’s category, but also with the use-case context.

These were things like: are we planning to use similar animations nearby (to the one that was tested) or what’s the device and resolution most likely preferred by end users.

Giving testers a broad context allowed them to understand and reflect on the product as a coherent whole but also to predict possible obstacles which weren't obvious within the ideation and animation process.

Lessons learnt

• Prototyping microinteractions as screens transitions or pop-up menus using JavaScript-based solutions such as Framer seems to be the most beneficial approach. It’s especially important when the emotional feedback emerges from an animation’s predictability and the action itself is triggered by the user. Basing on the no-users-action-needed videos exported directly from After Effect, the results remain partly theoretical. Testers should be engaged, however mastering `coffeescript` to the level that allows creating outstanding microinteractions / UI animations may be not worth the amount of time spent on it.
• Animating bigger components such as drawers requires more attention. Transitions like sliding in and out can’t just be reversed equivalents. It’s good to set custom easing parameters (or use some add-ons like Flow for AE) and polish them until shining.
• Seemingly not-so-important aspects such as speed and easings may have real impact on users’ feelings. Conducting a similar test in another project we noticed that subtle refinement in the pace of the preloader animation was able to change the users’ feelings from anger to enjoyment.

Summing up

Some time ago I heard a nice sentence – ‘process is not a procedure’. It's just a simple play-of-words-like statement, but in the context of emotional design it has a real deep meaning.

The design process itself in some cases reminds me of a standard typewriter. It allows us to optimize and standardize our actions but, at the end of the day, it's just a tool like many others. The true essence of our job as product designers is solving problems – that's why we should experiment as much as it's possible.

Finding custom solutions, remodeling existing ones, and thinking out-of-the-box in general, is almost like tapping on the green keys of a metaphorical process-powered typewriter. There's one difference though. Apart from joy and satisfaction it also brings... tangible results.