Some Quick UI suggestions for Jolla 2

The previous article was pretty long just for some small considerations. I hour that this one will be shorter (I hope because I’m writing it from the N950)

Be Skeuomorphic …

Skeuomorphism is trying to mimic as much as possible real objects. Being Skeumorphic is very nice since it minimize learning time. A very good example of nice skeumorphic design is Nokia Meego’s time picker.

Nokia N9 time picker

This time picker is exactly what a time picker should be like. You always have track of the time being set, and it is quick and efficient. The only arguable point is that for setting PM you have to do a full turn with the hours picker. Adding a AM / PM switch won’t hurt.

For the date picker, once again, it is worth doing a small bit of skeumorphism.

Nokia N9 date picker

Adding an API over this date picker can also be interesting. The programmer using it might set limits, where dates cannot be picked. These dates may appear in grey. The programmer may also add some captions on particular dates, that will appear with a marker on it.

.. but not too much

As skeumorphism is nice to help user using an interface, don’t forget that too much skeumorphism leads to crumblesome UI. This nice article details every point : Overdesign

In summary here are the important points:

  • It kills consistency
  • It imposes artificial limits, that electronic devices may not have
  • It is uncanny, because these UI will always feel fake …
  • It is costly to redo every UI in a skeumorphic way

I may add one point. Too skeumorphic interfaces are messy. They are not messy because their conception are done badly, but trying to mimic a real object adds a lot of noise, and all the visual details that are added distracts the user. Let’s take the following example of Winamp

Winamp, with a Windows skin

As a media player, we might be interested in information about the track, as well as commands like play and pause. It is easy to find the commands, but when we are interested in finding what is playing, we have to navigate between all these fancy displays like the sound analyzer or the volume. It is interesting to see that the volume indicator takes more place than the title of the track. It is because of old music players, that do not have a big screen to display title. Winamp succeed in mimicking an old music player, but in the same time, is hiding an important information, and distracting the user with all these fancy things that are moving. At the end, it is quite hard to figure it out what is playing.

A button is a button

(and should tell the user that it is a button)

One last thing I want to address in this article are the clickable entries. iOS designers introduced something very good with the iPhone, the page navigation with lists. Clicking on an entry brings another page, with other entries. This navigation system is very well suited for small devices.

(I’m not sure that these lists were created by Apple designer, or existed before in other mobile devices, but, at least for me, I saw them in the iPhone first.)

iPhone settings : navigation is done by clicking on entries list that bring other pages.

Most mobile OS now have this kind of navigation. But some of them have done better than the others.

Settings menu on an HTC, under WP7

The entries on windows phone are very minimalistic, and only the text is displayed. This is great, but slightly confusing, because texts are not usually considered as buttons. Fortunately, there is a little feedback when we touch on the text, telling us that it is, indeed, a button.

Android ICS, about device

Android have done this in a very confusing way, because their list entries are either used for navigation (like checking system updates), or for displaying an information (like the version of Android). Some users may click on information entries, or being confused because they don’t know how to set a setting, because they thought that an entry that is used to set this settings was an information entry …

Basically, on the iPhone, the entry is designed to be seen as a button. There is a feedback when clicking on it, there are borders, and there is even a small arrow to indicate that there are some content. On Nokia Meego, it is done in the same fashion, with an arrow to indicate that clicking on the entry will bring a new page, and two arrows to indicate that it will open a dialog.

On WP, the entry do not resemble to a button, and users might be confused by this. And on Android, since the list entry have two roles, it is very unclear if it should be a button or not.

Speaking of Nokia Meego, even if their list entries are done quite well, there is still something to notice.

In application settings, “manage settings” is displayed as a button, but other entries are normal list entry.

Why the “manage settings” of the application settings list is displayed as a button and not a list entry ? It is because this entry launches the application manager instead of bringing another page. That is quite confusing, since launching an app and pushing a page is basically the same behaviour (see previous post), and the user may think that this button will do a completely different behaviour. It is actually more wise to display it as a list entry, but with a different icon.

When creating an UI, it is very important to have in mind that a graphical component must have a defined role. A button is something that is meant to be clicked. It have to have a feedback, and maybe a border. Graphical components must also have distinctive design, and a text should not be confused with a button (and no, changing a font is not distinctive enough). Finally, for similar roles, the same graphical component should be used, even if slight modifications are allowed (like changing the palette, but not the component shape and size).


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s