You are previewing Mobile Design and Development.

Mobile Design and Development

Cover of Mobile Design and Development by Brian Fling Published by O'Reilly Media, Inc.
  1. Mobile Design and Development
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Who This Book Is For
      2. How This Book Is Organized
      3. Conventions Used in This Book
      4. Using Code Examples
      5. How to Contact Us
      6. Safari® Books Online
      7. Acknowledgments
    3. 1. A Brief History of Mobile
      1. In the Beginning
      2. The Evolution of Devices
    4. 2. The Mobile Ecosystem
      1. Operators
      2. Networks
      3. Devices
      4. Platforms
      5. Operating Systems
      6. Application Frameworks
      7. Applications
      8. Services
    5. 3. Why Mobile?
      1. Size and Scope of the Mobile Market
      2. The Addressable Mobile Market
      3. Mobile As a Medium
      4. The Eighth Mass Medium: What’s Next?
      5. Ubiquity Starts with the Mobile Web
    6. 4. Designing for Context
      1. Thinking in Context
      2. Taking the Next Steps
    7. 5. Developing a Mobile Strategy
      1. New Rules
      2. Summary
    8. 6. Types of Mobile Applications
      1. Mobile Application Medium Types
    9. 7. Mobile Information Architecture
      1. What Is Information Architecture?
      2. Mobile Information Architecture
      3. The Design Myth
    10. 8. Mobile Design
      1. Interpreting Design
      2. The Mobile Design Tent-Pole
      3. Designing for the Best Possible Experience
      4. The Elements of Mobile Design
      5. Mobile Design Tools
      6. Designing for the Right Device
      7. Designing for Different Screen Sizes
    11. 9. Mobile Web Apps Versus Native Applications
      1. The Ubiquity Principle
      2. When to Make a Native Application
      3. When to Make a Mobile Web Application
    12. 10. Mobile 2.0
      1. What Is Mobile 2.0?
    13. 11. Mobile Web Development
      1. Web Standards
      2. Designing for Multiple Mobile Browsers
      3. Device Plans
      4. Markup
      5. CSS: Cascading Style Sheets
      6. JavaScript
    14. 12. iPhone Web Apps
      1. Why WebKit?
      2. What Makes It a Mobile Web App?
      3. Markup
      4. CSS
      5. JavaScript
      6. Creating a Mobile Web App
      7. Web Apps As Native Apps
      8. PhoneGap
      9. Tools and Libraries
    15. 13. Adapting to Devices
      1. Why Is Adaptation a “Necessity”?
      2. Strategy #1: Do Nothing
      3. Strategy #2: Progressive Enhancement
      4. Strategy #3: Device Targeting
      5. Strategy #4: Full Adaptation
      6. What Domain Do I Use?
      7. Taking the Next Step
    16. 14. Making Money in Mobile
      1. Working with Operators
      2. Working with an App Store
      3. Add Advertising
      4. Invent a New Model
    17. 15. Supporting Devices
      1. Having a Device Plan
      2. Device Testing
      3. Desktop Testing
      4. Usability Testing
    18. 16. The Future of Mobile
      1. The Opportunity for Change
    19. Index
    20. About the Author
    21. Colophon
    22. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Chapter 4. Designing for Context

In late 2008, I was in Berlin doing a mobile workshop at the Web 2.0 Expo. Having never been to Berlin, I did what I always do in new cities that I visit—I explored. I enjoy just walking aimlessly around a new city with no particular destination or plan. Not only is it a relaxing way to see the sights, but I find amazing things that aren’t on any tour or in any guidebook. There was just one problem with my plan: everything I explored was in German.

Because I know only about five and a half words in German, this made exploration more challenging. Although I really enjoyed seeing Berlin, my first of couple days there were an empty experience. I could certainly see what was right in front of me, but I didn’t have any understanding of what I was looking at. I found myself constantly wondering, “What is this place? Who is this a statue of and why is it here? What significance does it play? What are these people doing? Why is this important?”

At the end of my first day, I found myself in my hotel room visiting Wikipedia so that I could read about what I had seen that day. Unfortunately, I couldn’t remember all the sites I had seen. The next day was my workshop, so I had only a little time to wander, but I started taking photos of plaques and historical markers with the camera in my phone so I could translate them later that night. I thought it was an inspired idea, but it proved to be too difficult to make out the text and then enter it into an online translator. My third and final full day in Berlin I had the entire day to explore. To make the most of it, I completely gave up on my futile attempt to avoid incurring international data roaming charges and started using my iPhone as my own personal tour guide.

I wandered aimlessly like I did the previous days, but this time, as soon as I found myself in front of an interesting cultural landmark, I pulled out my phone and started using the location features of the device to detect my location and show me information, in English, about the nearby sites and how far away they were from my precise location. I would read the history of the landmark, what it meant to the German people, and learn about other nearby landmarks that were similar. My day of sightseeing, the locations I visited, and the experiences I had were defined by the information I received on my mobile device.

There I was, the geekiest tourist you’ve ever seen, standing in front of a great historical landmark, looking down at my phone reading the Wikipedia entry about it (see Figure 4-1).

My mobile device enhanced my understanding of the landmarks in Berlin, in my own language

Figure 4-1. My mobile device enhanced my understanding of the landmarks in Berlin, in my own language

It might have appeared stupid to others and maybe it made me stand out as a tourist; if it did, I didn’t care. My experience of Berlin was immensely richer because I had an understanding, or context, and I was experiencing it in my immediate surroundings. The irony is that as a “mobile guy,” it would take me several months to realize that my experience was almost the perfect example of mobile context.

Thinking in Context

Context is probably the most used, underestimated, and misunderstood concept in mobile. I think of it as the chewy nougat in the center of a good candy bar. Sure, the candy bar would be good without it, but it’s that little extra bit that makes the candy bar an incredible experience; no one quite knows what it is, but everyone knows that it tastes good. Actually, that example probably doesn’t help demystify context as much as it makes you crave a candy bar. So let me explain it another way.

I define context in two ways. There is “Context” with a big C and “context” with a little c. These are often used interchangeably with no preference or distinction. Although they are the same word, they have two different implied meanings. This isn’t to say that the case of a letter makes one more important than the other. It only helps to make a distinction between lofty big ideas (big C) and the more practical and more invisible intention of use (little c).

Context with a Capital C

Context with a capital C is how the users will derive value from something they are currently doing, or in other words, the understanding of circumstance. It is the mental model they will establish to form understanding. For example, standing in front of the remnants of the Berlin Wall and reading about the history on my phone is adding Context to my task. It enhances my experience and awareness of my surroundings in a significant way.

I refer to this as “providing Context” as in “this information is providing me Context or better understanding of what this moment in time means to me.” Context enables us to better understand a person, a place, a thing, a situation, or even an idea by adding information to it.

The distracted driver

One example of putting Context to use is the Distracted Driver campaign that ran in New Zealand.[6] The government saw an increasing problem with drivers having “diverted attention,” causing as many as 26 fatalities in a single year. Research found that tasks such as receiving an incoming text message seriously diverted drivers’ attention and increased the chances of an accident. In an effort to build awareness, the New Zealand Transport Authority asked Clemenger BBDO to develop a campaign to demonstrate that sending text messages while driving can be dangerous.

Do you remember hearing the stories of those gory highway safety scare films from the 1960s, such Options to Live, Wheels of Tragedy, or Mechanized Death? It used to be that you had to show teenagers extremely violent and horrific images to illustrate the importance of safe driving. But Clemenger BBDO was able to use Context to prove a point instead of blood, guts, and dismemberment.

The result was a website showing a driver casually behind the wheel, almost as though you were looking at a live webcam from inside a car somewhere in New Zealand (Figure 4-2).

The distracted driver

Figure 4-2. The distracted driver

You are then encouraged to send a text message from your phone to the driver seen in the website (Figure 4-3).

People are encouraged to send a text message to the distracted driver

Figure 4-3. People are encouraged to send a text message to the distracted driver

In a few seconds, the driver in the video would receive the text message, picking up his phone to read the message you just sent him (Figure 4-4).

The distracted driver receives the text message

Figure 4-4. The distracted driver receives the text message

As the driver (and you) is reading the message, he slowly heads into oncoming traffic and crashes (Figure 4-5).

This merger of mobile, web, and video technology creates a dramatic and compelling case for when you should read your text messages. By using Context to form understanding—in this case, of the situation of being behind the wheel, followed by an event (the crash) that would be impossible to duplicate in real life, the user is able to participate in a hypothetical situation in real time. The user becomes part of the experience. Without Context—in this case, the ability to interact with the driver using our mobile phone—our understanding of what transpired would be diminished. We would simply be watching one of those shocking highway safety films, with no personal or emotional stake in what just happened.

The distracted driver crashes due to your text message. Nice work!

Figure 4-5. The distracted driver crashes due to your text message. Nice work!

The eRuv project

Another fascinating example is the mobile eRuv project (, which Elliot Malkin created in New York City. An eruv is a wire boundary that often surrounds orthodox Jewish communities (see Figure 4-6). Every Saturday, the Jews observe the Sabbath, or the day of rest. During the Sabbath, Jews are unable to perform any work of any kind; for those that observe the stricter concepts, this means that you can’t carry anything outside of your private domain, such as carrying your house keys outside of your house. The eruv designates a conceptual area within a public space, as a shared private space for the community where Jews can still observe the Sabbath, carrying their keys with them from their home, but without committing sin.

Fifty years ago, a large area of Manhattan was designated as an eruv without wires, using the Third Avenue elevated train on the West and the East River on the East (Figure 4-7).

A modern-day eruv in the Upper West Side of Manhattan

Figure 4-6. A modern-day eruv in the Upper West Side of Manhattan

The pre-1955 eruv, using physical and natural landmarks instead of wires

Figure 4-7. The pre-1955 eruv, using physical and natural landmarks instead of wires

In 1955, the train line was dismantled and replaced with a subway, and thereby the eruv was dismantled, too. To experiment with these concepts and what a modern eruv might look like, Elliot used QR, or quick response, codes (also known as semacodes in the United States) to designate the boundaries of the old Third Avenue eruv (as shown in Figure 4-8). QR codes are two-dimensional barcodes that can be read by the cameras within mobile phones, and display text, or contain a URL to a mobile web page or photo. In this case, Elliot showed a picture of what the eruv looked like 50 years ago.

An eruv built with QR codes, instead of wires, showing 50-year-old location information

Figure 4-8. An eruv built with QR codes, instead of wires, showing 50-year-old location information

The eRuv project shows that physical locations can contain information, too. In this case, location contains the information long since gone with the passage of time; it is shown using mobile technology that can be extracted from a mental model of how space is perceived around us.

Context with a Lowercase c

On the other hand, context with a lowercase c is the mode, medium, or environment in which we perform a task or the circumstances of understanding. The following sections look at the three types of context with a little c.

The present location or physical context

Let’s start with physical or environmental context. Where I am, my location more often than not has meaning. My physical context influences my actions; whether I’m at home, in the office, in a car, on a bus or train, walking the streets of Berlin, etc., each environment will dictate how I access information and therefore how I derive value from it.

The easiest example might be using a mobile device in a car versus a bus or train. My car is private, so the information I want to extract might be far more personal in nature, but I can’t easily input or extract information from a screen because I’m focused on not running off the road and ending up like the distracted driver. On a bus or train, I have little or no privacy, so the information I seek will likely be casual and less meaningful, but because I have no other tasks to perform, I can focus on using the device.

One interesting mashup of the real world augmented by information from the Web is the Android application Wikitude, which allows you to use the camera in your phone and literally overlay information about the landmarks in front of you, as shown in Figure 4-9.

The Android application Wikitude presenting information from the Web in the context the user’s present location

Figure 4-9. The Android application Wikitude presenting information from the Web in the context the user’s present location

Our present device of access, or media context

Next let’s talk about media. We talked about mass media earlier and the various benefits each medium offers. What we didn’t discuss is why people use one medium over another and how each medium provides users different levels of value. For example, a printed newspaper is rich in content, but offers little value to our current task or location. A newspaper is a fixed artifact of the past, given the time it takes to print and distribute. By the time you read it during your morning coffee, it is already out of date.

Mobile devices may not be as rich in content, but they can provide information on the present, which is a lengthy way of saying that the mobile context offers value that the printed context simply cannot. However, media context isn’t just about the immediacy of the information we receive—it also can be used to engage audiences in real time, something that other mediums just can’t do.

The Estonian government will be putting the concept of media context to the test in their 2011 parliamentary elections, allowing citizens to vote for their leaders using SMS. In this case, the government can tabulate results instantly. But imagine a day when citizens can vote on local or national issues in real time, eschewing having to wait for traditional media to report on the effect of their vote, instead seeing the results in real time, as it happens.

There are already many opting to use the mobile media context in order to be heard. On the immensely popular television show American Idol, more votes were cast using a mobile phone in 2009 (178 million total text message votes) than votes cast in the 2008 presidential election (131 million ballots cast).

Our present state of mind, or modal context

The third and final type of context with a little c is modal context, or our presence of mind when we perform a task. Now this one is by far the hardest to explain. Against my mother’s better judgment, I decided I would be a geeky technologist when I grew up, rather than a brainy psychologist, but I’ll try to explain it as best I can.

Each time we are exposed to various stimuli, our brains go to work trying to understand the signals our senses send to our brain. Through some miracle of the central nervous system, these signals are converted into reactions. Sometimes they are involuntary physical reactions, like pulling your hand away from a flame, and sometimes they are mental reactions, which we call thoughts and reasoning, like asking yourself, “Should I cross the street now or later?”

We go about our lives and make thousands of little decisions every day that we don’t even consciously consider—perhaps habitual or perhaps instinctual. We make maybe a dozen or so inconsequential decisions like “What should I eat for lunch?” Things that seem important at the time, but we promptly forget. And maybe once or twice a day various decisions string together to form a bigger, more meaningful thought such as “Should I buy it now or later?”

As humanity becomes more infused with information and ubiquitous access to it, for better or worse we begin to rely on information to aid us in making these decisions, usually for the more complex ones, and increasingly for the more minute.

Our present state of mind is probably the greatest influencer of what, when, and where we perform tasks. Driven by need, want, or desire we make choices that attempt to accomplish goals—sometimes lofty ones, but more often than not trivial ones. This modal context is at the heart of all deliberate action or inaction.

This concept is in desperate need of an example, so let me use my trip to Berlin once more. While in Berlin, I wanted to gain understanding of how a single city came to be so emblematic of the cultural division that for over half century influenced the rest of the world, and more importantly how the city overcame these differences to become something new.

Is there something I can learn from the transformation of Berlin culture and apply to my own life? Is there something I can teach my child, who will otherwise read about the events that occurred in this great city only in history books?

My presence of mind was to somehow transform artifacts of events and of a people into some type of information that is relevant to me in my own life. Presence of mind drives our actions, to consciously or unconsciously create circumstances in which we gain understanding through the acquisition of information.

The best content for your career. Discover unlimited learning on demand for around $1/day.