With the iPhone, the forthcoming Google-enabled phones, Blackberries and Windows Mobile (among others), Americans are finally, though slowly, catching up with their Japanese counterparts in their creative use of the cellphone. But as website experts in both countries are learning, designing for these small devices is an art form in its own right?quite distinct from designing for PCs.

Barbara Ballard, author of the book Designing the Mobile User Experience (Wiley, February 2007), has been thinking about mobile websites and applications for about as long as they’ve been around. Before starting her own firm, Little Springs Design in Lawrence, Kansas, Ballard worked for Sprint from 1999, where her work centered on mobile device usability. Now she helps both startups and device manufacturers in one of the great software design challenges: how to get end users, accustomed to large screens and full size keyboards, to “⁠think small.⁠”⁠ I spoke to her by phone while she was in San Francisco attending the Mobile 2.0 conference.

You advocate that designers take a “one Web” approach, meaning that companies should maintain one website for all their users, no matter how they are coming into the site. Could you talk about that?

I advocate a one Web approach unless you are one of the Yahoos, the Googles?maybe the sites accounting for the top 20 percent of traffic. For them, a multi-Web strategy really makes sense. But for those of us further down the “⁠long tail⁠”⁠ of websites, a one-Web design strategy is inevitable. So this is not so much about advocating one Web, as it is acknowledging that it is necessary.

For the folks who find themselves in that position, they should be thinking about where the predominance of the users are now, where the predominance of their users are going, and where the standards and technology are headed. In other words, context is important. You need to figure out how 80 percent of your user base is going to come to your site. Are they going to view you on a mobile device, a PC desktop, or by television via a Playstation?

What I don’t expect is that every last site out there needs to be optimized specifically for mobile. It doesn’t have to be that complicated. To take a non-random example, my site will convert to a mobile environment without a problem.

Developers always talk about the challenges of small screens.

Yes, but what people forget is that it’s not the only design consideration. So while screen size is important, context?how, where, why, and when people are actually using your Web site?is doubly so and harder to address.

One problem with designing for a mobile environment is that they aren’t all the same. For example, some browsers and operators use transcoders, some don’t.

A transcoder is a piece of software that optimizes Web content for a specific browser. For example, if you use Opera Mini on your phone, their server will transcode it. iPhone is an example of a phone that does not use a transcoder--rather, it just shrinks the entire page to fit the screen. But I don’t necessarily think that’s necessarily the best approach. Back in September, I wrote an open letter to the industry that applauded their efforts in making all the millions of Web pages available on mobile phones, even though the devices don’t support all the advanced standards. But I did make one request: if a site provides a mobile optimized version, that version was created for a reason and should be sent to the users. My contention is that automatic tools should not second-guess our intentions as designers or interfere with our relationship with our users. And by the way, even Apple recommends that, for the best user experience, designers create pages that specifically target the iPhone.

What happens if you have a website built with Ajax technologies? Will it convert to mobile?

Ajax can really hurt or really help, depending on the circumstances. Ordinarily, you have to do a lot of refreshing to update a page: you have to read the text again, and probably all of the JavaScript and probably all of everything again, except possibly for the images. Now with Ajax, you are only reloading the part of the page that actually contains new data, which is highly useful for everyone. On the other hand, an Ajax site that presupposes an always-on broadband connection will do just the opposite?it will squander resources instead of conserving them. So like a lot of things, Ajax is a double-edged sword, and you must use it correctly.

What design guidelines do you recommend for a one-Web approach?

First of all, there are some things you can assume. For example, as more carriers have begun implementing transcoding, you can pretty much rely on it?so that most desktop sites will at least function in a mobile environment. And you don’t have to worry about whether HTML or XHTML will be around?they will. I think the same is true for ECMAscript, which is the standardized version of JavaScript. I do suggest you keep your scripting to a minimum?but don’t be afraid to use it where required. And you should monitor your server logs. If you see that only a tiny fraction of users are taking advantage of a given feature, you know you’ll want to concentrate your efforts elsewhere.

Also, use tables sparingly. It’s pretty much impossible for a transcoding system to figure out the layout intent. A Web page that has tables within tables within tables will be very difficult for a transcoder to decipher.

I’m a big fan of list-based layouts. They are not only the most common, but the most useful format for displaying information on a small, vertically oriented screen. You do need to keep in mind with lists that mobile devices vary in their screen dimension ratios, not just their size. Some are vertical, others more or less horizontal, and some are closer to square. Unless you are dealing with QVGA [Quarter Video Graphics Array] or larger screens, the screen orientation is an important consideration.

You should also try to detect whether you are dealing with a touchscreen, and if you are, be careful not to put elements too close together. I notice that the Gmail Web page is particularly good at this: if I hit “⁠reply,⁠”⁠ I doesn’t inadvertently forward the message to someone else because the two links are far enough apart. That sort of error is not only subtle, but it can be lethal.

Some of the best guidance comes from the W3C Mobile Web best practices for mobile. Those folks are essentially advocating a one Web strategy, which they define as making the same information and services available to users regardless of the device?though not necessarily using the same representation every time. They provide some good standards covering a wide range of issues, including navigation and links, page layout and content, page definition, and user input.

On your blog, you talk about Windows Mobile design guidelines and MIDP [Mobile Information Device Profile] 2.0 style guidelines. Are the standards beginning to converge?

Not at all, unfortunately, because unlike with PCs, the hardware is so varied. For example, the MIDP guidelines cover Mobile Java application development, a cross-device platform represented on some billion phones worldwide. Then there’s BREW, which supports applications on the Qualcomm chipset plus a handful of GSM devices. Both run on multiple operating systems.

Figuring out whether your application idea will actually work in a mobile environment means recognizing the differences. For example, there’s more network latency in a mobile environment than on the Web because the little bytes have to go off of your device, through the air, through a server, which has to think about it and sent the bytes back. Even if the data is traveling at gigabit Ethernet speeds, the latency will always be greater in a mobile environment than with a local area network. And that becomes a real problem when a user is expecting a fast response. Picture a simple mobile action game: it won’t do if, after you push a button to shoot, you encounter a two second delay before you know the results. So the response rate alone can help a designer decide whether to do a mobile application.

There are a number of key decisions like that?which can help determine whether you need an application or whether simple HTML content will work. A good example of the tradeoff is mobilized Gmail. If you use it through a mobile browser, it’s quite good. But Google recognized that there are advantages in speed and pre-fetching by creating a Gmail Java application. And if you compare the two, the Java application is clearly better.

Does that suggest that Java, with its large market, is the place to start for mobile application development?

It depends on your market and on your application. In brief, mobile Java?Java ME?is a great answer, but it still has lots and lots of problems. In the rush to make it work in as many mobile environments as possible, the developers didn’t necessarily account for the differences in hardware. One device has access to location information; another device doesn’t. One device refreshes its screen one way, another uses a different technique. So hidden behind the supposed device-independence of Java are huge porting costs.

What about widgets, an idea that is getting played up on Vista? Is there some corresponding awareness on celltops?

Widgets are great, but they fall into the 20 percent usage category, meaning that most sites won’t use them. One nice variation of the widget idea is Microsoft Mobile’s Today Screen, which shows upcoming appointments and tasks and recent email, among other things. Microsoft has extended that idea so that mobile application developers can insert information onto that screen, as well. The Today Screen is my favorite part of Windows Mobile?it gives me an at-a-glance summary of information that is important to me.

In Japan, people seem quite comfortable keying in text, while here in the U.S. we are catching up, but are not quite there. Where do you think this is going?

Way back when I was studying keypad input, I tried to understand the Japanese input key method. I’m in no way expert, but as far as I can tell, their input technology may be significantly better than ours. That may just be by necessity. If you think of what is required compared to a western alphabet, the demands on the technology are just so much greater. But having said that, text prediction for the western world is here to stay. The best known so far is T9. T9 has lots of competition, and the company behind it, Nuance Communications, just purchased the technology from AOL last June as part of an acquisition. So we are likely to see more progress here. But for some people like me, T9 actually slows us down?because we are still faster with “⁠triple tapping⁠”⁠ [pressing a key one to four times to get a specific letter]. Over the long term, we’ll begin to see technologies that don’t just interpret your keystrokes to come up with a word, but actually predict the word before you are finished entering it.

As for keyboard trends, the iPhone is showing the way, and in general, I like using QWERTY keypads. But even here, there are differences: designing a good one remains an art form. For example, I think Blackberry is much better at it than Palm. The industrial design is different: I make fewer errors. The Blackberry has also been smart about predictive text. For example, if I enter “⁠<space> i <space>⁠”, the system will know to capitalize it. Other devices don’t necessarily do that.

What is your take on the iPhone’s influence?

The most important thing so far is that the iPhone really does deliver on the idea of “⁠the Internet in the palm of your hand.⁠”⁠ That was the promise of WAP [Wireless Application Protocol], but when people actually tried it, they said?“⁠no it’s not.⁠”⁠

What do you mean?

I blame the WAP marketers for over-promising what they could deliver. People have a conception of what the Web should look like: it should have graphics and colors and lots of places to go. But with WAP, what people actually saw was text, black and white, and comparatively few sites to choose from. The disappointment was so great that many, many users have completely dismissed the idea that they can browse the Internet from their phone. Now with the iPhone, that’s changing. Apple is teaching the world that having the Internet on your phone is incredibly useful and fun. And that it really is possible to have the Internet in the palm of your hand. The iPhone’s influence is so pronounced that other parts of the industry are also benefitting. I recently talked to Opera, for example. They are seeing increased demand for their browser since the iPhone was launched. In that sense, the iPhone is really a gift to the entire industry.

When you were blogging from the Mobile 2.0 conference you noticed that even this audience was using computers, rather than phones. You figured the ratio was about 5:1.

It was really hysterical. I looked out at the audience of about 150 people, and there was this sea of laptops. Many people, including myself, were using a laptop and one or two phones.

What does that mean in terms of where we are at with mobile devices?

For me, it means that I want better mobile devices. Laptops may never be displaced by mobile devices. But if they are, the mobile device will have a full-size keyboard and a larger screen?both of which can be folded up, somehow. When that happens, I’ll be using my mobile phone, rather than my laptop.

The View from Europe: Researching Mobile Interfaces

Professor Carola Zwick teaches interface design at the Magdeburg-Stendal University of Applied Sciences in Berlin and is co-author of the book Designing for Small Screens (2005, AVA Publishing). In an email exchange, she argues that mobile devices represent a fundamentally different design problem than PCs.

"Mobile devices are used en route and therefore are often just on the periphery of the user´s attention," she wrote. Ironically, that means that mobile devices must be even easier to use than their desktop counterparts, even to the extent that a user can get work done using just one hand. "Just shrinking a PC desktop metaphor onto a baby-face sized screen is no solution."

Zwick's research concentrates not just on new technologies, but on how people will actually interact with mobile devices in the future. She calls the process "presearch," suggesting that the challenge for UI designers is in figuring out how to build mobile device interfaces that accommodate new ways of working and communicating?the kind of lifestyle her students will go on to live.

"We try to attract students that understand the need to first design for the process of use?before worrying about the radii of the physical device or the color of the screen icons. While our students grew up with both the Internet and mobile devices of all kinds, in design, you always need to maintain your naivete so that you are asking the fundamental questions. So we often encourage them to question the status quo. Once they do that, they are capable of creating new devices and applications they would have otherwise never thought of."

Zwick said that mobile phone communications in Europe got an unexpected jump start because the conventional telephone service was expensive, the infrastructure was crumbling, and the competition negligible due to state monopolies. Some communication habits now taken for granted first took off because of the pricing structure. For example, "short text messaging originally was only planned for announcements of the

With the European mobile phone market now maturing, design innovation has also slowed, with the market settled into a few “⁠archetypical⁠”⁠ devices. "Now the manufacturers try to differentiate themselves by styling, not design. It seems that even companies like Nokia lost their focus on user friendliness and innovative design." As for newer data services that have gained a foothold in Japan, "they still play no role in Europe, because they are poorly executed and slow. But we are convinced that the advent of the iPhone and the iPod touch media player will change this situation drastically. These devices are the first serious attempt to deliver mobile information.⁠”⁠ Both devices obey “⁠the first law of interface design: direct manipulation via a touch screen,⁠”⁠ including hand gestures that can zoom in on a webpage or shift photos in an album. Combine that with a rich presentation that is comparable to that on a laptop, and Apple seems to be leading the way.