book

Designing Mobile Interfaces

by Steven Hoober, Eric Berkman

November 2011

Intermediate to advanced

584 pages

18h 29m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Who This Book Is ForWhat We Mean by “Mobile”What Type of Patterns We Will CoverWhat Is a Pattern?Where Did These Patterns Come From?Art, Graphic Design, and ExperienceCommon Practice Versus Best PracticeReading the PatternsNamesProblemSolutionVariationsInteraction DetailsPresentation DetailsAntipatternsExamples and IllustrationsSuccessfully Designing with Patterns and HeuristicsAvoiding the Heuristic SolutionUsing User-Centric Execution PrinciplesPrinciples of Mobile DesignRespect User-Entered DataRealize That Mobiles Are PersonalEnsure That Lives Take PrecedenceRealize That Mobiles Must Work in All ContextsUse Your Sensors and Use Your SmartsRealize That User Tasks Usually Take PrecedenceEnsure ConsistencyRespect InformationSafari® Books OnlineHow to Contact UsAcknowledgments
A Little Bit of HistoryA Revolution Has BegunComposition PrinciplesThe Concept of a WrapperContext Is KeyPatterns for CompositionScrollProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsAnnunciator RowProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsNotificationsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsTitlesProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsRevealable MenuProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsFixed MenuProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsHome & Idle ScreensProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsLock ScreenProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsInterstitial ScreenProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsAdvertisingProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsSummaryWrap-UpPattern Reference ChartChapter 1, “Composition”Additional Reading Material
Look AroundTypes of Visual InformationClassifying InformationOrganizing with Information ArchitectureInformation Design and Ordering DataPatterns for Displaying InformationVertical ListProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsInfinite ListProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsThumbnail ListProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsFisheye ListProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsCarouselProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsGridProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsFilm StripProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsSlideshowProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsInfinite AreaProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsSelect ListProblemSolutionVariationsInteraction detailsPresentation detailsAntipatterns
Quiet, PleaseThat Was EasyUnderstanding Our UsersControl and ConfirmationPatterns for Control and ConfirmationConfirmationProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsSign OnProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsExit GuardProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsCancel ProtectionProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsTimeoutProblemSolutionVariationsInteraction detailsPresentation detailsAntipatterns
It’s Not Magic!Context Is KeyUnderstanding Our Users with Norman’s Interaction ModelMappingAffordancesFeedbackConstraintsDesigning for InformationPatterns for Revealing More InformationWindowshadeProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsPop-UpProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsHierarchical ListProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsReturned ResultsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsSummaryWrap-UpPattern Reference ChartsChapter 2, “Display of Information”Chapter 3, “Control and Confirmation”Chapter 4, “Revealing More Information”Additional Reading Material
What a Mess!Navigation StructureLateral Access and the Mobile SpaceFollow the Principles of Wayfinding and Norman’s Interaction ModelWayfindingNorman’s Interaction ModelFeedbackMappingConstraintsPatterns for Lateral AccessTabsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsPeel AwayProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsSimulated 3D EffectsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsPaginationProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsLocation WithinProblemSolutionVariationsInteraction detailsPresentation detailsAntipatterns

Get Ready to Push!Maybe We Won’t Have to PushDrilldown and the Mobile SpacePatterns for DrilldownWhen to Use Links, Buttons, and IconsLinkProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsButtonProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsIndicatorProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsIconProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsStack of ItemsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsAnnotationProblemSolutionVariationsInteraction detailsPresentation detailsAntipatterns
Down Under and BackwardPhone NumbersGas Types and PricingDate FormatUnderstanding Our UsersUsers and Their Prior KnowledgeContext of UseLabels and Indicators in the Mobile SpaceVisual Guidelines for Labels and Indicators in the Mobile SpacePatterns for Labels and IndicatorsOrdered DataProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsTooltipProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsAvatarProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsWait IndicatorProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsReload, Synch, StopProblemSolutionVariationsInteraction detailsPresentation detailsAntipatterns
The Weilers, Version 1The Weilers, Version 2The DifferenceInformation Controls in the Mobile SpacePatterns for Information ControlZoom & ScaleProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsLocation JumpProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsSearch WithinProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsSort & FilterProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsSummaryWrap-UpPattern Reference ChartsChapter 5, “Lateral Access”Chapter 6, “Drilldown”Chapter 7, “Labels and Indicators”Chapter 8, “Information Controls”Additional Reading Material
Slow Down, You’re Too Fast!An Improved Design?Failed ImpactThe Status QuoUse What’s Best for YouText and Character Input on Mobile DevicesPatterns for Text and Character Input ControlsKeyboards & KeypadsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsPen InputProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsMode SwitchesProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsInput Method IndicatorProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsAutocomplete & PredictionProblemSolutionVariationsInteraction detailsPresentation detailsAntipatterns
DarknessThat Sounds Like a Great IdeaMake It VisibleMappingAffordancesProvide ConstraintsUse FeedbackGestural Interactive ControlsPatterns for General Interactive ControlsDirectional EntryProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsPress-and-HoldProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsFocus & CursorsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsOther Hardware KeysProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsAccesskeysProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsDialerProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsOn-Screen GesturesProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsKinesthetic GesturesProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsRemote GesturesProblemSolutionVariationsInteraction detailsPresentation detailsAntipatterns
The Wheels on the Bus Go Round and RoundMobile Trends TodaySlow Down, Teen Texters!Input and Selection in the Mobile SpacePatterns for Input and SelectionInput AreasProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsForm SelectionsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsMechanical Style ControlsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsClear EntryProblemSolutionVariationsInteraction detailsPresentation detailsAntipatterns
The Big TooterThe Big Tooter TodayThe Importance of AuditionAuditory ClassificationsWarningsAlerts and NotificationsError TonesVoice NotificationsFeedback TonesAudio Guidelines in the Mobile SpaceSignal-to-Noise Ratio GuidelinesSpeech Recognition GuidelinesAudio Accessibility in the Mobile SpaceAccessibility ResourcesThe Importance of VibrationCommon Haptic Outputs on Mobile DevicesHaptic ConcernsPatterns for Audio and VibrationTonesProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsVoice InputProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsVoice ReadbackProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsVoice NotificationsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsHaptic OutputProblemSolutionVariationsInteraction detailsPresentation detailsAntipatterns
The RelationshipThe BreakupI’m Not “Everyman”Context of UseOutdoorsIndoorsBothDisplaysScreen SizesScreen ResolutionsPixel DensityMobile Display TechnologyRetroreflectivityInput OverlaysSensorsPatterns for Screens, Lights, and SensorsLEDProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsDisplay Brightness ControlsProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsOrientationProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsLocationProblemSolutionVariationsInteraction detailsPresentation detailsAntipatternsSummaryWrap-UpPattern Reference ChartsChapter 9, “Text and Character Input”Chapter 10, “General Interactive Controls”Chapter 11, “Input and Selection”Chapter 12, “Audio and Vibration”Chapter 13, “Screens, Lights, and Sensors”Additional Reading Material
An Introduction to Mobile RadiotelephonyThe Electromagnetic SpectrumHistoryLegal and regulatoryEarly cellularCells and backhaulThe 2G networksGSMCDMAOther Networks and Concepts2.5 and 3GFuture networksAn Introduction to Location TechnologiesLocation TechnologiesCellSectorTriangulationGPS telemetryWAASAGPSWLANs and PANsAskKey Topics in Implementing Location ServicesLocation is not just GPSVertical accuracyPrecision versus accuracyAppropriateness of informationData integrity and reliabilityLocal versus network storage
Drawing Tools and TemplatesTemplates and StencilsDesign OrganizationsSpecific Operating SystemsAndroid OSiOSMS Windows Phone 7Symbian Family (S40, S60, and Maemo)UI GuidelinesAndroid (from Google and OEMs)Apple iOSHP Palm WebOSMeeGoMicrosoft Windows CE, Windows Mobile, and Windows PhoneRIM BlackBerry SmartphoneQNX/TabletSamsung BadaSymbian Family (S40 and S60)Feature PhonesJ2MEBREWNative operating systemsEmulatorsColor Deficit Design ToolsGeneral Information on Color DeficitsTypes of Color DeficiencyCommon usability complaints among colorblind individualsDesign patterns for users with color deficitsColor deficit simulators
Introduction to Mobile TypographyChallenges of Mobile TypographyTechnologyUsabilityAn Introduction to TypographyBaselines and measurementsLetter height and measurementsLetterforms and their partsFamilies and stylesSpace: Kerning and leadingAlignmentGuidelines for Selecting a Typeface for Mobile and Small-Screen DevicesReadability and Legibility GuidelinesMessage Display Characteristics and LegibilityMessage display readabilityReading modesLanguage requires contextReadability guidelines for message displaysTypefaces for Screen DisplayChallenges of Mobile Typography Technology TodayDigital Fonts TodayFont Rendering TechnologiesGreekingDesigning with WordsRespect Names and LanguagesSeriously, no jokes
Human Factors and PhysiologySensation: Getting Information into Our HeadsCollecting visual stimuli: How the eye worksVisual acuity and the visual fieldSize of the stimulus: Visual angleVisual PerceptionVisual Information ProcessingArticulating GraphicsDisplay elements are organized automaticallyPerceptual organization is influenced by knowledgeImages are transformed incrementallyDifferent visual dimensions are processed by separate channelsColor is not perceived as a continuumHearingHow Our Hearing WorksMeasuring soundBrightness, Luminance, and ContrastBrightnessLuminanceContrastBlack LevelGeneral Touch Interaction GuidelinesTargetsTouch Area and the Centroid of ContactBezels, Edges, and Size CheatsFitts’s Law
Works CitedAdditional ResourcesWikiBooks

Content preview from Designing Mobile Interfaces

Index

A note on the digital index

A link in an index entry is displayed as the section title in which that entry appears. Because some sections have multiple index markers, it is not unusual for an entry to have several links to the same section. Clicking on any link will take you directly to the place in the text in which the marker appears.