Modern web design – 2

Written on 10 December 2011, 12:12am

Tagged with: , ,

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 🙂

Modern web design

Written on 8 December 2011, 11:50pm

Tagged with: , , ,

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

Amazing things you can do in HTML5

Written on 24 November 2011, 07:21pm

Tagged with: , , ,

  1. manipulate the browser history and build awesome asynchronous user interfaces like this one or highly responsive and intuitive interfaces like this one
  2. know the user location and serve him customized content (remember that ‘date single women near [your location]’ ads? :P)
  3. store data in the user browser: more than 4k of data, stored on the client, that persists beyond a page refresh and isn’t transmitted to the server. For example to store the number of the last page read in an online book or to save the settings of an online game between browser restarts
  4. use new input types (like the slider, color picker, date picker, etc) and unload the validation task on the browser
  5. allow the user to take your app offline, edit it, and synchronize it when back online. Example: GMail offline
  6. Play video for everybody
  7. Use the canvas element to draw amazing 3D text or sticky things (try this link on your mobile device, and shake it :))

Yes, you can use all of these features plus many, many more right now. Most of them will gracefully degrade if the browser is too old or simply does not support them.
Now read the list above once again thinking about the implications on the mobile browsing.