by Joe Shepter |
  |
The World Cup on The Road
Think the early days of the Web were tough? Feel pity for the designers who took on two different browsers and a pair of platforms? Don’t. Today’s mobile site builders face a world where spacing, color, screen size and even character support vary idiosyncratically across hundreds of handsets.
“The Web browsers on phones vary from basic to super basic,” explains Keith Saft, senior interaction designer at Yahoo! Mobile. “They also have these eccentric bits of HTML and CSS that they don’t support, and there aren’t really any standards or consistency across phones.”
All this makes Yahoo!’s mobile site for the 2006 FIFA (Fédération Internationale de Football Association) World Cup worth a closer look. It delivered up-to-date scores, highlights and information, in five languages, to nearly every browser-enabled phone on the planet. Best of all, it was a native mobile site, not a chaotically reformatted Web page that poured its content down a long column. With three tabs and impeccably organized content, it proved a useful companion for anyone following the games.
Needless to say, the project required resources that are well outside the range of most design firms. But with a skillfully devised process and a dedicated engineering team, Yahoo! managed to produce a remarkable experience—for the mobile space. 
Yahoo! and FIFA |
These days, more people can search the Web using cell phones than computers; the fact hasn’t gone unnoticed by large Internet companies. And so, when Yahoo! decided to sponsor the World Cup, mobile users were a big part of its plans. |
  |
|
“FIFA fans are a mobile and geographically dispersed people, whom we could reach through a mobile site,” says Pamela Mead, director of user experience design.
But what that site would look like was a conundrum. Native mobile Web pages are still quite rare. There are mobile-capable sites with CSS and HTML tags that theoretically should work, but for all practical purposes don’t. And there are impressive one-off applications done with technologies like Flash. Those sites can function wonderfully, but only on one phone, offered by one carrier, in a tiny geographical area.
By contrast, Yahoo! decided to build a universal site, designed expressly for mobile devices and capable of reaching any user with a WAP-enabled phone, no matter how primitive. And phones, it turns out, are still relatively primitive. |
Selecting Target Phones
Mobile browsers today exhibit a bizarre patchwork of screen sizes, color schemes, and type and layout capabilities. Understanding those quirks was not only an important step in building the FIFA site, but an ongoing struggle that dogged the team throughout production.
“They can be quite idiosyncratic,” explains Saft, “even to the point of supporting some bits of code and not others.”
To make sense of the chaos, Yahoo!’s team first selected a target group of ten phones. They were all widely distributed, and their browsers ran the gamut from high-end to barely functional. As the thinking went, if the
site worked perfectly on all of them, it would perform reasonably well on the rest of the world’s phones.
Dividing The Classes |
From there, the team divided its target phones into two classes, based on whether or not they supported HTML tables. Those that did would have access to a graphically rich site with background colors and other clear visual markers. |
  |
|
“For the class of phones that doesn’t support tables,” says Saft, “you have text left, right, and center and bold or no bold. You can use a blank line or no blank line or colors. That’s about the limit of the typographical variables.”
Because the mobile team didn’t want to produce a single site with all those restrictions, it decided to build two versions. The more advanced version would offer sophisticated image and text box positioning while the more primitive version would rely largely on spacing to make the information clear.
Once this distinction was made, the team took a close look at the phones in each class. Did they all support certain characters? Which HTML tags did they know or not know? By doing this, the team was able to establish a least-common-denominator programming “language” that would work on every phone in each class. |
Graphics Packages |
At the same time, the graphics team—in particular, visual designer Rodrigo Lopez—began working on imagery for the site. As with coding, they knew they would have to create separate graphics packages for different sets of phones. |
  |
|
Unfortunately, they soon found that it wasn’t easy to separate the phones into different graphics classes. The handsets varied dramatically in terms of screen size and brightness. The same graphic that fit perfectly on screen A would take up too much real estate on screen B. And matching colors was extraordinarily difficult.
“Basically the LCDs have different values of brightness,” Lopez explains, “and that affects the way the colors are rendered. So we had to identify the common denominator between the different devices we were targeting, and create a grid of what was on the majority of screens and what wasn’t.”
In the end, the team had to create five different graphics packages—or, one for every two target phones—to ensure that the logos, flags and other elements appeared consistently on every platform. |
Project Requirements |
Not lost in the mix was the content itself. For this, however, the design was not directly responsible. “Initially we developed requirements working with product managers, and marketing and engineering teams,” explains Mead. |
  |
|
By matching the marketing requirements with content available from FIFA, the team soon had a good idea of what the site would contain. Once they knew, they began to research the content that was most important to users.
“The interesting thing is you don’t have to talk to lot of people,” says Mead, “because the patterns emerge quickly. By far, the most important things for FIFA fans in the mobile space are, what’s the game, what’s the score and who’s playing next.”
At this point, nearly every part of the project—from information architecture and engineering to interface design and graphics—moved forward simultaneously.
“It’s probably the largest difference in how you approach WAP pages versus Web pages,” says Saft. “The pieces are so interrelated that as we started to understand the content and requirements, we were able to see how things would play-out on the phones and [with the] visual design. There are so few pixels that we’re dealing with, that all of that pretty much happens back-and-forth.” |
Information Architecture
Once the content and user priorities became clear, Saft went to work on the information design scheme and user interface.
“The primary challenge with mobile,” he says, “is that on phones you have anywhere between four and twelve lines of text, so you have this very small space, yet everyone’s experience is the richness of what they have on their desktop..., so it becomes critical to understand exactly what the user wants to see and what they need.”
In a back-and-forth process with both Yahoo! and FIFA, the team eventually devised a logical and even elegant solution. The site would have three tabs. The home tab, or page, would always show the most important piece of World Cup news. If a match was in progress, it would display the score. If a game was coming up, it would display the names of the teams and the kickoff time.
The other two tabs were less time sensitive. The first focused on individual teams, and the second served as a gateway to a large amount of background information on the event.
Visual Elements |
Meanwhile, Lopez and his corresponding engineers began to put together the five graphics packages the phones would need. For the most part, their work involved a lot of trial-and-error. |
  |
|
“The rendering process only happens on the device—we have to do visual testing,” he explains. “We worked closely with engineering to tailor every graphic set and screen size. So we weren’t sacrificing image quality or color values in anything.”
Surprisingly enough, they found that they could render the images so that they were both small in size but also clear and bright. Unfortunately, they’re not giving away the secret to their success; they’re also not exaggerating when they say that the colors were remarkably consistent across all ten phones. |
Module Design
Once the information architecture and visual design schemes fell into place, production began. Here again, the mobile workflow diverged sharply from standard Web practice. Rather than constructing the site page by page, the team divided it into 35 “modules” that could be independently built and tested.
The modules are really content containers. “It’s a construct to help us think about information,” says Saft. “We have all these little groups of information that make up a page. Each of those is self contained. And, we want to design what that’s going to look like.”
Finally, when the modules were complete, the team snapped them together and checked to make sure the transitions worked.
“It sounds fairly straightforward,” says Saft, “but what happens is that different modules end up acting differently with each other. So we build-out the large parts, find out how it works and then fall back into prototyping and testing.”
Design Intent |
With production also came usability testing. And here, surprisingly enough, the team did not try to achieve perfect layout and content consistency on every phone. Instead, it wanted to make sure that users understood something it called “design intent.” |
   |
|
“For example, on a page, we may have the schedule,” says Saft. “Now, can someone look at it and see that those things are grouped together? It becomes important to help people understand what we’re intending to do.”
In other words, as the team tested every aspect of the design, it strove to ensure that users could correctly navigate the visual markers on pages and retrieve the information they wanted. At this point, it’s probably the best the mobile world can do. |
Launching Without A Hitch |
Obviously much more work went into the Yahoo! FIFA site. The team had to deal with localization, viral features, user customization, integration with content feeds and much more. Long days and nights were the norm and, by the end, many of the team’s members headed off for long-overdue vacations. |
  |
|
Even so, the site went live with barely a hitch. As expected, users across the world logged on, followed games, checked scores and read biographies of their favorite players. And though the exact number of users is a carefully guarded secret, Mead did admit that the company was pleased with the result.
And even if it hadn’t been, the numbers don’t matter much at this stage. The main problem with mobile design today is a lack of knowledge. Before the FIFA World Cup, probably no one had dealt with the complexities of creating such a large scale, native mobile site. By attacking the problem in a vigorous, systematic way, the mobile team at Yahoo! learned far more than any research project could have taught them.
“This project was exciting for a whole variety of reasons,” says Mead. “We wanted to push the envelope for what’s best practice for design on the Web...; the really great byproducts were a very close and tight collaboration with engineering and Q&A and a rich vocabulary for us to build off of.” |
No comments:
Post a Comment