This is a selection of the most important ideas expressed in this article: What I Learned About the Web in 2011

User experience

Emotion is at the heart of every decision we make. Emotion shapes our behavior by casting the tie-breaking vote when logic determines appropriate options for our consideration.
It’s centrally important to seek simplicity, and especially to avoid making things hard to use or understand.
Most websites and apps launching today all are beautifully designed with care.
God is in the details.

Mobile apps

A small screen doesn’t signal a desire to do less. The real question isn’t what to take out of a mobile app, but what to add.
Websites are becoming more and more “app-like.”
Mobile payments – increasing percent

Responsive design

Speed: A web application is a “living” thing and all living things are continually changing from cradle to grave. The faster they can respond, the better they can adapt to change.
Websites should be intelligently malleable things—adaptable and responsive to a broad continuum of uses and devices
Silent browser updates: how can we best help our users understand the changes in experiences that they will encounter as we adapt to building single, responsive sites?

The Web

We have to start realizing that our job is no longer solely to produce sites, apps, and pages built in HTML, CSS, and JavaScript. We have to expand our definition of what the “web” is. More and more, the “web” is not a platform. It’s a service with clients on many platforms.
That iteration is king and that perfection should never be achieved—shipping it is more important than trying to perfect it endlessly behind the scenes. It’s better to release with a solid core set of features and then iterate and add as time or users necessitate it.
(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