programming and human factors
by Jeff Atwood
I try not to talk too much about the trilogy here, because there's a whole other blog for that stuff. But some of the lessons I've learned in the last year while working on them really put into bold relief some of my earlier blog entries on usability and user behavior.
One entry in particular that I keep coming back to is Teaching Users to Read. That was specific to dialog boxes, which not only stop the proceedings with idiocy, but are their own delightful brand of user interface poison. Fortunately, you don't see dialogs in web apps much, but this sort of modal dialog lunacy is, sadly, becoming more popular in today's AJAX-y world of web 2.5. Those who can't learn from history are doomed to repeat it, I guess.
Having five more years of development experience under my belt, I no longer believe that classic Larson strip is specific to dialog boxes.
The plain fact is users will not read anything you put on the screen.
What we're doing with the trilogy is not exactly rocket surgery. At its core, we run Q&A websites. And the most basic operation of any Q&A website is – asking a question. Something any two year old child knows how to do.
When we launched superuser.com, that was our thirdfourth Q&A website. This one is for power users, and it's the broadest to date, topic-wise: most things dealing with computer software or hardware (that isn't gaming, or shopping) is allowed.
We've been at this for over a year now, doing nothing but relentlessly polishing and improving our Q&A engine based on community feedback. We're not particularly good, but we do try very, very hard not to suck. I thought surely, surely we must have something as simple as the ask question form down by now.
How foolish I was.
Let's take a look at one recent superuser question. I'm presenting it here as it would have been seen by the user who asked the question, while they were entering it on the ask question form.
Immediately, there's a problem. The question formatting is completely wrong! It's one big jumble of text.
Our formatting rules aren't complicated. You can get a lot done with a bunch of simple paragraphs. We use Markdown, which offers basic formatting conventions that ape ASCII conventions. On top of that, we offer a real-time preview of how your question will look once submitted, directly under the question entry area. But none of that seemed to work for this particular asker, who, apparently, was totally satisfied with obviously broken formatting – even though a few choice carriage returns would have worked wonders, and been immediately visible in the live preview.
Yes, yes, it inevitably gets whipped into shape through the collective efforts of our legions of community editors – but that's not the point. It's best if the original asker gets the question formatted right to start with, and it is our job as UI designers to make that outcome as statistically likely as we can.
To that end, we've put a bunch of helpful tools on the ask question page to help users get the formatting right. As UI designers, here's how we see the ask question page:
We've provided a toolbar with a neon pink help button above the question body, and to the right of the question body, we've provided a handy formatting quick reference with a link to the full formatting reference (which opens in a tab / new window by default).
But none of that matters, because here's how the user sees the ask question page:
Or rather, here's everything the user doesn't see.
When I said users don't read anything you put on the screen, I was lying. Users do read. But users will only read the absolute minimum amount of text on the screen necessary to complete their task. I can't quite explain it, but this kind of user myopia is epidemic. It's the same problem, everywhere I turn.
How do we treat user myopia? How do we reach these users? The ask question page is already dangerously close to cluttered with helpful tips, but apparently these helpful buttons, links, and text are all but invisible to a large segment of the user population. Sure, you could argue that Super User tends to attract less sophisticated users, but I see the exact same problem with programmers on Stack Overflow. As new users, a significant percentage of them can't figure out how to format code, even though there's not only a toolbar button that does it for you, but help text on the right explicitly describing how to do it manually. (Just indent 4 spaces. Spoiler alert!)
More and more, I'm thinking we need to put the formatting help – for new users only – directly in their line of sight. That is, pre-populate the question entry area with some example formatting that is typical of the average question. Nothing complicated. But at least then it'd be in the one – and apparently the only one – place myopic users are willing to look. Right in front of their freakin' faces.
The next time you're designing a UI, consider user myopia. You might be surprised just how myopic your users can be. Think long and hard about placing things directly in front of them, where they are not just visible, but unavoidable. Otherwise they might not be seen at all.
Alright, so my post above worked correctly. And if I were to create a list like the user in the example wanted to do:
1. Do my homework
2. Take out the garbage
3. Write this comment
If the input box on SuperUser or StackOverflow doesn't work like this then this is 100% a developer problem. nl2br() please.
Tester on October 23, 2009 6:21 AMYou *could* just replace single newlines with doubles when not followed by another markdown token. If that is the most common user error, there is no shame in hard-coding some logic to handle it into your form processing. So long as it shows up in the live preview, so those users who *do* pay attention can see what it is doing, it could save your legion of editors some time :)
Jeff on October 23, 2009 6:23 AMA few thoughts:
1. The "Formatting Reference" is below the area where the user will actually type their question. It might be better to have the reference directly next to the question area. The "How To Ask" area has to go *somewhere*, but there might be a better place.
2. Black text with white background in the same font as everything else is easy to ignore. Just like the "How To Ask" area is highlighted with a bold color to catch the eye, perhaps that technique could be applied here as well? Of course not everything can be colored boldly, or the saturation would make a net negative effect. Different typeface or font size maybe?
3. Now that you have a good sample of original questions and changes to the questions, perhaps you could identify certain patterns and attempt to inform the user (or perhaps modify them automatically) to correct formatting. In the example above, the user had incrementing numbers. This could be detected (space followed by number followed by "." or ")" or whatever) and potentially auto-corrected.
4. Perhaps simpler, most questions probably aren't paragraphs long. They're a sentence or two, then some formatted text, then another sentence or two. Perhaps you could look at large chunks of unbroken text and figure out that single carriage returns should result in line breaks?
Adam on October 23, 2009 6:28 AMIt dawned on me that the genius of Apple is that they provide simple interfaces, and also make the user feel smart for figuring them out.
JohnMcG on October 23, 2009 6:28 AMHitting the carriage return key on a keyboard should give the user a new line in the output. This is simply typographical common sense. What probably confused this user (or he chose to ignore) was the fact that doesn't happen with this markup.
A markup should not break elementary common sense rules in order to provide other elevated functionality.
The fact users use two carriage returns to create paragraphs in other places (like in this box) is irrelevant. The markup internal rules have stipulated that his text formatting broke because the lack of two carriage returns. That's fair enough. But his text would also have become easier to read if instead of a new paragraph, every carriage return introduced a line break on the resulting text. And that you cannot deny either, Jeff.
Take a look at the user edit box. Is there anything in there that is not clear in terms of formatting? He doesn't use carriage returns and yet his line-break formatting style makes that particular text easy to read and appealing to the eye. The markup however made a mess of it. So, the markup actively ruined the user text. This cannot be.
For the sake of some special formatting elements, like list detection the markup aggressively demands two carriage returns to break a line. Meanwhile it doesn't accept the idea of a new-line break, unless the user explicitly forces it with the tag.
The line that divides easy-of-use and formatting tyranny can be very thin.
Mario on October 23, 2009 6:31 AMThere's also a loss of information in the example. The user typed "\\\c". But Markdown converted this into "\\c"... I do understand it was interpreted as html tag. But I feel it had to be ignored - there's no "path" tag in html...
Alexey on October 23, 2009 6:38 AMI really love the markdown mark-up and how the editor on SO works for it.
In fact I was jus commenting today that I would love to write a clean-room equivalent of showdown.js, to include things like easy extensibility, filtering of HTML elements and attributes, the extended markdown syntax and such. Would also like to make the WMD code a bit easier to plug into other software (e.g., Drupal).
If only we had all the time or funding we needed to do the fun stuff...
Evan on October 23, 2009 6:38 AMAnother try: actually the user typed \\path to shared folder\c
Alexey on October 23, 2009 6:40 AMBeing a developer I must be a god of users but even I did not see that freakin reference box! Thanks!
zvolkov on October 23, 2009 6:43 AM1. Use a rich-text editor by default for users
2. Provide a button to switch to regular markdown formatting
3. Provide an option in the user settings page to allow users to set their preferred editing style
I must say, I don't think I ever saw the formatting reference. The sites lack contrast that would allow you to put things in evidence, everything is white and blended together, it's hard to differentiate what's important, what's an ad, what are instructions. Even the formatting toolbar is blended with the background. Respect the conventions and add some depth to that toolbar.
Mike on October 23, 2009 6:43 AMAll you need to do is pop-up a modal dialog whenever a user presses 'Enter':
Do you wish to insert a carriage return or a carriage return and a line break?
Yes No
Then add the ajaxy-goodness of a typewriter animation. Win!
Scott Kowalczyk on October 23, 2009 6:43 AMJeff, this is probably too far buried for me to hope you'll read it, but...
Rather than commenting on the line break/WYSIWYG/editor stuff (a.k.a. beating the dead horse) I would like to comment on the implication near the end of your blog post: that you would pre-populate the box with some sort of template.
One word: don't.
It has been my experience with an internal app at a county hospital that the ~80% of people who haven't had problems before (the ones that *aren't* the subject of this post) won't have problems with this or at the very least will be mildly irritated by this existing text.
The other ~20% (the ones that *are* the subject of this post) still won't get it, and you'll end up with template text in the posts; or fragments of it; or all sorts of other craziness you never expected.
They are a lost cause. Short of a little pop-up that says "Click here to start" you will never capture 99.9% usability.
Please don't hear what I'm not saying: I'm not saying that you shouldn't try to improve the user experience. It just seems that there are other more fruitful endeavors you could spend your time on.
AnonJr on October 23, 2009 6:47 AM> Who puts two spaces after a line-break?
> It is unnatural. Not even this comments page does it.
NOBODY wants you to put "two spaces _after_ a line-break". Where ever did you get that idea?
hop on October 23, 2009 6:47 AMThose of you who are arguing about line breaks, please also see the discussion on meta.
Patrick McElhaney on October 23, 2009 6:48 AMWYSIWYG
I want to hit return and have a return be in the output. I don't want to have to think how to create a new line.
All the books on UI design you put on your blog I think you would realize this more than anyone.
You shouldn't need a preview pane, because what the user types is what they should get.
Billkamm on October 23, 2009 6:50 AMIt's not about the line breaks. It's not about positioning of instructions. The school of thought that says everything should be immediately usable without having to learn anything is now the majority. Continuing to fight it is like continuing to fight WWII.
Larry Coleman on October 23, 2009 6:52 AMYou know, you see the same sort of problem with users of all sorts of devices -- not just computers. There's the infamous "blinking 12:00" VCR display, which -- let's face it -- usually wasn't really that hard to figure out. Or how about something really ubiquitous: the automobile.
I'don't know of another device in the history of usability studies that's had more time invested in its usability. Cars today are supremely usable, and yet, people continue to wrap them around trees, lamp posts, semis, and other cars.
Why? It has very little to do with the usability of the car. It has tons to do with the attention and ability of the drivers. Some drivers just don't care enough to pay attention to what they're doing, no matter the consequences. If someone doesn't really feel the need to be bothered to pay attention to the road (at the risk of winding up wearing the bumper of a semi trailer like a set of braces), I'm not sure they're going to invest a lot of time formatting text properly.
What's next? Do you blame the usability of the site for misspellings? Improper grammar? Punctuation? How about plain-old lousy questions? The problem you're seeing isn't necessarily an indictment of the web site. The users have to meet you half-way in order for them to generate content of any decent quality. Period.
D. Lambert on October 23, 2009 6:52 AMI would suggest you put the preview above the editor, sometimes it is not clear there is a preview (when you are a new user)
Anders on October 23, 2009 6:53 AMJeff, in your post "Is HTML a Humane Markup Language?", you write:
"I have one iron-clad design guide: this is a site for programmers, so they should be comfortable with basic markup."
I think this was a very useful design guide for stackoverflow.com, but not for superuser.com or a lot of the non-technical stackexchange websites. Those users are simply not used to anything other then WYSIWYG. As clean and simple and (dare I say) intuitive as markdown is, it's still markup code and as such, it is not immediately understood by non-technical users.
Their mental model for 'entering text into a computer' is based on e-mail applications and (MS) office applications. So if your goal is to make it as easy as possible for the users to format their questions and ansers the way they want, its best to create a UI of which the mode of operation matches the mental model of your users as closely as possible.
Daan on October 23, 2009 6:58 AMJeff, I think you severely understating your failure on the UI design part, which stems from your basic underestimation of how good people have adapted to the web.
I can tell you exactly why I never read (or even noticed before today) those "useful" things on the side. (seriously this post of yours came as a complete surprise!) They look like Google text ads.
I have long since learned to ignore ads on the web, so even without an ad blocker I almost never see them. The downside of this is that I also don't see anything that resembles ads. This is where your hint blocks come in (or rather don't).
While we are on the usability design, I don't think I've ever had as much trouble to use a site I frequently visit, as I have with SO&Co. Even if the interface is bad, usually once you figure it out, it sticks. With SO, I constantly forget how to make something a favorite (even though the star is right there, and is sooooo obvious once you realize it). And I can never find a way to post a reply to my own question (why is the behavior different from usual reply? not like I can grant myself rep)
Alexei on October 23, 2009 7:01 AMI don't really understand why most of people are talking here about NewLines.
It is totally different problem and it exists since first Content Management System.
1. Give user simple interface to edit content that will become HTML: Mark-up/Down etc. Later on...
2. What You See Is What You Get. In real world does not work properly. It gets overused and becomes uncontrollable (using fonts/color embedding links). Back to option 1...
this becomes a loop "unitl(solutionFound){ trySolution(X) or fallbackToSolution(X0);}"
So far there is no well balanced solution to render good (in terms of standards/visual representation and maintainability) HTML and allow users to easily edit content.
Even worse things start when they want to use existing content to be published (think Word). No way any system can read the mind of user and Words processors.
This is first of all technical problem that has no backing scientific approach.
And I would say it IS a scientific problem as a result.
So we first of all we need to find alternatives to content presentation/editing instead of tweaking Markup to the left or Markdown to the right. No matter how much you tweak there will always be users who cannot use it. And a lot of them.
So again, we need a NEW approach to content publishing.
Cheers.
Dmitriy Nagirnyak on October 23, 2009 7:03 AMAnd sometimes users do read, but do not process a computer’s instructions like they would a human. No matter how clear the text, they will fear following it, in case they do something wrong. I’ve been told numerous times, when trying to help someone with a computer issue, ‘it says “do bla bla if you want bla”; I want bla, so should I do bla bla?’ Apparently, English is Greek when a computer speaks it. Such is the level of fear of computers that decades of inhumane interfaces have instilled in people.
David on October 23, 2009 7:15 AMAnother problem I always/often encounter with the Markdown editor is, if you try to write a list like this:
1) Item 1
2) Item 2
3) Item 3
You end up with:
1) Item 1 2) Item 2 3) Item 3
Highly unintuitive.
Terminator on October 23, 2009 7:16 AMDude take a chill pill. All this 'the users are wrong the users are wrong' ranting is pretty crazy. Very reminiscent of your behaviour on uservoice.
Why should people have to press Enter twice every time instead of once? Just because people do on blog commenting forms & in e-mails? Seems like something that is perfect for a computer - automating common functions.
dan on October 23, 2009 7:17 AMNice post, but I disagree with your screenshot of "what the user sees". You've included the real-time preview in the user's awareness. In my experience they don't see that. In fact, I've even missed it on several sites including Stack Overflow and MetaFilter, from time to time. I don't think the user looking to ask a question necessarily "sees" anything but the textarea itself.
Joshua Carmody on October 23, 2009 7:26 AMI don't know how you put up with the repetitive complaints posted to your comments. Your audience is a bunch of whiny babies.
Anyway, how about a thumbnail preview to the right of the title box that updates in real time? I'm no javascript expert, but that seems doable. Looking at a tiny version of the post would alert the user that the "shape" of the post wasn't right.
Chris McCall on October 23, 2009 7:35 AMSo, I guess the point of my post was don't teach the user to read anything, show them a little picture.
Chris McCall on October 23, 2009 7:36 AMI think you got your blackout version of what the user sees completely wrong. You think the user sees even more than they do. I think he only really sees the text box where he's entering the text, and that he's not even seeing the preview. That's why you need a rich text editor in this case. And putting suggestions on the right side is no good... the suggestions need to go inline with the text... like red and green squigglys underneath (ala Word) or perhaps drawing a box around bad text elements that when the user hovers over tells them what is wrong.
Nick on October 23, 2009 7:38 AMTotally agree that users don't read...
But, the true WTF is that your editor's formatting rules are plain stupid and unnatural. Period.
Oh and the "Formatting Reference" sucks very much too - and it looks like some Google ads.
Philipp on October 23, 2009 7:40 AMThe user might have typed those text in a simple notepad and copy-pasted it to the text field and submitted. Some users would not notice your cute pink button and handy formatting quick reference maybe fearing it for another roll over ad.
Notice that if the user doesn't see something important in a web page as in this case.
It'sallthedeveloper'sfault
A.A Philip on October 23, 2009 7:41 AMYou don't need to put the help in their line of sight. As you said, users don't read it, no matter how obvious the text may sound to us.
Instead you just have to make an intuitive interface for the goal, and then on the back-end compensate for user-error. Otherwise, its *your* error.
Sean McArthur on October 23, 2009 7:42 AMI think you're missing the point. The problem is not with your UI (although I am sure there are improvements to be made), or the fact that the users didn't bother to read your formatting guidelines (which they certainly didn't). The problem is that many users simply don't care about formatting or style, and no matter how easy you make it you'll still have questions coming out looking like diarrhea.
It fits into your "do my homework for me" line of thinking. Many people are unwilling (or perhaps unable?) to invest the time into making their writing visually appealing. The question you illustrate could have been made to look nice with linebreaks without and markdown at all, but the user chose not to.
This is not to say you shouldn't strive to improve your UI, but if you think that an auto-updating JavaScript widget or moving the guidelines somewhere else or highlighting it with color is going to make this problem magically go away, you're dreaming.
Joe Shaw on October 23, 2009 7:44 AMBack in the 80's when I was working as a graphic designer in a small shop most of the 286's in the shop were used by sales people, often working in DOS. Being a bit more computer literate than most of them, I was constantly hearing 'Hey! It didn't work! Can you come look at this?'
I'd get up from my desk, walk to their machine, read what was on the (monochrome) screen, then read it out loud to them, and walk back to my desk as they said 'Oh. Thanks.'
After a while I'd stay at my desk and just call out 'What does it say?' then wait a few seconds for their 'Oh. Thanks.' reply.
Greg Davis on October 23, 2009 7:48 AMThe fun thing is, you all think it is myopia.. But what if.. the user just doesn't care if his numbering is screwed up. What if he considers it to much work to re-format what he just typed. I can get to that, we aren't all perfectionists.
A good think might be to apply a 'readability'-algorithm (yes, they exist!). This might allow you to inform your users that the text they just typed is not very readable which will result in less answers.
If that doesn't help, you could even give a suggestion on how to mark-up the text by formatting it yourself and show that to the user (again, with the algorithm).
Granted, this will make people even more lazy, but if they don't have to do it, they can't screw it up..
Mr. Orange on October 23, 2009 7:49 AMThis (http://en.wikipedia.org/wiki/Cognitive_load#Extraneous_cognitive_load) is one reason why users don't see what you want them to see. As you pointed out, they are focused on their task. Any extraneous information is deliberately ignored in order to allow them to perform that task. To you, it's obvious, to them, it's information that does not pertain to their immediate goal.
Also, formatting is important to you, as the reader of the message. Users don't particularly care about how their message is formatted, as long as they get an answer to their question. Sensitive users will try to make it easy to read. Most users couldn't care less.
Anonymous on October 23, 2009 7:49 AMI'm surprised I didn't see anyone mention the book "Don't Make Me Think" by Steve Krug -- it's something you may want to read, Jeff. (You can also check it out at http://www.sensible.com/)
I'm no professional, I just keep putting tools together to 'solve problems' at work, but I every time I put one of these tools together, I'm forced to revisit this book. I don't literally pick it up, but every time a user comes to me to tell me the tool doesn't work, it's always "user error" because they missed the link, but when I think about it, I could have made the tool easier to use.
Moral of the story: Don't blame the user. If users have difficulty with your tool, simplify it.
Don't make them think.
Eliot on October 23, 2009 7:51 AMPersonally, I've found on Stack Overflow that formatting reference rather confusing, not to mention, it just refused to format my code properly. The whole 2 spaces for a line break and 4 spaces for indentation together just did not work for me. It was a rather unpleasant experience, pretty flawed.
Still love the site, highly useful, I just wish that could be better.
Daniel Carvalho on October 23, 2009 7:51 AMNewline, shmewline.
I think the user did a great job. Just look at the upper box in the screenshot, with the monospace font, nicely formatted, lines ending where the user meant them to. Great job, perfectly done to convey the user's meaning.
Then the mean old website took that masterpiece of clarity, applied a different, proportionally spaced font and ran it through a renderer that uses completely different formatting rules than the input box which the user was given to express their ideas.
You might as well have translated it to Russian and back. For a site whose express purpose is to gather sometimes complex and technical information from questioners it should be a design goal to preserve the fidelity of their expression.
A problem is that there is no simple way to tell the browsers "render this content read only but exactly like the input box that it came from" without Olympian CSS calisthenics.
I personally think WYSIWYG is overrated - you hardly ever really S what you will eventually G. I'd be happy with monospaced text for most communication.
Brent Ashley on October 23, 2009 7:52 AM"Users do read. But users will only read the absolute minimum amount of text on the screen necessary to complete their task. I can't quite explain it, but this kind of user myopia is epidemic. It's the same problem, everywhere I turn."
Of course, what would you expect?
Only the members who are genuinely interested in forming part of your community would care about your rules. Casual users couldn't care less, they don't want to waste their time reading the rules of a website to which they will never return after their question is answered.
Use the wikipedia approach, let the users make all the mistakes they want and get a good staff of editors to correct them when they screw up.
Cristian on October 23, 2009 7:59 AMBack in the day, I worked at a big computer company with a Human Factors lab down the hall from my office. We'd regularly sign-up for HF product testing. It was fun.
One of these tests was configuring the cabling for a small server. We had to match cable to socket. Not too hard in a pre-USB world.
However, the power socket was covered with a bright red label that said to be sure to put the switch on the power supply to the right voltage setting (110/220) before plugging in the computer. Every engineer I knew who took the test peeled off the red label and threw it away, then plugged in the power cord, without ever reading the bright red label.
The engineers were doing what we always did - get rid of stuff that blocked the ports so we could connect the cables. And we've all learned that red labels near power cords always have some sort of bullshit warning and danger info. You know, the kind of crap that everyone ignores because we're all smart enough to not put our computers in the bathtub, to not bite through the cable, to not let 2 year-olds play with the power, or other stuff.
After enough systems were blown-apart because of the wrong voltage settings, power supply designers learned how to auto-sense the voltage.
The moral of the story is that users are not stupid. They do the most natural thing that the rest of the universe has taught them to do. Bad design, on the other hand, prevents using any previously-acquired knowledge from being useful. It makes users frustrated. It impedes getting work done. And designers who make badly designed systems must learn to be a lot less smug and condescending.
Tom Hood on October 23, 2009 8:04 AMI think your main problem was where you put the formatting reference, people tune out to this part of the screen because it is usually where advertising is.
Also I can use it but I don't like the markdown thing a wysiwyg one would be easier in my opinion. Maybe a choice between the two.
pete on October 23, 2009 8:05 AMFixing user myopia isn't the problem. The user has formated their text perfectly. It's Markdown that took that text and garbled the formatting
David Hayes on October 23, 2009 8:05 AMI noticed that you got defensive when people answered the question you asked. Don't.
Drop the second view. At first glance, it looks like a web mail interface, so it should behave that way. GMail doesn't show me my formatted text half a screen away.
The help in the right panel looks like ads, and is too cluttered. Poor formatting, maybe?
Besides, I'm here to ask a question, not learn your mark-up language. My guess is that the user noticed the poor formatting, but didn't care to spend the extra time fixing it. I wouldn't either.
steve on October 23, 2009 8:06 AMI completely agree that users will not read the help text. I also completely agree with the other commentors that from the user's perspective he has typed a perfectly well formatted question, and it's really a failure in the system to display it as such. Requiring that the user use a carriage return between paragraphs when the text as they entered otherwise looks perfectly fine is really just imposing the system's constraints on the user, and violates the principle of least surprise.
Kevin Dente on October 23, 2009 8:08 AMI think that the whole thing can be reduced to 2 problems:
1 - In your image, the user press once, and it doesn't get any line break. But if he presses twice, he gets two line breaks: one at the end of the paragraph, other to just add a "blank line" between the paragraphs.
2 - Some people like to separate paragraphs with one blank line, others don't. But you're trying to obligate them to always use a blank line...
If using markdown is giving wrong use in your application, simple stop using it.
Woliveirajr on October 23, 2009 8:08 AMI think almost everyone has missed the point of the piece. It isn't about the choice of user text input interface, that is just the example being used here, but rather user myopia. You know. Like the title says.
Markus on October 23, 2009 8:09 AMOh, now I notice: there are 3 mistakes !
The third one is that the blog entry made me think we would discuss "users don't read important messages", but what it's really about is "it makes me sad when users don't use the formating codes I want".
Sorry, Jeff, this blog discussion was about a wrong concept you have.
Woliveirajr on October 23, 2009 8:11 AMI'm on the trilogy, with lots of experience. I've asked a few questions, and answered a lot more. I've used that form perhaps hundreds of times. I'm intelligent, and read very well. I pay attention to error messages in dialog boxes, even.
I never noticed those instructions until the second screenshot in your blog entry, the one with the bright red arrows pointing to it. I've been doing formatting with my standard habits plus the toolbar, and with the exception of lists it's been working.
If you want the formatting to work, you should either modify it (at least to preserve single line breaks) or figure out exactly which species you want to target, because it sure doesn't work for Homo Sapiens.
David on October 23, 2009 8:11 AMWhat about the Help? Are you saying users don't read the Help?
Or the manual?
(yes, I'm making a joke)
Breck
Breck Carter on October 23, 2009 8:15 AMYou idiots. One of the few times Jeff writes something completely sane and correct and you go blabbing about how line breaks should somehow automatically turn into paragraphs?
Do you people think that cars should somehow top up their own oil?
Do you think that all doors should have little screens with animations showing how to open and close them?
Please, sometimes you have to think for yourself -- perhaps even _pay attention_.
Get your heads out of your asses.
dude on October 23, 2009 8:16 AMI can't believe you just wrote this post. I called up a few friends and said the same thing. I was just talking about dialog boxes earlier in the week about how no one reads them and they're useless in their current state. I don't wanna give away any ideas, but it's nice to know someone else feels the same way.
Saturn2888 on October 23, 2009 8:19 AMYour error lies elsewhere. You give rules (of formatting) and expect people to seek them, learn them and obey them. That's a lot to do if they just want to ask question.
Is it really that hard to extract the intention of having numbered list from the text entered by user?
Put the pavement where the people walk instead of putting the "don't walk on the grass, sidewalk is to your right, go around" sign.
scotty on October 23, 2009 8:19 AMWe live in a WYSIWYG world
It would be much easier if the editor, witch seems to be WYSIWYG actually was!
It makes no sense to force the user to learn yet another formating "language"
The user is expecting what he types to be correctly formated on the web site specially for paragraphs
Actually I think the blame is on the UI designer for designing a poor and user unfriendly interface rather than on the myopic user
nuno costa on October 23, 2009 8:20 AMI think Jeff is having a case of cognitive dissonance -- he's committed to Mardown being the bestest thing ever, so when the results are less than satisfactory, it must be the user's fault! Can't they read???? Don't they know they should leave a blank line between paragraphs?
BTW, the only think unconventional about that post was the missing newline before the list. It is perfectly conventional not to put blank lines between list items.
* This
* looks
* like
* crap.
People are busy, and come to the site to get their job done.
If you really are committed to Markdown, and really can't tolerate poorly formatted messages, then it seems the solution lies in the reputation system. Build a culture where well-formatted questions get upvotes and quick answers, and poorly formatted questions don't.
John McG on October 23, 2009 8:21 AMAlthough I agree with the "User Myopia" phenomenon, I argue that the current editor fails the Principle of Least Surprise (http://en.wikipedia.org/wiki/Principle_of_least_astonishment). If I am otherwise NOT using ANY markdown, the system STILL mangles my post because it applies markdown 100% of the time, even if I have no clue what markdown is or, alternately, even if I know what it is but I don't want to apply any markdown transformation. By forcing people to enter extra newlines you're going against their entire history of authoring text where WYSIWYG.
This exists with the formatter in Basecamp, too. So much so that all my users have gotten in the habit of pre text /pre in order to stop it from blowing up their text. To me, that's not a user problem. That's a programming/UI problem.
For the stackoverflow sites, my vote would be to fix the bizarre markdown newline semantics.
If you can't, my failback vote would be: if you don't detect any markdown in there, then the user probably doesn't want it, so don't apply the wacky newline rules. Make it look like the user intended.
Matt R on October 23, 2009 8:24 AMOr you could make the code do what the user expects it to do, that's always an option
Andrew on October 23, 2009 8:24 AMOr you could make the code do what the user expects it to do, that's always an option
Andrew on October 23, 2009 8:26 AM@nuno costa, if perfect WYSIWYG designer would exist there would be not issues in this world :)
Generally I think the problem is much bigger the the UI and line-breaks.
THE PROBLEM IS THAT CONTENT PUBLISHING IS IMMATURE AND TOOLS USED ARE WRONG:
http://dnagir.blogspot.com/2009/10/content-managementpublishing-system.html
@nuno costa, if perfect WYSIWYG designer would exist there would be not issues in this world :)
Generally I think the problem is much bigger the the UI and line-breaks.
THE PROBLEM IS THAT CONTENT PUBLISHING IS IMMATURE AND TOOLS USED ARE WRONG:
http://dnagir.blogspot.com/2009/10/content-managementpublishing-system.html
What's a "carriage return"? What carriage is returning?
And even if you think ASCII, who the hell uses *carriage returns* to separate lines? Only Mac OS 9 and before.
Nicolas on October 23, 2009 8:36 AMI
like
it
as
it
is.
Doesn't
everyone
use
the
enter
key
as
a
space
bar?
I put empty lines between paragraphs, but I don't see lists (numbered or not numbered) as a separate paragraph:
First paragraph...
Second paragraph... Some text that explains the list....
1. list item
2. list item
I tried number 2, but it didn't work (or something like that).
Third paragraph...
Awww, damn, your screwy comment text editor foolishly interpreted my use of the enter key as wanting line breaks. Where the hell did you get the absurd idea that the enter key means a line break?
Anonymous on October 23, 2009 8:37 AMWow. There's an over reaching trend here of "we did it right, shut up and learn the right way".
Carriage returns are called carriage returns for a reason. It's like you built a site where backspace is now the enter key, and you complain that users are not reading all the labels that clearly say backspace is the enter key. You completely ignored keyboard functionality that 99% of users are used to in all of their common development programs.
The double space part is crap. It doesn't make sense, and even after months of being on SO, I still have to go back and revise to add your special "line breaks". I type 90+ words per minute. Why should I (or any user) relearn my keyboard usage for your one site? Yes, K put a carriage return between all his paragraphs... Amazingly he did it using the key designated for CARRIAGE RETURN on his keyboard. Why didn't I think of that? Two spaces makes so much more sense though...
Also your "Just click the numbered list" part is also pretty meh. In every other editor I use, numbered lists continue with the carriage return (again, SO stubbornly refuses to acknowledge sixty years of definition for what the carriage return is). Instead on stack overflow I have to type my entire list, then highlight, then go up an click the numbered list to transform everything.
Markup = Cool feather-in-cap for developers, suck for users. We get it, you're not going to back down until the world acknowledges that you have the one right way for html comment editors.
Artemis on October 23, 2009 8:41 AMTyping in plain text is always easy: because what you see *is* what you get.
When you've got to interpret that and parse it out into your pretty little html/css/bullshit -- you're asking the user to put more 'work' into not breaking your interpreter.
The guy hates dialog boxes because they're interruptive, yet apparently it's not interruptive to have to 'learn how to type text' on his website.
Interesting.
Mal on October 23, 2009 8:41 AMalwin,
Agreed.
Paragraphs, under normal English convention, have whitespace between them.
It feels completely natural to NOT have whitespace between lists. Perhaps Microsoft Word is to blame? You start a list and hit enter ONCE and you get a new bullet. But, everyone smashes enter twice to create a new paragraph.
I don't think that's the user's fault.
Matt R on October 23, 2009 8:42 AMThis is definitely a poor posting. It could have been summarised as 'I've created this thing that catches lots of people out when I could have quite easily fixed it by applying some thought, but what I'll do is blog about the fact that they didn't read some hints that I put in a location that most users ignore.'
Why do they ignore it? Because the side-bar of a page is normally stuffed full of adverts on most websites.
So let's get this straight: you purposefully made it a requirement that the user learn a new language in order to successfully leave a comment (you do realize that markdown is but one of several formats that users are exposed to, and that even power users get annoyed when they see this crap), you hid the language instructions in a spot that users have been taught to ignore, and you refuse to admit that other people commenting here might have some points. Your stubborn, defensive need to be right is overpowering your ability to analyze the situation and come up with a good solution that benefits the users.
Jacob on October 23, 2009 8:49 AMIf the problem is that the help your attempting to deliver to the user (in the form of the style guide) is simply being ignored, your one an only challenge is to make people aware of it without FORCING them to deal with it (at which point it becomes 'annoying' rather than 'helpful')
Simple solution, that maintains the look and feel of the site... make the style guide 'blink in' for new users (as you do with the new user alerts at the top of the landing page).
Simple and elegant movement catches the eye, and if the movement instantly clicks in the user's brain as something 'useful' rather than a 'shitty ad', your golden. Given that every new user has already experienced the 'New to the site, check out our FAQ' header bar, and seen that it is a useful piece of site chrome, doing the same thing with the formatting guide makes sense.
Once you have solved the core problem of getting a user to rub their eyeballs over your formatting guide, you can then move on to tweaking the actual contents to serve your intended purpose.
PunchAndPie on October 23, 2009 8:49 AMOf course the user doesn't care about formatting their question "properly". That's not their problem. They just want to ask a question. They are focused (maybe) on wording the question right. Formatting is not on their radar even as a remote consideration.
Imagine if you went to the doctor and wanted to get some help with the thumb that got hit with a hammer, and all the secretary in the front office said was, "No, you have to write your address in Old English Script with a quill pen held in your left hand while standing on one foot. Only then will the doctor see you."
GeekTieGuy on October 23, 2009 8:51 AMI'm going to pile on to the chorus of users criticizing the default behavior. The way the user entered their question looks perfectly fine, and then your formatting system fscks it up.
This has frustrated me as an occasional Stack Overflow user. I can see the formatting tools and tips, and I know how to use them, but the bottom line is they cause writing a question to require MORE WORK than is necessary in cases when I don't need fancy formatting.
If you have such a serious problem with users not seeing the formatting tools, and entering their questions by using only the ever-so-rudimentary formatting available in an html text box, that should tell you that the default behavior should be to... format the output exactly as it looks in an html text box.
Noah Yetter on October 23, 2009 8:53 AMJeff,
I have a couple of points:
1. 98% of Internet users simply "don't care". They don't care about grammar, spelling, complete sentences, or punctuation let alone formatting. This is proven by lots of "business" emails written by educated adults that look like 4th grade IM conversations.
2. Your website's primary goal is getting a user's question answered. That's it. Everything else you do on your site should be relevant to that goal. That means lowering the barrier to ask and answer questions as low as possible such that more questions get asked and even more eyes see and hopefully answer those questions.
3. You have an image/brand that you want to protect. Namely, you don't want SO&Co. to look like the wild-west of experts-exchange.
All the fancy eye-ball tracking data in the world can't help you if you don't execute your primary goal well. As some of the other readers pointed out, they disagree with your implementation of formatting/previewing/positioning a question as it's being asked. On the one hand, you are protecting your site's image by attempting to nicely format the data being inserted. On the other hand, the deviations from common conventions really slows down and deters the question asker.
It doesn't matter what you do to improve this process as long as it means the questions are easier to ask and the answers are easier to get.
I do agree with:
- moving formatting reference and help tips out of common ad space
- either making the editor WYSIWYG or moving the preview pane to the side of the input to avoid scrolling
- supporting standard carriage return practices (one is newline, two is paragraph)
- instead of removing html tags you don't want, encode them for display. Your example screenshot shows the windows share path missing because it contained some text inside angle brackets, which is *crucial* to that post's message. You just got in the way of that person getting an answer to their question.
- using automated tools to identify posts that don't seem to fit convention and "helpfully" adjusting them for better readability.
reCAPTCHA: mitch irving
BG on October 23, 2009 8:53 AMThe more crap you put in front of the user, the less likely it is that they will read it.
Steve on October 23, 2009 8:55 AMYou point this out as a problem "users will only read the absolute minimum amount of text on the screen necessary to complete their task."
How much unnecessary info are they supposed to read? The first couple of posts on your site, you are still an untrusted entity. They may be completely wasting their time. They will make as little commitment as possible until they see an ROI (which your site does a great job of, but it still comes later).
When it comes to Stackoverflow (which am almost a fanboy of) I think it is you who in fact may be suffering from myopia and not seeing that your UI design needs work being that a user who obviously spent a lot of effort into entering their question did not correctly format the text.
May I be so presumptuous as to make a couple of comments on the posting UI.
1. "Helpful Icons" - Not so helpful. The "Globe with an arrow", the block of 1's and 0's and the, well whatever that blue square is there, all non-standard and difficult to discover through trial and error.
2. The idea that a little bullet item telling you a completely new way to create a paragraph should be all that "good" users need is not founded on good science at all. Argue the merits of Markdown all you want, but if you want to introduce a new way to do something so common, the impetus is on you to make that transparent if not at least easier.
3. By in large, studies show that people read sites in an "F" pattern. Guess where your "helpful" text is?
4. Your view of what the user sees assumes full-screen and relatively large monitor. Many users may not see the "preview".
Not that I don't see your issue, but the "stupid, stupid, user" attitude is a bad habit and you probably sense it already.
Nothing can screen for negligance but if you see "4. xxxxx" and no line break before it would that not be something you could catch? You don't want to get all "clippy" about it ("I see that you are trying to make a numbered list") but catching some of these things seems relatively trivial.
I know this is your blog and you gotta blow off steam. But you never win an argument with a customer. That's right, we are "customers" who are funding your seaside mansion by sharing a small part of our mindspace for your ads (hopefully).
Brent Hoover on October 23, 2009 8:59 AMI think people are kinda missing the point here. It is still valid to point out that users do not read the screen, regardless of the validity of the help text or the editor.
Dustin on October 23, 2009 9:01 AMI've referred to this phenomenon over the years as the "paper towel/toilet tissue tube" view of the screen.
Users seem to have a very narrow circle of focus as the read a screen, whereas I tend to take the whole screen in (looking for ways I, as a developer, know the developer tried to communicate function).
Frank Ramage on October 23, 2009 9:01 AM+1 for "Don't Make Me Think"
Kramii on October 23, 2009 9:02 AMIf people read less give them less stuff to read.
Maybe if you use some sort of states to keep the user focused in a limited number of available tools and information to do the job?
You deleted my reply with a genuine points on how your design doesn't meet your own claims? Classy, Jeff, very classy.
Alexei on October 23, 2009 9:05 AMI think this is just an example of "muddling-through" technology.
Us, the designers expect people to use things we produce in a certain way, and we're often surprised by how people ACTUALLY use it.
A great example is people typing URLs into the search box on google or yahoo.
So, if your a search engine designer what happens when you're presented with a URL? Do you spit it back and say: "Please learn to read the directions!! You can only use AND, OR or simple keywords!" or do you run with it and handling this kind of interaction?
People use things how THEY think it should be used, not how YOU think it should be used. You can't get around this. So you basically have 3 choices:
1. Spit it back as an error.
This is like the annoying person that tells you he simply won't do what you're asking. Its frustrating as hell and it makes the user upset when it happens. On the web this probably translates to someone not returning to your site.
2. Narrow the doorway so no invalid input can enter.
Reformatting the data on the fly, preventing certain characters in an edit box, etc. Again this can be frustrating to the user.
3. Accept odd data and run with it.
The user might not get what he expects as the result, but it's a more comfortable learning experience than option 1 or 2. Here he gets to perform trial and error until the gets results he expects back. Option 1 and 2 simply strong-arm the user into a conforming pathway and the results are less satisfactory. In the long run you can adapt to return the results the user is probably expecting...
Um. Great post by the way. I am not sure why the users are complaining about the fact that you are noticing the disconnect between design and how it's used.
(Hint: This post is noticing the disconnect). Hey at least he is noticing it. But again, I guess users don't read.
Practicality on October 23, 2009 9:13 AMThe editing experience on StackOverflow.com has sucked from day one. Get it right and stop blaming the user....
Anthony on October 23, 2009 9:14 AMWhy not tie the editor to rep in some way? So if you have 0 rep, you get a plain vanilla ASCII editor that is just going to echo exactly what you type.
Once your rep climbs a bit, you would get access to additional bells and/or whistles
Colin on October 23, 2009 9:19 AMI am reminded of one of Joel's principles in designing Fogbugz: that a bug should be really easy to enter. The more difficult you make it, the less bugs that get entered.
It seems to me that there is an extraordinarily easy solution: by default accept text as ascii formatted, and reproduce it exactly (stripping HTML I guess.) Then in place of the toolbar put a button called "Rich Text". Click rich text and it switches to the interface you already have. Store the user's preference in a cookie.
Now you have something that works for quick entry, and works as you expect, plus you have the option of rich text if you want it.
BTW, I normally put a blank line between paragraphs in comment boxes like this, but I omitted them this time just to piss you off :-)
Have you seen text entry at blogger.com? You enter text and it appears EXACTLY as you enter it. If you want markup, you click a button that shows you the HTML tags.
Easy as pie. Works as expected.
Suggest you put the programming tools down, take a break and enroll at an "Intro to Design 101" class at the nearest community college.
SantaClarite on October 23, 2009 9:23 AMJeff, you should know that when a user uses your product "incorrectly", there is no one to blame but yourself. It's painful, I know. you make this great web site for them, you give them all the tools they need, and they forget to put a carriage return in the right place. Bastards! How could they?!
Look, Markdown is fine for some people (specifically programmers), but it's a language with it's own syntax, a concept which most Real People(TM) aren't familiar with. With StackOverflow and ServerFault, you were pretty safe, but with SuperUser, some of the Real People(TM) are making their way in (once they figure out how to get past the OpenID Cerberus).
Why should someone learn Markdown? What incentive do they have? Everyone already knows WYSIWYG. Yeah, yeah, Markdown is WYSIWYG for ASCII (except that it's not, but let's assume it is), would your grandmother understand what that means?
Tyler on October 23, 2009 9:23 AM"Don't want colorization? Use to line break use 2 spaces at end >blockquote."
Makes perfect sense to me. Maybe your own formatting could use some work:
- Don't want colorization? Use .
- To linebreak, use two spaces at the end of line.
(And I have no idea what "> blockquote" is supposed to mean.)
Users ignore sidebars because they're the de facto holding space for ads.
Dawes on October 23, 2009 9:25 AMWhen I see something that remotly looks like an ad, I ignore it.
I think your "here's how the user sees the ask question page" image is wrong. If the user actually looks at the preview, he would see it's not formatted.
Anonyme on October 23, 2009 9:26 AMI think the Larson cartoon does apply to user myopia.
What is one method of training a dog (user?) Positive reinforcement.
I love the badge system on S/O. Maybe there could be a bronze badge awarded for *using* each of the formatting options across a range of several posts.
Anyway, Keep up the great work and good posts.
-Todd
fauxtrot on October 23, 2009 9:28 AM@Jeff Atwood
"Unless you write like this, with no carriage returns between your lines.
Personally I find that a bit odd. But is it normal for some users? This certainly does not look correct to me."
MANY people write like this. (And especially non computer interested people.)
I hate that too. But a theory could be that in books and magazines there normaly are no blank lines beetween paragraphs.
In case of books there are text-indentations, but in magazines often even that is missing. You are supposed to get the paragraph by noting the new line and the most often shorter lengh of the line before - strange.
Roghew on October 23, 2009 9:32 AMI think that the system should work like most users write. Most users don't put lines between paragraphs. Having a database full of comments from the last year, you might be able to extract some statistics…
I usually put the spaces, but not always.
Looks like the overwhelming opinion is change the way the SO editor works, just think how bad it would have been if these sites weren't designed for techies.
Listen to your users.
pete on October 23, 2009 9:40 AMYou train the user to ignore the sidebar, as I find myself doing on all the trilogy sites. I don't care to see your ads, so I don't look in the sidebar. I find myself ignoring the sidebar on many sites, because that's a common place for advertisements. The trilogy sites specifically put ads on many of the pages, most importantly the main page, right where you want them to look on the Ask Question page. Why are there no ads there on the Ask Question page? Your UI is inconsistent in this manner. I expect to find ads there, since you have trained me to expect them in the sidebar by placing them there on your main page and other pages.
Sarah Vessels on October 23, 2009 9:42 AMI was always fond of how Garry Newman put important information on his site, facepunch.com, which is to say he used giant red flashing letters.
It was of course terrible styling and not at all attractive, but it was effective in making users read the rules.
Drastic Contrast can also help focus the attention of users to specific visual parts.
Kyros on October 23, 2009 9:45 AMI've only read the first 20 or so comments, but I'm going to join the chorus who say that a WYSIWYG editor would have been the right choice here - and worse, I'm whipping out those 4 awful words:
I told you so!
I was the guy who gave you the 'don't make me think' comment on the SO blog, way back when you were choosing Markdown. You replied that the preview would be right below the user's entered text, so it would be ok. I didn't want to turn into That Endless Comment Debate guy, so I left it there.
But the truth is, in your 'what the user sees' screenshot, you should've blocked out everything but the text entry box. That's what the user *really* sees - his brain is busy enough, formulating a question that encapsulates what he knows about his issue. He shouldn't have to be mentally reconciling what he types over *here* what what is shown over *there*.
Also keep in mind, you are proud to give yourself and your coder colleagues large displays with great resolution. Not all of the SO/SF/SU users will have as much screen space. It's entirely possible that they won't even have their browser window large enough to see the Markdown preview at all!
WYSIWYG solves all of this. I see you still defending Markdown, in your article and in your replies to comments. I see you wanting to find some way to put formatting help directly in the user's view - but this is still a defense of Markdown, which is many things but it is *not* WYSIWYG.
Jeff, you're very perceptive of user issues and foibles, and I've learned a lot from reading your thoughtful and entertaining posts. SO/SF/SU are awesome in so many ways, because you and the team have been so willing to roll up your sleeves, tear off the usual dev blinders, and really *think* about the user POV. It's therefore odd (to me) that you still have this WYSIWYG blind spot!
Bryan on October 23, 2009 9:50 AMOne issue with the preview of outpt is that it is yet another big area directly under the big text box area. When i'm here at work and have my laptop docked that isn't a huge issue. When I'm working from the laptop screen though the two areas are just too big to view so I go with what I know - I typed it in - it probably worked fine.
Jeff on October 23, 2009 9:53 AMI imagine that the answer to your problem is to put the stuff you want users to read exactly where they look. You've already marked it on the last screenshot.
Do you use some kind of mechanism to bucket-test new UI ideas?
Pies on October 23, 2009 9:53 AMSome users are just lazy, untaught and ignorant.
They simply take no efforts, because it work's good enough without greater efforts.
I just would not answer such a question.
If the asker takes no minimal efforts, why should I?
If I'm paid of course the whole thing looks different :-)
If someone pays money he is at least not ignorant and lazy.
Some users are just lazy, untaught and ignorant.
They simply take no efforts, because it work's good enough without greater efforts.
I just would not answer such a question.
If the asker takes no minimal efforts, why should I?
If I'm paid of course the whole thing looks different :-)
If someone pays money he is at least not ignorant and lazy.
+2 for "BTW, I normally put a blank line between paragraphs in comment boxes like this, but I omitted them this time just to piss you off :-)"
Merl on October 23, 2009 9:56 AMThe comments to this entry are closed.
Subscribe in a reader
Subscribe via email
|
|
Traffic Stats |