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

(more…)

See part 1

3. Some usability issues

Thirty Usability Issues to Be Aware Of
–Fitts’ Law: a model of human movement which predicts the time required to rapidly move to a target area. So always put your labels on top of the input fields
-according to the same principle, sometimes you might better be off putting the button in front of the search field [#].

-The foveal area (“a small wide space area where your eyes are aimed at and it is the only area where you can perceive the maximum level of detail”) is very important – because this is the area where you have to deliver the message.
Image credit: The 11 best art and design books of 2011

–Minesweeping and Mystery-Meat Navigation (MMN) are both indicating problems in finding or identifying the links on a page. Here are two examples here and here. By looking at the article, would you tell that that it contains a link? I don’t think so. One uses italic text to implement link text, while the other one uses a bigger font size (2px more). At a better look (with Firebug), I notice that on the second example, in addition to the bigger font size, the link is also reddish (color: #840000 !important;). But I am colorblind, so here’s a great example of accessibility problem.
In conclusion, regarding link texts, don’t reinvent the wheel: make your link texts blue-ish or bold to stand up from regular text and (for the non-touch devices) always have the mouse cursor to ‘hand’ when mouse over a link.

4. Typography – 101

“What Font Should I Use?”: Five Principles for Choosing and Using Typefaces
From this article I learned:
-what’s a serif
-the main font groups (GHOTMS): geometric, humanist, old style, transitional, modern, slab serif
-how to combine two fonts on a page: pick them either very similar, or very different
-the most important rule is that there is no rule (There are only conventions, no ironclad rules about how to use type, just as there are no rules about how we should dress in the morning.)
-and, the most important rule never use Comic Sans 🙂 If you do, then you’re a Comic Sans Criminal…
So, you need a typeface:

To be continued 🙂

In the latest months I continued the dive into the Rich Internet Applications concept, but switching from Flex to HTML5, user interface design, typography – in a word, modern web design. I am reading 2 new e-books – in fact, a collection of articles written on Smashing Magazine during the latest years. Thanks to the retina display, I rediscovered the joy of reading interesting things before going to sleep 🙂
So, after some weeks, here is what is worth mentioning (read what I remember):

1. Responsive web design

Guidelines for responsive web design:
-you can use CSS media queries to target a specific browser, or even a specific design
-you can get the device orientation without reloading the page
-you can server low-res or high-res images for a mobile/normal device to save bandwidth
-there are some meta tags specific to Apple devices

<meta name="viewport" content="width=device-width; initial-scale=1.0">

-keep in mind that most users are right handed and they have fat fingers [#]

2. User psychology

10 Principles Of Effective Web Design
-don’t give the users too many options. They make hundreds of choices every day [#]
-moreover, don’t you dare to make them think 🙂 Be obvious and self-explanatory. If you have a multi-step form, make sure that the user always knows where he is and how long until he’s done.
-users want instant gratification
-keep it simple
-users want to be in control: don’t open the links in a new window. If you still do, at least warn the user (use a marker next to the link to suggest the new window). When you ask users to fill a form, make sure that your submit button doesn’t say ‘Submit’ – but an explanatory expression: Why your form buttons should never say Submit
–users don’t read, they scan: See the f-shaped pattern of scanning the web content
-users are really good at ignoring the ads
-users hate unknowing (uncertainty). That’s the Cliffhanger-Effect (Zeigarnik-Effect). And the people in advertising know it.
-users do not like change. 90% of them never change the default settings. But they eventually get used to the change (see facebook redesign)
-sometimes, users don’t know what they want. You must show them what they want. At least that was Steve Jobs’ philosophy.

To be continued🙂 Read part 2