Comments on Jolla UI

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

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» !

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

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

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 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)

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

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.

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.

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

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

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

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 !

About these ads