Web Design Principles & Pitfalls

This is a follow up to Chatty DM’s 5 part series entitled “So you wanna write an RPG blog?”  In part 5, “Then What?,” Chatty asks the community to post some additions to his very informative series because he plans on compiling the series, and additions, into an e-book.

I took some HCI (human computer interaction) courses while attending college, and recieved some solid, if dry, information on design.  In HCI they refer to useability as how well the site is designed.  They don’t care about visual impact and fancy graphics.  The bottom line is no matter how good your site looks, if users can’t navigate it and find what they need, it is a failure.

You often come across complicated words like heuristics, which is just fancy talk for trial and error or exploratory problem solving.  You study how your target audience bumbles or glides through your site.  Basically, you give them a few random and specific tasks to accomplish at your site, record their progress (time to execute, facial expression, success or failure, etc.).  If your testers become frustrated, then there is some poor design happening.

I did some searching and found a site that had solid information about usability principles.  They echo everything I remember from the HCI courses, but I’ll boil it down for you:

10 Principles (strive for these)

  • Assume all users are NOT technically savvy (don’t make ’em think too much)
  • Do NOT make them wait (filling out forms, page loads, extensive clicking)
  • Guide users where you want them (direct their attention to what is most important)
  • Be clear (make sure they know what that button does, be objective)
  • Effective writing (make it short & concise, scannable, and in plain language)
  • Less is more (keep the layout simple and clean)
  • Be consistant (maintain a similarly structured sute)
  • Convention is our friend (user expect websites to function similarly)
  • Test it (do a useability test as mentioned earlier
  • Innovate after you have master the principles (you have to know the rules to break them)

10 Pitfalls (avoid these like the plague)

  • intro splash screens (I don’t care about your sweet flash animation, why force users to go through an unneccessary layer?)
  • pop-ups (besides, these days most browsers kill all of the easy to imp pop-ups)
  • hidden or underemphasized log in links (especially if its requiered for content, why another page anyways?)
  • horizontal scrolling and page dragging (wtf! I can’t use my scroll button!)
  • visual noise (is the clipart, ads, gifs, all neccessary?)
  • dead ends and invisible links
  • blocked content (wtf, why is this ad/image hiding the stuff I want to read?)
  • dynamic menus & drop donws (all the sliding around is a pain the ass, besides your hiding topics)
  • blinking images (trying to give me a seizure, eh?)
  • poor color choice (some colors just don’t work, try this effective color scheme app)

Other Tips

  • Every page should be accessible from every page (might be hard with hundreds of posts, but try to keep the depth of your site within two or three clicks, tags and categories help with this)
  • The site I referenced mentioned not opening links in new windows… but I have to half disagree.  Don’t have any internal links open new windows unless absolutely necessary. But you might consider having external links open in a new window, because you want to keep them on YOUR site.

Remember, if you are going to break the rules of design, make sure you know you are breaking the rules and why.  There are exceptions to every rule, just like in D&D.

Leave a Reply

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