#acl EditorGroup:read,write,revert All:read == Wrap Up == As we’ve just seen, components are sections of page that may take up the entire viewport, a smaller section, or even appear modally in front of other displayed elements. In this section, you have became familiar with specific component patterns and how these patterns can be appropriately used to display and organize information. When used effectively, these patterns will allow mobile users to have an interactive experience that is enriching and satisfying. When incorporating these component patterns into your design, consider: * The user’s needs and their task specific goals. * How a user’s mental model and cognitive processing abilities will influence the design of the mobile interface. * The design must be visible, provide appropriate feedback, and use constraints to prevent and/or minimize human error. * Context of use will dictate how, why and what information is going to be accessed and interacted with. == Chapter 3: Display of Information == This chapter described the importance of displaying information based on the user’s mental model and how we organize this information cognitively. Failure to abide by these principles will most likely cause the user to become lost, confused, frustrated, and unwilling. To prevent this, this chapter explained research based frameworks, tactical examples, and descriptive mobile patterns to use. == Chapter 4: Control & Confirmation == This chapter described appropriate Control & Confirmation patterns that can be used on mobile devices to prevent costly human error resulting in loss of inputted data. When human error may occur, you can incorporate modal constraints and decision points as preventative measures. When considering confirmation controls, consider the user’s context of use. Because an overuse of these constraints and decision points during low risk situations will cause user frustration by increasing their processing time and mental load, and delaying or stopping their task. == Chapter 5: Revealing More Information == This chapter described how to appropriately design for revealing more information. As a designer, you need to become aware that our users, devices, and networks all have limits. Screen size will limit the amount of information that can be displayed at a time. A device’s OS will limit processing and loading times. Our memory limits cause us to filter, store, and process only relevant information over a limited period of time. If we disregard these important principles, then we can expect the mobile user to encounter will encounter performance errors, dissatisfaction, and frustration. == Pattern Table Chapter 3 == === Chapter 3: Display of Information === ||'''Pattern'''||'''Design Problem'''||'''Solution''' ||''' Other Patterns to Reference'''|| ||[[Vertical List]]|| Display a set of information, usually text or a text-representation, that uses horizontal space inefficiently.||Rather than using horizontal space inefficiently, displays a set of information vertically using an entire allocated space. ||[[Infinite List]], [[Thumbnail List]], [[Select List]], [[Location Jump]], [[Search Within]], [[Sort & Filter]], [[Titles]]|| ||[[Infinite List]] ||A Vertical List is called for, but the information set is very large, and not locally stored, so retrieval time is inconveniently long. ||Reveals small amounts of vertical information at a time because the information set is very large, and not locally stored.||[[Vertical List]], [[Thumbnail List]], [[Select List]], [[Location Jump]], [[Search Within]], [[Sort & Filter]], [[Wait Indicator]]|| ||[[Thumbnail List]]|| A Vertical List is called for, but additional graphical information will assist in the user's understanding of items within the data set. ||Uses a Vertical List with additional graphical information to assist in the user's understanding of items within the data set. ||[[Vertical List]], [[Select List]], [[Infinite List]], [[Carousel]], [[Grid]], [[Titles]]|| ||[[Fisheye List]]||A scroll-and-select device is targeted, and a Vertical List is called for, but small amounts of additional information can be displayed that would assist the user's task.||When a scroll-and-select device is targeted, and a Vertical List is called for, this can be used to reveal small amounts of additional information that can assist the user's task.||[[Vertical List]],[[Windowshade]], [[Pop-Up]], [[Pagination]], [[Location Within]], [[Titles]]|| ||[[Carousel]]||Present a set of information, most or all of which are unique images, for selection.||Displays a set of selectable images, not all of which can fit in the available space, but which can be scrolled through using many methods.||[[Pagination]], [[Location Jump]], [[Grid]]|| ||[[Grid]]||Present a set of information, most or all of which are unique images, for selection.||Displays a continuous array of selectable images, only some of which can be seen at once due to the limited size of the device viewport.||[[Simulated 3D Effects]], [[Pop-Up]], [[Slideshow]], [[Location Jump]], [[Pagination]], [[Location Within]], [[Carousel]], [[Stack of Items]]|| ||[[Film Strip]]||Present a set of information, which is either a series of screen-sized items or can be grouped into screens, for viewing and selection.||A series of screens are displayed as a continuous strip, with small spaces or markers between them. When a screen is centered, it fills the entire viewport. When scrolled, part of two screens and the divider can be seen at the same time.||[[Carousel]], [[Fixed Menu]], [[Revealable Menu]], [[Pagination]], [[Location Within]]|| ||[[Slideshow]]||Present a set of images or similar pieces of information for viewing and selection.||Each image is presented full-screen, with a function to transition to the previous or next image in the series.||[[Pagination]], [[Location Within]], [[Film Strip]], [[Infinite Area]]|| ||[[Infinite Area]]||Complex and/or interactive visual information must be presented to the user. The information can be presented as a single image, so large it must be routinely zoomed into so only a portion is routinely visible in the viewport.||The entire data set is considered to be a large, two-dimensional graphic, and smaller subsets can be viewed as though "zoomed in" to portions of the larger image.||[[Simulated 3D Effects]], [[Pinch Zoom]], [[Drag]], [[Zoom & Scale]], [[Wait Indicator]]|| ||[[Select List]]||Selections, either individual or multiple, must be made from a large, ordered dataset.||A method of selection, of the line item, or by adding checkboxes to the elements displayed, can be added to almost any display method, such as the Vertical List, Grid, or Carousel.||[[Vertical List]], [[Grid]], [[Confirmation]], [[Wait Indicator]], [[Titles]]|| == Pattern Table Chapter 4 == === Chapter 4: Control & Confirmation === ||'''Pattern'''||'''Design Problem'''||'''Solution''' ||'''Other Patterns to Reference'''|| ||'''[[Confirmation]]'''||A decision point is reached within a process where the user must confirm an action, or choose between a small number of disparate (and usually exclusive) choices.||Present choices contextually - usually as a modal dialogue - simply and clearly communicate the consequences of the choices.||[[Exit Guard]], [[Pop-Up]], [[Wait Indicator]], [[Titles]]|| ||[[Sign-On]]||A method must be provided to confirm only authorized individuals have access to a device, or a site, service or application on the device.||Consider whether your specific situation requires explicit authentication. Mobiles should only require authentication for first time entry, or for very high security situations. Mobile-like multi-user devices such as kiosks will also require authentication.||[[Pop-Up]], [[Drag]], [[Input Areas]], [[Titles]]|| ||[[Exit Guard]]||Exiting a screen, process or application could cause a catastrophic (unrecoverable) loss of data, or a break in the session.||Present a modal dialogue which delays the user from exiting immediately (the app or function is kept open in the background), informs them of the consequences of exiting (loss of data) and requires them to make choices, at least confirm exit or return to session.||[[Wait Indicator]], [[Pop-Up]], [[Titles]]|| ||[[Cancel Protection]]||User entered data or subsidiary processes would be time consuming, difficult or frustrating to reproduce if lost due to accidental user-selected destruction.||Processes must be designed to protect user input. Methods must be provided to recover previous and historical entry.||[[Clear Field]], [[Autocomplete]], [[Hierarchical List]], [[Input Areas]]|| ||[[Timeout]]||High security systems or those which are publicly accessed and are likely to be heavily shared (such as kiosks), must have a timer to exit the session and/or lock the system after a period of inactivity.||Try to avoid the use of timeout as a solution to load and security. If sessions must expire due to the method by which they have been built already, consider making this transparent.||[[Pop-Up]], [[Sign-On]], [[Exit Guard]], [[Titles]]|| == Pattern Table Chapter 5 == === Chapter 5: Revealing More Information === ||'''Pattern'''||'''Design Problem'''||'''Solution''' ||'''Other Patterns to Reference'''|| ||[[Windowshade]]||A displayed element must be able to easily reveal a small or medium amount of additional information, without leaving the current context or page.||Items are provided with an indicator that more information is available, generally by defining upper and lower bounds, or enclosing in a box. When selected, this area expands vertically to display additional information or interactive elements.||[[Fisheye List]], [[Pop-Up]], [[Titles]]|| ||[[Pop-Up]]||A displayed element must be able to easily reveal a small or medium amount of additional information, while remaining associated with the current context or page.||A Pop-Up is a child "page" smaller than the viewport, that appears modally on top of the parent page or display context which spawned it.||[[Annunciator Row]], [[Titles]], [[Exit Guard]], [[Links]], [[Advertising]]|| ||[[Hierarchical List]]||A large set of information must be presented. The information is hierarchically ordered, and this structure is relevant to the user.||Can display hierarchically-ordered information in a comprehensible and quickly-accessed manner. The parent/child relationships are exposed visually, and users may fold and unfold the list to view only the relevant parts needed.||[[Fisheye List]], [[Vertical List]], [[Select List]], [[Titles]]|| ||[[Returned Results]]||When users have explicitly requested subsets of information, the resulting narrowed dataset must be displayed in a meaningful manner.||The displayed page will show Returned Results in an ordered list, or displayed over other contextually relevant information (such as a map or graph).||[[Vertical List]], [[Thumbnail List]], [[Fisheye List]], [[Select List]], [[Pagination]], [[Location Within]], [[Access Keys]], [[Titles]]|| == Additional Reading Information == In case you would like to further explore additional reading information and resources found within this section, check out the recommended related topics below that are found in the appendix. '''[[Human Factors & Physiology]]''' - A section providing additional information on our human sensation, visual perception, and information processing abilities. ---- Next: Part III '''[[Widget]]''' ---- = Discuss & Add = Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here. == Examples == If you want to add examples (and we occasionally do also) add them here. == Make a new section == Just like this. If, for example, you want to argue about the differences between, say, Tidwell's Vertical Stack, and our general concept of the List, then add a section to discuss. If we're successful, we'll get to make a new edition and will take all these discussions into account.