Little details

Written on 15 April 2014, 09:20am

Tagged with: , , ,

Since reading Designing for emotion I’ve been paying attention to the emotional component of the web. Most of the times it’s not present, some other times is very visible, and in some cases, it’s hidden. The people at Balsamiq Floris Dekker created – a place where they collect the small, hidden, fascinating details that contribute to a great user experience. One of the latest impressive things I found there is the float label pattern – that changes the placeholder to a label on focus (initial idea from @mds, see demo).

Back to the little big details, I started to see them myself. For now, here are two:

1. Flickr link to jobs page

If you view source you’ll see an ASCII text logo and a link to the flick jobs page: “You’re reading. We’re hiring.

flickr view source

2. Hidden swoosh in dutch football shirt crest

The Netherlands football kit designed by Nike feature a lion crest with the tongue forming a subtle Nike swoosh. The new lion is present on both home and away kits, and the lion head is quite different from the KNVB (Dutch Fooball Federation) logo:

swoosh 1swoosh 2
swoosh 3swoosh 4
swoosh 5

The lion has has been a focal point of the Dutch kits for more than 100 years, appearing in both black and white over the decades. Recently, the KNVB crest had portrayed just the head of the lion with a crown over it. Nike have changed that with a “rampant” lion that is white and enlarged, taking a very prominent spot on the shirt and immediately drawing the viewer’s eye to it.

Web meets brain

Written on 4 March 2013, 03:29pm

Tagged with: , , , ,

In the recent period I read some materials regarding the human brain: how it works, what is it good at, its limitations and its bugs. I am listing here the links to the articles/books, along with a short description.

1. Brain Bugs

Brain Bugs: How the Brain’s Flaws Shape Our Lives, By Dean Buonomano (I also recommend the iTunes audiobook).

The human brain is more beautiful and complex than anything we could ever build but it’s far from perfect. Our memory is unreliable; we can’t multiply large sums in our heads; advertising manipulates our judgment; we tend to distrust people who are different from us; supernatural beliefs are hard to shake and we prefer instant gratification to long-term gain. Dean Buonomano illuminates the causes and consequences of these “bugs” in terms of the brain’s innermost workings and their evolutionary purposes.

2. Hacking the brain

Hacking the brain, Richard Shepherd, .Net magazine

“If you make chairs, you’ll want to understand how people sit. If you make user interfaces, then you should understand how people perceive and think.”
With a little borrowing from disciplines such as cognitive psychology and behavioural economics we become able to ‘hack the brain’.
The field of UX is both broad and deep; here are five techniques to get you started.

3. How does the brain keep track of time

How does the brain keep track of time – by Joshua Bixby in Web Performance Today

Luke Jones of the University of Manchester talks about the fact that we’re uncannily good at telling the difference between durations of sound, down to one-tenths of a second, yet we’re terrible at predicting how long it’s going to take us to do something, especially if it’s something you’ve done before. (Apparently, we always underestimate.)

4. Designing for emotion

Designing for emotion by Aaron Walter, A book apart
I read this book more than a year ago, here are my notes about it. The conclusion was:

When you start your next design project, keep this principle in mind: people will forgive shortcomings, follow your lead, and sing your praises if you reward them with positive emotion.

designing for emotion NET234.f_hacking brain bugs

Designing for emotion

Written on 26 December 2011, 12:40am

Tagged with: , ,

I just finished reading Designing for Emotion written by Aarron Walter from A Book Apart, and I am quite impressed with the things I learned. I quickly want to note some ideas that left in my head after reading the book’s 7 chapters.

1. What is it? What are the advantages?

There are 2 main considerations before anything (and the author of the book correctly repeats them several times throughout the book):

  1. Design always comes after content. This means that quality content is always required. Carefully considered content and well-executed design work in concert.
  2. Emotional design comes after the standard design. The emotional design does not have to interfere with the base layers of the users hierarchy of needs: functionality, reliability and usablility.

What does it mean to design for emotion?
In a phrase, it means to engage your audience emotionally; and to do that you must let your brand’s personality show. Humans want to connect with real people.

The advantages of the emotional design:
1. it turns users into loyal users, even fanatics
2. the users end up by trusting the website/product/application, and they will be more likely to forgive any possible errors/mistakes
3. if done right, emotional design can eliminate the marketing costs. The audience will end up by doing the marketing for you, using the holy grail of the advertising world: the word of mouth.

2. Important ideas

And now quickly noting the other ideas of the book, and how they related to other opinions I came across lately:
Maslow’s Hierarchy of needs (physiological, safety, love, esteem, self-actualization) can be remapped for for user interfaces: functional, reliable, usable, pleasurable.
Baby face bias: humans are hard-wired to love babies, and with them – any cute face resembling the face of a newborn.

The takeaway here is not to make your website cuter. With a little consideration you’ll discover that behind every design principle is a connection to human nature and our emotional instincts. (Ex: the golden ratio in Twitter’s design)
-Designing for emotion – Chapter 1