Introduction

If you are picking up this book, you don't need to be told how ubiquitous mobile is, how quickly it is growing and changing, and how much it is supplanting desktop computing, and even more traditional media such as film, television, radio, papers and books.

Mobile is so huge and growing so fast, that astonishing numbers from just a few years ago pale in comparison. So much so, that we won't even bother quoting any figures, as they will be quaint far before the rest of the content looses its relevance.

One thing that has not yet happened is true standards of design. There are just now movements to design for mobile first, for the very good reason that in many markets your customers look at your website on mobiles more than desktops.

Yet, too much design is based on older paradigms for desktop, or even for TV or print. Within mobile, too many design discussions are very narrowly focused. They pay special attention to applications on a single platform, or only to the mobile web. And almost always at the specific expense of every other platform. Certainly, almost no one discusses anything but smartphones, despite huge marketshare and vast use rates.

Fragmentation is discussed as a bad thing for marketing, and sometimes for design, but designers themselves contribute too often by focusing on pixel-based layouts, and the specifics of their favorite OS. This does no one any good, and is especially pointless when you consider the user. Devices generally have many more features and methods of interaction in common than their differences might imply.

Serious mobile design now, and especially in the future, will require building for every user, and providing some solution on every platform.

This book offers a set of common patterns for interaction design on all types of mobile devices. A few patterns require specific hardware or form factors, but most are absolutely universal.

Most do not concern themselves at the top level with implementation details. The correct solution is correct whether at the OS level, as an application or as a website.

Of course, there are notes to discuss alternatives, methods and limitations to assist with decision making. And, many of the specific patterns are coupled with alternatives or variations that allow similarly-useful solutions to be achieved on any type of device.

• Who would read this book?

• What Do You Mean by "Mobile"?

• What is a Pattern?

• Where Did These Come From?

• Common Practice vs. Best Practice

• Disagree? Change it. wiki only

• Reading the Patterns

• Successfully Designing With Patterns & Heuristics

• Principles of Mobile Design

• Acknowledgements

The Patterns

I - Page

Introduction to the Page section.

2 - Wrapper

Introduction to the Wrapper chapter.

• Scroll √

• Annunciator Row

• Notifications

• Titles

• Revealable Menu

• Fixed Menu

• Home & Idle Screens

• Lock Screen

• Interstitial Screen

• Advertising

Summary to the Page section Page-Wrapup.

II - Components

Introduction to the Components section.

3 - Display of Information

Introduction to the Display of Information chapter.

• Vertical List

• Infinite List

• Thumbnail List

• Fisheye List

• Carousel

• Grid

• Film Strip

• Slideshow

• Infinite Area

• Select List

4 - Control & Confirmation

Introduction to the Control & Confirmation chapter.

• Confirmation

• Sign On

• Exit Guard

• Cancel Protection

• Timeout

5 - Revealing More Information

Introduction to the Revealing More Information chapter.

• Windowshade

• Pop-Up

• Hierarchical List

• Returned Results

Summary to the Component Section Component Wrapup

III - Widget

Introduction to the Widget section.

6 - Lateral Access

Introduction to the Lateral Access chapter.

• Tabs

• Peel Away

• Simulated 3D Effects

• Pagination

• Location Within

7 - Drilldown

Introduction to the Drilldown chapter.

• Link

• Button

• Indicator

• Icon

• Stack of Items

• Annotation

8 - Labels & Indicators

Introduction to the Labels & Indicators chapter.

• Ordered Data

• Tooltip

• Avatar

• Wait Indicator

• Reload, Synch, Stop

9 - Information Controls

Introduction to the Information Controls section.

• Zoom & Scale

• Location Jump

• Search Within

• Sort & Filter

Summary to the Widget Section Widget Wrapup

IV - Input & Output

Introduction to the Input & Output section.

10 - Text & Character Input

Introduction to the Text & Character Input section.

• Keyboards & Keypads

• Pen Input

• Mode Switches

• Input Method Indicator

• Autocomplete & Prediction

11 - General Interactive Controls

Introduction to the General Interactive Controls section.

• Directional Entry

• Press-and-hold

• Focus & Cursors

• Other Hardware Keys

• Accesskeys

• Dialer

• On-screen Gestures

• Kinesthetic Gestures

• Remote Gestures

12 - Input & Selection

Introduction to the Input & Selection section.

• Input Areas

• Form Selections

• Spinners & Tapes

• Clear Entry

13 - Audio & Vibration

Introduction to the Audio & Vibration section.

• Tones

• Voice Input

• Voice Readback

• Voice Notifications

• Haptic Output

14 - Screens, Lights & Sensors

Introduction to the Screens, Lights & Sensors section.

• LED

• Display Brightness Controls

• Orientation

• Location

Summary to the Input & Output Section Input & Output Wrapup

V - Stuff We're (Probably) Not Putting In the Book

We made up a LOT of patterns as short descriptions, and when we got around to organizing and detailing them... they didn't all sound that good after all. Also, we have to keep the book at a reasonable size. But, we don't want to loose track of these, so here's an un-ordered list of those ideas we've kicked aside. For now.

• Attach & Reference - I liked this concept (it was under Input & Selection), but when I started really thinking about it, I realized it was far more about integrating other stuff with the widget, which is not really the way the rest of the book is written. The reason is, there are like half a dozen of these in the world. No one writes (or can write?) a different one. It's OS based, and even the paradigms change slightly between OSs. Android lets you use any number of services, others do not for example. So... maybe later. Contribute to it if you want.

• Meter and Levels - Generalized version of what I think of battery meters. For all those things, signal strength, and anything else. Over broad. Also, talked about a bit in the Annunciator Row pattern itself, so redundant.

• Ratings - Star ratings, and the like. Indicates a min, max, common and yours. But, every time a service changes it (IMDB, Netflix) people complain. And that's on the desktop side. It's worse when trying to offer multiples, and interactivity on mobile. No best practice yet.
• Flagging - How you say a piece of content is inappropriate, etc. Some good practices, but all have to be learned (in a comment stream, does it disappear after a while, etc.?) and there's no best practice, therefore. And that's desktop. What about mobile?
• Tagging - Like adding word tags to an image to make it easier to find. Good idea. Problem is that it can be implemented in so many ways. No one good or commonly used best practice for mobiles as yet.
• Augmented Reality - Not really a pattern, and too nascent anyway, and when seen now, generally uses common patterns from other types of interactions. Expect to see some unique ones in the future as AR becomes mature.

• Accessibility - Because of the approach we're taking to describing reasoning, and establishing norms for user perception, it's hard to robustly address accessibility. We're starting to gather this stuff down below (see Color Deficit Design Tools for one example) but in the pattern book above are just generally considering and making reference, instead of explicitly addressing every edge case. Maybe we need a followup book "Designing Mobile Computing Devices for Universal Accessibility"???

• Screen Stuff - A variety of interesting tips and tricks could go here, but are mostly too much tips and tricks, and not enough pattern. Will be more relevant as lit-pixel displays appear, but may be covered other places, like the Lock Screen, which actually already mentions it.

Design Tools

This is all stuff that is not actually in the book, but which we think is very helpful for designing, or getting introduced to mobile design. Much of it is simple links to others, or are design templates, so aren't that useful in a book anyway.

Some of the rest will be real familiar if you read the book (or the wiki chapters above). The templates created by us and shared here are the foundation of the book illustrations, the location discussions in the book are summaries of that below, etc.

Feel free to edit these to add new information, flag or delete bad links and even just add comments about whether some link or bit of information is good or bad.

• An introduction to mobile radiotelephony - Cause everyone working in the field really should know.

  • Introduction to Location Technologies - Location is not just GPS. If you think it is, and are designing applications and services that use it, read this.

• Drawing Tools & Templates - Graphic design tools, UI guidelines, tips for various tools.

• Documentation Templates - Designing documents can be as important to successful implementation as the actual design.

• Introduction to Mobile Typography - Overview of basic type terms and some things to watch out for in small screens.

  • Italics and Obliques For Digital Display

• Greeking - If you need to represent placeholder text, read this.

• Color Deficit Design Tools - And other tools to help understand colorblindness and related conditions.

• Script Events - How different mobile browsers handle, or don't handle, DOM events for Javascript/ECMAscript. NOT DONE.

• Emulators - Emulators, prototyping tools, design aids, etc.

Events & Locations

Eric works in Sydney, Australia. Steven lives in the Kansas City, Missouri (US) area, but is mostly around Charlotte, NC or New York City during the week.

We're pretty busy with day jobs, freelance jobs and actually writing the book. But if we're scheduled to go somewhere and talk about anything remotely related to mobile, much less the book, we'll post it here:

• Float Mobile Learning Symposium 10 June 2011, Bradley University, Peoria, Illinois

References

• List of References