DEV Community

Tao Wen
Tao Wen

Posted on

Checklist for UI frameworks evaluation

  • 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)