On a recent project, I had the opportunity to formalize design standards for a web application. The application was designed “organically”… Which basically means it was designed by committee by multiple developers with very little user testing and UX forethought.
While there was no “plan” behind the design, thought and effort were put into every screen – the product owners “knew” the design standards to follow for new screens, even though they didn’t come from any central reference point or a UX designer. The standards were anecdotal, agreed to but never formally noted.
The challenge was to formally document these standards, based on conversations with the team. The best way to do that was through defining design patterns and documenting both the “known” and “unknown” design principles.
Before we continue, let’s clarify terminology: What is a Design Principle?
I like this definition, from a great article on Simplecable.com:
A design principle is a guideline that is adopted by an organization, project or designer that acts as a rule to simplify design decisions. They are intended to reflect the goals of a design and get designers moving in the same direction to create consistent work products.
- The “known” design principles for the application (anecdotally shared) was easy to capture and document. Example:
- Controls are placed flush left to support tough typing and tabbing to the submit action. The secondary control should be presented after the primary control (again, to support tabbing and to emphasize the primary control).
- Functionality that is too complex (and will not be needed by users in the mobile context) does not need to be available in the mobile view.
The “unknown” principles that needed to be defined were ones unstated but based on best practices, research and an understanding of user needs and behavior. Some of these were de facto best practices, and others were specific to the application that existed.
Examples:
- Controls that are not available based on user permissions should not be displayed; instead they should be hidden from the user to not cause confusion and mislead said user.
- Value proposition messaging should be presented in bullets to support “scanability” and usability
- Compound sentences and unclear statements should be avoided.
Consider design principles “ground rules” that the team should follow on a new or existing application. Standards to follow and not contradict. Defining and getting agreement to design principles allows everyone to work and design from the same baseline. And it’s not about defining rules just to have them: It’s about making sure the experience is consistent and works the right way for users.