Home Page Icon
Home Page
Table of Contents for
Cover
Close
Cover
by Theresa Neil, Bill Scott
Designing Web Interfaces
Foreword
Preface
What Happened
Why We Wrote This Book
What This Book Is About
Design Patterns
Who Should Read This Book
What Comes with This Book
Conventions Used in This Book
Using Examples
We’d Like to Hear from You
Safari Books Online
Acknowledgments
Bill’s Acknowledgments
Theresa’s Acknowledgments
I. Make It Direct
1. In-Page Editing
Single-Field Inline Edit
Considerations
Discoverability
Accessibility
Multi-Field Inline Edit
Considerations
Readability versus editability
Blending display and edit modes
WYSIWYG
Overlay Edit
Considerations
Why an overlay?
Table Edit
Considerations
Activation
Group Edit
Considerations
Discoverability
Discoverability versus readability
Symmetry of Interaction
Module Configuration
Considerations
Visual noise
Guidelines for Choosing Specific Editing Patterns
2. Drag and Drop
Interesting Moments
The Events
The Actors
Interesting Moments Grid
Purpose of Drag and Drop
Drag and Drop Module
Considerations
Placeholder target
Insertion target
Drag distance
Drag rendering
Drag and Drop List
Considerations
Placeholder target
Insertion target
Non-drag and drop alternative
Hinting at drag and drop
Drag lens
Drag and Drop Object
Considerations
Drag feedback: Highlighting
Drag feedback: Dragged object versus drop target
Drag feedback: Drag positioning
Drag feedback: Drag start
Drag and Drop Action
Considerations
Anti-pattern: Artificial Visual Construct
Natural Visual Construct
Drag and Drop Collection
Considerations
Discoverability
Teachable moment
The Challenges of Drag and Drop
3. Direct Selection
Toggle Selection
Considerations
Scrolling versus paging
Making selection explicit
Collected Selection
Considerations
Keeping the selection visible
Collected Selection and actions
Object Selection
Considerations
Desktop-style selection
Hybrid Selection
Considerations
Confusing two models
Blending two models
II. Keep It Lightweight
4. Contextual Tools
Interaction in Context
Fitts’s Law
Contextual Tools
Always-Visible Tools
Considerations
Clear call to action
Relative importance
Discoverability
Hover-Reveal Tools
Considerations
Visual noise
Discoverability
Contextual Tools in an overlay
Anti-pattern: Hover and Cover
Anti-pattern: Mystery Meat
Activation
Toggle-Reveal Tools
Considerations
Soft mode
Multi-Level Tools
Considerations
Radial menus
Activation
Default action
Contextual toolbar
Muttons
Anti-pattern: Tiny Targets
Secondary Menu
Considerations
Conflict with browser menu
Discoverability
Accessibility
Acting on multiple objects
III. Stay on the Page
5. Overlays
Dialog Overlay
Considerations
Lightbox Effect
Modality
Staying in the flow
Anti-pattern: Idiot Boxes
Using JavaScript alerts
Detail Overlay
Considerations
Activation
Anti-pattern: Mouse Traps
Anti-pattern: Non-Symmetrical Activation/Deactivation
Anti-pattern: Needless Fanfare
Anti-pattern: Hover and Cover
Input Overlay
Considerations
Clear focus
Display versus editing
Anti-pattern: Hover and Cover
6. Inlays
Dialog Inlay
Considerations
In context
List Inlay
Considerations
Accordion: One-at-a-time expand
Accordion: More than one pane visible at a time
Parallel content
Detail Inlay
Considerations
Combining inlays and overlays
Tabs
Considerations
Traditional tabs
Content tabs
Personal assistant tabs
Inlay Versus Overlay?
7. Virtual Pages
Virtual Scrolling
Considerations
Desktop-style applications
Loading status
Progressive loading
Inline Paging
Considerations
In-page update
Natural chunking
Back button
Interactive content loading
Scrolled Paging: Carousel
Considerations
Time-based
Animation direction
Virtual Panning
Considerations
Natural Visual Construct
Gestures
Zoomable User Interface
Considerations
Paging Versus Scrolling
8. Process Flow
Google Blogger
The Magic Principle
Interactive Single-Page Process
Considerations
Responsiveness
Keeping users engaged
Benefits
Inline Assistant Process
Considerations
Quick and easy
Additional step
Blending quick and easy with the additional step
Dialog Overlay Process
Considerations
Making it feel lightweight
Clear status
Configurator Process
Considerations
Immediate feedback
Out of view status
Static Single-Page Process
Considerations
Making it feel lightweight
Multiple pages are not necessarily evil
IV. Provide an Invitation
9. Static Invitations
Call to Action Invitation
Considerations
Visual noise
Blank Slate Invitation
Unfinished invitation
Tour Invitation
Considerations
Not a Band-Aid
Keep it simple
Introducing new idioms
10. Dynamic Invitations
Hover Invitation
Considerations
Visual cues
Interactive versus static
Enhancing Hover Invitation
Affordance Invitation
Considerations
Bridging the new with the familiar
Multiple idioms
Perceived affordance
Drag and Drop Invitation
The Events
Considerations
Invitation to drag
Advertising drag and drop
Invitation to drop
Inference Invitation
Considerations
Intelligent interaction
More Content Invitation
Considerations
Hinting with animation
Hinting by providing a sneak peek
The Advantage of Invitations
V. Use Transitions
11. Transitional Patterns
Brighten and Dim
Considerations
Importance
Active
Not ready
Expand/Collapse
Considerations
Expand/Collapse Inlays
Expand/Collapse as Overlay
Self-Healing Fade
Considerations
Animation
Considerations
Zoom back
Drop animation
Cut it in half rule
Spotlight
Considerations
Signaling change
12. Purpose of Transitions
Engagement
Communication
Maintain Context While Changing Views
Slide In and Slide Out
Faceplate
Flip
Carousel
Accordion
Explain What Just Happened
Opposite effect
Show Relationships Between Objects
Focus Attention
Improve Perceived Performance
Create Illusion of Virtual Space
VI. React Immediately
13. Lookup Patterns
Auto Complete
Considerations
Typing
Matching
Selecting
Kayak Auto Complete
Live Suggest
Considerations
Typing
Matching
Selecting
More Considerations
Typing
Matching and selecting
Live Search
Considerations
Typing
Matching and selection
Contextual results
Previews in Live Search
Narrowing too quickly
Combining Live Suggest and Live Search
Live Search can be expensive
Refining Search
Considerations
Avoid page refreshes
Even smoother transitions
Custom filters
Think outside the box
When to trigger a search
14. Feedback Patterns
Live Preview
Considerations
Immediate feedback
Engagement
In context
Showcasing products
Progressive Disclosure
Considerations
Keeping it lightweight
Progress Indicator
Considerations
Perceived performance
Immediate feedback
Showing upload status
Deferred loading
Periodic Refresh
Considerations
Visual noise
Pausing Periodic Refresh
Principles and Patterns for Rich Interaction
The Principles
Make It Direct
Keep It Lightweight
Stay on the Page
Provide an Invitation
Use Transitions
Be Reactive
Staying Up to Date
Index
About the Authors
Colophon
Copyright
Search in book...
Toggle Font Controls
Playlists
Add To
Create new playlist
Name your new playlist
Playlist description (optional)
Cancel
Create playlist
Sign In
Email address
Password
Forgot Password?
Create account
Login
or
Continue with Facebook
Continue with Google
Sign Up
Full Name
Email address
Confirm Email Address
Password
Login
Create account
or
Continue with Facebook
Continue with Google
Next
Next Chapter
Designing Web Interfaces
Add Highlight
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click
here
login for view all page.
Day Mode
Cloud Mode
Night Mode
Reset