Andrew and I recently created a cross-device prototype for a media management tool. We designed the experience to connect media across a Desktop, Television and Mobile Phone, allowing users to organize, buy and most importantly, play their media. Much smarter people than I have known for a long time now... A successful design for one device might not work on another. So we set out to create a great experience across these devices, with specific designs for each. What follows are a few major areas to consider when designing across devices. They might seem obvious, but it can be hard to shake the tendency to design everything for the desktop.


Form Factor and Environment:
A small device will not hold the same content as a large one. A mobile phone is not a desktop monitor. Simple, right? Not really. A television is large... larger than most desktop monitors. Yet given the viewing distance and general atmosphere, this large screen will only allow slightly more content than the mobile phone. And speaking of the phone; it's small. But not only is it small, it is also in an atmosphere full of motion and distractions. So it can safely portray even less content.


Form factor and relative content load


Function:
People don't carry mobile phones to check the weather or buy movie tickets. Sure, they could do these things, but the primary task is to make calls. Also, as I mentioned before, the user is distracted when using handheld devices, so we need to consider muscle memory. A desktop monitor demands your attention, so interactions can be more focused... but a phone must compete for it. As a result, we must design for mobile with very simple, intuitive interaction patterns. Up should mean up, left should mean left. The screen can map physically to the directional pad, allowing the user to navigate much like they would a video game. This allows the user to interact without thinking too much about it. It also allows them to memorize key combinations. They might learn that weather is Right, Right, Right, Enter. They can do this without even looking. The television space has many similarities (we think.) For example, the user isn't directly interfacing with the controls, but doing so via a proxy (usually a focus rectangle of some sort). This means that Enter is used over and over, contextually. Buttons will do different things based on where you are on the screen. This is much different than the desktop experience where common wisdom tells us to make each button have a specific action tied to it. And remember, the user wants to watch television, not stare at our interface.

On non-cursor devices, map content to the function of the controller


Context:
Probably most important of all... Users might not want the exact same app on all their devices. We need to think like people, not like software. Yeah, it's cool that my Flash app can resize to a mobile phone and have logic in it to show content based on format. But this is the software talking, trying to lure us into its web. If we step back and think like people, we soon realize that we want specialized apps for each device, because I use each device for a certain purpose. The desktop is (generally), focused, at home or work, and mostly online. The mobile phone is only truly powerful when the user is out and about. I don't need a full-blown shopping tool on my phone, but perhaps a way to buy movie tickets or map theatres would be useful. Similarly, when they are at home watching television, they aren't in the mode of shopping or managing anything, so we should serve a very basic, yet rich, experience that complements their main task... watching television.

I know that this sounds really basic... and it is. But I find that it's good to step back sometimes and restate the obvious. I find myself constantly tending to do what I know. I know the desktop pretty well, and we have tried-and-true patterns for it. So when we do mobile or other device design, it's just instinct to apply those same patterns.






Ty Lettau
Senior Interactive Designer, XD