- load server generated page without waiting in blank state for too long, load as much as possible within a time budget, defer unfinished loading to second roundtrip
- show loading indicator to allow other areas to show before everything ready, but not too many indicators
- show error in area, instead of make whole page unusable
- show result of my action without whole page refresh, keep uncommited edit state in other area
- show feedback while typing, save extra click
- show search results while typing, save extra click
- if button click takes some time, show a processing indicator on the button to prevent user clicking twice
- if server processing takes time, client may optimistically update before server confirm
- show error next to the input
- avoid multi page form, prefer minimal data entry initially, grow the form gradually as user provided more information
- use infinite scroll to load more
- use pull down to refresh
- use swipe to show/hide more actions
- use drag and drop to re-order items
- use drag and drop to connect relationship
- use half screen dialog to replace page jumping, use inline editing to replace modal dialog, avoid jumping around if possible
- use mansonry to layout double columns, use screen space more efficiently
- use FLIP layout animation to avoid content suddenly appear/disappear
- preload next page, show progress, save the waiting time after switching
- show current and next page side by side with transition animation, if no loading required
- go back to previous page without reload waiting
- perserve unsaved form in browser
- render big page with many dom nodes, showing only the porition in viewport
- multiple concurrent actions, end up with a consistent final state
Go through the checklist, and find out how to implement each feature in the framework you are evaluating (for example https://remix.run).
Top comments (0)