We’ve been working on project templates in Operately. This PR has before-and-after screenshots from a cleanup of the library page.
The create action originally lived inside the empty state. Once someone created a template, its natural home became the page header. The first use taught one location, and every later visit used another.
Other sections in Operately already kept their create actions in the upper-left corner. We followed that pattern for templates and left the middle of the empty page for a short explanation.
A page quietly teaches people where things live. Moving an action makes them search again, even when the new location feels obvious during a design review.
This changed how I work on empty states. I start with the populated page because it reveals the structure people will use over time. Removing the data should leave that structure intact. The empty space can help someone understand what belongs there.
It also makes secondary controls easier to judge. Search has little work to do with one template. An archive filter becomes useful after something has been archived. Each control can appear when the data gives it a clear job.
When reviewing a page like this, open the populated version first, then remove its records while watching which controls lose their purpose. Keep the main action where a returning user will expect it.
Top comments (1)
The asymmetry in this is worth naming. The empty state is close to the only screen a user sees exactly once, and it is also the one that teaches them where things live. Least seen, most instructional. That is a strange job to hand to a screen that usually gets designed on its own.
Deriving it from the populated page is what fixes that. You stop designing a screen and start designing a lesson about a screen the person has not reached yet.
Loading and error states have the same origin problem with the sign flipped. They also get drawn standalone, but their job is not to teach. It is to survive content the layout never planned for. Same fix, different reason: start from the page that actually has the data in it.