|
Size: 10293
Comment:
|
Size: 2713
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 17: | Line 17: |
| == Chapter 10: Text & Character Input == Text == Chapter 11: General Interactive Controls == Text == Chapter 12: Input & Selection == text == Chapter 13: Audio & Vibration == text == Chapter 14: Screens, Lights & Sensors == text |
|
| Line 26: | Line 37: |
| ||'''[[Tabs]]'''||Access must be provided to a small number of items at the same level in the information architecture, while also clearly communicating this hierarchy of information. ||Follow the file folder metaphor by creating distinct labels that separate 3-8 sets of content.||[[Titles]], [[Pagination]], [[Location Within]]|| ||[[Peel Away]]||Display a small amount of deeper information, or provide access to related controls or settings, in an organic manner. ||For touch and pen displays, use a simulated 3D effect to represent a paper page, which can be peeled or flipped back to view a second page behind it.||[[Simulated 3D Effects]], [[Pagination]], [[Pop-Up]], [[Film Strip]], [[Fixed Menu]], [[On-screen Gestures]]|| ||[[Simulated 3D Effects]]||Display a small amount of directly related information, provide access to related controls or settings, or provide an alternative view of the same information, in an organic manner. ||Use Simulated 3D Effects to pretend components on the page, or even the whole page, merely presents one side of a physical object. Rotating the object, moving it aside, or looking past it, can then be used without 3D technologies.||[[Stack of Items]], [[On-screen Gestures]]|| ||[[Pagination]]||Location within a series of screens continuing display of a set of content should be clearly communicated, and access provided to other pages in the stack||Page numbers, and a sense of the relative position within the total, are displayed. Tied to this display is a method to move between pages easily and quickly. Methods to jump further than the previous and next page are also usually offered.||[[Peel Away]], [[Directional Entry]], [[Access Keys]], [[On-screen Gestures]]|| ||[[Location Within]]||Location within a series of screens with alternate views, or which continue the display of a set of content, should be clearly communicated.||When several screens of similar or continuous information are presented with an organic access method, an indicator is usually required so the user understands their position within the system.||[[Slideshow]], [[Film Strip]], [[Pagination]], [[On-screen Gestures]], [[Tabs]]|| == Pattern Table Chapter 7 == === Chapter 7: Drilldown === ||'''Pattern'''||'''Design Problem'''||'''Solution''' ||'''Other Patterns to Reference'''|| ||[[Link]]||A function must be provided to allow access to related content from arbitrary locations within a page.||Links are content-only items which provide access to additional information either by loading a new page, jumping to a piece of content, or loading a pop-up dialogue. ||[[Pop-Up]], [[Vertical List]], [[Indicator]], [[Icon]], [[Button]]|| ||[[Button]]||Within any context, an action must be initiated, information submitted, or a state change carried out. ||Use a Button to initiate an immediate action such as changing device modes and commit user selections.||[[Link]], [[Icon]], [[Indicator]], [[Spinners & Tapes]], [[Pop-Up]], [[Exit Guard]]|| ||[[Indicator]]||Within any context, an action must be initiated, information submitted, a link followed to more information, or a state change carried out on the current page.||The Indicator pattern is a type of action initiator between a Link and a Button. Indicators are always used with text labels, and may perform any action: linking, state changes, and commit actions.||[[Link]], [[Button]], [[Icon]], [[Pop-Up]], [[Pagination]]|| ||[[Icon]]||Provide access to disparate items or functions, in a glanceable manner. ||Icon widgets provide immediate access to additional information, such as target destinations, and device status changes and are easily understood by their graphical representation.||[[Link]], [[Button]], [[Indicator]], [[Home & Idle Screens]], [[Grid]], [[Carousel]], [[Avatar]], [[Thumbnail List]]|| ||[[Stack of Items]]||A set of closely related items, which can be represented as icons or thumbnails, must be presented in a manner implying the hierarchy, and providing easy display of the contents. ||A set of stacked thumbnails are arranged with only the top one completely visible.||[[Hierarchical List]], [[Icon]], [[Grid]], [[Fixed Menu]], [[Revealable Menu]], [[Wait Indicator]]|| ||[[Annotation]]||A data point in a dense array of information must be able to show additional details or options without leaving the original display context. ||An iconic element points to the information selected, and presents (sometimes only after further selection, or in another area of the screen) a label and additional options.||[[Link]], [[Button]], [[Tooltip]], [[Fixed Menu]], [[Revealable Menu]], [[Simulated 3D Effects]]|| == Pattern Table Chapter 8 == === Chapter 8: Labels & Indicators === ||'''Pattern'''||'''Design Problem'''||'''Solution''' ||'''Other Patterns to Reference'''|| ||[[Ordered Data]]||Present information, especially text and numerical data, in the most appropriate and recognizable format for the context and viewer.||Content types that are displayed regularly have become regularized in their display, and must be presented in specific formats to be easily recognizable to users. ||n/a|| ||[[Tooltip]]||A small label, descriptor or additional piece of information is required to explain a piece of page content, a component or a control. ||A tooltip is a transient, contextual, informational assistance widgets initiated by hovering over a target, or automatically presented when the system determines the user needs help.||[[Fixed Menu]], [[Revealable Menu]]|| ||[[Avatar]]||A glanceable representation of a person should be provided, for use in various contact-listing contexts.||An avatar is an iconic image used to represent or support the label for an individual, such as a contact in the address book.||[[Icon]], [[Indicator]], [[Thumbnail List]], [[Link]], [[Tooltip]]|| ||[[Wait Indicator]]||Processing, loading, remote network submissions and other delays must be clearly communicated to the user.||Use a Wait Indicator to inform users of delays which are imposed by technical constraints.||[[Interstitial Screen]], [[Infinite Area]], [[Reload, Synch, Stop]]|| ||[[Reload, Synch, Stop]]||User control must be provided for loading and synching operations with remote devices or servers. ||Due to specific user needs, accidental inputs or system constraints, the user must sometimes manually start or stop data transfers.||[[Notifications]], [[Icon]], [[Tooltip]]|| == Pattern Table Chapter 9 == === Chapter 9: Information Controls === ||'''Pattern'''||'''Design Problem'''||'''Solution''' ||'''Other Patterns to Reference'''|| ||[[Zoom & Scale]]||Data in dense information arrays, such as charts, graphs and maps, must be able to change the level of detail presented by a zooming function or metaphor.||Use Zoom & Scale to zoom in and out of information while communicating a sense of scale, whether relative or absolute.||[[Annotation]], [[On-screen Gestures]], [[Ordered Data]], [[Wait Indicator]], [[Infinite Area]]|| ||[[Location Jump]]||Scrolling to items in a long vertical list is cumbersome. The information must be indexed to assist in retrieval, and a method provided to allow easy access to key indexed portions of the list.||An indicator of location, or indexing system, is visible on the screen and this may be used to jump to the front of an indexed section.||[[Tabs]], [[Vertical List]], [[Location Within]], [[Home & Idle Screens]], [[Accesskeys]], [[On-screen Gestures]], [[Search Within]]|| ||[[Search Within]]||Finding specific items within a long list or other large page or data array is cumbersome. A method must be provided to find and display this information.||A text search may be placed on the page to search for information within the displayed information set.||[[Infinite List]], [[Accesskeys]], [[Pagination]], [[Annotation]], [[Wait Indicator]], [[Tooltip]]|| ||[[Sort & Filter]]||Large data sets often hold information with multiple, clearly-defined attributes, shared among many items in the set. Users must be able to sort and filter by several of these common attributes at once in order to discover the most relevant result.||Use Sort & Filter to present the most relevant results first, from of a possibly large results list.||[[Search Within]], [[Exit Guard]], [[Vertical List]], [[Infinite List]], [[Select List]], [[Pagination]]|| |
||'''[[Keyboards & Keypads]]'''||Text and numeric entry must be simple, easy, and should be so predictable in behavior it may be performed by any likely user with little or no instruction. ||Three options exits: Hardware/Virtual, Keyboard/Keypad, Direct / Multi-tap. Consider the constraints held by the device, cultural norms, and adhere to basic keyboard principles.||[[Input Method Indicator]], [[Dialer]], [[Autocomplete & Prediction]], [[Directional Entry]], [[Button]], [[Remote Gestures]], [[Exit Guard]]|| |
Wrap Up
People interact with their devices in unique ways that are most comfortable and natural to them. Some prefer using the keyboard, while others who are less familiar with text input may use the pen. Those that enjoy using natural gestures will use devices with touchscreens and accelerometers.
The environment and context also influence how users interact with these devices. Some people prefer to work outside no matter the weather condition. They might be bundled up in a coat and wearing gloves and still expect to input data. Those that use their device indoors while studying may require the use of lights and haptics as notifiers so they aren’t interrupted. People who are constantly traveling, may require an integration of location-based services with their current application use.
With all of these variables affecting how people interact within the mobile landscape it’s important to carefully consider the mobile design principles when designing mobile interfaces.
- Respect user data
- Mobiles are personal
- Lives take precedence
- Mobiles must work in all contexts
- Use your sensors and your smarts
- User tasks usually take precedence
- Consistency
- Respect for information
Chapter 10: Text & Character Input
Text
Chapter 11: General Interactive Controls
Text
Chapter 12: Input & Selection
text
Chapter 13: Audio & Vibration
text
Chapter 14: Screens, Lights & Sensors
text
Pattern Reference Chart
This pattern reference chart lists all of the patterns found within each chapter described in this part of the book. Each pattern has a general description of how it can apply to a design problem while offering a broad solution.
Cross-referencing patterns are common throughout this book. Design patterns often have variations in which other patterns can be used due to the common principles and guidelines they share. These cross-referenced patterns are listed along with the page number where they are fully described in this book.
Chapter 10: Text & Character Input
Pattern |
Design Problem |
Solution |
Other Patterns to Reference |
Text and numeric entry must be simple, easy, and should be so predictable in behavior it may be performed by any likely user with little or no instruction. |
Three options exits: Hardware/Virtual, Keyboard/Keypad, Direct / Multi-tap. Consider the constraints held by the device, cultural norms, and adhere to basic keyboard principles. |
Input Method Indicator, Dialer, Autocomplete & Prediction, Directional Entry, Button, Remote Gestures, Exit Guard |