Intuity Media Lab

We’re moving towards a computing world that is more and more focused on mobile devices. Technologies like the iPhone, Android, Palm Web OS and Kindle have caused this transformation. I wanted to share some of my recent thoughts about creating and designing applications in this “new” mobile environment.

In my opinion these gadgets have caused an interesting, silent shift in interface design: Applications are transformed into smaller bits and pieces. They’re becoming simpler and they’re getting rid of unused functionality. We’re moving from big applications to small widgets.

Less functionality,
less functionality,
less functionality

Especially when desktop apps or webportals (like Deutsche Bahn, flickr, etc.) are ported to the mobile world you often see a huge difference in the number of implemented functions. Somehow these new environments seem to force application designers to focus on the real stuff.

This shift seems to be caused by some positive restrictions and preconditions that these new devices impose (See Restrictions breed creativity).

Restrictions and preconditions of widget based environments

Let’s try to find out what “widget based environment” means. What are the preconditions that these operating systems have in common which influence form and function of a widget:

• Limited screen size
  Every pixel counts. Although these devices often have resolutions like 160 dpi you need to save every pixel in order no to clutter your tiny screen.
• Single task oriented
  Due to screen size and computing power you mostly run only one widget at a time.
• Mobile environment
  Widgets are often used on the go. So time and efficiency are even more important.
• New types of interactions
  Touch and multitouch are the main interaction paradigms but there are “new”, additional input and output methods that can be involved (e.g. Use your camera to see Wikipedia articles nearby, tilt your iPhone to change perspective in Google Earth)

Successful widget design patterns

Let’s find some succesful design patterns for mobile widgets that seem to be influenced by these restrictions:

• Focus on specific tasks
  Mobile widgets are often optimized to fulfil only one or a few tasks (See your friends location, Search for interesting places nearby, Find out the name of a font or a song)
  WhatTheFont is a good and meaningful example on a cameraphone. Its exactly there when you need it and uses server-side intelligence to analyze/process quickly. Same goes for Shazam.
• Rockstar interaction metaphors
  Mobile widgets, especially on the iPhone, often focus on providing simple but meaningful interaction metaphors instead of providing a user interface with a complex screen hierarchy (e.g. Fontshuffle)
  
• Uplifting togetherness
  As they’re often running on a phone widgets make it easy for people to connect to friends and co-workers. They can also serve as communication tool in real life enriching real conversations and making them fun… (e.g. Shazam “What’s the name of this song again?”).
• Widgets without borders
  As widgets fulfil only very few tasks they need to interact with each other. So as an application designer you now have to think about these interactions with other widgets. (Apps without borders on Android). These interactions can even reach external systems and devices e.g. using intelligence of server-based applications or controlling iTunes with your mobile phone.

Recipe: How to bake a nice little widget

Let’s sum all this stuff up. Here’s my little receipe for creating mobile widgets:

• Find the 2-4 tasks that your application is really good at
• Focus on these tasks to the extremes (Analyze them, take them apart and rearrange them in new ways)
• Optimize the interaction with your widget to fulfil these tasks in a frictionless way
• Be aware of technical restrictions or limitations imposed by expected usage scenarios (daylight/reflections, reading distance, screen-shaking)
• Add some spice by using fresh and new interaction paradigms
• Integrate your widget with other widgets smoothly
• UI consistency is essential, as you don’t want third-party developed widgets to always behave/look/feel different. I guess a basic UI toolkit is essential for a coherent and intuitive experience. But keep in mind that you can always set highlights when breaking the default styles of the device!
• Make it easy for people to share your content and to connect to other people