The story of SailfishOS browser

Why on earth would someone start yet another browser project, when there's so many already out there? Well, because all mainstream browsers are more or less scaled down desktop browsers, than something designed with one handed mobile use in mind.

Looking at the image above, the two examples from the left are impossible to comfortably use without altering your hand grip. Also the reason for such design is obvious just by looking at desktop browser interfaces: they hardly need to be operated with one hand alone. I mean, try lifting your desktop/laptop with one hand, and enter a website address.

Even if you can somehow do it, it's not comfortable; and downscaling that interface design to 5" screens does not change that. You'll still need both hands to operate it, which is an unacceptable requirement for a simple tool that should increase your potential, not decrease it.

And that's where the third example on the right comes to play. Obviously, we're not doing everything by ourselves. We chose to build our web browsing experience on top of Mozilla's Gecko rendering engine, developed for the Firefox browser.

Then, let's look at the two major steps we took before ending up with the current SailfishOS browser design. There's some good things we learned along the way.

Version one

In addition to moving the toolbar down, the first design (click to enlarge) used separate pages for both tabs and website address. The aim was to avoid the performance hungry scenario, where some web content is rendered in the background, a virtual keyboard is open, and there's search suggestions on top of everything.

The toolbar had buttons for back, address field, tabs, reload/stop and forward. In the end, the design was discarded as too complicated to understand. The root cause was in the magnifying glass icon. People didn't associate it to searching the web.

Version two

The next image shows the design that actually shipped with the Jolla phone sales release (click to enlarge). It combined both tab and addres entry into a single page. And instead of a separate address eentering icon, it promoted easier bookmarking.

We got a lot of negative feedback for that design, as it added an extra step to searching something or entering page address, and also made tabs functionality unnecessarily complicated to understand, use and develop.

Version three

The current design brought back separated tabs and address entry points. Tabs still use a page, but the latter one behaves like a toolbar extension, so that you can still see a bit of the webpage underneath. Much more useful functionality was also added throught the expanding/collapsing toolbar.

The feedback has been really good, and although I'm not completely happy about two different gestures to get back to browsing (flick address overlay down to close it vs. flick tabs page right to close it), we're much closer to a modern mobile browser interface.

Something that supports the way your hand works, instead of how you moused around in desktop interfaces few decades ago.

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.

Sailfish OS growing pains

A pain that either forbids you from falling asleep, or aprubtly cuts your awesome dream short during the night.

It's your your junior legs that are hurting from a reason neither your parents nor doctors really know. A painkiller, accompanied with some medical jargon, is all that you're administered with. Followed by reassuring words about things getting better over time. And they do, because such are growing pains.

The Sailfish OS 2.0 demo software made its debut in Barcelona, at the Mobile World Congress. It got amazing reception from both Jolla booth visitors and media. It even landed us an award for the best tablet in show. However, our community and early adopters are not your average group of enthusiasts. Not too long after first hands-on videos reached youtube, various social media threads about missing features were open for business.

It's no wonder. That's the risk of demoing unfinished software publicly. But there's a solid reason behind us doing so. When it's your turn to be in the showroom spotlight, in-between some billion dollar companies with their competing products, you need to make everyone experience the end result. And demo software has the exactly opposite emphasis compared to something you use on a daily basis.

The demo software had to piggyback on easy and familiar features people can immediately recognize, understand and remember. Not on groundbreaking things that reboot the mobile computing or touch interaction, because those things require time to materialize during actual use. For someone already familiar with Sailfish OS, the demo software lacked many features that really add to the long term user experience.

But at the end, we didn't go to MWC just to show another product we've made. We didn't go there to show what we've done so far. We were there to represent everyone who has ever supported us. To make sure your decisions and voices count. This is a movement instead of technology. It's more human than anything else out there, so it has all the potential to grow to the right direction.

Even if it hurst a little.

I'm going to end with reassuring words about things getting better over time. And they do, because such are growing pains.

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.

4 design tips for edge gestures

This post is continuing my earlier article on harmonizing touch screen gestures.

Look closely at recent apps and mobile operating systems. Swiping over the screen edge to trigger navigation related action, is becoming increasingly popular. No wonder, as edge gestures are fast and comfortable way to interact with your mobile app or device. They have a huge potential in them, but only a fraction of it has been put into use.

It's not all unicorns, rainbows and marshmallows, though. These hidden gestures come with major drawback in discoverability and variation in use. Here's few tricks how to improve the way edge gestures can be put to use.

1. Keep it simple, consistent and fit for one hand.

I can't stress this enough. The less there's to memorize, the faster it's to master. Eliminate exceptions and special conditions when an edge gesture is not working, or does something completely different. Focus on a robust gesture recognition, and let the physical repetition do the work for you. It's like training in any sport, so make sure those training conditions are obvious to the user. Interfaces are just tools, and a good tool needs to be simple.

2. Think edges as physical buttons.

Edge gestures work especially well in controlling an operating system. A single edge gesture can be harnessed to perform similar kind of actions. For example, one edge can do things related to the power key (turn off screen, change profiles etc), while another one controls application window (minimize, close, windowed mode). Like in majority of other devices, notifications and whatnot could reside in another one.

So, with only three edges, an extremely competitive and simple interface can be built. If more than one action starts from the same edge, use absolute care in fine-tuning the feedback for it. The finger movement needs to feel different for your brain to associate them to their corresponding actions. Traveled distance, change in direction, speed or physical location, are all your usual suspects for separating them. Keep it simple, and prioritize the most used action.

The relation to hardware buttons helps people understand the idea behind it much better. Memorizing actions becomes faster and more natural, when there's a familiar relation between them. The reason for some actions not being available becomes more obvious that way. Take application window controls as an example. They are only available when there's an application window on the foreground.


3. The edge feedback is everything.

Just like with any other interactive elements, when user interacts with the edge, there should be an appropriate feedback on it. This is important for many users not familiar with interactive edges. Gestures in general can be performed so fast, that it's a good idea to keep the interacted edge highligted even after the gesture has been succesfully completed.

If your design uses gestures to control the application content, having different transitions for edge gestures and application content gestures is an advisable idea. It's a valuable difference to tell the two appart. After all, if edge gestures control the system level navigation, the feedback should be different than the application level navigation. Let's look at the hint animation for unlocking a smartphone as an example.

If you want to use edge gesture to unlock, you should direct attention to the interaction area. If everything moves (right side example), it implies parallel navigation (like going through images in gallery) instead. If you have plans for any lock screen controls (phone call controls, maps, flashlight, audio playback), you most likely should reserve that center screen flick for such actions.


4. Edge notifications and toggles.

This kind of edge indication can be used in several different ways to draw user attention to it. It can be indication of new content, or simply a reminder for a new user, that an edge gesture exist. The catch is that it doesn't introduce a tappable object on top of a keyboard or other interactive elements.

Since user is not able to control when someone sends a message to them (or when the system decides to emit one), it's annoying when a banner appears on top of link, only milliseconds before user touches it.

However, if the notification access is tied to the edge interaction, your tap will be registered by whatever it was intended for. The duration can also be shorter to avoid banners loitering on your screen for too long. You anyway know where to check those notifications.

Finally, if you want your edge to function as a toggle, the edge indication should also behave as one. This means that subsequent swipes across that edge turn the edge indication "on" and "off" again. Just like tapping on a regular toggle switch would.

The cool thing with edge toggles is in the effortless way to control it, compared to traditional notification panels. Those you need to close with the an opposite edge gesture, which require considerable thumb mobility to perform with a single hand.

With these tips, you should be able to considerably increase edge gesture benefits, while avoiding the common gesture pitfalls that plague major operating systems and applications.

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.