Monday, January 21, 2013

Tips To Improve Your Website and Improve User Experience


At work we have been toying with updating our current website and that got me wondering if there were any good rules of thumb we should employ to make a great website. 

I see many posts on using web analytics tools and thought that exploring suggestions on how to take the ‘broken’ or less-successful website and improve the user experience as a natural extension to what we are discussing. I know that these principles are often pushed to web designers but as users of the usage feedback it is vital to know how to improve. Below I have compiled a few suggestions on easier navigation and website color schemes principles.
 

Easier navigation:

Popular Blogger and founder of Studio Press, Brian Gardner has provided 5 tips to improve your website in his blog which I thought were useful[1]. I have summarized them here along with a few DESB examples.

1. “About” Page
This is possibly one of the top 2 pages of most websites. Don’t skimp on the content and if in doubt, include the information. Use this page to form a personal connection so they feel they ‘know’ you or your company at a much more individual level.


2. Testimonials
These should be prominently displayed so you can demonstrate that you have successfully assisted customers and can help them with their needs. If this component of the site is neglected Brian indicates that you will slow the pace of gaining even more business.


3. Contact Information
This seems like a common sense type of inclusion in your site but Brain claims that it is too often missing from websites. He said if someone has to hunt to find how to engage you then they will go elsewhere. He also suggests to not just list an email address, but do add multiple channels viewers can use to contact you. Many people prefer emails but there are others that prefer to call.
 


4. Search Feature
Customers that have to look around to find what they are looking for will ultimately  go to competitors if you don’t make it easy for them.

He also indicates that it is easy to add such tools to your site and it could make an enormous difference.


5. Subscription Options
Although more applicable to websites with frequent content updates it is important to allow users to opt-in to keep up with changes/updates to your content. It will also provide a list of opted-in people that agreed to be emailed, RSS fed or otherwise connected to your content. This opens another avenue to communicate with your customers.


Of the above 5 items our site at work currently has 1-3 but does not have a search feature nor a way to subscribe to the site. I think that we should include those into the new rollout of our site.
  

Color Schemes:

I found another website that listed a topic to help improve user experience I had never really considered - color schemes. [2] Below I summarize the 4 basic color schemes that could be used for your website (which should be tested with A/B testing).

Most of the scheme techniques are based on the color wheel:

 
Monochromatic
This scheme uses colors of the same hue. Many have varying tints or shades depending upon how much it is darkened or lighted (white or black is added).


Monochromatic color schemes are often the easiest on the eyes of all the color schemes. The subtle differences in tint and shade make the colors flow, or bleed, into one another better. This color scheme is best used to make your site appear more fluid and collected.

Analogous

Utilizes colors that are close to one another on the color wheel.

Analogous colors can often work very well together, but sometimes they can clash badly. This is a color scheme that should be fully tested. When the colors in this scheme work they create a site that is more colorful than the monochromatic scheme, with almost the same level of fluidity.

Complementary
This color scheme is often seen as "opposite" because the two colors in a complementary color scheme are opposite one another on the color wheel.

Complementary color schemes are characterized by normally having just 2 colors – a base and its opposite.  This color scheme provides a much more striking feel than other color schemes, so use them with care. But, such shocking feel can be exactly what you were looking for.


Triadic
Characterized by using colors that are evenly spaced on the color wheel.

Triadic color schemes typically use 3 colors more or less equally spaced around the color wheel. This scheme often produces very vibrant Web pages. Be sure to test as with complementary color schemes, they can affect people differently.

I hope this post provided a few items to look at to improve your website as it was helpful in evaluating what we could do to my website at work.

Here are a few other websites not used above but I found were interesting on the topics above:

Easy website navigation:
http://readwrite.com/2010/09/17/6-tips-for-building-coherent-s
    Give some good tips on better navigation.
http://www.e2solutions.net/articles/tips-increase-navigation-web-design.html
    Quick list of suggestions.
http://www.webmasterview.com/2012/09/web-design-tips-site-navigation/
    Good additional items I did not consider.
http://www.icebomb.co.uk/blog/2011/03/5-simple-website-navigation-tips/
    5 simple suggestions to improve navigation.

 Color Schemes:
Tools:
http://designshack.net/articles/inspiration/25-awesome-tools-for-choosing-a-website-color-scheme/
    Lists 25 different tools to assist in finding the ‘right’ color scheme for your site.
http://speckyboy.com/2008/01/13/top-10-resources-to-the-perfect-color-scheme-for-web-designers/
    Lists their top 10 resources for Perfect Color Scheme for Web Designers
Examples:
http://tympanus.net/codrops/2011/12/08/25-examples-of-perfect-color-combinations-in-web-design/
    Shows a number of mockups with different color schemes. Some are very cool!
http://inspiredm.com/colour-schemes/
    This sites lists 50 ‘beautiful’ website color schemes.
http://spyrestudios.com/29-website-designs-using-bold-color-schemes/
    Lists 29 sites that are using “bold” color schemes.
Guide:
http://wpmu.org/choose-color-scheme-your-website/
    help you choose what colors to consider for your site.
http://meyerweb.com/eric/tools/color-blend/
    add your base colors maybe your corporate colors and it will provide ‘nice’ complements.   

 [1]      http://www.briangardner.com/website-elements/ viewed 1-19-13
Good quick tips on website improvement.
[2]     http://webdesign.about.com/od/colortheory/ss/aa040907.htm  viewed 1-19-13
Interesting discussion on how to use color to enhance your website.

#betterwebstie