Back to Blog home

Design insights: How we design Sailfish OS

How to improve user experience? How to invent new ideas? Why are some designs changing? How to ensure that new ideas actually improve the user experience (UX)? 

There are many more design related questions for sure. In this blog we will start to provide you with design insights, explain what is important to us, what is our way of working, our project objectives, evaluations and conclusions as well. 

In short: how we design Sailfish OS.

Our Design philosophy

Design_PhilosophyIt all starts from a basic idea, a so-called design philosophy, which energizes us and supports our decision making process. The basic elements here are: 

  • Simple -  We aim at making complex user experiences simpler
  • Aesthetic – Our design should be aesthetically pleasing, balanced and beautiful
  • Natural – Designs should look and feel truly natural, whether it’s a task flow, haptics or material
  • Magical – There should be magic, a positive surprise, an innovation or personal sensation when using our products or services
  • Holistic – Our designs should create holistic connections between user needs, technology and business requirements

What do we actually do within Design?

Diversity and different viewpoints are important to do awesome design. We (six Jolla designers) are originally from three different nationalities and have different educational backgrounds, some of us are more logical thinkers while others are more visual designers. All of us have experiences in multidisciplinary work and have gathered tremendous experiences while designing other OS:s, many products, apps, services or solutions in the past. The Design team works very holistically and we of course cooperate with all teams within Jolla; especially we cooperate very closely with product management and of course software development teams. 

In a nutshell we design: 

  • User Interface for Sailfish OS: meaning definitions of use cases, interaction flow charts for UI framework and apps, behavior & logic of SW components
  • Stunning Graphical Design: e.g. user interface layouts, icons, fonts, ambiences/themes, art work for packaging, user guides and other printed material
  • Attractive and useful Motion Design: e.g. user interface animations, demos and promo videos 
  • Craft beautiful and striking Industrial Design: ergonomics, define material & colours, ID renderings, exhibition stands
  • The Creative Design direction: I believe that everybody is creative, there are incredible ideas right here, around you, next to you. Combined with our own ideas, we streamline and define the creative design direction.

Design_process[1]Our way of working

Designing a major OS update does not happen within a few weeks, it’s a much longer process, spreading over several months. It isn’t trivial either, because an operating system is a very complex and intertwined construct in which every element relates to another one.

In order to achieve best possible results, feasibility and to avoid endless discussions based on subjective statements (“I like this and not this” “Why?” “Because it is me“) we applied a structured design process, including a lot analyzing, concepting, building prototypes, evaluation and doing it over again and again until we’re satisfied. During such a process there are moments of satisfaction and happiness, however also times of disappointments whenever you get stuck, do not find the right solution or when you notice that you have to let go your very ‘loved’ feature because it is not a ‘key’ feature based on the project objectives.

Sailfish OS 2.0 -  Design Insights

Sailfish OS is currently evolving to the next generation (‘Sailfish OS 2.0′) and there are many design related questions, which we are working on, like:  Why is the User Interface perceived as simpler than before? How can I close an app super quickly? How to access Events? Can I have two Cover actions?

There isn’t just one reason why the UI is perceived simpler while very appealing. Instead it’s a combination of at least the following items:

Navigation_ModelSimple mental model of core views

We rearranged the core views so that they form a simple, easy to memorize model. Your relevant content is right in the center, whether it’s your notifications, personalized quick actions, running apps or optional content from a partner. Functions affecting the overall device behavior are accessible from the top. From the bottom you can always access your pool of apps with a simple edge swipe .

Edge swipes are consistent and context independent

Each edge swipe has one function. Left and right edge swipe moves you back to ‘Home’, a bottom edge swipe brings up the ‘App Grid’ and a top edge swipe opens the ‘Top Menu’. Simple as that.

Evolving with you

You can tailor the experience according to your personal needs and wishes. The baseline is simple and easy already when you get hold of the UI for the first time. However when you advance you are able to unlock handy tricks, e.g. closing an app via a top edge swipe or direct access to Events from anywhere in the UI.

Subtle hints and clear feedback

Subtle hints combined with improved visual feedback teach you how to use the device while exploring it. The different nature of UI views, like the Top menu and App Grid, are introduced to you via different visual graphics and motion graphics. This all makes the UI more predictable.

‘Built-in forgiveness’

When using devices quickly or in a hectic environment you sometimes may e.g. miss defined technical threshold for edge swipes. To avoid slowing you down we predict your intent and provide the intended function or view.

Balanced layouts and meaningful motion graphics

We put a lot of attention into layouts, scaling factors for fonts and graphical elements so that they are rendered beautifully and balanced on lower as well as higher resolution displays. The applied animations are meaningful and always serve a purpose instead of just being eye candy.

Separated Lock Screen from Home

The combined Lock screen and Home with a status area in between seemed to be a neat idea. However, it made Home complex and difficult to maintain from the technical point of view. Furthermore it restricted us to offer you a competitive UX in case of an enabled device lock code. Therefore we separated the two views from each other.

The separation of the two views also required a re-design of the status area. Here we maintained the great solution enabling apps to use 100% of the screen estate as well as the possibility to peek from an app to see status info. However we eliminated the two different interactions on Lock and Home to access the full status area, as well as the vertical jump effect of Home after swiping an app away. This greatly calmed down the behavior and makes it easier to follow the app and its position in the Home view.

On the Lock screen you can now apply either a left or a right edge swipe to unlock the device and access Home; the same logic as you apply when navigating from an App to Home.

The location of notification icon(s) on the Lock screen are now linked to the related action. This means whenever there is a notification icon, then we offer you a handy shortcut directly to Events via a left edge swipe. 

Laid back app covers on Home

Home can now feature as many app covers as you want, and there is no limit to 9 visible ones anymore. In addition, the App covers do not all shuffle around anymore after swiping one app away. This is achieved via a new logic for positioning the covers: newly opened apps will go the end of the grid, while already open apps will go back to the same location where they have been. This change makes the whole experience more laid back, it’s easier to memorize the location of a certain app cover, and thus makes multitasking even more powerful.

Reduced set of Cover actions

Cover actions are handy. They become even handier if you select actions frequently used, if they really shorten a task flow and also make the cover easier to identify. After critically reviewing our current set we had to admit that some actions did not fulfill our targets anymore. Therefore we removed some, without removing the support for two cover actions altogether because they are convenient for e.g. the music playing use case.

In order to avoid accidentally activated actions while swiping between Home, Events and the new ‘Partner space’ we altered the interaction of the cover action, from horizontal swipe towards a tap interaction. We liked the gesture support, but when reflecting this against to the project objective then we had to let it go. 

The same OS means the same UI 

What is important to remember is that when the Jolla Tablet is ready, we will have one Sailfish OS, which supports different HW architecture, different screen aspect ratios and resolutions. This means that we will run the same SW and the same user interface on both the Jolla tablet and the Jolla smartphone; except a few modifications due to the smaller screen size of course.

To be continued…

There are probably many more insights, topics or questions to the OS design, and we will come back to those in future blog posts. Nevertheless we hope that at least some of your questions could be answered or clarified in this post already. 

Please continue providing us feedback and/or suggestions via together.jolla.com or our other channels; user feedback is the key element in developing the design further and improving the OS over time.

Martin Schüle

Chief Designer of Jolla. Passionate about holistic and multidisciplinary design. Loves his family, renovating old wooden houses, as well as playing handball.

14 Comments

  1. Awesome, Excited to see Sailfish 2.0!
    Hope this will also available for Jolla Phone.

  2. Great article. What is you define the lower 1/4 of a cover as an cover action field. Then it will be possible to have 4 actions. Right,Left,Up,Down.

  3. “There is no limit to 9 visible ones anymore.”

    Great news ! I didn’t see it on MWC reviews, how it work ? By swiping up/down view to “scroll” on home view I guess ?

  4. These are very welcome changes. Can’t wait.

  5. There is no information about the split view (last perk reached in indiegogo campaign).

    I means the only information that we have, it comes one day for sure.

    Does it comes on the first version of sfos v2.0? or later?
    Something is already planed? Someone has already work on it?
    How does it look like at the end?

    • It was communicated in a FAQ that it will be added with a software update later in 2015. So I would not expect it for os 2.0 release.

  6. Way to go, Martin! Good blog text and keep up your good work!

  7. Very nice on the desing side of things!

    But how bout the functionality? Will long standing and very annoying bugs be fixed?

    I’m mainly thinking about the very problematic CalDAV sync implementation, which not only hides many events from the smartphone that are actually there.

    Currently we also have the “summertime bug” which promotes many (but not all) events an hour to the future.
    Very annoying and for me a reason to leave Jolla, if this is not handled soon. Sad enough that tasks (with due dates, reminders and eventually priorities) can’t be handled – that would be a goodie.
    But a calendar that’s not working reliably is a real showstopper for me.

    Apart from that other base apps could need some polishing and feature addition. Mail app could support folder subscription, mail flagging, views. Here Maps is also far from being a feature rich map and route app…

    Best regards!

    • I understand your frustation but I don’t think it is in writing it here in a blog especially in an article dedicated to design that the bugs will be solved.

      About the hidden events, read https://together.jolla.com/question/89528/solved-calendar-hides-caldav-events-after-setting-reminder/?sort=votes&page=1. The person solved his problem following indications (it is in update2).
      About the summertime problem, there will be some updates concerning caldav in the next update or the one after so maybe it will be solved soon.

      • Of course I understand that that this isn’t the 100% right place.
        But still I thought after all this blogging about a new product (the tablet), great design, UI features, etc. it might be time to send a little reminder that other features need to be looked at, too.
        I’ve participated with the TJC community and posted my problems, comments and votes there, too. I know that the Jolla guys look there and follow some topics.
        Still some bugs are so disturbing and nevertheless long running, that I couldn’t resist the urge to add my 2 Cents here…

        The Jolla guys are doing (or trying to do ;-) ) great work and the OS is unique and generally great. I’ve seen the list of topics for the upcoming OS releases, some are great and eagerly awaited. But still in the future…
        And at some point enthusiasm and the will to support this system are thwarted to a halt – by basic issues…

  8. Looking forward to Sailfish OS 2, whilst still enjoying the current iteration on my phone.

  9. Sailfish will now guess which gesture I wanted to make instead of what I made – yey! Glad that this innovation made it in.

    Then the core views navigation model.. Is it so that Events and Partner Space are still available from the Home screen sides only? So I still need to spend many swipes for getting to Home from the bottom of my 7 screen long app list if I want to have a look at the events?

    • Edge swipes are consistent – one left/right edge swipe always brings you home, from within an app, from the lock screen, from 10 screens deep in your app list ;) Unless you’re already home, then it brings you to Events or Partner Space.

      • Left swipe from in-app list brings me to.. Home that is on the top? N9 way when moving left was moving you actually left looked more consistent to me :)
        Anyway, it will be way faster than before and that’s progress!

Trackbacks/Pingbacks

  1. Jolla – Äijänpäivänjärvi | P.Tärkeä – Ploki - […] Tulevaa isoa päivitystä odotellessa kannattaa lukea Jollan viralliselta blogilta niistä prinsiipeistä, joiden ohjaamina Sailfish ja Jolla kehittyvät: Design insights: …

Submit a Comment