Web Design Tips, Tutorials & More!

Some UI Design Patterns

Have you ever used a UI (user interface) design pattern to address your design issues?  It’s likely you’ve done so without ever realizing it.  A design pattern is a cluster of regularly occurring, commonly used design practices, such as the use of late registration, meant to be used over and over again.  This concept was first solidified in the field of architecture, but translates well into other artistic contexts, including design.

UI design patterns act much in the same way as design templates do, offering a convenient group of recurring patterns for designers and developers.  They address user interface issues, such as account registration, with concrete design practices that work every time.

In this post, we’ll explore a few UI design patterns that save time and increase usability.  Take a look.

Late Registration

Some would say that the registration form is marked for destruction. This reflects a current sentiment among designers and users alike that registration forms are completely annoying distractions that take away from a site’s usability.  However, registration forms do have a place in the web universe, but what place is that?   Many designers are opting to delay registration forms until the very end of a process to keep users happy and engaged in the main content of a site.  Amazon’s shopping cart does a great job of this below.

Progressive Disclosure

Ever clicked on a “Replies” link within a comment box that then revealed the actual responses to the comment?  If so, you’ve experienced the progressive disclosure design pattern.  It’s great in that it keeps the layout clutter-free, only revealing information normally kept hidden until it’s needed.  “Show,”  “Show more” and “More from…” links are also often used as demonstrated below.

Breadcrumbs

This design element feeds off the concept of leaving a trail behind you, with breadcrumbs, perhaps, to find your way back to a certain location to keep from getting lost and as a way to navigate the uncertain territory.  Similarly, the design pattern noted here shows a secondary navigation usually not on the home page, that gives a visual representation of the site’s hierarchy.  In other words, this design pattern shows the path a user has taken from the home page to the current page.  It’s usually displayed as a trail of links but could also be displayed as graphic images as in the example below.

Account Registration

Tumblr’s site has, by far, one of the best UI design patterns for account registration.  Shown below, the form requires minimal information making it convenient to users with little patience.  The UI design pattern for account registration is simple.  It includes:

• a short form with few elements allowing users access to protected or personalized content
• persuasive copy explaining the benefits of signing up
• Usually leads to a place on the site where visitors can store information that will be used each time they visit the site.

Many benefits exist here.  For instance, this design pattern allows users to enter information only once, but that information can then be used again and again on the site without the need to re-enter.  A good example is shipping information or credit card information.  A few registration forms are displayed here.

Conclusion

The list of design patterns goes on.  Here are a few more design patterns to consider when building a user-friendly website:

• Primary Actions – highlights primary actions, such as the save button on contact forms, so that they stand out to the user
• Required field markers – shows which field of a form are required for completion
• Steps To Go – shows the remaining steps in a multi-step process

Leave a Reply