Story

Whether you’re a student in college, a design professional, or an author of a book, you have all experienced the clutter of notes, reminders, memos, drawings, and documents scattered across the surface of your desk. There comes a point in this chaotic, unorganized display, when your tidy instinct begs for some order.

If your lucky, you quickly find materials you can use: a binder, file folders with the colored tabs, paper clips, even a stapler. You initially grab the content, sort and filter as a means for organizing and making order. As you organize, you may classify the data by such lateral relationships as (see Chapter 3, Display of Information):

• Nominal - uses labels and names to categorize data.

• Ordinal - using numbers to order things in sequence.

• Alphabetical - using the order of the alphabet to organize nominal data.

• Geographical - using location, such as city, state, country, to organize data.

• Topical - organizing data by topic or subject.

• Task - organizing data based on processes, tasks, functions and goals.

Having now integrated your organizational skills with those office supplies, you can marvel at the clean desk. On its surface lay a faceted arrangement of folders. Each folder is clearly labeled with colored tabs housing written descriptions. Within each folder, a hierarchy exists of related content.

Navigation Structure

As discussed in Chapter 3, Displaying Information, we understand the importance of organizing an information structure across a single page, or an entire OS. To recap, we know that are two main types of organizing with information architecture.

• Hierarchy – which organizes content based on top-down, parent-child relationships.

• Faceting- organizes based on information attributes without the parent-child relationships. The structure is based on heterogeneous content, that share the same level within an information architecture.

Lateral Access and the Mobile Space

Now that the content has been organized and designed to follow an information architecture, you will need to consider how the users will access all of that information on a mobile device.

Important things to consider:

• Mobile displays can be much smaller than a PC, reducing the amount of information shown on a viewport’s current state. Unlike PCs, where information is designed for a 1024x 768 resolution, common smartphones have screen resolutions at 320x480px.
• Globally, feature phones still make up about 80% of the mobile market. These devices have a common resolution of 240 x 320px, though some can have smaller screen resolutions down to 128 x 176px.
• Because the screen real estate is so valuable, it’s important to prioritize features and content related to the user’s high-level goals.
• A mobile user’s attention is competing with all of the stimuli in the surrounding environment. Therefore, the access to the content must be detectable and afford its function appropriately.

• According to Fitts’ Law, there is a direct correlation between the size of the target, its distance from the user, and the amount of time it takes to select it. Therefore, a smaller display requires larger buttons for gestural interaction. Which, in effect, will reduce the amount of content that can be placed on the screen.

• A user has varying reading goals: glance, scan, and read.

To account for these issues, consider presenting the information with lateral access. Content that is organized laterally is at the same level tier in the information architecture.

Benefits of lateral Access

• Limits the amount of levels to access priority information.
• Reduces the amount of clicking and/or selecting
• Reduces the exiting or opening of pages.
• Organizes heterogeneous content.

Principles to Consider

Follow the Rules of Wayfinding and Norman’s Interface Model

Wayfinding

In the introduction to the Widget part, the principles of wayfinding are discussed in detail. These same principles can be applied to lateral access widgets to ensure your user can navigate across content with ease.

• Paths:

• Edges:

• Nodes:

• Districts: Within the viewport, sections of information that are grouped or bounded by visual elements that follow the laws of proximity will be perceived as being related and separate from other components.

  • Tabs – place related tabs adjacent to each other to define a perceived group. These tabs may share common visual design elements, such as size, shape, color, and form. If you are using multiple groups of tabs, make sure these are clearly distinguishable from other tab groups.
  • Pagination

• Landmarks:

Mapping

Mapping describes the relationship between two objects and how well we understand their connection. We’re able to create this relationship when we combine the use of our prior knowledge with our current behaviors. To quickly recall these relationships, we develop cognitive heuristics, or cultural metaphors. These metaphors reinforce our understanding of the relationship of object and its function.

Some common metaphors you can use to access information on mobile devices are:

• Tabs - are understood in principle to the file folder tab. We expect this tab to be selectable and an identifier of a folder that contains related content. If we see one tab, we will expect to see adjacent tabs that are separating additional content. Too many grouped tabs; however, will cause our users to become cognitively overloaded during the decision making process. Thus, resulting in slower performance and user frustration.

• Cubes – show content on one or two faces, and will be expected to have content on all other sides that share the same axis. Users will expect faces to rotate. Constrain the rotation to one axis, otherwise users will become frustrated with the inability to quickly navigate and correctly select the content. Animation of the rotation from one face to the other must be provided. Otherwise, the user may not know their current selection’s position on the cube.

• Peeled Corners- pages that are slightly peeled back are understood in principle to pages in a book. We expect access to the pages underneath the top layer. A gestural interaction that allows for turning the page will be expected. Animate the transition from one page to the next.

• 3D effects - such as shadows and transparency can be used to simulate layers and depth. The user will understand that information can occupy virtual space, appearing modally in front of other layers, while hiding others.

Constraints

Restrictions on behavior should be appropriately implemented to eliminate or reduce performance error while laterally accessing content. Consider using the boundaries of the display (edges and corners) during gestural and scroll and select navigation. The edges and corners provide an infinite area to move our fingers or curser over. This can significantly reduce the amount of time to navigate across pages. Consider this effect when using a circular or closed navigation structure.

• Circular navigation - A key tactical consideration, mentioned several times in the patterns, is whether browsable data sets are circular or dead end. Circular lists simply go around and around. When at the "last" item in a list, continuing to view the next item will display the first one in the list. This is useful for faceted views, or other cases where the ordering is unimportant. Consider integrating the Location Within widget to indicate current position.

• Closed navigation - For dead end lists, there is a definitive start and stop, and (aside from links such as "back to top") there is no way to go to the other end. These are useful for information with a very ordered, single-axis display. Most hierarchies, and much date-sorted information should display like this. Such as a message list that starts with the most recent. Consider integrating the Pagination widget to indicate current position.

Patterns for Lateral Access

Using appropriate and consistent lateral access widgets will provide an alternative way to present and manipulate content serially. Within this chapter, the following patterns will be discussed, based on how the human mind organizes and navigates information:

• Tabs– Based on the concept of file folder tabs, these elements are used to separate and clearly communicate, sets of pages or features at the same level in the information architecture.

• Peel Away – An organic and animated representation of a page being flipped over to reveal a second page behind it.

• Simulated 3D Effects – Displays and alternate view to the content on the page using 3D graphics. When device gestures or viewer movements are used, these items affected will follow the presumed physics or correctly represent the space they occupy.

• Pagination –Serially displays a location within a set of pages. Offers the ability and function to navigate between pages easily and quickly.

• Location Within –An indicator is required to show the current page location within series of several screens of similar or continuous information. This is presented with an organic access method.