Usability Case Study: Kemik Portfolio

Original screenshot

Summary critique:

This is a very elegant and effective web page, which succeeds through a confident visual style that remains content-oriented.

The placement of classical painting style is simple and strong. It uses imagery where it should be - to carry meaning and directly strengthen the brand ("simple, yet effective" in the designer's words). The theme is subtly carried through the rest of the page, so that the focus is maintained.

The page's weakness is that the content's focus has been toned down to a point where it has become difficult to read. This is a tendency that designers lean towards when they have simply been looking at a design for too long, and looking as though at a work of art, instead of seeing a web page as a web page. Looking in this way can result in a page that works better as graphic art for the consumption of other designers and artists than it does as a web page for the consumption of real-world users.

The telltale sign that a design has gotten 'stared out' is very low contrast, which is evident in this screenshot.

Detailed breakdown:

Layout
is excellent - conventional cascade, placing the most relvant content first. The logo is subtle yet confidently dominant because of its spatial position. The painting sets the style, then the focus is on links to the designer's folio.

When scanning, you may then notice the message overlaying the image, which is relatively concise and delivered in a straightforward tone of voice. Finally, the general 'about me' information is only for the attention of those interested enough to look.

The single 'Contact' link sits alone, and may be overlooked, as nothing leads to it.

Content
works pretty well. The number of words is suitably minimal. The site ID and tag line are both well-focussed: "KEMIK.PORTFOLIO.MMIV" and "Art and Design Portfolio of Kemik".

The portfolio links do not invite you to click them, and there's no way of telling what you're getting (transparency is one of the principles of good hyperlinks).

Some of the things Kemik chooses to tell us about himself are less relevant to the viewing public than others. Telling us what kind of memory he runs in his computer makes him sound a bit geeky and lose some of the artist's mystique.

The line "Email: unavailable" should not be there. Space on a web page, and a home page especially, is so premium that any content must be used for good reason. There is no benefit to *not* putting an email on the page. If Kemik has an email, there should be a contact link. He risks getting spammed, but if he wants more (well-deserved) business as a designer, he should put his contact details out there and invest in a spam filter.

Content style
I'm not sure that replacing the spaces between words with stops is appropriate outside the site logo, where it does work well. It simply reduces readability in content text.

The serif font (which Kemik tells us is Thryomanes, but why? Mystique down 1 point.) is a suitable choice, although it's less effective in the table of portfolio links, where the variation in pitch/height is hard to read. As mentioned already, there is not enough contrast used in the content. Titles should stand out to the scanning eye, but in light grey on white they hang back from view. The column header text in the table needs to be more visually distinct from the content rows.

Redesign

Summary of changes

From the top down:

Contrast
I've increased the contrast on the site ID and the contact link, just enough to stand out.

Title
I changed the title "Design.Portfolio" to simply "Portfolio". Because the site strap line already stated "Art and design portfolio..", it caused a little mental friction to put only "Design portfolio" below. Where's the "Art portfolio"? I also changed "Information.Kemik" to the far more meaningful "About Kemik".

I switched the title face to an elegant italic (Bookman I think), which stands out more from the page (good for a header, helps scanning), and to me looks a little softer, although this is a matter of tasts.

Thumbs
The biggest change is to replace the table of folio links with thumbnails (dummies). This brings a significant usability benefit: you have a qualitative idea of what you're getting before you click. In this case, letting content imagery replace words and numbers is far more concise and effective. It gives the scanning user an idea of the extent and range of the designer's talent, without even having to click. It also makes it more likely that the user will click on a thumb that attracts them, and be persuaded to carry on browsing.

The thumbnails use the same aspect ratio (proportions) as the hero image above, proportions which continue the classic theme.

These dummy thumbs are lightened and desaturated: they could go full-colour on mouseover..

The thumbnails are also space-effective. You can see in the side-by-side comparison below that the 12 thumbnails take up slightly more vertical space than the original 13 table records, but add lots more value and richness.

Note: When creating thumbnails, it's often best to select a meaninful or iconic portion of an image to resize; resizing the whole image can result in too little detail.

File size
One benefit of the table is that it sets expectations of the size of a download. ("How long will I have to wait to download one of these?")

Thinking from a goal-oriented point of view: why is the user here? They're here to view Kemik's talents, either out of curiosity or for a strong reason. Either way, if they're interested, they will click, and then they will experience how long an image takes to download.

Giving a user an exact filesize, accurate to 1KB, doesn't actually answer the question "How long will it take..?", because there are other factors involved. It will give them some idea, which is good, but another way of giving them a good idea would be to add a comment such as: "All images are medium-resolution JPEGs". Personally, I would expect an online portfolio to show JPEGs at no more than 1024x768 resolution, which would take a few moments of anyone's time to fetch, never too long.. Another idea might be to put the rough filesize in the ALT text of the thumbnails.

About section content
I edited the about content a little (removed computer specification). I also added a 'contact' link: in this case with a direct email. The 'contact' link at the top of the page is not likely to get many clicks, as it's in an unconventional place (there are no other navigation links up there to draw attention to it). It's also likely that a user who's interested enough in Kemik's work to want to get in touch will have scrolled the page a little to read the 'About' section, in which case they may be completely unaware of the previously overlooked 'Contact' link. That's why I've added a second 'Contact' line here, at the likely place a user may need and expect to find it.

I also combined the title for 'About' with the About content box. This follows the principle of visually grouping related items. It's not that you can't tell that 'Information.Kemik' in the original screenshot refers to the content below it - it's hierarchically dominant after all - but it does sow that tiny bit of doubt. ("Hmm, the Information box seems empty..") It also saves some vertical space, which is always a good thing.

Footer:
I coloured the footer box in 1/2 the background colour, to distinguish it as "not content" and to give the page a visual stopper.

Kemik's footer says, "All images are copyright 2004 Kemik - All rights reserved - Don't rip my shit!!". This is unnecessary in my view. Yes, put a copyright link on there; that's your catch-all for the worst case scenario, and it looks professional. But there's no need to tell people not to rip you off (see "The pursuit of the original"). Getting copied is one of the highest compliments you can get as a designer, and to be honest, you aren't going to stop it happening. A serious professional doesn't need to say this, as it comes across as underconfident.

I stripped out a few unnecessary words, which helps maintain Kemik's mystique (again). I would recommend that he also remove the line "Names: Kemik/Kemikal" and settle on a single name. By putting up this portfolio, Kemik is creating a brand, and a brand needs solidity. Two names is schizophrenic. He should choose one, and use nothing else in all his professional dealings. Also, I'd recommend focussing the About section on things that have a professional context, rather than simply describing the designer's character. Maybe schools attended, exhibitions taken part in, favourite professional web sites or organisations etc.

I wonder what he's working on now... bet it's great.

Side-by-side comparison