Some posts in this section are placeholders for now.

Please follow my Facebook page if you want to be alerted when I post new articles. You can view my portfolio here. Thank you for your patience.


Some Simple Guidelines For User Interface Design

Web users have become more advanced since I started building websites. They have grown used to user interface elements arranged a certain way. Here are a few simple rules to follow during the schematic phase of a UI design project that will help get the team going in the right direction.

  1. Create a hierarchy that follows the same pattern that the user reads.

    English language speakers read left to right, top to bottom. We should organize an interface hierarchy the same way, moving left to right, top to bottom. High level items like “log out”, or “profile settings” will be in the top row while the specific task the user is engaged in will be underneath and closer to the center of the page.

    Here are some examples of early stage mockups I created for a contextual advertising user interface…

  2. Don’t be creative with navigation

    That’s right. Keep it simple stupid.

  3. Create a foreground and a background.

    Don’t take this too literally. Drawing from my direct marketing tips post, yada yada

  4. Use distinct font sizes.

    Make sure there is a significant variation in font sizes. You should not have 11,12, and 14 pixel fonts on the same page. Spread out the font sizes so they are more like 12, 18, and 26 for example. Limit the total number of font sizes to 3 or 4. Limit the number of fonts to 2. Large fonts can be more decorative while the smaller fonts should be optimized for reading legibility.

  5. Use the across-the-room test

    Stand back 10 feet from the computer. Can you see the application’s flow clearly? Do you know where you should click? Can you tell the difference between the site navigation and the current task at hand? On most PC browsers you can click CNTRL– (that’s the CNTRL key plus the minus symbol) or CNTRL-+ to zoom out and in respectively. I use this often to illustrate the concept to a team on a projected screen.

Please follow my Facebook page if you want to be alerted when I post new articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>