An Introduction to UI Design Patterns

What Does UI Stand For? An Introduction to UI Design.

UI stands for User Interface. User interface design patterns are well-thought out and reusable solutions to the layout and interface problems we encounter every day. For instance, the majority of users are accustomed to seeing a website’s main navigation displayed horizontally along the top of a website. Placing it anywhere else on the page would likely result in confusion. Like many things in life, a website’s interface benefits from patterns because they help create consistency for the user. While creativity and thinking outside the box are elemental to good design, so is conformity. If common UI design patterns are ignored, impatient or frustrated users can give up and switch to your competitor with the click of a button. That’s why design patterns are so important today — paired with good design principals they provide proven recipes for making a website as user-friendly as possible. At Webolutions, we strive to collect the finest UI best practices and web design patterns for the ultimate user experience.

User Interface Design Issues

One of the biggest concerns regarding design patterns is that they might compromise creativity, but this is not true. Web design UI design patterns are more like blueprints or wireframes than finished designs. Let’s consider a simple contact form. They typically have a number of input fields, a text area, and a submit button. A common form design pattern dictates that the input fields are positioned first, the text area second, and the submit button at the end. If the order is changed and the submit button is placed first, the pattern is destroyed and confusion ensues. As long as the integrity of the design pattern remains, the designer has the freedom to customize it for each design context. The actual design of the form, e.g. colors, typography, etc. is more theoretical while patterns are more practical.

Other than providing users with a consistent user experience, UI design patterns accelerate the design process, especially amongst a team. At Webolutions, we’re constantly developing our library of proven UI design patterns and best practices, leading to more rapid development. This also allows us to design websites with more confidence and less guesswork. We’ve implemented a handful of these UI design patterns into our Enhanced WordPress platform.

Important UI Design Pattern Considerations

A few of the more important user interface design patterns included in our Enhanced WordPress platform are grids, the horizontal navigation bar, breadcrumbs, and hierarchical actions.

• Grids help organize imagery and content, create alignment, and apply Divine Proportion to the page. Grids also help create clear primary and secondary points of interest for the user.
• The horizontal navigation bar pattern usually involves the main navigation spanning the width of the page to the top directly below the logo. Usability research has proven than users have the most amount of interaction with a navigation in this position.
• The breadcrumbs pattern provides a visual representation of navigational hierarchy and come in handy to help users find their way through page levels. Positioning the breadcrumbs directly above the content but below the main navigation is also an important aspect of the pattern.
• Finally, the hierarchical actions pattern is a little more complex, but essentially helps the user identify which pieces of content are the most important by displaying more important things towards the top of the page and less important things near the bottom. Shapes, icons, and color vibrancy can also be used within the hierarchical action pattern.

How to use this Information
Here at Webolutions, we utilize the UI design patterns described above to provide the best possible user experience for all of our websites. If you would like to learn more about how Webolutions can help you with this or any other digital marketing questions, contact us online or give us a call at 303-300-2640.