How to Choose the Right Design for Your UI Project: Existing User Interface Patterns, User Needs, and Branding Preferences
There are a few ways to approach a UI design for a specific layout down, and you can approach this in three areas. Existing UI patterns and best practices, User needs and the reality of usage, and branding needs.
Wes Hunt
There are many factors to consider when designing a new user interface (UI) design. Approaching a new layout and design for an interface can be challenging for all of us. Do you base everything on user preferences, internal stakeholder preferences, or your personal stylistic preferences? You must take into account the existing user interface patterns, the user's needs, and how they will interact with your interface. Additionally, you must also think about branding preferences and how they will affect the design of your website or app. In this article, we will explore these factors in more detail and help you decide which design is right for your UI project!
There are a few ways to approach a new UI design for a specific layout down, and you can approach this in three areas. Existing UI patterns and best practices, User needs and the reality of usage, and branding needs.
User-Interface Patterns Help Build New Designs
There are many general UI layouts and practices that are based on how users process visual information, cognitive abilities, and accessibility. Most of these are updated and improved over time, but are independent of trends and fads.
UI Patterns Rarely Become Outdated
There's is a misconception that UI patterns become outdated, or ones that are several years old shouldn't be used. UI layout patterns don’t have fads and rarely have trends, any trends evolve slowly. This is based on the problem of confusing art with design or graphic design with UI/UX design. Art follows trends that may change rapidly or go into dead-end fads. Art is an expression of an artist and may not have constraints around the people interacting with it. Design, however, especially UI/UX Design, always needs to be functional first for the consumers of it and based on how it meets user needs and addresses the way humans process information from an interface. How humans process information changes slowly, and some processes do not change at all. Patterns usually only change when interfaces change, for example as people became more mobile and using phones, tablets, and laptops. As mobile screens become higher resolution and bigger, this also has slowly forced patterns to shift. For example, thumb-reach dictating placing the most important action items at the bottom of a mobile UI instead of eye-tracking patterns which dictate placing actions at the top.
UI Patterns Give You a Framework to Start New Designs
UI patterns are based on tried and tested designs that are based on how users process sensory information (don't forget, UIs aren't just visual!), or have been trained by other interfaces to do tasks. For example, F or Z-shaped eye-tracking patterns are common scanning patterns that UI patterns need to be designed around. Planning a layout that either takes advantage of these patterns or intentionally conteracts these will make your layout more readable and important elements findable.
There is value in using design patterns from your industry and your users’ experience. This can be a little tricky, but you want to provide your users with a familiar layout so you don’t have to retrain them on something new. This is tricky because often others in the industry may have zeroed in on using dark UI patterns based on bad intentions or bad data. For example, SAAS designs that downplay existing user logins for new user signups, this is a common pattern but was discarded quickly by the companies that pioneered it many years ago. Remember, use patterns that follow good principles of usability and accessibility, be careful blinding copying ideas from others if you don't know what user research they do. At the same time, even if you are designing a financial site, your users don’t exist in a vacuum, they may be more accustomed to social media site layouts by a large factor Than with other financial sites. When I do mobile enterprise and healthcare designs, I still have to take into account what mobile Facebook, Youtube, and native mobile applications look like.
There are also several design pattern libraries you can reference: UX Library list of UI pattern libraries
User Needs and Reality Always Factor into Designs
Standard UI patterns are a good place to start because they are based on tests and successes over time with users. However, the next step is user testing UIs with your users and analyzing the current usage of your organization's users.
User testing layouts are about the easiest type of testing you can do. All you need are 5-second tests of your alternate mockups, asking the user to find (ie, click on) an item. There are tools that facilitate this out there, but it works by showing the research participant an instruction screen “Where would you go to find X documents?” and then shows them the mockup for 5ish seconds. You then analyze how many participants click on the correct link/button. Just be sure not to lead the user and frame the questions with user goals in mind, not the label you used for the component.
This brings up another good approach that should happen more than it does, which is talking to users. Ask them what they look for when they are looking at investor relations pages, and be sure to ask “why” a lot to drill in on their actual goals. This really should be what drives every design, and hopefully reduces nonsense that internal stakeholders want to put into a design. You want to establish what your users' mental models are, especially when determining labels and what features will go into your new layout. Many companies skip user research to "save time", but in the long run, it usually would've saved them time and money by preventing customer churn and redesigns later on. Iterations are good, but even early designs should be informed by real user insights.
By “Reality” I mean also looking at statistical usage of similar pages at the organization. Whether you believe a certain assumption or not, users will be the ones to decide. Looking at existing analytics and usage is important to address the reality of how users want to use your designs. Whether internal stakeholders believe users want to do X, only users will decide that. I still hear project managers claim that their users don't use mobile to view their sites, so no need to do mobile designs now. Current usage and industry metrics will determine this, not internal assumptions. What percentage is mobile? Be sure to look at landing pages, if the existing designs are anti-mobile or whatever, the pages may turn off mobile users continuing beyond the landing. For public pages consider any industry trends for device/time/regional usage that you can find so you can see how current pages stack up with what is happening in the industry. Most public-facing layouts should have a responsive design approach from the start.
Branding and Personal Stylistic Preferences Still Play a Role
Style is still very important, even if it mostly should be considered behind patterns and user goals. Style and branding are what make the design stand out and be memorable. Users are more likely to look past usability issues or defects if they find the design pleasing. This will largely be dependent on brand guidelines. What brand guides does the organization already have? Reach out to the marketing department, they generally hold the keys to brand documents. If you’re lucky and it's a newer company you can talk brand approach with senior stakeholders or even the founders. You may be able to shift the design towards better practices or to what stylistic approach you have personally. In the past, my most successful projects were always collaborative with the main internal stakeholders of the company and departments. The stakeholders had an approach they wanted in design that went against the industry or the VP was able to see their contribution in the finished design while I shifted things towards better usability and accessibility. In some projects, we deliberately went against industry stylistic trends, but still used solid UI layout patterns for usability. Our users loved it because it broke up the monotony of their work while still helping them. That is an approach I may never have felt comfortable doing without collaborating with my internal stakeholders.
Summary
There are three key factors to consider when choosing the right design for your UI project: existing user interface patterns, user needs, and branding preferences. It's important to do user research to understand your users' mental models and what they're looking for in your UI layouts. You also need to look at the statistical usage of similar views and how users actually use the site. Branding and personal stylistic preferences are also important factors to consider.
Taxonomy:
ui design