Index
A
- accessibility
- in enterprise or desktop applications, Accessibility
- scrolling pop-up panels and, How
- tab ordering and, Tab Order
- Accordion pattern
- about, What-What
- Collapsible Panels pattern and, Use when
- in dynamic displays, Scroll Bars
- List Inlay pattern and, How
- navigation and, Bring steps together
- showing lists organized into categories, “How can I show a list that’s organized into categories or hierarchies?”
- Titled Sections pattern and, How
- Ace Hardware website, Commerce- centric websites
- action and command patterns, The Patterns-Conclusion
- action history stack, Design an undo or action history stack
- Action Panel pattern
- actions and commands
- about, Doing Things: Actions and Commands
- affordance for, Affordance
- direct manipulation of objects, Direct Manipulation of Objects
- drag-and-drop actions, Drag-and-Drop
- drop-down menus and, Drop-Down Menus
- keyboard actions, Keyboard Actions
- rotate and shake, Rotate and Shake
- single-clicking versus double-clicking items, Single-Clicking Versus Double-Clicking Items
- tap, swipe, and pinch, Tap, Swipe, and Pinch
- typed commands, Typed Commands
- using action panels, Action Panels
- using buttons, Buttons
- using hover tools, Hover Tools
- using links, Links
- using menu bars, Menu Bars
- using pop-up menus, Pop-Up Menus
- using toolbars, Toolbars
- activity streams, How
- adaptive/parametric visual design, Adaptive/Parametric-Conclusion
- Adobe Acrobat, managing and editing documents, Manage and edit media assets
- Adobe Bridge
- Alternative Views pattern and, Why
- filters in browsing interface, The browsing interface
- managing and editing media assets, Manage and edit media assets
- Adobe Creative Cloud
- Adobe Illustrator
- Adobe Lightroom
- Adobe Photoshop
- Canvas Plus Palette pattern and, How, Flat Navigation
- Drop-down Chooser pattern and, Examples
- Help Systems pattern and, In-screen help: labels and tool tips
- launching from Adobe Bridge, The single-item view
- Streamlined Repetition pattern and, Streamlined Repetition
- Adobe Photoshop CC
- Adobe Premier Rush interface, affordances in, Direct Manipulation of Objects
- Adobe User Forums, Online community
- aesthetics and visual design, Visual Style and Aesthetics
- (see also visual design)
- affordance in interface design, Affordance
- AIGA website, Menu Page pattern, How, Examples
- Airbnb
- Cards pattern on website and mobile app, Examples
- Carousel pattern and, Examples
- Modal Panel pattern on website, Examples
- Password Strength Meter pattern and, Examples
- Prominent “Done” Button pattern on website, Examples
- search with faceted filters, Search with facets and filters
- Sign-In Tools pattern on website, Examples
- Structure Format pattern in security code form, Examples
- AirVisual application, Flat Design
- alignment
- and grid in screen layout, Alignment and grid
- continuity and closure, Closure
- Gestalt principles behind, Four Important Gestalt Principles
- paragraph, Paragraph alignment
- spacing and, in Visual Framework pattern, How
- Titled Sections pattern and, Examples
- in visual hierarchy, Alignment
- AllTrails app, Data Brushing pattern in, Examples
- Alpha/Numeric Scroller pattern
- about, What-What
- use cases, “How can I manage a very long list?”
- alphabetical ordering of content, Alphabetical
- Alternative Views pattern, Focus: Show One Single Thing, What-What
- Amazon website
- Autocompletion pattern and, Autocompletion
- Bottom Navigation pattern on mobile website, Examples
- Carousel pattern on Amazon Books, Examples
- faceted classification, Category or Facet
- Settings Editor pattern and, Examples
- Titled Sections pattern and, Examples
- American Red Cross website, Fat Menus pattern and, Examples
- Android OS
- Autocompletion pattern in Search, Examples
- Google Play store, loading indicator, Examples
- Google Play store, Prominent “Done” Button and, Examples
- Material UI framework, Materialize
- Microsoft Fluent date picker, An Example Component-Based UI System: Microsoft’s Fluent
- touch screens, links and buttons on, Touch Screens
- angles and curves in visual design, Angles and curves
- Animated Transition pattern
- about, The Patterns, What-Further Reading
- Hover Tools pattern and, How
- List Inlay pattern and, How
- animation
- bringing into interface design, additional resources for, Further Reading
- in Spinners and Loading Indicators pattern, How
- Annotated Scroll Bar pattern
- about, The Patterns, What-What
- Alpha/Numeric Scroller pattern and, Why
- Anthropologie website, Pagination pattern, Examples
- anticipatory systems, Anticipatory Systems
- Apple
- Input Hints pattern on checkout screen, Examples
- Touch ID service on iPhones, Examples
- UI typefaces, Tracking and kerning
- Apple Health app
- bold colorful information graphics on, Minimalistic
- Dynamic Queries pattern and, Example
- Apple iMovie, managing and editing media assets, Manage and edit media assets
- Apple iOS (see iOS)
- Apple iPad (see iPad)
- Apple Keynote
- Apple Mail, Autocompletion pattern in, Examples
- Apple Measure app, Adaptive/Parametric
- Apple News application, Collapsible Panels pattern, Examples
- Apple Notes, Touch Tools pattern, Examples
- Apple Photos, The browsing interface
- One-Window Drilldown pattern and, Manage and edit media assets
- Preview pattern and, Examples
- Two-Panel Selector pattern and, Examples
- Apple Safari browser autocomplete, Examples
- Apple TV
- browsing a collection of objects, Browse a collection of objects
- Grid of Equals pattern and, Examples
- Apple Wallet, skeuomorphic visual design in, Skeuomorphic
- assistive systems, Assistive Systems
- associative navigation, Associative and Inline Navigation
- Assumed Next Step pattern (see Prominent “Done” Button pattern)
- Atlantic, The
- Atlas of Emotions, Data Spotlight pattern in, What
- Atomic Design, Atomic Design: A Way of Designing Systems-Pages
- hierarchy, The Atomic Design Hierarchy
- principles of, Overview
- atoms (Atomic Design), Atoms
- autocompletion in form input, The Basics of Form Design
- Autocompletion pattern, Autocompletion-What
- Autodesk Sketchbook app, Generous Borders pattern, Examples
- axes (information graphics), The Actual Data: What Are the Specific Data Values?
- Axure RP Pro, Canvas Plus Palette pattern in, Examples
B
- B&H Photo website
- backgrounds
- blocks of contrasting color in Titled Sections pattern, How
- dark versus light, Dark versus light background
- distinguishing importance with background color, Background color
- for enterprise applications, Visual Design for Enterprise Applications
- high versus low contrast on, High versus low contrast
- batch automation in Photoshop, Examples
- BBC News iPhone app, Examples
- behavioral patterns, The Patterns: Cognition and Behavior Related to Interface Design-Social Media, Social Proof, and Collaboration
- Changes in Midstream, Changes in Midstream
- Deferred Choices, Deferred Choices
- Habituation, Habituation-Habituation
- Incremental Construction, Incremental Construction
- Instant Gratification, Instant Gratification
- Keyboard Only, Keyboard Only
- Microbreaks, Microbreaks
- Prospective Memory, Prospective Memory
- Safe Exploration, Safe Exploration
- Satisficing, Satisficing
- social media, social proof, and collaboration, Social Media, Social Proof, and Collaboration
- Spatial Memory, Spatial Memory
- Streamlined Repetition, Streamlined Repetition
- Bitmoji app, Preview pattern, Examples
- Bloom application, minimal design in, Minimalistic
- Blueprint UI Toolkit, Blueprint-UIkit
- Booking.com
- flat design in mobile app, Flat Design
- mobile web and mobile iOS app, Some Worthy Examples
- bookmarks, Deep Links pattern and, Why
- Bootstrap UI framework
- components in, Bootstrap-Foundation
- spinner component, customizable, Examples
- borders
- buttons in Button Groups, How
- in enterprise applications, Visual Design for Enterprise Applications
- Generous Borders pattern, What-What
- hover tools and, How
- Bottom Navigation pattern, The Patterns, What-What
- bottom-up approach to building interfaces, Break it down
- boxes in Titled Sections pattern, How, Examples
- Breadcrumbs pattern
- about, The Patterns, What-What
- Feature, Search, and Browse pattern and, How
- Visual Framework pattern and, How
- British Airways website, Task-centric websites
- brushing or selecting data, How
- (see also Data Brushing pattern)
- builder-style interfaces, Incremental Construction
- building up in Atomic Design, Build it up
- business collaboration, social media technology in, Business collaboration, Business collaboration
- Button Groups pattern
- about, What-What
- Action Panel pattern and, Why
- in media browsers, The single-item view
- buttons, Buttons
- on Drop-down Chooser panel, How
- Smart Menu Items pattern and, The Patterns
- Spatial Memory pattern and, Spatial Memory
- in Vertical Stack pattern, How
- BuzzFeed News website, Streams and Feeds pattern on, News/content streams
C
- calls to action, Visual Flow
- Calm app, minimal design in, Minimalistic
- Cancelability pattern, The Patterns
- Canvas Plus Palette pattern
- about, Make: Provide Tools to Create a Thing, What-What
- flat navigation with, Flat Navigation
- Cards pattern, Display Your Information as Cards
- about, What-What
- list display considerations, “How can I show a list of items that have heavy visuals?”
- Carousel pattern
- about, What-What
- Alternative Views pattern and, How
- list display considerations, “How can I show a list of items that have heavy visuals?”
- in mobile designs, The Patterns
- case studies, Case Studies
- Cash app, flat design in, Flat Design
- category or facet, organizing content by, Category or Facet
- Center Stage pattern
- about, Layout, What-Examples
- Action Panel pattern and, Putting the Action Panel on the UI
- Feature, Search, and Browse pattern and, How
- form design and, The Patterns
- Changes in Midstream pattern, Changes in Midstream
- checkboxes, List Builder pattern and, Use when
- Chinnathambi, Kirupa, Further Reading
- Chrome browser
- Chrome developer tools
- chronological order, Time
- chunking content
- chunking tasks, “Chunking” the task
- (see also sequencing)
- Cinema 4D application, Many Workspaces pattern in, Examples
- Citizen app, Richly Connected Apps pattern, Examples
- clean layout, Layout of Screen Elements
- Clear Entry Points pattern, Wayfinding, What-What
- Clear Todos app, minimal design in, Minimalistic
- Cleveland, William, How
- closure (Gestalt principle), Closure
- CNN
- code editors, autocompletion in, Why
- cognitive concerns, applications used in high-stress situations, Accessibility
- cognitive load of navigation, Cognitive Load
- collaboration, Social Media, Social Proof, and Collaboration
- Collapsible Panels pattern
- Collections and Cards pattern
- color, Color-Typography
- combinations of hues, Combinations of hues
- cues followed by users more efficiently, Satisficing
- dark versus light background, Dark versus light background
- in data brushing, How
- distinguishing importance with background color, Background color
- in enterprise applications, Visual Design for Enterprise Applications, Accessibility
- high versus low contrast, High versus low contrast
- making text easier to read, Color
- not relying on color alone to indicate important information, Don’t rely on color alone
- as preattentive variable, Preattentive Variables: What’s Related to What?, Preattentive Variables: What’s Related to What?
- red associated with errors, How
- references and resources on, Don’t rely on color alone
- saturated versus unsaturated, Saturated versus unsaturated
- texture in visual design and, Texture and rhythm
- in Titled Sections pattern, How
- Visual Framework pattern and, How
- warm versus cool, Warm versus cool
- Command History pattern
- about, The Patterns, Undoable actions-What
- Macros pattern and, Use when
- command-line interfaces (CLIs), Typed Commands, Use when
- commerce-centric websites, Feature, Search, and Browse pattern, Commerce- centric websites
- composition
- about, Composition
- angles and curves in visual design, Angles and curves
- connected devices, Connected Devices
- consistency in Atomic Design, Consistency
- Constantine, Larry L., Design an undo or action history stack
- content, Organizing the Content: Information Architecture and Application Structure
- (see also organizing content; organizing content patterns)
- matching to your audience, Match Your Content and Functionality to Your Audience
- content-centric websites, Feature, Search, and Browse pattern, Content-centric websites
- context menus, Pop-Up Menus
- (see also pop-up menus)
- context, human, for design intent, Context
- continuity (Gestalt principle), Continuity
- Continuous Scrolling pattern
- Pagination pattern and, Use when
- showing long lists, “How can I manage a very long list?”
- controls, The Patterns
- (see also form and control paterns; forms)
- for dynamic queries, How
- Cooper, Alan, How
- Craigslist website, Menu Page pattern and, What
- CrimeMapping website, Examples
- crowded designs, Spaciousness and crowding
- Crumlish, Christian, Social Media, Social Proof, and Collaboration, Social
- Crunchbase website, search with faceted filters, Search with facets and filters
- Csikszentmihalyi, Mihaly, Incremental Construction
- CSS frameworks (see UI frameworks)
- CSS pages, alternative, How
- cultural references in visual design, Cultural references
- Curbed website, Escape Hatch pattern and, Examples
- curves in visual design, Angles and curves
D
- Dashboard pattern, What-Examples
- Data Brushing pattern
- about, Searching and Filtering: How Can I See Only the Data That I Need?, What-What
- Dynamic Queries pattern and, How
- data brushing technique, The Actual Data: What Are the Specific Data Values?
- data presentation patterns, The Patterns
- Data Spotlight pattern
- data visualization, power of, The Power of Data Visualization
- Datatips pattern
- Deep Links pattern, What, What
- Deep-Linked State pattern, Focus: Show One Single Thing
- Deferred Choices pattern, Deferred Choices
- density, Density
- desktop applications
- Accordion pattern in, Why
- responsive design example, How
- visual design and, Visual Design for Enterprise Applications
- desktops, Spatial Memory pattern and, Spatial Memory
- dialog boxes, Wayfinding
- (see also modal dialog boxes)
- Drop-down Chooser pattern and, How
- DiffMerge application, Examples
- direct manipulation of screen components, Direct Manipulation of Objects
- direct observation, Direct Observation, Streamlined Repetition
- display typefaces, Display
- Done button, Use when
- (see also Prominent “Done” Button pattern)
- double-clicking items, Single-Clicking Versus Double-Clicking Items
- drag-and-drop action, Drag-and-Drop
- in fully interactive lists, What Are You Trying to Show?
- List Builder pattern and, How
- Drasner, Sarah, Further Reading
- drill-down technique, “When the user selects an item from a list, where should I show the details of that item?”
- (see also One-Window Drilldown pattern)
- information graphics considerations, Navigation and Browsing: How Can I Explore This Data?
- Drop-down Chooser pattern
- about, The Patterns, What-What
- Hover Tools pattern and, Examples
- drop-down lists in autocompletion, Examples
- drop-down menus, Drop-Down Menus
- Hover Tools pattern as alternative to, How
- Dropbox, Action Panel pattern in, Examples
- Drupal application, multiselect list builder widget, Examples
- dynamic displays, Using Dynamic Displays
- Dynamic Queries pattern, Searching and Filtering: How Can I See Only the Data That I Need?, What-What
- dynamic UIs, “Chunking” the task
E
- eBay website
- ecommerce sites, patterns from systems perspective, Beyond and Behind the Screen
- The Economist, Show Your Stripes information graphic, The Power of Data Visualization
- email applications
- autocompletion in, Why
- autocompletion in Apple Mail, Examples
- autocompletion in Gmail, Examples
- housekeeping to maintain order, Microbreaks
- emphasizing small items, Emphasizing small items
- encoding, Preattentive Variables: What’s Related to What?
- Eno, Brian, Minimalistic
- enterprise applications, visual design and, Visual Design for Enterprise Applications
- accessibility, Accessibility
- environmental clues, navigation and, Wayfinding
- Epicurious website, Task-centric websites
- search with faceted filters, Search with facets and filters
- Error Messages pattern
- about, The Basics of Form Design, What-Conclusion
- form design and, The Patterns
- Escape Hatch pattern
- about, Wayfinding, What-What
- design considerations, Satisficing
- flat navigational model and, Flat Navigation
- ESPN, Vertical Stack in mobile site, Examples
- Etsy website, Paginaton pattern, Examples
- Eventbrite app, Examples
- illustration in, Illustrated
- Evernote application, using tags, Examples
- Expedia website
F
- Facebook website
- Infinite List pattern and, How, Examples
- online communities on, Online community
- photo album page, Pyramid pattern, Examples
- Settings Editor pattern and, Examples
- Streams and Feeds pattern and, Social streams
- faceted filters, Search with facets and filters
- facets, organizing content by, Category or Facet
- Fandango mobile app, Good Defaults pattern, Examples
- Fat Menus pattern
- about, What-What
- navigation in multilevel sites, Multilevel or Tree
- Feature, Search, and Browse pattern, What-What
- about, Overview: Show a List or Grid of Things or Options
- on content-centric websites, Content-centric websites
- searching with facets and filters, Search with facets and filters
- on task-centric websites, Task-centric websites
- Few, Stephen, Examples
- Fill-in-the-Blanks pattern, What-What
- Filmstrip pattern
- filtering data
- Fill-in-the-Blanks pattern and, How
- in information graphics, Searching and Filtering: How Can I See Only the Data That I Need?-Searching and Filtering: How Can I See Only the Data That I Need?
- filters
- in Adobe Bridge browsing interface, The browsing interface
- searching with, Search with facets and filters
- Find and Replace dialog boxes, Streamlined Repetition
- flat design, Flat Design-Minimalistic
- flat navigational model, Flat Navigation
- Flipboard website, Streams and Feeds pattern on, News/content streams
- floating labels in forms, Floating labels
- input prompts versus, Not the same as floating labels
- Florence.co.uk website, illustrations in, Illustrated
- flow, state of, Incremental Construction
- Font Book app, Jump to Item pattern, What
- fonts, Typography
- (see also typography)
- font pairing, Font pairing
- in Titled Sections pattern, How
- Visual Framework pattern and, How
- Forgiving Format pattern
- form and control patterns, The Patterns-Conclusion
- Autocompletion, Autocompletion-What
- Drop-down Chooser, What-What
- Error Messages, What-Conclusion
- Fill-in-the-Blanks, What-What
- Forgiving Format, What-What
- Good Defaults and Smart Prefills, What-What
- Input Hints, What-What
- Input Prompt, What-What
- List Builder, What-What
- Password Strength Meter, What-Autocompletion
- Structured Format, What-What
- forms
- about, Getting Input from Users: Forms and Controls
- design basics, The Basics of Form Design-The Basics of Form Design
- further reading on design, Further Reading
- ongoing evolution of design, Form Design Continues to Evolve
- Foundation UI framework, Foundation
- frontend frameworks (see UI frameworks)
- Frost, Brad, Atomic Design: A Way of Designing Systems
- fully connected navigational model, Fully Connected
- functionality and information delivery layer, Separate Information from Presentation
G
- Gamma, Erich, et al., The Patterns
- GarageBand application, Deferred Choices
- gatekeeper forms, The Patterns
- Generous Borders pattern, What-What
- geographic and demographic Small Multiples chart, Examples
- Gestalt principles, Four Important Gestalt Principles-Closure
- Button Groups pattern and, Why
- closure, Closure
- continuity, Continuity
- in information graphics, Preattentive Variables: What’s Related to What?
- proximity, Proximity
- similarity, Similarity
- ghosting, How
- GitHub website, Password Strength Meter pattern, Examples
- Glassdoor, Password Strength Meter pattern, Examples
- Glitché application, minimal UI, Minimalistic
- global navigation
- Breadcrumbs pattern and, Use when
- defined, Global Navigation
- design considerations, Broad global navigation
- universal, costs of, Flat Navigation
- Gmail
- Autocompletion pattern in email body, Examples
- Input Hints pattern on registration page, Examples, Not the same as floating labels
- Smart Menu Items pattern and, Examples
- goals of users, Goals: Your Interface Is Just a Means to Their Ends
- Good Defaults pattern
- Deferred Choices pattern and, Deferred Choices
- form design and, The Patterns, What-What
- Input Prompt pattern and, How
- New-Item row pattern and, How
- Wizard pattern and, Physical structure
- Google Books, Deep Links pattern and, Examples
- Google Calendar
- Google Docs
- Google Drive, Thumbnail Grid pattern, Examples
- Google Finance, Forgiving Format pattern in, Examples
- Google Fonts, Tracking and kerning
- Google Maps
- Google Play store, Android OS mobile devices, Examples
- Google Public DataExplorer, What
- Google Suite applications, Center Stage pattern and, Examples
- Google Trends, Multi-Y Graph in, Examples
- Google website
- graphical list building, Examples
- Gratuity app, Some Worthy Examples
- Grid of Equals pattern
- about, Layout, What-What
- list display considerations, “How can I show a list of items that have heavy visuals?”
- Thumbnail Grid pattern and, Why
- grids, Overview: Show a List or Grid of Things or Options
- for actions in action panels, Structuring the actions
- alignment and, Alignment and grid
- creating visual rhythm with, Rhythm
- grouping and alignment, Four Important Gestalt Principles
- (see also Gestalt principles)
- GUI (graphical user interface) platforms, OS level modal dialog boxes, How
- guided tours or walkthroughs, Guided tours
H
- H&M website
- Habituation pattern, Habituation-Habituation
- Happy Cow mobile app, Illustrated
- HBO Now application, Thumbnail Grid pattern, Examples
- headers and footers
- footers in UI regions, UI Regions
- header/window title in UI regions, UI Regions
- Sitemap Footer pattern, What-What
- Help Systems pattern, What-What
- full help system, Full help system
- guided tours or walkthroughs, Guided tours
- in-screen help, labels and tool tips, In-screen help: labels and tool tips
- inline/display, Inline/display
- knowledge base, Knowledge base
- new user experiences, guided instruction, New user experiences: guided instruction
- online community of users, Online community
- tool tips, Tool tips
- hierarchy, organizing content by, Hierarchy
- Hootsuite application, Many Workspaces pattern and, Examples
- Hover Tools pattern
- hover tools, about, Hover Tools
- HTML frameworks (see UI frameworks)
- hub and spoke navigational model, Hub and Spoke
- Hulu
- human behavior, The Patterns: Cognition and Behavior Related to Interface Design
- (see also behavioral patterns)
- about, Designing for People, Context
- basics of user research, Research: Ways to Understand Context and Goals-Design Research Is Not Marketing Research
- goals of users, Goals: Your Interface Is Just a Means to Their Ends
I
- icons
- references and resources on, Icons
- in toolbars, Toolbars
- using for actions in action panels, Labeling the actions
- visual design considerations, Icons
- IFTTT (If This, Then That), Examples
- illustrations in visual design, Illustrated
- images
- in enterprise applications, Visual Design for Enterprise Applications
- visual design considerations, Photography-Repeated visual motifs
- iMovie website, The browsing interface
- Incremental Construction pattern, Incremental Construction
- Multilevel Undo pattern and, Why
- Indeed website, Deep Links pattern and, Examples
- Infinite List pattern
- about, The Patterns, What-What
- Pagination pattern and, Use when
- showing very long lists, “How can I manage a very long list?”
- Streams and Feeds designs for mobile devices, How
- information architecture (IA)
- defined, Definition
- lists and, Back to Information Architecture
- information graphics
- about, Showing Complex Data
- accessing specific values, The Actual Data: What Are the Specific Data Values?-The Actual Data: What Are the Specific Data Values?
- in dashboards, How
- (see also Dashboard pattern)
- defined, The Basics of Information Graphics
- design considerations, The Basics of Information Graphics
- navigation and browsing, Navigation and Browsing: How Can I Explore This Data?-Navigation and Browsing: How Can I Explore This Data?
- organizational models, Organizational Models: How Is This Data Organized?
- preattentive variables, Preattentive Variables: What’s Related to What?-Navigation and Browsing: How Can I Explore This Data?
- searching and filtering, Searching and Filtering: How Can I See Only the Data That I Need?-Searching and Filtering: How Can I See Only the Data That I Need?
- sorting and rearranging data, Sorting and Rearranging: Can I Rearrange This Data to See It Differently?-Sorting and Rearranging: Can I Rearrange This Data to See It Differently?
- information, separating from presentation, Separate Information from Presentation
- inline navigation, Associative and Inline Navigation
- input from users, Getting Input from Users: Forms and Controls
- (see also form and control patterns; forms)
- Input Hints pattern
- Input Prompt pattern
- INRIX ParkMe app, Examples
- Instacart app, Generous Borders pattern, Examples
- Instagram website
- profile screen, Browse a collection of objects
- Streams and Feeds pattern and, Social streams
- Instant Gratification pattern
- about, Instant Gratification
- Help Systems pattern and, How
- interactions as conversations, Interactions Are Conversations
- interface design
- basics of user research, Research: Ways to Understand Context and Goals-Design Research Is Not Marketing Research
- basis of, Designing for People
- cognition and behavior patterns related to, The Patterns: Cognition and Behavior Related to Interface Design-Social Media, Social Proof, and Collaboration
- human context for design intention, Context-Design’s Value: Solve the Right Problem, and Then Solve It Right
- internationalization in forms, The Basics of Form Design
- Fill-in-the-Blanks pattern and, How
- Internet of Things (IoT), systems perspective, Beyond and Behind the Screen
- inverted L navigation layout, Global Navigation
- iOS
- Apple Measure app, Adaptive/Parametric
- Booking.com app, Some Worthy Examples
- Deep Links pattern and, Examples
- email application, Infinite List pattern in, Examples
- Health app, Alpha/Numeric Scroller pattern, Examples
- Kindle app for, Browse a collection of objects
- Lugg app, Some Worthy Examples
- Micrsoft Fluent date picker, An Example Component-Based UI System: Microsoft’s Fluent
- Photos app, Canvas Plus Palette pattern and, Examples
- Settings Editor pattern and, Examples
- skeuomorphic visual designs, Skeuomorphic
- spinner in CVS app, Examples
- touch screens, links and buttons on, Touch Screens
- Voice Memos app, List Inlay pattern, Examples
- Zillow and Yelp websites, alternative views, Examples
- iPad
- Clear Entry Points pattern and, Examples
- Hulu, CNN, Jigsaw, and Pinterest apps, Examples
- Jacobin, NPR, and The Atlantic apps, Examples
- skeuomorphic visual designs, Skeuomorphic
- iPhone
- app installation progress indicator, Examples
- apps using Infinite List pattern, Examples
- Contacts app, Alpha/Numeric Scroller pattern, Examples
- Google home page, Thumbnail Grid pattern, Examples
- hub and spoke navigation, Hub and Spoke
- Mac Mail on, One-Window Drilldown pattern, What
- Weather app, Filmstrip pattern in, Examples
- YouTube for iPhone, Touch Tools pattern, Examples
J
K
- Kayak website
- kerning, Tracking and kerning
- keyboard actions, Keyboard Actions
- Keyboard Only pattern, Keyboard Only-Keyboard Only
- in media browsers, The media browser
- keyboard shortcuts, Streamlined Repetition
- about, Shortcuts
- habituation to, Habituation
- Kindle app for iOS, Browse a collection of objects
- knowledge base, Knowledge base
- Krug, Steve, Satisficing
L
- labels
- for actions in action panels, Labeling the actions
- design of, Satisficing
- floating labels in forms, Floating labels
- fonts in GUIs, Readability
- form labels in Vertical Stack pattern, How
- information graphics and, The Actual Data: What Are the Specific Data Values?
- input prompts versus floating labels, Not the same as floating labels
- in Modal Panel navigation, How
- placement in forms, The Patterns
- for prominent “Done” button, How
- languages, Fill-in-the-Blanks pattern and, How
- LATCH acronym, Ways to Organize and Categorize Content
- layered design, Separate Information from Presentation
- layering, defined, Preattentive Variables: What’s Related to What?
- layout of screen elements, Layout of Screen Elements-The Patterns
- communicating meaning with, Satisficing
- Gestalt principles in, Four Important Gestalt Principles-Closure
- making things look important, Size-Alignment and grid
- overall layout in Visual Framework pattern, How
- visual flow, Visual Flow-Using Dynamic Displays
- visual hierarchy, Visual Hierarchy-Size
- layout patterns, The Patterns-How, Layout-How
- lazy loading, How
- leading (in typography), Leading
- legends (information graphics), The Actual Data: What Are the Specific Data Values?
- lightbox-highlighted modal panels, What, Examples
- LinkedIn Learning website, full-screen browsers, Browse a collection of objects
- LinkedIn website
- online communities on, Online community
- Settings page, Escape Hatch pattern, Examples
- links, Links
- on Drop-down Chooser panel, How
- Smart Menu Items pattern and, The Patterns
- List Builder pattern, The Patterns, What-What
- list display patterns, The Patterns-Lists Abound
- list displays, Overview: Show a List or Grid of Things or Options
- Spatial Memory pattern and, Spatial Memory
- List Inlay pattern
- about, “When the user selects an item from a list, where should I show the details of that item?”, What-Further reading
- Hover Tools pattern and, How
- One-Window Drilldown pattern and, How
- Streams and Feeds pattern and, How
- lists
- about, Lists of Things
- for actions in action panels, Structuring the actions
- creating visual rhythm with, Rhythm
- in Drop-down Chooser pattern, How
- extensive use on web and in mobile apps, Lists Abound
- information architecture and, Back to Information Architecture
- managing a very long list, “How can I manage a very long list?”
- in mobile interfaces, The Patterns
- organized into categories or hierarchies, “How can I show a list that’s organized into categories or hierarchies?”
- showing details for selected items, “When the user selects an item from a list, where should I show the details of that item?”
- showing items with heavy visuals, “How can I show a list of items that have heavy visuals?”
- use cases, Use Cases for Lists
- loading indicators
- cancelling loads, How
- in Spinners and Loading Indicators pattern, Loading indicators
- when to use, Examples
- Loading or Progress Indicators pattern, What
- locations
- location awareness in mobile devices, Location Awareness
- organizing content by, Location
- Lockwood, Lucy A.D., Design an undo or action history stack
- Los Angeles Times website, Sitemap Footer pattern and, Examples
- Loudev.com multiselect.js, Examples
- Lugg mobile web and mobile app, Some Worthy Examples
- Lyft mobile app, Input Prompt pattern, Examples
M
- Mac Help application, How
- macOS
- Alternative Views pattern and, How
- Animated Scroll Bar pattern and, Why
- command-line interface, Typed Commands
- Finder application, Button Groups pattern, Examples
- Finder application, Thumbnail Grid pattern, Examples
- Modal Panel pattern and, Examples
- Module Tabs pattern in System Preferences, Examples
- OmniGraffle vector drawing application, Examples
- Responsive Enabling pattern in System Preferences, Responsive Enabling
- Settings Editor pattern and, Examples
- single-clicking versus double-clicking items, Single-Clicking Versus Double-Clicking Items
- standard platform look-and-feel for applications, Visual Design for Enterprise Applications
- Zillow and Yelp websites, alternative views, Examples
- Macros pattern
- about, The Patterns, What-Conclusion
- Command History pattern and, Why
- Streamlined Repetition pattern and, Streamlined Repetition
- Macy's website
- Mailchimp registration, Error Message pattern and, Examples-Examples
- main content area (UI regions), UI Regions
- Malone, Erin, Social Media, Social Proof, and Collaboration, Social
- Many Workspaces pattern, Make: Provide Tools to Create a Thing, What-What
- about, Changes in Midstream
- Prospective Memory pattern and, Prospective Memory
- Streams and Feeds pattern and, How
- maps
- Data Brushing pattern and, Examples
- map and list views on Zillow and Yelp, Examples
- navigation and, Wayfinding
- pyramid navigational model, Pyramid
- marketing research versus design research, Design Research Is Not Marketing Research
- Mashable website, Fat Menus pattern, Examples
- Materialize UI framework, Materialize
- MATLAB, Multi-Y Graph in, Examples
- MECE (Mutually Exclusive, Collectively Exhaustive), Mutually Exclusive, Collectively Exhaustive
- Media Browser pattern
- browsing a collection of objects, Browse a collection of objects
- managing and editing media assets, Manage and edit media assets
- patterns and components used with, Why
- single-item view, The single-item view
- media browsers, browsing interface, The browsing interface
- memory aids, Prospective Memory
- Menlo Club website, Password Strength Meter pattern, Examples
- menu bars, Menu Bars
- Hover Tools pattern and, Why
- Menu Page pattern
- about, What-What
- navigational model for, Hub and Spoke
- Settings Editor pattern and, Examples
- Menu Screen pattern, One-Window Drilldown pattern and, How
- menus
- in Bottom Navigation pattern on mobile apps, How
- drop-down, Drop-Down Menus
- Fat Menus pattern and, Multilevel or Tree, What-What
- pop-up, Pop-Up Menus
- Smart Menu Items pattern and, The Patterns
- Spatial Memory pattern and, Spatial Memory
- in UI regions, UI Regions
- Microbreaks pattern
- about, Microbreaks
- Streams and Feeds pattern supporting, Why
- microinteractions, What
- Microsoft Fluent Design System, An Example Component-Based UI System: Microsoft’s Fluent-An Example Component-Based UI System: Microsoft’s Fluent
- Android date picker, An Example Component-Based UI System: Microsoft’s Fluent
- iOS date picker, An Example Component-Based UI System: Microsoft’s Fluent
- web date picker, An Example Component-Based UI System: Microsoft’s Fluent
- Windows date picker, An Example Component-Based UI System: Microsoft’s Fluent
- Microsoft Office applications
- Canvas Plus Palette pattern in Excel, Flat Navigation
- Drop-down Chooser pattern in Word, Examples
- Excel Help, In-screen help: labels and tool tips
- Fill-in-the-Blanks pattern in Excel, Examples
- Input Hints and Forgiving Format patterns in Word printing dialog, Examples
- Macros pattern in Excel, Examples
- Multilevel Undo pattern in Word, Examples
- Outlook for Office 360, Sructured Format pattern and, Examples
- Powerpoint drop-down choosers with thumbnail grid, Examples
- Wizard pattern and, Examples
- Microsoft UI typefaces, Tracking and kerning
- Mini Cooper website, Progress Indicator pattern, Examples
- minimal designs, Minimalistic-Minimalistic
- Mint (Intuit) registration, Error Message pattern, Examples
- mobile devices
- Animated Transition pattern and, Use when
- Autocompletion pattern and, Why
- design and development approach to, User Interface Systems and Atomic Design
- global navigation in, Global Navigation
- intelligent paths between apps, Why
- Menu Page pattern and, How
- organizing content and, Microbreaks
- OS deep links, What
- responsive design example, How
- rotate and shake actions, Rotate and Shake
- Streams and Feeds designs for, How
- tap, swipe, and pinch actions, Tap, Swipe, and Pinch
- tool tips on, How
- Mobile Direct Access pattern, Focus: Show One Single Thing, What-What
- mobile interface patterns, The Patterns-Make It Mobile
- mobile interfaces
- about, Mobile Interfaces
- design approaches, How to Approach a Mobile Design-5. Optimize the Most Common Interaction Sequences
- design challenges and opportunities, The Challenges and Opportunities of Mobile Design-Social Influences and Limited Attention
- examples meeting design constraints, Some Worthy Examples-The Patterns
- mobile-first design, Mobile Interfaces
- modal dialog boxes, How
- Drop-down Chooser pattern and, How
- environmental clues and, Wayfinding
- Error Message pattern and, Examples
- error messages and, Why
- Modal Panel pattern
- about, What-What
- as environmental clue, Wayfinding
- flat navigational model and, Flat Navigation
- form design and, The Patterns
- modal panels or modal dialogs, Flat Navigation
- modularity in Atomic Design, Modularity
- Module Tabs pattern
- about, What-What
- Canvas Plus Palette pattern and, How
- Collapsible Panels pattern and, Use when
- in dynamic displays, Scroll Bars
- navigation and, Bring steps together
- Titled Sections pattern and, How
- molecules (Atomic Design), Molecules
- monospace typefaces, Monospace
- Moo.com website, Progressive Disclosure pattern, Progressive Disclosure
- Movable Panels pattern
- about, What-How
- Action Panel pattern and, Putting the Action Panel on the UI
- Dashboard pattern and, How
- in dynamic displays, Scroll Bars
- Spatial Memory pattern and, Spatial Memory
- Multi-Y Graph pattern, What-What
- multilevel navigational model, Multilevel or Tree
- Multilevel Undo pattern
- about, The Patterns, What-Examples
- Command History pattern and, How
- Macros pattern and, Use when
- Safe Exploration pattern and, Safe Exploration
- multiselect.js application, Examples
- Museum of Modern Art (MoMA) website
- Menu Page pattern and, Examples
- Music Memos app, Some Worthy Examples
- Mutually Exclusive, Collectively Exhaustive (MECE), Mutually Exclusive, Collectively Exhaustive
N
- National Geographic Kids website, Progress Indicator pattern, Examples
- National Geographic website, Pagination pattern and, Examples
- natural language output, How
- natural user interfaces, Natural User Interfaces
- navigation, Satisficing, Getting Around: Navigation, Signposts, and Wayfinding-Bring steps together
- associative and inline, Associative and Inline Navigation
- Bottom Navigation pattern and, The Patterns, What-What
- common techniques for, Navigation and Browsing: How Can I Explore This Data?-Navigation and Browsing: How Can I Explore This Data?
- considerations in forms, The Patterns
- design considerations, Design Considerations-Bring steps together
- cognitive load, Cognitive Load
- keeping distances short, Keep Distances Short
- environmental clues and, Wayfinding
- global, Global Navigation
- maps and, Wayfinding
- showing top-level structure in mobile apps, The Patterns
- signage and, Wayfinding
- signposts, Signposts
- social methods, Social
- tags supporting, Tags
- in UI regions, UI Regions
- understanding the information and task space, Understanding the Information and Task Space
- utility navigation, Utility Navigation
- in Visual Framework pattern, How
- wayfinding, Wayfinding
- websites having pages that limit options, Examples
- navigation patterns, The Patterns-Conclusion
- Animated Transition, What-Conclusion
- Annotated Scroll Bar, What-What
- Breadcrumbs, How
- Clear Entry Points, What-What
- Deep Links, What-What
- Escape Hatch, What-What
- Fat Menus, What-What
- Menu Page, What-What
- Modal Panel, What-What
- Progress Indicator, What-What, How
- Pyramid, What-What
- Sign-In Tools, What-What
- Sitemap Footer, What-What
- navigational models, Navigational Models-Flat Navigation
- flat, Flat Navigation
- fully connected, Fully Connected
- hub and spoke, Hub and Spoke
- multilevel or tree, Multilevel or Tree
- pyramid, Pyramid
- step by step, Step by Step
- Neil, Theresa, Designing a System of Screen Types
- list inlays, Further reading
- nesting of design elements in Atomic Design, Nesting
- Netflix mobile app, Touch Tool pattern in, What
- new user experience or onboarding, Design for both novice and experienced users, New user experiences: guided instruction
- New York Times crossword puzzle on mobile iOS app and NPR One app, Some Worthy Examples
- New York Times graphic, Multi-Y Graph, What
- New York Times website
- Forgiving Format pattern and, Examples
- New-Item Row pattern
- about, What-Lists Abound
- news sites
- patterns from systems perspective, Beyond and Behind the Screen
- news/content streams, Overview: Show a List or Grid of Things or Options, News/content streams
- examples of Streams and Feeds use, News/content streams
- Nielsen Norman group, Required versus optional
- Nielsen, Jakob, Use when, Why
- Norman, Don, Use when, Why
- North American climate graph, Small Multiples in, What
- NPR
- NPR One App, Some Worthy Examples
- numbers
- Numeric Scroller pattern (see Alpha/Numeric Scroller pattern)
O
- Official Payments website, Structured Format pattern, Examples
- OmniGraffle application, Canvas Plus Palette pattern, Examples
- onboarding, Design for both novice and experienced users
- One-Window Drilldown pattern
- about, “When the user selects an item from a list, where should I show the details of that item?”, What-What
- List Inlay pattern and, Why
- in media browser single-item view, The single-item view
- Settings Editor pattern and, How
- Streams and Feeds pattern and, How
- Two-Panel Selector pattern and, Examples
- use in Apple Photos, Manage and edit media assets
- using with Dashboard pattern, How
- online communities, help from, Online community, How, Online community
- openness in interfaces, Match Your Content and Functionality to Your Audience
- operating systems
- accessibility in desktop applications, Accessibility
- Autocompletion pattern in shells, Why
- keyboard shortcuts on, Shortcuts
- mobile OS deep links, What
- modal dialog boxes, How
- single-clicking versus double-clicking items, Single-Clicking Versus Double-Clicking Items
- optional fields in forms, Required versus optional
- organisms (Atomic Design), Organisms
- organizing content
- about, Skill Level, Organizing the Content: Information Architecture and Application Structure-Purpose
- designing system of screen types, Designing a System of Screen Types
- facilitating a single task, Do: Facilitate a Single Task
- high-level concerns, Purpose
- methods of, Ways to Organize and Categorize Content-Category or Facet
- Mutually Exclusive, Collectively Exhaustive (MECE), Mutually Exclusive, Collectively Exhaustive
- providing toos to create, Make: Provide Tools to Create a Thing
- separating information from presentation, Separate Information from Presentation
- showing list or grid of things, Overview: Show a List or Grid of Things or Options
- showing one single thing, Focus: Show One Single Thing
- for task and workflow-dominant apps, Designing for Task and Workflow-Dominant Apps-Display Your Information as Cards
- using tags, What-Conclusion
- organizing content patterns, The Patterns-Conclusion
- Overview Plus Detail pattern, Annotated Scroll Bar pattern and, Why
- overviews, Overview: Show a List or Grid of Things or Options
P
- pages (Atomic Design), Pages
- Pagination pattern
- about, What-What
- showing lists, “How can I manage a very long list?”
- panels
- layout in UI regions, UI Regions
- modal panels or modal dialogs, Flat Navigation
- panning and zooming in navigation, Pyramid
- parent—child relationship in navigation hierarchy, How
- Password Strength Meter pattern, The Basics of Form Design, What-Autocompletion
- patterns, The Patterns: Cognition and Behavior Related to Interface Design
- (see also behavioral patterns; specific patterns listed throughout)
- PayPal website, Forgiving Format pattern, Examples
- Pendo website, pop-up user guides, New user experiences: guided instruction
- personalization, Movable Panels pattern and, Why
- personas, Personas
- physical environments, challenging, mobile device use in, Challenging Physical Environments
- Pinterest iPad app, Collections and Cards pattern in, Examples
- placeholder text, What
- (see also Input Prompt pattern)
- pop-up menus, Pop-Up Menus
- Hover Tools pattern and, Why
- Pop-Up Tools pattern (see Hover Tools pattern)
- position, distinguishing importance by, Position
- preattentive variables, Preattentive Variables: What’s Related to What?-Navigation and Browsing: How Can I Explore This Data?
- preferences, What
- (see also Settings Editor pattern)
- presentation, separating from information, Separate Information from Presentation
- Preview pattern, The Patterns, What-What
- Prezi website
- Priceline website, Modal Panel pattern and, Examples
- problem solving, interface design for, Design’s Value: Solve the Right Problem, and Then Solve It Right
- Progress Indicator pattern
- about, Wayfinding, The Patterns, What-What
- Breadcrumbs pattern and, Why
- form design and, The Patterns
- Progressive Disclosure pattern
- about, Progressive Disclosure
- Wizard pattern and, Physical structure
- Prominent “Done” Button pattern
- about, The Patterns, What-What
- in forms, The Patterns
- Prospective Memory pattern
- about, Prospective Memory
- Many Workspaces pattern and, Why
- proximity (Gestalt principle)
- pyramid navigational model, Pyramid
- Pyramid pattern
- about, What-What
- using with One-Window Drilldown, The single-item view
Q
- querying
- characteristics of best querying interfaces, Searching and Filtering: How Can I See Only the Data That I Need?
- Dynamic Queries pattern and, Searching and Filtering: How Can I See Only the Data That I Need?, What-What
- in information graphics, Searching and Filtering: How Can I See Only the Data That I Need?
- Quip website, social streams and feeds on, Business collaboration
R
- readability, Readability
- RealClearPolitics website, Streams and Feeds pattern and, News/content streams
- Reddit website
- One-Window Drilldown pattern and, Examples
- online communities on, Online community
- reentrance property, Changes in Midstream
- REI website
- Reimann, Robert, How
- related content, navigation by, Related Content
- repeated visual motifs, promoting visual unity, Repeated visual motifs
- required versus optional fields in forms, Required versus optional
- responsive design, Mobile Interfaces
- Responsive Enabling pattern
- about, Responsive Enabling
- Spatial Memory pattern and, Spatial Memory
- Wizard pattern and, Physical structure
- reversible operations, How
- (see also Multilevel Undo pattern)
- rhythm, visual, Rhythm, Texture and rhythm
- Rich Internet Applications (RIAs), Designing a System of Screen Types
- Richly Connected Apps pattern, What-Make It Mobile
- rotate and shake actions, Rotate and Shake
- rulers (information graphics), The Actual Data: What Are the Specific Data Values?
S
- Safe Exploration pattern, Safe Exploration
- Salesforce website
- Salon.com, Vertical Stack pattern on mobile web and mobile app, Examples
- Samsung website
- San Francisco (SF.gov) website, Menu Page pattern, Examples
- San Francisco Public Library website, What
- sans serif typefaces, Sans serif, Flat Design
- Satisficing pattern, Skill Level, Satisficing
- saturated versus unsaturated colors, Saturated versus unsaturated
- scales (information graphics), The Actual Data: What Are the Specific Data Values?
- Scott, Bill, list inlays, Further reading
- screen sizes and devices, multiple, designing for, Multiple Channels and Screen Sizes Are Today’s Reality
- screens
- challenges for mobile design, Tiny Screen Sizes
- designing system of screen types, Designing a System of Screen Types
- layout, Layout of Screen Elements
- (see also layout of screen element)
- showing total number with Pagination pattern, How
- touch screens on mobile devices, Touch Screens
- scripting environments, Streamlined Repetition
- scroll and pan technique, Navigation and Browsing: How Can I Explore This Data?
- scroll bars, What, Scroll Bars
- (see also Annotated Scroll Bar pattern)
- scrolling ribbon, Browse a collection of objects, Manage and edit media assets
- searching
- Autocompletion pattern and, Use when
- directing for long lists via Find field, “How can I manage a very long list?”
- with facets and filters, Search with facets and filters
- Fill-in-the-Blanks pattern and, How
- in information graphics, Searching and Filtering: How Can I See Only the Data That I Need?-Searching and Filtering: How Can I See Only the Data That I Need?
- in media browser interface, The browsing interface
- saving search results through deep linking URLs, Examples
- showing results using Grid of Equals pattern, Layout
- showing results using Pagination pattern, How
- Semantic UI framework, Semantic UI
- Sephora website, Preview pattern, Examples
- sequencing, “Chunk Up” Jobs into a Sequence of Steps
- patterns for sequences of actions, The Patterns
- in Wizard pattern, Why
- serif typefaces, Serif
- Settings Editor pattern, Do: Facilitate a Single Task, What-What
- shape
- of data in information graphics, Organizational Models: How Is This Data Organized?
- preattentive variable, Preattentive Variables: What’s Related to What?
- Sheknows website, Content-centric websites
- shingling technique, How
- Show Your Stripes information graphic from The Economist, The Power of Data Visualization
- showing complex data (see information graphics)
- Sign-In Tools pattern, Utility Navigation
- about, What-What
- Spatial Memory pattern and, Spatial Memory
- signage, navigation and, Wayfinding
- signposts
- defined, Signposts
- patterns functioning as, The Patterns
- in Visual Framework pattern, How
- similarity (Gestalt principle)
- about, Similarity
- Button Groups pattern and, Why
- Simple check capture app, Adaptive/Parametric
- Richly Connected Apps pattern and, Examples
- single-clicking versus double-clicking items, Single-Clicking Versus Double-Clicking Items
- Sitemap Footer pattern
- about, What-What
- navigation in multilevel sites, Multilevel or Tree
- size
- distinguishing importance by, Size
- preattentive variable, Preattentive Variables: What’s Related to What?
- of type, Size
- Sketch application
- Center Stage layout, Examples
- Drop-down Chooser pattern for color picker, Examples
- online community, Online community
- skeuomorphic design, Skeuomorphic
- skill level of users, Skill Level
- designing for novice and experienced users, Design for both novice and experienced users
- Slack website
- Hover Tools pattern and, Examples
- New-Item Row pattern and, Examples
- social feeds and streams in, Business collaboration
- slideshows, flat navigational model, Flat Navigation
- small items, emphasizing, Emphasizing small items
- Small Multiples pattern, What-The Power of Data Visualization
- Smart Menu Items pattern
- about, The Patterns, What-What
- Cancelability pattern and, How
- Multilevel Undo pattern and, Presentation
- Smart Prefills pattern
- about, What-What
- form design and, The Patterns
- Input Prompt pattern and, How
- Wizard pattern and, Physical structure
- smart systems, The Ingredients: Smart Systems-Conclusion
- smartphones, Mobile Interfaces
- Snap app, Examples
- social influences and limited attention of mobile users, Social Influences and Limited Attention
- social media, Social Media, Social Proof, and Collaboration
- features in media browser single-item view, The single-item view
- Microbreaks pattern and, Microbreaks
- navigation in, Social
- patterns from systems perspective, Beyond and Behind the Screen
- social algorithms driving autocomplete, Use when
- social streams, Social streams, Social streams
- use in business collaboration, Business collaboration
- use of tags in, What
- social proof, Social Media, Social Proof, and Collaboration
- sorting data, Sorting and Rearranging: Can I Rearrange This Data to See It Differently?-Sorting and Rearranging: Can I Rearrange This Data to See It Differently?
- SoundHound app, animated progress indicator, Examples
- Southwest website, Prominent “Done” Button pattern, Examples
- SpaceIQ website, Dashboard pattern, Examples
- spacing
- spaciousness and crowding in visual design, Spaciousness and crowding
- in Visual Framework pattern, How
- whitespace separating sections, How
- sparklines, Use when
- Spatial Memory pattern
- about, Spatial Memory
- Movable Panels pattern and, Why
- Spinners and Loading Indicators pattern, The Patterns, What-What
- Split View pattern (see Two-Panel Selector pattern)
- Spotify website
- spotlight effect, The Actual Data: What Are the Specific Data Values?
- (see also Data Spotlight pattern)
- creating, How
- SQL queries, Typed Commands
- Square Invoice, skeuomorphic visual designs in, Skeuomorphic
- Stack Overflow website, use of tags in, Examples
- stacked bar charts, rearranging, Sorting and Rearranging: Can I Rearrange This Data to See It Differently?
- Stanford Web Credibility Project, Visual Style and Aesthetics
- Starbucks website, Fat Menus pattern on, Examples
- stepwise navigational model, Step by Step
- Stream and Feed services, Microbreaks, Overview: Show a List or Grid of Things or Options
- Streamlined Repetition pattern, Streamlined Repetition
- Macros pattern and, Why
- Streams and Feeds pattern, What-What
- Many Workspaces pattern and, Use when
- newscontent streams using, News/content streams
- showing lists of things, How
- social streams, Social streams
- Twitter TweetDeck and, Examples
- Stripe website, Angles and curves
- Structured Format pattern
- about, The Patterns, What-What
- Forgiving Format pattern and, Why
- style guide in Atomic Design, Style guide
- surveys, Surveys
- systems behind screen-based interfaces, Beyond and Behind the Screen-Beyond and Behind the Screen
- smart systems, The Ingredients: Smart Systems-Conclusion
- Szimpla Kert website, Texture and rhythm
T
- tab ordering, Tab Order
- tables
- for actions in action panels, Structuring the actions
- New-Item row pattern and, How
- sortable, Sorting and Rearranging: Can I Rearrange This Data to See It Differently?
- tablets, Mobile Interfaces
- responsive design example for apps, How
- tags, What-Conclusion
- supporting navigation, Tags
- tap, swipe, and pinch actions, Tap, Swipe, and Pinch, Direct Manipulation of Objects
- Target website
- Breadcrumbs pattern, What
- Feature, Search, and Browse pattern and, Commerce- centric websites
- Pagination pattern and, Examples
- task and workflow-dominant apps, Designing for Task and Workflow-Dominant Apps-Display Your Information as Cards
- Feature, Search, and Browse pattern on task-centric sites, Task-centric websites
- Wizard pattern in, Use when
- Task Pane pattern, Examples
- Techcrunch website, Streams and Feeds pattern on, News/content streams
- technology-agnostic (Atomic Design), Not tied to any technology
- TED website, Visual Framework pattern, Examples
- templates in Atomic Design, Templates
- Tesla website
- Texas Monthly, using tags in articles, Examples
- text fields, form and control patterns for, The Patterns, How
- text, readability of, Readability
- texture
- adding richness to visual design, Texture and rhythm
- preattentive variable, Preattentive Variables: What’s Related to What?
- Thumbnail Grid pattern
- about, What-What
- Alternative Views pattern and, How
- Drop-down Chooser pattern and, Examples
- list display considerations, “How can I show a list of items that have heavy visuals?”
- lists displays with, How
- Menu Page pattern and, How
- in mobile designs, The Patterns
- time, organizing content by, Time
- timelines (information graphics), The Actual Data: What Are the Specific Data Values?
- Titled Sections pattern
- about, What-What
- Dashboard pattern and, How
- form design and, The Patterns
- list display considerations, “How can I show a list that’s organized into categories or hierarchies?”
- Visual Framework pattern and, How
- Wizard pattern and, Physical structure
- tool tips in help systems, Tool tips
- toolbars, Toolbars
- Action Panel pattern and, Labeling the actions
- action panels and, Action Panels
- touch screens, Touch Screens
- actions in touch screen operating systems, Tap, Swipe, and Pinch
- hover tools and, Why
- Touch Tools pattern, about, What-What
- Toyota.com website, Preview pattern, Examples
- tracking and kerning, Tracking and kerning
- Transit app, List Inlay pattern and modal window, Examples
- Transit Mobile App, Datatips pattern, Examples
- transitions, What
- (see also Animated Transition pattern)
- types to consider, How
- tree navigational model, Multilevel or Tree
- Tree Table pattern, Alternative Views pattern and, How
- trees
- displaying actions in action panels as, Structuring the actions
- showing lists organized into categories, “How can I show a list that’s organized into categories or hierarchies?”
- sorting and rearranging data in, Sorting and Rearranging: Can I Rearrange This Data to See It Differently?
- trellis plots or trellis graphs, How
- TripAdvisor website, Pagination pattern, What
- Trulia app
- Trunk Club website, Input Hints pattern, Examples
- Tufte, Edward, Why
- TweetDeck application, Many Workspaces pattern and, How, Examples
- Twitter Bootstrap UI framework
- components in, Bootstrap-Foundation
- spinner component, customizable, Examples
- Twitter website
- Error Message pattern and, Examples
- Infinite List pattern and, How
- Sign-In Tools pattern and, Examples
- Streams and Feeds pattern and, Social streams
- two column multiselector (see List Builder pattern)
- Two-Panel Selector pattern
- about, “When the user selects an item from a list, where should I show the details of that item?”, What-What
- List Inlay pattern and, Why
- in media browser single-item view, The single-item view
- One-Window Drilldown pattern and, How
- Settings Editor pattern and, How
- Streams and Feeds pattern and, How
- Wizard pattern and, Physical structure
- typing text, difficulty mobile devices, Difficulty of Typing Text
- typography, Typography-Numbers
- in flat design, Flat Design
- font pairing, Font pairing
- numbers and, Numbers
- paragraph alignment, Paragraph alignment
- repreated visual motifs and, Repeated visual motifs
- tracking and kerning, Tracking and kerning
- type size, Size
- typefaces, Types of typefaces-Size
- typefaces evoking a feeling, Evoking a Feeling
U
- Uber website
- Cards pattern on Uber Eats, Examples
- visual hierarchy in older home page, Visual Flow
- Ubiquitous computing, Beyond and Behind the Screen
- UI frameworks, UI Frameworks-Conclusion
- about, UI Frameworks-The Rise of UI Frameworks
- Blueprint, Blueprint-UIkit
- Bootstrap, Bootstrap-Foundation
- examining selected frameworks, A Look at Selected UI Frameworks
- Foundation, Foundation
- Materialize, Materialize
- Semantic, Semantic UI
- UIkit, UIkit-Conclusion
- UI regions, UI Regions
- UI systems, User Interface Systems and Atomic Design-An Example Component-Based UI System: Microsoft’s Fluent
- components-based approach, UI Systems
- Microsoft Fluent Design System, An Example Component-Based UI System: Microsoft’s Fluent-An Example Component-Based UI System: Microsoft’s Fluent
- UIkit framework, UIkit-Conclusion
- UIs
- affordance in, Affordance
- standards for common patterns and processes, Doing Things: Actions and Commands
- UK Government web design standards, Required versus optional
- undo actions, What
- (see also Multilevel Undo pattern)
- designing for Multilevel Undo, Design an undo or action history stack
- Escape Hatch pattern and, Why
- operations that are nonversible, How
- undoable actions and, Undoable actions
- Undo/Redo items on Edit menu, Presentation
- United States Web Design System, Required versus optional
- University of California, Berkeley website, Menu Page pattern and, How
- University of Oregon, climate heat map, What
- URLs
- autocompletion in browser URL fields, Use when
- in browser history, Browser history
- representing a deep-linked state, Why
- Userlane website, user-guide authoring platform, New user experiences: guided instruction
- utility navigation, Utility Navigation
- UX debt, avoiding in Atomic Design, Consistency
V
- Vanity Fair website, Progress Indicator pattern, Examples
- Vertical Stack pattern, What-What
- Vimeo website, browsing interface, The browsing interface
- visual design, The Basics of Visual Design-Repeated visual motifs
- about, Visual Style and Aesthetics
- adaptive/parametric, Adaptive/Parametric-Conclusion
- avoiding complexity, Satisficing
- basic principles of, The Basics of Visual Design
- color, Color-Typography
- composition, Composition
- evoking a feeling, Evoking a Feeling-Texture and rhythm
- examples of, The Basics of Visual Design-Visual Hierarchy
- flat design, Flat Design-Minimalistic
- illustration in, Illustrated
- meaning for enterprise applications, Visual Design for Enterprise Applications
- minimalistic, Minimalistic-Minimalistic
- readability, Readability
- skeuomorphic, Skeuomorphic
- visual hierarchy, Visual Hierarchy
- visual flow, Visual Flow-Using Dynamic Displays
- Visual Framework pattern
- about, The Patterns, What-What
- in Atomic Design, Pages
- Prominent “Done” Button pattern and, How
- visual hierarchy, The Basics of Layout-Size
- about, Visual Hierarchy
- visually impaired users, Accessibility
W
- Wall Street Journal website, Sitemap Footer pattern and, Examples
- warm colors versus cool colors, Warm versus cool
- Washington Post, Vertical Stack in mobile site, Examples
- wayfinding, defined, Wayfinding
- Weather Channel
- Weather Underground website, poor visual flow and visual hierarchy, Visual Flow
- Weatherbug app, Examples
- web and mobile web technologies, UI Frameworks
- web browsers
- autocompletion in URL fields, Use when
- browser history, Browser history
- Many Workspaces pattern and, How
- masking different capabilities, Benefits
- WebMD website
- Fat Menus pattern and, Examples
- Feature, Search, and Browse pattern and, Content-centric websites
- websites, importance of good visual design, Visual Style and Aesthetics
- Weyl, Estelle, Further Reading
- Windows
- accessibility in desktop applications, Accessibility
- Alternative Views pattern and, How
- command-line interface, Typed Commands
- Microsoft Fluent date picker, An Example Component-Based UI System: Microsoft’s Fluent
- single-clicking versus double-clicking items, Single-Clicking Versus Double-Clicking Items
- standard platform look-and-feel for applications, Visual Design for Enterprise Applications
- Windows 10 Action Panel, Examples
- Winds and Words data visualization, Examples
- WinHelp application, How
- Wizard pattern, Do: Facilitate a Single Task, What-What
- form design and, The Patterns
- physical structure, Physical structure
- step by step navigation in, Step by Step
- user motivation to learn and, Skill Level
- Wordpress platform, Examples
- workflows and tasks, designing, Designing for Task and Workflow-Dominant Apps-Display Your Information as Cards
- writing style and grammar in Visual Framework, How
- Wroblewski, Luke, Further Reading
- Wurman, Richard Saul, Ways to Organize and Categorize Content
Y
- Yahoo! website, Feature, Search, and Browse pattern and, Content-centric websites
- Yelp website
- YouTube
- browsing interface, The browsing interface, Browse a collection of objects
- Deep Links pattern and, Examples
- Hover Tools pattern in video player, Examples
- iPhone app, Touch Tools pattern, Examples
Z
- Zillow, Alternative Views pattern on iOS, Examples
- Zoom mobile app, Generous Borders pattern, Examples
- zooming
- navigation technique, Navigation and Browsing: How Can I Explore This Data?
- zoomable interfaces, Focus: Show One Single Thing
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.