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

Differences between revisions 235 and 611 (spanning 376 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 235 as of 2011-05-05 01:22:32 → 
  Size: 10385
  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:
-{{{#!wiki yellow/solid
It's a wiki, but also a book. We need to keep things in synch. Please see the help tab for formatting information, be respectful of content on the site, and add a note box like this if you make a serious change or want to raise a serious objection.
+[[Designing Mobile Interfaces|{{attachment:book.png|Designing Mobile Interfaces, by Steven Hoober & Eric Berkman.|align="left"}}]]~+[[Designing Mobile Interfaces|Patterns book]]+~
-Line 4:
+Line 3:
-Contact @shoobe01 or @ericberkman if you don't see us responding to your change fast enough. 
}}}
+Buy the O'Reilly book Designing Mobile Interfaces, or read it all right here for free.
-Line 7:
+Line 5:
-{{attachment:Book-Cover.png|A black and white (the real one will be color) mockup of the cover of our forthcoming O'Reilly book, with all this content.|align="right"}}
+<<BR>>
-Line 9:
+Line 7:
-== Introduction ==
Design seems like something that should be ridiculously easy. And for some things, it can be. When you organize your workspace -- move the desks around, get a different keyboard -- you are designing that experience for yourself. And generally you can do a pretty good job.
+[[http://4ourth.com/Touch|{{attachment:touch.png|The only touchscreen guidelines you need.|align="left"}}]]~+[[http://4ourth.com/Touch|Touch guidelines]]+~
-Line 12:
+Line 9:
-Now that your office is arranged the way you want it, you get down to developing a mobile application. Design there must be just as easy. You arrange the data, and the structure of the site, in a way that makes sense to you. You make a presentation layer that reflects that perfectly sensible data arrangement. And when you launch it, everyone complains. Why can't they see the brilliance of your ideas?
+Articles, slides and videos on the definitive, up-to-date, reseach-based guidelines on designing for fingers, touch and people.
-Line 14:
+Line 11:
-Because they are your ideas alone. And a key to design is that it is a selfless practice. You cannot think of how design will work for you, or even your friends, but for your users, and probably all your users. The language can rapidly sound like a revolutionary; you have to consider your users as a collective.
+<<BR>>
<<BR>>
-Line 16:
+Line 14:
- * [[Who would read this book?]]
 * [[What Do You Mean by "Mobile"?]]
 * [[What is a Pattern?]]
 * [[Where Did These Come From?]] &radic;
 * [[Common Practice vs. Best Practice]] &radic;
 * [[Disagree? Change it.]]
 * [[Reading the Patterns]] &radic;
 * [[Definitions & Styles of the Patterns]]
 * [[Componentized Design]]
 * [[Principles of Mobile Design]]
 * [[Acknowledgements]]
+[[http://4ourth.com/TouchTemplate|{{attachment:touchtemplate.png|Buy a 4ourth Mobile Touch Template.|align="left"}}]]~+[[http://4ourth.com/TouchTemplate|Touch Template]]+-
-Line 28:
+Line 16:
------
== The Patterns ==
+A cheap, simple, plastic guide to help you keep the touch guidelines in mind during design and test.
-Line 31:
+Line 18:
-=== I - Page ===

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

==== 2 - Wrapper ====

Introduction to the [[Wrapper]] 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;
+<<BR>>
-Line 78:
+Line 21:
-==== 5 - Revealing More Information ====
Introduction to the [[Revealing More Information]] chapter. &radic;
 * [[Windowshade]] &radic;
 * [[Pop-Up]] &radic;
 * [[Hierarchical List]] &radic;
 * [[Returned Results]] &radic;
+ * [[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 85:
+Line 23:
-Summary to the Component Section [[Component Wrapup]] &radic;
+ * [[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 87:
+Line 26:
------
=== III - Widget ===
Introduction to the [[Widget]] section. &radic;
+ * [[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 91:
+Line 29:
-==== 6 - Lateral Access ====
Introduction to the [[Lateral Access]] chapter. &radic;
 * [[Tabs]] &radic;
 * [[Peel Away]] &radic;
 * [[Simulated 3D Effects]] &radic;
 * [[Pagination]] &radic;
 * [[Location Within]] &radic;
+[[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 99:
+Line 31:
-==== 7 - Drilldown ====
Introduction to the [[Drilldown]] chapter. &radic;
 * [[Link]] &radic;
 * [[Button]] &radic;
 * [[Indicator]] &radic;
 * [[Icon]] &radic;
 * [[Stack of Items]] &radic;
 * [[Annotation]] &radic;
+[[http://medium.com/@shoobe01|A few Medium articles]] | [[http://shoobe01.blogspot.com/|An old Blog]]
-Line 108:
+Line 33:
-==== 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;
-----



=== IV - Input & Output ===
Introduction to the [[Input & Output]] section.


==== 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.
 * [[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]]


==== 12 - Input & Selection ====
Introduction to the [[Input & Selection]] section. &radic;
 * [[Input Areas]] &radic;
 * [[Form Selections]] &radic;
 * [[Spinners & Tapes]] &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.
 * [[LED]] &radic;
 * [[Display Brightness Controls]] &radic;
 * [[Orientation]] &radic;
 * [[Location]] &radic;

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.
-Line 197:
+Line 37:
-== Design Tools ==
Things other than the patterns themselves you can use to help design. Templates (including those used to draw the diagrams here), stencils, simulators, emulators, etc.
 * [[Script Events]] - How different mobile browsers handle, or don't handle, DOM events for Javascript/ECMAscript
 * [[Emulators]] - Emulators, prototyping tools, design aids, etc.
 * [[Color Deficit Design Tools]] - And other tools to help understand colorblindness and related conditions.
 * [[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 Location Technologies]] - Location is not just GPS. If you think it is, and are designing applications and services that use it, read this.
 * [[http://www.smashingmagazine.com/2009/10/12/setting-up-photoshop-for-web-app-and-iphone-development/|Set up Photoshop and Illustrator color controls]] - Okay, not really mobile, but a constant source of frustration. Valid for anyone who works in interactive pretty much all the time.
+== 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 210:
+Line 44:
-== References ==
 * [[List of References]]
+<<RecentChanges>>

-----
<<TableOfContents>>

-----
Orphaned Pages:
<<OrphanedPages>>

-----
Abandoned Pages: 
<<AbandonedPages>>