Sunday, July 23, 2006

The Pulse of Modern Mobile Design: Information on the go

by Joe Shepter

When it comes to design for mobile devices, it’s tempting to take an ostrich-like approach: Hide your head in the sand and behave as though nothing is happening. Unfortunately, in the not-too-distant future, more people will be using mobile devices to access the Net; and no interactive designer will be able to ignore them.

The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design

Even so, it’s hard to blame anyone for looking the other way. Currently, working on mobile devices is not for the faint of heart. “The design issues we face,” says Paul Blomdahl of the Swedish company TAT, “are very small screens, slow hardware, limited memory and limited user interaction capabilities... for devices that almost are able to handle everything that a PC can do and more.” At best the work is quite technical. Even when designing wallpapers or specialized icons—big business in Europe and Asia—it usually means dealing directly with a phone’s hardware. And, when creating mobile sites for external companies, it’s necessary to account for a dizzying proliferation of devices and capabilities. “Basically, mobile design is very similar to design for the Web, but there are some major differences in size and screen resolution which makes it a ton more difficult,” says Blomdahl. Alternatively, the future is bright. The market for custom content is already large, and devices are always improving. Soon every company will want some kind of specialized mobile presence—either a mobile version of its Web site, or an entirely new site altogether. And that means one thing: Opportunity. Go to Next Section Continue (Images this page courtesy Fujiiro)

1 The Market Most designers working in mobile design today are in Japan, Korea and Northern Europe. In North America, most designers (and it’s a small number) are found in technology companies or in firms working directly for carriers, device manufacturers and software providers.

The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design

Their work often crosses the line between design and engineering. Andrew Watanabe, for example, runs the Berkeley-based SVG (Scalable Vector Graphics) consultancy zer01; he’s produced content for companies like Adobe, Nokia and ZOOMON Mobile Solutions and jokes, “I would say that developers [in my field] are somewhere between bleeding edge and leading edge.” In Europe and Asia, the situation is more open. Many firms have found work with device manufacturers, helping them create content and interfaces. TAT, for example, employs 25 people and focuses on graphical user interfaces for mobile phones. “We see a growing demand for content in Europe as well as Asia,” says Blomdahl. “More and more manufacturers make it possible for their users to customize their handsets and enable user customizable themes.” In Japan and Korea, the situation is even more advanced. There, you can find firms that design mobile sites for outside clients on a regular basis. Tokyo’s Omame, for example, reports that about 20-30% of its business comes from site-based work for companies like Paul Smith and Animax and finds that their clients have a mature understanding of the medium. “On the client-side, we’re seeing clients who want not just a mobile site, but a mobile site/Web site combination,” says firm principal George Baptista. “So we spend a lot of time thinking about the two platforms and what content is best for which.” Go to Next Section (Images this page courtesy TAT)

2 Wallpapers and Icons Right now, the biggest market for mobile design is in creating custom content for phones. The work is fueled mainly by device manufacturers, who commission the projects and provide the specifications.

The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design

“Somehow, cell phones have tapped into a part of consumer culture where users love to express individuality by customizing their phones,” says Watanabe. “And phone manufacturers and content providers have all rushed to fulfill this need through ringtones, customizable faceplates, phone straps and a variety of other fairly low-cost after-market add-ons.” Although creating custom wallpaper sounds easy enough, doing it well involves technical challenges as well as artistic ones. TAT has developed its own proprietary technology to do the trick and also uses standards like SVG—though everything depends on a device’s specifications. “Most of the time you have to design your images with the compression algorithms in mind,” says Staffan Lincoln of TAT. “This will become less of an issue in the future as phones become more powerful, but right now it’s what gives our work that extra glossy finish that phone manufacturers crave.” When designing icons and other interface elements, the main obstacle lies in the small size of the images, which often doesn’t exceed five pixels across. As a result, TAT often uses 3-D software to create the objects and then carefully rotates them to find the views that are the most effective. “To create an image that communicates at that size, you need to be very careful when choosing an angle and composing the image,” says Lincoln. “You also need to choose an object that’s recognizable to everyone. To do this and not get stuck in a cliché can be a very challenging task.” Go to Next Section (Images this page courtesy TAT)

3 Mobile Sites Aside from device manufacturers, there are thousands of other companies that want to see their content go mobile. For this, they’ll need the Internet.

The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design

So what is the “mobile Internet”? In fact, nothing new. Mobile devices access the same sites as desktop browsers. And theoretically, developing for them shouldn’t be difficult. If a developer adheres to strict standards, he or she should be able to produce one site for the desktop and then simply modify its style sheets to make it display properly on a handset. Currently that’s just a theory. The reality is that few devices have implemented all the standards and carriers often modify sites before they send them over their networks. As a result, designers face a proliferation of capabilities that make the early Web look like a playground. “[Current] differences in browsers have to do with different companies all having their own take on mobile space,” says George Williams of San Francisco’s Fujiiro. “It’s not like Microsoft vs. Netscape. And even though there are standards they all have to adhere to, what they support is really spotty.” In practical terms, that means it’s nearly impossible to get a consistent appearance on different devices. Even in Japan, designers spend much of their time trying to adapt relatively simple layouts and images to the varying capabilities of phones and carriers. “Developing a procedure/system for delivering across all the different carriers in Japan is something most developers here have to wrestle with,” says George Baptista of Omame. “We develop for all the carriers in Japan: CHTML for i-mode, optimized CHTML for Vodafone, HDML for old AU handsets, XHTML for new AU handsets.” Luckily, no one expects the situation to continue forever. Most of the designers interviewed in this article judged the latest generation of phones and browsers to be “pretty good,” and since users upgrade devices often, it shouldn’t be too long before the chaos subsides. Go to Next Section (Images this page courtesy Omame)

4 Design Issues: A Small Screen When getting down to more detailed design issues, the most obvious problem with mobile devices is the size of their screens. Typically displays are little more than 100 pixels wide (and about equal in height).

The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design

“The first thing people realize is, ‘Oh, I didn’t realize this would be off screen,’ or ‘There’s a lot of scrolling,’” says Williams. “Navigation and site architecture become critical in a way that they’re not on the desktop.” The limitations are particularly acute with mobile sites. To cope with the crunch, designers often ignore imagery—sometimes eliminating it altogether through style sheets—and instead spend much of their time prioritizing and structuring information. For example, most Japanese mobile sites feature only one small image, a telling color, and then links that take users right to the heart of the matter. “We keep the design as simple and clean as possible,” says Baptista. “Most pages are text based. We spend a higher proportion of time on interface and widget issues.” Go to Next Section (Images this page courtesy Omame)

5 Color and Type

The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design

If possible, type on mobile platforms is even more restrictive than imagery. The average device features only default fonts, which are often of a phone manufacturer’s own design. “They really haven’t designed fonts for these screens,” says Williams. “Screens may have great resolution and power, but fonts are where it falls apart. Things look chunky, just not as finished as they ought to be.” In the future typographic problems will probably ease, especially with the advance of vector technologies like SVG and Macromedia’s Flash Lite. But for now, type is something that designers are likely to ignore. With color, the story improves slightly. Many phones not only support color but also present it well. However, unlike Web sites, which are viewed in rooms with similar amounts of light, mobile devices get toted everywhere, and sometimes the effects of different environments can cause trouble. “Understanding color is critical, not so much in terms of wash-out but contrast ratios,” says Williams. “If a client says we have to use these colors because that’s our brand, we have to decide what colors go with them in different kinds of lighting.” Go to Next Section (Images this page courtesy TAT)

6 Usability Testing As with all interactive design, usability testing plays a crucial role in mobile development. But unlike the Web, where designers can evaluate their sites by observing focus groups, mobile usability has to be done, quite literally, on the road.

The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design

“It’s much more costly and time consuming than Web site development,” says Baptista. “And it’s impossible to cover all handsets from all carriers, so we work out with the client what the important models are, and focus on those.” One reason for the extensive testing is that devices use different methods for activating links. Unlike the Web, where nearly all users have a mouse, mobile devices have toggles, keys, pens and touch screens. Until designers actually observe someone using each, it’s hard to know how well an interface work. Another consideration is performance in different locations. Unlike computers with dial-up or broadband connections, mobile devices have an infinite sliding scale of bandwidth. The same phone may get a 50K connection in downtown Manhattan and 5K connection in parts of Brooklyn. “You pretty much have to have people in different locations physically and observe them. You basically have to look for variations in signal strength,” says Williams. Go to Next Section (Images this page courtesy Fujiiro)

7 Predicting the Future Seems Easy Though it’s always dangerous to try to predict the future, the mobile design market will almost certainly boom in the next few years. And by the time it hits the average stateside interactive firm, designing for it should be a whole lot easier. By then, the only problem will be a welcome one: Satisfying a huge number of hungry clients. And for that, Lincoln gives designers a bit of advice that’s always worth repeating:

The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design The Pulse of Modern Mobile Design

“Quality, quality, quality,” he says. “There are so many mobile graphics designers who mass-produce content. To be able to stand out you need to have superior quality.” Go to Next Section Return to Introduction (Images this page courtesy zer01)

No comments: