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: delays, mega drop down, show/hide, usability
Posted in usability | No Comments »
August 20th, 2009
I have recently been putting together some websites and have been using the Sitepoint book “Designing without tables” as a guide to some of the CSS techniques. What I noticed was that the author was structuring pages as follows for a 2 column layout: -
- Header with navigation
- Sidebar (floated to the side)
- Main content (positioned using margins)
- Footer
The trouble with this layout is that if you read the HTML from top to bottom, as a search engine or screen reader would, the sidebar content is higher up the page and is therefore given a higher priority than the main content. What this can mean is that Google misinterprets the information on your page, and in some cases what your site is about, which is obviously a big problem.
A simple solution is to use the same techniques to float the main content and the sidebar so that the main content can come first (have a look at the webxopt home page to see how this is done, and you can get the css from http://www.webxopt.com/styles.css).
This is all easy stuff, but on a 3 column layout you have the problem that you need to float something to the right, something to the left and have something in the middle too. That makes things difficult, but using the old trusty nested tables technique, you can do it as follows: -
- Header with navigation
- Div to contain main content and left hand sidebar. This is floated left. Inside this div there are two more divs, the first contains the content which is floated right, the second the sidebar which is floated left. The end result is a left hand side bar, and central content area.
- Div to contain the right hand sidebar, this is floated right
- Footer
The end result of this layout is a 3 column view with your most important information (your main content) at the top of the HTML document. An example of the code is shown here: -
<div id=”header”>
<p>Strap Line<br /> for the site</p>
</div><!– header –>
<div id=”wrapper”>
<div id=”navbar”>
</div><!– navbar –>
<div id=”content”>
<div id=”main”>
<div id=”copy”>
<h1>Main Heading</h1>
</div><!– copy –>
<div id=”image-bar”>
</div><!– image-bar –>
</div><!– main –>
<div id=”sidebar”>
<div id=”sidebar-content”>
<h4>News</h4>
<p>Here is some news</p>
<a href=”#”>Link</a>
</div><!– sidebar-content –>
</div><!– sidebar –>
</div><!– content –>
<div id=”footer”>
</div><!– footer –>
and the CSS is: -
#header {
margin: 10px auto;
position: relative;
height: 80px;
}
#header p {
width: 920px;
margin: 0px auto;
padding: 10px 18px 0 0;
position: relative;
color:#f8992b;
font: 16px Arial, Helvetica, sans-serif;
text-align:right;
}
#wrapper {
width: 920px;
margin: 10px auto;
position: relative;
background-color:#FFF;
border:#000 1px solid;
min-height: 450px;
}
#navbar {
width: 100%;
height: 22px;
margin: 0;
}
#content {
margin-top: 0;
}
#main {
margin: 20px 0 0 20px;
width: 645px;
padding: 0;
min-height: 300px;
float: left;
}
#copy {
margin: 0 0 0 20px;
width: 455px;
padding: 0;
min-height: 300px;
float: right;
}
#sidebar {
width: 220px;
float: right;
margin: 0 15px 0 0;
min-height: 300px;
}
#sidebar-content {
width: 220px;
float: right;
margin: 0;
padding: 20px 10px 0 10px;
min-height: 200px;
}
#image-bar {
margin: 0;
width: 170px;
padding: 0;
min-height: 386px;
float:left;
}
#footer {
clear:both;
width: 100%;
height: 22px;
}
The drawback to using this approach is that to reposition the different divs in the document is slightly more difficult, however for most simply respositioning such as print and mobile style sheets, this shouldn’t really be too much of a problem.
In my view the SEO advantages far out-weigh the downsides.
Tags: CSS, HTML, page structure, SEO
Posted in SEO | No Comments »
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: icons, iphone, ipod touch, usability
Posted in usability | No Comments »
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: barcampbne, barcampqld, mega drop down
Posted in usability | No Comments »
July 15th, 2009
This post is follow up to some discussion on merketinggeek.tv and relates to whether SEO/SEM is useful for small business. I have edited it a bit to make it suitable as a standalone post, but essentially this is just a long winded comment I wrote!
Firstly I should mention the definitions that are being used. The industry seems to be using the following (which I actually don’t agree with but hey that’s what they are using): -
SEO (Search Engine Optimisation) – Optimisation of a website for organic search results. This could involve changing code, rewriting content, inbound links, article writing etc etc.
SEM (Search Engine Marketing) – This is pretty much defined as Adwords or similar paid advertising, and to be honest is why I said I actually don’t agree with these definitions as marketing isn’t just advertising). If you look at wikipedia for example they define it quite tightly as ad related (http://en.wikipedia.org/wiki/Search_engine_marketing).
These can essentially be used differently. Personally I believe that every commercial site should have SEO and usability work done on them. This can be done by the site creator or an external company. The reason I say this is that it will help you be found over time, but importantly it will help users find what they are looking for. As an example You may have a page about orange widgets. If you were to optimise this page for Google you would make sure that the title h1 tags included ‘orange widgets’ preferably at the front of the title.
The reason that Google likes this is that it is how readers read too. The title of the page should be what the page is about and by front loading the keywords the title becomes easier to scan and see what it is about. Therefore what is good for Google is good for site visitors too (after all that is what Google is about), and what is good for your users is also good for your business bottom line.
SEM on the other hand will depend on the business. If you need to drive new customers and are not high up in Googles natural (organic) listings. SEM is a good way to get a presence. This may be the case particularly when you are starting up a business. There is also an argument that even if you are no1 in Google for your keyword, advertising may still help to solidify a searchers perception that you are the company to deal with. I haven’t seen any stats on that but it sounds a reasonable argument.
Tags: Marketing, SEM, SEO, small business
Posted in Marketing, SEM, SEO | 1 Comment »
July 13th, 2009
I have recently had the misfortune of optimising a site and having to gzip components coming off a server to optimise the file size. I say misfortune, not because this is a bad thing to do, in fact it is very worthwhile, but the problem has been that web hosts generally are not good at telling you how to set up for gzipping on their particular configuraton.
As mentioned gzip reduces the file size so it is good for the user of a site and the internet as a whole, but I have realised that what it is not good for is web hosts. That is no doubt the reason why they are not that helpful when you ask about how to set up on their servers. The problem they have is: -
- They are often paid per MB transferred (as per your plan). which mean gzipping reduces the chance that you will go up a pricing level.
- If you gzip, their servers will have to do more work zipping the files. Therefore in terms of power it will cost them more
On the other hand of coarse they will be sending out less bandwidth, but that is relatively cheap (for them at least).
It strikes me that we have a problem here similar to that of the power utilities. They want to you to use more power, but on the other hand it is better for everyone if we use less.
Thankfully there is a simple solution for web hosts. Charge us based on uploads of the uncompressed versions of our documents, and maybe even make a small additional charge for the gzip service to cover extra power requirements. This way everyone wins the site user as things load up quickly, the developer as the hassle is taken out of gzip, the internet as bandwidth is reduced, and the host as they can charge us for the additional service.
Let me know what you think!
Tags: bandwidth, gzip, host, hosting
Posted in hosting | No Comments »
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
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: jQuery, overlay, usabiity
Posted in usability | 2 Comments »
July 10th, 2009
Hello everybody, this is my first of hopefully many posts on the subject of web experience optimisation. I am going to try to keep this blog professional and full of interesting usability and optimisation tips, but if you want to know more about the people behind Webxopt you can read more at: -
Tags: General, hello, introduction
Posted in General | No Comments »
