If you’ve been keeping up with this site, you will have already known that I added a left sidebar to the Redoable template. How I did that can be found on the Redoable With 2 Sidebars Post. I guess it should be renamed, Redoable with a LEFT sidebar, since technically there already is 2 sidebars when you go to a single post or a page…oh well.
Usability
Yesterday I decided to add a little something to the left side bar. Instead of it being boring, I wanted to give it more of a U.I. feel and have users able to open the tabs as they please. Its ONLY visible on the main page (truCubed.com) until I get all the kinks worked out.
I start the page off by having them visible in their normal state (minus the X to close them). I then added an onLoad to the <body> tag that fades them out. That way, users to my site see that there is information there and don’t just see 3 random tabs to the left that they might just think are links to another page. Also notice that I chose onmouseover to re-display them. I didn’t want users to have to click to expand the information. Even if they accidentily ran their mouse across them, they now are reminded twice that there is information there. If it is interfering with anything, there is always the big red X that will close it. Along with those 2 signs to my site users that there is information over there, I added a third reminder. Under all those tabs is a clearly visible call to action. So I have called attention to my websites functionality 3 times! In my opinion, that’s the bare minimum that you should do. With today’s web sites becoming more and more like web applications, its extremely important that your users know how to use your site. If they can’t pick it up in the first few seconds, your chances of keeping them are slim to none.
Everyone knows that some users aren’t the smartest tools in the shed (no offense). So it is always necessary to help them along the way. In essence they are taking a tour of your website and you are the tour director. You better do your job, or that tour of yours is going to fall flat on its face.
Advertising Benefit
Another reason why I did this is for the benefit of future advertisers. While blogging is all about getting readers and increasing awareness about what great messages you have on your site, the light at the end of the tunnel is potential advertisers. Nobody blogs without at least hoping to make a little bit of money off it in the long run, even if it’s just recouping some of your hosting fees (which is my only goal..remember, set your blogging goals low and you will never be disappointed). So how does this combination of javascript and fading divs (which is accomplished by scriptaculous)???
The reason is obvious, more potential advertiser real estate. Your potential investors don’t want some 30X30 spot at the bottom of your blog…they want their message to be in the MAIN part of your blog. In other words, when you site loads, they want to be right there before any scrolling takes place. So, as you can see from how I laid things out (and depending on your screen resolution) there is a large area to the bottom of those divs that can be used for advertisers.
Another increased benefit of my solution is its increased attention to that area. When all these events are going off that I stated above, the users eyes are going to automatically focused on that section of the page. By doing this, they are more likely to see the advertisement which in turn increases your chances of a click. Genius huh…?!
By doing this I have created opportunities for my site, without increasing the user’s learning curve for interaction.
Please leave comments and suggestions based on what you think! I really would like to hear everyones take on this.
I have heard of prototype.js and scriptaculous.js before, but never use it since it was quite big. Most of my viewers still have dialups. Will check the protaculous and send a feedback.
Yeah, but how about a new version using the latest versions of Prototype and Scriptaculous.
Agreed….got any free time?