Comments on Jolla UI

I used to give my point of view about Jolla’s UI and product whenever there is some material that are released by them, so this time, I will comment on the slides that Joona used for his presentation in China. They are interesting, colorful, and really nice. You can find them here.

Beautiful icons !

The generic «Design» section reminds me the day I discovered Sailfish UI. It is all about simplicity, inactivity and magic. This time, these principles are translated into some more practical considerations, that should applied in every UI design: only load UI when needed, apply transitions for visual changes, use platform fonts, colors and margins etc.

When the SDK was out, I was happy to find that in the SDK there was a way to get these platform parameters (especially margins). Use platforms margins was something that was told in Harmattan design principles, but in practice, there was no way of getting those margins in the SDK, and I used to use my custom UiConstants.js that I was copying from on project to another. So here, I have to say «thanks you» to Jolla about that small component that makes my life easier. 😉

But back to the slides !

In that «design» section, there is also a part about icons, showing the design patterns of the new icons that we discovered during the Jolla Love Day. More colorful, slightly flatter than the previous ones, they are really beautiful, and nicely designed. Now that the slide also provides the rule to design the container of these icons, I guess that one of my first criticism is now fully addressed.

Still there are some small imperfections in these nice icons. The icon for people (the contacts app) is a heart in a red container. We usually associate the address book to the physical address book like in iOS, or to a portrait, like on Android or other platforms. So, even if the people app is more about people you love, it is still slightly confusing. The mail (?) icon, resemble to a folder containing a document, and might be mistaken with the file manager app. Other icons, like the one with a butterfly, or the one with the colored wheel, don’t tell what they do etc.

Icons and templates

Icons and templates

Before going to the next part, we can also note that Sailfish Silica now seems to use Qt Quick 2.0, that implies Qt 5 !

The basic application code snippet uses «include QtQuick 2.0» !

The basic application code snippet uses «include QtQuick 2.0» !

New shiny components

The presentation described a lot of new components that looks awesome. We have, for example, the introduction of AttachedPage, that should be a way to implemented tabbed views, by pushing multiple pages on the stack, that can be slided left and right (like on Windows Phone). Other components that helps layouting the small space on a mobile phone are SplittedView, or DockedPanel, brings z-leveled containers.

Something welcomed is also the indeterminate status of a progress bar, finally allowing developers to show that there is a task in progress, but that the status of the task is unknown. However, I was slightly disappointed not to find a circular indicator in the slides. The actual SDK already provides a nice circular progress indicator, only a spinner like indicator was missing.

A docked panel

A docked panel

There are some nice details that I appreciated a lot in this presentation. The alarm clock configuration dialog looks awesome. The trash-can icon for removing an alarm (or emptying a field ?) is very good and carries a strong signification, while the WeekDaySelector is clever: while being rather small and not taking much space, it allows selection of any combination of days without the need of opening a dialog.

Alarm clock configuration Sailfish

Alarm clock configuration Sailfish

I also love how the context menus, are integrated, and the remorse indicator, that is a brilliant idea.

Typography warning, second call

Following what I said here, it seems that there is need to do a second warning about the (ab)use of text used in a (close to) text only UI. Microsoft started that fashion with the Zune, and then Windows Phone, and carried it rather well. People at Jolla also have to pay attention about that as well.

The first example is about the message application. Just like Windows Phone 7, it uses the same style to represent a message that the user sent or that he / she received.

Messages on Sailfish

Messages on Sailfish

Messages on Windows Phone 7.0 (Source Engadget)

Messages on Windows Phone 7.0 (Source Engadget)

As you can see, on WP7, all the chat bubbles are blue, on Sailfish, all the texts are white, making it hard to distinguish which messages are sent and which received. On other platforms, like iOS, Harmattan, Android and even WP 7.5, there are chat bubbles, with a tail pointing top for a received message, and bottom for a message that is sent, but more important, those chat bubbles are in different color, and even if the used need to learn at the beginning which color corresponds to his messages, he / she will quickly identify the owner of a message by associating it to a color.

Messages on iOS (Source Clubic)

Messages on iOS (Source Clubic)

It is good looking to get rid of those useless char bubbles, but a good differentiation of the messages is still necessary. I would suggest Jolla to put all received message with the ambiance color, while keeping the one the user sent white to differentiate them.

Another typography warning is that different types of information are presented (in the slides) with the same labels. The screenshots following gives two examples.

Conversation list in Sailfish. The name and the message are displayed using the same type of label

Conversation list in Sailfish. The name and the message are displayed using the same type of label

A settings panel. The hint about mobile data usage uses the same label as the settings entries.

A settings panel. The hint about mobile data usage uses the same label as the settings entries.

In the first case, it is easy to distinguish the user from the message. Since it is a list of conversation, selecting an person is more important that being able to get the messages quickly, so the name of people that are listed should be highlighted. The messages can have their color set to be a darker one, or a more transparent one.

In the second case, the hint should be displayed using a different presentation. The hint could be displayed with a smaller font, a different color, or maybe in italic. And it could be indented. Having a bigger indentation level than the settings entry shows that it is one level below, and that it belongs to the settings entry.

Sketch about the proposed indentation solution.

Sketch about the proposed indentation solution.

Coloring and spacing

Other small details makes my UI / UX part itchy as well. There is for example the use of bright colors in a generally dark UI in both the calendar and the messages application. A slightly darker color might be better.

A rather bright blue in a dark green background.

A rather bright blue in a dark green background.

There is also these overcrowded views, like the one on the message app (again) or on the dialog used to add a new contact.

Messages on Sailfish

Messages on Sailfish

We can see that at the bottom, a lot of information are being displayed, like the type of the message, time, and the text field. I wonder why is there two labels for displaying the type, one saying simply «type» and the other the actual type. If the white label is a clickable entry, why not simply get rid of it and make SMS clickable and brighter ?

A messy «new contact» dialog

A messy «new contact» dialog

The dialog used to add a new contact is really the worst UI I have seen coming from Jolla. First, there is that «information» and «add» on top, and I really fail in understanding why they are here. Maybe the «add» field is used to add other fields, but why is there a need of displaying «information» ? We all know that we are filling information about a contact here.

We also have the mention of «local» and «image» near the avatar. While the first is not really mandatory (we don’t care about where the image comes from), the second is rather pointless. We all know that the field corresponds to an image, since there is an image right at the right of that label.

Finally, we can see that under each text field, there is a label that is used to describe the content of that field. I find rather disturbing that those labels are actually very close of both the text field that they describe, but also the the other text field just below them. Maybe a bit of space is welcomed, especially that here, it is OK to waste space.

One last word about something I find strange as well. Why is there a need of displaying a dot at the end of a progress bar ?

Progress bars and sliders

Progress bars and sliders

The progress bar (that says «searching for device») cannot be differentiated from the slider, so where there is a progress, the user might think that it is something that can be interacted with. The SDK alpha shipped a progress bar that did not have that dot at the end of the progress, and it was quite correct, so please … remove that dot !

General comment

While this post might seems pretty negative, I have to remind to my readers that I do these blog posts to give feedback to Jolla, and for them to have the best product ever 🙂 !

As a general comment, I have to acknowledge that these new components are really awesome, and bridge a lot of gaps that were in the SDK alpha. Sailfish UI is evolving and gaining a lot of features while still keeping a strong and consistent design language. And now, I’m even more impatient to get a new SDK and play with all these fancy stuff.

Especially that it might be Qt 5 based now !

Advertisements

17 thoughts on “Comments on Jolla UI

  1. Agreed with everything you said to be honest. The adding of contacts screen definitely needs a bit of work. Hopefully that can be fixed without too much effort.

  2. I think it was mentioned on Jolla IRC channel that there is a “spinner” type indicator for process that takes unknown time. Haven’t they added it to the SDK documentation yet?

  3. I don’t understand what the calendar displays. There are some days missing (nothing between 2 and 6 and so on) and I don’t understand what the first column means.

    In the contact, maybe it would be better to get rid of first name, last name, etc. when we write it. When I read Philippe, I know it is the first name and not the company name. I imagine it as a field with the type (first name, last name, etc.) written and when I begin to fullfill the field, then this label disappears.

    Is there a logic in the icon shape? I don’t find any and that disturbs me. I thought one would be for settings, one for maps and navigation, one for everything related to contacts (phone, e-mails, smcs, social networks), etc.

      • The phone and the calculator have the same two raindrop merged but how are they related? So I don’t understand “It is just not the same background shape but something that is a merger or 2+ “raindrop” patterns.”.

        Anyway I don’t regret I pre-ordered the jolla phone. It looks like great.

  4. my biggest complaint about sailfish UI/UX is the transparent screen transitions effect(left/right push to the centre), at least not transparent one!

  5. First, thanks for the very interesting post.

    Then, about contact screen, a solution for the “Add” button (if it adds field) could be to add a bottom pulley menu: in this case the user go down in the page and if he/she don’t find the correct field –> Pull –> Add

    Finally, about the prototype, I was a bit confused: for me the title is centered and content left align :s

  6. > Use platforms margins was
    > something that was told in
    > Harmattan design principles,
    > but in practice, there was no
    > way of getting those margins
    > in the SDK

    That’s true on MeeGo Harmattan, but not on Symbian. Symbian version of Qt Quick Components does support that. In QML app made for the Symbian you can have eg. line like this:

    bottomMargin: platformStyle.paddingMedium

    Platform margins and lots of other platform values are provided by Symbian specific QML Style component. You can access platform margins etc through the context property platformStyle as shown abowe.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s