Menu

It’s not all about you. 5 Rules for Website UI design

by | Sep 11, 2017 | Websites | 0 comments

While the design of a website is based on the goals of the business and strategic decisions to support those goals, it is also highly subjective. Certainly, there are “best practices” that inform a design. But when it comes down to fonts and colors and photos and graphics, we all have our personal preferences and will understandably interject those preferences during the design process.

However, it is important to remember that your website isn’t for you, and your preferences actually don’t matter.

The only thing that matters is the impression that your site conveys to your visitors, along with their ability to interact with your site and use it in a way that contributes to your goals. This is why design should be all about the people who visit your site, and why user interface (UI) design is so important.

We’ve compiled a list of UI elements which you might have a personal preference about but which may contradict your audience’s:

  1. Scrolling. We’ve heard people say they’d like to keep their site pages short because they “don’t like to scroll” or don’t like “those long long pages” or that they want to keep the information “above the fold.” What they don’t realize is it’s likely their users don’t mind. Once an absolute “no no” in website design, creating pages that the visitor must scroll through is now commonplace. And with the proliferation of mobile devices, people are more accustomed than ever to scrolling, it being required on small screens. The popularity of blogs and social media has also contributed to our tendency to scroll through content to find what is most relevant to us. And, careful UI design allows businesses to tell a story through graphics, typography, animations and highly customizable CSS within longer pages. This can encourage interaction as well as reduce the number of clicks someone needs to take to discover content that’s valuable to them. There are disadvantages to scrolling but careful planning of navigational controls and visual cues can alleviate friction for resistant visitors.
  2. Forms. We get it, you want to collect as much information as you can from  a visitor. But, people aren’t necessarily willing to give you every detail of their life right away. Make sure the form length and information you request is appropriate  and only asks for what is necessary to complete a transaction or interaction. If a form needs to be longer, consider multi-step or multi-page forms that guide someone along a path. There are number of UI patterns that can be used to make the task of form completion easier…and patterns create familiarity even if a website visitor has never seen your form before.
  3. Colors.  Picking colors for a website is typically informed by existing branding elements such as your logo. However, if you have a limited palette as part of your brand, you may need to introduce new colors into your site design. Colors can evoke various feelings. We won’t get into the psychology of colors, which could be an in-depth post on its own. In terms of usability and interface design, colors can be used to create visual hierarchy, provide cues and to guide people to take action. For example,  you may not like the color red but it is a great color for error messages while green is typically used for success messages. And colors which contrast each other, like blue and orange, can be used to draw someone’s attention, for example, to a button or a call to action.
  4. Typography. Like color, typography can be used to draw someone’s attention and create hierarchy, making long pages of text easier to read. But be careful choosing your fonts. The fonts you choose convey information about your business to your audience, whether intended or not. You may really like Comic Sans. But please think twice before using it. Same goes for Papyrus. And many others.
  5. Whitespace. Businesses often have a lot of information to convey and departments vye for limited space on a page. As such, they see white space as a waste of space. But white space allows you create a path through a page and to draw attention to specific elements. Rather than simply trying to make everything BIGGER, bolder, brighter, white space can be used to focus attention on an element or critical areas of the page. White space doesn’t necessarily have to be white. It can contain images, textures and colors and is used between other elements to move the visitor’s eyes through the page and through the story. White space can also make content easier to read and digest; and we can all agree that improved comprehension is good for business. A confused visitor is more likely to leave your site prematurely and dissatisfied.

We all have our own experiences and preferences. But it’s important not to ignore standard patterns and conventions. They are standard for good reason. The more time a visitor must think about the elements on the page, such as seemingly-clever icons, the less time they spend actually engaging with your site in a meaningful way. Creating familiarity can increase clicks and interactions. Make sure your site is consistent. People learn from page to page what to expect. Make it easy for them to pick up what you’re putting down, and to interact with efficiently to make their experience more enjoyable. And don’t forget to review your data. Tracking events and user interactions can tell you how well your site addresses the needs and aptitude of your audience. Because, remember, it’s all about them, not you.

Related Posts

Share This

Share this post with your friends!