8 Web Usability and Best Practices for Beginners

As a web designer when you are coding and designing website, it is your job to make sure that the site is user intuitive, friendly and easy to navigate. Although these are basic work ethics for every web designer sometime you might miss out a little things here and there, that might get under front end-user skin. Nevertheless, maybe you are starting your way into web design. Here are eight web usability and practical tips for beginner web designer.

The first thing you should always remember is commenting your codes ( HTML, CSS, JavaScript). When you are building applications or web page, it is really important to comment your codes because this way you can easily keep track of the work flow. If there is a lot of div’s or a long stylsheet it can be frustrating when debugging. Also, for instance if you are working in a group commenting is way to let your colleague or acquaintances to know where to look when debugging or making any changes.

Commenting Your Codes

Some Commenting method:

  • HTML/XML/XHTML – <!– HTML Comment here –>
  • CSS – /* CSS Comment here */
  • JavaScript & PHP- // JavaScript Single line Comment here.
  • JavaScript & PHP /* Multiple line JavaScript Comment */

2. Properly Title Web Pages

Proper Title

Sometimes when web designer’s are creating  website they forget to properly title or leave it blank. The web page title goes between <title></title> tag and shows up web browser’s header. Try to keep the title simple, clear and Understandable. Do not use too many tags in your title, these will make the title absurd and too long. Instead describe the site  inside the meta tag and keywords. Your title is not meta. Moreover, do not just leave your title as http://yoursite.com because it shows that you could not come up with something to describe your or your client site.

3. Change Link Appearance on Mouseover

Mouseover in Web Design

Changing your links color or background is must for user visual experience and usability. If you are using image use JavaScript and CSS sprites to change image on Mouseover. For example here is a website that has really great design. However, the navigation menu or buttons throughout the site does not change when you hover. It is a turn off on the user end. If images are hard to either make CSS Sprites or rollover why not use  jQuery tooltip to make your site user-friendly.

4. Link Your Headers and Logos

Link your logo

Although this sounds like dumb tip you would be surprised to see how many websites do not link their header or logo. Linking the logo or headers gives reader an easy option to get back to homepage easily. If your image or logo is inside an image tag just wrap it with a link tag. Easy as pie.

5. Follow the Standard Layout

Wb Page Layout

Following standard layout refers to introducing the viewers to familiar interface and layouts on the web. If you are designing for a newspaper, magazine they tend to have multiple columns allowing viewer read to different kind of content. Whereas personal portfolio, web design studio, web design blog usually focuses on , latest work or latest content featured articles. That is the idea to keep in mind when creating layout for any projects. How your website layout and design flows has an impact on the visitor.

Time Magazine

Tutorial9

6. Avoid Using Ajax

Try to avoid using Ajax if you can because it is not preferable by search engines. Ajax content is loaded dynamically, as a result search engines cannot index it. Therefore, it is a big “No No” for SEO. However, if situation arise where you must use AJAX and there are many  ways to make the AJAX SEO friendly.

7. Use Color Wisely

Color Scheme for Designer

Color is very important factor when designing sites. It it advised to choose color that appeals to viewers eyes and matches your content. Do not mix up too many colors. Different color has different meanings and the color of the website should reflect the product or the person you are presenting or trying to sell . The are some great color tools online that you can use to choose color patterns and scheme. Pelfusions has complied 20+ Helpful color tools that should help you on deciding colors for your project.

8. Check List

08_sitemap

Last but not least here some little things you should consider implanting and reading up when creating a website.

In conclusion, some of these tips maybe old news to some designer nonetheless they are useful beginner. Please feel free share any tips or ideas you have for someone who is staring is web design.


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • Kawsar Ali

    Hey thanks for the kind comment. Will try to produce more post list this

  • Jase

    Avoid using Ajax? Using Ajax or Comet methodologies has a great ability to improve usability if done right. SEO and usability do not go hand in hand.

  • Daniel

    For a Site Map, I use the mindmapping concept, to draw, organize the ideas around the whole project. It’s more known for mapping ideas in a general way than its usage for web projects/design.

  • http://www.adamrobinson.cc Adam Robinson

    just to emphasize #3. color alone should not be used to convey information as this is hard for color blind users to distinguish – always add something extra like an underline, border or bold etc.

  • http://briancray.com Brian Cray

    Kawsar: I applaud you on your intention to teach newcomers practical usability tricks.

    Though I do have a few critiques:

    1. Comments don’t matter at all to the end-user. Having that as your first recommendation negates usability.

    2. Seeing as this article is geared towards newcomers, speaking to AJAX may be speaking over your audience’s head.

    Anyway, don’t let it get to you, I like the article! Cheers my friend :)

    Brian

    • Kawsar Ali

      Brain thanks a lot for feedback. Great insights. I agree what you said about AJAX. Comments is just help to new web designers keep track

  • Kawsar Ali

    Thanks Buddy