The Elements of UI Engineering

Written
  • UI
  • Source: https://overreacted.io/the-elements-of-ui-engineering/
  • There are a number of fundamental issues to consider when creating a good UI.
  • Consistency
    • Elements on the page should be globally and locally consistent. State associated with a button should update in all the appropriate places when the button is clicked.
  • Responsiveness
    • Smooth scrolling
    • Visual indicators for delays greater than 100ms
    • Page layout shouldn’t jump around when loading
  • Latency
    • How do we gracefully handle latency without a bunch of loading spinners all the time?
  • Navigation
    • Navigation should be local to the thing clicked. Clicking a tab should not modify the UI outside of the set of tabs. When going between states, remember the details of the previous state so that the user doesn’t have to set it up again every time he goes back and forth.
  • Staleness
    • Navigation can be enhanced by using a local cache, but this brings its own issues.
    • What about the most recent changes made, which may affect cached data?
    • How does local cache interact with fetched data?
    • How do local changes update global data?
  • Entropy
    • How do we deal with combinatorics explosions of states as the UI grows? UI output should be easy to predict.
  • Priority
    • What appears on top of what?
  • Accessibility
    • Not everyone is using a mouse
    • Color blindness
    • Screen readers
    • Poor vision
    • Contrast
  • Internationalization
    • Support multiple languages while retaining
    • Responsiveness
    • Low latency
    • Ease of updating
  • Delivery
    • Initial code payload vs. later latency when downloading further packages.
    • Idle-until-urgent is a nice paradigm here.
  • Resilience
    • How does the application respond to bugs?
    • Exceptions should be relatively self-contained. A bug in rendering one item shouldn’t cause others to fail.
  • Abstraction
    • How do we properly share common code between different parts of the application? When are two UI components similar enough that we should combine them into a single component?

Thanks for reading! If you have any questions or comments, please send me a note on Twitter. And if you enjoyed this, I also have a newsletter where I send out interesting things I read and the occasional nature photo.

You can check out a recent issue, or enter your email below to subscribe.