2007 April | The Tea Party

Apr

2007

Left or Right Navigation?

Posted by hattersworkshop | Comments : (0)

Recently, a client of mine asked me why I have the navigation on the right side of the page on all of my sites, except one. The answers have everything to do with usability. Not to mention the designer in me thinks most sites look better if the navigation is on the right but personal aesthetics should always be secondary to usability, as is the case with the exception to my above rule.

While I was in college I figured that most people are right handed and that having the navigation on the right would feel more natural. It would also reduce the time people spend moving the mouse from navigation to scroll bar and back to navigation to click. It doesn’t take much to push part of the navigation “below the fold” because most people still use a resolution of 800×600. Since that time only two real arguments have surfaced in my five years of web design against this hypothesis.

The first was from old school designers who maintained that navigation on the left is a web standard. They said not to touch it because you’ll only confuse people. I dismissed this as rubbish. A well designed list of links that says thing like home, site map, contact, etc anywhere on the page will be understood to be a navigation bar, be it horizontal or vertical, right or left.

The second argument against a right navigation column centers on the back button being the most used button in most people’s browser (I’ve set my mouse’s thumb button to do it). The argument says that placing the most used buttons (nav bar) on the site next to the most used button on the browser (back button) makes the most sense. Again, I dismiss this as rubbish. A competently built site will have links on every page to the home (if not several) and other navigational aids such as breadcrumb links, anchor tags, a search bar and/or a link to a complete site map on every page. With so many ways to go, why would anyone use the back button to see the same content that they just clicked out of? If they still haven’t found what they were looking for then give them every opportunity to find it as quickly as possible. The back button simply isn’t necessary in a well designed site. Besides, all these other options are on the site which makes them closer to the curser then the back button.

And there are other reasons too. Most people are right handed and their hand naturally is said to move their cursor to the right when they are idle or when they are reading. Another somewhat obscure benefit to putting the nav on the right is to make all of your pages printer friendly. Depending on your printer model it will print the left most 630 – 650 pixels. On left aligned sites this is the nav and the right ¾ of the body. On a right aligned nav page this column is the content and the navigation would get chopped instead.

For a case study on the speed of usability see this article: http://jodi.tamu.edu/Articles/v04/i01/Kalbach/#5. Rarely do I see comprehensive a case study released. It has to do with this little known car company’s website: www.Audi.com.

All this being said, there is still one site I designed with the navigation on the left. The CEO in company didn’t use the internet very much and when I showed him the mockups with he got stuck on the fact that he usually sees navigation on the left. Needless to say the job was completed with the nav on the left as he wanted, and the site works fine. In reality it doesn’t seem to make much difference with most people. So long as the navigation is well thought-out and designed (buttons look like buttons). People will adapt.

Apr

2007

Book Review: Don’t make me think 2ed Edition – Steve Krug

Posted by hattersworkshop | Comments : (0)

Category : What I Read

Last week I read Steven Krug’s book, Don’t Make Me Think – A Common Sense Approach to Web Usability. I learned that most people ask totally the wrong questions when designing a site. Further, without being able to test our solutions in any sort of a real world atmosphere it’s impossible to know what we’re doing is right. The largest reason for this being that there is no “normal” internet user just as there is no “standard” website.

People ask the wrong questions all the time regarding web design. The best example I can think of is given in the book when a group is meeting about a project. The project manager asks how they can save space in the header of the page. A designer suggests using pull downs and a developer, who has a secret personal bias against pull downs, counters saying that pull downs won’t work with their java. The marketing person counters by looking for data on the subject of pull downs. Everyone is silent. This is a stalemate. Anyone who enters this argument now without asking the right questions is going to lose for a few reasons:

1. People are voicing their personal opinions, not facts, about the issue.

2. The only things that matter are: if the clients for THIS project will be annoyed by pull downs, if the site benefits in usability or user comprehension, and if there really is a technical issue because of your java. The last is the least important because if this is a code issue most code can be “made to work” if the reasoning is good enough.

It’s about asking the right questions as opposed to having all the answers. To get the answers to some questions the best way to do this is to run a usability test. Steve does a great job explaining how to do this in his book for almost nothing in a single day. The information you reap from this process will astound you.

One thing most designers/developers need to forget is that there is no “standard” internet user. When designing anything you should consider your target audience and who those people will be instead of catering for the “average person”. The other day a prospective client of mine handed me her business card printed on a 3×5 index card. I was taken back. It was huge. Then I realized why: she worked at a retirement home and the people who she regularly gave her card to were older with poor vision. It all made sense. For this business the “average client” needed larger text to be able to read it comfortably. Even though it brakes the common convention of business cards to have a standard size it worked best for their clientele.

That’s it for this week’s blog. Now that I’m done with this book I’ll be finishing Wikinomics, and also diving into my Yahoo Ambassador training.

I recommend you read the book.
Don’t Make Me Think – Steve Krug
Available at amazon.com

Check back next week for a new article about breaking another web standard: Putting the navigation on the right for enhanced usability.

Apr

2007

Form spam: BE GONE!

Posted by hattersworkshop | Comments : (3)

Category : Coding and Database, Slick Code, Technology

I started getting emails last month from the forms on one of my client’s websites. The spam came as a long string of links in the comments section of one of the forms. The idea for this type of spam is, I think, to boost search engine ranking by increasing the clicked rate to your site. It is easy enough to detect and delete but still, its quite a pain to delete 10-12 emails a day. Not to mention there is a more malicious form of form spamming that I was lucky enough not to have been attacked by where the spammer inputs php code into the form fields which tricks your mail server into sending bogus messages from your return address. This has had the effect of some sites being blacklisted from search engines for spamming, but I hear that google and others are going to be lenient on this in response to the rise in form spam in the recent months.

So there was the worst case scenario and to avoid it all together we needed to add some sort of form validation. Client side java script could be used, but if the spammer simply turned off java script, we’d me back to a naked form, so although useful to make sure humans are using real email addresses (with the @ symbol) it would be useless to stop a bot.

The next step would be to use a captcha, but I hate these things and good OCR software can read them better then people with poor eye sight so this isn’t the best answer either. New captchas are evolving into fill in the blanks, picture description, and general questions (“whats the letter after b?”). Machines will not understand the question and thereby cannot guess the answer.

But still, this is slightly intrusive because it requires the user to think. Sometimes that’s enough to put people off. I wanted a solution that eliminated bot generated spam without encumbering the real users at all.

My solution was code the PHP mailto into an if statement that checked the value in a hidden field. If anything had been entered into this field then we can deduce that it was not filled out by a human (who would never see this field) so the request fails the php if statement and the mail command is never fired.

However, the PHP code will still look like the page email was sent. This is important as it lets the spammer think everything has worked. After putting this into play spam on our forms has effectively ended. I say effectively because I read somewhere that some people actually sit an copy and paste this sort of junk into forms by hand. What a waste. No one reads it anyway.

I just wanted a solution that freed up my client without affecting his customers.

The HTML/CSS looks like this:
<input style=”display:none” type=”text” id=”email” name=”email”>

PHP:
$test = $_POST["email"];

if ($test == “”) {
mail($mailto, $mailsubj, $mailbody, $mailhead);
}

Currently I’m working on a great book by: Steve Krug called Don’t Make Me Think.

Update: August 1st, 2008:
To eliminate the “random blanks” I got from users pressing the back button and non javascript browsers I modified the above code to include a few more conditions. Read the next article on using the IF equal to AND not equal to function in php to find out more.

Featured Posts

Breaking News

Left or Right Navigation?

Book Review: Don’t make me think 2ed Edition – Steve Krug

Form spam: BE GONE!

Categories

Archives

Meta