Diff for "Index" - 4ourth Mobile Design Pattern Library

Differences between revisions 381 and 611 (spanning 230 versions)

Buy the O'Reilly book Designing Mobile Interfaces, or read it all right here for free.

Articles, slides and videos on the definitive, up-to-date, reseach-based guidelines on designing for fingers, touch and people.

Touch Template+-

A cheap, simple, plastic guide to help you keep the touch guidelines in mind during design and test.

Touch Overlays: Free stencils for use in your favorite wireframe or mockup tool, as long as it's INDD, AI, PSD, Graffle, VSD, or PPT.
Contact: With any comments, questions, corrections or to hire us for consulting or speaking.
Other devices: The patterns in Designing Mobile Interfaces are really best applied to small, portable devices. Here's some info and leads on other devices you may need to work on.
Writing: A list of all the articles I have written, as well as other books and research reports I have contributed to.
Speaking: Ask me to speak at your event, or see slides and videos of my previous talks.

A few Medium articles | An old Blog

Fingers, Touch & People

If there's anything I'm the expert on now, it's how people hold and touch their mobile phones and tablets. I'm trending towards fully writing a smallish book on it. I am working on it over hereabouts, but since it'll be a mess for a long while, just check out the Touch overview page for the most current complete articles, presentations, videos, guidelines and references.

2021-06-09
	Greeking	03:39	shoobe01
2021-02-16
	Raster Design Tips	14:59	shoobe01
2020-02-03
	Mentions, Reviews & Other Writing	17:34	shoobe01 [1-6]
2019-12-04
	Index	17:45	shoobe01 [1-5]
2019-11-05
	Not Desktop, But Not Quite Mobile	23:24	shoobe01
2019-08-08
	Speaking	14:21	shoobe01
2019-06-26
	Color Deficit Design Tools	19:52	shoobe01

Contents

Fingers, Touch & People

Orphaned Pages:

Abandoned Pages:

2010-10-14
	Definitions	18:23	shoobe01
2010-10-20
	Stupid INDD Tricks	15:29	shoobe01
2010-10-25
	HelpContents	02:51	shoobe01
2010-11-04
	Stupid AI Tricks	01:55	shoobe01
2010-11-17
	Page Title	21:00	shoobe01
2010-12-09
	Sharing between versions of In Design	01:44	shoobe01
2011-03-30
	Attach & Reference	04:08	shoobe01
	Screen Stuff	04:09	shoobe01

-  ⇤ ← Revision 381 as of 2011-08-26 20:39:50 → 
  Size: 11914
  Editor: shoobe01
  Comment:
+   ← Revision 611 as of 2019-12-04 17:45:44 → ⇥
  Size: 2930
  Editor: shoobe01
  Comment:
-Deletions are marked like this.
+Additions are marked like this.
 Line 1:
-{{attachment:Book-Cover.png|An almost complete (missing the tagline) comp 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|{{attachment:book.png|Designing Mobile Interfaces, by Steven Hoober & Eric Berkman.|align="left"}}]]~+[[Designing Mobile Interfaces|Patterns book]]+~
 Line 3:
-== 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.
+Buy the O'Reilly book Designing Mobile Interfaces, or read it all right here for free.
-Line 6:
+Line 5:
-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.
+<<BR>>
-Line 8:
+Line 7:
-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.
+[[http://4ourth.com/Touch|{{attachment:touch.png|The only touchscreen guidelines you need.|align="left"}}]]~+[[http://4ourth.com/Touch|Touch guidelines]]+~
-Line 10:
+Line 9:
-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.
+Articles, slides and videos on the definitive, up-to-date, reseach-based guidelines on designing for fingers, touch and people.
-Line 12:
+Line 11:
-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.
+<<BR>>
<<BR>>
 Line 14:
-Serious mobile design now, and especially in the future, will require building for every user, and providing some solution on every platform.
+[[http://4ourth.com/TouchTemplate|{{attachment:touchtemplate.png|Buy a 4ourth Mobile Touch Template.|align="left"}}]]~+[[http://4ourth.com/TouchTemplate|Touch Template]]+-

A cheap, simple, plastic guide to help you keep the touch guidelines in mind during design and test. 

<<BR>>
-Line 17:
+Line 21:
-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.
+ * [[http://4ourth.com/TouchOverlay/|Touch Overlays]]: Free stencils for use in your favorite wireframe or mockup tool, as long as it's INDD, AI, PSD, Graffle, VSD, or PPT.
-Line 19:
+Line 23:
-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.
+ * [[http://shoobe01.wufoo.com/forms/contact-4ourth-mobile/|Contact]]: With any comments, questions, corrections or to hire us for consulting or speaking. 
 * [[Not Desktop, But Not Quite Mobile|Other devices]]: The patterns in Designing Mobile Interfaces are really best applied to small, portable devices. Here's some info and leads on other devices you may need to work on.
-Line 21:
+Line 26:
-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.
+ * [[Mentions, Reviews & Other Writing|Writing]]: A list of all the articles I have written, as well as other books and research reports I have contributed to. 
 * [[Speaking]]: Ask me to speak at your event, or see slides and videos of my previous talks.
-Line 23:
+Line 29:
- * [[Who would read this book?]] &radic;
 * [[Why should you trust what it says?]]
 * [[What Do You Mean by "Mobile"?]] &radic;
 * [[What is a Pattern?]] &radic;
 * [[Where Did These Come From?]] &radic;
 * [[Common Practice vs. Best Practice]] &radic;
 * [[Reading the Patterns]] &radic;
 * [[Successfully Designing With Patterns & Heuristics]] &radic;
 * [[Principles of Mobile Design]] &radic;
 * [[Acknowledgements]]
+[[http://www.slideshare.net/shoobe01|Slideshare]] | [[https://www.youtube.com/user/shoobe01|YouTube]] | [[https://www.flickr.com/search/?w=10316450@N03&q=designing%20mobile%20interfaces|Flickr]] | [[https://www.linkedin.com/in/shoobe01|LinkedIn]] | [[https://www.flickr.com/search/?w=10316450@N03&q=designing%20mobile%20interfaces|Google+]] | [[https://twitter.com/shoobe01/|Twitter]] | [[https://www.facebook.com/shoobe01|Facebook]] | [[https://www.behance.net/shoobe01|Behance]]
-Line 34:
+Line 31:
+[[http://medium.com/@shoobe01|A few Medium articles]] | [[http://shoobe01.blogspot.com/|An old Blog]]
-Line 35:
+Line 33:
-{{{#!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.
}}}
-Line 52:
+Line 37:
-== The Patterns ==
-Line 54:
+Line 38:
-=== I - Page ===

Introduction to the [[Page]] section. &radic;

==== 2 - Composition ====

Introduction to the [[Composition]] chapter. &radic;

 * [[Scroll]] &radic;
 * [[Annunciator Row]] &radic;
 * [[Notifications]] &radic;
 * [[Titles]] &radic;
 * [[Revealable Menu]] &radic;
 * [[Fixed Menu]] &radic;
 * [[Home & Idle Screens]] &radic;
 * [[Lock Screen]] &radic;
 * [[Interstitial Screen]] &radic;
 * [[Advertising]] &radic;

Summary to the Page section [[Page-Wrapup]].&radic;

-----
=== II - Components ===
Introduction to the [[Components]] section. &radic;

==== 3 - Display of Information ====
Introduction to the [[Display of Information]] chapter. &radic;
 * [[Vertical List]] &radic;
 * [[Infinite List]] &radic;
 * [[Thumbnail List]] &radic;
 * [[Fisheye List]] &radic;
 * [[Carousel]] &radic;
 * [[Grid]] &radic;
 * [[Film Strip]] &radic;
 * [[Slideshow]] &radic;
 * [[Infinite Area]] &radic;
 * [[Select List]] &radic;

==== 4 - Control & Confirmation ====
Introduction to the [[Control & Confirmation]] chapter. &radic;
 * [[Confirmation]] &radic;
 * [[Sign On]] &radic;
 * [[Exit Guard]] &radic;
 * [[Cancel Protection]] &radic;
 * [[Timeout]] &radic;


==== 5 - Revealing More Information ====
Introduction to the [[Revealing More Information]] chapter. &radic;
 * [[Windowshade]] &radic;
 * [[Pop-Up]] &radic;
 * [[Hierarchical List]] &radic;
 * [[Returned Results]] &radic;

Summary to the Component Section [[Component Wrapup]] &radic;

-----
=== III - Widget ===
Introduction to the [[Widget]] section. &radic;

==== 6 - Lateral Access ====
Introduction to the [[Lateral Access]] chapter. &radic;
 * [[Tabs]] &radic;
 * [[Peel Away]] &radic;
 * [[Simulated 3D Effects]] &radic;
 * [[Pagination]] &radic;
 * [[Location Within]] &radic;

==== 7 - Drilldown ====
Introduction to the [[Drilldown]] chapter. &radic;
 * [[Link]] &radic;
 * [[Button]] &radic;
 * [[Indicator]] &radic;
 * [[Icon]] &radic;
 * [[Stack of Items]] &radic;
 * [[Annotation]] &radic;

==== 8 - Labels & Indicators ====
Introduction to the [[Labels & Indicators]] chapter. &radic;
 * [[Ordered Data]] &radic;
 * [[Tooltip]] &radic;
 * [[Avatar]] &radic;
 * [[Wait Indicator]] &radic;
 * [[Reload, Synch, Stop]] &radic;

==== 9 - Information Controls ====
Introduction to the [[Information Controls]] section. &radic;
 * [[Zoom & Scale]] &radic;
 * [[Location Jump]] &radic;
 * [[Search Within]] &radic;
 * [[Sort & Filter]] &radic;

Summary to the Widget Section [[Widget Wrapup]] &radic;
-----
+== Fingers, Touch & People ==
If there's anything I'm the expert on now, it's how people hold and touch their mobile phones and tablets. I'm trending towards fully writing a smallish book on it. I am working on it  [[Fingers, Touch & People|over hereabouts]], but since it'll be a mess for a long while,  just check out the [[http://www.4ourth.com/Touch|Touch]] overview page for the most current complete articles, presentations, videos, guidelines and references.
-Line 151:
+Line 43:
-=== IV - Input & Output ===
Introduction to the [[Input & Output]] section. &radic;



==== 10 - Text & Character Input ====
Introduction to the [[Text & Character Input]] section. &radic;
 * [[Keyboards & Keypads]] &radic;
 * [[Pen Input]] &radic;
 * [[Mode Switches]] &radic;
 * [[Input Method Indicator]] &radic;
 * [[Autocomplete & Prediction]] &radic;


==== 11 - General Interactive Controls ====
Introduction to the [[General Interactive Controls]] section. &radic;
 * [[Directional Entry]] &radic;
 * [[Press-and-hold]] &radic;
 * [[Focus & Cursors]] &radic;
 * [[Other Hardware Keys]] &radic;
 * [[Accesskeys]] &radic;
 * [[Dialer]] &radic;
 * [[On-screen Gestures]] &radic;
 * [[Kinesthetic Gestures]] &radic;
 * [[Remote Gestures]] &radic;


==== 12 - Input & Selection ====
Introduction to the [[Input & Selection]] section. &radic;
 * [[Input Areas]] &radic;
 * [[Form Selections]] &radic;
 * [[Mechanical Style Controls]] &radic;
 * [[Clear Entry]] &radic;


==== 13 - Audio & Vibration ====
Introduction to the [[Audio & Vibration]] section. &radic;
 * [[Tones]] &radic;
 * [[Voice Input]] &radic;
 * [[Voice Readback]] &radic;
 * [[Voice Notifications]] &radic;
 * [[Haptic Output]] &radic;


==== 14 - Screens, Lights & Sensors ====
Introduction to the [[Screens, Lights & Sensors]] section. &radic;
 * [[LED]] &radic;
 * [[Display Brightness Controls]] &radic;
 * [[Orientation]] &radic;
 * [[Location]] &radic;

Summary to the Input & Output Section [[Input & Output Wrapup]] &radic;
-Line 204:
+Line 44:
-=== 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.
 * [[Additional Topics]]
+<<RecentChanges>>
-Line 212:
+Line 47:
-== Design Tools, Further Information, or Maybe Just an Appendix ==
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.

    http://4ourth.com/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. &radic;
  * [[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. &radic;
 * [[Drawing Tools & Templates]] - Graphic design tools, UI guidelines, tips for various tools. &radic;
  * [[Emulators]] - Emulators, prototyping tools, design aids, etc. &radic;
  * [[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. &radic;
 * [[Introduction to Mobile Typography]] - Overview of basic type terms and some things to watch out for in small screens. &radic;
  * [[Italics and Obliques For Digital Display]] &radic;
  * [[Readability and Legibility Guidelines]] &radic;
  * [[Typefaces for Screen Display]] &radic;
  * [[Greeking]] - If you need to represent placeholder text, or graphics, read this. &radic; 
 * [[Human Factors & Physiology]] - Sensation, Visual Perception, and Information Processing &radic;
  * [[Hearing & Limits]] &radic;
  * [[Brightness, Luminance, and Contrast]] &radic;
  * [[General Touch Interaction Guidelines]] &radic;
  * [[Fitts' Law]]

A huge amount of our reference is actually looking at devices, and that includes GPS, TV, and whatever else we could find. For the book, we took around 1,300 screenshots (or, for older or weirder devices, photos). They are all in this group on Flickr here: http://www.flickr.com/photos/shoobe01/sets/72157627094523863/with/5972038915/
+<<TableOfContents>>
-Line 244:
+Line 50:
-== 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
+Orphaned Pages:
<<OrphanedPages>>
-Line 253:
+Line 54:
-== References ==
 * [[List of References]]
+Abandoned Pages: 
<<AbandonedPages>>