Differences between revisions 11 and 27 (spanning 16 versions)
Revision 11 as of 2011-01-25 20:31:01
Size: 3702
Editor: eberkman
Comment:
Revision 27 as of 2011-01-26 18:52:32
Size: 7206
Editor: eberkman
Comment:
Deletions are marked like this. Additions are marked like this.
Line 13: Line 13:
Having now integrated your skills with your office supplies, you can now marvel at the organized binder- full of colored label tabs, folders, and sequential pages. Your diligence pays off with evidence of an immaculate desk.
== Our Minds Hate Disorder ==
Simply put, our minds want store and extract information though order and organization.
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.
Line 18: Line 21:
Content that is organized laterally is at the same level tier in the information architecture. Unlike, information that is organized in a drill down format from general to specific, the information on a lateral level may or may not have a direct correlation with each other. 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.
Line 20: Line 23:
Lateral information on mobile displays is organized by user goals rather than by specific user tasks. Home and Idle Screens, Desktops, and Home Pages, etc., all organize content laterally. Consider a travel website. The homepage organizes content by various user goals such as: Booking a Flight, Checking the Flight Status, Finding Vacation Deals. Separately, these goals are not dependent upon each other, but together they form the overall purpose of the travel site: to provide travel services to the individual. 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 [[http://en.wikipedia.org/wiki/Fitts%27s_law|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.
Line 22: Line 31:
Within the mobile space, this lateral information must be clearly defined, organized and presented, and capable of interaction. 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.
Line 24: Line 39:
== Principles to Consider ==
=== Follow the Rules of Wayfinding and Norman’s Interface Model ===
Line 25: Line 42:
'''Mapping'''
Line 26: Line 44:
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.
Line 27: Line 46:
Some common metaphors you can use to access information on mobile devices are:
Line 28: Line 48:


 * 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.
 

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.

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

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.

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.

Lateral Access (last edited 2011-12-13 06:24:53 by shoobe01)