Creating applications and websites with the user’s point of view in mind is one of the most important strategies developers can leverage. When the user interaction is a priority during software creation, the team can ensure not only the successful usability of a platform, but a beneficial experience for the user as well.

One factor to keep in mind in these regards is the design patterns used to govern a website or application’s navigation. These can present a familiar, usable sequence of gestures for users, helping to guarantee that they can not only utilize the platform, but also find the features and information they’re looking for.

Design patterns explored

According to Smashing Magazine, user interface design patterns are reusable solutions for common issues in software development. While these can extend to platform navigation, UI design patterns solve an array of problems for developers, including usage of space, content display and feature availability.

“Design patterns are standard reference points for the experienced user interface designer,” UI Patterns explained. “Design patterns provide a common language between designers. They allow for debate over alternatives, where merely mentioning the name of a design pattern implicitly carries much more meaning than merely the name.”

In this way, UI design patterns carry a certain weight in the development field, helping developers find common ground and work together to solve interface and usability challenges. These patterns can fall under a range of different problem categories, including:

• Getting input: UI Patterns noted that these patterns help guide the user when he or she needs to input data or details in order to complete a task.
• Navigation: These designs help users identify capabilities that support website or application navigation.
• Onboarding: These patterns enable the user to become more familiar with the platform, gaining the necessary knowledge and skills to effectively utilize it.
• Dealing with data: These help users more easily search, navigate, manage and deal with large repositories of data.
• Social: These designs help users connect and communicate with others online.

Top pattern examples: Solving common issues

There are a few patterns that are seen quite frequently in website and application design, and have become second nature to developers and users alike. These designs solve some of the most common challenges the team comes across during the development process, and help ensure that users can interface with a platform in a way that makes the most sense.

For instance, when it comes to the Getting Input category, the Password Strength Meter design pattern is particularly common. This is the rating system that helps users establish strong, secure passwords during the initial setup of an account. This pattern typically displays the words “Password strength:” after the space in which users enter their potential authentication code. Once the user selects and enters their password, the meter will show a variety of responses, including “Too short,” “Weak,” “Fair,” “Good,” or “Strong,” ranging in colors from red, to orange or yellow, and finally green.

Another familiar Getting Input design pattern is known as the Calendar Picker. This feature enables users to select one specific date, or a date range to submit information. This pattern usually includes a single box for the starting and ending date in the range. When clicked, these boxes allow the user to access a monthly calendar to select the single target date, or the days included in the date range.

The Navigation category also comes with a number of familiar patterns that help users interact with the platform. One example here is the Navigation Tabs design pattern, commonly seen in website design. This pattern separates different classes of information according to specific categories, where each category is its own tab. In this way, users can more easily find functions and information based on the category that capability or detail might fall under. This pattern is best leveraged when developers have a lot of data or content to display, and when the names of each section or category are relatively short.

There are also several Menu pattern designs that are encompassed in the Navigation category. This includes the Horizontal Dropdown Menu design, which closely follows the Navigation Tabs pattern. Here, content is siloed into different sections or tabs, and when users click each tab, a dropdown menu appears displaying additional information. This pattern is most commonly seen in desktop applications, and helps developers display as much data is possible in a small space. A similar design pattern here is the Vertical Dropdown Menu design, where information is displayed in an upright manner, as opposed to horizontally.

Content display patterns also fall under the Navigation category of designs. A common pattern used here is the Carousel, where a large set of items is displayed in a way that enables the user to view a small set of items at a time, and cyclically scroll through for more options. Here, items are typically presented in a more graphical nature, and arrows are included to show the user that more options are available for viewing. Each item will usually have a thumbnail image with a very small amount of text.

Item lists that do include more words or text content – such as articles, blogs or story titles – will usually be displayed using the Article List content display pattern. This design uses the site’s content as a navigation device, according to UI Patterns. In this way, users can read article titles and possibly small snippets of each piece in a list format, and click on specific titles to access the full story.

Social design patterns have also become increasingly popular as users seek to share their online activity via their social media profiles. The Auto-sharing design pattern, for example, leverages granular sharing settings to integrate and post to external social sites like Facebook or Twitter, UI Patterns pointed out. This design will typically display a box that allows the user to comment on the activity he or she is sharing, as well as options for posting to different social channels. This pattern is best when the platform’s goal is to support social interactions. Applications or websites that include personal or sensitive information will typically not include this pattern or capability.

Accessing pattern designs

While UI Patterns is a beneficial source for accessing information about available UI design patterns, it certainly is not the only source. Smashing Magazine pointed out that there are an array of sites that provide these details, including:

• Interaction Design Pattern Library, maintained by Interaction Design Senior Consultant Martijn van Welie.
• UI Scraps, established and written by Experience Designer Jason Robb.
• The UI Pattern Factory, which includes several user-submitted patterns from the development community.
• Functioning Form, the blog of UI Designer Luke Wroblewski.
• Designing Interfaces, the format site for the book, “Designing Interfaces: Patterns for Effective Interaction Design,” by Jennifer Tidwell.

Overall, design patterns are particularly beneficial, not only for developers as they design websites and applications, but for the users leveraging those platforms as well. UI design patterns help developers overcome some of the most common obstacles, providing solutions for the display of content, platform navigation, data organization and social sharing.

To find out more about the best practices of design patterns, contact the experts at Making Sense today.