Users read left-to-right. Users scan top-to-bottom. This is why it makes sense to left-justify menu labels (list items) and headings.
Tag Archive for 'Usability'
Page 2 of 2
Software is media today, particularly consumer software. When people use it [your software] they approach it in the same way they would approach media. When I say media I’m talking about a magazine, or a newspaper, or a TV show.
When you think about The New York Times vs. The Wall Street Journal, Vanity Fair vs. Vogue, or Fox News vs. CNN: each of these media properties have a voice; they have an attitude; they have a style, and it’s unique, and it’s different.
I hand these links over to other designers and developers time, after time, after time:
- http://24ways.org/2006/compose-to-a-vertical-rhythm
- http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography-part-4
Essentially they contain all you need to know about web typography. Timeless articles.
Experiments with liquid CSS layouts
We all know liquid is important, right? (Doctors recommend 1.5-3 litres per day :P)
Some of you may have been fooled into thinking liquid and elastic layouts died as soon as browsers deployed native zoom a few years back. I’ll assume you understand – with a fair degree of knowledge – the technical and usability ramifications of implementing fixed-width, liquid, and elastic web layouts. If not, then the following should briefly clear the haze:
Fixed-width layout
Dimensions have a fixed-width pixel (px) measurement.
Even though 5% of users’ total time is spent past the 2,000-pixel mark, they tend to scan information that far from the top fairly superficially: some pages are very long (often 4,000+ pixels in my sample), and thus this 5% of user attention is spread very thinly. In our study, user viewing time was distributed as follows:
- Above the fold: 80.3%
- Below the fold: 19.7%
We used an eye tracker with a resolution of 1,024 × 768 pixels. These days, many users have somewhat bigger screens, and we’ve conducted many (non-ET) usability studies with larger resolutions. Although using a bigger monitor wouldn’t change my conclusions, it would somewhat increase the percentage of user attention spent above the fold simply because more info would be available in the initially viewable space.
Update 16/12/2010
I used this jQuery placeholder plugin to do the job today and it worked nicely.
The new HTML5 specification introduces the form input placeholder attribute, which allows us to define a hint to help users fill out input fields. If you’re using a WebKit-based browser right now you should find working examples of the new input placeholder in use on this page.
Working with form elements, especially labels, can present a dilemma for many…
Most performance optimization today are made on the parts that generate the HTML document (apache, C++, databases, etc.), but those parts only contribute to about 20% of the user’s response time. It’s better to focus on optimizing the parts that contribute to the other 80%.
A selection of books I’ve been enjoying recently:
'Universal Principles of Design' is THE BIBLE.
Attention
Have any recommendations of your own? Drop them in the comments. The tenth insightful comment wins my pristine second copy of Handcrafted CSS by Dan Cederholm and Ethan Marcotte (great book BTW)!
Recent Comments