Promoting better workflow in UI design through manageable decision-making and thought process.
A well-designed UI is the result of a string of key decisions that not only make an experience intuitive, but also aesthetically pleasing to a user. By making the decision-making process more streamline, it can enable an easier workflow and a higher chance of producing the optimal result.
The more possibilities available in the design process, the more thinking required to execute and finesse.
American psychologist Barry Schwartz wrote in The Paradox Of Choice that eliminating choices can greatly reduce anxiety. He argued that we should have standards and a criteria, but not worry about the possibility there might be something better. It was in the context of consumers, but I believe it applies to design decisions too.
The maximizing strategy is actually to not be a perfectionist, but make the most favorable decisions available that collectively create the optimal experience.
1. Limiting Variables
If we consider all the potential variables to produce a high fidelity concept, and there can be many, it becomes clear that we need to limit and define them early on. Reducing the amount of choices available will make it easier to be decisive.
With experience, it becomes easier to predict how limiting certain groups of variables have a multiplying effect throughout a composition.
Reducing choices doesn’t correlate to reducing originality. Our assumption is that creating concepts around predefined rules is a limitation, but as designers we can establish our own rules, and be in complete control of formulating them.
Scale & Spacing
Every facet of UI design should revolve around a system that promotes rhythm and helps maintain consistency in scale and space as a project grows. One such system I love to use is modular scale, which can facilitate a scale from any given ratio to measure or set the size of an element or negative space in a composition.
While it can reduce variables on grids, typography, vertical spacing and the overall dimensions of a layout down to a manageable level, it also provides pleasing aesthetics and rhythm. Designing UI is far easier with a system like this.
Grid systems are great for restricting how content is organized within the horizontal plane and a no-brainer when it comes to UI. However, a grid is often picked without too much thought, to be a one-size-fits-all. What most designers don’t realize is that it’s better to create a grid system that is built around the content.
This means ideally having a clear understanding of content scenarios in advance so that it paints a picture of how to better serve the content from a particular grid. Think of the business constraints with preexisting assets and brand guides, such as a logo that has specific spacing rules and requirements, or perhaps ads with specific fixed units.
The type of content is also a factor. There’s a big difference between devising a layout for a shop, news publication or blog, or a simple splash page. A layout that is image-heavy vs. word-heavy. It could be helpful to understand eye-scanning patterns and how they have an impact on visual hierarchy.
The more understanding of the business and content restraints upfront, the easier it will be to pick a grid system and make layout decisions.
I would argue that typography is the most important aspect of UI design, as it can make up to 95% of the web and be the driving force of communication.
While systems like modular scale can be applied to size and leading, font families and styles can also be limited. A UI should never need to exceed two families and a couple of weights. Rules can also be extended to how justification and title case is handled.
It’s easy to get over-zealous with palettes. A small range of tones can go a long way to producing sufficient and consistent visuals. Usually all we need for a starting point is five swatches.
Most brands should incorporate a primary or accent color, and a few neutral or contrasting tones to compliment it. We don’t need 15 shades of one tone, especially at the beginning. It’s better to start small and augment a shade or two later on.
How we incorporate images into UI is largely determined by the context of the content. If we have a rough notion of what that is, we can create a starting point for our images with variables for ratio, size, shape, and treatment. We may find that we don’t need that many.
Limiting our image variables will enforce better consistency and make it easier to manage image assets in the long run. The same goes for iconography.
2. Creating A Style Guide Earlier
As a UI project grows conceptually it becomes increasingly important to create and maintain a style guide, or pattern library. This will establish design principles to help the project scale, maintaining rhythm and consistency. If we’re defining variables beforehand, it’s a good way to document them. Future decision-making is going to be easier with a style guide than without one.
Depending on the project, creating a style guide is a luxury and quite often intended for future reference. This is why most style guides get put together at the last minute or after the project is complete, and that’s still good practice. But while there is plenty of post-rationalization and reasoning for a style guide to aid prospective design and development, it can actually help build up fidelity in the early stages of conceptualization.
Creating a basic style guide right at the beginning will not only establish principles early on to reduce design decisions, but also help as an infrastructure to evolve and augment principals going forward.
Making one at the start doesn’t mean it has to be complete — far from it. Styles tend to evolve more in the early stages anyway, and the bigger a project gets the more clearer and tighter the boundaries become.
3. Modular-Based Priority and Adaption
In modular-based design systems, such as Brad Frost’s Atomic Design, a layout can be formulated out of specific key areas. Modules become reusable throughout various layouts. Interfaces are treated as systems and not pages, with pattern-based design and development a big part of the process.
This is a great methodology and it makes UI design much more manageable, but to make it more effective we have to prioritize the key areas and adapt everything else around them. This in turn will ensure there is visual coherence.
Identify Key Areas
Our design should revolve around the important parts. The priority of each area is determined by its content or functionality within the interface, and is essentially the key to the puzzle.
By focusing on the important areas first, we are reducing design decisions thereafter as subsequent areas have to bend and adapt to established surroundings.
Focus On Key Areas
Once high priority areas have been identified, it’s about super-focusing on the critical parts and finessing them to completion. The idea is to ensure they’re intuitive and meet all requirements before adapting the less important areas.
4. Making It Work For Everyone
For thousands of years designers have strived to do one thing — communicate effectively. We’re continually reinventing and fine-tuning ways to better communicate visually and audibly to an audience.
With ever-increasing access to information from the widest possible audience, it’s become imperative to maximize accessibility to as many types of people as possible.
Accessibility Is A Blessing In Disguise
Catering to a wider audience sounds like more work, and it’s tempting to see accessibility as a barrier to innovation. However, complying with the latest standards can be a blessing in disguise, especially if they become second nature.
Examples of this in design terms could include requiring that we need a minimum font size on body copy, or a significant amount of contrast between copy and background, or bigger linkable areas on touch devices.
It’s Not Just About Disabilities
Accessibility is not just catering to disabilities as some would imply, but also to users with legacy devices and browsers that don’t support all the latest features and enhancements. Being conscious of these standards and observing them will naturally reduce design decisions.
5. Using Tried And Tested Patterns
The fact is, users find interfaces intuitive when they conform to the hundreds of common design patterns they have absorbed from years of practice and exposition. As soon as we start breaking away from typical molds and treading new ground, we may find it takes time for a new pattern to become completely intuitive to the masses.
There’s a time and a place for creating original UI patterns, but we shouldn’t shy away from common techniques — they’re successful for a reason.
The silver lining is for us to worry less about reinventing, and concentrate on aesthetics. It is still possible to create original work based on established patterns.
The more we get to know and integrate successful design patterns, the less choices we have to make as designers. We’re not necessarily considering what might work, but what will work.
Some of these approaches may individually not reduce our thinking and decision-making greatly, or improve our designs by a huge margin. Incorporating them together however, along with getting good feedback along the way, can make it significantly easier to design better UI.
By Christian Miller |
Follow me on Twitter