UI Design Pattern Libraries

Patterns for consistency in design and time saved in development

“How can I create consistent experiences for my users and save design and development time?”

The Problem

Many technology solutions don’t offer consistent and predictable user experiences across the board; often, a single application solves the same design problems in very different ways, inciting user confusion and decreasing user adoption.

The Solution

A user interface design pattern is a good solution to a common design problem. Wizards and breadcrumbs are simple examples of familiar patterns. For nearly a decade, Expero has been researching and defining UI design patterns for data-rich, complex environments. With our proprietary library of more than 100 patterns useful for challenging applications and websites, Expero has helped many organizations create their own custom pattern libraries. These clients typically adopt a pattern-based approach to expedite prototyping, encourage code reuse and improve UX consistency.

The Benefits

Adopting a pattern-based approach is no small feat, but the benefits exponentially outweigh the effort. Some major perks we’ve observed include increased usability and user adoption due to consistency and predictability; faster UX design and prototyping by using proven design solutions instead of needlessly reinventing the wheel; and faster, less expensive development when pattern libraries contain code to make the patterns come to life.

 

For more information on this topic, see John Morkes’ blog post Business Benefits of UI Design Patterns.

USER RESEARCH

UX DESIGN & PROTOTYPING

USEFULNESS & USABILITY TESTING

VISUAL DESIGN

The Filtered Hierarchy pattern is used to limit the amount of drilling-in that's required to determine which option a user wants.
Ad-Hoc Filters enable users to find items that share certain attributes or to limit the number of results users must sift through.
The Fixed Inspector pattern helps users frequently access metadata details without leaving the current view.