User experience and usability » guidelines

The prototypical portfolio site

marielle — Fri, 06 May 2011 20:39:56 +0000

An older (2009) but still nice to read case study on portfolio websites (especially design portfolios):

Portfolio Design Study: Design Patterns and Current Practices – Smashing Magazine

How does the typical portfolio site look?

Prototypical portfolio site: light design, with neutral, calm colors in a horizontally centered layouts with two to three columns and a simple large horizontal navigation with right-aligned elements including a link to the ‘about us’ page, some kind of introductory block in the upper area, contact link in the upper-right corner.
For every project there’s a detailed page including case studies, testimonials, slideshows with screenshots, drafts and sketches. There is some form of standalone services page. The contact page contains driving directions, a phone number, email address, postal address, vCard and online form.

Multicolumn lists, reading direction and alphabetic ordering

marielle — Thu, 17 Jul 2008 16:53:30 +0000

On iconic logo designers, a great website by the designer David Airey with a collection of logo designers, I found the following multicolumn list:

In books the multicolumn format for lists was generally used to save space. A single-column lists takes up a lot of vertical space and only little horizontal space. A long list could be split in the middle to be shown in two columns, or split at multiple points for more than two columns.

In this example there are 32 items: 4 columns, each containing 8 items. These items are ordered alphabetically (based on the designer’s last name). The table was filled row by row.

Reading order

However, in general a column-first reading order feels more natural. In this list, the items in each column are centered horizontally, which points more attention to the vertical direction than to the horizontal rows.

The same list, filled column-first:

The alphabetic ordering is discovered faster, and it’s easier to find a particular item.

General guideline

When placing items in multi-columns lists or tables, follow the natural reading direction unless there is a good reason to do otherwise. This one is pretty obvious. That in html it is easier to fill a table row by row does not count as a good reason.

Standards: when there is no obvious best choice

marielle — Mon, 07 Jul 2008 13:44:17 +0000

On which side of the road should we drive? Although I probably could make up an argument for either side based on the asymmetry of the brain’s hemispheres, this would be little convincing. Driving on the right is not safer (or less safe) than driving on the left. But it is pretty obvious that randomly assigning roads a ‘drive left’ or ‘drive right’ sign would lead to extremely dangerous situations, with frustrated drivers, accidents and confusion.

For many design choices in software applications there is no clear best option. The best thing to do in such a case is to aim for consistency (both internal consistency, within the application, and external consistency, with other applications in the typical usage environment). In this respect, human interface guidelines have great value and following guidelines results in applications consistent with your user’s expectations.

Apple and Microsoft interface guidelines

admin — Wed, 08 Nov 2006 03:45:00 +0000

Today I found some time to look at the Apple Human Interface Guidelines for Mac OS X. Microsoft’s latest guidelines are the Windows Vista User Experience Guidelines (still “preliminary documentation” though).

A few thoughts:

The Vista guidelines are quite technology-driven sometimes, top rule number one is “Use the Aero Theme and System Font (Segoe UI)”
Apple places more emphasis on the design process and stresses involving your users in early stage development and
The Apple guidelines are clearer and easier to work with
I really hope the final version of the Vista guidelines will be better

On first impression, Apple clearly wins. (And I’m not even a Mac user)