Uncategorized

Form Design and Label Placement

by

While James Avery was working on a side project he ended doing some research into form design and label placement, the results of which he blogged here, The Art of Label Placement in which he links to several interesting articles:

Web Application Form Design by Luke Wroblewski – This article covers the best ways to arrange labels and submission buttons.

Web Application Form Design Expanded by Luke Wroblewski – Another great article from Luke W. expanding on the same topics.

Label Placement in Forms by Matteo Penzo – Matteo takes Luke’s advice but applies eyetracking to evaluate how usable it is.

Our eyes and brain constantly ‘trick’ us into believing that much more of a scene is in sharp focus than actually is. In fact, the area of sharp focus, or fovea, is actually quite a small area of the total field of vision. Try it by staring ahead and checking things that are off centre.

In the last article, there is a marked difference in eye tracking times between the right aligned labels and the labels positioned directly above a control. When the labels are directly above the start of an input field, the label and start of field are obviously in focus at the same, greatly reducing eye movement, but how does this then relate to further cognitive processes? There is obviously a correspondence between saccade times (the time taken for the eye to center on an area of interest) and cognitive friction, but it is not clear whether it is in a strictly linear relationship.

“Eyetracking can show which parts of your user interfaces users see and which
parts seem to be invisible to them—not just by observing users and gathering
qualitative data, but also by analyzing their gaze plots and other quantitative
data.”: Introduction to Eyetracking: Seeing Through Your Users’ Eyes

There’s no denying that good layout and interaction design is essential for creating happy users. And strangely, I’ve never seen any articles from Microsoft on the topic of eye-tracking for testing usability? Now we are in the Age of User Experience I’m sure that will change!

Influential Software Development Blogs

by

Like many developers, I read several blogs every day. Not quite as many as I’d like, and certainly not as many as Robert Scoble, who by his own account reads 1000. This seems a tad high to me, as it works out to be 16+ hours a day if you spend just 1 minute at each blog (8.3 hours if you spend just 30 seconds reading each one).

Here are the ones I think have influenced me more than others (although it was a hard task to reduce this list from around seventy to just six). I’m sure many of you read these already:

Kathy Sierra: Kathy’s blog is insightful, entertaining and big on content and ideas. She is one of the visionarys behind O’Reilly’s Head First series of books. The focus is designing great software by creating passionate users. How do we do that? By writing software that really helps the user at each step of a task. The difference between good software and great software is the way it makes users feel. Empower them to be great and do a great job! Recently, she has stopped blogging, but I’m sure she will start again…

Scott Hanselman: Scott and his army of Hanselman clones(!) have covered just about every topic under the sun. Does he ever sleep? He covers pretty much everything including design, development and architecture. I’ve had more than one epiphany at Scott’s blog. His Hanselminutes webcasts are great. Go and grok him!

Jeff Atwood: Jeff has an easy, very enjoyable writing style. Jeff covers a diverse range of topics. Always food for thought and excellent, balanced observations. He never ceases to amaze with his originality and breadth of subject matter.

Scott Guthrie: For ASP.NET you can’t pass this blog by. Superb! Scott’s PDC presentations never fail to entertain and get his points across. His Tip/Tricks section is required reading for all ASP.NET developers. Scott is a program manager for so many areas of .NET, you be forgiven for assuming he’s also been cloned!

ArcCast hosted by Ron Jacobs, has a large number of podcasts and webcasts available, with an architectural flavour but also covers other topics such as usability. Great resource! I met Ron when we were lucky enough to have him present here in Perth, and he’s an amazing guy.

Joel Spolsky: not as active as it once was, but Joel’s archive is worth reading. Try reading his Unicode article…The first time I read it, I felt so dumb!… I have several of his collections of essays on software development in hard copy, but most of the material is free to read on his site.

These six blogs cover many of the important areas that developers are required to be familiar with. Who do you read?

C# Code Snippet: Ensure Filename is Unique

by

OK, this is not exactly going to be the most complicated C# code snippet you will ever see. I’ve often wondered why the .NET Framework does not include similar functionality to Explorer when copying and pasting files (if it does and I’ve somehow missed it, please post a comment and let me know!). I’ve often needed the simple logic of ensuring that saving a file to a specified folder does not clash with one of the same name. There are basically two ways of doing this: (1) simply modify the filename to include a string representation of a GUID (via Guid.NewGuid().ToString()), or (2) or modify the filename to prepend something like “Copy (?) of “ checking until the name is unique. Here is a minimalist implementation of the second:

/// 
/// See main overload.
/// 
/// a fully pathed filename
/// a unique fully pathed filename
public static string EnsureUniqueFilename(string fullFilePathname)
{
    string destFolder = Path.GetDirectoryName(fullFilePathname);
 
    if (String.IsNullOrEmpty(destFolder))
        throw new ArgumentException("You must pass a fully pathed filename");
 
    return EnsureUniqueFilename(fullFilePathname, destFolder);
}
 
/// 
/// Return a unique filename of the form, 'Copy of (?) OriginalFilename.ext'
/// NOTE: Does not adhere to the full semantics of the file explorer copy logic.
///       which creates first copy named as 'Copy of OriginalFilename.ext'
///       Nor does it rename any files. It simply returns a filename which is unique
///       It does not take into account multiple threads attempting to make use 
///       of the same filename.
/// 
/// a fully pathed filename
/// a destination folder
/// a unique fully pathed filename
public static string EnsureUniqueFilename(string fullFilePathname, string destFolder)
{
    string filename = Path.GetFileName(fullFilePathname);
    string renamedFile = Path.Combine(destFolder, Path.GetFileName(fullFilePathname));
 
    // Check if a file with same name exists in folder and try a modified name if neccessary...
    int intCopy = 0;
    while (File.Exists(renamedFile))
    {
        intCopy++;
        renamedFile = Path.Combine(destFolder, "Copy (" + intCopy.ToString() + ") of " + filename);
    }
 
    return renamedFile;
}

Photoshop Tutorials

by

Mastering PhotoShop seems to take a lifetime. Not that I would put myself in that esteemed camp. I came across a few surprisingly easy but effective tutorials at the Photoshop Café here and here.

If you are a keen photographer, it’s hard to pass up this gem of a book The Photoshop CS Book for Digital Photographers by Scott Kelby. If you can find a better hands-on book, buy it and please let me know what it is! Here’s just one very simple tip of many more involved examples from the book: to display your work press ‘f’, ‘f’ and then ‘Tab’. The first ‘f’ centers your work; the second hides the menu bar and displays a black background. ‘Tab’ hides the toolbars, Options bar and palettes. Just press ‘f’ and ‘Tab’ to return to normal working mode.