Interface quality of life improvements
Here are some quality of life improvements you can make to an interface.
- Generous mouse paths in nested menus, where the menu doesn’t close if the mouse isn’t always within its boundaries.
- Coyote time for keyboard shortcuts, where a multi-key shortcut isn’t cancelled as soon as you release the wrong key first.
- Stretch/bounce motion effects in scrolling list views, to help show that someone has reached the end of the list.
- Smooth and fast expand and collapse animations for all elements that expand and collapse (as opposed to no animation).
- 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.
- Smooth and fast animated movement for elements that move from one place to another (as opposed to no animation).
- Animation to let you know that elements in the edge of your vision have appeared or changed.
- Menus and other pop-up elements open ~instantly but take slightly longer to fade away.
- Optical adjustment of visually unbalanced elements so they look properly aligned.
- If an element that contains text is changed to an “edit” mode, keep the text in the same place as the mode changes.
- Don’t move elements as the result of an interaction near or with that element, unless that’s the interaction’s purpose.
- If elements are added or removed to a list, maintain the subjective scroll position so that elements visually stay in the same place.
- Open context menus so that the menu actions are always in the same place relative to the cursor.
- On mobiles open the correct type of keyboard for the field selected.
- 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.
- 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.
- Unless explicitly requested, information entered by a person is never lost if that person leaves the screen.
- If a moveable element (e.g. a scrollable horizontal stack of containers) has natural positions, snap it into those positions.
- Show changes to something in real time, or if the thing is not visible, show a preview of the changes as options are changed.