Interface quality of life improvements

Here are some quality of life improvements you can make to an interface.

  1. Generous mouse paths in nested menus, where the menu doesn’t close if the mouse isn’t always within its boundaries.
  2. Coyote time for keyboard shortcuts, where a multi-key shortcut isn’t cancelled as soon as you release the wrong key first.
  3. Stretch/bounce motion effects in scrolling list views, to help show that someone has reached the end of the list.
  4. Smooth and fast expand and collapse animations for all elements that expand and collapse (as opposed to no animation).
  5. Starting expansion and collapse animations from the direction of the element that triggered the animation, so that it feels as if it’s expanding away from that element.
  6. Smooth and fast animated movement for elements that move from one place to another (as opposed to no animation).
  7. Animation to let you know that elements in the edge of your vision have appeared or changed.
  8. Menus and other pop-up elements open ~instantly but take slightly longer to fade away.
  9. Optical adjustment of visually unbalanced elements so they look properly aligned.
  10. If an element that contains text is changed to an “edit” mode, keep the text in the same place as it changes.
  11. Don’t move elements as the result of an interaction near or with that element, unless that’s the interaction’s purpose.
  12. If elements are added or removed to a list, maintain the subjective scroll position so that elements visually stay in the same place.
  13. Open context menus so that the menu actions are always in the same place relative to the cursor.
  14. On mobiles open the correct type of keyboard for the field selected.
  15. If clicking something opens a new interface where the mouse is, don’t put something risky under the current mouse cursor position, in case the person clicks again by accident.
  16. Object permanence: elements that feature in more than one view persist throughout transitions from one view to another, even if they move or change shape/size.
  17. Unless explicitly requested, information entered by a person is never lost if that person leaves the screen.
  18. If a moveable element (e.g. a scrollable horizontal stack of containers) has natural positions, snap it into those positions.
  19. Show changes to something in real time, or if the thing is not visible, show a preview of the changes as options are changed.

anthonyhobday.com