Learn More About How to Design a User Interface for Your Audience

Page content

This will be a series of several articles, in which I will try to help you keep your audience in mind when designing content. You will notice that some of the most popular websites on the internet are often the most simplistic and well designed. Learn about this and more when you read Quality Web Design Tips.

Note: This article assumes a certain experience-level with designing and programming websites, and will not go into detail on how to program each suggestion.

Testing your website

Before even discussing the other points of this article, I felt that this topic should be discussed first. Testing can be an often overlooked task when designing a website for one reason or another.

There are many items that need to be addressed in this step in order to ensure that everyone gets the same experience you seeing on your monitor. All it takes is one little thing, visually, for a user not to want to return to your site.

  • Your site should be optimized for most monitors. You may have a massive monitor running a resolution above 1280x1024, but your audience most likely doesn’t. So, I would suggest not to exceed a width of 1024px (according to Wikipedia, about 48% of the web’s users are at 1024x768)
  • This brings me to my next suggestion. Some people are firm believers that a user should not have to scroll to view your site’s content, which means your site’s height shouldn’t exceed 768px. With this practice, comes the use of many pages in order to break up the content and may not be possible for your site’s material. Therefore, I would suggest not to exceed 11in in height per page (US Letter Size; 8.5"x11"), and stay well under it. The last thing your user wants to do is scroll through endless amounts of info to find what they are searching for.
  • Test your website in both Internet Explorer and Firefox, which are the two dominant browsers on the market. You may notice that some CSS settings will appear properly in one and not the other, which means exceptions will need to be made for each browser in your code.
    • Opera holds a small amount of the browser share, so it might be worthwhile to test in that environment as well. There are some testing tools out there that allow you to test it without installing the actual browsers.
  • Test your website on different computers. This will allow you to see how your website looks and performs on different monitors, graphics cards, processors, and internet connections.

Designing the interface - Part I

As I mentioned earlier, you need to design your site’s dimensions while keeping your audience in mind. Next, we need to actually focus on the interface, more specifically, colors and images.

  • Use background colors for your site that will compliment the content that you are posting on it. For example, if you are going to be posting a large amount of text, try to stick with a lighter color background that is easy on the eye.
    • Here is an article on complementary colors that will get on on the road to thinking about proper combinations of colors.
    • Here is another article to help you in your color combination decision.
  • Select a web-safe font. There are fonts that are specified for web use not only for how they appear on the screen (it looks the same on all platforms), but because they are standard issue fonts that are shipped for most Operating Systems on the market.
    • For example, a web browser will substitute a font if it cannot locate it on a user’s computer. The end result can be something that is not what you intended.
  • Don’t use distracting images or repeated patterns as a background for your site. The last thing you want to make it hard for the user to actually concentrate on the material.
  • Don’t clutter your page with multiple GIF animations, or animated content in general, you can easily distract the user’s eye with there is chaos on the page.
    • This is a common mistake for many younger people when designing their first webpages. They will have one giant sized paged, and an infinite amount of images and animations cluttered throughout it. This is not only annoying to the eye, but may cripple a web brower and make it very slow because it is attempting to parse all of the objects at the same time.
    • Don’t use an excess of flash animations. Try to keep it to a minimum, and only design a site completely in it when it is applicable to your site’s audience. Remember, many users are not keen on flash any more, and have installed blocking add-ons in their Firefox and IE browsers (like FlashBlock).

Designing the interface - Part II

This section will focus on designing efficient navigation for your site.

  • Create a uniform navigation bar to be displayed at the top or side of every page, either way, just make sure it is consistent on every page. Don’t try to squeeze every single possible category onto your bar. Instead, try to organize them into groups (use Bright Hub as an example). For instance, let’s say that you have a gaming site, your navigation should be something like this (main categories, leading to pages with tables of contents; or pull-down menus with you know how to impliment them):
    • Home/Main Page
    • PC
      • Games
      • Accessories
    • XBox 360
    • Contact Us
  • Offer a “return to the top” links on longer-sized pages to help users not to excessively scroll.
    • With that being said, also offer anchors (an older practice) on the top of your page to different sections of your article, etc.
    • Try to size the links so that they can easily located by the user, but are not distracting to the actual content.
  • Offer links in the footer of your page using a smaller, less distracting font.
    • For example, you may want to include a site map, a link to contact you, a link to a site privacy statement, or maybe copyright information.
    • Commonly, sites will include a text version copy of the navigation bar that is at the top of the page.
    • Keep in mind when using smaller font sizes that the text can become unreadable, which stresses the testing portion of this article.
  • Try to be as logical as possible when creating navigation links. Remember, you know how to navigate the site because you designed it. However, someone else may have a harder time finding the content they want, and will eventually give up.
  • Make sure that every page has the ability to go back to the main page of the site. The easiest way is to link the site header image to your index.html document of the site.
    • Since this is a very common practice and most users are accustomed to this, it is recommended to include it as well.