ISB36403 Interaction Design: Mobile Focus

Interaction Design ISB36403

• Course focuses on design for desktop, mobile, and web, specifically 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

• June 2007's iPhone revolutionized mobile UX.
• iPhone introduced large, high-resolution multi-touchscreens, with on-screen controls sized for finger use.
• Introduced a set of intuitive, easily-learned gestural idioms.
• Leveraged sensors for contextual information (orientation, location, light, movement), improving app intelligence.
• iPad followed a similar design approach.

Anatomy of a Mobile App

• Mobile apps have transient interactions, brief and intermittent, focusing on specific tasks.
• Limited screen space necessitates zooming, increasing complexity and potential confusion.

Mobile Form Factors

• Handhelds:
  • Small devices (iPod Touch-like)
  • Tall and narrow screens (4-6 inches)
  • Typically 16:9 aspect ratio, portrait orientation
• Tablets:
  • Larger (9-10 inch) screen size
  • 4:3 or 16:9 aspect ratio
  • Often landscape orientation, sometimes portrait
• Mini-tablets:
  • Smaller than tablets (7-8 inches)
  • Similar aspect ratios to handheld and tablets

Handheld Format Apps

• Stacks: Common layout pattern, arranging elements vertically.
• Screen carousels: Horizontal scrolling displays related content in full-screen views.
• Orientation and layout: Apps should dynamically adjust for portrait and landscape modes.

Tablet Format Apps

• Stacks and index panes: Vertical stacking of primary content with additional panes for extra functionality.
• Pop-up control panels: Non-overlaying panels to configure tools.
• Orientation-based layout: Apps need to respond dynamically to orientation changes.

Mobile vs. Desktop-Like Layout

• High-resolution tablet screens match laptop/desktop displays.
• Treating tablet apps as shrunken desktop versions may not be effective.
• Certain apps, like media production software, can benefit from a complex desktop-like layout.

Mobile vs. Desktop-Like Layout: Design Principles for Complex Layouts

• Organize toolbars, control panels, and menus with appropriate spacing for finger interaction.
• Offer alternative methods for drag-and-drop to avoid accidental drops on touchscreens.
• Clearly label and connect pop-up menus back to their associated elements.
• Design a linear workflow to keep user tasks clear and easy to accomplish.
• Optimize for a single orientation and stick to it, rather than supporting both.

Hardware-Like Control Layout

• Interfaces resembling hardware (e.g., rotary controls, drag gestures) appeal to users familiar with those types of interactions.
• Avoid limiting UI by adhering too strictly to hardware metaphors.

Mini-Tablet Format Apps

• Limited space reduces options for prominent controls.
• Consider vertically oriented toolbars instead of horizontal or top-bottom controls.
• Lists and single-column layouts often appear out of proportion on mini-tablets.

Mobile Navigation, Content, and Control Idioms

• Many mobile controls are similar to desktop/web apps.
• Unique form factors and multi-touch inputs lead to a new set of design idioms suited for mobile apps.

Browse Controls

• Mobile apps are designed for browsing content.
• Popular browsing patterns include lists, grids, content carousels, swimlanes, and cards.

Lists

• Navigating lists in mobile apps often works by drilling down hierarchy levels.
• Lists work with tab bars or provide infinite scrolling.

Grids

• Used for visually organizing content (e.g., app icons, thumbnails).
• Galleries often represent grid-based content.
• Many apps use infinite scrolling to manage grid-based data.
• Apple's Photos app uses grids.

Content Carousels

• Swiping horizontally to navigate full-screen layouts with different data.
• Carousels may be content or 3D.

Swimlanes

• A mix of carousels and grids, navigating different full-screen layouts.

Cards

• Combining text and visual media in clearly formatted chunks.
• Commonly used for displaying information in a vertically scrolling list.

Navigation and Tool Bars

• Bars enable navigation between app features and content.
• Commonly used control types include tab bars, tab carousels, navigation bars, action bars, and tool bars.
• Vertical toolbars, desktop-like menus, and embedded toolbars are also viable.
• Carousels let users easily choose a tool or setting.

Drawers

• Vertical lists providing access.
• Use minimal screen space by hiding elements.
• Tapping a drawer swaps content and closes it.
• Can be used as secondary action, replacing the tab bar, or as an item-level drawer.
• Double drawers are possible and may help to declutter screen real estate.

Tap-to-reveal and Direct Manipulation Controls

• Users tap to reveal associated controls.
• Controls are often positioned directly within the main display for immediate interaction.

Searching, Sorting, and Filtering

• Mobile apps use voice search, auto-complete, tap-ahead, and recent/frequent search history to help with search queries.
• Sorting and filtering common functions to help refine results.

Welcome and Help Screens

• Limited screen real estate requires new techniques.
• Multi-touch interactions emphasize gestures.
• Replacing hover controls require alternative help mechanisms.
• Often feature guided tours, overlays, and tooltips.

Other Devices

• Design involves thinking of hardware as an essential design feature.
• The hardware/software integration should balance navigation and display density.
• Designers should incorporate context into the design.
• Designers should keep the design scope limited to avoid exceeding capabilities.

Q&A, Next Session

• A session to answer questions and prepare for the next session of the course.
• The course continues with topics about the design of desktop, mobile, and web applications.

Explore the principles of interaction design with a focus on mobile platforms in ISB36403. This quiz covers the anatomy of mobile apps, multi-touch gestures, and integration across different devices. Enhance your understanding of effective mobile user experience and design techniques.