Web User Interface Best Practices

When we look at a web page, a uniform style helps maintain a consistent message throughout our visit. Sometimes though, this doesn’t always mean we should experience a consistent UI. What’s the difference? The UI is more than just colors, fonts, link styles, and navigation arrangement. Through best practices, we can standardize – for your own web site – all the elements of your UI for a consistent and user-friendly experience.

CSS is king. I’ve seen many CSS files that act as a dumping ground for every random bit of style – even to the point of duplicating styles. Cleaning up and consolidating your CSS will give you a good view of what you have and what you are missing in your stylesheet. If you have more than one stylesheet, consider combining them into one global stylesheet. It takes less resources to load styles you aren’t using than to load additional stylesheets. Every stylesheet should have the basic elements at the top to redefine the default browser styles based on your UI or Theme. These include the body, links, h1, h2, h3, form, img, div, p, table, and form elements to name a few. I like to start out with zeroing out margin, padding, and border styles followed with defining the body tag. By defining the body style, we set the groundwork for our site. As a rule of thumb, this is where you will set the default font size, font family, font weight, font color, and background color. We then follow this with a definition of the styles intended for all of the other elements we’ll use on your site. Being able to keep a clean and consistent stylesheet will go greatly towards creating a stable UI.

Recycle as a way of life. It may seem monotonous, but one of the keys to a consistent UI is that elements look and act in a similar manner. Forms should be laid out like every other form, tables like every other table, and lists like every other list. When users are presented with a form, they should be given a clear path to submitting the form. Elements of the UI should also be familiar to your users. It’s great to be unique, but users have become accustomed to seeing things, like the footer at the bottom, the header at the top, and identifiable navigation in the obvious and familiar places. If you use widgets and third party functionality, make sure the style fits your UI. Otherwise it will stick out and distract from the flow of your UI.

Tables aren’t dead.
I see a lot of job descriptions for UI Developers requiring tableless web pages. Of course, this means that the general layout of the web page is not contained in one big table. We all remember those days, but fortunately we’ve all learned better. Unfortunately, some developers have taken to trying to reproduce tables in divs. Tables have their uses and should be used when appropriate. Displaying content in tables is clean and easily formatted without the extra effort of cross browser compatibility issues. This isn’t limited to data, but using tables to display forms produces a clean and consistent UI.

Search engines count.
 Are users finding you or are you finding your users? Making your site searchable and easy to understand by text only browsers will increase the relevance of your search placement. If I search for light bulbs and you sell tulip bulbs, you don’t want to focus on bulbs in your keywords and content. Organizing your content using h1 and h2 tags will help a search engine index the content on your site. Think of a word document’s table of contents. By focusing on these header tags, a search engine better understands the different sections of your site and can break them up into primary and secondary content while adding weight accordingly. Researching and understanding how search engines find and index sites will go a long ways toward getting more eyes on your homepage. Having a dynamic sitemap that updates when your site changes will also increase search engine visits.

Posted by Jeremy Bolanos