UI Patterns: A UX Designer's Perspective
How the KRUTSCH UI Patterns slash time required for app creation.
What are UI Patterns?
If you were to search for a definition of what UI Patterns are on Google, you'd find many definitions similar to the one we like to tell clients: Patterns are repeatable UI occurrences that are present during app design problem solving. Really, they're frameworks off of which we base data layout and visual styling during our app creation process. These reusable structures are more than visual templates because they're tested human interaction models.
Think of Patterns like showroom models. They're a great representation of how information and visual styling could look, but visual and data layout experience will still vary based on app and customer needs.
WHY UI PATTERNS ARE NEEDED
Based on past experiences, we know humans react to information in predictable ways. For example, users will look to the top right or left on a page for the shopping cart on an eCommerce site because that is where they know to look. A well-designed dashboard for an app is where users can see high-level variants of information relevant to the app, no matter what product the dashboard was made for.
A KRUTSCH Dashboard Pattern, left, and a finished Dashboard, right.
Recognizing frameworks we've relied on in the past to effectively organize information, we've in turn implemented faster and cleaner frameworks for design iteration with the use of our own designated KRUTSCH Patterns. We use various visual design software and tools, like Adobe XD sticker sheets and OmniGraffle stencils, to streamline storyboard and workflow creation. This slashes time required to assemble early versions of a digital story.
Okay, so we have Patterns, but how do we choose where to implement them during app creation?
IMPLEMENTING UI PATTERNS
Each of our Patterns was created to address different problems. Some Patterns may solve similar problems, but one may be favored over the other due to the way information is displayed. Our current Patterns fall into four categories:
Linear Information
Nonlinear Information
Data
Feedback
How to Choose the Right UI Pattern
To choose the right pattern we first clarify specific use cases prevalent in the app. And, once decided, we ask ourselves some of these sample questions for selecting Patterns. Does the user need to:
Navigate between complex workflows? (Top Navigation or Side Navigation)
See information both at a glance and in more detail? (Dashboard, Landing Page, or Expanding Table)
Utilize stash-able space for editing or reviewing? (Document Pad or Expanding Panel)
Navigate a workflow in an easy to digest, controlled, or specific order? (Vertical or Horizontal Stepper)
Organize or edit large amounts of data? (View by Tag, Tiled View, Table View)
Receive feedback at certain points of the workflow? (Error Tracking or Sunburst)
Based on specified use cases, we stitch together our Patterns to create happy path stories. These are collections of entire paths a user will take in an app to complete a task. At this point we use simple, hand-drawn sketches to represent the steps a user would take within a story to encourage quick modifications guided by user study results. We're able to iterate more quickly in this manner, while gaining trust and understanding with clients as they're able to see the architecture of their app come to life.
UI Patterns are just another way KRUTSCH gives apps the foundation they need for a successful and timely launch.
End Note
Check out KRUTSCH's own front end developers' take on UI Patterns here.
Follow us on LinkedIn to see the next article in your feed.
Megan Thompson is a graphic designer at KRUTSCH who believes good design is intuitive and uncomplicated.
She is a lifelong learner constantly striving to better her design practice and workflow, and won’t hesitate to integrate new processes as they become available.