|
Size: 17895
Comment:
|
Size: 14064
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 1: | Line 1: |
| {{{#!wiki yellow/solid This is brand, spankin' new. There are some bugs or incomplete elements here and there. Add all you want to the Wiki pages, but if you think something really broken, feel free to contact a site admin. |
{{{#!html |
| Line 4: | Line 3: |
| The Components section is where we're working now. Everything else is just there to fill in the outline. Scroll down a bit to see a "final" pattern. | <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> |
| Line 7: | Line 26: |
| == 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://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 a comprehensive reference for mobile design patterns. Whether designing for smartphones, featurephones or other related devices, common principles are discussed and codified as 76 universal interaction and interface patterns. |
| Line 10: | Line 28: |
| 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? | Aside from suggestions, each pattern lists pitfalls and implementations to avoid. Every pattern is grouped with similar or optional patterns, and explained with the underlying psychology and physiology. Along with appendices detailing mobile technologies, type and design principles and human factors, you will have a base of knowledge to make up your own mind, and react to the always-changing mobile environment. |
| Line 12: | Line 30: |
| Because they are yours. 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. | ''"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 |
| Line 14: | Line 33: |
| * [[What is a Pattern?]] * [[What Do You Mean by "Mobile"?]] * [[Where Did These Come From?]] * [[Common Practice vs. Best Practice]] * [[Disagree? Change it.]] |
'''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.]] '''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.]] 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. '''Read in other languages''' * ''Designing Mobile Interfaces'' has been translated into Russian, Chinese, Korean, and Italian. [[Other languages and editions]] 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. ----- == 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]] |
| Line 20: | Line 59: |
| * [[Definitions & Styles of the Patterns]] * [[Componentized Design]] |
* [[Successfully Designing with Patterns and Heuristics]] |
| Line 23: | Line 61: |
| * [[Heuristics for Evaluating Mobile Designs]] ----- == 2nd Edition == These are just thoughts that have come up lately based on writing about creating specs, creating pattern libraries for clients, etc. Instead of adding and tweaking, an all new structure. Maybe, focus more on smartphone OSs and give examples for Android/iOS/BB10/Windows * IA - Multi-device/Omni-channel stuff. Core to this is design-once, branch to each platform. * Define device classes, include features by group or class. * Fuzzy and conditional classes. Like Windows Pro tablets or mounted iPads that are de-facto kiosks. * Flow - Cover stuff like the stack from Android, in principle, and. * Features you don't include because they are provided by other apps, the OS, etc. Details about intent pickers, etc. * Maybe a bit about specifying widgets vs. designing them. * Patterns, grouped by section - This is partly because things seem to be settling into better cross-platform patterns. And also from some touch revelations about differences in clicking parts of the screen. * Like, Title bars are getting to be much the same so can be covered in one pattern * Like, Menus are more often drawers than fixed (iOS) or popups. * More, more, more... |
|
| Line 27: | Line 81: |
| === Page === Wrapper as a concept, is key to the intro for this section. 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? |
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! |
| Line 30: | Line 83: |
| * [[Vertical Scroll]] Usually page, but also chunks of the page... Same element for whole device. All the stuff we talk about, like size, bezel obscuring, indicator or interactive, relative size (suggested!) and so on. Space saving techniques like letting it overlay content, vs being a strip, and letting it disappear being not suggested (how to tell where you are without scroll, when eyes are somewhere else often). * [[Horizontal Scroll]] Or sideways indicator... see Seesmic details for an interesting version of "more over here" * [[Annunciator Row]] Cover what should be in it, how it's always there. Even if you have full screen items. And don't change the layout much. * [[Notification Area]] 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. * [[Revealable Menu]] Android has this. Action opens it. - SKs and things like Bada (visible item, with label maybe, but NOT the menu itself) are variants of this. Also think about weird pullout strips like Pre has. * [[Fixed Menu]] iPhone has a visible menu. * [[Home & Idle Screens]] Basic deck, and the multiple-home-screen mentality Apple esp brought us. Side or other scrolling, pros and cons, indicators of position... Mentioned because it's a totally different layout (very often) than apps and other things on the device. Go deep enough to cover e.g. S60 folders, etc. * [[Advertising]] Consider Weather Channel, size and placement as best practice - Do not let ads get perceived as part of the page; so alignment, size, backgrounds, etc. - HERE because it should not be addressed as a random widget, but always appear the same place, and often has to be on pretty much every page anyway. * [[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. === Components === Introduction to the [[Components]] section. ==== Display of Information ==== Introduction to the [[Display of Information]] chapter. * [[Vertical List]] * [[Infinite List]] * [[Thumbnail List]] * [[Fisheye List]] * [[Carousel]] * [[Grid]] * [[Film Strip]] * [[Slideshow]] * [[Infinite Area]] * [[Select List]] ==== Control & Confirmation ==== * [[Confirmation]] Maybe Principles ... but the thing where you don't label buttons yes or no. Mostly modal dialogues. * [[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. * [[ExitGuard]] * [[CancelGuard]] ==== Revealing More Information ==== Introduction to the [[Revealing More Information]] chapter. * [[Windowshade]] * [[Pop-Up]] * [[Hierarchical List]] * [[Returned Results]] |
* [[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]] |
| Line 70: | Line 110: |
| === 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. |
=== 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]] |
| Line 73: | Line 114: |
| ==== 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 Fast User Switching on mac * [[Pagination]] Conventional "page of page" (7 of 23), range of total. This one is the interactive version. You can click prev/next, to a range, etc. All options covered... * [[Location Within]] Indicates location, without a jump to feature, or a pagination control per se. Dot indicators are this, for example. ==== Drilldown ==== * [[Stack of Items]] Tap to expand stack, etc. See all ways of doing it on Surface ... Many other drilldown methods' Antipatterns: do not use a generic icon/graphic to describe the stack, i,e. iphone grouping * [[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. * [[Bookmarks]] adding notes and nodes along a line graph like google analytics, adding pins to map locations, establishing a reference point with additional information ==== Labels & Indicators ==== * [[Typography]] Like, pick good readable stuff, try to pick fonts where bold face is not roomier than roman. Even mention square serifs for readability. Guidelines for sizes, suggestions to use physical units of measure,... http://4ourth.com/wiki/Introduction%20to%20Mobile%20Typography * [[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. * [[Direction]] Compass direction, or just axis of a chart. * [[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 * [[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. * [[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. * [[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. ==== Controls ==== * [[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. |
----- == 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. |
| Line 101: | Line 118: |
| So, I've included it here as an Appendix, ordered so you can just pretty much read it from one end to the other. | |
| Line 102: | Line 120: |
| === Input & Output === Keyboard, Keypad and Other input features. Gestures here or somewhere else? Sensors? - Sizes of touch targets, etc. Include diagrams from Mobile Design Elements. |
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. |
| Line 105: | Line 122: |
| ==== Keyboards & Keypads ==== * [[Soft keyboards ]] Probably. Unless it should be under Key below. Use my gripes about non-standard Galaxy Epic as a baseline. * [[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. * [[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? * [[Spacing]] Worth repeating basic ergonomics? Or are we getting into hardware design too much * [[Autocomplete]] All the bad things about predictive text input. I guess. Complex issue. * [[Accesskeys]] Includes screen listing of them. Contrast with numbered lists... |
* [[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. * [[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]] |
| Line 115: | Line 150: |
| ==== Finger Gestures ==== swipe, pinch and zoom, tapping - Relatively FEW are included, as they are patterns. Need to be identifiable best cases. Weird gestures, or those with too much variability for user type, region, etc. are not included as they are not patterns in the sense we mean. * [[Tap]] Perform action. Go somewhere, select something, etc. * [[Tap & Hold]] Alternative interaction - Light "right click" - should provide option, not just DO other action * [[Drag]] Moves something. Maybe the whole screen. In the direction (or axis) selected. When not free movement, try to have arrows to indicate axis-of-movement - Cover inertia also * [[Pinch Zoom]] Two finger apple-like pinch to unzoom, etc. * [[Axis Rotate]] Two finger rotate. One is axis, one is rotation. |
{{{#!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''' [[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 - See more at: http://www.uxmatters.com/mt/archives/2013/08/designing-intuitive-point-of-interest-and-point-of-sale-touch-interfaces.php#sthash.sMtmEAeD.dpuf]] * '''10-foot-UI''' [[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''' (cars) - NEEDED * '''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. |
| Line 123: | Line 164: |
| ==== Kinesthetic gestures ==== Whole body motions, whole-device motions (e.g. face down=sleep), and even sensing such as speed, gait... - NOT TOO FUTURISTIC! Roll handset: , Raising to face, Lowering from face, Tapping two devices together, Motioning handset towards RFID, Whipping: A quick down-up motion * [[Shake]] shaking handset rapidly on multiple axis. Used to refresh and reload displayed information or to scatter data. * [[Roll]] Rolling device onto it's opposite side will change it's current state. i,e. face down=sleep. * [[Tapping]] Tapping two handsets together can be used for file and information sharing * [[Whipping]] Rapid back and forth action used to throw or cast information i,e. fishing reels used in games * [[Raising ]] consider more...antipattern? * [[Lowering]] consider more...antipattern? * [[Proximity to Signals]] like audio detection on car radios? RFID, card readers....FUTURE, orientation of detectors on handset? Cultures? * [[Rotation]] rotating device on axis or planes to change the orientation of the information displayed. |
----- == References == * [[Works Cited]] * [[Additional Resources]] |
| Line 134: | Line 169: |
| ==== On-Screen Inputs ==== Button behaviors (look clicked, press-and hold), also select-lists, etc. - Consider them systematically to be an input selection method. So they go here! * [[Input Areas]] Form, or sms input area, or... anything you put text... http://patterns.design4mobile.com/index.php/Text_Entr * [[Input Method Indicator]] Hanging off the side of a field. Talk (maybe) about how input method for the whole screen is an anti-pattern? Indicates the current and/or the available methods... Need to work on the best practice here! * [[Select lists]] Cover all - pulldowns, radios, checks, because differences can be fuzzy, and some are bad implementation, e.g. J2ME/S60 default full-page input; (NOT on-page lists or simple nav: refer to Information Display chapter above) Anti: Select lists should not look like anything else, and buttons (etc.) should not look like select lists. E.g. Seesmic. * [[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. Acceleration (especially scroll and select) should snap to even numbers; see Sony alarm clock behavior in this regard. * [[Attach & Reference]] Maybe... Push button to go somewhere and get a file to attach, as with MMS. Or reference a person, as with address to send to. Still a field, usually, and you activate differently to cross-link, etc. * [[Text Insertion Point]] Text insertion points, the mag insertion for iPhone edit for example. * [[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) |
----- == Other Stuff from the Book == |
| Line 144: | Line 172: |
| ==== Audio & Vibration ==== Beeps and why they are bad. Tone types. Audio readback best practices. Look at med reminder for some of these. Voice input. Vibrate is just crappy haptics. Include it. * [[Tones]] See Ecosystem of Beeps, and riff off that. Beeps should imply things. Like crosswalk tones aren't just beeps! * [[Voice Input]] look it up. I know little. * [[Voice Readback]] Have some of this in specs we can look up. * [[Voice Reminders]] Voice reads out without warning. "Time to go to the dentist." Privacy concerns, and "uh" acclimation issues. Needs to probably be after you ack that a message has arrived, so are paying attention, but a valid method for low-vision, or otherwise cog disabled folks. * [[Haptic Output]] Vibration responses and reminders. Two different things. |
* [[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. |
| Line 152: | Line 180: |
| ==== Screens & Lights ==== * [[LED]] Blink, colors, etc. - Again, got some of these in the blog post on battery indicators * [[Backlight]] Timing can be odd - Auto brightness guidelines also... Ease of changing. * [[Screen cleverness]] Like the N8s nice sleep state clock. Something along the lines of avoiding common practice, and using best practice (OLED power per lit pixel) * [[Distance from users]] Guidelines, mostly, on how people hold phones closer than tabs, or laptops, or desktops or TVs (like my photo). Guideline or anti: don't change based on distance from user, as they are already adjusting... ==== Augmented Reality ==== covered in many other patterns. is instead a category of product. Should probably be removed from here. |
----- == UX Office Hours - Kansas City == Steven will be appearing every Tuesday at the Kansas City Startup Village to provide free consulting or chatting on UX for your business. [[UX Office Hours|Find out more]]. |
| Line 164: | Line 186: |
| == 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. |
== 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. |
| Line 177: | Line 198: |
| == References == * [[List of References]] |
== UX & Mobile Development Work == * [[Job Board]] |
Designing Mobile Interfaces: Patterns for Interaction Design is a comprehensive reference for mobile design patterns. Whether designing for smartphones, featurephones or other related devices, common principles are discussed and codified as 76 universal interaction and interface patterns.
Aside from suggestions, each pattern lists pitfalls and implementations to avoid. Every pattern is grouped with similar or optional patterns, and explained with the underlying psychology and physiology. Along with appendices detailing mobile technologies, type and design principles and human factors, you will 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
Buy it from Amazon:
Buy it direct from O'Reilly:
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.
Read in other languages
Designing Mobile Interfaces has been translated into Russian, Chinese, Korean, and Italian. Other languages and editions
We also update it occasionally, especially the reference sections, so even if you buy the book check back for updates, and contact us with errors, suggestions or to get access to the wiki to add updates yourself.
Preface
2nd Edition
These are just thoughts that have come up lately based on writing about creating specs, creating pattern libraries for clients, etc. Instead of adding and tweaking, an all new structure. Maybe, focus more on smartphone OSs and give examples for Android/iOS/BB10/Windows
- IA - Multi-device/Omni-channel stuff. Core to this is design-once, branch to each platform.
- Define device classes, include features by group or class.
- Fuzzy and conditional classes. Like Windows Pro tablets or mounted iPads that are de-facto kiosks.
- Flow - Cover stuff like the stack from Android, in principle, and.
- Features you don't include because they are provided by other apps, the OS, etc. Details about intent pickers, etc.
- Maybe a bit about specifying widgets vs. designing them.
- Patterns, grouped by section - This is partly because things seem to be settling into better cross-platform patterns. And also from some touch revelations about differences in clicking parts of the screen.
- Like, Title bars are getting to be much the same so can be covered in one pattern
- Like, Menus are more often drawers than fixed (iOS) or popups.
- More, more, more...
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!
I - Page -
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 - Placeholder, mostly, now that this is coming online for real.
Introduction to Bluetooth - Also placeholder, with just some links of interest for now.
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.
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
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 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.
10-foot-UI Global Experience Language - TV by the BBC - Style guides and many guidelines and principles for TV graphics and interactive TV.
TV Screen Sizes by popularity of Web viewing, September 2013
Telematics (cars) - NEEDED
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.
That Game's UX terrific blog on gaming, with all sorts of great UX principles applied or reviewed.
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.
UX Office Hours - Kansas City
Steven will be appearing every Tuesday at the Kansas City Startup Village to provide free consulting or chatting on UX for your business. Find out more.
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 post it here.
Mentions, Reviews & Other Writing
We (and especially Steven) write a lot still. 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.