Why Your Form Buttons Should Never Say Submit - UX Movement

In may cases Submit buttons are "calls to action". You're asking a visitor/user to do something.

Instead of the default "Submit", consider what's actually happening from your user's perspective. Is there a better way to word that button?

When users fill out a form, they are engag­ing in a task. The action but­ton should affirm what that task is, so that users know exactly what hap­pens when they click that but­ton. A but­ton that describes the user’s task tells users that the form focuses on car­ry­ing out that spe­cific task. The more focused your form is, the more likely you’ll get users to com­plete your form.

via Why Your Form Buttons Should Never Say Submit - UX Movement.

favicon.ico Generator

Need to create a little favicon for your website's address bar? I found this handly little favicon.ico Generator that saves having to install any software.

Migration Time

This blog formerly existed at waterfallweb.net - but it seemed a bit pointless to keep using that name when everywhere else online I'm "rockyshark".

So here's to the big migration!

You may be noticing the general ugliness of this theme. Believe it or not, it's that way on purpose.

The Email Standards Project

Many years ago the Web Standards Project (or WASP) fought the fine fight to pressure browser manufacturers into complying with some sort of standard version of HTML. Prior to that we almost had to build separate sites for Netscape and Internet Explorer - it was horrible.

We have come so far with browsers, but unfortunately most email clients are, well, a long way behind. If you have ever tested an HTML email in a few different clients you'll know the frustration.
Yesterday's launch of the Email Standards Project hopes to remedy this situation. Some people love it, some hate it, but HTML email is here to stay. And if we could have the proper standards support in email clients then it's probably fair to say that a lot of those opposed would change their mind.

We have a long way to go, but at least now we have a vehicle!

Cheat Sheet Collection

This is a great little resource - Pete Freitag has put together links for a bunch for cheat sheets. And lets face it - these things always come in handy.

Time to start downloading and printing! ;)

The Yellow Fade Technique (YFT)

Some time ago 37 Signals pioneered what they call the Yellow Fade Technique, or YFT. You might have seen it on Basecamp or Backpack.

Jamie asked me the other day if I knew how it was done. I had seen a tutorial for it before, but hadn't bookmarked or blogged it! So after a few minutes of Googling a found a couple of possible how-tos:

• The Yellow Fade Technique, Revisisted. I don't know how or why this is better than the original. But it's revisited, so it must be, I guess!


• The Fade Anything Technique


• And the find of the afternoon - script.aculo.us - this site has lots of goodies. Shall have to poke around here some more!

However, none of these were the original tutorial that I was looking for... :/

Tags: yellow fade technique | 37 signals | web 2.0 | javascript

Finally - A Tall Screenshot Grabber

The problem: capturing a whole web page - even the stuff below the fold.

I gave up looking for something that did this and have been manually taking screenshots as I scolled down the page, and stitching them back together in Fireworks.

But here it is! And it's a plugin for Firefox! How cool is that!

Edit 2007-12-06: It's actually now got it's own domain: www.screengrab.org.

Overly Styled Scrollbars

Designers sometimes have a habit of styling something just because they can. And sometimes this comes at the expece of usability.

Jacob Neilsen has written another reminder about scrollbars. He recommends:

• Use an actual bar in the shape of a rectangular trough, preferably in a color that contrasts with the background.


• Show arrows at the top and bottom.


• Include a slider (sometimes called a "thumb" or an "elevator"), preferably in a color that contrasts with the trough. The slider's position should show the visible area's position relative to the total area, so people can see how much more content they have to scroll through.


• Allow users to scroll by
  • clicking in the trough,
  
  
  • clicking on the arrows,
  
  
  • dragging the slider, and by
  
  
  • using a scrollwheel on their mouse.

Sensible advice to keep in mind, whilst at the same time considering who your audience is and how far you can safely push these limits.

Making IE behave a little better

Doxdesk.com has produced a JavaScript module so that min-height, max-height, min-width and max-width work on Internet Explorer for Windows..

I can hear Michael breathe a sigh of relief now...

From bits to a comp

Ever since I saw the concept of the Page Description Diagram I liked the idea. A simple way of sorting out what a page has to do without any other distractions.

Actually putting one together is a bit harder than I first thought. Where do you start?

Then Ryan Singer from 37 Signals penned An Introduction to Using Patterns in Web Design. Bingo - someone has joined the dots for me!

1. Make a list of your "bits"- everything on the page and anything that the visitor might have to do


2. Group them where they share some commonality


3. Prioritise them (Hey, the contents of a Page Description Diagram!)


4. Design each chunk, and then put those chunks together (Hey, a wireframe!)


5. Then design away (Hey, a comp!)

Following Ryan's steps would make it difficult to end up with a comp that didn't achieve what it was supposed to in terms of site goals.

Not impossible, mind you, but difficult.

Shells, Scooby, basketball and chickens

A bunch of new entries to the CSS Zen Garden. Some I like:

• Like The Sea


• Chien


• Hoop - Tournament Edition


• And if for nothing else than the warped sense of humour: Hengarden

That's not a typo - Hengarden; not Zengarden...

Font Sizes and Browser Quirks

This website has been online for almost 6 months now, And Ben has just pointed out a font sizing quirk that has made the text here unreadable on IE for Windows if the Text Size (in the View menu) is set to Smaller or Smallest.

And he was right - I'd never checked it before.

Turns out, using this is a no-no:
body {
font: 0.8em/1.6em Verdana, sans-serif;
}

Owen Briggs has written a fairly in-depth study (and taken a gazillion screen shots) highlighting the different methods of text sizing and their various behaviours across different browsers.

It appears a more reliable way to achieve the goal is:
body {
font: 100% Verdana, sans-serif;
}

#wrapper {
font-size: 0.8em;
line-height: 1.6em;
}

And before anyone gets on their soapbox and says I shouldn't specify a font size anyway, go and read Owen's post. I particluarly like:

"One sizing wisdom is that a document's main text should be left alone so it can display at whatever the browser default is. This sounds good, but since most browsers default to a text size that I have to back up to the kitchen to read, I decided the zen approach to design wasn't for me. Besides, if I was really zen I wouldn't write a stylesheet." (Italics mine)

Eye Tracking Research on Dead Zones

I have to admit - I'm becoming a bit hooked by this eye-tracking thing.

Greg's latest post highlights that content in visual "dead zones" may as well not be there - and he tested this by putting complete gibberish in an identified dead zone to see if anyone noticed.

And only 1 in 25 did!

The other thing that struck me is that in his example, the visual dead zone was smack bang in the middle of the page! Comments brought out that this was due to the visually prominent elements directly above the area identified as a dead zone. People tend to focus on them, and ignore what's directly below.

Just goes to show: You learn something new every day!

CSS Rounded Corners

Alessandro Fulciniti has come up with a great example of using CSS and Javascript to produce rounded corners - without images. And the best part of his example is that he demonstrates a number of different applications, from tabbed navigation to photo frames to news boxes. So there's no need to try and figure anything out (like how to use more than one instance on each page). All the hard work has been done!

Maybe Fixed Width is Better?

Greg Edwards has posted an interesting piece of research, tracking where people actually look on a couple of different CSS Zen Garden designs.

It's a good comparison, because the content is exactly the same - it's just has different visual treatment.

And the first thing I noticed is that the wider column on the original design was read less than the narrower column on design 145. Is this a convincing argument for fixed width designs? I think it's hard to ignore - it will be interesting to see the results of future comparisons!

Misconceptions About Teenage Visitors

The stereotypical teenager is a myth, according to Jakob Neilsen's latest Alertbox.

According to his research, teenagers in general are not all the wizz-kids they are portrayed as. So rather than teenagers being able to use any website thrown at them, many found websites more difficult to use than adults, due to poorer reading skills and less patience.

Assessing your website's usability on "the average user" is a dangerous game (as there is no such thing), but if you're going to generalise it's handy to know some researched facts about your potential audience rather than basing your decisions on misconsceptions.

The internet wasn't invented when I was a teenager, and my kids aren't that old yet - so I have nothink to test these findings on... So any teenagers reading this: What do you think?

On knowing the 'Why'

Dave Shea has posted some thoughts on overcoming the dreaded designers' block.

I'm most interested in this coment:

What's more important than a planned process, however, is the due diligence (DD) that must happen before a design begins. Gathering materials like existing branding, project objectives, content, and anything else available is essential for the design process.

I couldn't agree more.

Too many designs (and I've been guilty of this in the past too) are just slapped together without thinking about the website's objectives. Logo here, nav there, photo here...

I had a meeting with a client a few days ago and we were discussing improving the conversion rate for their website. Their home page looked nice in a generic sort of way, used their logo and colours, but it had no real purpose. We identified a couple of concrete activities that a visitor could do, but the design in no way encouraged anything.

So here's what I'm thinking. Whether you have designers' block or not, here's what you should have before you even think about starting:

1. Existing branding


2. Project objectives


3. Content (or at the very least an outline of what the content will be)


4. "Anything else available is essential for the design process" - which should include:
   
   
   
   • client preferences (if any)
   
   
   • potential audience or target market
   
   
   • Specific actions you'd like the reader to take
   
   
   
   

If you don't have this information, you'll really battle to make your design work. It might look nice, but the commercial reality is it needs to do more than that.

CSS Zen Garden Entry

I am not the author is this page - but you have to admire their skill and dedication. One would have to assume that this design was rejected by Dave Shea, which is a real shame, as it certainly "explores the limits of CSS"!

Here's the link - if you dare!

Where'd Adam Get That Colour Scheme?

Adam Polselli has explained one way he finds inspiration for colour schemes. This is probably an old page - but I only just found it. It's brilliance lies in it's simplicity.

Stuck for colour? Look around!

A mini for me, please!

I've been hunting around for a second-hand Mac to do some testing on. I was hoping to spend about $500 and then another $230 for OSX. The the local Mac shop told me about the new Mac Mini.

Perfect!

A tiny box (about 16cm square by 5cm high) that I can plug my existing monitor, keyboard and mouse into. $800 for a brand new Mac! So when they arrive in town in early February you can bet what I'll be doing...

In their own words:

Perfect for Programmers

Set a space-saving Mac mini atop your workstation PC and add a KVM switch to share keyboard, monitor and mouse. Mac OS X includes free developer tools for Mac, UNIX and Java. Test out a Mac version of your latest creation, instantly. Pretty soon you’ll be using the Mac full-time, with that PC relegated to the testbed.

I was thinking about getting the base model, but I'm pretty sure that if I have one of these on my desk I'll start using it for more than just testing. Maybe I should go for the 1.42G model...