In this article, Allison talks about breaking the creative boundaries in user interface design. Testing the limitations of design is what creates new design patterns, but not without respecting their purpose first.
As a user interface designer, the most important thing to remember is that it isn’t just you and a blank canvas. There’s a very important third party – the user. Unlike traditional art, they’re not an observer, but a key participant in the final product.
Learn when and where to be break creative boundaries, and when it’s more appropriate to be consistent with what’s proven to work. Design around your constraints; don’t reinvent them for the sole purpose of being “creative.” There’s a reason why certain design patterns are used over and over again — because they’re familiar, recognizable, and they work!
Respect the Boundaries Before You Break Them
We’ve heard of heat mapping, been told to respect “the fold” and referenced things like the “F Pattern” to base our interfaces on. This stems from the newspaper industry, where the most important story would appear in the upper half of the front page of the newspaper and from western culture, where we read from left to right and top to bottom. (Check out Above the Fold by Brian Miller for more information on this topic!) These principles from traditional design standards have created a structure of suggested guidelines for us to follow as interface designers.
While it’s imperative to keep these boundaries in mind when designing, don’t use it as an excuse to limit your creativity. Use them as structure, but don’t be afraid to tastefully “break the rules” and design around your constraints. Step out of your comfort zone — that’s how new design patterns are created!
Establish Hierarchy and Encourage Exploration
The second a user lands on your website or opens your application, they should quickly understand it’s purpose, how it benefits them and what actions they can take. Help them answer these questions by establishing visual hierarchy and arranging the layout purposefully to encourage exploration.
Use size, position, color, whitespace and typographic treatment to draw the eye immediately to a fixed point or anchor with a digestible amount of content that then naturally leads our eye through the rest of the page.
According to Avinash Kaushik of Google, the average bounce rate is between 40-60%, stressing the importance of first impressions. “Everybody has ADD, if you don’t have want they want they leave instantly. You can’t win them all.”
Guide Your Users; Don’t Herd Them
Once a solid visual hierarchy has been established, guide them. Primary call-to-actions should have more visual weight (ex: brighter and larger) than less optimal, but necessary call-to-actions (ex: smaller and muted).
Don’t make assumptions and herd the user or force them to go somewhere they might not be ready to go yet. Give them the opportunity to explore and use your interface as they see fit. Bottom line is that not everyone wants to or will use your website the same way.
Help maintain the user’s focus by reducing clutter and showing only the most applicable and important information necessary for the interaction taking place at that time. This is referred to as “progressive disclosure” and can be achieved through simple solutions like dropdowns and accordions or more advanced technologies like AJAX.
Prepare the User for What’s Next and Constantly and Consistently Provide Feedback
Now that the user knows who you are and where to go first, they should be aware with what effect their actions will have on their experience. You never want to leave them wondering, “If I click here, what will happen?” No one wants to be caught of guard, especially in a new and unfamiliar environment. Because as soon as the user feels out of control, they’ll escape the first chance they get.
Warn them when something’s about to happen and reassure them once it has. It can be details as simple as in-field labels, auto-focus, hover states and thoughtfully written call-to-actions that make the biggest difference in user experience.
Similar actionable elements throughout your website or application should have consistent results. For example, a rule of thumb I like to stick to is dedicating specific colors for buttons and links. I avoid using the same color for headlines, subheads or any other text. It’s a great way to distinguish call-to-actions or hyperlinked text from non-clickable elements. While there’s always extenuating circumstances, it never hurts to be consistent.
All in all, the user will feel more comfortable exploring deeper and interacting more often with your website or application, if they can rely on constant and consistent feedback.
Try, Test, Fix and Repeat
What’s great about interactive media is that nothing is permanent. We can instantly begin improving the experience of our website or application based on feedback we’ve gathered from tools like Google Analytics, methods like A/B testing, or direct input from the users themselves. Our user interface should always be changing.
As designers, it’s our challenge is to balance what’s been proven to work, the business needs of our clients and breaking the creative boundaries of user experience. Testing the limitations of design is what creates new design patterns, but not without respecting them first.