|
Size: 13467
Comment:
|
Size: 13733
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| {{attachment:Book-Cover.png|A black and white (the real one will be color) mockup of the cover of our forthcoming O'Reilly book, Designing Mobile Interfaces, by Steven Hoober & Eric Berkman. I thought it would be alphabetical, but now we know who's more important :) |align="right"}} | == Designing Mobile Interfaces: Patterns for Interaction Design == [[http://www.amazon.com/gp/product/1449394639/ref=as_li_tf_tl?ie=UTF8&tag=4ourthmobile-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=1449394639|{{attachment:Book-Cover.png|Designing Mobile Interfaces, by Steven Hoober & Eric Berkman.|align="left"}}]]'''''Designing Mobile Interfaces: Patterns for Interaction Design''''' is the comprehensive, platform-agnostic reference for your mobile design work. Whether you design or develop for smartphones, featurephones, tablets, or other touchscreen devices, common principles are discussed and codified as 76 universal interaction and interface patterns. '''Designing Mobile Interfaces''' has been translated into [[http://4ourth.com/wiki/Other%20languages%20and%20editions|multiple languages]], used to teach interactive design at universities, and guided the creation of countless apps, websites and even entire OSs like Firefox. |
| Line 3: | Line 4: |
| == 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. |
Each pattern explains the underlying psychology and physiology, describes best practices in implementation, and lists pitfalls and "best practices" you should watch out for and avoid. Every pattern is grouped with similar or optional patterns, and appendices detail key background information from typography to the principles of mobile networks. You get not just a list of designs and out of date screenshots, but have a base of knowledge to make up your own mind, and react to the always-changing mobile environment. |
| Line 6: | Line 6: |
| 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. | ''"Designing Mobile Interfaces is another stellar addition to O’Reilly’s essential interface books. Every mobile designer will want to have this thorough book on their shelf for reference."'' — Dan Saffer |
| Line 8: | Line 9: |
| One thing that has not yet happened is true standards of design. There are just now movements to design the mobile experience first. A good reason is that in many markets, many of your customers look at your website on mobiles more than desktops. | '''Buy it from Amazon:''' * [[http://www.amazon.com/gp/product/1449394639/ref=as_li_tf_tl?ie=UTF8&tag=4ourthmobile-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=1449394639|Paperback, 582 pages, color.]] * [[http://rcm.amazon.com/e/cm?t=4ourthmobile-20&o=1&p=8&l=as1&asins=B00630NWGK&ref=tf_til&fc1=000000&IS2=1<1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr|For your Kindle.]] |
| Line 10: | Line 13: |
| 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 of featurephones. | '''Buy it direct from O'Reilly:''' * [[http://shop.oreilly.com/product/0636920013716.do|Paperback, 582 pages, color.]] * [[http://shop.oreilly.com/product/0636920013716.do|eBook. DRM-Free PDF, ePub, Kindle-compatible .mobi, DAISY, and Android .apk for pretty much any reader you wish.]] |
| Line 12: | Line 17: |
| 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. | '''Read in other languages''' * ''Designing Mobile Interfaces'' has been translated into Russian, Chinese, Korean, and Italian. [[Other languages and editions]] |
| Line 14: | Line 20: |
| Serious mobile design now, and especially in the future, will require building for every user, and providing some solution on every platform. | === Read it Online === Or, you can just read the whole book [[Designing Mobile Interfaces|right here on this wiki]]. Pretty much every bit of content from the book is posted online. It is also regularly updated, especially the reference sections, so even if you buy the book check back for updates, and [[https://shoobe01.wufoo.com/forms/contact-us-about-the-book-or-wiki/|contact us]] with errors, suggestions or to get access to the wiki to add updates yourself. ----- |
| Line 17: | Line 28: |
| 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. | == Preface == * [[Preface]] * [[Who This Book Is For]] * [[What We Mean by “Mobile”]] * [[What Is a Pattern?]] * [[Where Did These Patterns Come From?]] * [[Common Practice Versus Best Practice]] * [[Reading the Patterns]] * [[Successfully Designing with Patterns and Heuristics]] * [[Principles of Mobile Design]] * [[Heuristics for Evaluating Mobile Designs]] * [[Brainstorming, Workshopping, etc]] |
| Line 19: | Line 41: |
| 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?]] √ * [[Why should you trust what it says?]] * [[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]] {{{#!wiki yellow/solid It's a wiki, but also a book (to be released in October). We need to keep things in synch, so please see the help tab for formatting information, be respectful of content on the site, and add your notes and comments to the appropriate section at the bottom of each page. For information or to get access to the wiki for editing [[http://shoobe01.wufoo.com/forms/m7x3w7/|Contact us]] Contact @shoobe01 or @ericberkman if you don't see us responding to your change fast enough. }}} {{{#!wiki yellow/solid We're editing again: Notes and in-progress pages are the norm for the month of July. Yeah, it's sub-optimal to read this on some mobile devices. Oh, the irony. We know. This was quick and cheap. But actually, is good enough we often do writing on handsets while an idea strikes us in an airport or restaurant. It works. }}} |
----- == Designing Smartphone Interfaces == I had planned on updating the patterns to create an eventual second edition, and I certainly have added plenty of notes and so on, but now think I may propose a fairly different type of follow-on book. [[Designing Smartphone Interfaces|This]] is where I am working on it. |
| Line 55: | Line 48: |
| === I - Page === | Think we need to add a pattern? You might have just missed it, or the world might have changed. [[http://4ourth.com/wiki/Index?action=newaccount|Create an account]] and add it directly to this wiki, or if more lazy just [[https://shoobe01.wufoo.com/forms/contact-us-about-the-book-or-wiki/|contact us]] and we'll look into it. Really! |
| Line 57: | Line 50: |
| Introduction to the [[Page]] section. | * [[I - Page]] - * [[Page|Introduction]] * Chapter 1 [[Composition]]: [[Scroll]], [[Annunciator Row]], [[Notifications]], [[Titles]], [[Revealable Menu]], [[Fixed Menu]], [[Home & Idle Screens]], [[Lock Screen]], [[Interstitial Screen]], [[Advertising]] * [[Page-Wrapup]] * [[II - Components]] * [[Components|Introduction]] * Chapter 2 [[Display of Information]]: [[Vertical List]], [[Infinite List]], [[Thumbnail List]], [[Fisheye List]], [[Carousel]], [[Grid]], [[Film Strip]], [[Slideshow]], [[Infinite Area]], [[Select List]] * Chapter 3 [[Control and Confirmation]]: [[Confirmation]], [[Sign On]], [[Exit Guard]], [[Cancel Protection]], [[Timeout]] * Chapter 4 [[Revealing More Information]]: [[Windowshade]], [[Pop-Up]], [[Hierarchical List]], [[Returned Results]] * [[Component Wrapup]] * [[III - Widget]] * [[Widget|Introduction]] * Chapter 5 [[Lateral Access]]: [[Tabs]], [[Peel Away]], [[Simulated 3D Effects]], [[Pagination]], [[Location Within]] * Chapter 6 [[Drilldown]]: [[Link]], [[Button]], [[Indicator]], [[Icon]], [[Stack of Items]], [[Annotation]] * Chapter 7 [[Labels and Indicators]]: [[Ordered Data]], [[Tooltip]], [[Avatar]], [[Wait Indicator]], [[Reload, Synch, Stop]] * Chapter 8 [[Information Controls]]: [[Zoom & Scale]], [[Location Jump]], [[Search Within]], [[Sort & Filter]] * [[Widget Wrapup]] * [[IV - Input and Output]] * [[Input and Output|Introduction]] * Chapter 9 [[Text and Character Input]]: [[Keyboards & Keypads]], [[Pen Input]], [[Mode Switches]], [[Input Method Indicator]], [[Autocomplete & Prediction]] * Chapter 10 [[General Interactive Controls]]: [[Directional Entry]], [[Press-and-hold]], [[Focus & Cursors]], [[Other Hardware Keys]], [[Accesskeys]], [[Dialer]], [[On-screen Gestures]], [[Kinesthetic Gestures]], [[Remote Gestures]] * Chapter 11 [[Input and Selection]]: [[Input Areas]], [[Form Selections]], [[Mechanical Style Controls]], [[Clear Entry]] * Chapter 12 [[Audio and Vibration]]: [[Tones]], [[Voice Input]], [[Voice Readback]], [[Voice Notifications]], [[Haptic Output]] * Chapter 13 [[Screens, Lights, and Sensors]]: [[LED]], [[Display Brightness Controls]], [[Orientation]], [[Location]] * [[Input and Output Wrapup]] |
| Line 59: | Line 76: |
| ==== 2 - Composition ==== | |
| Line 61: | Line 77: |
| Introduction to the [[Composition]] 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]]. |
=== V - Stuff We Didn't Put 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. * [[Additional Topics]] |
| Line 77: | Line 82: |
| === II - Components === Introduction to the [[Components]] section. |
== Appendices & General Information == To keep the patterns focused on design and implementation, I have pulled all kinds of supporting information out of them. However, a lot of it is still very interesting. And there's no good way for a designer or developer to get a summary of this sort of information. |
| Line 80: | Line 85: |
| ==== 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]] √ |
So, I've included it here as an Appendix, ordered so you can just pretty much read it from one end to the other. |
| Line 93: | Line 87: |
| ==== 4 - Control & Confirmation ==== Introduction to the [[Control & Confirmation]] chapter. * [[Confirmation]] √ * [[Sign On]] √ * [[Exit Guard]] √ * [[Cancel Protection]] √ * [[Timeout]] √ |
Visit any time to get the latest updates, or just to avoid typing in long links from a piece of paper. And please come add your own information, or update old or changed links. |
| Line 101: | Line 89: |
==== 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]] 19 * [[Accesskeys]] * [[Dialer]] * [[On-screen Gestures]] * [[Kinesthetic Gestures]] * [[Remote Gestures]] ==== 12 - Input & Selection ==== Introduction to the [[Input & Selection]] section. * [[Input Areas]] * [[Form Selections]] * [[Mechanical Style Controls]] * [[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. |
|
| Line 230: | Line 91: |
| * [[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. |
* [[Introduction to NFC]] - Placeholder, mostly, now that this is coming online for real. * [[Introduction to Bluetooth]] - Also placeholder, with just some links of interest for now. * [[History of Computing]] * [[Drawing Tools & Templates]] - Graphic design tools, UI guidelines, tips for various tools. * [[Emulators]] - Emulators, prototyping tools, design aids, etc. * [[Device Detection]] - The step past responsive you need to do for mobile. By guest expert Luca Passani. * [[Leverage Existing Device Capabilities]] - URI schemes and inter-application linking. * [[Raster Design Tips]] - 72 dpi is (probably) wrong. * [[Optimize Mobile Performance]] - Just notes and links now * [[Documentation Templates]] - Designing documents can be as important to successful implementation as the actual design. * [[Design for Accessibility]] - Short, focused on apps, but I think an okay intro for now. * [[Color Deficit Design Tools]] - And other tools to help understand colorblindness and related conditions. * [[Other Mobile Pattern Libraries]] - Not that I agree with most of these, but for completeness. * [[Introduction to Mobile Typography]] - Overview of basic type terms and some things to watch out for in small screens. |
| Line 236: | Line 108: |
| * [[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. |
* [[Greeking]] - If you need to represent placeholder text, or graphics, read this. * [[Type for Mobile Devices]] - A list of the typefaces used on various mobile platforms. |
| Line 241: | Line 111: |
| * [[Conspicuity with Color]] * [[Hearing & Limits]] * [[Brightness, Luminance, and Contrast]] * [[How Do Users Really Hold Mobile Devices]] * [[General Touch Interaction Guidelines]] * [[Fitts' Law]] |
|
| Line 242: | Line 118: |
| {{{#!html <a name="notmobile"> </a> }}} |
|
| Line 244: | Line 122: |
| == 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: * [[http://uxshowandtell.com/group/kansascity/|Kansas City UX Show & Tell]] 22 July 2011 * [[http://floatlearning.com/symposium/|Float Mobile Learning Symposium]] 10 June 2011, Bradley University, Peoria, Illinois |
== Not Desktop, But Not Quite Mobile == Though the patterns are supposed to be general enough to apply to kiosks, telematics, 10-foot Ui, etc. experts in those fields insist they just aren't. I have given in and in the interest of increasing knowledge, am going to start linking to the good stuff in related domains. * '''Kiosks''' even if they are made by strapping an iPad to the wall, have different context, and different environmentally-derived interactions. Design them differently. * [[http://www.studioiq.com.au/blog/designing-software-for-kiosks|Designing Software for Kiosks]] by Studio IQ. Good tips. Keep bugging them, and maybe we'll get a full repository of info out of them. * [[http://www.uxmatters.com/mt/archives/2013/08/designing-intuitive-point-of-interest-and-point-of-sale-touch-interfaces.php|Designing Intuitive Point-of-Interest and Point-of-Sale Touch Interfaces]] * '''10-foot-UI''' is any interactive experience viewed from a distance. The usual assumption is a TV in a living room. Smart TVs have brought this out of the game console, and made it more mainstream. Your website is getting viewed at 10 foot range, in group settings. * [[http://www.bbc.co.uk/gel/tv/device-considerations/designing-for-tv/introduction|Global Experience Language - TV]] by the BBC - Style guides and many guidelines and principles for TV graphics and interactive TV. * [[http://51degrees.mobi/Blog/TabId/553/ArtMID/1641/ArticleID/184/Which-TV-Screen-Size-is-Most-Popular-in-the-US.aspx|TV Screen Sizes]] by popularity of Web viewing, September 2013 * '''Telematics''' * [[http://ux.stackexchange.com/questions/41506/dark-screens-in-cars/41516#41516|Dark Screens in Cars]] a discussion that took off with many good links. * [[http://car-ux.com/|Car UX]] is just a bunch of photos of car control panels. So, continuing the bad tradition of confusing UI with UX. * '''Games''' No matter what they are on, game design is a bit different. Different enough I did not cover it in anything else in this book. Game design resources (TBD) should be referenced generally. * [[http://www.thatgamesux.com/|That Game's UX]] terrific blog on gaming, with all sorts of great UX principles applied or reviewed. * [[http://www.gamasutra.com/view/news/205434/Designing_better_controls_for_the_touchscreen_experience.php#comment224220|Designing Better Controls for the Touchscreen Experience]] from Gamasutra. * '''Augmented Reality''' - Not really a platform like the others, I have seen enough good stuff that is really pushing the bounds of what we think of as interaction and interface that I think AR also needs a separate and robust set of standards. Now. * [[Augmented Reality Standards and Examples]] that I have gathered * [[http://www.w3.org/community/ar/|W3C Working Group on AR Standards]] |
| Line 254: | Line 142: |
| * [[List of References]] | * [[Works Cited]] * [[Additional Resources]] ----- == Other Stuff from the Book == * [[Publishing Information]] * [[About the Authors]] * [[https://shoobe01.wufoo.com/forms/contact-us-about-the-book-or-wiki/|We'd Like to Hear from you]] * [[Safari® Books Online]] * [[Acknowledgements]] * [[Colophon]] * Index - This has not been imported as it's the ''book's'' index. It's keyed to page numbers, so doesn't work here. Consider it a value-add if you pay for the for the eBook or printed editions. ----- == Speaking Engagments, Presentations, Webcasts... == Eric works in Sydney, Australia. Steven lives in the Kansas City, Missouri (US) area. We're pretty busy with day jobs, freelance jobs and so on. But if we're scheduled to go somewhere and talk about anything remotely related to mobile (and it's an open meeting you can come to) we'll [[Speaking|post it here]]. ----- == Mentions, Reviews & Other Writing == We (and especially Steven) write a lot still. [[Mentions, Reviews & Other Writing|Here we've gathered]] a list of articles of note, articles in which we're mentioned or interviewed, and reviews or other important mentions of this book. |
Designing Mobile Interfaces: Patterns for Interaction Design
Designing Mobile Interfaces: Patterns for Interaction Design is the comprehensive, platform-agnostic reference for your mobile design work. Whether you design or develop for smartphones, featurephones, tablets, or other touchscreen devices, common principles are discussed and codified as 76 universal interaction and interface patterns. Designing Mobile Interfaces has been translated into multiple languages, used to teach interactive design at universities, and guided the creation of countless apps, websites and even entire OSs like Firefox.
Each pattern explains the underlying psychology and physiology, describes best practices in implementation, and lists pitfalls and "best practices" you should watch out for and avoid. Every pattern is grouped with similar or optional patterns, and appendices detail key background information from typography to the principles of mobile networks. You get not just a list of designs and out of date screenshots, but have a base of knowledge to make up your own mind, and react to the always-changing mobile environment.
"Designing Mobile Interfaces is another stellar addition to O’Reilly’s essential interface books. Every mobile designer will want to have this thorough book on their shelf for reference." — Dan Saffer
Buy it from Amazon:
Buy it direct from O'Reilly:
Read in other languages
Designing Mobile Interfaces has been translated into Russian, Chinese, Korean, and Italian. Other languages and editions
Read it Online
Or, you can just read the whole book right here on this wiki. Pretty much every bit of content from the book is posted online.
It is also regularly updated, especially the reference sections, so even if you buy the book check back for updates, and contact us with errors, suggestions or to get access to the wiki to add updates yourself.
Preface
Designing Smartphone Interfaces
I had planned on updating the patterns to create an eventual second edition, and I certainly have added plenty of notes and so on, but now think I may propose a fairly different type of follow-on book. This is where I am working on it.
The Patterns
Think we need to add a pattern? You might have just missed it, or the world might have changed. Create an account and add it directly to this wiki, or if more lazy just contact us and we'll look into it. Really!
I - Page -
Chapter 2 Display of Information: Vertical List, Infinite List, Thumbnail List, Fisheye List, Carousel, Grid, Film Strip, Slideshow, Infinite Area, Select List
Chapter 3 Control and Confirmation: Confirmation, Sign On, Exit Guard, Cancel Protection, Timeout
Chapter 4 Revealing More Information: Windowshade, Pop-Up, Hierarchical List, Returned Results
Chapter 5 Lateral Access: Tabs, Peel Away, Simulated 3D Effects, Pagination, Location Within
Chapter 6 Drilldown: Link, Button, Indicator, Icon, Stack of Items, Annotation
Chapter 7 Labels and Indicators: Ordered Data, Tooltip, Avatar, Wait Indicator, Reload, Synch, Stop
Chapter 8 Information Controls: Zoom & Scale, Location Jump, Search Within, Sort & Filter
Chapter 9 Text and Character Input: Keyboards & Keypads, Pen Input, Mode Switches, Input Method Indicator, Autocomplete & Prediction
Chapter 10 General Interactive Controls: Directional Entry, Press-and-hold, Focus & Cursors, Other Hardware Keys, Accesskeys, Dialer, On-screen Gestures, Kinesthetic Gestures, Remote Gestures
Chapter 11 Input and Selection: Input Areas, Form Selections, Mechanical Style Controls, Clear Entry
Chapter 12 Audio and Vibration: Tones, Voice Input, Voice Readback, Voice Notifications, Haptic Output
Chapter 13 Screens, Lights, and Sensors: LED, Display Brightness Controls, Orientation, Location
V - Stuff We Didn't Put 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.
Appendices & General Information
To keep the patterns focused on design and implementation, I have pulled all kinds of supporting information out of them. However, a lot of it is still very interesting. And there's no good way for a designer or developer to get a summary of this sort of information.
So, I've included it here as an Appendix, ordered so you can just pretty much read it from one end to the other.
Visit any time to get the latest updates, or just to avoid typing in long links from a piece of paper. And please come add your own information, or update old or changed links.
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.
Introduction to NFC - Placeholder, mostly, now that this is coming online for real.
Introduction to Bluetooth - Also placeholder, with just some links of interest for now.
Drawing Tools & Templates - Graphic design tools, UI guidelines, tips for various tools.
Emulators - Emulators, prototyping tools, design aids, etc.
Device Detection - The step past responsive you need to do for mobile. By guest expert Luca Passani.
Leverage Existing Device Capabilities - URI schemes and inter-application linking.
Raster Design Tips - 72 dpi is (probably) wrong.
Optimize Mobile Performance - Just notes and links now
Documentation Templates - Designing documents can be as important to successful implementation as the actual design.
Design for Accessibility - Short, focused on apps, but I think an okay intro for now.
Color Deficit Design Tools - And other tools to help understand colorblindness and related conditions.
Other Mobile Pattern Libraries - Not that I agree with most of these, but for completeness.
Introduction to Mobile Typography - Overview of basic type terms and some things to watch out for in small screens.
Greeking - If you need to represent placeholder text, or graphics, read this.
Type for Mobile Devices - A list of the typefaces used on various mobile platforms.
Human Factors & Physiology - Sensation, Visual Perception, and Information Processing
Not Desktop, But Not Quite Mobile
Though the patterns are supposed to be general enough to apply to kiosks, telematics, 10-foot Ui, etc. experts in those fields insist they just aren't. I have given in and in the interest of increasing knowledge, am going to start linking to the good stuff in related domains.
Kiosks even if they are made by strapping an iPad to the wall, have different context, and different environmentally-derived interactions. Design them differently.
Designing Software for Kiosks by Studio IQ. Good tips. Keep bugging them, and maybe we'll get a full repository of info out of them.
Designing Intuitive Point-of-Interest and Point-of-Sale Touch Interfaces
10-foot-UI is any interactive experience viewed from a distance. The usual assumption is a TV in a living room. Smart TVs have brought this out of the game console, and made it more mainstream. Your website is getting viewed at 10 foot range, in group settings.
Global Experience Language - TV by the BBC - Style guides and many guidelines and principles for TV graphics and interactive TV.
TV Screen Sizes by popularity of Web viewing, September 2013
Telematics
Dark Screens in Cars a discussion that took off with many good links.
Car UX is just a bunch of photos of car control panels. So, continuing the bad tradition of confusing UI with UX.
Games No matter what they are on, game design is a bit different. Different enough I did not cover it in anything else in this book. Game design resources (TBD) should be referenced generally.
That Game's UX terrific blog on gaming, with all sorts of great UX principles applied or reviewed.
Designing Better Controls for the Touchscreen Experience from Gamasutra.
Augmented Reality - Not really a platform like the others, I have seen enough good stuff that is really pushing the bounds of what we think of as interaction and interface that I think AR also needs a separate and robust set of standards. Now.
Augmented Reality Standards and Examples that I have gathered
References
Other Stuff from the Book
Index - This has not been imported as it's the book's index. It's keyed to page numbers, so doesn't work here. Consider it a value-add if you pay for the for the eBook or printed editions.
Speaking Engagments, Presentations, Webcasts...
Eric works in Sydney, Australia. Steven lives in the Kansas City, Missouri (US) area.
We're pretty busy with day jobs, freelance jobs and so on. But if we're scheduled to go somewhere and talk about anything remotely related to mobile (and it's an open meeting you can come to) we'll post it here.
Mentions, Reviews & Other Writing
We (and especially Steven) write a lot still. Here we've gathered a list of articles of note, articles in which we're mentioned or interviewed, and reviews or other important mentions of this book.