Sailfish, a breath of fresh air in UI

On JollaFr blog, I first praised Sailfish multitasking style, saying that it was a really neat way to interact with multiple tasks, however, after attending to their UI session, it is clearly more than just putting some controls on multitasking cards.

Simplicity, logic and magic

Starting with these three words, designers at Jolla worked hard, based on what was wrong on current UI, and what can be improved to make the UI visually simple, and also intuitive to use, as well as giving some fun to the UI. What I can say is that the result is stunning.

Removing all the clutter

These days, UI are full of important, yet crumblesome controls. You might have a statusbar, an application header, and a toolbar. If your application have several sections, you might add a tabbar, so at the end, the screen is full of components that have a limited role.

Phone application on the iPhone displaying contacts, with a statusbar, the header providing tools and a back button, as well as a set of tabs.

These controls fails to fit in a (well known ?) UI design rule that is to focus on content. Sadly, in order to be able for the user to perform actions, you needs these buttons and tabs all around the content. Jolla designers decided to respect the principle and try to discard all these controls. They thinks that most users have been already exposed to enough UI to be able to discard some elements. They first removed all chrome around the buttons, leaving only the caption, like on Windows Phone. This task was easy and done without much damage.

Removing controls was a bit more challenging. How to remove that omnipresent back button, and how to remove toolbars ? The answer has already be given by quite a lot of people, from Blackberry to konttoristhoughts.blogspot.com and to me as well, it is to extend swipe. As modern mobile UI just look like a set of cards that is being piled, going back should be like swiping the top card out of the stack, and the natural move is to swipe from left to right.

Getting rid of toolbars is more tricky. They must be available out of the screen, and the user must not forget them (out of sight, out of heart). Jolla designers introduced a nice visual theme to help users to remember about controls outside of the screen. The visualization remembers me a lot about Samsung Touchwiz.that indicates that there are more tabs available in their tabbed view with a small blue glow.

Sailfish UI uses a glow on either the top or the bottom to indicate that a menu is available. Often (like in the gallery or the call UI), a glow is displayed on the top, telling that there are available options.

Demonstration of the call UI. Notice the glowing bar on top, that brings options down. (Thanks to qwazix for the photos)

While flicking the whole UI down, this menu will be displayed (and acts a bit like the “pull to refresh” feature on some applications). More interesting, you will have a selector displayed on this menu. Flicking the list moves that selector, with feedbacks, and can select one entry of the menu (if you know the position), only based on these feedback. This makes selecting entries from that menu simpler since you can trigger the menu with only one move.

Seamless true multitasking

People are doing different things, and Jolla understood that. They might listen to music while browsing or Skyping while thowing birds at pigs. Switching apps is nice, either using a multitasking grid, or using some combinaison of hardware buttons. But still, this causes several unuseful steps. An user needs to minimize the app (either swiping or pressing the home button), launch the other (using a multitasking view, the application launcher), navigate through the newly maximized application to find the control to press, and finally, perform the action.

Widgets are a good tool for that. Controlling the media player using a widget is easy, and you don’t need to restore the music player, but widgets are not really consistent in their shape and size, and most of the time, widgets-based view are a bit messy, and have duplicate roles with applications. So in Jolla we have minimized applications that plays the role of widgets as well. Minimized applications displays information related to that application, like the missed calls, your best friends or the current track in play, with the album art, like BB10, or like what MeeGo users suggested, and was implemented i (for example) cutetube.

But what Jolla brings, and was never seen before is the ability to interact with frames. Minimized applications are widgets, limited one with only two actions, but you can for example pause the music player and skip a track by swiping on the frame, left or right. There can be up to two commands that can be triggered here, and that are triggered by those swipes.

Background applications are then still open and you can interact with them. It is true multitasking, that is both running at the background and interacting with them while minimized.

Those small things that makes the UI living

The design guidelines is applied for everything, from the main view to all the different applications. Small details like swiping the keypad to select voice or VOIP communication, or the contact app that do not show an endless list of contacts but just people you love. Finally, the ambiant customization that helps you making the device your own. Everthing small attention counts, and makes UI unique.

Those who are afraid of loosing swipe (window moving under your thumb) or the status area will be pleased that none of these two features are really removed. Swipe the window to minimize makes it transparent, but it is still very intuitive. You can still feel that you are minimizing it, and when the swipe has been initiated, the status area is visible and you can see clock, wifi status etc.

To conclude, I have to say that I was skeptical at the beginning about Sailfish UI. I thought that there were no really now stuff, except that interactive multitasking, but no, interesting things are hidden in small details.

Advertisements

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