Blog

Today I’m inaugurating a new series of posts called “Face-lift”.

What is it you might ask me? Well it’s simple, I’m giving a “face-lift” to some website, web applications or any type of interface I come across while browsing.

It’s simple, a “face-lift” is me trying to make the interface more usable, easier to use and somehow enjoyable (I’ll try prettier but that’s a matter of taste isn’t it?)

I’m using simple usability techniques, a quick mock-up/prototype and some bullet points to highlights the before after.

But there is a trick: I only “face-lift” website that I actually use and I’m only giving me a few hours to get that done.

My first face-lift is today: http://pavei.cappelen.no/15/8.html

See the face-lift after the jump.

So why “på vei”?

I’ve been in Norway for a few month and my Norwegian is not yet as good as my Spanish yet (which I haven’t really practiced since 2005).

So I read a lot and do my exercises, and as we are in 2010, I even do some online learning.

Heading to http://pavei.cappelen.no I’m starting to do my Listening exercise and I find this

Not a bad concept, but I thought that the execution could be improved, and the user experience more satisfying.

I’m trying to learn a language that is for the most part brand new to me. It’s already hard enough to do some exercises, but when the interface makes me want to quit, I don’t think I’ll make any progress with that application.

Symptoms:

• The visual structure is off
• Little differentiation between element
• Unsure about nature of action
• Content box that looks like a text area
• Tools spread all over the page
• Which exercise is it?, How many have I done?
• Visual clues are “half-baked”

Diagnostic:

• Good intention but poor execution. This simple page is working but against me most of the time.*

So the remedy, my very own “face-lift”.

The animated gif below gives you an idea of the form interaction and design.

The procedure:

• Clear Indication of progression in for all “chapters” and particular sections with color clue
• Change the content box (they were buttons actually) to look like buttons. Addition of hover state and clicked state.
• Use of color code to identify correct answers
• Message of encouragement/Confirmation when action is accomplished
• Result fed directly to progress Bar
• Progress bar with color code for right or wrong answers (Green/Red)
• Two state play button with Action as label ” click to listen”

Et voila.

What do you think of that face-lift?

Are you ready to learn some Norwegian now?

I am.

*it’s true that after a couple of tries, I do “get it” and i even managed to finish my test, but why not make it clear from the start?