Archive for the ‘usability’ Category

IE9 Drops Suppost for Flash

Saturday, May 1st, 2010

It’s official, Flash is dead! Microsoft have effective killed it by siding with Apple, and dropping support for Flash video in its new, soon-to-be-released browser, IE9 (http://bit.ly/cxuVRM).

Along with Apples iPod Touch, iPhone and iPad devices, this has effectively made Flash a technology without the vast majority support it has relied on to dominate the web video market.

So will we mourn it’s loss? Well I’m sure Adobe are in crisis, but the ones I feel most sorry for are the Flash and Flex developers, who are now in a position that they are likely to have to retrain fast. As for the technology, it seems like flash was becoming an unacceptable combination of security nightmare, resource hog and accessibility nightmare.

There are many clouds in this silver lining though. Many sites will now need to start shifting over to html5, css3 and javascript rather than using flash. This gives an opportunity for designers and developers to have massive increase development over the next few month to a year.

The other upside is of coarse the possibility that Flash is the killer app., and that lack of support in IE9 will finally drive people to Firefox and other alternative browsers. My feeling is though that this is just the start and we’ll now see other browsers following suit.

What are your thoughts? Do you a Flash site that you feel can only be made with Flash, or are you happy to let it go?

Posted in Flash, General, Marketing, Web desvelopment, usability | No Comments »

Navigation in Rotating Banners

Thursday, November 26th, 2009

Just a short post on the use of navigation in banners. This was after one of my clients made the very valid point that they looked intrusive. I restyles the navigation to small squares which hopefully solved that but thought that my ideas on why banner navigation is a good idea might be interesting: -

  • The banner provides a highly visual view of a product or service which is likely to catch the eye of a casual browser.
  • If the banner changes while they are reading it and deciding whether to interact with it you have a problem that they would have to wait for the cycle to come round again. In practice they never do! They either look for what they are interested in elsewhere in the site or forget about it and go elsewhere in the site or to another site.
  • In any of the cases above, you have missed the opportunity to interact with the client on something that has interested them, when they are interested in it, and may therefore have lost them as a potential client.
  • By adding in a way to navigate backwards in the banner, you give them a renewed opportunity to read and to click the banner link
  • The indication also gives a casual browser the ability to see that the banner will change, if they want to watch it.
  • The disadvantage is that it can look intrusive if not well styled.

Tags: , ,
Posted in Marketing, usability | No Comments »

Show/Hide Delays on Mega Drop Down Menus

Thursday, September 24th, 2009

I have been working on a mega drop down menu system for quite a while using the recommended show/hide delays of about 0.1seconds to show the drop down and about 0.5 seconds to hide the dropdown (Jakob Nielsen).

After playing with this for quite some time I have realised that this is not the hard and fast rule I had originally assumed.

The menu I am looking at has two drop downs. The first shows an extensive product range. To make this easier to navigate, it is arranged in groups so that you run your mouse vertically down the left side of the menu. Until you do this, nothing appears on the right side (apart from some instructions). This means that your only option is to run your mouse vertically down, so there is no way you can leave the ‘hotspot’ that keeps the menu open. On top of that if you play with your CSS a bit you can extend the ‘hotspot’ a little outside the button which further reduces any problems.

The second menu is a contact us system with a small form and a map to mouseover and click on. This is at the end of the horizontal menu, so again with the correct use of some CSS, cutting across the menu bar doesn’t result in the menu closing.

Having said all this, what is the downside of having a menu closing later. The main one is that you can run across the main menu bar and have multiple drop downs open at once. Although you could fix this with javascript, this adds code when there is no real reason to.

Of coarse this all depends on the type of menu you are designing!

Tags: , , ,
Posted in usability | No Comments »

iPhone Icon Confusion

Tuesday, July 21st, 2009

This is actually a copy of a post from my personal blog http://simongriffiths.name. To be honest I think it is probably more relevant here.

I have recently updated my iPod touch with iPhone software 3.0, but to be honest I think that this is an issue that pre-dates the new software.

I have noticed that when I am going to play audio contents, which with me tends to be audiobooks or podcasts, my finger is never too sure what to do. It knows the icon is at the bottom of the screen but floats around not being sure what to hit.

Having thought about this for a while I think that it is a usability problem that relates to the icon definitions iTunes and Music.

When I go to play music or any audio content on my mac I always use iTunes. So the natural place for my finger to go is the iTunes logo. However I have found that if I am looking to play music I notice that there is a logo called music and that’s where I go. When you are looking for an audio book though you would not characterised this as falling under the music button and are more happy with it falling under the traditional iTunes description. This leads to the uncertainty and finger wavering that I often find myself doing.

In practical terms this is a simple mislabelling of icons. It would be relatively easy to have an icon that represented iTunes but label the button store (as it would be in the pc version).

The ‘music’ button is a bit more problematic. You could rename it ‘audio’ but would the average user know what that was? Instead of that, ‘listen’ might be a more appropriate label as this would be the action the user is trying to perform, and would cover everything from music and audio books through to podcasts.

It would be interesting to see if this relabelling did happen, would there would be an end to my finger wavering forever!

Tags: , , ,
Posted in usability | No Comments »

Barcamp Brisbane

Sunday, July 19th, 2009

Barcamp Brisbane took place on 18/7/09. I did a very short presentation on mega drop down menus. This is available in the resources section of the website.

Tags: , ,
Posted in usability | No Comments »

Overlay Box Usability

Friday, July 10th, 2009

Over the past few months there has been an increasing use of ‘Overlay boxes’ to display larger versions of images and other types of content. This essentially means that when you click on an item, the page dims and another image or window appears that you can interact with or click the dismiss.

One of the best known and easiest way to incorporate this technique into your site is to use jQuery and the excellent plugin, fancybox. Example of the sort of this you can do are shown on fancybox example page http://fancy.klade.lv/example.

An example of a overlay showing a video

An example of a overlay showing a video

Anyone that is prepared to play around for a couple of hours, even if they have little to no javascript experience can get this working on their site without too many difficulties.

Technology aside, in terms of usability these overlay boxes can be a very useful addition. They can typically show: -

  • A larger version of an image
  • An explanatory video
  • Supporting information – to help a client make a choice for example

They do this without the user having to leave the main page and then navigate back again, so the main purpose of the page remains in the users thought path rather than allowing them to be distracted. They also do not have the usability issues of the ever annoying mouse overs, which tend to pop up when you least expect them!

However there seems to be an increasing trend to use overlay boxes for what I am going to call the ‘sake of bling’! I am not sure whether this is designers and developers just liking the bling factor, or that their clients are more impressed if they see this sort of interaction however there use in the wrong places can be a usability issue.

My example for this, and the reason for my post, was a site I saw the other day that was in development. I am not going to give a link as at the time there was a splash screen showing the company logo, under construction message  and under that simply “Please contact us here”. Okay first usability point, that does tell you what to do at all, but lets assume that at least some people would mouse over it and then click it. When you did an overlay box appeared with a contact form on it.

The problem here is that the required click is an interaction that didn’t need to take place. The form could easily be replaced with a simple email link that would need no explanation of what the user had to do (spam issues aside, but this is a small commercial company that will not want to hide their email address). There was also no phone number shown, so there was no choice of contact methods available.

To conclude my usability advice in this case would have been a straight forward HTML page. No it wouldn’t have been as flash, but all the information the user needed would have been to hand as soon as the page appeared. The users would have thanked you for it even if the website owners were not so impressed.

Tags: , ,
Posted in usability | 2 Comments »