You see the list of files, then click delete on the row you want to delete.The row then appears “selected” (the darker colored rows at the bottom). What confused me was that it still says “delete” followed by an “X” icon that usually means “delete”.

Now, to to delete, press “save changes” below the rows.

This layout is close to the old-school principle with checkboxes adjacent to the rows. This example is seen in Hotmail (where I think it originated 13 years ago).

In my opinion, the new Google Groups style mass deletion could do better:

First, the selected rows must have visual clue that it will be “deleted” — not a “delete” action (icon) that suggests further interaction is needed.

Second, change wording on button to “delete selected messages”. Or, better yet: The button should be permanently disabled and enabled only when at least one row is selected.

Of course it requires that the algorithm be correct. Look at this example from Jaiku on what not to do:

Thanks a lot Eric Burke for that fantastic visualisation!

A great quote that fits for this situation:

“Life is really simple, but we insist on making it complicated” (Confucius)

More quotes: Great Quotes For The Agile Project Wall

Technorati Tags: simplicity, complexity, cartoon, stuffthathappens

If you like feel free to comment on what you like or don’t like, and please add links to research that could be relevant: What works and what does not.

I’m adding each screenshot as a thumbnail here and linked to a separate page that is open for comments.

Carreerbuilder.com (link to job)

JobsInHubs.com http://www.jobsinhubs.com/jobsinhubs/

and the confirmation from JobsInHubs :

Jobzonen.dk(link to job)

Monster.com http://jobview.monster.com/GetJob.aspx?JobID=67576101

and the confirmation from Monster:

Stepstone.dk (link to job)

manpower.se (link to job)

Technorati Tags: user interface, ui, examples, screenshots, send to friend, email, email friend

Drag to adjust numberic value
Mouseover the input box, hold down Cmd + drag left or right to increase / decrease. Hold down Cmd + Opt or Shift key and drag can change the value in decimal or 10 interval. This shortcut works in all dialog palettes.

Copied from WebdesignWall’s “Photoshop secret shortcuts”

Very interesting interaction design here. Obviously, the fields here are not a web application, but it inspires me to think about raising the bar for web apps. So this is not just a text field. You can of course write text in it normally. Now, pressing Cmd key (or CTRL on Windows) makes it possible to slide through values. Furthemore it’s still possible to click the drop-down symbol next to the field. This will reveal a regular slider, that also can be dragged.

Well thought of, Adobe! My only complaint is poor discoverability. It took me 10 years of being a regular Photoshop user before finding out…

innovation, text, field, input, html, web2.0, photoshop, adobe, slider, discoverability, usability

Technorati Tags: innovation, text, field, input, html, web2.0, photoshop, adobe, slider, discoverability, usability

So I ordered this DVD/harddisk recorder: Amitech 736 with all the right buzzword features:

• DVD player/recorder
• Built-in harddisk (I ordered the 250GB version)
• Digital tuner as a supplement to the analog tuner (better quality of recordings)
• One touch recording of programs
• Timer controlled programs
• Good looking

Features vs user experience

While the feature list was just what we needed, I wanted to put it in context with how it’s used in our home. The DVD is primarily for my 3 year old son Victor, so he can watch Bob the Builder, Koala Brothers, Postman Pat, Noddy, Curious George, etc., and occasionally cartoons recorded from morning television.

DVDs in the hands of a 3 year old get worn and it would fit perfect to copy DVDs to the harddisk. Most important feature! Second, to record the programs like Mickeys Clubhouse (broadcast in Denmark only Sunday morning, but could come in handy every afternoon if my wife and I wanted to calm Victor’s temper after a long day in kindergarden). Second most important feature: Record from TV.

But what always surprises me is that features are nothing: It’s how the features are executed. The user experience is very important to me (I’m a usability geek, of course). But as an end-user in this case, i found the following astonishing findings after the first weekend’s use:

First weekend, many wasted remote control presses

• Uses 25 seconds for startup. I can’t even eject the cd tray and load a dvd before the software is ready for taking my orders. Also there is no signal transmitted to the TV before everything is up and running.
   
• The harddisk is audible and makes me want to turn off the dvd recorder as much as possible. There is some kind of vibration noise that gets amplified by the (wood) shelf that the recorder is standing on. I’m trying now to put it on a silencer mat (magic fleece) I had to order in Germany. Dont know if it will work, but I’m now spending 16EUR to find out. I’d rather waste the money than live with the noise from the harddisk. Ideally, Amitech should of course use low-noise harddisks AND use a vibration damper that prevents harddisk vibration to move through the cabinet and down to the shelf. And of course some vibration-damping pads under the box.
   
• I tried to record some cartoons with the timer Sunday morning. Only Bananas in Pyjamas succeeded. (I recorded that as a non-repeating timer. The two other programs (Mickeys Clubhouse and Lazytown) dissappeared. They were set up as “weekly repeated” timed recordings. I suspect that the machine never recorded them. I can’t find them anywhere in the menu.
   
• No public forum for the product. So I can’t see, if anybody else have had the problems I’m experiencing.
   
• Not possible for me (yet) to record a DVD to the harddisk (not even when following the manual — Danish link). According to the manual I’m supposed to select the DVD at one point in the menu just next to the harddisk, but it’s not there. I have no clue if it’s me who’s looking the wrong place or something else? Could it be that the dvd’s are copyright protected? At least the system should tell me and show a disabled possibility.
   
• Different ways of naming recordings: One place, there is a keyboard for entering text, but some other places I have to use only up/down arrows for writing. (And here, the space bar is placed illogical after all lower-case letters, not before.)
   
• Channel numberings are strange: The two tuners are managed differently, so you have to set up channels for the analog tuner independently of the digital tuner and vice-versa. Each has in my case the numbers 1-4 in the setup menus. This makes it kind of a voodo-like experience using the channels outside of the setup. And result on my remote control: Channel 1 and 2 is actually the same channel (digital DR1), for some reason.
   
• Slow reactions to channel changes. We have only 5-6 channels at home. Whenever I press a number on the remote control it reacts slowly. For instance, I press “4″, and a status display appears on screen telling me which channel I a shifting away from. Approx. 1 second later it shifts to the new channel.
   
• The manual is written very feature-centric and not really user-centered. For instance, there are separate chapters on how to setup and manage channels on the digital and analog tuner. Ideally, there should only be one way to manage channels, regardless of if it’s digital or analog.
   
• After 3 days I’m able to use the following features without consulting the manual
  • play a dvd
  • watch digital channels
  • timeshift a tv-recording (I had to consult the manual to learn howto, though)

   

• I’m still not able to
  • Record a DVD to the harddisk
  • Record a TV program via the timer
  • Record a TV program directly

   

• Worst experience yet: My thumbs hurt. All the searching around in the menus. The timer programs I meticulously named but were never recorded. The searching for programs and features that I could not find.

How this could be improved

As you can understand, all of this is software-related issues. I’m very confident that the user experience can be heavily improved, and software can be updated, because actually, this is a very nice product with some good features, and it deserves to be used. Many eletronic products are simply put aside and not used. Videos with blinking 00:00 clocks that people never put the effort into update.What I really want to do here is not to criticize unconditionally, but to suggest some ways to improve the product. So with a colleague we plan to spend some evenings next months to come up with our own menu design. Furthermore, I hope that this can start a dialog with Amitech that can help them improve the product so that it works better for me in the context that I use it for.

The main areas for usability improvements:

• Menus should be reworked so that the functionality and the features are present and obvious at the right points in the the context of use.
• The content of the manual.
• Make features more self-explanatory, and make it easier to use the many features without consulting the manual.

Please use the comments here, if you have found any issues that you want to share, and also let me know which context you use it in. Also let me know if there are things here that is not important to you, and if there is other stuff that is much more important in your use of the product.

Feature list is cool, but user experience is more than feature lists. This hopefully will show, that user experience can be improved and hopefully in the future can sell products more easily.

Technorati Tags: user experience, usability, dvd, recorder, harddisk, amitech

When the software required confirmation from the user, it displayed a small window called a “dialog box”, that contained a question, and presented two buttons, for positive or negative confirmation. The buttons were labeled “Do It” and “Cancel”. The designers observed that a few users seemed to stumble at the point that the dialog was displayed, clicking “Cancel” when they should have clicked “Do It”, but it wasn’t clear what they were having trouble with.

Finally, the team noticed one user that was particularly flummoxed by the dialog box, who even seemed to be getting a bit angry. The moderator interrupted the test and asked him what the problem was. He replied, “I’m not a dolt, why is the software calling me a dolt?”

It turns out he wasn’t noticing the space between the ‘o’ and the ‘I’ in ‘Do It’; in the sans-serif system font we were using, a capital ‘I’ looked very much like a lower case ‘l’, so he was reading ‘Do It’ as ‘Dolt’ and was therefore kind of offended.

After a bit of consideration, we switched the positive confirmation button label to ‘OK’ (which was initially avoided, because we thought it was too colloquial), and from that point on people seemed to have fewer problems.

Read all of the story at: Folklore.org: Do It

Technorati Tags: apple lisa, ok, ok-button, do it, dialog, interaction design, user interface

Describing Web 2.0 as the “latest fashion”, Mr Nielsen said many sites paying attention to it were neglecting some of the principles of good design and usability established over the last decade.

Jakob Nielsen does provide us with some interesting statistics. The general Web 2.0 website can normally divide its users into three categories:

1. 1% of your users regually contributes
2. 9% of your users occasionally contributes
3. 90% of your users almost never contributes

What can we use these numbers for? Well, we can try to actually use good business practices and focus on the largest user group. As a techie I have a tendency to focus on the fun/interesting parts of a website – but these are the parts that usually only the first procentage of the users use!

To put it simple: To better serve the 1% of users who contributes, web firms tend to forget about the other 99% who just want to ‘get the informaton’.

“Most people just want to get in, get it and get out,” said Mr Nielsen. “For them the web is not a goal in itself. It is a tool.”

Web firms rushing to serve the small, committed minority might find they make a site far less useful to the vast majority who come to a site for a specific purpose.

Technorati Tags: Jakob Nielsen, usability, web 2.0, statistics, bbc, web development, user interface

AFTER the computer shuts down, so I see it when I plug it in and turn it on again?

Not only a very badly timed warning that’s completely irrelevant when I see it. But also an example of defaults that are badly configured. Completely useless, and even though it dissappears after a few moments, it still reminds me of basic usability flaws on my computer.

(Disclaimer: I have been adjusting the defaults battery and power settings, so I may have accidentally changed something without my knowing. However, I can assure you that it’s not on purpose because the message annoys me everytime I see it)

Technorati Tags: windows, battery, warning, usability, user interface, useless, humour

Google Suggest’s interface has an added line of text trying to explain and to make it easier to discover the _hidden_ functionality: “As you type, Google will offer suggestions. Use the arrow keys to navigate the results. Learn more”:

And as soon as you start typing, the results will appear as shown below:

Another example is Amazon’s “tag this product feature”. As I wrote previously, it has affordance as to which keyboard shortcut can show the dialog. But as you type in the field, there is no hints to make it obvious that this field can magically help the user by autocompleting.

(totally unrelated, i suddenly feel very curious about what products are tagged with “cannibalism”…)

Kayak.com also has autocomplete fields in case you foroget that airport code. Which is actually cool, but again not hints before you start.

Yahoo!s Design Pattern Library has one autocomplete example from the recent Yahoo! Mail beta:

The screenshot used for example has no affordance to hint the hidden functionality. There is also nothing describing the availability of automplete functionality.

Outlook and Excel have sort of autocomplete as well. But compared to the examples above (where suggestions appear if you hesitate typically a second), then the suggestions appear immediately.

Is it good enough to have no visual indication? Hardly. I would like to see a general consensus around how to visually indicate autocomplete fields in a way that makes it intuitively clear what functionality is hidden in the field.

Back in January last year, I wrote about “live search” in user interfaces, with examples from Google Suggest, GMail, Apple Spotlight, Windows Vista and more. But neither of the ones I looked at had any visual indication of the fields that could indicate that the field was different from an ordinary text field.

Problems related to unhinted functionality

The problem with this approach where the functionality is not hinted is that I believe that it will change your behaviour and usage pattern. An ordinary text field is just a field and you need to fill it in exactly as it’s needed. That usually requires that you stop and think before filling in the field.

The autocomplete field can help you — but only if you hesitate after writing something for a start. I would say that this behaviour requires less brain activity and perhaps a quicker fill in of the form fields.

But the efficiency can only be achieved after you have learned that this is an autocomplete field. In some of the above examples, users would typically discover the autocomplete functionality with some sort of surprise. Suddently the field gives you suggestions.

But surprise and confusion are closely related. So I’d guess that it might confuse less trained users. My point here, i guess, is that there is no reason to confuse people. Just make sure that the functionality is properly hinted.

So we need more than just text for the autocomplete fields to stand out.

Next step

In a couple of days, I’ll continue this post with some guidelines for autocomplete fields. (I wanted to write “tomorrow”, but I’m afraid to make a promise I cannot keep — like I did in last post).
Please post your comments about good and bad examples, as I desperately need more examples for how to make these. Any usability testing results that you heard of? Any other thoughts?

Related info:

• IxDA Discuss: Affordance on autocomplete input boxes
• Justaddwater.dk: Hidden Functionality — Hints And Affordance
• Justaddwater.dk: Live search explained
• Wikipedia: Hidden Find
• Bill Scott: Distracting or Narrowing: Looking a Little More At Live SearchD
• Yahoo! Design Pattern Library: Autocomplete pattern

Technorati Tags: usability, autocomplete, affordance, hints, hidden functionality, examples, discoverabilility, guidelines