Design for Mobile - Online PDF

Interaction Design ISB36403 Design for Desktop, Mobile and Web PART #3: Designing for Mobile and Other Devices  Outline Anatomy of a Mobile App Mobile Navigation, Content, and Control Idioms Multi-Touch Gestures Inter-App Integrat...

Interaction Design ISB36403 Design for Desktop, Mobile and Web PART #3: Designing for Mobile and Other Devices  Outline Anatomy of a Mobile App Mobile Navigation, Content, and Control Idioms Multi-Touch Gestures Inter-App Integration Other Devices  Introduction The mobile device user experience changed forever in June of 2007, when Apple introduced the iPhone. iPhone replaced this mess of a user experience with:  A giant, high-resolution, multi-touchscreen, an OS that specified on-screen controls big enough for fingers to use.  A set of now-iconic gestural idioms that were relatively easy to discover and learn  A set of sensors delivering contextual information about orientation, location, ambient light, and movement that added an extraordinary level of intelligence to a new generation of mobile apps Same story with the iPad.  Anatomy of a Mobile App Mobile apps of transient posture. (vs. sovereign desktops apps)  Interaction: brief, intermittent, and focused on particular tasks.  The physical form factor of the mobile device. Even with high-resolution displays, the number & spacing of individual objects on the screen is limited. The solution is Zooming:  Add a layer of complexity and confusion.  Mobile Form Factors Handhelds:  Phones and media devices like the iPod Touch.  Tall, narrow 4 to 6 inches screens  Typically 16:9 aspect ratio with portrait orientation. Tablets:  Devices sporting 9-10 inch screens.  4:3 aspect ratio (Apple) or 16:9 aspect ratio (Google, Microsoft).  Android & Windows mostly landscape, Apple both orientations. Mini-tablets:  Devices sporting screens that are 7 to 8 inches diagonally.  4:3 aspect ratio (Apple) or 16:9 aspect ratio (Google, Microsoft).  Handheld Format Apps Stacks:  The primary pattern in most non-game mobile apps (esp. handheld).  Handheld Format Apps Screen carousels:  Top-level pattern that is most appropriate for a dashboard-like display:  Multiple instances or variants (navigate: swipe left or right).  Handheld Format Apps Orientation and layout:  Detect screen orientation (portrait or landscape)  Dynamically rearrange layout to better suit the current orientation.  Tablet Format Apps Stacks and index panes:  Vertically stacking a primary area & >1 tab, navigation, & action bars.  Extra real estate allows the addition of one or more supporting panes. Index panes can themselves have navigation and functions associated with them  Tablet Format Apps Pop-up control panels:  Tablet screens are large enough to support pop-up panels that don’t overlay the entire screen The Procreate digital painting app on iOS makes extensive use of pop-up control panels as a means of configuring the drawing tools in the app’s tool bar. These pop-up panels show their connection to the tool via a speech-balloon-like caret that emerges from the otherwise rectangular panel.  Tablet Format Apps Orientation-based layout:  Tablet apps need to be more concerned about orientation.  Rotating controls in place usually is an insufficient or undesirable  Mobile vs. Desktop-Like Layout High-resolution displays on modern touchscreen tablets rival those of many laptop and desktop displays It might be tempting to treat your tablet app like a shrunken, touch-enabled version of your desktop app. Not always a good idea.. Why? In some cases, it is possible.  Mobile vs. Desktop-Like Layout Steinberg’s Cubasis and Corel’s Pinnacle Studio are examples of media production apps that are well suited to a more complex layout that more closely resembles desktop apps.  Mobile vs. Desktop-Like Layout If your app is in this category, keep these principles in mind:  Tool bar, control panel, and menu items with areas that register taps (hit areas) and inter-item spacing properly scaled for finger use.  Drag and drop is prone to accidental drops on a touchscreen, so either avoid it or be forgiving of them.  Pop-up panels should point to where they came from when possible and have clearly labeled headers.  Insure function hierarchy so as to keep workflow as linear as possible. Put the user on a single path to accomplish a task whenever possible.  Complex layouts apps should use an orientation and stick to it, rather than trying to support both portrait and landscape.  Hardware-Like Control Layout For certain apps, interfaces that resemble hardware- based control surfaces appeal to users in that domain.  Allow horizontal or vertical drag gestures (and be consistent about their use) to operate rotary controls in addition to circular drag gestures.  Do not to let your key interactions be artificially limited by hardware metaphors.  Mini-Tablet Format Apps Not much room for finger-sized controls as on a full- sized tablet. Too much room for apps designed for phones to look aesthetically well proportioned. Navigation and layout strategies:  Adjacent panes: Max 2 adjacent panes (& perhaps 1 vertical tab bar).  Tool bars: Vertical tool bars may sometimes make more sense.  Lists: Single-column lists tend to look out of proportion on mini-tablets.  Pop-up versus full-screen-dialogs.  Outline Anatomy of a Mobile App Mobile Navigation, Content, and Control Idioms Multi-Touch Gestures Inter-App Integration Other Devices Mobile Navigation, Content, and Control Idioms Mobile applications share many controls with desktop and web applications Unique form factor and multi-touch input technology  unique set of idioms especially suited to mobile apps.  Browse Controls Most mobile apps are optimized for browsing. Mobile apps have developed a rich set of patterns around browsing through content:  Lists  Grids  Content carousels  Swimlanes  Cards  Lists Most popular pattern on handheld devices.  Tapping a content item in a list typically drills down a level in the hierarchy.  list views often work in conjunction with tab bars to provide access to multiple screens of content.  Lists can either be finite in length or allow infinite scrolling.  Grids Used to organize content such as apps, thumbnails, and function icons into regular rows and columns.  Grids Within an app, grid views (also called gallery views) often are used to present media objects.  One challenge with is making sure users understand how to navigate them.  Most apps that use grids as a primary navigation and selection mechanism.  In this app: the direction of scrolling is hinted by sizing the album art so that the bottom-most visible row is partly cut off.  Grids Apple’s Photos app uses a much tighter four-column grid for the Camera Roll, which also scrolls vertically.  Grids Grids also can scroll horizontally, as in Apple’s Music app when the iPhone is rotated to landscape orientation.  Content carousels Horizontal swipe gesture to navigate between similar full-screen layouts containing different data. Can be content, vertical or 3D carousels.  Swimlanes Mixture of the carousel concept and the grid.  Cards Combine text and visual media into nicely formatted chunks of information suited to the display’s limitations.  Self-contained interactive object combining media, text, web links, and social actions such as commenting, sharing, tagging, and adding media.  Cards are most often displayed in a scrolling vertical list, but they also lend themselves to grid, carousel, and swimlane layouts. Cards  Navigation and Tool Bars Bars are the primary mechanism for navigating to the different functional and content areas of handheld mobile apps.  Tab bars  more… controls  Tab carousels  nav bars and action bars  Tool bars and palettes  Vertical tool bars and palettes  Tool carousels  Menu bars: an idiom to avoid in mobile  Navigation and Tool Bars Tab Bars  Navigation and Tool Bars Vertical Tab Bars  Navigation and Tool Bars More… controls  Navigation and Tool Bars Tab carousels  Navigation and Tool Bars Nav bars & action bars  Navigation and Tool Bars This app uses: Vertical tool bars desktop-like menu bar Sliders embedded in its bottom tool bar  Navigation and Tool Bars This app uses: A carousel to let you select the tool. A secondary tool carousel for choosing a specific setting.  Drawers Provides access to a vertical list of navigational elements similar to tabs.  use minimal screen real estate by hiding in a panel that lives in a layer under the main content area.  The drawer icon is also called the hamburger menu icon.  Tapping a drawer item simultaneously swaps what is displayed in the content area and snaps the drawer back shut.  Additional controls may also live in the drawer.  Drawers Secondary-action drawers:  Replace a navigational tab bar or can be used to interact with a secondary set of objects in the app.  Drawers usually slide open from the left, but not always.  Examples…  Drawers Item-level drawers: Slide-to-reveal drawer and applied it to individual items in a list.  Difficult for users to discover unless some sort of visual cue is added to the list item.  The swiped item can be obscured when the drawer is open  The per-item swipe gesture means that other gestures become either confusing or impossible  Drawers Double drawers  Drawers Common advices: Limit the number of animated screen transitions. Drawers obstruct user engagement by hiding functionality?? Some people asks for drawers to be abandoned entirely. Hiding an entire nav. hierarchy behind a single icon button does have its problems Drawers provide a cleaner main interface with more room for content Making almost any function a swipe (and possibly a scroll) and a tap away. Tap-to-reveal and direct manipulation Tap-to-reveal controls Tap-to-reveal and direct manipulation Direct manipulation controls  Searching, Sorting, and Filtering Sorting and filtering Building search queries:  Voice search  Auto-complete  Tap-ahead  Recent/frequent searches  Auto-suggest  Categorized suggestions  Searching, Sorting, and Filtering Searching  Searching, Sorting, and Filtering Searching  Searching, Sorting, and Filtering Implicit sorting versus explicit searching Building search queries:  Voice search  Auto-complete  Tap-ahead  Recent/frequent searches  Auto-suggest  Categorized suggestions  Searching, Sorting, and Filtering Sorting & Filtering  Searching, Sorting, and Filtering Sorting & Filtering  Welcome and help screens Limited screen real estate Multi-touch interfaces center on the use of gestures to accomplish actions There is no hover state Popular idioms:  Guided tours: Use guided tours to orient first-time users.  Overlays: Use overlays to explicate gestures.  ToolTip overlays: used help screens of more complex authoring apps.  Outline Anatomy of a Mobile App Mobile Navigation, Content, and Control Idioms Multi-Touch Gestures Inter-App Integration Other Devices  Multi-Touch Gestures Tap to select, activate, or toggle Tap-and-hold Drag to scroll Drag to move Drag to control Swipe up/down Swipe left Swipe right Pinch in/out Rotate Multifinger swipes  Inter-App Integration Most standalone apps tend not to foster the useful integration of functionality and data between them. It’s unfortunate that phone manufacturers haven’t yet applied this kind of integration to the core suite of phone apps.  Outline Anatomy of a Mobile App Mobile Navigation, Content, and Control Idioms Multi-Touch Gestures Inter-App Integration Other Devices Inter-App Integration  Other Devices General design principles:  Don’t think of your product as a computer.  Integrate your hardware and software design.  Balance navigation with display density.  Let context drive the design.  Use modes judiciously, if at all.  Limit the scope.  Minimize input complexity. Q&A  Next Session Design for Desktop, Mobile and Web