How Placeholders Help You Focus on UX: Designing Without Distraction
A common pitfall in product design is focusing on branding before the navigation is functional. To build a product that works, it's often useful to focus on the user experience first and use placeholders until the foundation is established.
The Aesthetic Bias
Research suggests that people often perceive attractive designs as easier to use, even if they are not. This can be a challenge for UX researchers. If a mockup appears too finished or includes a final logo, users might overlook navigation issues due to the visuals. Using placeholders is a way to help avoid this bias.
Why Placeholders Are Used
Removing branding during the testing phase is a way to be more precise. It allows for the isolation of core functionality to ensure that it works as intended.
1. Hierarchy and Structure
A functional interface should be understandable in monochrome. Using a standard placeholder like Logoipsum helps maintain the shape of a design while keeping the tone neutral. This assists in ensuring the information architecture is effective.
2. Efficiency in Iteration
Branding can be subjective and time-consuming. User experience is often based on data and flow. By separating these elements, it's possible to iterate on user flows more quickly, without being delayed by branding discussions.
3. Resilience in Layout
Designing with a placeholder encourages the creation of resilient layouts. Instead of building around a specific logo shape, a container is created that can accommodate different identities. This makes the UI more flexible and easier to update as a brand evolves.
Transitioning from Sketch to Product
There is a common progression used to bridge the gap between a sketch and a finished product:
- Phase 1 (Wireframe): Use simple boxes to focus on how a user moves through a site.
- Phase 2 (Placeholder): Replace boxes with SVG placeholders and standard fonts to test balance without the specifics of a final brand.
- Phase 3 (Final Identity): Swap the placeholder for the final mark. If the previous phases were effective, this step involves minimal layout adjustments.
Summary
Placeholders act as a framework for design, supporting the structure until a project is ready for final assets.
- Isolate the experience: Use neutral assets to get feedback on functionality.
- Maintain momentum: Continue development regardless of branding status.
- Design for flexibility: Create layouts that are not dependent on a specific logo shape.
Using placeholder assets is a way to begin refining a user experience.
