15 Apr 2010, Posted by Alex in Blog,sticky, 4 Comments. Tagged Else, featherfan, Idle screen, softkeys, sPlay, Thumb, Touchscreen, user interface

Making of Else’s sPlay

Sometimes an extreme requirement pushes you to your limits.
When designing the Idle screen interaction for ELSE we decided we wanted to enable 80% of the day-to-day interaction from the idle screen.
This in itself is not a strange requirement and it is evident that the designers of Android have indeed tackled a very similar requirement.

We also, however, wanted to do it with a single click,
to keep the screen tidy,
to allow single hand operation,
to not require too much learning and customization,
and obviously, to make it super impressive.

The result is before you….
The team working on this interface included a mentor (Eli Reifman & ELSE team), interaction designers (that would be us) ,  artists, animators and engineers working together for over 2 years.  This is just one in a series of innovations we were able to deliver as a team.
The Internet is full of reviews ( 1, 2, 3 ,4, 5)  and comments about the sPlay , so in this post we will try to share some of the functional thinking behind it and elaborate on its functionality.

But before we review it, let’s go back to the basics.
Mobile user interfaces are based on applications: If you want to send a message, open the relevant application and search for the proper action.
 This system has two obvious flaws: Efficiency and learnability. The efficiency of such an interaction is limited as it requires lengthy user flows (clicks).
The solution was, in one word, ‘shortcuts’.

Generally speaking, users love shortcuts — probably because the alternative is so tedious.
Again, generally speaking, good designers hate shortcuts – because they imply that there is something wrong with the primary interaction.

Mobile manufacturers and designers have always been aware of this problem. As an industry we have spent enormous amounts of time and effort trying to come up with solutions. Here are some examples:
- My old Nokia 6110 has the ability to follow a series of digits typed by the user to directly open any menu on the device (e.g. press Menu > 1 > 1 to open the SMS inbox).
- Later on, we were offered to use the 5 way control and Idle screen softkeys to define our preferred shortcuts menus.
- A dedicated Shortcuts menu, introduced by Sony Ericsson if I’m not mistaken.
- Long presses were used for Speed dialing or opening specific flows/apps.
- Widgets, particularly with touch devices, are a more modern solution. They bring up to the idle screen the user’s preferred apps, creating a feeling of efficiency and accessibility of features.

The problem is that all of these solutions require learning, memorizing and customizing our mobiles to fit our “preferences”. This might not sound so bad – you may be willing to spend a few minutes to get things the way you want them, but there are hidden assumptions here:
a) We are aware of our needs.
b) Our needs are fixed.

Speed dialing is a great example: Many users use speed dialing, But most of them only use 1 to 3 numbers (although they defined 5 to 8 numbers). The reason for the inefficiency of this solution is the dynamic nature of our “needs” (aka ‘life’). Check out your last weeks call log to find out you have being called/calling frequently at least one contact that you would probably not refer to as “speed dial worthy”. You have been in close contact with him/her only this week. But each week has its own needs…

Our target was to improve the efficiency of our mobile experience, providing a direct access to specific items and actions (e.g. a contact name or an email message) and not just an application (like phone book or email appliation) while keeping the user in control where needed.

We began by understanding the handling of the device and locating the 3 anchor points. The next step was to identify the popular items: Those few items we use most frequently (as it turns out, 20% of the items are used 80% of the time).  Things like opening the contacts application, creating a new message,  or dialing a number.
We created a thumb controlled menu, which is opened by tapping on the screen. The menu is flexible enough to allow large amounts of items to appear. It includes two types of items: Applications ( i.e. messaging) and specific items (i.e. create new message). Graphics were defined to enhance the experience, rather than replace it.

This basic design was tested (both on device and in paper prototype). As a consequence, we felt secure enough to go further with the basic idea: A second level was added to the concept, allowing much more flexible control. On the first level the menu is used to provide quick access to almost all the applications on the device. The second level exposes the content of each application, and allows executing specific actions (e.g. calling a contact, viewing an image, etc.).

The result is sPlay, unveiled in London last month. A text based featherfan, thumb controlled, that includes 2 levels of content.

sPlay is beautiful (thanks to sugapusher),runs with dazzling graphics performance (thanks to Graphtech ) but is also highly adaptive and efficient. Most of the content is updated according to usage, so the latest frequent items are made available, but keeping specific user preferred content always available. So, although you haven’t called mom the entire week (you should, you know…), she is still easily accessible on your speed-dial numbers.
The interaction is very basic and doesn’t requires any memorization or prolonged learning, yet it provides a powerful tool to access any content by a simple gesture on the screen.

We would love to hear your thoughts on this !

some more images below

“We began by understanding the handling of the device and locating the 3 anchor points”

“On the first level the menu is used to provide a fast access to almost all the applications on the device”

“The second level exposes the content of each application, and allows executing specific actions (e.g. Calling a contact, viewing an image).”

and a movie