Tuesday, April 15, 2008

Moving objects and Fixed highlighters


The Function
I was just using my LG Chocolate (First Version) to take a picture when I realized something odd. When I had taken the picture options came available as seen below (sorry about the poor picture)

Basically the picture shows 3 options: Left: Floppy disc with a cross to outline discard picture. Right: Envelope to outline send picture. Centre: Floppy disc to mean save. This one is highlighted.

The taken picture - I didn't like, so I wanted to discard it. So using the arrow keys on the phone keypad I moved left arrow key (the one labeled with black text). It was here when I noticed something 'weird'.

My Expectation
I was expecting the highlighter to move left (to the position of where the Floppy disk with the cross is situated). However, when I pressed the button, this did not happen. Instead, what happened was the icon with the floppy disc with a cross turned into a envelope. I pressed again and it changed to the icon with the Floppy disc. At first I was like huh? (confused), but then it clicked to me what was happening.  

What was happening?
The highlighter is normally the function that moves. However in this particular case it was static and fixed in a central position. This was the first time I had seen something like this.

About the approach
The approach broke the trends of what users are familiar with. Its common to have highlighter the function that moves. This is the case in a number of applications such as when you are selecting an item in a folder and using cover flow (to name a few) etc. In these cases the highlighter moves dependent on where we want it to move. The object(s) we seek are the ones that are in a fixed position. 

Good or Bad ? 
The approach even though breaks the trend, is still good but only with a small number of items. I believe that if this approach was used with a large quantities of objects then there would be problems because it would be hard to keep track of the movements of the items.

A 'made-up' Example(s) - Bad ? 
Imagine when using Apple's Cover Flow instead of going through the covers you are situated in a fixed position and the covers are looped so you flick through them. It would seem like the information is coming to you rather than you having to look for it. 

Another example can be when you are in a window with a list of documents. You use the arrow keys to scroll through the items. The highlighter moves down going through the documents. However what would be the outcome if the highlight was fixed and the items moved through the highlighter.

In these cases, the movement of the objects could be distracting as there might be a lot of visual movement if not structured in the right manner. However, it could beneficial in the sense that it allows users who are unsure where they have placed an object or unsure what is called can have the objects 'come to them' rather than scan over the place it is in i.e. folder. 

An 'actual' Example(s) - Good ?
An example of where this approach has been implemented I believe to good effect is on the EDS website http://www.eds.com/  If you click on the link and wait a few seconds you should see something like...


You can use the arrow keys to move through the information. This example has been implemented visually and it works well. 

Considerations & Thoughts
I would be interesting to know if this approach is graphical dependent and on upon the number of opportunities available. 

To actual know the effectiveness of this kind of approach there are things that need to be considered and answered such as Would this make navigation easier ? Would people have to remember more ? Would they have to pay more attention ? Would they be able to find a needle in a haystack ? Would it work in a list format or visual format ? 

These are only a few things to think about, but maybe something to explore in the future.  

Tuesday, April 1, 2008

Colour(Color)

Wikipedia defines colour or colour as the visual perceptual property corresponding in humans to the categories called redyellow,blueblack, etc. Colour derives from the spectrum of light (distribution of light energy versus wavelength) interacting in the eye with the spectral sensitivities of the light receptors.

Colour is an important part of usability. It can go a long way of making something usable or not. Using the wrong colour combination can make it really hard to read information and place strain on the users eyes.

For example, HipHopdx - a hip hop news website uses white colour text (and different shades of browns) over a really dark-muddy colour. Staring at this when trying to read the articles and be straining. After I am done and look away and blink, I can see where the lines of the text have been burnt! in. Basically I see floating lines. Sounds stupid but its true.


In some instances the creativeness can proceed a designers decision on the best colours to use. For example - Interflora have used colours that simulate a spring time - flower feel by using shades of yellow and greens. It creates the intended feeling. However, in terms of usability it makes it hard to view the content. 


There needs to be a balance between the colour used for the background and the one used for the font colour. They need to compliment each other. A common approach used is to have a light colour for the background such as a blue and then have dark colour font. This is logical as users attention is doing to be on the text therefore it should stand out more. Also the background takes up most of the room therefore it should blend in and not strain the users.
Picking the right colour combination can determine if a website is good or bad. The margin for error is small. So you need to take care and always put the users needs head of any creative aspirations you might have.

A good approach to colour combination(s) can be seen in the following screen shot:


The example from Football Italia is ideal for a information site. It places focus on the text rather than anything else. Colour has been used wisely, to distinguish the navigation bar from other aspects of the site. It is an ideal approach that other websites could do with modeling. Simplicity is the key when using colour. Problems seem to arise when people tend to use a range of colours that look good but when it comes to actually reading information, it then can be straining.