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

 

**

Bad Usability Calendar 2008

NetLife Research is a Norwegian based User Experience design and consulting firm. For the last couple of years they have been releasing a bad usability calendar which is meant to show examples of bad UX and usability.

This year's calendar has great examples of exaggerated use of web 2.0 design,social bookmarking proliferation, drop down menus, message feeds etc.

You can download this year's calender here.

Interesting way to portray UX and design bloopers!

Junk folder

Just realized why my junk filter was being ineffective!

With four potential options, the mind somehow imagines two options for blocking, and two for marking safe. (Is it just that or is there a muscle memory  where an older version of Outlook had a "add Sender's domain to blocked list?)

 

Simple grouping would make this UX more usable. Just a seperator line between the first and the second option.

Better still, the option label starting with the actual action. For example "Block Sender...", "Block sender's domain", "Allow Sender..." etc. In the current form, you need to read to the third or fourth word to know the difference...

The six disciplines of User Experience

As envisioned by Donald Norman and inspired by his book "The invisible computer".
The following skills are required for building the best user experience into a product (could be any product from hi-tech to manufacturing)

1. Field studies - Observing potiential users doing their tasks in their normal settings. Skills require careful and systematic observation and usually come from the fields of anthropology and sociology.
2. Behavioral designers - People who create a cohesive model for the product based on a detailed task analysis of the users. They mesh the task requirements with the skills and capabilities of the intended users and this model becomes the basis for engineering design.
   Skills required for this come from the cognitive science and experimental psychology.
3. Model builders - People who rapidly build prototypes and product mock-ups that can be tested even before the real technology is ready. Skills for this usually come from people with a designing and programming background (information architects) and architecture and industrial design.
4. User testers - These people are usually involved in performing usability and feasibility studies. Through rapid user-testing studies , they enable to iterate through designs in order to meet the real needs of the users. Skills for this come from experimental psychology.
5. Graphical and industrial designers - At this stage, the aesthetics of the product are brought in through people who have experience in graphical and industrial design, and the "joy" and "pleasure" of using the product come into picture. Not only must the product designed merge the conceptual model and behavioral aspects but it must also meet varoius requirements of technology. These skills are usually brought in by people from schools of art, design and architecture.
6. Technical writers - The goal of these people should be to show the technologists how to build things that do not require manuals. However in the real world scenario, they are usually brought in after the product is built and are asked to write usage manuals. The technical writers should be able to understand the audience, what the intended users require of the product and how they can go about getting their tasks done through the product. The technical writers should be an integral part of the development team, so that the product is built so well that no instruction manual will be required.

So here's the deal, in a typical technology product, there is no luxury of time to go about doing all the above mentioned steps and in many cases some of the steps can't be executed because the target audience characteristic is too far and wide.

What do you think is the best model that can work for a typical web based application scenario in order to make sure that the real needs of the user are met ?

Give before you demand...

In my search for a good video editing software (any recommendations?), landed up on the Pinnacle Studio web page and was trying to find the nearest brick and mortar to buy the software.

This is what I got.

Not only can I not expand a zip-code based search without a radius parameter, would  it not have been F-DAU had they just showed the nearest dealer based on what ever information they had? Wasn't this a fabulous opportunity for continuity of experience by suggesting other ways to buy? etc?

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.

Nov 8 is World Usability Day

World Usability Day was founded to promote the importance of simple and usable products/services. Several events are being held all over the world to mark the day.

Bangalore.
Hyderabad.
Seattle.
Redmond.

I can't believe there are none in CA!

It will be a great place to meet and share ideas with more usability enthusiasts. I'd urge you to attend, and let us know what you thought about it.

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!.

Nice touches on live messenger

I just got around installing the latest msn live messenger 8.5.

Some things that really appeased my subconscious..

In the earlier versions of messenger, it used to be both an optical and ergonomic challenge to click on the close button. It looked nice and all that, but was super hard to point to and click. A prime example of a good-looking UI at the cost of better UX.

The new button is wider, has a large hotspot, and is bright red when hovered upon.

The other options(minimize and maximize) have a blue hue on hover signifying a less destructive action.

Subtle touches go a long way in creating an intuitive user model.

Circular Reference in Excel

Not many people might have seen this error message, but I used to see it quite often during the time I used to be a business analyst for financial software.

This comes when you do something like I did below:So basically, I had 1 in the first cell, the third was the sum of the two cells on the left and the fourth was the sum of the second and third.

or D3=1, E3=2, F3=D3+E3, G3=E3+F3

Finally, I made D3=G3/2. Hence making D3 dependent on itself and hence the circular reference. Now something like this is not very common in everyday mathematics. But if you are trying to model an algorithm, this is very much required. And this is what I was trying to do.

While this is a simple example and you can very easily just write it such that multiple iterations are performed by just dragging, financial calculations usually used to run into 20-30 columns. Think forex forwards and interest rate swaps. And when you model these calculations in software, you use a lot of loops, be it if else, while, etc etc.

Now the problem comes when you have to test these algorithms. It is not enough to test the final result, you have to test each step. Which means you need some s/w which lets you simulate the condition effortlessly and excel does that, now only if it supported loops (without getting your hands dirty by writing macros).

The solution is simple, if the user attempts to do circular referencing, detect it, and automatically move the next iteration below (or to the side, or another sheet), let him choose the number of iterations, and he's a happy man.

Incidentally, this problem and the solution got me into Aditi :)

Copy Writing in the Web 2.0 era

My recent post about a solution to the Attachment problem brought out an interesting debate on messages - the words and tone to use. On the same lines, Umesh wrote this great post on New Age Web Messages on his blog, which I reproduce below, with his consent. (Thank you, Creative Commons.)

The new age web sites/applications (the so called web 2.0) have all evolved for good and one of the many things which have changed for good is the copy writing for error message or in that case any message. I think it’s the advent of blogging which made the web world change the attitude towards its communication to users. They chose to speak the human language as the new web considers the users as an integral part of their growth. Most of the services go live and is thrown open to users before being steady and the developers fine tune the performance according to the user’s feedback. There are more instances of the services being down every now and then but what I have noticed is that, the users have become calm. And its only coz the users are made to know what exactly is the reason behind the downtime. It’s all about transparency. You let your users know what’s happening with you and they will be ready to help you out if you are in need. The better you explain the more they understand.

Even old websites used to give out simple and understandable messages before but they used to be very formal. Now the language has become more informal and more personal and it works. It helps to keep the situation light and in control. And it also shows how much you care for the users.

I think it all started with Gmail. A message which says “Hooray no spam here” was a big surprise for me at first. Even though I liked it, I used to wonder why they kept it like that. Then when I started seeing messages like “Grr something went wrong with the connection, try sending the mail again” I started feeling comfortable rather than getting irritated. I liked the way Gmail talked my language.

Cleartrip is one of my favorite sites and their message copy is outstandingly human. Once their site was not loading and I got this



And once my flight booking failed to go through



Oh this message from Squirl, once when i tried to upload an image actually made me laugh



But of course the weird ones just refuse to go away. I got this message when I tried to disconnect my internet connection.



I think it’s high time all of us understood the importance of good and more human copy writing in application development. It’s just a simple attitude change from our side which is needed to achieve a better user experience. Recently a developer friend of mine and I were browsing through Google reader and suddenly we saw the message “Grr something has gone wrong”. He said

Hmm if I put Grr into my error message I will be told to take it out immediately saying its not good. But if google says the same, its great communication.

(Umesh's post ends here.)

A deeply insightful comment in the attachment debate came from Vinod.

Talking human language in errors makes user's more comfortable with the app rather than just making them wonder if they screwed up with something :)

In our quest for the killer feature, we sometimes underestimate the importance of tacit aspects of the product. In today's world where features can be copied everyday, things like comfort of use provide a source of competitive advantage. For example: Why do we choose one IM software over another (and add all our contacts to it, pushing our commitment deeper)? Just because we "like" it.

Need to ‘Undo’ on web applications

The undo problem is one key aspect I am hoping future web apps will support. I just deleted all my mails in my hotmail inbox and I need to ‘Undo’ but I can’t do it. If this was a desktop application I could have done this in a jiffy.

This is a huge problem in web apps, though they are not covered too much and not many people talk about them, as we are now pretty much used to this kind of behavior. Web apps work excellent, they store all our data, enable us to access them from anywhere and give us no worry about licenses etc.

But as we move towards looking at a cloud or what some people call as a ‘cloud OS’ it becomes increasingly important to have all the desktop paradigms on the web. This problem was probably not thought about by people because when the web started it was more a data storage medium where documents, files etc were stored and people would read from it, so probably there was never a need for offlines access or storing states. But as we move towards having a cloud OS, and making the web a operation system, it becomes very very important to look at such issues.

John Dowdell from macromedia has some interesting thoughts on storing states where he basically argues as to whether the Back button on the browser needs to smart to capture these changes and also talks about capturing states in web apps.

Having an undo functionality brings about a sense of simplicity in the user’s mind - “What the heck, I can always undo it” and hence brings more confidence. This will play a vital role as people from different age groups, degrees of tech saviness etc start using the web to perform very important and secure activities like paying bills, making purchases online etc.

So what's your solution to this problem ? Or is this a problem at all ?

Image courtesy : NewbieGamerBlog

Remember those Attachments?

coffee.fetchNow();
post.History(initial, followUp);

User Scenario (for the Problem Statement)

Dave Burton has just finished working the sales forecast for the quarter. His boss, Lee Hunt, asked for the document by the end of the day. Dave switches to his Outlook window, and creates a new email. He types:

Lee,

I’ve attached the sales forecast you requested for. Please review and comment.

Dave.

Dave clicks the “Send” button, and goes out for his well deserved coffee break. When he’s back, he sees the following reply from Lee.

Dave:

I didn’t receive any document in your email. Please check and revert asap.

Lee.

“Whoa!” thinks Dave. He forgot to attach the document. This time, doubly careful, attaches the document in reply to Lee’s mail. His email body reads:

Lee,

I guess I forgot to attach the document the last time. Please find it attached here.

Dave.

The Solution

User Scenario

Dave Burton has just finished working the sales forecast for the quarter. His boss, Lee Hunt, asked for the document by the end of the day. Dave switches to his Outlook window, and creates a new email. He types:

Lee,

I’ve attached the sales forecast you requested for. Please review and comment.

Dave.

Dave clicks the “Send” button, thinking about going for a well deserved coffee break, when he sees a message pop-up.

Dave clicks on “Yes”, thinking “phew, thank you for reminding me!”

Feature Specification

Outlook should be able to automatically detect the user’s intention to send an attachment with an email by unobtrusively looking in the email body for words, which we shall call “attachment-indicating” words or phrases.

Following is the set of attachment indication words & phrases [Note: this list will be revised after the usability tests.]

• Attachment
• Attach
• Here you go

Normal Flow

The user is in the Compose Mode. The Compose mode includes New Message, Editing a Draft Message, Reply, Reply All & Forward email options.

The attachment auto-detect feature is turned on. This could be implemented as a separate thread, process or program. The spec will use “thread” as a metaphor to describe its functionality.

The thread checks whether there is an attachment to the mail already. If there is, it stops.

If there is no attachment, then the thread periodically scans the new content in the email body for any attachment indicating words or phrases. As soon as it finds one, it sets off a flag.

If the any of the email content is deleted, the thread runs its checks again, and updates the flag accordingly (if any word/phrase still exists, then keep the flag on, else turn it off).

When the user clicks on the Send button, check for the status of the flag before sending email. If the flag is on, then prompt the user with the following message.

If the user clicks

• Yes: Close the message dialog, and focus the cursor on the “Attached” field of the email. Display the “Attached” field if it wasn’t displayed earlier.
• No: Close the message dialog, and send the email.
• Cancel: Close the message box, and place the cursor in its last position in the email body.

Alternate Flows

The user decides to save the email to send later

Behavior: The flag status is stored as well, and the checks resume when the user opens up the message in the drafts folder.

The user cancels the message

Behavior: The flag status for that message is also deleted.

The user has multiple windows open in the Compose Mode

Behavior: Each message has its own flag, and each flag status is maintained even if the user switches windows.

Also Applies to:

New Appointment, New Meeting Request

p.s.: This is the first post I've written with some commercial interest. At last I'm making money by blogging.

Dell key-bored?

I recently switched from Toshiba to Dell.

While typing, my fingers repeatedly reached out to the two blank spaces on either side of the arrow keys in the right hand bottom corner (the red box in the image) for page up and page down.

Those keys are currently in the top right corner of the keyboard (highlighted with an orange border).

Usability bug?

The other "traveling salesman" problem

This dialog box - in it's current state - works just fine if you use it for that once a year vacation... For users on the move, people who are OO 3-4 times a month, ability to "schedule" OO is a must.

Here is a recommendation. (Thanks, Sid, for the screen design)

It takes one thing off the checklist before one shuts the laptop before heading out of office.

Attaching this time :)

The most common mistake I have seen being made while sending a mail is forgetting to attach a file. (The second biggest, I have attempted to solve here)

Any suggestion on how this problem can be fixed?

A $10 starbucks card for the best response.

A click in time ...

Installed PhotoShop for fixing red-eyes and such. Now, an automatic downloader launches every time I plug my camera or phone into USB.

I searched around in the dialog box to find a way to turn it off (A simple checkbox would have got Adobe a happy user). Read help and realized I need to go to the preferences box (A button to launch it? Nope. Hyperlink to a help page which tell me where to find the preferences dialog box. No Sir, the developers are in a morale event)

Open Adobe PhotoShop. Preferences are in the Edit Menu. Non standard for a Microsoft application. Clicking preferences throws up submenu with 10 items. Damn.

Trawl through each item and reach Organize and Share (10th item :)

Clicking it opens another application (Organizer) !!! along with a dialog box titled preferences. And finally find the checkbox.

Whew!!!

Better meeting requests

Here is another suggestion for improving the "responding to a meeting request experience" in Outlook 2007.

Here is suggestion I had in the past

Gmail Attachment

To attach a file on Gmail, you need to click on the “Attach a file” link, on clicking that a text box comes along with a “Browse” button. If you want to add one more file, again you need to click “Attach another file” and then you need to click again on “Browse” button to browse through the files in your machine.

To attach a file you need to do 2 clicks. So that means for 5 attachments, you need to do 10 clicks and browsing through the file 5 times. It’s obvious that the user wants to browse when he clicks on “Attach a file” link. So a “File upload” window to browse should pop up on clicking “Attach a file” link, reducing one click per attachment.It should also provide an option of multi selecting the files in a folder. These files can be shown to the user the way multiple email addresses are shown. For that the UI can be changed a little bit as shown below.
To remove a file, just delete the way you delete the email addresses. And for attaching more than one file from different folders, just clicking on browse button and select the file.

Viewing pictures in WinZip

To open a picture from a picture folder in windows picture and fax viewer, you navigate through the pictures with the help of the arrow keys.

Try doing the same in a zipped folder of pictures.

You wont be able to navigate through your arrow keys, instead if you press the arrow key to view the next picture the same picture would come up again or you may see some picture which you never expected. This is because WinZip shows the picture, which is already stored in the Temp folder of your hard drive.

WinZip should automatically open and store the picture in the temp folder whenever user clicks on the arrow key to view the next picture.