AKA Marketing.com Logo            VISIT THE BLOG            

Blogged thoughts, is our web blog. Expect views, opinion, rants and tirades about everything and anything 

« Home / Forums »        

 


Subscribe to our SEO / IT related blog by entering your email address below

Blogged thoughts

| by the www.akamarketing.com team

Archive for the 'Usability' Category


Web developer tools included with Internet Explorer 8

Sunday, March 22nd, 2009

I downloaded the latest version of Internet Explorer the other day and although at this stage I can’t comment too much on the browser as a whole I was pleasantly surprised by the developer tools included with Microsoft’s latest release. I’ve used the developer toolbars for IE 6/7 & for Firefox but it’s good to see something like this included in the core IE program.

Common developer tasks such as viewing pages in different resolutions, quickly viewing outlines of pages (CSS classes, DIVs, tables, image containers etc.), validating pages and measuring elements are all included. In fact pretty much everything needed to decompose & desect webpages is available including a nice Javascript debugger which means you won’t have to switch to Firefox to see meaningful JS related messages anymore. I’m also liking the CSS profiler which enables a developer to turn CSS element definitions ON/OFF and have the page update to reflect changes without a page refresh, this is quite powerful as it allows developers to quickly see what works best in their pages.

Although not part of the developer tools as such, IE 8 also includes a compatibility mode which will allow surfers view pages in IE7 mode. This is important as IE 8 is now a standards based browser where previous versions where not and thus pages designed with IE 7 in mind mightn’t look correct in IE 8, if this happens a user can emulate IE 7 with a simple click of a button. This is going to create a small pain for developers as they might have to change their CSS to make pages look the same on IE 7 & 8, however in the long term it is the best thing Microsoft could have done as going forward cross browser compatibilty should become less of an issue for developers/designers.

There’s some good content about IE 8 itself and its developer tools around the web including the below: 

Why are standards based browser ‘better’?
http://samanathon.com/internet-explorer-8-passes-the-acid2-browser-test/ 

Review of developer tools
http://coolwebdeveloper.com/2009/03/fantastic-new-javascript-debugging-tool-with-ie-8-and-its-list-of-features-hard-to-live-without/ 

Extensive review of developer tools
http://www.code-magazine.com/Article.aspx?quickid=0811082


Web design and colour blindness

Friday, November 30th, 2007

It is estimated that 1 in 10 men worldwide are colour blind, additionally it is thought that 1 in 100 women are colour blind. If you design for the estimated 10% of users who are still on 800 * 600 resolutions well then why not develop with colour blind users in mind too?

There are three main types of colour blindess, and I’ll get to them in a moment but in an overall sense colour blindness relates to how some people cannot distinguish between certain colours. The graphic to the left (credit to http://en.wikipedia.org/wiki/Colour_blindness) shows how colour blind people see certain colours.

Colour BlindnessThe three main types of colour blindness are:

Tritanopia is a very rare form of colour blindness. It revolves around the inability of a person to discriminate between blue and yellow hues.

Protanopia is a more common form of colour blindness and effects people who have a defective vision of red and confusion of red with green or bluish green.

Deuteranopia is the most common form of colour blindness. Deuteranopia also relates to the inability of a person to tell certain greens and reds apart.

Remember all colours are made up of certain percentages of the three primary colours, red, blue and yellow. This means despite the fact that Deuteranopia (for example) relates to confusion of greens and reds it will ’show itself’ in many secondary and tertiary colours too as usually they contain some amount of green and red. In this respect classifying types of colour blindess as blue/yellow or red/green can be slightly misleading.

What does this mean?
The fact that some form of colour blindness effects a relatively large proportion of the population means you must factor this in when designing your website. If you make extensive use of colours to differentiate between different elements on a page, the page may become unusable by some visitors. You should therefore follow the advice of all the accessibility gurus and be certain not to use colours alone to convey important information. Practical tips to implement this might include:

Use high contrast colours next to each other in your designs. Black text on white background works best.

Specifically try to avoid using red and green next to each when the colours are significant within?your designs.

If you must use any hues of?red and green next to each other always provide a textual cue too.

Make?important text stand out not only with colour difference but also with bold, italics, underline etc.

Follow the above but also ‘vet’ your designs as outlined in the next paragraph.

Tools to ‘vet’ your designs
Take a screenshot of your site and grayscale it in your favourite graphics program. Does it still look good (and work) without colour?

Run your URL/screenshot through Vischeck. Vischeck is a way of showing you what things look like to someone who is colour blind. The tool is free and is located at http://www.vischeck.com/vischeck/. The URL mode is a bit ‘flaky’ particularly if your site makes extensive use of complex CSS, flash, javascript etc., so if you have the time (make the time if you don’t) I recommend taking an screenshot of your designs and running graphic mode instead.

Run your screenshot through the Etre Colour Blindness Simulator tool. This tool is similar to Vischeck.

Run your URL through the Wickline.org Colour filter tool located at http://colorfilter.wickline.org/. This tool is similar to Vischeck.

How do Irish web design companies fare?
I decided to run a couple of screenshots from some?well known?design houses around Ireland through the Etre colour blindess simulator tool to see how they got on. As Deuteranopia is the most common form of colour blindess, this is the condition I have opted to simulate. I decided to test Continuum, Fusio, Red Sky, Arekibo and Webtrade. I won’t put screenshots for them here as they pretty much all passed with flying colours (pun intended :-)). I don’t know if this means they designed with colour accessibility in mind, my choice of test sites was brutal or they fluked it.

One pair of ‘before’ and ‘after’ screenshots which I will include below is for Continuum. Continuums’ site uses plenty of colours via their primary tab analogy navigation so their site is particularly susceptible to ’shortcommings’ as far as colour blinded users are concerned. It’s good to know however that their site passes with ‘flying colours’ (sorry I couldn’t resist using that one again…). The regular and Deuteranopia simulated screenshots for the Continuum home page are below. Although some colours appear similiar they are not beside each other in the tab navigation.

Continuum Normal Vision ViewContinuum Colour Blind View

How can I tell if I’M colour blind?
There are a couple of online colour blind testing tools available. It should be noted however that due to the hugh variations in screen resolutions and colours that these should not be considered a replacement for proper medical diagnosis. Two tools I’m aware of include the one located at http://colorvisiontesting.com/online%20test.htm and the Ishihara one located at http://colorvisiontesting.com/ishihara.htm

As always your thoughts and comments on my posts are greatly appreciated.


Quick tips for improving form usability

Sunday, September 30th, 2007

Receiving user input via forms is a fundamental part of many web applications (and indeed desktop based systems too) so it is vitally important that they are as user friendly as possible. In this post I’ll present some short paragraphs for improving form usability.

Use HTML tables to layout your forms
Don’t mind what the standards web guru says about using CSS instead of HTML tables. The reality of the situation is that HTML tables are the most suitable method to layout your forms in a user friendly manner (without a serious amount of work anyhow). The most common layout is the standard two column approach. This approach sees the labels for the various input elements in the left column and then the input elements themselves in the right column.

Display error messages on the form itself
Unless space absolutely prohibits it you should display any error messages associated with user input on the actual form page itself as opposed to using a popup Javascript alert box. The problem with alert boxes is that a user must click them away to continue filling in the form. When the error alert box is gone from view so too is the useful error messages which it contained, this means that the user must now work from memory when trying to fix input errors. The ideal situation is not only to have error messages on the form itself but to have the individual errors appear next to the associated input elements.

Use a progress indicator for forms spanning multiple pages
Including some kind of progress indicator on your form improves the user experience as users like to know where they are in any form filling process, this is particularly true if an activity requires multiple forms to get all the data it needs. An example of this could be booking an airline ticket or making a hotel reservation which typically require three or four screens to complete. Implementing a progress indicator for your form could be easy as altering your form navigation button text from something like ‘Next’ or ‘Proceed’ to ‘Go to Step 2 (of 4)’ or ‘Proceed to Step 2 (of 4)’. Alternatively you could create a dedicated header or sidebar table to illustrate progress in a more defined manner.

Micellanous
Micellanous items include using the tabindex property to define the correct logical ordering of textboxes, dropdowns etc. so the user can quickly pass the focus to the next input element, setting the default focus of a form to the element a user would normally expect to fill in first, defining access keys for keyboard access to fields. Additionally remember to go easy on CAPTCHA elements designed to stop spam bots as you will find they often stop legitimate users too.

Obviously the above information is not an in depth look at form usability, however the web has a tonne of information about this very important topic. One favourite article of mine which covers the topic of form layout (dealt with briefly above) is called Web Application Form Design and is written by Luke Wroblewski. Incidentally Luke is expected to release his web form design dedicated book in early 2008. As far as I’m aware this will be the only publication on the market dealing specifically with web form design and usability. Based on the quality of the information on his site I have to admit I’m really looking forward to it.

HOME | ABOUT US | CONTACT US | SITEMAP | GOOGLE SITE SEARCH | TOP
12 Lorcan Crescent, Santry, Dublin 9, Ireland +353 87 9807629