- Accidental Creative
- Adapting to Web Standards: CSS and Ajax for Big Sites
- Art of Non-Conformity
- Art of Readable Code
- Back to the User: Creating User-Focused Web Sites
- Beginning PHP6, Apache, MySQL Web Development
- Books to Read
- Bored and Brilliant
- Born For This
- Complete E-Commerce Book
- Content Inc
- Core PHP Programming
- CSS3: Pushing the Limits
- Dealing with Difficult People
- Defensive Design for the Web
- Deliver First Class Web sites
- Design for Hackers: Reverse-Engineering Beauty
- Designing Web Interfaces
- Designing Web sites that Work: Usability for the Web
- Designing with Progressive Enhancement
- Developing Large Web Applications
- Eat That Frog
- Economics of Software Quality
- Elements of User Experience
- Epic Content Marketing
- Extending Bootstrap
- Flexible Web Design
- Flexible Web Layouts
- Happiness At Work
- Inmates Are Running the Asylum
- jQuery Pocket Reference
- Letting Go of the Words
- Making Every Meeting Matter
- Manage Your Day to Day
- Marketing to Millenials
- Monster Loyalty
- More Eric Meye on CSS
- Official Ubuntu Book
- Organized Home
- Perennial Seller
- PHP In a NutShell
- PHP Refactoring
- PHP5 CMS Framework Development
- PHP6 and MySQL Bible
- Privacy Policy
- Responsive Web Design
- Responsive Web Design with HTML and CSS3
- Rules of Thumb
- Saleable Software
- Securing PHP Web Applications
- Simple and Usable Web, Mobile and Interaction Design
- Smart Organizing
- Submit Now: Designing Persuasive Web sites
- The Life-changing Magic of Tidying up
- This Is Marketing
- UI and UX and Design
- Web site Usability
- Web Site Usability: A Designer's Guide
- Web Word Wizardy
- Well Designed
- Work for Money, Design for Love
- Blogs
- Checklists I Have Collected or Created
- Crafts To Do
- Database and Data Relations Checklist
- Ecommerce Website Checklist
- My Front End UI Checklist
- New Client Needs Analysis
- Newsletters I Read
- Puzzles
- Style Guides
- User Review Questions
- Web Designer's SEO Checklist
- Web site Review
- Website Code Checklist
- Website Final Approval Form
- Writing Content For Your Website
- Writing Styleguide
- Writing Tips
- Complete Book of Potatoes
- Creating Custom Soil Mixes for Healthy, Happy Plants
- Edible Forest Garden
- Garden Design
- Gardening Tips and Tricks
- Gardens and History
- Herbs
- Houseplants
- Light Candle Levels
- My Garden
- My Garden To Plant
- Organic Fertilizers
- Organic Gardening in Alberta
- Plant Nurseries
- Plant Suggestions
- Planting Tips and Ideas
- Root Cellaring
- Things I Planted in My Yard
- Way We Garden Now
- 101 Organic Gardening Hacks
- Beautiful No-Mow Lawns
- Beginner's Guide to Heirloom Vegetables
- Best of Lois Hole
- Eradicate Invasive Plants
- Gardening Books to Read
- Gardens West
- Grow Organic
- Grow Your own Herbs
- Guerilla Gardening
- Heirloom Life Gardener
- Indoor Gardening: The Organic Way
- Real Gardens Grow Natives
- Seed Underground
- Small plot, high yield gardening
- Thrifty Gardening from the Ground Up
- Vegetables
- Veggie Garden Remix
- Weeds
- What Grows Here
- Activities for Kids
- Baking & Cooking Tips
- Bertrand Russell
- Can I Get that on Sale?
- Cleaning Tips and Tricks
- Colour Palettes I Like
- Compound Time
- Cooking Tips
- Crafts
- Crafts for Kids
- Household Tips
- Inspiration
- Interesting
- Interior Design
- Latin Phrases
- Laundry Tips
- Learn Something New
- Links, Information, and Cool Videos - Stuff for My Kids
- My Miscellany
- Organizing
- Quotes
- Reading List
- Renovations
- Silly Sites
- Things that Make Me Laugh
- Videos to Watch
- YouTube Hacks
- Accessibility
- CSS Frameworks
- CSS Reading List
- CSS Sticky Footer
- htaccess files
- HTML Tips and Tricks
- Javascript (and jQuery)
- Landing Page Tips
- Making Better Websites
- More Information on CSS
- MySQL and Databases
- Navigation
- Responsive Design
- Robots.txt File
- Security and Secure Websites
- SVG Images
- Web Design and Development
- Web Design Tools
- Web Error Codes
- Website Testing Checklist
- Writing for the Web
- Writing Ideas for your website
- Animations and Interactions
- Being a Better Designer
- Bootstrap Resources
- Color in Web Design
- Colour
- CSS Preprocessors: Sass and Less
- CSS Tips Tricks
- Design Systems
- Designing User Interfaces
- Font & Typographical Inspiration
- Fonts, Typography, Letters & Symbols
- Icons
- Logo Designs
- Photoshop Tips and Tricks
- Sketch
- UX and UI and Design Reading List
- Web Forms
In-Page Editing
In-Page Editing provides a nice way to change displayed content and observe the change in context. Here are some best practices to consider:
- Keep the editing inline for single fields.
- Use inline when editing one of many in a set. This keeps the context in view.
- Keep the display and editing modes the same size when possible. This will avoid page jitter and reduce distraction when moving between the two modes.
- Make the transition between display and editing as smooth as possible.
- Use mouse hover invitations to indicate editing when readability is primary.
- Avoid using double-click to activate editing.
- Place a bracketed "[edit]" link near the item to be edited if editability is equally important or if the quantity of items that can be edited is small. This is a nice way to separate the link from the displayed text without creating visual distractions.
- Show the edit in place when editing one item in a series (to preserve context).
- Use an overlay when what is being edited needs careful attention. This removes the likelihood of accidentally changing a critical value.
- Do not use multiple overlays for additional fields. If you have a complex edit for a series of elements, use one overlay for all.
- When providing an overlay, use the most lightweight style available to reduce the disruptiveness of the context switch between render and editing state.
- Use buttons when it might be too subtle to trigger completion implicitly.
- Use explicit buttons for saving and canceling when there is room.
- Whenever possible, allow the overlay to be draggable so that obscured content can be revealed as needed.
Best Practices for Table Edit
Here are some best practices for Table Edit:
- Bias the display toward readability of the table data.
- Avoid mouse hover for activating cell editing. It makes for the feeling of "mouse traps" and makes the interaction noisy.
- Activate edit with a single click. While using a double-click may not be totally unexpected (since it looks like an Excel spreadsheet), a single click is easier to perform.
- Consider allowing extra space during editing either through a drop-down editor or by slightly enlarging the edit cell.
- As much as possible, mimic the normal conventions of cell navigation that users will already be familiar with (e.g., in Microsoft Excel).
Best Practices for Secondary Menus
Here are some best practices to keep in mind:
- Place alternate or shortcut commands in Secondary Menus.
- Consider activating Secondary Menus by holding down the mouse for one second as an alternative to right-clicking to show the menu.
- Style Secondary Menus differently than the Browser's standard secondary menu.
- Avoid Secondary Menus for all but redundant commands
- Avoid Secondary Menus in places where there is little resemblance to a traditional web page.
- Use Secondary Menus for operating on a selected set of objects.
General Practices for Contextual Tools
To sum up, here are some overall best practices to keep in mind:
- Contextual Tools are useful for reducing the user's path to completing a task. By placing tools near the point of focus and making these tools easy to activate, you can create a lightweight interaction.
- Use Contextual Tools when you have no way to select elements and operate on them as a whole.
- Use Contextual Tools when you want to shorten the path the user must take to complete a task for an item shown on the page.
- Use Contextual Tools when you want to provide a clear call to action at the point of focus.
- Always make your actions as immediate as possible, avoiding additional steps where you can.
- Where possible use familiar techniques (hyperlinks, drop-down arrows, buttons) when providing actions in unexpected places (hover-revealed Contextual Tools).
- Make the actions clear and direct. Avoid using icons for all but the most obvious (an [x] or a trashcan for delete, for instance).
- Use buttons for strong calls to action and links for minor actions.
- Make sure that targets used to open menus or expand information are suitably sized. Never use 8×8 pixel targets.
- Make tools easy to understand, easy to target, and quick to execute. This will make them feel lightweight.
Best Practices for List Inlay
Here are some best practices to keep in mind:
- Use List Inlay when the context of the other items in the list help the user understand the visible inlay.
- Use List Inlay to avoid having users navigate to a new page or popping up an overlay to see an item's detail.
- Restrict it to show only a single item when you need to preserve space and the hidden content is not critical to the opened content.
- Allow multiple items to be visible for parallel content (like filters in a search).
Best Practices for Tabs
Here are some best practices to keep in mind:
- Use tabs to display additional content inline.
- Avoid using multiple tabs on a single page.
- If you do use more than one set of tabs on a page, create a visual contrast to distinguish the tab content areas.
- Put the most important content in the first tab. Many users may not navigate to any of the other tabs.
- Activate tabs with mouse click.
- If revealing the content on other tabs is important, you can activate tabs on hover—but use this sparingly as it can be annoying (e.g., personal assistant tab on the Yahoo! home page).
Bibliographical Information
Publisher: O'Reilly Media, Inc.
Pub. Date: January 19, 2009
Print ISBN-13: 978-0-596-51625-3
These are notes I made after reading this book. See more book notes
Just to let you know, this page was last updated Saturday, Mar 06 21