Designing for the Multitasker

Everyone wants to be able to multitask these days. Especially with cell phones and mobile gadgets. More and more mobile applications are being released every day, many of them that interact with others. For example, finding several images from the web and adding them to your text document. This works wonderfully on a large display. One can just drag and drop from window to window. But what about on a mobile device like the iPhone?

Here are several methods used by different operating systems from large displays, to smaller ones. Each one provides a great way to switch between open windows quickly.

Overlays

One of the most common ways users switch between applications is through an overlay. It’s usually made of a small box, list, or row of the currently running applications brought up by pressing a key. What’s nice about the overlay is that it floats on top of whatever you’re doing. This way, you get a full size view of what’s running as you switch from app to app.

overlay

Usually, overlays have a transparent background of some sort to act unobstructive. The way operating systems display the open applications are very different though. Mac OS X (top) shows the open applications as icons, while Windows (bottom) shows the icon as well as a screenshot. These screenshot thumbnails seem useless in my opinion. While it’s more informative, the detail is difficult to read on such a small thumbnail. Screenshots are better left for other types of application switching (which I’ll touch on later).

Overlays might be the quickest option, but they work best with a keyboard and large screen. While they can be done on small screens, it would require nearly everything behind the overlay to be hidden, defeating it’s purpose. When working with a small device, it’s best not to show too much at once. Instead, let some of content flow offscreen and allow the user to scroll to it. I love how overlays work on my Mac, but I’d never want to see an overlay on something as small as my iPhone.

Cards

When the Palm Pre was announced last year, everyone was excited to try its “cards” interface, including me. The idea was simple, fun, and realistic. When pressing the main button on the Pre, running applications shrink slightly into “cards” on the homescreen (left). The user flicks left and right reveal other cards and flicks a card up to exit the program. Anyone who picks up a Palm Pre almost immediately knows how to navigate it. The interface made multitasking feel natural.

cards

Of course, the same idea existed before Palm announced their card interface. Mobile Safari used the same method to navigate open websites (right). But, Palm made their interface unique with the flick-up-to-close gesture rather than a close icon on the upper left corner. The flick gesture requires more explanation, but it’s a creative approach to the closing of an application.

The only downside to the card interface is that you can’t see all of your open apps at once. Mobile Safari has some indicators underneath the pages to tell you how many windows are open, but not what each window contains. One has to compromise due to the small screen. On a mobile device the card interface is definitely my favorite. It makes multitasking faster, and more “fun” than ever.

Grids

Common on Apple products, screenshots in a grid formation provide a very clear picture of what’s open. For example, in Exposé (right) on Mac OS X, pressing a key rearranges open windows into a grid. Now the user can see everything at once. Of course, the downside is that the grid method only works well on a large screen.

grid

Instead of using the “card” interface on Apple’s iPad version of Safari, Apple makes use of the extra screen space and places the open Safari pages on a large grid. No more flicking left and right to view open pages. In my opinion, this is by far the clearest and most efficient way to display a set of windows on a larger screen.

Stacks

Stacks of paper and open books are two good examples of how we manage applications. The metaphor is often used in interface design. For example, Windows Vista introduced Flip 3D (left), a new way to switch between open applications using depth and perspective. It lines all of your open windows into a 3D “stack.” Some find this irritating, others love it. Its main problem is that a majority of the windows are covered by other windows. This requires a user to scroll through the entire stack until they’ve seen full images of each window.

windowsflip

Sneak peaks of the Microsoft Courier have been spotted all over tech blogs. The Courier is the rumored Microsoft tablet with an interface based off books, handwriting, and scraps of paper. The mockups are quite impressive. One particular interface element that caught my eye was the search view (right). After making a pinch gesture, open windows are frayed out left and right, like an open book. It’s a combination of Apple’s CoverFlow, Palm cards, and real books all in one. It’s something brand new. It’s also a lot of fun to play with.

That’s four different techniques, and all of these interfaces are incredible examples of multitasking. Each one is better on a different screen size. For pocket-sized devices, “cards” fit just enough on the screen at once. For tablets and mid-size devices “stacks” work just like objects we already know how to use. For larger screens with more flexibility, grids and overlays provide a map of what’s open. And for the iPhone? I think we’ll have to wait until June, but in the meantime here’s a concept by Ocean Observations of what multitasking on the iPhone could look like.

I’m excited to see what new multitasking interfaces will come in the future. A 3D carousel of open windows? A bulletin board with screenshots scattered all over? Which kind of interface is your favorite? Tell me on Twitter.

Microsoft Courier image credit: Gizmodo

  1. chadengle reblogged this from graphicpeel
  2. larobotique reblogged this from graphicpeel
  3. stanleymister reblogged this from graphicpeel
  4. ninedaysoff reblogged this from graphicpeel and added:
    Nice roundup of techniques - must read.
  5. benjaminf reblogged this from graphicpeel
  6. graafiez reblogged this from 9-bits
  7. ticklr reblogged this from 9-bits
  8. ankastudio reblogged this from graphicpeel
  9. annaannaanna reblogged this from 9-bits
  10. 9-bits reblogged this from graphicpeel and added:
    from GraphicPeel.
  11. graphicpeel posted this