Fog Creek Software
g
Discussion Board




web site usability

I've been working as a web developer for a small e-commerce site, and I decided I'd make the shopping cart a little "cooler" for our users, rather than the standard template that you see at places like amazon.com.  It basically invovled adding more user control on adding and deleting the products purchased and using pop-up windows tied back to a main catalog page-rather than what I felt was being forced to go through all the steps and then being redirected back to the main page (I figured it would give them more control and speed up the process).

I immediately started getting e-mails from angry irate people who couldn't use the shopping cart and told me how difficult it all was.  I started putting a succinct explaination in LARGE RED font explaining how to use the shopping cart at the beginning of the shopping process, and that didn't change a thing.  No one read it (at least the type that sent angry e-mails). 

I created a BRIGHT link to a shopping cart that was more conventional-still no abating on the angry e-mails, no one followed the link, no matter how prominently I placed it.

So I finally gave up and created a shopping system exactly like amazon.com, and the e-mails stopped at a screeching halt. 

What I learned was this:

1) Familiarity wins hands down.  People have an idea of what a 'shopping cart' is supposed to be, and any deviation from this is like throwing a monkey wrench into their buying process.  They won't read caveats or clarifications-they know what a shopping cart is and how it behaves-you have to meet their expectations or face their wrath

2) This is an unconscious assumption.  People think they can adapt to novel innovations and are quick on their feet and with their minds.  Many of the people didn't take the link for *SIMPLE SHOPPING CART* and followed the one labelled *ADVANCED SHOPPING CART* and became engraged when they couldn't figure the advanced one out.

3) Small minority appreciate innovations.  Maybe 1/5 the number of angry e-mails appreciated the system I devised and could handle two browser windows while shopping.

People always say design things for your grandmother, so when I created the link to the regular shopping cart, I thought that all the "grandmothers" would follow that link.  I didn't realize is that there are two categories, those who know they're computer novices and follow the easy path, and those who thought they were really computer literate and followed the advanced path and became angry when it confused them-and of course ascribed all the blame to the designer (which is a valid assumption quite probably :).

razib kahn
Sunday, December 16, 2001

i'd implement browser based drag on drop shopping cart.

Jawahar Mundlapati
Monday, December 17, 2001

Without having seen it its really hard to tell, but a couple of things occur to me.

1. For most browser users they expect a single window for a single task, forms that pop up windows to make things easier actually make them harder.  For one thing most casual users maximise their browser to take up the whole available space, the popup window overlays that until they click back on the main form then hey presto! the popup disappears and if they want it again they have to go find it and manipulate it themselves. 

For a user, manipulating windows 'feels' like loading heavy blocks of concrete into a wheelbarrow.

2.  Call anything advanced and unless the user is very secure about their own lack of experience they will click the advanced option.  This might be a more male oriented behaviour and female shoppers might choose the simplest, that might also be a calumny on women though.  Either way the word advanced should be excised from anyone's GUI.

My preferred alternative is to allow the user to choose the complexity of the interface as they go along, always provide the simplest and most direct method and provide navigation and drill down/through options as needed.  The words 'Details' and 'More...' spring to mind.

Where possible extend the form in situ.  So if its giving more information about a line item, expand that line to give the information don't distract the user away from their point of focus and then have them navigate your form with their eye again after they've done finding out that there's a go faster stripe on the widget.

The user must always feel in control of the form, it must feel like a walk in the countryside, not being led down a series of twisty passages all alike by something you can't see that shouts 'Plugh' when you try and deviate.

Simon Lucy
Monday, December 17, 2001

[2. Call anything advanced and unless the user is very secure about their own lack of experience they will click the advanced option.]

I think most users feel that by having two choices, for standard and advanced, you are asking them to admit their stupidity by clicking "standard".

Robert Moir
Monday, December 17, 2001

>This might be a more male oriented behaviour and female shoppers might choose the simplest, that might also be a calumny on women though.

I would rather think it is an acknowledgement of Women's ability to separate task performance from perceived self-image.  (I.e. a compliment.)

joubin
Monday, December 17, 2001

This just backs up what the good dwarfen doctor has been saying for a while... http://www.google.com/search?sourceid=navclient&q=site:useit%2Ecom+cart .

Best illustration: http://www.useit.com/alertbox/20000806.html

rOD.

rOD Begbie
Monday, December 17, 2001

"So I finally gave up and created a shopping system exactly like amazon.com, and the e-mails stopped at a screeching halt."

... with the possible exception of the nasty emails from Amazon's patent attorneys ...

Alyosha` (US Patent 5960411 -- what's that?)
Monday, December 17, 2001

>>i'd implement browser based drag on drop shopping cart.


I do seriously hope you are joking.

If you are not:
a. You haven't read a word that gets written on JoelOnSoftware

or

b. You need to put the crackpipe down...now

Me
Monday, December 17, 2001

Instead of "advanced" and "standard" shopping carts, maybe you could rename them.  For instance, "classic" and "pop-up" shopping carts.

Charles Patterson
Monday, December 17, 2001

Three problems for me:

1)  "Advanced" and "Standard" reflect a distinction that exists within your mind and not necessarily the groupings of skill level in your user population.  User populations have a continuity of experience and not discrete quanta.

2)  Avoiding the overlaying of artificial "modes" onto user experience is a classic lesson that I remember from the first edition of Apple's Human Interface Guidelines.  It's more work to integrate your ideas of an advanced interface into the existing experience than to force separate destinations.

3)  I assume from your story that you're doing usability testing by putting new stuff into the production site and waiting for complaints.  I think you'll find it cheaper to try stuff out on groups of volunteers first, and learn the Microsoft lesson by videotaping the sessions, than to have to reengineer the site once it's already out there.

GT
Monday, December 17, 2001

ok, this going to be post & dash, i'm in a hurry.

99.9% of our users are female (we have 2,000 names in our online newsletter mailing list, and only 10 or so are unambiguously male).  that's a function of our product (quilt related polymer clay collectables).

the idea of using pop-ups was an unmitigated disaster.  a lot of the complaints involved those that simply didn't have much more familiarity with javascript created windows than pop-up adds that they reflexively closed.  *never* will i use pop-ups as anything but a marginal tool-even if it means the user has to click around the site a lot more than i thought was needful.

i did do some testing-but it was at quilt shows where we solicited volunteers-and in hindsight i think somehow this must have been *very* self-selected.  many of the volunteers mentioned that they'd brought their laptops to their hotel rooms, indicating they were more computer literate than average.  they were also not as shy and averse to innovation it seemed-we had a sign up asking for volunteers-so they approached us. 

all i learned was the customer is *always* right.  no matter how stupid-they're smarter than you are.

-razib

razib kahn
Tuesday, December 18, 2001

IE provides support for drag and drop.

http://msdn.microsoft.com/downloads/samples/internet/ie50/dragndrop/default.asp?frame=true#

thanks

Jawahar Mundlapati
Tuesday, December 18, 2001

>IE provides support for drag and drop.

Drag and drop is only useful when both the source and the target can be viewed at the same time.  Apart from any security issues of allowing system objects to cross applicaiton boundaries, as the browser is going to be taking up most if not all of the desktop it makes it a pig for the user to manage the source.

Don't force users to behave like navvies, digging their way through your precious application.

Simon Lucy
Tuesday, December 18, 2001

>IE provides support for drag and drop.

My god, you were serious!

Did you not read the original post ??? The poster said that when he tried to implement a system that was "cool", he got angry emails about it. When he went back to a simple system, it went back to normal.

There are a few things you need to realise

1. MOST users would not know what to do with drag and drop. It is NOT done on Yahoo, not done on Amazon, just not done in a browser often enough for them to know how to use it.

2. It only works in IE. Sure, IE has a 80% market share, but consider this....if you owned a shop, would you stand at the door and turn away one in every five people because you didn't like their shoes ? You can NOT afford to deny 20% of users access to your shopping cart.

You have obviously never dealt with users or run a business. Get a clue.

Me
Tuesday, December 18, 2001

The thing I'm always scared of when people say stick with what users know is that innovation/improvement gets pushed aside.  But I also recognize that users need something familiar to grasp onto.  It's a fine line that can only be walked by doing usability tests.

Take this discussion group.  I would like to see one improvement.  When I click on "Reply to this topic" the whole discussion disappears.  So if I want to quote someone I have to go back, copy the material I want to quote, click again on "Reply..." or the Forward button, then paste the quote into the message box.  It gets even worse if I've already started typing then decide I want to quote someone.  The stuff I typed gets destroyed.  I know I could open two browser windows but how many people actually use multiple browser windows.

Rather than have the "Reply to this topic" link at the bottom, why not just place the entire reply form at the bottom of the discussion?  It's not that much more data to transmit.

Steven Keens
Tuesday, December 18, 2001

Re: "Reply to this topic"

I usually open a new window to reply (in fact, I open new windows half the time I browse). 

On the other hand, I hear that windows popping up is too jarring for some.  Oddly enough, those painfully annoying pop-up ads may save the day, making people more used to windows which pop up.

I think Joel considered your suggestions, but did this intentionally to discourage people from replying to things far up in the thread, avoiding off-topic posts and stagnation.

If there were 10 posts after yours, for example, I probably wouldn't bother replying unless I thought it truly important.

Art Vandelay
Tuesday, December 18, 2001

Drag and drop doesn't have to be a bad idea.  Don't make it the only way to get things done though.

One of the cardinal rules for interface design is to provide shortcuts for experienced users.  Just because there is more than one way to do things doesn't mean that the user will be confused by it.

By all means, put that functionality in - if a user tries to drag and drop and it works, MPTY.  It matches the metaphor properly after all.  Like I said though, don't make it the only way to get things done.

Greg

Greg Mitchell
Tuesday, December 18, 2001

RE: Drag and Drop...

What about the "grandma rule"?  I know my grandma had a hard enough time double-clicking icons -- forget about dragging anything!

Mark (qaz)
Tuesday, December 18, 2001

joel mentioned how he avoided quoting and threading to add some coherence. 

about "innovations."  i think if its ground-shaking it will catch on-using a mouse and click-through windows was pretty revolutionary, but it stuck because it was so intuitively easy to "get."

the story i heard was that they had some argument at xerox parc.  the windows+mouse person was getting a lock of flack from the others who thought it would confuse users and that they should stick to key-commands.  some one of the key-commands people did a test with people they got off the street-and asked which they preferred.  no one had heard of windows+mouse, so everyone said key-commands.  so he had them do some testing.  they used the key-commands and figured it out after a while.  then they did windows+mouse, and after some initial confusion, they refused to go back to key-commands!

long story short-if the innovation is real good and jumps that chasm of usability and utility, it's all good.  i think in hindsight that things like pop-up windows and frames in the early web were more there for the jee-wiz factor for the designer (i used avoid frames like the plague until about 1997 or 8 because a lot of the people using frames on their website went crazy with multiple frames nested in each other)

razib kahn
Tuesday, December 18, 2001

Reading this I can't believe that pop-up windows were even considered (especially for an application that people use once or twice).  You have to chalk this up to "newbie" UI design, no offense.

There are lots of analogous situations, but the one that comes to mind is newbie "movie creators".  Somebody buys a digital camcorder and decides to create a movie with one of the new digital movie editing packages. Invariably each shot fades into the next with a different digital fade/wipe effect and the end result is a high-tech movie that nobody can watch.  Ok, so a simple cut from one scen to the next may seem to lack imagination or technical finesse, but sometimes simple is really REALLY better.

Drag and drop is 1000% worse!

Mike
Tuesday, December 18, 2001

the previous comment was actually pretty correct.  before working on the shopping cart by myself, i hadn't done much front-end work.  all my work involved behind-the-scenes stuff that the customer didn't really manipulate much (backend databases and the like).  programming is easy insofar as you set yourself some goals and figure out he plan, after you're done you optimize it so that performance isn't bad and make sure it's modular enough while you're working on it so you can make changes later.

working a system where the users could make choices that maniuplating their environment really wasn't something i'd worked on before.  there's only a few ways to write SQL statements or the code that interacts with the db for a given task and make it efficient and succinct.  on the other hand, there seemed a whole host of ways the users were clicking through the windows.  i just took the client for granted-so i learned a lesson, *never* trust the client.

there are people out there using explorer 3.0 it seems (i think i actually an italian woman using it and e-mailing me her issues)....

btw-after the whole fiasco, i did have a bunch of my friend's test drive my "innovate version" before it went into the depths of my code library never to see the light of day.  they all liked it, but then their 20something guys who multitasking downloading MP3s via morpheus, checking out pr0n and reading slashdot when their not running their gene sequencers in the lab.

razib kahn
Tuesday, December 18, 2001

Unless you expect your typical customer to buy something new at least every week, your users will won't already know how to use your site when they visit. So, if you do anything the least bit non-standard, they'll have to *learn* it before they can use it. This extra learning will almost always offset any benefit that might be derived from a better way of doing things. (On the other hand, if most of your customers *do* buy something more than weekly, you can probably afford to train them.)

Other things to avoid, in no particular order:

Pop-up windows: Most people have learned by now that a pop-up window contains one thing: advertising. A large portion of your user base will either close them immediately, or ignore them completely.

Javascript: In an effort to avoid obnoxities like pop-up windows, many users run with Javascript disabled for all but a few trusted sites. Especially if you require JavaScript just to navigate through your catalog, these users will decide to visit your competition instead.

Java and Active/X: Ditto, but in spades.

Frames: Frames make it hard to do things like send the URL of a page of your catalog to a buddy, asking for an opinion. Avoid them.

And last but not least, post-sales spam: Just because I've bought something from you once doesn't mean that I want to receive your advertising in my inbox. Especially, don't provide a check-box about email offers and then ignore it. Don't decide a year later to silently turn on the spam flag for all customers in your database, in case someone might want something. There are plenty of us out here who won't buy a second time from someone who spammed us once.

Jim Lyon
Tuesday, December 18, 2001

Re: Grandma rule for Drag & Drop

The point I was trying to make was that you don't make is so that Grandma has to use drag and drop.  If Grandma doesn't ever drag and drop, she should be able to get her shopping (or whatever) done.

If on the other hand, Grandpa likes to drag and drop, why shouldn't he be able to?  The designer shouldn't make decisions like that for the end user in most cases.

To recap:  Don't force everyone to do things the way that /you/ think is the best, present the empirically /best/ way to do things as the default, and allow for shortcuts/alternatives for experienced users.

Greg Mitchell
Wednesday, December 19, 2001

That's bad advice. You're almost always better off developing one good way to do it for the vast majority of your users. There's usually much beter ways to spend your time than by adding redundant options fors a small minority of your users.

Patrick Breitenbach
Wednesday, December 19, 2001

I donno, Patrick, I think it's good advice.  I'm with Greg on this one.  If I'm just learning a product, I want to use wizards and pull-down menus to lead me by the hand to do what I want to do.  After I've used the product long enough, however, I want to be able to hit Ctrl-F to pop up a search dialog instead of having to take my hands off the keyboard and mouse around trying to find where the Search menu is.

The point is that this only makes sense if the first method is easier to learn and the second method is easier to use.  Having multiple equally difficult-to-use or difficult-to-learn methods of doing the same thing doesn't sense.  For example, in Microsoft Word, there are two ways to set text to bold with the mouse -- either via the toolbar, or via right-clicking and bringing up "Paragraph" (which I think is horribly misnamed if I'm only trying to make one word bold).  This is a "feature" I could take or leave, I never would have done it that way ...

Alyosha`
Wednesday, December 19, 2001

Whups.  Small little factual error there ... "bold" is actually selectable from the right-click "Font" menu, not "Paragraph".  (The "paragraph" bit is another one of my pet peeves -- I would have never put line spacing there, and I always end up clicking on "bullets and numbering" because its icon LOOKS more like what I would expect for line spacing).

And also there's a third way of selecting bold text with the mouse ... via the top menu under Format/Font.  Madness ...

Alyosha`
Wednesday, December 19, 2001

I don't use Microsoft Word that often, but I end-up cursing it every time I do.  It always guesses (wrong) about what I want.  If I type two hyphens in a row, Word changes it to a long hyphen. If I wanted a long hyphen, I would have used one, goddamit!  Word also automatically turns URLs into hyperlinks, and converts three periods in a row into some kind of special, single-character version of three periods in a row.

I hate Microsoft Word.

Don't try to read my mind
Wednesday, December 19, 2001

Obviously that Word stuff is pretty easy to turn off, but you probably have to use Word a few times to know that.

Remember when everyone used to talk about flash and DHTML, and a few people swore simplicity (except for maybe CSS or table bgcolors)... now that mindset rules the school.

So is it HTML all the way (with minor improvements) for the next decade? Or will new interfaces like SOAP change the way we get xmas gifts from Amazon?

jake
Thursday, December 20, 2001

i like html, but it's not the best for fine formatting.  i notice a lot more sites are changing over to flash, especially now that you can integrate flash with backend applications. 

and what about curl?  i don't know if you're going to get everyone to download the plugin, but HTML is getting plenty of challanges of late, i'll jus wait to see if any develop critical mass.

razib kahn
Thursday, December 20, 2001

"all i learned was the customer is *always* right. no matter how stupid-they're smarter than you are."

This explains why TV shows like Gimme a Break and Facts of Life had runs counted in years instead of minutes.  All three were terrible shows (IMO), but somehow they continued on and on.  Bottom line is, no matter how smart you think you are or how much better your idea is than what is currently out there, people somehow still cling to crummy things.  Some marketplace behaviors defy explanation and you may just have to go long with it.

Jim L.
Thursday, December 20, 2001

In this case, MS Word knows a lot more about typography than you (or a whole lot of users) know. Basic reading on typography ("The Mac Is Not a Typewriter," "The PC Is Not a Typewriter," and the MARVELOUS "The Non-Designer's Design Book") teaches you never, ever to use two hyphens in a row. It also teaches you that an ellipses has a different spacing between the dots than three periods in a row produces.

I doubt most users of MS Word even know how to produce and m-dash (the "long hyphen") or an n-dash. I only remember because the number code is the same as the designation of the cannons on the Focke-Wulf 190 of WWII fame... (oh look! a false ellipses! -- and all this just shows that I spend too much time on airplanes and not enough on computers.

All this said, MS Word IS annoying in many of its attempts to read your mind, especially when you're working with weird acronyms and oddly spelled names. All too often, it continually corrects your non-errors and there's no convenient way to teach the feature what you want! First off, the dialogs to turn off Auto-Correct are not intuitive at all. Let's see, under "Tools" is it "Customize" or "Options"? Isn't this more of a "Preferences" thing? I don't see a menu item for "Preferences" anywhere...  (I wish "Customize" told us that it really means "Customize the User Interface.") Then in the "Options" dialog, which tab do I select? There's nothing about "Auto-Correct" or "Typography." Hmm, "Edit" seems likely. Nope, nothing there. Geez, it's not under "Spelling & Grammar" either. You'd think a feature that automatically corrects spelling errors and "errors" would be under the "Spelling & Grammar" tab.

So finally, I realize that the "Tools" menu includes a separate "Autocorrect" item up by "Word Count" and "Look up reference." What the heck is it doing there? Does anyone on the planet know what "Look Up Reference" does? Does anyone use it?

Second (boy, that was a long digression), we'd be much better off if everytime MS Word made an autocorrection there was some sort of pop-up overlay that asked if you wanted to discard this Autocorrection, if you wanted to turn off this particular autocorrection for the duration of this document, and whether you want permanently turn off this autocorrection for all documents for all time. The best behavior would be to have an "always on top" bubble (not a straight dialog boxes, more like the "clippy" dialogs) that persists for 5-10 seconds and then closes by itself. It doesn't automatically get the focus, instead it gets the focus (and puts the focus on a pre-selected field) on mouse-over. Really, the best thing would be to assign hotkeys for the various choices, like Alt+F1 or something, the keyboard being quicker than the mouse for repetitive tasks.

The point is to give the user _control_ over the Autocorrect function without having to dig down through a bunch of menus to find it!

From: Don't try to read my mind!
I don't use Microsoft Word that often, but I end-up cursing it every time I do. It always guesses (wrong) about what I want. If I type two hyphens in a row, Word changes it to a long hyphen. If I wanted a long hyphen, I would have used one, goddamit! Word also automatically turns URLs into hyperlinks, and converts three periods in a row into some kind of special, single-character version of three periods in a row.

Ethan McKinney
Thursday, December 20, 2001

Ethan McKiney wrote:

"In this case, MS Word knows a lot more about typography than you (or a whole lot of users) know."

Maybe I didn't explain myself well enough.  When I was composing my document, I had a very specific reason why I needed to use two hyphens in a row, and why I needed to use three periods in a row.  Those reasons had nothing to do with typography, or em-dashes, or ellipses.  Microsoft Word made my life more difficult by attempting to "correct" my "mistakes".

Don't try to read my mind
Thursday, December 20, 2001

Strangely enough, Ethan McKinney, that is exactly what Microsoft did in Office XP, using smart tags, when it changes a word, it pops a smart tag, that ou can use to turn it off, I didn't think that this is something useful, until you came and showed me what this is all about.

You need to upgrade, of course, but it seems that MS has listened to your request, the behaviour you describe is the exact same thing that Word does.
They also put autocorrect options directly under the Tools menu.

Ayende Rahien
Thursday, December 20, 2001

Opps, I got confused between Jim L & Ethan McKinney, I always get confused where the author name is.

Ethan, about Word's options, since the most common case is not to have two dashes in a row, and no three dots in a row, that is a correct behaviour for Word

Ayende Rahien
Thursday, December 20, 2001

I suspect you'd be better off writing your C code snippets in your favorite editor and then pasting them into Word. Word doesn't seem to autocorrect when pasting. That way, you could also compile them first to check that you didn't make any mistakes. ;)

Johannes Bjerregaard
Thursday, December 20, 2001

The best behaviour for Word autocorrection would be if it DIDN'T autocorrect, but popped up a floating version of the autocorrected word above the word, and then let you hit a key to accept the autocorrection.

As a Unix user who relies of autocomplete, I'd vote the TAB key as an excellent "confirm autocorrect" key.

phil jones
Thursday, December 20, 2001

who are these people wanting "drag and drop" on their web applications? keep it simple. you programmers may love advanced ui, but simplicity rules.

i would rather have an arcane interface that works, than a javascript bug prone interface.

jean kezner
Saturday, December 22, 2001

It goes back to a saying I see quite often on Slashdot.<P>
"Programmers get caught up in what they *can* do, that they never stop to think what they *should* do."<P>... or something like that :)

packphour
Wednesday, January 2, 2002

Ahh- dammit.  No HTML?!  I thought I clicked on the "Advanced Form."  :-p

packphour
Wednesday, January 2, 2002

Re: auto em-dashes and ellipses in Word.

Dude, Word is not designed to be a source code editor and you are quite correct: it doesn't make a good source code editor.

If your screwdriver said "Microsoft" on it, would you curse it because hammers poorly?

Donavon Keithley
Tuesday, January 8, 2002

Wow... just to throw in one UI design principle that doesn't seem to have been brought up yet: it's better to be really different than a little different. 

If you look something like a standard shopping cart, the user expects you will act just like it, so you are locked into their expectations.  If you choose the innovation route, you have to make it really flaming obvious to override their knee-jerk assumption that they know how it's supposed to work and you don't.

There's a challenge to taking something that's already established and "good enough", then being both different enough and better enough that you actually get a positive reaction from the common user.  It's fun if you pull it off though!

Scott Vachalek
Friday, January 18, 2002

*  Recent Topics

*  Fog Creek Home