UI /UX Patterns

…a problem which occurs over and over again in our environment, and then de- scribes the core of the solution to that problem…

We at backdrop try to document the Interaction design patterns which are a way to describe solutions to common usability or accessibility problems in a specific context and used in backdrop core. They document interaction models that make it easier for users to understand an interface and accomplish their tasks or goal.

Elements of an interaction design pattern

We at backdrop organize the common elements to describe the UI/ UX patterns with the following elements:

• Pattern Name - Choosing a clear and descriptive name helps people find the pattern and encourages clear communication between team members during design discussions.

• Pattern Description - Because short names like “one-window drilldown” are sometimes not sufficient to describe the pattern, a few additional lines of explanation (or a canonical screenshot) will help explain how the pattern works.

• Problem Statement - Written in user-centered language, this communicates what the user wants to achieve or what the challenge is to the end-user.

• Use When - “Context of use” is a critical component of the design pattern. This element helps people understand situations when the design pattern applies (and when it does not.)

• Solution - The solution should explain “how” to solve the problem, and may include prescriptive checklists, screenshots, or even short videos demonstrating the pattern in action.

• Rationale - Providing reasons “why” the pattern works will reinforce the solution, though time-pressed developers may prefer to ignore this explanation.

• Examples - Each example shows how the pattern has been successfully applied This is often accompanied by a screenshot and a short description.

Categorization

We at backdrop categorized the patterns used throughout the backdrop as follows:

• User Input
• Playing with Data
• Navigation
• Miscellaneous