Web Design is Evolving

I may be a bit late to the party with this observation, but web design is finally evolving. Mobile phones and tablets have freed us from having to use a laptop or desktop to use the web. Using HTML and CSS, designers can now use media queries to control how a site appears on different devices.  If done right, and done from the beginning to save costs, your website can be useable and look nice on multiple devices, without the need to setup a different mobile site or theme.

We may also be seeing the end of the tiny font fad that has made sites illegible for the last decade. It’s about time.

You see, in most cases, if you’re building websites with the font size set between 10 and 15 pixels, you are costing your clients money. And I aim to prove it.

16 Pixels.

A jQuery plugin to increase a link’s target area

I’m working on a mobile web site and one of the things that can be done to make it more usable is to make targets larger, so that user’s don’t have to be as accurate to trigger an event.  It is an application of Fitt’s Law. In this case, I was trying to make the target for a link (a html tag) as large as possible and came up with the following plugin. It will look within an element, and if it finds an a tag, it will make the whole element click to go to the destination found. It will also apply a class to the element when users click on it, so that you can visually indicate its been triggered.

Usage

{syntaxhighlighter brush:jscript}
$(‘.big-list’).linkifyContainer({‘hover_class’ : ‘item-hover’});

Source

{syntaxhighlighter brush:jscript}
/**
* Linkify’s a containing div with the first link it finds.
*/
(function( $ ) {
$.fn.linkifyContainer = function(options) {
var settings = {
‘hover_class’ : ‘link-hover’
}

return this.each(function() {
if (options) {
$.extend(settings, options);
}
if ($(‘a:first’, this).length > 0) {
$(this).click(function() {
window.location = $(‘a:first’, this).attr(‘href’);
}).mousedown(function() {
$(this).addClass(settings.hover_class);
}).mouseup(function() {
$(this).removeClass(settings.hover_class);
})
}
});
}
})( jQuery );

Improving HTML Forms accessibility

The single easiest improvements you can make to the usability of HTML Forms is to correctly use LABELs. And it helps all users, not just a subset. Its also a nice application of Fitt’s Law

s Use the label element to make your HTML forms accessible | 456 Berea Street

When checkboxes and radio buttons have properly associated labels, the label text will also be clickable, thus making the target area much larger and easier to hit. This obviously has usability benefits for all users.

Browser upgrades – Firefox 2 or IE7

Of course, you know I’m going to tell you to install Firefox 2.0 once its released, and I don’t have a windows XP machine so no trying out the newly released IE7.  By the way, did you see that security vulnerabilities were already found for IE7, less than 24 hours after its release?  I’m using a release candidate of Firefox2, thanks to an ubuntu upgrade. While the Safari-like close button tabs are taking a little more time to get used to, there are some noticeable, if not drastic, usability enhancements.  The search field, in the top right of the UI, is larger giving you more room too see search terms.  I also like the automatic spell-checking in text areas, it already caught one typo as I wrote this post.

Over at the Wall Street Journal, Walt Mossberg has a more thorough comparison of the two browsers.  If you’ve been sitting on the sidelines, you’ll get the IE7 upgrade automatically via windows update in the coming weeks.  If you can’t wait, download Firefox now.

I have been testing IE 7, and I agree with Microsoft that it’s much
improved. If you are a confirmed IE user, upgrading to this new version
makes perfect sense, because it is likely to be more secure and its new
features make Web browsing better. But if you are already using
Firefox, IE’s main competitor, I see nothing in IE 7 that should make
you switch. It’s mostly a catch-up release, adding to IE some features
long present in Firefox and other browsers. The one big feature in IE 7
that wasn’t already in Firefox, a built-in detector that warns against
fraudulent Web sites, is being added to Firefox in version 2.0.

Myths about Usability

Nielsen has a better than usual alertbox today trying to dispel the Misconceptions about Usability. One of his points really resonated with me regarding the tensions that can exist between creativity and usability.

Design is basically problem solving under constraints: you must design a system that can actually be built, that’s within budget, and that works in the real world. Usability adds one more constraint: the system must be relatively easy for people to use. This constraint exists whether or not you include formal usability methods in your design process.

Knowing real-world facts increases creativity because it offers designers ideas about design improvement and inspires them to focus their energy on real problems.

Its hard to say that adding a constraint is going to increase creativity. However, when a designer is thinking about creativity they’re usually talking about coming up with a site design from scratch and resist the way that usability guidelines force them to work in accepted ways such as boxy-columnar layouts and avoiding mystery meat navigation. I think what he should have really said is that usability, like any other constraint, forces designers to focus their creativity to improve, mold, and refine accepted website design conventions for a particular deployment. Of course, this takes the creative joy out of the process and routinizes it.