Multiple Save Buttons

Written by Verne on June 4th, 2009

холна секция

Just a quick note on web forms. Everyone likes short forms (i.e. 5 or less fields). In fact, if you’re designing forms, you should almost always aim to breakdown yours into smaller and more digestable chunks of fields rather than have 20 fields vomited onto a single page.

But, sometimes it’s unavoidable. If you’re editing your profile on one of your kajillion social networks, for example, it’s acceptable to have a lot of fields on a single page. Nonetheless, you still run into longformitis from time to time (fatigue from filling out long forms). One technique I’ve seen that combats this is to have multiple save buttons throughout the page, evenly dispersed between sections of the form. This is the web form equivalent to having checkpoints in Super Mario, and it’ll allow users to save their changes without having to scroll all the way down to the bottom of the page.Картини

Applications of usability principles on a social network

Written by Verne on March 17th, 2009

Daily ChallengeIn October 2008 I joined a great group of guys over at Daily Challenge to lend some creative firepower to an already blazing group of talented young individuals. At that point, Daily Challenge was merely weeks into its first public beta release of its new socially-conscious-driven social network and sported an undesirable user interface that was begging for some creative attention. But that didn’t matter – as with any new age development team working on a new social media product, the goal was not to release a perfectly designed or developed site, but rather to get an idea out into the market quickly and start listening to the feedback.

Fast forward 5 months and Daily Challenge releases its 2.0 website – the product of many long days and nights of usability sessions, focus groups, research, self-reflections, yoga desk calendars, and lots and lots and lots of attentive listening. We planned, mapped, designed, redesigned, redesigned again (and again and again), developed, tweaked, redeveloped (and again and again… you get the point) and launched a site that we felt was not only leaps and bounds better than its predecessor (in pretty much every aspect), but was also, more importantly, much more usable.

Daily Challenge beta 1.0 vs beta 2.0

And that’s what this post is about (in case you were wondering where I was going with all of this…).
Read the rest of this entry >

Improving the transition from paper to Photoshop

Written by Verne on March 8th, 2009

Improving the leap from pen to PhotoshopPaper prototyping is a method used by many web designers (including myself) to help plan and conceptualize new site designs or features. Simply put, it’s creating website prototypes on paper. By removing distractions like code and syntax and any technical elements, the designer can focus in isolation on the form, structure and design of the piece he’s working on.

Many web designers use paper prototypes because they have artistic backgrounds and likely got started in this field through their love of a 2B pencil and sketchpad. Others use it simply because it’s the fastest way to give an idea some shape. Everybody’s got a pen and paper within arm’s reach – not everyone can whip open Photoshop every time a new idea sparks.

Still, I’ve been hearing lately that it’s not uncommon for web designers to struggle a bit with translating their paper prototypes to the Photoshop canvas. I think we’ve all been there – a perfectly drawn sketch of the most amazing website (in the whole wide world, mind you) that, once brought to the screen, garners the same reaction that Picasso probably had after every painting: Crap, that’s totally not what I had in mind.

In response to some of these struggles, I’ve decided to share a few pointers that I think have helped me convert a greater percentage of sketches into actual websites. Enjoy!

Read the rest of this entry >

Priority provides clarity

Written by Verne on February 16th, 2009

Priority provides clarity

Websites have grown increasingly complex and robust over the last decade. We don’t really think about how much today’s web applications have blurred the lines between the desktop and the web but the transition is surprisingly smooth and seamless. Also interesting to note is the idea that the web isn’t just filled with tech-savvy net junkies anymore – Auntie Connie and Grandma are also daily web dwellers complete with Facebook profiles and personal email accounts.

So, websites are more complex and serving a broader audience than ever. What this results in is a need to be more usable than ever. Part of this is making sure that the things that need to be done on your site (i.e. the actions a user needs to take) are as clear as possible. So how are sites doing this today?

Emphasizing important actions (LinkedIn)I came across this realization not too long ago while updating my LinkedIn profile. LinkedIn itself doesn’t really stand out as being anything exceptional when it comes to providing a usable interface, but the Edit Profile section did offer one little nugget of insight. Like most forms, there’s usually a Save and a Cancel button at the bottom. What made LinkedIn standout was the fact that it emphasized the Save action (by making it a button) and de-emphasized the Cancel action (by making it a simple text link). It’s a small detail, but an important one to me.

With all the options and clickable areas sites like LinkedIn offer, it’s important to provide clarity to the user by telling them exactly what they need to do. If you make them guess a split second longer than they need to, you’ve lost them. The emphasized Save action is not a make or break feature by any means, but it demonstrates thinking in the right direction. Giving one action priority over another tells the user what’s important, what they’re probably looking for, and what they should probably click.

The same idea applies for other visual cues. Headlines and welcome messages are made larger than body text. Why? To show visual priority and hierarchy in a single glance. Within a few seconds, you know what to read first. In fact, even without thinking about it, you will pay attention to things given greater priority.

So the next time you’re laying out a page full of content and designing a lineup of buttons, consider priority. A bit of extra thinking on your part goes a long way to reducing the amount of thinking your users have to do.

New Gmail buttons: usability issues?

Written by Verne on February 4th, 2009

This morning I got into the office and checked my Gmail as I normally do. To my surprise, I found out that Gmail had pushed out an update overnight that redesigned the web app’s buttons. While they definitely look sleeker, I’m wondering whether they look more or less like buttons now. Are there usability implications?

Old Gmail ButtonsThe buttons pre-redesign were actually unstyled (similar to Google’s search buttons, pictured left) – they took the default look of buttons in your OS (grey rounded-corner rectangles for Windows users, grey/glossy pill-like shapes for Mac users). From a usability standpoint, these buttons made the most sense and were most natural and recognizeable to the user (after all, they’re used to seeing them in most of their desktop applications and prompts). You knew by looking at it that it was a button. Plain and simple.

New Gmail ButtonsThe buttons post-redesign are now a bit sleeker (pictured right) – flattened down with a solid grey border, slightly rounded corners (~1 pixel radius), and a subtle gradient to mimic the button’s convex surface.

For a web-savvy user, the redesign has little effect. If anything, web-savvy users would probably enjoy the new look more. But for more casual users, are the newly-redesigned buttons still obviously buttons? Would less web-savvy users confuse the buttons for tabs?

There are definitely subtleties between buttons, tabs, and text links. Each sort of have their own implied conventions and purpose. Does the redesign blur these differences in any way?