Designing Mobile Interfaces

Designing Mobile Interfaces

by Steven Hoober, Eric Berkman
Released November 2011
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449394639

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

With hundreds of thousands of mobile applications available today, your app has to capture users immediately. This book provides practical techniques to help you catch—and keep—their attention. You’ll learn core principles for designing effective user interfaces, along with a set of common patterns for interaction design on all types of mobile devices.

Publisher resources

View/Submit Errata

Table of contents

  1. Preface
    1. Who This Book Is For
    2. What We Mean by “Mobile”
      1. What Type of Patterns We Will Cover
    3. What Is a Pattern?
    4. Where Did These Patterns Come From?
      1. Art, Graphic Design, and Experience
    5. Common Practice Versus Best Practice
    6. Reading the Patterns
      1. Names
      2. Problem
      3. Solution
      4. Variations
      5. Interaction Details
      6. Presentation Details
      7. Antipatterns
      8. Examples and Illustrations
    7. Successfully Designing with Patterns and Heuristics
      1. Avoiding the Heuristic Solution
      2. Using User-Centric Execution Principles
    8. Principles of Mobile Design
      1. Respect User-Entered Data
      2. Realize That Mobiles Are Personal
      3. Ensure That Lives Take Precedence
      4. Realize That Mobiles Must Work in All Contexts
      5. Use Your Sensors and Use Your Smarts
      6. Realize That User Tasks Usually Take Precedence
      7. Ensure Consistency
      8. Respect Information
    9. Safari® Books Online
    10. How to Contact Us
    11. Acknowledgments
  2. I. Page
    1. 1. Composition
      1. A Little Bit of History
      2. A Revolution Has Begun
      3. Composition Principles
      4. The Concept of a Wrapper
      5. Context Is Key
      6. Patterns for Composition
        1. Scroll
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Annunciator Row
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Notifications
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Titles
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        5. Revealable Menu
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        6. Fixed Menu
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        7. Home & Idle Screens
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        8. Lock Screen
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        9. Interstitial Screen
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        10. Advertising
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
      7. Summary
        1. Wrap-Up
        2. Pattern Reference Chart
          1. Chapter 1, “Composition”
        3. Additional Reading Material
  3. II. Components
    1. 2. Display of Information
      1. Look Around
      2. Types of Visual Information
      3. Classifying Information
      4. Organizing with Information Architecture
      5. Information Design and Ordering Data
      6. Patterns for Displaying Information
        1. Vertical List
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Infinite List
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Thumbnail List
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Fisheye List
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        5. Carousel
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        6. Grid
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        7. Film Strip
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        8. Slideshow
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        9. Infinite Area
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        10. Select List
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
    2. 3. Control and Confirmation
      1. Quiet, Please
      2. That Was Easy
      3. Understanding Our Users
      4. Control and Confirmation
      5. Patterns for Control and Confirmation
        1. Confirmation
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Sign On
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Exit Guard
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Cancel Protection
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        5. Timeout
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
    3. 4. Revealing More Information
      1. It’s Not Magic!
      2. Context Is Key
        1. Understanding Our Users with Norman’s Interaction Model
        2. Mapping
        3. Affordances
        4. Feedback
        5. Constraints
      3. Designing for Information
      4. Patterns for Revealing More Information
        1. Windowshade
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Pop-Up
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Hierarchical List
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Returned Results
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
      5. Summary
        1. Wrap-Up
        2. Pattern Reference Charts
          1. Chapter 2, “Display of Information”
          2. Chapter 3, “Control and Confirmation”
          3. Chapter 4, “Revealing More Information”
        3. Additional Reading Material
  4. III. Widgets
    1. 5. Lateral Access
      1. What a Mess!
        1. Navigation Structure
      2. Lateral Access and the Mobile Space
      3. Follow the Principles of Wayfinding and Norman’s Interaction Model
      4. Wayfinding
      5. Norman’s Interaction Model
        1. Feedback
        2. Mapping
        3. Constraints
      6. Patterns for Lateral Access
        1. Tabs
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Peel Away
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Simulated 3D Effects
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Pagination
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        5. Location Within
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
    2. 6. Drilldown
      1. Get Ready to Push!
      2. Maybe We Won’t Have to Push
      3. Drilldown and the Mobile Space
      4. Patterns for Drilldown
      5. When to Use Links, Buttons, and Icons
        1. Link
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Button
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Indicator
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Icon
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        5. Stack of Items
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        6. Annotation
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
    3. 7. Labels and Indicators
      1. Down Under and Backward
        1. Phone Numbers
        2. Gas Types and Pricing
        3. Date Format
      2. Understanding Our Users
        1. Users and Their Prior Knowledge
        2. Context of Use
      3. Labels and Indicators in the Mobile Space
        1. Visual Guidelines for Labels and Indicators in the Mobile Space
      4. Patterns for Labels and Indicators
        1. Ordered Data
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Tooltip
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Avatar
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Wait Indicator
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        5. Reload, Synch, Stop
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
    4. 8. Information Controls
      1. The Weilers, Version 1
      2. The Weilers, Version 2
      3. The Difference
      4. Information Controls in the Mobile Space
      5. Patterns for Information Control
        1. Zoom & Scale
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Location Jump
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Search Within
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Sort & Filter
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
      6. Summary
        1. Wrap-Up
        2. Pattern Reference Charts
          1. Chapter 5, “Lateral Access”
          2. Chapter 6, “Drilldown”
          3. Chapter 7, “Labels and Indicators”
          4. Chapter 8, “Information Controls”
        3. Additional Reading Material
  5. IV. Input and Output
    1. 9. Text and Character Input
      1. Slow Down, You’re Too Fast!
        1. An Improved Design?
        2. Failed Impact
      2. The Status Quo
      3. Use What’s Best for You
      4. Text and Character Input on Mobile Devices
      5. Patterns for Text and Character Input Controls
        1. Keyboards & Keypads
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Pen Input
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Mode Switches
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Input Method Indicator
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        5. Autocomplete & Prediction
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
    2. 10. General Interactive Controls
      1. Darkness
      2. That Sounds Like a Great Idea
        1. Make It Visible
        2. Mapping
        3. Affordances
        4. Provide Constraints
        5. Use Feedback
      3. Gestural Interactive Controls
      4. Patterns for General Interactive Controls
        1. Directional Entry
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Press-and-Hold
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Focus & Cursors
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Other Hardware Keys
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        5. Accesskeys
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        6. Dialer
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        7. On-Screen Gestures
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        8. Kinesthetic Gestures
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        9. Remote Gestures
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
    3. 11. Input and Selection
      1. The Wheels on the Bus Go Round and Round
      2. Mobile Trends Today
      3. Slow Down, Teen Texters!
      4. Input and Selection in the Mobile Space
      5. Patterns for Input and Selection
        1. Input Areas
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Form Selections
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Mechanical Style Controls
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Clear Entry
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
    4. 12. Audio and Vibration
      1. The Big Tooter
      2. The Big Tooter Today
      3. The Importance of Audition
      4. Auditory Classifications
        1. Warnings
        2. Alerts and Notifications
        3. Error Tones
        4. Voice Notifications
        5. Feedback Tones
      5. Audio Guidelines in the Mobile Space
        1. Signal-to-Noise Ratio Guidelines
        2. Speech Recognition Guidelines
      6. Audio Accessibility in the Mobile Space
        1. Accessibility Resources
      7. The Importance of Vibration
        1. Common Haptic Outputs on Mobile Devices
        2. Haptic Concerns
      8. Patterns for Audio and Vibration
        1. Tones
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Voice Input
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Voice Readback
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Voice Notifications
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        5. Haptic Output
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
    5. 13. Screens, Lights, and Sensors
      1. The Relationship
      2. The Breakup
      3. I’m Not “Everyman”
      4. Context of Use
        1. Outdoors
        2. Indoors
        3. Both
      5. Displays
        1. Screen Sizes
        2. Screen Resolutions
        3. Pixel Density
      6. Mobile Display Technology
        1. Retroreflectivity
        2. Input Overlays
      7. Sensors
      8. Patterns for Screens, Lights, and Sensors
        1. LED
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        2. Display Brightness Controls
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        3. Orientation
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
        4. Location
          1. Problem
          2. Solution
          3. Variations
          4. Interaction details
          5. Presentation details
          6. Antipatterns
      9. Summary
        1. Wrap-Up
        2. Pattern Reference Charts
          1. Chapter 9, “Text and Character Input”
          2. Chapter 10, “General Interactive Controls”
          3. Chapter 11, “Input and Selection”
          4. Chapter 12, “Audio and Vibration”
          5. Chapter 13, “Screens, Lights, and Sensors”
        3. Additional Reading Material
  6. V. Appendixes
    1. A. Mobile Radiotelephony
      1. An Introduction to Mobile Radiotelephony
        1. The Electromagnetic Spectrum
          1. History
          2. Legal and regulatory
          3. Early cellular
          4. Cells and backhaul
          5. The 2G networks
            1. GSM
            2. CDMA
        2. Other Networks and Concepts
          1. 2.5 and 3G
          2. Future networks
      2. An Introduction to Location Technologies
        1. Location Technologies
          1. Cell
          2. Sector
          3. Triangulation
          4. GPS telemetry
          5. WAAS
          6. AGPS
          7. WLANs and PANs
          8. Ask
        2. Key Topics in Implementing Location Services
          1. Location is not just GPS
          2. Vertical accuracy
          3. Precision versus accuracy
          4. Appropriateness of information
          5. Data integrity and reliability
          6. Local versus network storage
    2. B. Design Templates and UI Guidelines
      1. Drawing Tools and Templates
        1. Templates and Stencils
        2. Design Organizations
        3. Specific Operating Systems
          1. Android OS
          2. iOS
          3. MS Windows Phone 7
          4. Symbian Family (S40, S60, and Maemo)
        4. UI Guidelines
          1. Android (from Google and OEMs)
          2. Apple iOS
          3. HP Palm WebOS
          4. MeeGo
          5. Microsoft Windows CE, Windows Mobile, and Windows Phone
          6. RIM BlackBerry Smartphone
          7. QNX/Tablet
          8. Samsung Bada
          9. Symbian Family (S40 and S60)
        5. Feature Phones
          1. J2ME
          2. BREW
          3. Native operating systems
      2. Emulators
      3. Color Deficit Design Tools
        1. General Information on Color Deficits
        2. Types of Color Deficiency
          1. Common usability complaints among colorblind individuals
          2. Design patterns for users with color deficits
          3. Color deficit simulators
    3. C. Mobile Typography
      1. Introduction to Mobile Typography
        1. Challenges of Mobile Typography
          1. Technology
          2. Usability
        2. An Introduction to Typography
          1. Baselines and measurements
          2. Letter height and measurements
          3. Letterforms and their parts
          4. Families and styles
          5. Space: Kerning and leading
          6. Alignment
        3. Guidelines for Selecting a Typeface for Mobile and Small-Screen Devices
      2. Readability and Legibility Guidelines
        1. Message Display Characteristics and Legibility
          1. Message display readability
            1. Reading modes
            2. Language requires context
          2. Readability guidelines for message displays
      3. Typefaces for Screen Display
        1. Challenges of Mobile Typography Technology Today
        2. Digital Fonts Today
        3. Font Rendering Technologies
      4. Greeking
        1. Designing with Words
        2. Respect Names and Languages
          1. Seriously, no jokes
    4. D. Human Factors
      1. Human Factors and Physiology
        1. Sensation: Getting Information into Our Heads
          1. Collecting visual stimuli: How the eye works
          2. Visual acuity and the visual field
          3. Size of the stimulus: Visual angle
        2. Visual Perception
        3. Visual Information Processing
        4. Articulating Graphics
          1. Display elements are organized automatically
          2. Perceptual organization is influenced by knowledge
          3. Images are transformed incrementally
          4. Different visual dimensions are processed by separate channels
          5. Color is not perceived as a continuum
      2. Hearing
        1. How Our Hearing Works
          1. Measuring sound
      3. Brightness, Luminance, and Contrast
        1. Brightness
        2. Luminance
        3. Contrast
        4. Black Level
      4. General Touch Interaction Guidelines
        1. Targets
        2. Touch Area and the Centroid of Contact
        3. Bezels, Edges, and Size Cheats
      5. Fitts’s Law
    5. E. References
      1. Works Cited
      2. Additional Resources
        1. Wiki
        2. Books
  7. F. About the Authors
  8. Index
  9. About the Authors
  10. Colophon
  11. Copyright

Product information

  • Title: Designing Mobile Interfaces
  • Author(s): Steven Hoober, Eric Berkman
  • Release date: November 2011
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449394639