Differences between revisions 3 and 4
Revision 3 as of 2011-05-16 00:52:59
Size: 10476
Editor: eberkman
Comment:
Revision 4 as of 2011-05-16 00:55:51
Size: 10718
Editor: eberkman
Comment:
Deletions are marked like this. Additions are marked like this.
Line 16: Line 16:

== 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

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

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

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

Input and Output Wrapup (last edited 2011-12-13 16:59:30 by shoobe01)