Designing for a Mobile Experience: Patterns and Context


Published on

This is a slightly modified version of for Mobile Camp Memphis

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • this talk is going to focus on more of the conceptual side, were going to be talking about designing for users on-the-go, and how to consider fundamental differences like limited real-estate. were going to be focusing on the Why. If you are still interested in the how when were done, There are plenty of resources out there.
  • Form and Context are applicable to any kind of design ( print, web, mobile, industrial, interior, architecture ) The Form is what you are designing, and the context is the set of influence that apply to that form. if we are going to design a tea kettle, the initial need is to create a device that boils water. One of the best examples I've seen of this was given by Ryan Singers of 37 signals.
  • we start with the from—the form of a tea kettle. Out of everything in the world, this is the one thing that we are going to focus our attention on.
  • Everything around the tea kettle is context—they put some kind of constraint or have some kind of influence on the form. It's the situation or environment that the that kettle is in e.g. it goes on a stove, heat comes from the bottom, a person needs to pick it up, the contents need to be hot, but the handle needs to be able to be handles.) with out that context and those constrains, we may come up with a completely different device, we may design something that pressurizes and heats water in the head of our kitchen tap, much like the way an instant expresso machine does. Either would be great solutions if they fit the context that they were going to be used. What if one of the constraints was that the user needed to pass hot water to someone else? have you every tried to hand someone a hot coffee pot? Those same principles apply to your logos, your print projects and your user interfaces for any device. we will talk more about this later
  • Design patterns were first described in the 1960s by Christopher Alexander, an architect who noticed that many things in our lives happen according to patterns. Patterns are useful for both designers and users. They give us a starting point for the common context of similar existing forms. But they can also be a crutch, not all patterns are good patterns.
  • One of my favorite metaphors for this is the idea of paving the cowpaths
  • There's an urban legend that says that when the city of Boston was new and unpaved, the city fathers decided against laying out a regular street plan and instead merely paved the paths that had been worn by cattle. The implication is that this has resulted in a chaotic inefficient street plan that lacks logic. The admonition not to “pave the cow path” is supposed to remind us not to enshrine a makeshift solution. But if you analyze these patterns you can see that these travel paths were influenced by the context of traveling the area that may influence people in the same way. Were the cows avoiding steep hills? maybe they were just being stupid cows. The point is that patterns aren't perfect preprepared solutions, they are informed starting points. And this is a perfect transition into talking about the context of using mobile device.
  • Before we begin talking about mobile specific design patterns, I think its important to quickly go over the context in which mobile devises themselves are used. Just like the context of the tea kettle, the context of mobile users will help us understand why some design decisions are made.
  • Obviously there are many more differences, but we are going to focus on these four for this talk.
  • user in private environment with little distraction vs user in public places with many distractions
  • full size monitor - (somewhat predictable size) vs small and unpredictable screen size
  • cable, t1, reliable wireless vs 3g/edge/ spotty wireless one of the first major mobile projects that I designed was the Hilton IPhone app, We had some incredible constraints for that project and I was worried about how successful it would be because I wanted to do a lot of things differently. When I go to the app store to check out some of the reviews, a large majority of the complaints are about the app not being able to connect their account, nobody blames it on AT&T, or the fact that they may be driving through a tunnel, there simple response it that the app doesn't work.
  • keyboard and mouse vs touch screens and phone keyboards
  • The days of ‘Next" arrows and magnifying glass icons are leaving us, replaced by direct manipulation of content using swipes and double-taps.
  • smart phones can interact with the users voice, location, traveling speed. one of my favorite apps is Dragon dictation, I can talk into my phone, it will transcript what I said and I can send it in a text or email. Google uses location for mobile search, if you puled out a capable smart phone, went to, and searched for McDonald's, you'll get a listing of locations near you first.
  • its about an 80% reduction as a designer, you have get rid of the fluff, or as I like to think about it, you finally have good solid business case for getting rid of all the fluff that marketers, and project managers inset on for bigger screens
  • Mobile Design is nothing to be afraid of. Again, many of the same principles that you apply to your print projects, logos and websites are still relevant. I always thought these next quotes were the perfect embodiment of the logo design process. Now I'd think they were written about designing for mobile.
  • Hans was an Abstract Expressionist painter
  • Charles was a Jazz musician
  • Designing for a Mobile Experience: Patterns and Context