• Rob George

User Interface: Platform & Posture + Designing for Mobile & Other Devices (Week 8)

This week is on chapters 9 and 19 of About Face: The Essentials of Interaction Design by Alan Cooper, Robert Reimann, David Cronin, and Christopher Noessel.

 

Chapter 9: PLATFORM & POSTURE


POSTURE FOR MOBILE DEVICES

Smartphone and Handheld Posture

About Face discusses how handheld devices are designed for mobile use. This means they "must be small, lightweight, economical in power consumption, ruggedly built, and easy to hold and manipulate." Which is why it is important to consider the different postures of smartphones and handheld devices such as; Satellite and Standalone postures.


Satellite Posture

This is referring to when mobile devices such as media players and PDAs were designed to be extensions of desktops. This means the devices were meant for viewing content-oriented data such as playing music, video, and readings on small, lower quality screens with "awkward" navigation and controls. Examples of these would be Palm, the early Windows devices, iPod Nano, and Kindles.


Standalone Posture

Standalone posture was introduced with the iPhone and it's touch screen. This kind of posture allows for easy viewing of even more informational data than satellite. It is easy to navigate and has an "on-the-go nature" meaning a user can switch between apps instantly and do everything a desktop can and more right in your hand.


Tablet Device Posture

Tablets are larger standalone posture devices that have more real estate. With larger tablets designers should be careful to not treat it like a large phone because screen proportions for content can become awkward. These usually have toolbars on the top, bottom, or sides of the screen, use zoom and scroll as navigation, and are similar to displaying content on desktop but more simplified. Widgets, found on Android tablets, help finding functions a little easier by displaying apps as seen in the example provided by About Face below.




POSTURES FOR OTHER PLATFORMS

About Face also discusses the importance of interface design in products with other postures such as Kiosks, TVs, Cameras, Automobile dashboards, ATMs, Household Appliances, etc.


KIOSK POSTURE

Kiosks are systems that are used in public locations usually used for maps in malls, purchasing tickets, checking-in/self-checkout, etc. People also tend to spend little time in front of them, meaning they have to be easy to learn and navigate with "large colorful, engaging interfaces with clear controls and functions."

It's important to note that transactional kiosks are process driven interfaces, which means the interface should focus less on where the user is in the interface and more on "where they are in their process."

Educational and entertainment kiosks are meant to be explored so it is important to make it easy to navigate through the interface.


"TEN-FOOT" INTERFACE POSTURE

This is referring to smart TVs and game consoles. This type of posture is very similar to satellite posture. For browsing, the navigation is usually horizontal and vertical while organized in grids with options at the top or to the left of the screen. Since these are not touch screen, they use the same "gestures" but "are replaced with the five-way D-pad interaction of an infrared or Bluetooth remote control." Another big difference is the need of a current-focus item which is obvious visuals on the screen of where the user is and where they can go next.


AUTOMOTIVE INTERFACE POSTURE

This posture is similar to kiosks, which are touchscreen and very easy to use except you are sitting and driving while using it. They must be distraction free due to driver safety and take one step at a time. About Face discusses how navigation should be large and easily noticeable with essential functions such as Map front and center on a large screen.


SMART APPLIANCE POSTURE

These are household appliances that use touchscreens to control the hardware. The interface of the touchscreens are very simple and get right to the point of what functions are to be used for the product. They are simple with minimal navigation to provide quick and easy tasks for the user to get right to their specific goal.




 

Chapter 19: DESIGNING FOR MOBILE & OTHER DEVICES


ANATOMY OF MOBILE APPLICATIONS

This chapter of About Face is pretty long but discusses the importance of how multi-touch mobile devices (which are the most common modern mobile devices around) are formatted/structured.


MOBILE FORM FACTORS

There are three main form factors for multi-touch mobile devices; Handhelds, Tablets, and Mini-tablets.


HANDHELD FORMAT APPS

There are many structural patterns for handheld device applications (phones and media devices: 16:9 aspect ratio). Below is a list of patterns seen in handheld device applications with short descriptions of each.


Stacks: Primary pattern used by non-game mobile apps. Tall and narrow layouts that resemble a list like structure to fit the screen of most devices. Vertically organized with content area and a navigation bar and functions at either the top and/or bottom of the screen. (Example below provided by About Face)

Screen Carousels: An application that is navigated using a swipe left or swipe right to reveal the next/previous screen (card). Uses the entire screen as content area. These do not typically flow in a circle but end at some point on the left and right. A circular flow makes the navigation easier.

Orientation and Layout: Portrait or Landscape based on how the user holds the device. Portrait is typically used for applications that follow the Stack layout. Photo and Video applications usually adjust to either.



TABLET FORMAT APPS

Devices that are 9"-10" diagonally (iPads 4:3 ratio, Androids 16:9 ratio). Also rely on the stack pattern and have a lot more screen real estate to work with, providing room for more panes (tabs, navigation, action bars, etc.).


Index Pane: Lists content items, can have navigation and functions. In portrait mode they are accessed through a button and displayed as a (non)overlapping pane on the main content area.

Pop-Up Control Panels: These are panels that don't take up an entire area of the screen. They are part of the current screen you are on and are also usually attached to a control or object. (Example Below of Pro-Create provided by About Face)

Orientation-based Layout: When the tablet device rotates, the navigation on screen finds a new location either at the top, bottom, or sides of the screen and overlapping panes become adjacent to the main content pane.

Mobile vs. Desktop-like Layout: Try to avoid designing a layout for a tablet application that reflects the layout of a desktop application. You want the application to be larger and easier to function.

Hardware-like Control Layout: Mimicking physical hardware in an application. Using horizontal, vertical, and circular drag gestures as controls that look like real hardware. About Face gives a great example of a music production app called Positive Grid's Final touch.

MINI-TABLET FORMAT APPS

These are small tablets that have a 16:9 aspect ratio and support both screen orientations. It's right in the middle of tablet and phone which makes it difficult to design an application for it.

• Adjacent Panes: Landscape only, you can have two adjacent panes and a tab bar before it starts to get cramped. Portrait mode, you can have overlapping pop-ups and drawers.

• Tool Bars: Vertical toolbars are best.

• Lists: Grid, Swim Lane, and Card approaches are best.



OTHER IMPORTANT FACTORS TO CONSIDER FOR MOBILE DEVICE APPS

• Lists

• Grids

• Content Carousels

Swim Lanes: basically stacked carousels

Cards: Separate sections of content on an application. Example: Facebook post.

• Tab Bars

• Tab Carousels

• Navigation bars and Action bars

• Tool Bars and Palettes

• Menu Bars

Drawers: Hamburger Menus and panels that slide into the content area either by tapping on an object or dragging.

Tap to Reveal: tap the screen to reveal functions.

Searches: Voice, Auto-Complete, Tap-Ahead, Recent/Frequent, Auto-Suggest, Categorized Suggestions

• Sort and Filter




Thank you for reading!

View my User Interface Page for more!

94 views0 comments