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 🙂

Comments (2)

  1. Dorin Moise — October 2, 2018 at 20:49

    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.

    The hand cursor is for links. Buttons shouldn’t have a hand cursor

    Reply

Leave a response