|
Size: 11185
Comment:
|
Size: 10317
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 20: | Line 20: |
| <<BR>> | |
| Line 38: | Line 39: |
| Introduction to the [[Page]] section. √ | Introduction to the [[Page]] section. |
| Line 42: | Line 43: |
| Introduction to the [[Composition]] chapter. √ * [[Scroll]] √ * [[Annunciator Row]] √ * [[Notifications]] √ * [[Titles]] √ * [[Revealable Menu]] √ * [[Fixed Menu]] √ * [[Home & Idle Screens]] √ * [[Lock Screen]] √ * [[Interstitial Screen]] √ * [[Advertising]] √ |
Introduction to the [[Composition]] chapter. * [[Scroll]] * [[Annunciator Row]] * [[Notifications]] * [[Titles]] * [[Revealable Menu]] * [[Fixed Menu]] * [[Home & Idle Screens]] * [[Lock Screen]] * [[Interstitial Screen]] * [[Advertising]] |
| Line 59: | Line 60: |
| Introduction to the [[Components]] section. √ | Introduction to the [[Components]] section. |
| Line 62: | Line 63: |
| Introduction to the [[Display of Information]] chapter. √ * [[Vertical List]] √ * [[Infinite List]] √ * [[Thumbnail List]] √ * [[Fisheye List]] √ * [[Carousel]] √ * [[Grid]] √ * [[Film Strip]] √ * [[Slideshow]] √ * [[Infinite Area]] √ * [[Select List]] √ ==== 3 - Control & Confirmation ==== Introduction to the [[Control & Confirmation]] chapter. √ * [[Confirmation]] √ * [[Sign On]] √ * [[Exit Guard]] √ * [[Cancel Protection]] √ * [[Timeout]] √ |
Introduction to the [[Display of Information]] chapter. * [[Vertical List]] * [[Infinite List]] * [[Thumbnail List]] * [[Fisheye List]] * [[Carousel]] * [[Grid]] * [[Film Strip]] * [[Slideshow]] * [[Infinite Area]] * [[Select List]] ==== 3 - Control and Confirmation ==== Introduction to the [[Control and Confirmation]] chapter. * [[Confirmation]] * [[Sign On]] * [[Exit Guard]] * [[Cancel Protection]] * [[Timeout]] |
| Line 84: | Line 85: |
| Introduction to the [[Revealing More Information]] chapter. √ * [[Windowshade]] √ * [[Pop-Up]] √ * [[Hierarchical List]] √ * [[Returned Results]] √ Summary to the Component Section [[Component Wrapup]] √ |
Introduction to the [[Revealing More Information]] chapter. * [[Windowshade]] * [[Pop-Up]] * [[Hierarchical List]] * [[Returned Results]] Summary to the Component Section [[Component Wrapup]] |
| Line 94: | Line 95: |
| Introduction to the [[Widget]] section. √ | Introduction to the [[Widget]] section. |
| Line 97: | Line 98: |
| Introduction to the [[Lateral Access]] chapter. √ * [[Tabs]] √ * [[Peel Away]] √ * [[Simulated 3D Effects]] √ * [[Pagination]] √ * [[Location Within]] √ |
Introduction to the [[Lateral Access]] chapter. * [[Tabs]] * [[Peel Away]] * [[Simulated 3D Effects]] * [[Pagination]] * [[Location Within]] |
| Line 105: | Line 106: |
| Introduction to the [[Drilldown]] chapter. √ * [[Link]] √ * [[Button]] √ * [[Indicator]] √ * [[Icon]] √ * [[Stack of Items]] √ * [[Annotation]] √ |
Introduction to the [[Drilldown]] chapter. * [[Link]] * [[Button]] * [[Indicator]] * [[Icon]] * [[Stack of Items]] * [[Annotation]] |
| Line 114: | Line 115: |
| Introduction to the [[Labels & Indicators]] chapter. √ * [[Ordered Data]] √ * [[Tooltip]] √ * [[Avatar]] √ * [[Wait Indicator]] √ * [[Reload, Synch, Stop]] √ |
Introduction to the [[Labels & Indicators]] chapter. * [[Ordered Data]] * [[Tooltip]] * [[Avatar]] * [[Wait Indicator]] * [[Reload, Synch, Stop]] |
| Line 122: | Line 123: |
| Introduction to the [[Information Controls]] section. √ * [[Zoom & Scale]] √ * [[Location Jump]] √ * [[Search Within]] √ * [[Sort & Filter]] √ Summary to the Widget Section [[Widget Wrapup]] √ |
Introduction to the [[Information Controls]] section. * [[Zoom & Scale]] * [[Location Jump]] * [[Search Within]] * [[Sort & Filter]] Summary to the Widget Section [[Widget Wrapup]] |
| Line 134: | Line 135: |
| Introduction to the [[Input & Output]] section. √ | Introduction to the [[Input & Output]] section. |
| Line 139: | Line 140: |
| Introduction to the [[Text & Character Input]] section. √ * [[Keyboards & Keypads]] √ * [[Pen Input]] √ * [[Mode Switches]] √ * [[Input Method Indicator]] √ * [[Autocomplete & Prediction]] √ |
Introduction to the [[Text & Character Input]] section. * [[Keyboards & Keypads]] * [[Pen Input]] * [[Mode Switches]] * [[Input Method Indicator]] * [[Autocomplete & Prediction]] |
| Line 148: | Line 149: |
| 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]] √ |
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]] |
| Line 161: | Line 162: |
| Introduction to the [[Input & Selection]] section. √ * [[Input Areas]] √ * [[Form Selections]] √ * [[Mechanical Style Controls]] √ * [[Clear Entry]] √ |
Introduction to the [[Input & Selection]] section. * [[Input Areas]] * [[Form Selections]] * [[Mechanical Style Controls]] * [[Clear Entry]] |
| Line 169: | Line 170: |
| Introduction to the [[Audio & Vibration]] section. √ * [[Tones]] √ * [[Voice Input]] √ * [[Voice Readback]] √ * [[Voice Notifications]] √ * [[Haptic Output]] √ |
Introduction to the [[Audio & Vibration]] section. * [[Tones]] * [[Voice Input]] * [[Voice Readback]] * [[Voice Notifications]] * [[Haptic Output]] |
| Line 178: | Line 179: |
| Introduction to the [[Screens, Lights & Sensors]] section. √ * [[LED]] √ * [[Display Brightness Controls]] √ * [[Orientation]] √ * [[Location]] √ Summary to the Input & Output Section [[Input & Output Wrapup]] √ |
Introduction to the [[Screens, Lights & Sensors]] section. * [[LED]] * [[Display Brightness Controls]] * [[Orientation]] * [[Location]] Summary to the Input & Output Section [[Input & Output Wrapup]] |
| Line 205: | Line 206: |
| * [[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. √ * [[Emulators]] - Emulators, prototyping tools, design aids, etc. √ |
* [[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. * [[Emulators]] - Emulators, prototyping tools, design aids, etc. |
| Line 211: | Line 212: |
| * [[Color Deficit Design Tools]] - And other tools to help understand colorblindness and related conditions. √ | * [[Color Deficit Design Tools]] - And other tools to help understand colorblindness and related conditions. |
| Line 213: | Line 214: |
| * [[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]] √ * [[Readability and Legibility Guidelines]] √ * [[Typefaces for Screen Display]] √ * [[Greeking]] - If you need to represent placeholder text, or graphics, read this. √ * [[Human Factors & Physiology]] - Sensation, Visual Perception, and Information Processing √ * [[Hearing & Limits]] √ * [[Brightness, Luminance, and Contrast]] √ * [[General Touch Interaction Guidelines]] √ |
* [[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]] * [[Readability and Legibility Guidelines]] * [[Typefaces for Screen Display]] * [[Greeking]] - If you need to represent placeholder text, or graphics, read this. * [[Human Factors & Physiology]] - Sensation, Visual Perception, and Information Processing * [[Hearing & Limits]] * [[Brightness, Luminance, and Contrast]] * [[General Touch Interaction Guidelines]] |
Designing Mobile Interfaces: Patterns for Interaction Design is a comprehensive reference for mobile design patterns. Whether designing for smartphones, featurephones or other related devices, common principles are discussed and codified as 76 universal interaction and interface patterns.
Aside from suggestions, each pattern lists pitfalls and implementations to avoid. Every pattern is grouped with similar or optional patterns, and explained with the underlying psychology and physiology. Along with appendices detailing mobile technologies, type and design principles and human factors, you will 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:
Or, you can just read it right here on this wiki. Pretty much every bit of content from the book is posted online, right here.
We also update it occasionally, 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
The Patterns
I - Page
Introduction to the Page section.
1 - Composition
Introduction to the Composition chapter.
Summary to the Page section Page-Wrapup.√
II - Components
Introduction to the Components section.
2 - Display of Information
Introduction to the Display of Information chapter.
3 - Control and Confirmation
Introduction to the Control and Confirmation chapter.
4 - Revealing More Information
Introduction to the Revealing More Information chapter.
Summary to the Component Section Component Wrapup
III - Widget
Introduction to the Widget section.
5 - Lateral Access
Introduction to the Lateral Access chapter.
6 - Drilldown
Introduction to the Drilldown chapter.
7 - Labels & Indicators
Introduction to the Labels & Indicators chapter.
8 - Information Controls
Introduction to the Information Controls section.
Summary to the Widget Section Widget Wrapup
IV - Input & Output
Introduction to the Input & Output section.
9 - Text & Character Input
Introduction to the Text & Character Input section.
10 - General Interactive Controls
Introduction to the General Interactive Controls section.
11 - Input & Selection
Introduction to the Input & Selection section.
12 - Audio & Vibration
Introduction to the Audio & Vibration section.
13 - Screens, Lights & Sensors
Introduction to the Screens, Lights & Sensors section.
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.
Appendices
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.
You'll find that a few of the Appendices are actually just lists of resources. And in this day and age, resources are links to websites. Which, of course, will go out of date soon. Luckily, we keep this up to date on the 4ourth Mobile Design Wiki.
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.
Drawing Tools & Templates - Graphic design tools, UI guidelines, tips for various tools.
Emulators - Emulators, prototyping tools, design aids, etc.
Device Detection - Nothing here yet. Just a note that maybe I should gather all these up in one place.
Documentation Templates - Designing documents can be as important to successful implementation as the actual design.
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.
Human Factors & Physiology - Sensation, Visual Perception, and Information Processing
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 for the eBook or printed editions.
Events & Locations
Eric works in Sydney, Australia. Steven lives in the Kansas City, Missouri (US) area.
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 (and it's an open meeting you can come to) we'll post it here:
Kansas City UX Show & Tell 22 July 2011
Float Mobile Learning Symposium 10 June 2011, Bradley University, Peoria, Illinois
Applying Patterns to Mobile Design, an O'Reilly Webcast (first of a series) 8 November 2011. Watch the recording.
MoDevEast 1 December 2011, Gannett Conference Center, Mclean, Virginia