Showing posts with label Design. Show all posts
Showing posts with label Design. Show all posts

Friday, July 31, 2015

Man and its computer, part 2


In part 1, I shared my conclusions about how similar today's computers are. They all run different applications, ranging from entertainment to productivity, from simple to complex. This post will compare in closer detail how graphical user interfaces (GUIs) of said computers help people to get the best out of their investment in these devices.

Desktop and laptop computers

When you use one for the first time, you see en empty desktop. The apps that you bought the computer for, are hidden somewhere else. A few app shortcuts might be visible by default, and the rest are tucked away below multiple steps for user to configure and manage.


Indication of an application that has been sent to background, ranges from subtle to quesswork. The desktop wallpaper, as seen in examples 1, 2 and 3, has clearly the biggest emphasis. It's however not exactly why these computers exists.

Phone and tablet computers

Upon starting one of these devices, user sees that applications are also divided between multiple locations, with iOS being the only exception here (example 1). It shows everything on a single location. Android (2) has multiple home screens, with all but few installed apps hidden in yet another place. Windows phone (3) is a mixture, while Ubuntu Phone (4) has much bigger plans than apps.


For an unknown reason, all applications that have been started, are demoted and hidden to a task switcher view. A design that looks and works like an afterthought. Windowed apps are slowly starting to appear, but still feel clunky and bolted-on solutions. The experience doesn't change when the device is connected to a larger screen. Only WP and Ubuntu phone are pursuing scenarios beyond the traditional desktop and mobile divide. Kudos for both for focusing on the future.

Console computers

The same pattern is sadly repeated. The software that user benefits from, is divided and scattered around the main user interface. The current game/app is prominently shown, but when it comes to seeing what else is installed, or running in the background for that matter, it's not what these interfaces are intended for. And consoles are usually connected to over 40" screens, so it's not that they wouldn't have space to put it in.


There's no support for multiple screens, and these computers are sometimes even more limited than mobile ones, due to shortcomings of gamepad input. Xbox OS has an edge over its competition in doing several things at the same time by allowing windowed operation of some of its core features, without breaking the context user was in.

  The verdict

Even though all computers and their operating systems are near identical in terms of what they do; companies developing them have chosen very different graphical user interfaces for them to do it. It means, that:
  • users have to memorize different interface conventions between different computers
  • multiple OS'es (or variants of them) are needed to support different devices
  • only big companies have resources to develop multiple products from different categories
  • massive overlap in required effort when developing software for multiple devices and/or operating systems

Back in the days, with just few computers around, there was no need for a common approach to GUIs. Instead, there was plenty of time, ignorance, workforce and money. As a result, we have several user interface paradigms, that all fail with various degrees. The shared mistake is focusing on building physical products with 'art directed' interfaces. A direction based on a personal perception how a particular device should be used, easily masks any digital similarities underneath the glamorous surface, abstracting important qualities all operating systems commonly share.

To sum it up..


Every 'signature charasteristics' that desktop, mobile and other interface paradigms have managed to pile up over these years, are merely distractions. They occupy minds of designers, developers and and end users alike. Our digital world is a hot mess - partly because of our obsession over the current categorization of computer GUIs and OS'es.

If something is certain, it's that software has never needed such arbitrary categorization - and neither do people using them. Future user interfaces will leverage different screen sizes and input types when they become available; instead stubbornly serving a single form factor, like they do today.

How can we help people to see beyond their lust for yesterday? How can future user interfaces better focus on increasing our human potential, if our preferences and behavior explicitly tells them otherwise?


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.

Tuesday, June 9, 2015

No more empty smartphone screens

Ever since I parted ways with my trusty Nokia 3310, empty standby screens of many smartphones have felt cold, distant and useless in comparison.

Although, various Windows phones, and a handful of Android devices come equipped with features that make their standby screens appear far less dead. After all, credit must be given where credit is due.

No need for power or home key presses, display double taps or other conscious interactions. The moment they're exposed to the world outside users pocket, both the phone and its user are already one step ahead of everyone else. A digital extension of a human intention.


Sailfish OS also has a similar feature in development we call "Sneak Peek". It's not ready yet, but I've been trying it out for almost one year now. Somehow the feature always carried over software upgrades, up until last week at least. I had to re-flash my phone, turning the feature off for good.

The sudden change in device behavior has left me staring at an empty screen more times than I'd like to admit. Looking and feeling like an idiot.

One step too much


Curiously enough, I realized that all those solutions I mentioned earlier, had one important piece missing. They all focused only on what user might want to see, but ignored where that would lead: what would people do next, after already holding the device in their hand, with the display showing relevant information?

Easy. You either want to interact with it, put it back to your pocket, or set aside on a surface near you.

And the problem with everything we have out there today, is that they all just create an additional state between the display being completely off and fully on. A glance or active screen is shown first, before you can see the lock screen. If you desire to interact with device functions below, you have to first go through that extra screen. This throws away part of the potential gained through anticipating user intentions.

To allow user interaction, it would make more sense to automatically show the lock screen, without any added steps. User would see the same information, intereact with lock screen controls, or continue to unlock their device.
Yes, it would requires some adjustments to how the lock screen behaves. It might be something like these wildly conceptual images, that are created to support this post. Take them for their illustrative value.


Moreover, the appearance is secondary in the long run. How it feels in the daily use becomes much more interesting and valuable quality. At first, it might sound strange for the phone to behave like this, but let's look at what would happen if it did.


The first thing you'll notice, you can get to whatever you're doing a bit faster. People use smartphones over 100 times a day, with majority of those instances starting with manually turning on the display. As the manual part is removed, less attention and accuracy is needed.

Second, the amount of user errors would decrease, because nothing was added. Every gesture and functionality works just the same way. It's the same lock screen, nothing more, nothing less. It's just working with you, not against you.

Worried about accidentally unlocking it? Don't be. Every lock screen has a built in protection mechanism to prevent that. Made famous by that "slide to unlock" slider on the first iPhone. We flick or swipe long enough distance to get past it.

Finally, removing your device from your pocket becomes much more friendlier event.


Just pick up the phone from your pocket and place it on a surface near you. Display will light up to greet you. An accelerometer inside the phone can tell whether you're holding it in your hand, or it's resting on a table. By following that information, it's easy to turn off the display sooner to save power.


Naturally, if the phone is on a table, the same sensor can be used to detect user picking up the device. And for cases you don't want to pick it up, you're just a double tap away from whatever you need.

By now, I'm sure some of you've already wondered why not use black background with colored text and icons on top. Well, it works great if there's no display backlight. If there is, too bad. I illustrated the problem below.


Those liquid crystals that are used to affect the light passing through, cannot block all of the backlight, resulting in gray appearance instead of black. This is very visible at night, inside movie theaters, clubs and ancient dungeons.

Using a background image will simply make the issue less apparent (can be turned off for AMOLED devices to save power). Also, a user selected image is much more personal option compared to someone saying it should always be black.


Making smartphones anticipate our needs is not rocket science. Especially when it comes to the lock screens scenario that we manually go through almost 100 times a day anyway. It's much more about seeing past of our past experiences. If you see through them, and get a taste of what things could be, it's going to be difficult to go back anymore.

You'll soon realize how passive most smartphones are. As if they didn't have the information available to anticipate the most basic thing we do. Once again, you've been staring at an empty screen. Looking and feeling like an idiot.

Welcome to the club.
 

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.
 

Tuesday, March 31, 2015

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.

Monday, March 16, 2015

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.

Saturday, February 28, 2015

To evolve, or not to evolve?

That's not even a question.

Be it building shelters, gathering food or traveling long distances; people always had an innate desire to do things better and faster. It's been always possible to improve some part of an activity or a tool related to it. Even entire professions have been forgotten after becoming obsolete. Thanks to the increasing pace of technological advancements, our children won't anymore recognize objects their parents grew up with.

Except when it comes to user interfaces.

I grew up with computers around me, and my kids will grow up with even more computers around them. Over the years, they've gotten a lot smaller and immensely more powerful. What hasn't really changed, is the graphical user interface staring back at us. The desktop metaphor with windows, icons, menus and a pointer (WIMP) has stayed intact for over 40 years.

The first mobile devices had no touch screens, and had to be navigated with either directional keys or a scroll wheel. It was logical to use the same approach for such a miniaturized desktop, but when touch screens became more popular, user could directly interact with things. This made controlling a pointer redundant.

After the mouse pointer was removed and touchable things made a bit bigger for suitable finger operation, everything was ready for profit-making. Nobody seemed to question, whether an interface paradigm originally designed to be operated with a keyboard and mouse (WIMP), was really applicable for a mobile touch screen use:

Unlike desktops, mobile devices
  • are primarily used without a supporting surface (table or similar)
  • are used in dynamic environments with disruptions
  • can't assume user is constantly looking at the screen
  • can't assume both hands are available for a basic operation
  • can't assume equal amount of time is available to perform a task

Regardless, all mainstream mobile operating systems treat mobile use the same way as desktop use. The familiar button-based navigation model, dating back 40 years, does not really qualify for mobile use. It requires too much attention from it's user to be efficient. Too much precision to be comfortable. Too much time to be fast.

Replacing mouse and keyboard with touch alone, just decreases the speed user can control the system, making it actually worse than the desktop. It's been a wobbly decade of mobile user interface infancy. The only way it's gotten any better, is through nicer visuals and smoother transitions. But that's just surface - a better hardware clad in finer clothes.

At this rate, my grandchildren can still identify an Android phone, because baby steps were considered good enough. That's a valid strategy as long as everyone copies one another, and no alternatives exist: a family tree that looks like a ladder. It's an open invitation for smaller companies to deliver less inbred products, that are designed to adapt to your life, instead the other way around.

If you still think those archaic desktop conventions are enough to keep your massive software business afloat today, you're not the first one. The bad news is, that the only way a dinosaur could avoid extinction, was to stop being one, and evolve into something else.

Before it was too late.

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.

Monday, February 9, 2015

Breaking the application grid

Some time ago, I wrote an article about the role of applications on a smartphone. This time, I want to burrow deeper both into their actual presentation and location, where apps are physically found from.

Meet the app grid (launcher / app drawer). Before gunning everything down, let's find out the problem before fixing it. We should always try to live how we preach, right. My top issues with multiple pages, filled with app icons in an neverending array, are:

  • Icon arrangement is the only way to personalize how the grid looks. It might work for some cases, but as it grows longer, it starts to be tedious to find anything from it.
  • Related to the above, an even grid does not offer enough cues to find things in it. It's slow to scan through a single row after another.
  • Moreover, icon folders/groups alone leave little room for building information hierarchies. Be it an app, contact or a link to a website, attaching them to your launcher makes everything one step closer to a mess you don't want to tread on. This is the point when Android home screens start to sound like a great idea.
  • Finally, and partially related, your app usage is traditionally divided between a task switcher (active apps) and a launcher (installed apps). If the app is not present in the task switcher, you have to exit it, and go to the launcher instead. Even worse if you have to hunt through multiple home screens between the two.

While Sailfish OS already solves the last one by combining app drawer and switcher, to form a single location, the grid is still just a huge mass of identically spaced icon rows, with very little visual cues for our eyes to lock on. That's the gray part on the image below (click to enlarge).


The blue half of the image on the other hand, illustrates how user could arrange icons to support their personal use. Don't take it as a suggestion how to arrange anything, as it's just an illustration. Obviously, the problem exists also horizontally arranged pages, but the presented solution is a bit challenging to pull of in that direction.

If you find the idea ugly or messy, it's easy to understand. From a visual point of view, a repeating pattern and a strict order is appealing to look at, even though they harm the long term usability of finding things from it, especially when the amount of icons increase. Don't worry, it's not the first time usability and aesthetics collide.

It's also worth noting, that while most people might not concider the app grid a problem on their Android devices, they still like to pin app icons and other stuff on their home screens. It clearly tells that the grid quickly becomes unwieldly to browse.

Now, I would like to entertain a thought: what if the app grid would've been fixed to support more dynamic layout for people to personalize. As a part of the software, the launcher already exists. Why not make it more customizable, instead of building Home screens on top to hide the issue?

Would Android still have multiple home screens? Nobody knows.

Would it be simpler? Absolutely.

Would it break the Android UX? Nope, just that archaic app grid.

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.

Monday, December 15, 2014

What if game controllers were designed like smartphones

Sometimes, we find products that are carefully designed with human body limitations in mind. And sometimes products go to market with utter disregard to how and where people use them.

I started wondering how would it look if, for example, a game controller would be designed without actually thinking how our hands interact with it. Here is an existing smartphone, next to a made-up game controller:

Click to enlarge
Obviously, that wouldn't really work out for any gamer, since your thumbs would be functioning on their movement range limits most of the time. It would be painful in two ways: one, your hands would be killing you even after a short session. Two, in an online game, everyone else would too. As a gamer, I'm glad we don't have such controllers, but sadly we have phones that are painful to use with one hand. And that's killing me.

Naturally, I'll just go ahead and flip that around. Here you can see the same focus to ergonomics that's applied to existing game controllers, going into a smartphone interface design. To most of you, it looks familiar:

Click to enlarge
Just like that, we can play games and use smartphones as much as we like without collateral thumb damage. And trust me when I say this, we clock in some impressive amounts per day on both. Something that smartphone interface designers in the past didn't take into consideration.

Or chose to ignore.

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.

Friday, December 12, 2014

Ambience: the story behind Sailfish OS looks, part 2

In the previous part, I went through the reason to not follow what other mobile operating systems do, and stay away from a static interface style. The main problem with themes, is that they just alleviate the real problem of interfaces being static, because someone wanted it to look the same for everyone.

Instead doing small things here and there, we wanted to build the personalization story around a single strong feature. The most used way to customize a device yourself, is to change the wallpaper. But we didn't want to stop there -  we wanted the wallpaper to signify how the device currently works.

To do that, it should affect also to how individual applications look. This naturally allows the image to carry more meaning to its owner than meets the eye of an outsider. The feature was named as Ambience, which means atmosphere, surrounding, mood or environment of a given place.

Here's some examples. These are screenshots of my lock screen, home screen and calculator app (click to enlarge them). In the first set, I have created an Ambience out of Orion nebula photo, and set the device to not emit any sounds when that Ambience is active. You can see the selected image being visible throughout the interface, from lock screen to the calculator.


Alright, unto the next set. This time I have selected an image that shows a circuit board as Ambience motif. More discrete ringtones and notification sounds are defined to fit my working mood and prevent disturbing others. It's easy for me to tell apart green and red interface as they carry added significance for me (both photos are personally relevant for me, and I have defined the behavior for each Ambience). Red is silent, green is discrete. No need to squint at tiny status bar icons.


Moving on to the third set, where I used an abstract macro photo to create my casual Ambience. When activated, ringtones and volumes reflect my preferences for events, going out with friends, or just idling at home. Again, it's trivial for the owner of the device to understand the device behavior through meaningful images and colors instead of minuscule status icons.


To create a new Ambience, all you need is a large enough image. Download one from web, use camera to capture something nice, or create a unique piece with your favorite illustration software. With a little bit of testing, anyone can do it. Results will often surprise you. It's an invitation to explore how different kind of images work and shape the appearance of your device. Use images relevant to you, don't follow but pave your own style. Be playful and try different things. Delete the bad ones and enjoy keepers.

Sailfish OS Ambience journey has just barely started and currently only includes partial sound settings. To get some idea what could be done with it in the future, take a look at what our community has already proposed. In short, it's like a visual umbrella for grouping any kind of behavior you might frequently need to change based on context.

How you make use of it, is up to you. After all, it's your personal device. And this time around, it really means it. The way your phone looks like, is not shared by anyone else.

Each Sailfish OS device is unique in that sense. Reflecting their users.

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.

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.

Tuesday, November 11, 2014

Why do people get into fights with computers?

The internet is full of stories about the volatile relationship between people and computers. It's because by nature, both sides are completely foreign to each other, only separated by a thin layer called a user interface. It communicates the state the software is in, and provides methods for the user to control both software and hardware features of the computer.

To put the role and importance of user interface into a perspective, I'll compare it to an intergalactic interpreter. It's job is to prevent miscommunication and when possible, recover from situations caused by it. It works between two species that have nothing in common with each other. A misunderstanding between such parties can escalate quickly and have irreversible consequences. And naturally there are good and bad interfaces when it comes to doing interpreting. The former takes pride in focusing on efficiently getting the message across as authentic as possible, while the latter focuses on performing party tricks.

I personally value getting the message across. For example, we use a smartphone so many times throughout the day, that it's frustrating if an interpreter doesn't understand you, or treats your hand as something it's not. A good interpreter is in tune with you. It knows what you're about to do, understands differences in your tone of voice and body language. A bad one requires constant focus from you, because it doesn't fully understand you or isn't compatible with the way you function. That means neither side can really function efficiently, and mistakes are bound to happen.

And at the end of the day, when machines finally turn against us, I'm confident in pinning the blame for that on the interface between the two. The user didn't understand why the machine wasn't doing anything, and the machine didn't understand why user was anyway doing something. The interpreter was most likely putting on some lipstick when all of that happened, and the resulting nuclear winter allows our kids to make glow-in-the-dark snowmen all year around.

To delay the inevitable, let's focus on both prioritizing and improving the interpreter qualities of user interfaces we build to communicate with machines. These two species so alien to each other absolutely require it. Because with the current rate of technological advancements, the smartphone of tomorrow will be capable of horrors far beyond running a Facebook client.

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.

Wednesday, November 5, 2014

What comes after applications

Over the past few years, there's been a lot of discussion over mobile apps: should there be apps or not? Obviously the question itself is an opinion divider. One side has faith in apps, while the opposition doesn't. This piece by Paul Adams from Intercom, was the latest manifestation I enjoyed. A good read for anyone interested about mobile computing.

This phenomenon is a result of people getting tired of eating the same app pill for every issue they have. The five year old marketing punchline "There's an app for that" really explains the dominant mentality. And with enough repetition, it was rooted deep into our minds. The emerged "app evolution" debate is just an indication, that people have finally become aware of the indoctrination. This post is my contribution to the topic.

Naturally, there's a gray area in between both extremes of the debate. To me, an application is just one of many ways to solve a user problem. When smartphones really kicked off the mobile app business, everyone wanted a piece of that pie. As a result, it became difficult to jump out from the app bandwagon. In addition to the "me too" factor, what makes an app so attractive option, is the degrees of freedom it offers to both the user and developer. However, it comes with a price tag.

Mobile operating systems have grown a lot since those days. They offer much wider range of tools to build engaging experiences. The common mistake is to think you need to implement everything yourself. Below, is my rough categorization of different methods a user problem can be solved; and how "less control" can in some cases increase the value compared to "more control". It's a matter of identifying the problem before finding a fitting solution for it.


  • A background process takes care of performing the task in behalf of the user. It makes the solution feel like magic because user didn't do anything. As this requires an intimate knowledge of the lower software layers and contextual awareness, it's not really trivial to do. Not to mention being forbidden in many systems.
  • A notification uses existing mechanisms in an operating system to promote a functionality or a piece of information based on its relevancy. This can result in genius solutions, since the needed functionality can be conveniently offered regardless of the context user is in. Even if there's not much interface work involved, a reliable context engine is hard to get right.
  • A system integration takes a frequently used functionality and makes it an integral part of the operating system. This makes interacting with such a features much faster compared to an application counterpart. The result is a smarter and more holistic experience. However, this either requires rooting or OS ownership to do, so it's not an option for many.
  • An application is the last step in the scale. Almost everything is possible here. It's very powerful and can be tailored to fit very specific tasks. Using an application as a solution easily adds more steps to achieving a desired result. Repeating these steps frequently to do something feels dumb. Due to the amount freedom it gives, and the amount of work is needed, the application experience is the most vulnerable to mistakes. Everyone can make an app, and it shows.

At the end of the day, it's about thoughtfully choosing and combining methods available to you. It's the next step in building mobile experiences. All these methods have their places in our daily throughput of tasks. So, even if apps are important, sticking with just them is a sure way to forfeit the experience game. Same goes for denying the application as a viable solution. Having a meaningful combination of variety is the key.

Because people are not binary by nature, so therefore solutions we use to respond to their needs must reflect that. There's no silver bullet, or a size that fits all. Using interaction variety in your user experience will make it more natural and approachable. Transitioning from app-focused model to user-focused model will give a reliable foothold in the market strongly profiled by features, hardware specifications and price competition. Finding other ways to create value is essential to differentiate and stay competitive.

The more you understand the platform you're designing for, the easier it is to deliver more natural and smarter experiences for its users.

Apps alone will definitely not be enough.

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.

Monday, October 27, 2014

Just asking - a new image series launched

Just asked myself,

Why not to squeeze some of the points I make in this blog, into images that are.. say.. more approachable? I thought it would be a good idea. So I ran along with it and made a few over the weekend.

These two (just added 2 more) are just the beginning of a wider series of images, that either ask a simple question or challenge something in the current state of the smartphone industry. I really want to do this just to see if it's something worth continuing.

As always, the goal is to increase the awareness of more natural user interfaces, through the work we've already done for Sailfish OS at Jolla.



Here's the link in case the Picasa flash plugin crashed and burned.

Anyway, let me know how these work out for you. Any comments or image ideas are also very welcomed, so I can crank out more - or stop immediately. If you already haven't, this is the perfect time to visit the comment section.

Fantastic. Let's do this, since we don't try in Finland.

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.

Wednesday, October 22, 2014

What's wrong with multiple home screens

Quite a bit. Hold on to something.

If thinking critically, what does multiple home screens really add? Aside from multiple screens off course. Is there any explanation for their existence?

I hear this even in my sleep already: "Everyone thinks they're amazing / Everyone is used to them." But, that's just repeating an opinion. It doesn't explain why do people need them?

Another common one is: "Statistics tell us that people like products with multiple home screens in them." With that logic, you can say that statistically people also like seats with feces in them, because they use bathrooms several times a day. Sorry, people would be happier without the poo being involved if it would be possible.

This as well: "We have done extensive consumer studies to prove it's a must feature to have." Sigh. On paper, you can make people like poo just by asking them the right questions.

This comes up every now and then: "It's for everyone to personalize their devices." I'm pretty sure the device is already a personal one, and what user does with it, will make it even more so. Also, there's countless other ways to make the interface a personal one.

But the winner is: "What is this heresy I hear! From the beginning of time as we know it, home screen content has always been arranged in horizontal pages!" From the beginning of 2007. But then why is pretty much every other content browsed in vertical direction? Web pages, content streams, call histories, messages and gallery grids. All vertically arranged.

So really. Why does a smartphone need multiple horizontally arranged home screens? How do they make a smartphone smarter? What is the user need they fulfill?

Anyone?

I think it's actually the other way around. A smartphone would be smarter if it didn't have multiple home screens. The main issue is in the thinking that adding more, automatically equals a better product. And as usual, people are blind to the opposite.

It's a better product, that equals more. Let's try it out.

You give a user seven home screens, instead of five. Did it make a single home screen any better? Is it easier to move or find things between seven home screens? Are seven screens easier to decorate with widgets? Is it easier to find nice widgets that don't look horrible? Is it more personal solution? Did the product become smarter than before? Does it free system resources for actual user tasks?

Nope.

Then try removing all but one home screen. Make that single remaining home screen better. Make it smarter. So that it adapts better to what user is actually doing with the device, removing the need to juggle between multiple home screens. Because everything you did and worked on, is found from the same home screen, everything becomes much faster. You launched a music player, and suddenly the controls are also there. You arrived at work and your email account summary is greeting you on your home screen. Suddenly the behavior feels more helpful and smarter, since you can do more by actually doing less.

Do you spot a pattern? Better, equals more.

There's even the age-old saying about quality trumping quantity. Well, marketing was clearly invented as an counter-argument. Because smart is hard to do. Just adding more is easy. A hammer with three heads instead of a single good one: a great idea everyone can boldly stand behind of. And with a good marketing campaign, nobody notices it's heavy as hell and unbalanced beyond practical. The rendering looks amazing, though.

So compared to doing smart and meaningful things, marketing is dirt cheap. Guess which path big manufacturers favor?

So let's try one more time: Does adding more home screens make a product easier to sell?

Hell yes it does!

If I buy a hammer, I want a better hammer than I had before. One that allows me to work faster, more efficiently and comfortably, not to forget improved safety. I don't want to buy an inferior hammer, just because it's easier to sell to other people; who at the end of the day, would also prefer a better hammer with a single good head, instead of having the option for multiple ones.

That means the product was intentionally made to perform poorly, just to make it sell more. Since the modular-wonder-hammer has the option to add more heads to it, the potential to develop a single good head is lost for the sake of a nonsense feature.

If Sailfish OS would have multiple home screens next to each other, it wouldn't be possible to have cover actions as explained in my previous post. It would mean that the ability for user to interact with tasks would be reduced.

For the sake of having a modular-wonder-hammer, that's heavy as hell and unbalanced beyond practical.

To be honest with all of you. Making a better product is really hard and painful. It's because the industry around you keeps repeating how more equals better. Especially when the rendering looks awesome.

The dumbest thing I've heard.

In the smartphone industry.

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.

Tuesday, October 21, 2014

Replacing widgets with minimized applications

One of the most unique aspects of Sailfish OS, are active application covers.

They're essentially small windows on your Home screen. Each one of them represents a minimized application (not currently in full-screen state). The same function is found from any desktop OS, in form of a task bar or an application dock, that show all your applications that are running in the background.

As you know, there's no separate task bar or switcher in Sailfish OS. Only one Home screen. These covers show relevant and legible information, and allow user to perform important actions directly from the home screen.

On the first encounter, they kind of come across like widgets. And it's no wonder, since they actually pull double duty. Primarily, they're used to maximize an application to full-screen, but also allow user to interact with common features without the need of entering the app.

When compared to for example Android home screen counterparts, similarities start to run shallow. Widgets on Android are not in the same place where active applications are shown, so there's no real connection between the two. Even if they also allow using common features, there's a problem with doing it with buttons. I made a simulated example below, about Sailfish OS having separate tappable areas.

Accurately clicking a correct physical location on the display is easy in a desktop environment, the birthplace of widgets. After all, mousing on a stable surface is a breeze. But when you're walking or otherwise active, the overall movement of your body easily transfers all the way to your hands, making it harder to tap the correct button. And just because this interaction method uses our fingers to emulate a mouse cursor, it's already by definition an inferior approach for mobile interfaces that are not used in stable environments.

Sailfish OS solves this by not using taps for cover actions at all. Instead, user flicks the cover horizontally to perform an action. This makes it irrelevant where you tap or flick a cover. Both tap and flick touch events can use the entire Cover area as a target. This makes a big difference in the accuracy requirement for performing an action.

Since it's the flick direction (left or right) that defines the action (media player play/pause and skip song for example), it naturally limits the maximum amount of actions into two. And since tapping and flicking to left or right all have a different effects on how, and in which order, your hand muscles behave; it's easier for our body to associate them for different things. Again, the design both supports and takes advantage of our unique capabilities.

Whether you use all the potential through these gestures or not, is up to you. Each of us takes tools we use to different levels of efficiency. Some push them all the way to their limits, while others are comfortable in casual use. Both are equally correct.

However there shouldn't be separate locations for these two ways of use. In Android, the requirement for widgets comes from the poor multi-tasking performance, as well as system complexity. It's nicer to have multiple home screens filled with widgets, where user can perform frequent tasks. However, that's just adding more complexity by fixing the wrong problem.

By solving how minimized applications allow different degrees of user focus, and reduce the need to enter an application, the need for a separate location for widgets is removed. It both makes the OS simpler and leaner, and greatly increases task handling speed, since various user needs can fulfilled in the same location.

Responding to user required level of efficiency and control.

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.

Friday, October 10, 2014

Multi-touch and bigger screens

Brace for disclaimer!

Note that this has nothing to do with Jolla. People have been asking me about how could Sailfish OS work on larger touch screens, so here it is folks. Some theoretical design thoughts about Sailfish OS user experience, on a bigger size. This is important for the sake of understanding a mobile operating system design and the effects different touch screen sizes have on it.

Fantastic, let's move on.

Multi-touch makes an excellent parallel subject, when talking about larger touch interfaces. I've personally grown to dislike majority of multi-touch implementations because they seem to be driven by technical capability to track, rather than supporting the way we use our hands.

So what should multi-touch be then?

Let's use another tool example to dig deeper. I like comparing things to tools because of their simple, efficient and purposeful interfaces.

Think about a hammer and a nail. The task is to hammer a nail into a piece of wood. Your other hand holds the nail while the other one hammers it in. When breaking that down, we can recognize multiple smaller operations inside that task. Pinching a nail while holding it perpendicular to the target surface, is one. Whacking it in with a hammer in your other hand, is another. This is a simple multi-touch use case from the real life. With two types of multi-touch.

Huh?

Yes, I think there's two kinds of multi-touch. The first type is related to the task itself. You need to use both hands simultaneously for the same task to succeed. Hold the nail and use the hammer. The second type is related to individual hand operations inside that task. Pinching a nail with at least two fingers, and gripping a hammer with up to five. The latter is the most common use of multi-touch to implement a pinch/spread-to-zoom for example.

Ok, two types of multi-touch. Two-handed task type and multi-fingered operation type. There is no need to discuss about how many fingers you need to do something, because then you're focusing on wrong things. And I feel many existing interfaces are limited to only the operation type, because they're not focused on user tasks, but in something completely different. Not to mention forgetting totally what our hands are capable of.

So, I ended up with this definition because there wasn't really anything tangible behind existing multi-touch interfaces, in the mobile OS space. At least I haven't ran into anything that made sense. What I've found abundantly, though, is a lot of complexity that multi-touch can help to add. It's very easy by introducing more and more fingers on the screen, and mapping that to do yet another thing in the software. The amount of needed fingers has lately gotten kind of out of hand. Pun intended.

If you need more than 1 finger to move around in your OS, you should seriously look at the interface architecture and feature priorities.

"But with multi-touch , I could have an OS feature to directly alter orbits of celestial objects and.."

No. Stop it. You'd be still browsing, watching videos and gaming. And the only celestial object you know is Starbucks. Stop looking at increasing OS features, and pay more attention to enhancing user potential.

Alright, apologies for the slow intro. This is where some illustrations comes into play, and hopefully make more sense of the multitasking stuff above.

Sailfish OS was designed to be less dependent on display sizes than other mobile operating systems. This is because the most common user interactions are not depending on the user handedness, hand size or thumb reach, so the gesture based interface naturally allowed one-handed use of a smartphone sized devices.

"Hah, you can't really use a huge device comfortably with one hand, so your one-handed use benefit is lost then?"

Yes and no. The same way that Sailfish OS made a small interface fit into a single hand, it makes any larger interfaces fit two. This opens new ways to interact with larger devices due to the analog nature of touch gestures.

We should also understand that people are very liberal in how they use and hold devices in real life environments. In commute, at home or during a holiday trip. Most of the time, it's resting against something, and simply hold in place with one hand.

This a two hands grip, while using a full-screen application. This is a precondition to completing a task. My tool comparison is holding a nail in the other hand and a hammer in another.

The left (or right, it doesn't matter) hand performs the Peek gesture to expose the Home screen. The hand with the nail is placing it against the wood surface.

While keeping finger on the screen, user is able to see what three other applications are doing in Home screen. The nail is ready to be hammered in.

Without releasing the left thumb, user performs a cover action to play/pause/skip a song with the right hand as an example. Releasing left thumb after interacting with any active cover, would keep user in the application 1 (first image). That's a fast way to look into Home (just like on the phone), perform an action (enabled by the larger screen) and get back to the app. All without even really leaving it.

Alternatively, if user would tap another application cover, or trigger a cover action that requires a full-screen state, the screen real-estate would be divided between the two. The nail has been hammered in, and user is back to default state that precedes the next task.

This behavior is a natural progression of Sailfish OS Peek gesture and how application windows are handled. Only the support for the other hand and screen division was added. Both hands performed an individual operation that alone, completed a single task (pinch a nail and hold/carry a hammer). When they're performed together, a different task is completed (a piece of wood is attached to another). Just like we do so many things with in our physical environment. I wanted to focus on illustrating the task type, because there are countless examples about the single hand multi-touch, the operation type.

The value in all of this, is that the entire interaction sequence is built into the same application usage behavior, without any additional windowing modes or mechanisms that need to be separately activated and used. It supports the way we work and enhances our natural potential. After all, you don't turn your hand into a separate mode when you're driving nails into planks of wood. No, it's the same hand, all the time.

Similarly, when you need to reach something from a tool drawer, you will not physically enter the drawer yourself. You wouldn't fit. Instead, you stand next to it, open the desired drawer and pick up the tool you needed, before closing it again. The Sailfish OS peek gesture is doing exactly the same on larger screens because of multi-touch. Exposing another location (Home/events = drawer) with the other hand, to see what's there and perform a task (trigger an action = take a tool) with another. All without actually going to that location.

That's what multi-touch should be.

Something that focuses on enhancing our potential, instead of enhancing features we are required to use.

Button based tablet operating systems (excluding Win 8 etc) are not going to do something like that any time soon. Not only because they treat active applications in a different way (as second class citizens), but it would be challenging to implement the behavior into the way how buttons work. Also the button locations do not support ergonomic use of individual hands when gripping the device from the bezel. On the other hand, the sliding gesture over the screen edge is very natural to perform, because it happens where your thumb is most comfortable any given time.

This conventional button approach, that many Android devices use, exhibit another problem in enforcing a hand preference in controlling the device. As you can see from the image above, the left hand is not able to reach notifications on the right, and similarly the right hand struggles in reaching Home, back and task switcher buttons on the left.

It's not about changing the interface between a phone and a tablet. Tasks are anyway the same. It's how the two-handed use is enhancing our potential through the increased touch screen area.

Don't try fitting an existing multi-touch solution into your interface, but think how an interface can handle both one- and two-handed use.

Then, the rest will find their own places naturally.

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.