book

Designing Interfaces, 3rd Edition

by Jenifer Tidwell, Charles Brewer, Aynne Valencia

December 2019

Intermediate to advanced

600 pages

14h 4m

English

O'Reilly Media, Inc.

Book available

Read now

Unlock full access

Why We Wrote This BookDesign Patterns Remain RelevantSoftware Is Systems NowFocus: Screen-Based, Web, and MobileWhat’s Not in This EditionWho This Book Is ForHow This Book Is OrganizedIntroduction and Design DiscussionThe PatternsConclusionConventions Used in This BookO’Reilly Online LearningHow to Contact UsAcknowledgments
ContextKnow Your AudienceInteractions Are ConversationsMatch Your Content and Functionality to Your AudienceSkill LevelGoals: Your Interface Is Just a Means to Their EndsAsk WhyDesign’s Value: Solve the Right Problem, and Then Solve It RightResearch: Ways to Understand Context and GoalsDirect ObservationCase StudiesSurveysPersonasDesign Research Is Not Marketing ResearchThe Patterns: Cognition and Behavior Related to Interface DesignSafe ExplorationInstant GratificationSatisficingChanges in MidstreamDeferred ChoicesIncremental ConstructionHabituationMicrobreaksSpatial MemoryProspective MemoryStreamlined RepetitionKeyboard OnlySocial Media, Social Proof, and CollaborationConclusion
PurposeDefinitionDesigning an Information Space for PeopleApproachSeparate Information from PresentationMutually Exclusive, Collectively ExhaustiveWays to Organize and Categorize ContentAlphabeticalNumberTimeLocationHierarchyCategory or FacetDesigning for Task and Workflow-Dominant AppsMake Frequently Used Items Visible“Chunk Up” Jobs into a Sequence of StepsMultiple Channels and Screen Sizes Are Today’s RealityDisplay Your Information as CardsDesigning a System of Screen TypesOverview: Show a List or Grid of Things or OptionsFocus: Show One Single ThingMake: Provide Tools to Create a ThingDo: Facilitate a Single TaskThe PatternsFeature, Search, and BrowseMobile Direct AccessStreams and FeedsMedia BrowserDashboardCanvas Plus PaletteWizardSettings EditorAlternative ViewsMany WorkspacesHelp SystemsTagsConclusion
Understanding the Information and Task SpaceSignpostsWayfindingNavigationGlobal NavigationUtility NavigationAssociative and Inline NavigationRelated ContentTagsSocialDesign ConsiderationsSeparate the Navigation Design from the Visual DesignCognitive LoadKeep Distances ShortNavigational ModelsHub and SpokeFully ConnectedMultilevel or TreeStep by StepPyramidFlat NavigationThe PatternsClear Entry PointsMenu PagePyramidModal PanelDeep LinksEscape HatchFat MenusSitemap FooterSign-In ToolsProgress IndicatorBreadcrumbsAnnotated Scroll BarAnimated TransitionConclusion
The Basics of LayoutVisual HierarchyWhat Makes Things Look Important?Four Important Gestalt PrinciplesVisual FlowUsing Dynamic DisplaysResponsive EnablingProgressive DisclosureUI RegionsThe PatternsVisual FrameworkCenter StageGrid of EqualsTitled SectionsModule TabsAccordionCollapsible PanelsMovable Panels
The Basics of Visual DesignVisual HierarchyCompositionColorTypographyReadabilityEvoking a FeelingImagesVisual Design for Enterprise ApplicationsAccessibilityRanges of Visual StylesSkeuomorphicIllustratedFlat DesignMinimalisticAdaptive/ParametricConclusion
The Challenges and Opportunities of Mobile DesignTiny Screen SizesVariable Screen WidthsTouch ScreensDifficulty of Typing TextChallenging Physical EnvironmentsLocation AwarenessSocial Influences and Limited AttentionHow to Approach a Mobile DesignSome Worthy ExamplesThe PatternsVertical StackFilmstripTouch ToolsBottom NavigationCollections and CardsInfinite ListGenerous BordersLoading or Progress IndicatorsRichly Connected AppsMake It Mobile
Use Cases for ListsBack to Information ArchitectureWhat Are You Trying to Show?The PatternsTwo-Panel Selector or Split ViewOne-Window DrilldownList InlayCardsThumbnail GridCarouselPaginationJump to ItemAlpha/Numeric ScrollerNew-Item RowLists Abound
Tap, Swipe, and PinchRotate and ShakeButtonsMenu BarsPop-Up MenusDrop-Down MenusToolbarsLinksAction PanelsHover ToolsSingle-Clicking Versus Double-Clicking ItemsKeyboard ActionsShortcutsTab OrderDrag-and-DropTyped CommandsAffordanceDirect Manipulation of ObjectsThe PatternsButton GroupsHover or Pop-Up ToolsAction PanelProminent “Done” Button or Assumed Next StepSmart Menu ItemsPreviewSpinners and Loading IndicatorsCancelabilityMultilevel UndoCommand HistoryMacrosConclusion
The Basics of Information GraphicsOrganizational Models: How Is This Data Organized?Preattentive Variables: What’s Related to What?Navigation and Browsing: How Can I Explore This Data?Sorting and Rearranging: Can I Rearrange This Data to See It Differently?Searching and Filtering: How Can I See Only the Data That I Need?The Actual Data: What Are the Specific Data Values?The PatternsDatatipsData SpotlightDynamic QueriesData BrushingMulti-Y GraphSmall MultiplesThe Power of Data Visualization

The Basics of Form DesignForm Design Continues to EvolveFurther ReadingThe PatternsForgiving FormatStructured FormatFill-in-the-BlanksInput HintsInput PromptPassword Strength MeterAutocompletionDrop-down ChooserList BuilderGood Defaults and Smart PrefillsError MessagesConclusion
UI SystemsAn Example Component-Based UI System: Microsoft’s FluentAtomic Design: A Way of Designing SystemsOverviewThe Atomic Design HierarchyUI FrameworksOverviewBenefitsThe Rise of UI FrameworksA Look at Selected UI FrameworksConclusion
The Ingredients: Smart SystemsConnected DevicesAnticipatory SystemsAssistive SystemsNatural User InterfacesConclusion

Overview

Designing good application interfaces isn’t easy now that companies need to create compelling, seamless user experiences across an exploding number of channels, screens, and contexts. In this updated third edition, you’ll learn how to navigate through the maze of design options. By capturing UI best practices as design patterns, this best-selling book provides solutions to common design problems.

You’ll learn patterns for mobile apps, web applications, and desktop software. Each pattern contains full-color examples and practical design advice you can apply immediately. Experienced designers can use this guide as an idea sourcebook, and novices will find a road map to the world of interface and interaction design.