|
Size: 8505
Comment:
|
← Revision 16 as of 2015-12-28 16:56:15 ⇥
Size: 8924
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 2: | Line 2: |
| [[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://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 reference for all your mobile design work. Whether you design or develop for smartphones, tablets, or other touchscreen devices, 76 universal interaction and interface patterns are grouped into four categories for easy cross-referencing. |
| Line 4: | Line 4: |
| 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. | '''Designing Mobile Interfaces''' [[Get Designing Mobile Interfaces|is available in English in print and eBook editions]], [[http://4ourth.com/wiki/Other%20languages%20and%20editions|and has been translated into multiple languages]]. It is used to teach interactive design at universities, and guided the creation of countless apps, websites and operating systems. 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. Appendices detail key background information such as type, location, and 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. |
| Line 8: | Line 10: |
<<BR>> <<BR>> |
|
| Line 20: | Line 25: |
| * [[Brainstorming, Workshopping, etc]] | * [[Brainstorming, Workshopping, etc]] NEW! |
| Line 27: | Line 32: |
| * [[I - Page]] - | * [[I - Page]] |
| Line 29: | Line 34: |
| * Chapter 1 [[Composition]]: [[Scroll]], [[Annunciator Row]], [[Notifications]], [[Titles]], [[Revealable Menu]], [[Fixed Menu]], [[Home & Idle Screens]], [[Lock Screen]], [[Interstitial Screen]], [[Advertising]], [[Back]]* | * Chapter 1 [[Composition]]: [[Wrapper]] NEW!, [[Scroll]], [[Annunciator Row]], [[Chrome]] NEW!, [[Notifications]], [[Masthead]] NEW!, [[Titles]], [[Revealable Menu]], [[Fixed Menu]], [[Chyron]] NEW!, [[Home & Idle Screens]], [[Lock Screen]], [[Interstitial Screen]], [[Advertising]], [[Back]] |
| Line 68: | Line 73: |
| * [[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]] |
* [[Introduction to NFC]] NEW! - Placeholder, mostly, now that this is coming online for real. * [[Introduction to Bluetooth]] NEW! - Also placeholder, with just some links of interest for now. * [[History of Computing]] NEW! |
| Line 73: | Line 78: |
| * [[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. |
* [[Device Detection]] NEW! - The step past responsive you need to do for mobile. By guest expert Luca Passani. * [[Leverage Existing Device Capabilities]] NEW! - URI schemes and inter-application linking. * [[Raster Design Tips]] NEW! - 72 dpi is (probably) wrong. |
| Line 78: | Line 83: |
| * [[Design for Accessibility]] - Short, focused on apps, but I think an okay intro for now. | * [[Design for Accessibility]] NEW! - Short, focused on apps, but I think an okay intro for now. |
| Line 110: | Line 115: |
| * 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. | * 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. * OR you can simply search. I'd use a [[https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=site%3A4ourth.com%20carousel|Google site search like this one]]. Just replace the "Carousel" term with yours. I mean, unless you wanted to know about carousels for some reason. |
Designing Mobile Interfaces: Patterns for Interaction Design
Designing Mobile Interfaces: Patterns for Interaction Design is the comprehensive reference for all your mobile design work. Whether you design or develop for smartphones, tablets, or other touchscreen devices, 76 universal interaction and interface patterns are grouped into four categories for easy cross-referencing.
Designing Mobile Interfaces is available in English in print and eBook editions, and has been translated into multiple languages. It is used to teach interactive design at universities, and guided the creation of countless apps, websites and operating systems.
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. Appendices detail key background information such as type, location, and 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.
"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
Preface
The Patterns
Think we need to add a pattern? You might have just missed it, or the world might have changed. Create an account and add it directly to this wiki, or if more lazy just contact us and we'll look into it. Really!
Chapter 1 Composition: Wrapper NEW!, Scroll, Annunciator Row, Chrome NEW!, Notifications, Masthead NEW!, Titles, Revealable Menu, Fixed Menu, Chyron NEW!, Home & Idle Screens, Lock Screen, Interstitial Screen, Advertising, Back
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
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
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
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.
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 NEW! - Placeholder, mostly, now that this is coming online for real.
Introduction to Bluetooth NEW! - Also placeholder, with just some links of interest for now.
History of Computing NEW!
Drawing Tools & Templates - Graphic design tools, UI guidelines, tips for various tools.
Emulators - Emulators, prototyping tools, design aids, etc.
Device Detection NEW! - The step past responsive you need to do for mobile. By guest expert Luca Passani.
Leverage Existing Device Capabilities NEW! - URI schemes and inter-application linking.
Raster Design Tips NEW! - 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 NEW! - 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.
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
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 if you pay for the for the eBook or printed editions.
OR you can simply search. I'd use a Google site search like this one. Just replace the "Carousel" term with yours. I mean, unless you wanted to know about carousels for some reason.