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

Differences between revisions 37 and 611 (spanning 574 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 37 as of 2010-10-15 00:06:03 → 
  Size: 11942
  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:pattern-wiki.png}}
+[[Designing Mobile Interfaces|{{attachment:book.png|Designing Mobile Interfaces, by Steven Hoober & Eric Berkman.|align="left"}}]]~+[[Designing Mobile Interfaces|Patterns book]]+~
 Line 3:
-== Introduction ==
 * [[What is a Pattern?]]
 * [[What Do You Mean by "Mobile"?]]
 * [[Where Did These Come From?]]
 * [[Common Practice vs. Best Practice]]
 * [[Disagree? Change it.]]
 * [[Reading the Patterns]]
 * [[Definitions & Styles of the Patterns]]
 * [[Componentized Design]]
 * [[Principles of Mobile Design]]
+Buy the O'Reilly book Designing Mobile Interfaces, or read it all right here for free.
-Line 14:
+Line 5:
------
== Patterns ==
+<<BR>>
-Line 17:
+Line 7:
-=== Components ===
Introduction to the [[Components]] section.
+[[http://4ourth.com/Touch|{{attachment:touch.png|The only touchscreen guidelines you need.|align="left"}}]]~+[[http://4ourth.com/Touch|Touch guidelines]]+~
-Line 20:
+Line 9:
-==== Display of Information ====
Introduction to [[Display of Information]]
 * [[Vertical List]]
 * [[Infinite List]]
 * [[Thumbnail List]]
 * [[Fisheye List]]
 * [[Carousel]]
 * [[Grid]]
 * [[Film Strip]]
 * [[Slideshow]]
 * [[Infinite Area]]
 * [[Select List]]
+Articles, slides and videos on the definitive, up-to-date, reseach-based guidelines on designing for fingers, touch and people.
-Line 33:
+Line 11:
-==== Control & Confirmation ====
 * Confirmation	Maybe Principles ... but the thing where you don't label buttons yes or no. Mostly modal dialogues.
 * ExitGuard
 * CancelGuard
+<<BR>>
<<BR>>
-Line 38:
+Line 14:
-==== Revealing More Information / Drilldown ====
 * Windowshade	individual and list - explicit opening. When used as a list item, doesn't make it a new list type. Just the select action is in place, vs. a new screen or a popup.
 * Pop-ups	Various sorts. Should we steal from Sprint and use their several types, or just call them all variations on a theme. OR? Is this the sort of thing that goes in pages? Behavior as a modal popup is a page behavior thing... ????
 * Heirarchical lists	Open up little arrows or +s to see the next level down. Like file system explorers...
+[[http://4ourth.com/TouchTemplate|{{attachment:touchtemplate.png|Buy a 4ourth Mobile Touch Template.|align="left"}}]]~+[[http://4ourth.com/TouchTemplate|Touch Template]]+-
-Line 43:
+Line 16:
-==== BELOW HERE UNASSIGNED ====
 * Returned results	http://patterns.design4mobile.com/index.php/Returned_Results Could be a LIST, could be just a widget at top of screen... could be something else. Like uses LIST display modes, but it's a result section. 
 * Revealable Menus	From softkeys to android to that weird thing on the Pre you pull up (or the bar on some FF mobile things) 
 * Fixed menus	Same as revealable, but Apple style of it living there all the time. 
 * Dialer	Not always done well, so lets do it well - hard and soft pause for example, and how dialer is different from entering numbers into address book. Things like keep mute/spkr buttons when num pad is visible (soft keypads only... but concept is sold. All those actions on a call are immediate. Allow access to 3-way, etc. but mute better be 1 button) - MAYBE lives in KEY section as a special type of keyboard.
+A cheap, simple, plastic guide to help you keep the touch guidelines in mind during design and test. 

<<BR>>


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

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

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

[[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]]

[[http://medium.com/@shoobe01|A few Medium articles]] | [[http://shoobe01.blogspot.com/|An old Blog]]
-Line 52:
+Line 36:
-=== Widget ===
Scrollbars, buttons, etc.- Smaller than a Component. Highly reusable items, used many times, over and over, in other places. Some similar sized items are not widgets, because they are custom implemented items.
+-----
-Line 55:
+Line 38:
-==== Lateral Access ====
 * Tabs	All these not so much sideways and "at the same level" and view switching - solutions to tabs not fitting, like USAT scrolling the tab bar. Note that tabs are terrible because text is horizontally inefficient
 * Peel away	The google maps on iPhone (I think) thing where you get to see other layers by peeling back to a layer behind
 * Flip over	Suggest device flipping also, but mostly rotating the virtual space to see the other side of an object
 * Other 3D effects	Like cube displays, etc. Find mobile equivalent of 
 * Prev/next	Not just pagination... or is it? Could be that this is where that goes...

==== Drilldown ====
 * Stack of photos	Tap to expand stack, etc. See all ways of doing it on Surface ... Many other drilldown methods'

==== BELOW HERE UNASSIGNED ====
 * Vertical Scroll	
 * Horizontal Scroll	Or sideways indicator... see Seesmic details for an interesting version of "more over here"
 * Links	Suggest underlines for web. Indicators for off-site? 
 * Buttons	size, indicator of priority. Still like BOA old ones with color/shape icons alongside. Apple arrowed button bars are good examples of this. 
 * Pointers	Including text insertion points, the mag insertion for iPhone edit? Pre "splash" thing
 * Icons	Some notes about good practice, Consistency, modifiers to icons (+ next to one means, new message, but it better be big enough to see... multiple encoding) 
 * Avatar	Image of a person, or the stand in, and how it's used various places
 * Meters and levels	Generalized version of what I think of battery meters. For all those things, signal strength, and anything else; ratings is a good one. How to show that your rating is different from baseline. Perhaps systematically similar to the charging state of the battery
 * Text entry	http://patterns.design4mobile.com/index.php/Text_Entry --- Probably several of these, so we cover all the usual form elements, and which work better and worse, and notes about pop-up selection or entry on default J2ME, S60... (and not to do it!) 
 * Reload/Refresh/Stop	As one thing, since sometimes you use a single location. Must offer refresh for more than web browser URLs, so a single idea... I think. 
 * Clear fields	Need an easy way to do this, as typical desktop methods are hard to do, BUT, abide by principles of mobile design and let it be undoable also. (suggest how, if not OS level, like press and hold clear after this returns it, or robust autocomplete saving)
 * Spinners	Or, more likely, their alternatives. The Galaxy has some nice ones. The gist is that we think that obscuring the number is dumb, and you need alternative methods (up/down arrows, direct entry... click and get numpad even if softkb only) and scrolling as machine-era interface should be left as secondary; also, if you must scroll, click detents; ALSO: here or other entry methods, pick good numbers. Scroller for minutes on a calendar should be at 15 min intervals, and direct entry required for any odd numbers. 
 * Pagination	Convention page of page, range of total, but also dot indicators of position in a list (as for multiple home pages), etc.
 * Location Within	Indicates location, without a jump to feature, or a pagination control per se. Dot indicators may be THIS instead
 * Wait indicators	http://patterns.design4mobile.com/index.php/Wait_Indicator this is terrible. See various styles in Sprint guide. Yes, overlaps widget and component. Make it work, as ONE item. Talk through it as wait indicator is the widget, suggestd /implementation/ for some states is as a modal dialogue.
 * Zoom, scale	Methods to zoom in and out, especially suggested icons, ways of indicating zoom level (national to house) and literal scale bars.
 * Location jump	Thinking of the rolodex slider motif of some address books, but ALSO the widget to type a name in an address book, and it doesn't jump but goes to the first location. See search-within for a contrasting widget
 * Search within	Simple. Search box, whether website or address book, when typed it either jumps to or filters results. NOT the same as location jump. I think. Unless we think that the jump behavior makes them overlap...  
 * Sort and Filter Controls	Some overlap with location jump and search-within... Work on this.
 * Truncation	ellipsis are three dots, or the glyph, and nothing else. Highly suggest those to make it clear (else make sure characters can be chopped at ends of viewport). Character truncation, word truncation and when to use each. Mention marquee, but an old technique so not expected, not favored now except on very small screens.
 * Lazy loading	Different from infinite area, or infinite list. More a widget thing, like if you have an infinite list, the images might lazy load to get the basic list in place. Animation, low-res, etc.
 * Type principles?	Like, pick good readable stuff, try to pick fonts where bold face is not roomier than roman. Even mention square serifs for readability. Or... too much and not really a pattern???? - GO TO END OF THAT LINK. Has simple rules you should follow! Add square serifs to it, if not mentioned.
+== 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 91:
+Line 43:
-=== Page ===
page layout and basics stuff - NOT WIDGETS THOUGH...
 * Multi-encoding? (text/icon, color/contrast) REally basic stuff like this, or should there be a "Principles" section... or should P stand for principles instead???
 * Screens?	auto brightness? 
 * Wrapper	I think the concept is valid and worth mentioning. There's a template that exists, with menu indicators, annunciator rows, titles, etc. They all have their place, and you should only eliminate them under certain conditions. Generally, I think you at least allow access to, say, the annunciator row (or equivalent) so you can always find out alerts, status, battery, signal, etc. if you need. Why be surprised when in camera mode, for example? DO think we can combine as one. Unless you think it should be multiple items.
 * Idle Screens	Basic deck, and the multiple-home-screen mentality Apple esp brought us. Side or other scrolling, pros and cons, indicators of position... 
 * Signon/Pswds	Everything I say about non-obscuring, and notes that you probably don't need it at all; devices are personal and those with secure info better lock the device -- device lock hints: make gestures clear, pattern codes, etc.
 * Notifications	Strips are becoming a best practice. But also talk about icons as widgets, etc. Non-interrupting, but visible. Refer to copia stuff a lot on this. It's pretty solid, really. 
 * Widgets	As a principle. A widget is something that changes. Show eric my Hero200 control icons. Widgets. An icon that pulls up a control panel is an icon, not a widget. Etc. 


=== Behaviors ===
interaction with no key screen component - Sound, vibration, etc. May overlap gestures but I think it meant output vs. input??? 
 * LED	Blink, colors, etc. - Again, got some of these in the blog post on battery indicators
 * Sound	Audible feedback guidelines, AND reading of on-screen stuff, or reminders, or...
 * Backlight	Timing can be odd
 * Use of technology?	Like the N8s nice sleep state clock. Something along the lines of avoiding common practice, and using best practice (OLED power per lit pixel)


=== Key ===
Keyboard, Keypad and Other input features. Gestures here or somewhere else? Sensors? 
 * Soft keyboards 	Probably. Unless it should be under Key below. Use my gripes about non-standard Galaxy Epic as a baseline.
 * Keypad layout	
 * Keyboard layout	Galaxy epic issues, for example. Use localized standards, do not make up own. FN only when needed, and backlight as well as reflective indicators... 
 * Press-and-hold	Can it be generalized? 
 * Haptic feedback?	
 * Spacing	Worth repeating basic ergonomics? Or are we getting into hardware design too much
 * Input modes	Mostly, the indicator of which mode. http://patterns.design4mobile.com/index.php/Text_Entry should come back even with full keyboards, and soft keyboards I think. Some value as indicator of what entry is ALLOWED for a field, not just what mode currently in. 
 * Autocomplete	All the bad things about predictive text input. I guess. Complex issue.
 * Accesskeys	Includes screen listing of them. Contrast with numbered lists...
+-----
<<RecentChanges>>
-Line 124:
+Line 47:
-== 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, and so on.
 * [[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.
+<<TableOfContents>>
-Line 134:
+Line 50:
-== References ==
We're in fact gathering them, and not just pulling everything out of our ass. Just a lot to format, and I'm not sure how we want to now. Working on it.
+Orphaned Pages:
<<OrphanedPages>>

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