|
Size: 14591
Comment:
|
Size: 2745
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| {{{#!html | [[Designing Mobile Interfaces|{{attachment:book.png|Designing Mobile Interfaces, by Steven Hoober & Eric Berkman.|align="top"}}]] ~+[[Designing Mobile Interfaces|Patterns book|align="left"]]+~ |
| Line 3: | Line 4: |
| <div class="saleshead"> <div class="block" id="left"> <a href="http://4ourth.com/wiki/4ourth%20Mobile%20Touch%20Template"> <div class="salesLeft"> <h3>4ourth Mobile Touch Template</h3> <p>Design for people, not pixels with this handy, wallet-sized inspection and design tool, only $10. <span>Order yours now</span></p> </div> </a> </div> <div class="block" id="right"> <a href="http://4ourth.com/wiki/Mobile%20Design%20Patterns%20Poster"> <div class="salesRight"> <h3>Mobile Interaction Design Patterns Poster</h3> <p>Every pattern from the book and this wiki, plus easy-to-follow relationships, and key information on sizes for readability and touch. <span>Order now</span></p> </div> </a> </div> <div class="salespad"> </div> </div> |
Buy the O'Reilly book Designing Mobile Interfaces, or read it all right here for free. |
| Line 24: | Line 6: |
| }}} | [[http://4ourth.com/Touch|{{attachment:touch.png|The only touchscreen guidelines you need.|align="top"}}]] ~+[[http://4ourth.com/Touch|Touch guidelines]]+~ Articles, slides and videos on the definitive, up-to-date, reseach-based guidelines on designing for fingers, touch and people. |
| Line 26: | Line 9: |
| [[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. | [[http://4ourth.com/TouchTemplate|{{attachment:touchtemplate.png|Buy a 4ourth Mobile Touch Template.|align="top"}}]] ~+[[http://4ourth.com/TouchTemplate|Touch Template]]+~ A cheap, simple, plastic guide to help you keep the touch guidelines in mind during design and test. |
| Line 28: | Line 12: |
| 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. | * [[http://4ourth.com/TouchTemplate|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 30: | Line 14: |
| ''"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 |
* [[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 33: | Line 17: |
| '''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.]] |
* [[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 37: | Line 20: |
| '''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.]] |
[[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 41: | Line 22: |
| 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. | [[http://medium.com/@shoobe01|A few Medium articles]] | [[http://shoobe01.blogspot.com/|An old Blog]] |
| Line 43: | Line 24: |
| '''Read in other languages''' * ''Designing Mobile Interfaces'' has been translated into Russian, Chinese, Korean, and Italian. [[Other languages and editions]] |
|
| Line 46: | Line 25: |
| We also update it occasionally, 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 50: | Line 29: |
== 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]] ----- == 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. ----- == The Patterns == 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! * [[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]] === 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]] ----- == 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. * [[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. * [[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. * [[Type for Mobile Devices]] - A list of the typefaces used on various mobile platforms. * [[Human Factors & Physiology]] - Sensation, Visual Perception, and Information Processing * [[Conspicuity with Color]] * [[Hearing & Limits]] * [[Brightness, Luminance, and Contrast]] * [[How Do Users Really Hold Mobile Devices]] * [[General Touch Interaction Guidelines]] * [[Fitts' Law]] {{{#!html <a name="notmobile"> </a> }}} ----- == 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]] ----- == 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. ----- == UX & Mobile Development Work == * [[Job Board]] |
== 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. |
Buy the O'Reilly book Designing Mobile Interfaces, or read it all right here for free.
Touch guidelines 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.
Slideshare | YouTube | Flickr | LinkedIn | Google+ | Twitter | Facebook | Behance
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.