Raising the (scroll) bar...

 

The scroll bar on the iTunes website with labels in the "shaft" for "aimed" scrolling.

Awesome.

 

 

 

 

 

 

And while on the subject of scroll bars, I have never really like the way the control renders and behaves.

1. The scroll bar is window centric and not document centric. For e.g., clicking the down button or pulling the elevator down, scrolls the document up while the action is called scrolling down.  Dyslexic.

2. Unidirectional arrow buttons on either ends of the scrollbars. So while scrolling down, if you miss the spot on the document you were looking for, you have to navigate all the way up the screen to scroll back up. I wish both ends of the scroll bars had arrow pointing up and down.

BTW, notice the scroll bar in Word 2007 (figure to the right). The page up and page down controls are (correctly) bunched together, and not laid out on the periphery of the control for symmetry

 

**

How far would you go for help ?

 

 

                                                                    *

Would you miss Usability if it weren't there?

I've firmly believed that developers have as much to do with user experience as designers and functional analysts or product managers - if not more. Look at the checkbox in the screen that says "Erase after Importing".


Thanks to the way it is implemented, you can check/uncheck it anytime during the import process, any number of times. It just picks up the last state of the checkbox after import is done.

Obvious, you may say. But let's look under the hood to understand how this could have got killed.

The right way to implement this is (don't read too much into the syntax, this is just to illustrate the example):

for (int index: items) //for each item{
import(index); //do whatever it needs to import
}
boolean eraseOnImport = chkErase.getValue();// read the checkbox state

if(eraseOnImport){
for (int index: items) //for each item
{
delete(index);
}
}

A developer could at the code above and say - Whoops! 2 for loops iterating over the same list is suboptimal - so rewrite it as:

boolean eraseOnImport = chkErase.getValue();// read the checkbox state
for (int index: items) //for each item
{
import(index);
if(eraseOnImport){
delete(index);
}
}

Less lines of code, less variables used, less memory consumed, less processing time.
Two birds, one stone.
All valid code optimization techniques.
Wonderful.
But as a feature, this would mean - the first state of the checkbox gets read. You cannot change your mind once the import starts.


The lack of the flexibility doesn't make the feature less usable, but its presence pushes the usability up by a notch.

It is small things like these that constitute the difference between Customer Satisfaction and Customer Delight, don't you think?

Signup and don't feel a thing

For those who may not know, IndiBlogger is a network of bloggers of Indian origin. Bloggers can list their blogs, share, favorite and discover new blogs. I recently listed the UXUnleashed blog on the site and found one of the most delightful sign-up forms I've seen.

1. The form to sign up for an account and enlist your blog is the same. And it isn't called "Sign up to IndiBlogger now!". It is a form for the user to actually do something useful on the site.
2. The form elements echo the core idea of having the seamless user experience. You provide the site details first - the username is just your email and password come in later. And all you need to sign up is an email and password.

Some suggestions I have for the creators of the form

1. Include a captcha, just to prevent spam. A free platform to promote a website is a juicy target.
2. Integrate with OpenID, so that users who have an OpenID can use it. That's a one field form. Wordpress and Blogger support OpenID sign-in and commenting so it is likely that a large number of users (will or) have an OpenID. [I don't want to go off topic here. Please leave me a comment if you have further questions.]
3. Autocomplete on the Tags field to encourage people to re-use tags.
   

There's also no way to confirm whether the user is really in or from India, but that's okay. We Indians are trusting. :)

Have you found an interesting sign-up procedure on the web? Let us know about it, and do mention what struck you as interesting in that form.

Mix ups

Continuing on from my previous post about the non apparent UX improvements in Vista...

 

Noticed a little hyperlink called Mixer at the bottom of the volume control (..access it with a single click on the volume icon in systray)

Gives you access to this fabulous dialog box.

It shows you all open applications that are capable of making a sound. It allows you to use the left most control (Speaker/head) phone to decide the over all volume. And then allows you to control the relative volume of the rest of the applications)

Watching a cricket match on an illegal site :) without commentary yet want to hear a speaker on live meeting without the new mail to ring a bell while allowing MSN messenger to ping you?

Beautifully done...

 

BTW. Post number 100. Many many thanks to everyone who has participated with bricks and bouquets, blogs and comments.

Thanks

Physics with some crayon

Isn't this game incredibly cool, check the video below. Looks like you really need to know your physics well to play this one :) This one is from Kloonigames and runs on the tablet PC. A PC version of crayon physics is coming soon.



The user experience on this is incredible, watch how the game reacts as the user draws different figures and tries to achieve their objective. With the Wii and PS3 giving PC games a run for their money, I think innovative concepts like this one are a really good answer.

User Experience on a Corporate Website

Corporate websites can be the most non-interactive places on the internet. They consist of mostly static pages, and the way designers make them interesting for readers is by considering the choice of colors, layout (how much text where), graphics, Flash and the like.

Now, take a look at this, taken from a corporate website.



Each page (other than the home page), has this little form (6 fields, 3 mandatory) tucked away on the right. So imagine users browsing the site and reading about the company - the minute they see something interesting, they can request to be contacted right away.

Without navigating away.
Without losing context.
Without having to search for a "Contact Us" page.
Without it being in your face.

Eliminating these hassles would also result in more people actually filling up the form. Which means more leads. More sales. More revenue.

When was the last time you looked at your corporate website to provide a better User Experience? Mea Culpa. Off I go now.

Left is not right, back is not wrong

Continuing on from my previous post about the non apparent UX improvements in Vista, here is one simple, curious little left pointing arrow...



All those years ago, a few days before I was to leave for US, I was teaching my mom how to send emails. I sat many a hour being as patient as she has been with me through all my idiosyncrasies. What I remember the most is her being a deer-in-headlight every time she came to a new screen. She was so afraid to do anything lest it disappeared and she did not know how to bring it back again.

Now it comes together to me.

Discovering is not enough without knowing predictably how to get there again. ("Your highness," said Vasco Da Gama, " Went to India I did, though I know not how to again").

This insanely simple button on the dialog box is a revolution. It sews together the structure of a wizard with the well understood browser back button allowing you the permutation-ally logical option to go one screen back without breaking the workflow!

Wow.

I for detail...

Beating down Microsoft products is fashionable. And products like Waste-ah makes it so much more simpler (and justifiable) to do so.

In the next few week, I am going to blog about usability improvements in Vista. While the overall operating system still has a lot of work on the implementation, I think the product and program managers have done a stellar job.

For example: Do you remember this age old dialog box?

You could hit F2 in the file explorer to in place edit the name of a file. The entire filename along with its file extension would be highlighted, and when you started typing, the file extension, more often than not, was lost. That was not the only problem though. If you selected No in the dialog box, file explorer would revert back to the old filename instead of allowing you to start where you left and rectify.

Very nicely taken care of in Vista. Hitting F2 automatically highlights only the name of the file, preventing an inadvertent change of extension.

A tip in time ...

In my eternal quest for fixing photos damaged by the inability of the iris to close the pupil faster than the flash can discharge its capacitor (commonly known as red -eye effect), I found this neat little feature in Adobe Photoshop Elements 5.0.

The tool-tip had a hyperlink to a help topic. The ability to anticipate a users need goes a long way in usability.

Bravo, developer, product manager, program manager whoever you are, where ever you are.

Round up of “Expression around the clock”

The Expression around the clock event happened yesterday in Bangalore at Fuga, a cool venue for an even cooler event. This was a global designer conference(taking place simultaneously in 10 venues around the globe) aptly themed “Design is back!”

The event started with out with registration, Microsoft had a very strict registration and confirmation process for this event and inspite of that the place was packed with people. There were about 200 people and seating was available only for about 70 people.

The event kicked off with a keynote from Shelly Armstrong of the Microsoft Design team. Shelly has been involved in various projects in Microsoft, including the interaction design for the XBox and the Zune. Her talk was totally targeted towards designers and tips on improving UX, design, importance of keeping up with latest trends, networking etc.

After this there was a break, with the bar being opened up [:)]. There was more action ahead though. The next session was by Supreet Singh, an UX designer and Pandurang, a dev. They started out with a desinger dev duel and demostrated how Expression Studio supported the designer-dev collaboration with ease. This was pretty interesting, with Surpreet putting in a video on to his canvas and then Pandurang writing a bit of code for the play and pause functionality.

The dev, (as they put it, didn’t have much idea about UX) and hence he puts up text messages for play and pause. Surpreet then takes this XAML and immediately ports this message into a cool button.

The next part was demos - impressive stuff overall, though I had seen most of them before. The demo which impressed me the most, was the one of a Silverlight video player being able to play 10 high definition videos simultaneously with ease, and the ability for the user to seamless switch between them with no system overload.

Post this was the usual networking session (with more beers though!). Met a couple of interesting people and managed to market our UX blog. People seemed to be very interested by this, especially because we are not a design only firm.(Thanks Ram ! for mentioning our blog in your post.)

At the end, Microsoft gave away a goodie bag to each participant. It had a 60-day trial of the Expression Studio, a design magazine and a Reebok t-shirt!.

Wow tube

The video player user experience in YouTube is probably single biggest contributor to its explosive adoption.

By the time the one video that you came to see ends, a very very smart engine keep egging you to seem more and more untill you are hooked.

The uncluttered screen layout presents the most obvious options. Share and the replay being the first choice of actions. Scrollable other similar videos being the second and only other choice.

Simple and (hence?) effective

Value Ad

I was exploring ways to travel from Lima to Arequipa for my upcoming vacation in Peru, and was served a super sensational advertisement by Google.

Non-flat advertisements are here ! A boring link replaced by a sexy data entry/query !

Ads 3.0?

The presentation is awesome. The subtle image of the airplane. The simple text boxes (notice, no calendar control, no year in the date. As light weight as possible). Link to 6 popular travel portals to complete the search.

Awesome !!

Twitter's Support Page

Take a look at Twitter's support page. If you haven't heard of Twitter, welcome back to Earth.

I love the way they gather the case information. You can't make it any simpler.

1.This is what I DID
2.This is what I EXPECTED to happen
3.This is what ACTUALLY happened



Zen.

Considering that most of Twitter's 200,000 users are tech savvy, to say the least, do you think that they could have created a more complex support page?

p.s.: I'm karmali on twitter.

Lotus Notes Attachment

Lotus Notes provides an option to the user to multi-select the files.
In addition to it, it even gives an option to the user to zip the files while attaching, offering a good User experience(UX).

2nd most common password: password

Bravo, google. Nicely implemented password strength indicator.

Here is another site which gives you the relative strength of passwords. And a site that lists the most common passwords.

"Share" Can

Vista vastly improves the experience for sharing files and folders over XP.

The usual steps in sharing a folder are

1. Pick the folder

2. Add recipients, give permissions (reader, writer etc)

3. Send a mail to the recipient with the share name

The following dialog box makes the third (and the most boring) step a breeze.

A click on the email hyperlink in the dialog box presents you with an email with the following text

"I have given you permission to access some of my files from any computer on this network. You can access them by clicking the link(s) below.

Videos (file://UNLT089/Videos)"

Click send. Done. Great job.

Shows how important it is to extend the user experience from a point action to an entire workflow.

File this...

Blogger has the best implementation for blog categorization amongst all contemporaries.

Without forcing a taxonomy (and structure) on the writer, blogger allows freeform "labeling". The text-box provides intellisense and auto-complete making the task simpler.

I also love the way the labels render to provide the blog navigation.

The perfect prescription

Background: Deborah Adler, a graphic designer crafted a perfect prescription canister after her grandmother accidentally took the wrong medication. The entire article is here and worth a read. the important part is reproduced below

The ClearRx system Adler designed for Target includes bottles for pills and liquids and a measuring syringe. Here’s the pill bottle that hits shelves in May.

(1) Easy I.D.
The name of the drug is printed on the top of the bottle, so it’s visible if kept in a drawer.

(2) Code red.
The red color of the bottle is Target’s signature— and a universal symbol for caution.

(3) Information hierarchy.
Adler divided the label into primary and secondary positions, separated by a horizontal line. The most important information (drug name, dosage, intake instructions) is placed above the line, and less important data (quantity, expiration date, doctor’s name) is positioned below.

(4) Upside down to save paper.
Klaus Rosburg, a Brooklyn-based industrial designer hired by Target, came up with an upside-down version that stands on its cap, so that the label can be wrapped around the top. Every piece of paper in the package adds up to one eight-and-a-half-by-fourteen-inch perforated sheet, which eliminates waste and makes life easier for pharmacists.

(5) Green is for Grandma.
Adler and Rosburg developed a system of six colored rubber rings that attach to the neck of the bottle. Family members choose their own identifying shade, so medications in a shared bathroom will never get mixed up.

(6) An info card that’s hard to lose.
A card with more detailed information on a drug (common uses, side effects) is now tucked behind the label. A separate, expanded patient-education sheet, designed by Adler, comes with three holes so it can be saved in a binder for reference.

(7) Take “daily.”
Adler avoided using the word once on the label, since it means eleven in Spanish.

(8) Clear warnings.
Adler decided that many of the existing warning symbols stuck on pill bottles don’t make much sense—the sign for “take on an empty stomach,” for instance, looked like a gas tank to her—so together with graphic designer Milton Glaser, for whom she now works, she revamped the 25 most important.

Shaping it up

The Format AutoShape dialog box in Word 2007 and the Format Shape in PowerPoint 2007 look unnecessarily different despite serving the same functionality.

Fig1 : Format AutoShape dialog box in Word 2007

Fig 2: Format Shape dialog box in PowerPoint 2007

And what is automatic about the shape in Word?

While, the dialog boxes look different, the formatting ribbon is uniform and simply fantastic - unleashing the power of professional looking formatting to non-power users.

And not to forget the wonderfully implemented "hovering toolbar" on the context sensitive menu..

Powertip for PowerPoint Users: Struggled to draw a straight line on a slide? Keeping the Shift Key pressed draws either perfectly horizontal or a perfectly vertical line.

Anybody wants a perfectly diagonal line ?