Skip to main content

Three Layers of UI Interaction

Drew Powers wrote about how to polish UI and described this process as the 3 layers of UI interaction:

  1. Render area: where does this element appear?
  2. Hit area: what is the shape/size/placement of the invisible interactive area?
  3. Focus area: when Tab-ing, what is the focus ring shape/placement?

What happens when you don’t care for these things? Well, I reckon everything about a UI then feels uncertain and we tend to navigate around with a real lack of confidence. But there’s been many times where I’ve forgotten about that third one!