Wednesday, December 10, 2014

Ambience: the story behind Sailfish OS looks, part 1

As a part of our daunting task of creating a new mobile operating system, a visual story (theme) for the user interface was needed. What that usually meant in the past projects, was a ton of work containing:

  • appearance for system UI (things that's part of the OS itself like home, lock etc.)
  • appearance for each application UI building block (buttons, sliders and switches etc.)
  • launcher icon style (how app icons stand out and represent the app itself)
  • generic icon style (iconography used across the OS and apps) 
  • creating graphical assets for actual implementation of system interface and application UI building blocks
  • document how everything is implemented correctly (fonts, colors, geometry, transitions, interaction feedback etc..)
  • continuously work on the documentation to fix mistakes, partial details and oversight
  • add new features and update existing ones in your documentation

In most cases, one or two design teams are working on this huge pile of things. Team compositions are usually something like this:

  • few chiefs for planning, leading, reviewing and managing the work
  • some seniors for heading key areas
  • a lot of designers to execute the design and deliver it to be implemented. Usually one per application. 

That easily means work for 15-25 people. At the time when we started, we had 2. We couldn't really continue the Nokia N9 style, due to both the amount of work required (see above) and it was still part of Nokia's brand. Same restriction applied for going for Android or iOS -copycat style. Too much to do. The amount of work needed to define, implement and maintain such an UI style, would've burnt us up in no time. Not to mention delivering something like that, understaffed, with a competitive quality. We went the opposite way, do as little design as possible.

The current Sailfish OS visual appearance was born out from the idea, that it's not the interface that matters, but what's around it; starting from the user. The more we could capture that, the less visual design would be required.

Let me open that up a bit more. The less a designer dictates how an interface looks like, the more one leaves room for personal expression. The less you try to control everything, the more the interface can become adaptive, and to resemble its owner.

We didn't want to control everything in Sailfish OS. That's not what personal is about. We wanted to make it adaptive, so that every device would look unique through portraying something that's dear to the user. As a designer, you cannot decide what that something is. You need to let go and trust the user.

And we did. We didn't end up defining everything like the competition. We almost completely eliminated documentation overhead (we're not shipping that, but a product), and instead worked with the actual software. We crafted a rule-set for adaptive interface, and continue improving and developing our own personal story.

The Ambience story.

In the next part, I'll dive deeper into how the visual style works (with example pictures).

Thanks for reading and see you in the next post. In the meantime, agree or disagree, debate or shout. Bring it on and spread the word.


  1. Very interesting to get glimpse on how the OS has been designed. Been using my Jolla for nearly a year now and I have to say, I really enjoy the simple, swipe based UI. My only criticism is hardware based. I find the device that little bit too big and corners are that bit too sharp for comfortable one-handed use.

    Would also be very interested to hear your ideas on what's coming next? One area of the OS that I feel is ripe for new ideas is the lock screen. Right now, we get some notifications there, the time and the date. It'd be great if the user could add their own customizations to the pulley menu there. For example, I am constantly turning on/off bluetooth and mobile internet, if I had the ability to add a toggle button to the pulley menu on top of the homescreen for that, it would rock my world. Also with regard to notifications themselves - I find the content to be fairly restrictive - I think some kind of scrolling text box for the body of the e-mail could be very useful in quickly establishing how important a mail was for example. Finally, and this is just for the nerd in me, I would love to see the OS skinnable - like Symbian used to be.Not functional at all, but something I greatly enjoyed :)

    Any thoughts?

    1. You definitely can customize to pulley menu.

      Maybe you can try to rock your world with these:

    2. Oh yes, anything is possible since it's just software. Also, just to be clear, I'm not designing things for myself, but finding ways to keep things manageable :)

      I wish the situation would be better in terms of community contributions so people could help more with the bigger picture..

    3. Sorry, didn't notice the first comment :)

    4. Great to hear these posts have been useful. The notification system is very basic, and we hope to get it to a shape that it can offer more than what you currently get.

      Our community has been working a lot on tweaking things cleverly to alleviate biggest issues. Anon already posted some links that you can check out.

      I hope we can improve the experience for such cases when you need to jump between on/off states for a feature.

      Thanks for your comment and hope to see you here again :)

  2. In some places it shows that there weren't enough people up for the task. Ie. the icons (apps and everything else) are -sorry i cannot put it mildly- ugly. Also it could use some more animations and transitions in places to feel more fluid. And the mother of all ugly designs ever. The silica button. A line below some text.

    On the other hand the way you interact with it (gestures and stuff) is near sublime minus one or two things.

    1. Thanks for the feedback, no need to apologize for honesty. Yes, all that is true, and it will organically improve over time. The thing with visual design is, that it's never ready and never good enough. Whatever you do, someone has an issue with it :)

      That's why we had no choice to leave it minimalistic since we couldn't sunk thousands of hours in working on it - and finally ship nothing. This way, we get more feedback where to drive it, and also once the graphics stack matures, we get richer and smoother experience.

      The traditional box button has problems with nested margins and is known to be a headache when it comes to translations work. Normally when working on English interface lingo, nothing truncates.

      So, we tried to evade internationalization issue, but ended up hurting your visual preferences. I'm sorry about that.

      Thanks for stopping by to comment. Take care!