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: anything dealing with computer software or hardware (that isn't gaming) 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.
Others have probably said it, but this is just so clueless it makes me think it's supposed to be a parody. Assuming it's real though: the text the user entered looks fine, it's your site that screwed it up, that's not the user's fault. But even the screwed up text is still legible. No, it's not formatted as I would format it, but the user's question is still clear. Finally, you yourself say "The ask question page is already dangerously close to cluttered with helpful tips". If the page is cluttered (or dangerously close), is it any wonder users don't read it?
Before you try to treat user myopia, you should try treating your own.
blm on October 24, 2009 12:53 PMThe simple fact you have a preview and a tips list is indication that your UI is broken.
And to ask "who doesn't type two carriage returns to indicate a paragraph" is fine - but don't forget to also ask "who on earth types two spaces to indicate a line break"
Martin on October 24, 2009 1:48 PMguys, stop writting comments here.
he will not read until here. That would be work ;-)
sunfire on October 24, 2009 1:48 PMMy first answer on Superuser.com looked rubbish.
In the example shown, I think the input looks poor because there are no blank lines between paragraphs, bit it is still far more readable than the result. Surely the questioner (maybe half-heartedly) looked at what he had written and hit the Post button. If what he saw in the input box had been worse, he might have looked at making it better.
I think you are expecting too much of a new user. Why should a new line in the input box change to a space? How many users are going to think that the Enter key sometimes acting as an extra space bar instead of a new line key is a good idea? As well as treating user myopia you should also have your own eyes checked.
I also thought that the help was rather unhelpfulm not showing the result and the method.
I would
- change the "put returns between paragraphs" to something like "two returns separate... ...paragraphs nicely." with a blank line beteen the two ellipses.
- indent "indent code by four spaces" and add "like this" to the end.
- change the backtick text to read " `backticks` highlight like this ", the "like this" having been surounded by backticks.
- each method of including a link should be followed by "gives " and the link foo.com
I would also have a balloon showing the source when the usermouses over an example.
Neal on October 25, 2009 2:16 AMBlame the user for bad software. Stop wasting your time trying to train everyone and just have the question look the same as what the user typed in the format they typed it in.
Chat on October 25, 2009 3:46 AMBlame the user for bad software. Stop wasting your time trying to train everyone and just have the question look the same as what the user typed in the format they typed it in.
Chat on October 25, 2009 3:47 AMEven accounting for users who have Javascript turned off by default and those who don't have their browser at full screen height (count me in both categories) it's still baffling, not unreasonably, to be typing stuff and then find out there's something showing you how it's actually going to end up.
Chat on October 25, 2009 3:49 AMEven accounting for users who have Javascript turned off by default and those who don't have their browser at full screen height (count me in both categories) it's still baffling, not unreasonably, to be typing stuff and then find out there's something showing you how it's actually going to end up.
Chat on October 25, 2009 3:49 AMit is odd.
Chat on October 25, 2009 3:52 AMI think the current web has trained users to not look in the right column as frequently these are populated with ads on many sites.
I know when looking at the screenshots I completely missed the formatting hints stuff because my brain said - ads, ignore
Stewie on October 25, 2009 5:18 AM+1 for DB's comment who mentions that the "skip-a-line method of separating paragraphs is a recent and unfortunate development". As he writes this is an "habit introduced by engineers that arose out of of e-mail, USENET, and other ASCII-based text unable to handle even the simplest formatting"
I made some research about this and here are some interesting links and extracts:
- http://en.wikipedia.org/wiki/Paragraph :
"A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. The start of a paragraph is indicated by beginning on a new line. Sometimes the first line is indented. At various times the beginning of a paragraph has been indicated by the pilcrow:¶."
- http://www.w3.org/TR/html401/struct/text.html#h-9.3.5 :
"How paragraphs are rendered visually depends on the user agent. Paragraphs are usually rendered flush left with a ragged right margin. Other defaults are appropriate for right-to-left scripts. HTML user agents have traditionally rendered paragraphs with white space before and after.
This contrasts with the style used in novels which indents the first line of the paragraph and uses the regular line spacing between the final line of the current paragraph and the first line of the next
"
I am a developer but I feel compelled to say that, I really do not like the idea now common CSS habit that says that the paragraph line ending height (i.e ) should be two lines high. More often that not, it has messed my text formatting. According to me the original formatting of the comment (with no white line between paragraphs) seemed OK.
-1 for me, my last paragraph needs to be rephrased:
I am a developer but I feel compelled to say that, I really do not like the common CSS habit that says that the paragraph line ending height (i.e ) should be two lines high. More often that not, it has messed my text formatting. According to me, the original formatting of the comment (with no white line between paragraphs) seemed OK.
Pascal Thomet on October 25, 2009 5:38 AM-1 for me, my last paragraph needs to be rephrased:
I am a developer but I feel compelled to say that, I really do not like the common CSS habit that says that the paragraph line ending height (i.e ) should be two lines high. More often that not, it has messed my text formatting. According to me, the original formatting of the comment (with no white line between paragraphs) seemed OK.
Pascal Thomet on October 25, 2009 5:39 AM-1 for me, my last paragraph needs to be rephrased:
I am a developer but I feel compelled to say that, I really do not like the common CSS habit that says that the paragraph line ending height (i.e ) should be two lines high. More often that not, it has messed my text formatting. According to me, the original formatting of the comment (with no white line between paragraphs) seemed OK.
Pascal Thomet on October 25, 2009 5:40 AMSorry for the multiple submission : I was getting an error saying "Publish failed" and I thought my last comment had not been submitted.
As far as I remember here is the content of the "publish failed" page : "Publish failed: could not rename C:\codinghorror\blog\archives\001306.html.new to C:\codinghorror\blog\archives\001306.html. Permission denied"
Pascal Thomet on October 25, 2009 5:47 AMAs a casual observer, I would say that your instructions don't make much sense.
1) Formatting Reference - why would the user be interested in reading a title called that unless he was having trouble with formatting.
2) You aren't actually asking the user to do anything.
Most likely the user did not know that there was anything wrong with his formatting.
Indent by code by 4 spaces - he isn't posting code.
Don't want colorization - his comment doesn't have color.
Blockquotes - he is not quoting anything.
Backtick escapes - he is not using them - whatever they are.
He has satisfied all your requirements as described in your instructions.
My suggestion is change the title to:
Writing Guidelines
1) Use linebreaks to break up long paragraphs.
2) Indent code by 4 spaces
3) When quoting, use blockquote
4) Use pre when you don't want colorization
5) Use ` instead of '
Treating Stupid Coders Myopia
Don't let ever make them think their view is right.
Don't let them design software. Take a software eng. which knows how users think.
Don't let them ever desing a user interface. A designer will make our users feel comfortable.
Rent a real programmer for the rest of the job.
Most of the time if a coder programms a user interface he think's to be easy usable it isn't. Mostly a bunch of complicated shortcuts. Rest is mostly unusable: But the coder always thinks his "Baby" (aka code) is perferct.
norf on October 25, 2009 8:08 AMMaybe you should give your editors the ability to flag a user's post as having needed reformatting. A user with more than one such flag could be considered a repeat offender whose subsequent posts can have the nag-meter volume ratcheted up to make sure he/she gets the message...
jake on October 25, 2009 8:44 AMI think the problem comes from the fact that we read from left to right, top to bottom. The instructions are on the right side of the page and on the bottom of the column.
If it was on the left, it would be better.
I also like Andrew's suggestion. I see only gibberish when I look quickly at your formatting instructions. If you want people to follow rules, better follow them yourself.
schouinard on October 25, 2009 9:05 AMJeff, you cant have it both ways. Obviously you are irritated by users who do not put a carriage return between paragraphs, and then you point out people who do, the fact is that there are both types of users on the net. But more importantly there are people who honestly expect the output formatting to look just like the input formatting, right down to the font, which is different here. I am sure you have a perfectly valid reason for that, but it is totally unintuitive to the end user.
The second bit is that some one posting to a site for a solution, has probably burnt some of his time around the problem first. The last thing on his mind is to ensure proper formatting. He is desperately looking for an answer. I truly think that WYSIWYG is the way ahead, and yes Word gets it right most of the times, it is when people start mucking with templates and .dot files do you end up with a tangle worst than well prepared spaghetti. Likewise with OO.org or any similar text editing software.
A general UX principle is that the user is always right.
Well, not actually, but believing that the user is always right is good way to think if you want to develop software that people want to use.
In the case of StackOverlow.com, markdown may be perfect because developers are used to working with encoding systems. For other sites, users probably expect input to work more like a word-processing program.
In the never ending struggle with balancing the needs of the experienced user with the raw beginner inevitably some tradeoffs are made. Maybe the cost of having a badly formatted first post for the beginner is worth the extra expressive power that Markdown gives once it is discovered and learned.
Doug on October 25, 2009 9:59 AMThe hoops you have to jump through to get a WYSIWYG editor running in a browser, even close to 2010 is absurd. It's a problem that Microsoft solved a decade ago but we're still trying to fart about getting bold to work properly within an editable div. Not even google have cracked it with their army of Javascript developers working on google docs (the styles drop down fails in Chrome a lot of the time).
There are a lot of good Javascript WYSIWG editors out there but they still allow you to paste images in, copy and pasted HTML (which can be trimmed out on the server, but the user experience is poor). They can also produce a complete mess of HTML with Ps inside DIVs inside SPANs.
Markitup is probably the best Markup one around but not as programmer-friendly as the stackoverflow.com WMD. The problem is now stackexchange has catered for non-techies people no longer like the editor, using **bold** isn't Word like enough.
Chris on October 25, 2009 9:59 AMI don't see anything strange in user myopia. It's called focus: You focus on what you are doing, and ignore distractions.
If people weren't able to do that, nothing much would be done. If drivers weren't capable of mostly ignoring other traffic, billboards, cute girls/boys on the sidewalk etc., nobody would be able to drive a mile without crashing.
I think the problem with formatting is that most people don't notice and can't see that it matters. The question is clear in their own head and they know exactly what they mean, so they don't notice that it is hard to read for other people.
It takes training to find that formatting matters. I'm a developer and I was around age 30 before I finally succumbed and agreed that formatting actually makes a difference.
A true WYSIWYG is probably less hassle for most people than using codes. But I don't know if it makes much difference - I've spent a little time on answers.com, which does have a wysiwyg editor, but most people don't bother with formatting there either, not even to the extent of adding newlines in a 20-sentence reply.
Most likely, the problem runs deeper than users not noticing the formatting tools. The problem is rather that they are blind to the very idea of formatting.
j-g-faustus on October 25, 2009 10:44 AMQuit being so intransigent.
The simple (and utter) fact of this entire issue is this:
THE CONTENT PRESENTED SHOULD LOOK EXACTLY LIKE WHAT WAS TYPED IN THE BOX (additional html, etc., modifiers being applied as specified).
That's it. Period, end of story.
Your example shows perfectly readable formatting as typed into the text box, and shows ignorant monkey formatting in the presentation.
The default presentation should *ALWAYS* reflect the formatting typed into the text box.
Additional formatting should be supported as supplied by the user, but the default should always be to reflect what the user actually typed.
When a developer blames the user for something like this, the fault lies with the developer, not the user (I'm a developer, and I still make that statement).
Markdown might be a cool tool, but it's no excuse for blaming the user when a bit more code would fix the problem (correctly) anyway.
Anonymous on October 25, 2009 12:00 PMTo elaborate on what the vast majority here are saying, there are an abundance of sites where the formatting matches what the user enters into the text box, but that also manage to accommodate HTML tags where specified.
Basically, what you're saying is that you aren't smart enough to do the same thing that just about every other site manages to get right.
Simply put:
If there are no special formatting instructions in the text in the text box, then what is displayed should look *EXACTLY* like what was entered in the text box. If that's too hard, maybe you should be looking for another line of work.
If formatting tags are provided, then, by all means, respect them, and display accordingly.
Blaming the user is just fucking stupid. Get over it and do your job as a developer. Make it work right, regardless of what technology you feel attached to.
Homer on October 25, 2009 12:26 PMEpic fail for Jeff. Original question was fine as typed in you. Your crappy software gunked it up.
Nick on October 26, 2009 2:15 AMTo echo one of the comments above:
Of course nobody reads the formatting information the right side of the screen. That's where they put the ads and we've trained ourselves to not look at the ads. Now not noticing the toolbar, that part I don't know about.
Anonymous on October 26, 2009 2:27 AMI think almost all the replies here are from totally conceited idiots. I'm fairly bright and often times when I use an application or a web app it doesn't do what I want. Do I blame the programmer because he wasn't telepathic enough to match the mental model of this one particular user? No. I actually do that thinking stuff (which users aren't supposed to do). I try different things. I even read the instructions or google for help.
Superuser does allow you to re-edit questions to fix bad formatting. It even actually follows a standard (you can format things in html).
other wayne on October 26, 2009 2:33 AMYou asked your readers how this stuff should work a few years ago when you were getting ready to launch the sites, and were basically implying that if readers couldn't use markdown then they shouldn't be on the site. Back then I made the comment that many of us don't care about that stuff. Computers have been around far too long to require special codes to format stuff - my Atari wordprocessor worked like that in 1985. WYSIWYG is actually a good thing, it's clever, it makes our lives easy. The markup codes should be invisible as this is the domain of the machine not the user.
And here we are. Someone get's their formatting wrong exactly for this reason. I have to ask, as others already have, why is a line feed not a line feed in the preview?! When you hit Enter you do this cause you want a new line and any GUI that doesn't cope with this is fundamentally flawed. This is not a user issue.
Glenn on October 26, 2009 2:35 AMIn addition to everyone said that on right side usually placed advertisement, YOU have advertisement there on the MAIN page, so when user click "Ask question" he's already trained to ignore right side. I've just learned that there are formating tips there from your this post, despite the fact that I use "SO" already for 4 months.
Kirill on October 26, 2009 2:45 AMWhat you're all not getting about WYSIWYG, is that it doesn't really work on the web. End users get their expectations about WYSIWYG from word processing software, which is fundamentally different from web browsers; word processors use the same software to both edit and render a document, whereas HTML can be edited by any number of editing programs to be displayed by any number of web browsers.
The bottom line is that a MS Word document is not an HTML web page. I have a fair amount of experience with user generated web content and I see this mental disconnect all the time. You can't really expect users to understand HTML, but giving them a HTML editor web control doesn't solve their problem. They still screw it up (or it still doesn't meet their expectations) because they're still dealing with HTML under the hood.
Whitespace pitfalls are the most common, but let's take an even simpler example: margins. The width of a text area might vary depending on browser size and resolution; even if the display area is a fixed width div or some such, readers can tweak text size in their browsers, and browsers may render fonts differently depending on display settings, which fonts are installed, and so on. All of these things can affect the rendered line breaks and result in WYS != WYG. You'd think this is a trivial difference, but it really bothers some users (these people _really_ love PDFs). Never mind the people who insert line breaks in the paragraphs (instead of letting the text wrap), much less those who indent text with various combinations of tabs and spaces to create block quotes or even columns of data.
With WYSIWYG the user expectation is basically to have an immutable "picture" of the characters that just happen to form sentances and paragraphs. The nature of HTML is that the structure of a document has meaning independent of how it's displayed.
Chucklehead on October 26, 2009 2:54 AMThe simple problem isn't that a user isn't capable of formatting their response or can't figure out how...
They don't care!
They just want to aske a question and have it answered. How it looks is irrelevant to them. Format as much as you can on your own and call it a day because nothing you do is going to change this.
Kris on October 26, 2009 2:56 AMJeff, try this experiment. Type a several paragraph post in notepad then copy and paste into one of the trilogy new question forms.
I paid attention to the preview window but I ended up using HTML line breaks and thought your editor was the worst I'd ever seen.
Why should I have to take a batch file, a section of a hosts file, or a preformatted table from a PHbb message and reformat it just to make it look nice on the trilogy sites? (of course I do as I take pride in my work but I don't like having to do it).
It's just way obnoxious to not allow me to paste large chunks from notepad without having the linebreaks effectively stripped.
dhanson865 on October 26, 2009 3:05 AMNot that I disagree with the cluelessness of the average user, but I might partly blame widescreen displays for this. Depending on screen resolution and/or the presence of a widescreen monitor, the user might not have been able to see below what they were typing to realize that the formatting wasn't correct until after they typed it and scrolled down to submit. Then they probably ignored the text as if it were an advertisement or terms of service because lets face it. Nobody reads those anyway.
Personally, I use 1600x1200 for my workstation to gain vertical real estate to see that sort of thing, but most people use resolutions far lower than that. I see a lot of people using 1024x760, or even 800x600 and they don't have any idea that something is "wrong".
The ASCII formatting this person used clearly indicated that he thought he was formatting the post. Your editor bears a striking resemblance to Notepad so non-techie users are going to think the formatting is also the same.
Jeff, I love your blog and all, but your underlying assumption that the average internet user would understand the difference between ASCII and markup is probably to blame here. The default for this particular site shouldn't be to use a markup language at all. It should be exactly what they type in, and if someone introduces additional formatting, that's fine. Otherwise, it should appear as the user typed it.
People are going to ignore everything they deem irrelevant to their task at hand because they think it's an advertisement or something similarly stupid that isn't relevant. Oh. That, and people are lazy. Just my 2 centavos.
Mike Taber on October 26, 2009 3:06 AMJeff you have recommended and talked about "Don't Make Me Think" over and over again and yet here you are trying to make the user think. You should now mark your own post with one of your big fat red-letter FAIL signs that you like so much.
Kuerwen on October 26, 2009 3:16 AMI would say that if the web was not so full of adds, then maybe users would read side notes instead of skipping them.
We are train to skip flashy adds that says CLICK HERE, why would we read useful informations that are not even blinking ?!
Those teletype terminals have something to answer for!
crlf: Windows
lf: Unix
Start a new line of text at the left hand margin underneath the previous line of text: someone who is writing text on paper or in a text editor.
This reminds me the minimalist's quote - KISS ( Keep it simple stupid!). Google become popular for a reason.
Prakash on October 26, 2009 4:54 AMAll these comment show that in the end, people do care about what there post look like.
Jacco on October 26, 2009 5:24 AMStrange Idea : try to force users to use at least markup element for each x symbols (probably each 100 for first try). So it will force user to use some markup at first and after some time it will become a habit I think :)
Alexey Shcherbak on October 26, 2009 6:09 AMOMG i feel so stupid, i've added posts not knowing how to make the markup pretty.
i never noticed it :( I remember doing a search for a how to. Maybe a Rob Conery screen cast would help me :D
Chris Kolenko on October 26, 2009 6:17 AMOH, NO! LOOK OUT FOR THE MARKDOWN POLICE! I thought the grammar police were bad.
Joseph on October 26, 2009 6:32 AM"I think almost all the replies here are from totally conceited idiots. I'm fairly bright and often times when I use an application or a web app it doesn't do what I want. Do I blame the programmer because he wasn't telepathic enough to match the mental model of this one particular user? No. I actually do that thinking stuff (which users aren't supposed to do). I try different things. I even read the instructions or google for help."
Of course, why should a programmer expend any effort making it possible for ordinary people to use computers? Why should we even bother with a GUI? it was a mistake to even allow people to use a computer without requiring them to first program it. All this "progress" in computing has just been a bunch of concieted idiots intellectually masturbating.
Of Course on October 26, 2009 6:42 AMJeff,
Never seen you come down so hard on a user before. Perhaps you wrote a quick blog entry while you were angry. I've always been a firm believe of "blame the developer, not the user". If most people are using something you've written incorrectly, that tells me your design isn't very intuitive (This happens to every developer - even God).
I can speak for myself and say it annoys me when I create a post *just* like the user mentioned above and when i click "submit" or "preview" it loses my formatting. Why force the user to jump through two hoops (hitting preview to see what it will really look like), when you can just do what they say?
I created paragraphs by doing a double return just for you ;)
Russ on October 26, 2009 7:03 AMAll you ridiculous defensive people accusing Jeff of being hard on users need to learn to read.
Another Jeff on October 26, 2009 7:42 AMNo sure if this has been mentioned... but...
From my experience, animation tends to go a long way in drawing user attention without being a permanent fixture on the page.
For example, I have a form that after about 5 to 8 seconds of no activity the 'save' button starts to glow yellow -- subtle but noticeable. If the user changes inputs the button stops glowing until they idle again.
By drawing attention for just a moment to a block -- especially on a page with no animations to begin with -- has helped with guiding the experience for visitors to my sites
Possibly a first time user simply needs to see an arrow gesture over to the help box to point out the markup help -- or even a fading out box like you already do with new users.
webdev_hb on October 26, 2009 7:47 AMWell, the users aren't quite so lazy when it comes to complaining.
Practicality on October 26, 2009 7:51 AMJeff,
The problem with markdown is not the separation of paragraphs; most users do use 2 newlines.
There are three (3) problems with the current version of markdown:
1:
a single newline should produce a ; 2 or more newlines should mark the end of a paragraph.
2:
Markdown only auto-recognises an (un)ordered list when it is separated by at least 2 newlines.
The ordered list in your example is, at least in the mind of this user, part of the (previous) paragraph.
Markdown needs to auto-recognise (un)ordered lists after a single newline.
3) the image code is rubbish, fortunately this is not a real issue on stackoverflow.com
Jacco on October 26, 2009 8:03 AMAny non-myopic user would suffer horribly in this day and age of software.
Modern software, particularly the web, is straight-up hostile. It wants to draw my attention in rude ways to places I am not interested in. Desktop software wants to install toolbars, desktop icons, system tray widgets, on-startup services. The web is worse - it tries to sell me teeth-whitening secrets and the one thing I can do to get a six-pack in five days. And in an attempt to snag my attention, it will do ANYTHING... it spins, whirls, blinks, sings, and flashes tits. On ticketmaster, the ad you see after you click through the purchase process has a button that looks exactly like the "NEXT" button from the previous five steps!
Your diagram of what the user sees is an extremely accurate depiction of how I view the web.
I can't imagine the filth and lost time I would suffer if I approached the web any other way.
There's nothing you can do to make me relax my guard. My approach to software is to find exactly what I need and then box out everything else. I only step outside the box when I go into search mode.
I imagine myself as your first-time asker, and wonder what would make me look over there into the AdZone to search for formatting tips instead of tits. It's tough. I guess maybe you could detect that I wasn't using any formatting, and tool out by the numbers that I'm making a list, and then flash up some sort of non-interruptive message between the typing zone and the preview zone, with a short message in big letters saying, "Formatting tips are on the right, or click here for details."
But I'm afraid I just re-invented clippy, so I probably wouldn't suggest running with that idea.
More sane is the point that nobody cares. Editors can come and clean it up, and first-timers who care can see the preview, note the problem, and go into search mode.
If the user doesn't care enough to do that, I'm not sure you can help him. Or that you need to.
I think having to delete your example text would annoy me.
Patrick on October 26, 2009 8:10 AMThink about how long it would take to read a webpage if you read all of the text that surrounded your content on a regular basis. You have to admit, most sites have a LOT of things surrounding their content that you don't want to read.
(Speaking of user unfriendly, your CAPTCHA system still bounces me about 50% of the time, even though I know I get it right. What's up with that? Safari 4 on OS X 10.4.11)
Shmork on October 26, 2009 8:14 AMthe reason why we don't see anything else is because we're trying to GET TO THE CONTENT! Even if the article was constricted to only 4 inches in one of the 4 corners of our screen, we'd still ignore everything else if what was in the middle was something unrelated! I for one click on the page title through google search results. And then when on the website I'll look for the title I clicked on. Then I look right underneath that to find my content and ignore everything else. Even if the title was at the very bottom right of the screen, as long as the content followed I'd be glued to that corner and wouldn't care for anything else.
Bob on October 26, 2009 8:24 AM@Bruce Boughton: Word has always treated pressing the Enter key as being a paragraph break. If you want a line break, press Shift+Enter.
What changed in Word 2007 was that the default paragraph style was changed to have a 10-point space after the paragraph. Therefore hitting Enter once is now enough to have space between your paragraphs.
This is the difference between the semantics and the appearance of the document. Markdown is trying to infer some semantics from what the user has typed, and it's getting it wrong. Users don't generally understand the semantics of typographic layout, they just try to replicate it using only the tools they know how to use: spacebar, possibly Tab, and Enter. Have you never seen a Word document where pieces of text are roughly centred or right-aligned using spaces?
Mike Dimmick on October 26, 2009 9:13 AMI think the answer to myopia is thinking _for_ the user, as much as possible!
User expects what they type to appear how they type it (ie, mind reading!) - it's the convention we've been taught while spoiled with MS Word. Only exceptions to this rule are other standards like clicking a button for bold and italic.
SO (and co.) use a "new" kind of formatting - spaces for code? Footnotes indicate urls? What is this? It's new! I bet all of the users on SO have used online forums with some sort of markups (usually bracketed code similiar to html, bbcode for example). So Jeff, it's like you're trying to ... reinvent the wheel and retrain your users.
As horrible as it sounds, you might encounter less problems using the terrible interface and codes that are most like the popular online forums. It is terrible but it is familiar and users know what to do with it.
There is a house with two rooms, one room has a coffee pot and the other room has the coffee maker. How does a man make coffee? Well, he takes the coffee pot from the first room and puts it into the coffee maker in the other room. Now, a second time, the coffee pot and the coffee maker are in the same room. Uhoh. What does the man do? Well, he takes the coffee pot and puts it in that first room. Now, he knows how to make coffee. ; )
rlb on October 26, 2009 9:35 AMHere's a suggestion: put a little radio button above the textarea, with two choices: "Plain Text" (the default), and "Enable MarkDown renderer". You could even add additional rendering engines in the future, like html (a safe subset of common formatting tags, of course), BBedit support, etc. The default "plain text" choice would simply wrap the entire post in 'pre' tags - which seems to be what most users here expect. I think the whole "carriage return != new line" thing only makes sense to people who have had to work on web sites, and/or hand edit html. The ones who don't get it are the same people who will complain about their "formatting" information being "lost" when they resize the browser window!
DMR on October 26, 2009 10:00 AMI have to add my voice to the many people saying 1 carriage return = 1 carriage return.
Why would I hit enter to make two spaces? I really don't see the upside to maintaining that system.
I think this would clean up the posts from alot of people who just aren't willing to hit the enter key twice.
It's not about what they 'should' be doing. It's about how you should be handling their invalid input.
Kevin Laity on October 26, 2009 10:00 AMI have recently begun to use stackoverflow, and, as some have pointed out, for a while I didn't notice even the preview under what I was typing.
Emilio M Bumachar on October 26, 2009 10:18 AMI think users see even less. I had made a few contributions to Stack Overflow before I realized there was a preview pane, as it's almost always below the fold.
By default, you could just display it as plain text (no Markdown), so that it looks just like the text in the input box. WYSIWYG. No surprises, nothing to learn.
Users who want prettier formatting could enable Markdown.
Adrian on October 26, 2009 10:23 AMhttp://stackoverflow.com/questions/57243/finding-missing-emails-in-sql-server
That's the first question I ever asked on StackOverflow - I did not have any trouble with the formatting. The reason is because (OMG!) I READ THE INSTRUCTIONS. Why did I bother to read the instructions? Because I give a crap about what my question looks like! This is the root problem - users don't care what their content looks like. You only have to spend 5 minutes on forums to figure this out. People just want to put their stuff out there and they don't want to put any effort into it - and they do not care about the result. This is a social issue - because for the most part, readers don't care what the content looks like either, and it's a faux pas to tell them their post is unreadable.
I did not see this post as defending the interface. I saw this blog post as a sort of "I can't believe a site designed for programmers is plagued by this well-known issue. You would think programmers, of all people, would be able to read some simple instructions" - it wouldn't matter. You can have WYSIWYG editors, you can have spell-checkers, BBCode, whatever you want... users will still post content that looks like crap.
I say bring back the public floggings. (Seriously - used to be, if you posted something unreadable and full of poor writing skills, you would be publicly lambasted. We need to make that ok again.)
Jasmine on October 26, 2009 10:27 AMHi Jeff, I think you know that most users read from left to right. I think if you'd put your instructions before user gets to the textarea to enter the actual question, you'd have better success.
Eugene on October 26, 2009 10:31 AMHmm....The instructions are where the ads are usually placed. I think your average super user is conditioned to not look in that area.
Chris Nelson on October 26, 2009 10:37 AMDoes anyone read this far down?
Anyway - where's your statistics? How often does this happen? Is it common? How common? Or is the example a fluke? I submit that the post is incomplete without this information. You're always going to be able to find at least one person who can't use the interface, no matter how much you optimize it.
Reid on October 26, 2009 10:39 AMHere's the thing about double carriage returns between paragraphs: it's a kludge, a workaround for the fact that plaintext has no leading or linespacing formatting and no automatic indentation. The same goes for double spaces after periods. Nobody ever used those techniques in print before typewriters because there were more elegant formatting options available. Typewriters and plaintext did not allow any formatting at all, so to improve readability, people adopted extra spaces between sentences and paragraphs.
Today, however, you CAN format text on the screen. That's what this whole conversation is about, in fact. As programs like Word get smarter about auto-formatting paragraphs and sentences, users can and will gradually stop doing the double-space thing by hand (if only they would stop teaching it in typing class). This is a good thing, and an auto-formatting tool should take it into account by inserting whitespace between paragraphs (approximately 1.5 lines' worth) and maybe even indenting them, as printers have done for many decades now.
It frustrates me that these hacks and workarounds that developed out of necessity are now considered by some the "right way" because they have had to use them for so long. We should celebrate the return to sanity offered by true text formatting.
Jesse Janowiak on October 26, 2009 10:47 AMreading Jasmine's post, I think she hit the nail. Users are not interested. Many questions are answered before... if they had put in any effort (tried google for example) they would not need to ask the question in the first place.
But they want an answer for the least amount of effort.
Just type some words, hit submit and wait for the answer to appear.
There is no way you will ever get this kind of user to write a nicely formatted question.
I took a few minutes to mock up what I think would be considerable usability improvements on that screenshot.
http://imageshack.dk//viewimage.php?file=/imagesfree/ro575806.png
BmB on October 26, 2009 10:50 AM@Jeff: "Simply pressing carriage return between paragraphs would have also worked absolute wonders."
I may be a bit late with this, but while an extra CR between paragraphs is normal, an extra CR between LIST ITEMS is absolutely not. In fact you'll notice the original poster DID enter an extra newline following the actual paragraphs, he just kept the LIST and it's items with a single newline.
Frankly, I can't understand why a hard carriage return would be treated as anything else anyway... except in HTML because whitespace is ignored in HTML...
Sorry if this has been mentioned already, but my attention span goes from the top of your post to about the 10th comment, just like most blog readers.
Putting sample formatted text in the box would be useless because the average use would just see crap in there and delete it all so that he/she can start typing the question.
Patrick on October 26, 2009 11:32 AM@Jacco - yes, after 25 years as a programmer, I've learned that addressing the root problem is the way to go. Sometimes it's impossible for you to do that. In this case, I think it's impossible to address the issue by changing the interface - but it could be addressed by making it open season on idiot posters. If you post a question that doesn't make sense, or you jack up the formatting to the point of it being unreadable, you deserve a little crap. Having other people come along and fix the post isn't the solution - it only allows people to continue to be lazy. I say, demand that users create good content or be ignored.
Changing the interface in this case would be like spraying air freshener when you just need to take out the trash.
Jasmine on October 26, 2009 11:55 AM"Markdown is WYSIWYG -- for ASCII."
Except it isn't, as your example in the main article perfectly illustrates.
World Cruises on October 26, 2009 12:19 PMThe instructions are in the same spot that ads are on your other pages. It has nothing to do with users being lazy, too stupid to follow instructions, or suffering from "user myopia" (unless you count banner blindness as myopia), it just has to do with the fact that you've trained your users to mentally block out the same area that you chose to put instructions.
I can't believe the attitude some people have in these comments, about the "stupidity" or "laziness" of the users, and I wonder just how out of touch with reality these people are, with their misplaced hostility. Don't blame the users for what is obviously a design mistake.
Anonymous on October 26, 2009 12:25 PMI am sorry but I guess some people are missing the point here by discussing how easy or difficult it is for the users to format their posts using the instructions provided alongside. I guess if the user wanted to, he would have been able to format and indent and number and do everything using the instructions. But know what? That is not important for the user. Because after all he is just posting on some forum, even if he is asking a question. He would have taken pains to ensure formatting had it been any document that mattered to him...but a post on the web just does not most of times matter...And maybe thinking like this is wrong but I guess some of us do think like that.
captcha "had grooving" :)
saket jha on October 26, 2009 12:31 PMWait, you want users to go out of their way to format text? Wasn't he/she/it doing that already when they created a list of items in the first place?
Yes, you could call it myopia, but at the same time they already formatted their question. That's like saying "hey you are trying to do xx. You need to to xx then xy to do xx."
Steve Syfuhs on October 26, 2009 12:33 PMJeff -
Myopia means near sighted.
I think you want to name this post, User Tunnel Vision.
Jack M on October 26, 2009 12:37 PMSo, you letting users drive your car, and you've hooked up the steering wheel so that it does the opposite of what they expect, but it's OK, because who have a notice on the glovebox saying "oh, by the way, the sterring wheel is backwards"?
Anita Fixx on October 26, 2009 12:55 PMI think the blame can be shared a bit.
On the one hand, as many comments here point out, the Markup text processing ignores single newline characters (in favor of requiring consecutive newlines which create empty lines). Additionally, the preview window is separate and distinct from the text entry window requiring the user to make a small effort before previewing occurs.
On the other hand, as Jeff laments, most people do not value layout as they should. I view this as a problem with our educational systems. We spend 12 years studying verb conjugation and sentence structure. I also had a year or two of cursive handwriting instruction, keyboarding, foreign language and even an elective 'graphics' course. However, I didn't learn layout until years later and by my own inclination when I read The Non-Designer's Design Book*.
I think more time should be spent on communicating well in various mediums and less on pedantry. The people who haven't figured out the finer points of semi-colons by sixth grade probably aren't going to. Is the world significantly harmed if I get my point across with imperfect punctuation --> Ie: "Here is a quote."?
Teachers of media should spend a good deal of time demonstrating why clearly-formed messages are important in addition to how to correct them.
* http://www.amazon.com/Non-Designers-Design-Book-Typographic-Principles/dp/1566091594
Brett on October 26, 2009 1:14 PMSome good principles to think about when designing UI. It totally makes sense and it makes me cringe every time is see a useless Yes-No or Ok-Cancel message box in desktop applications since most people will read at most the first and last word.
Visual C# Kicks on October 26, 2009 1:26 PMI liked the content on this site. Would like to visit again.
Designer handbags from http://www.ithandbag.com
I liked the content on this site.
Designer handbags from http://www.helloebay.com
This is why I think preview for comments is a good thing - it forces the user to look at the WYSIWYG version of their comment and thus prompts them to reverse if they've formatted it wrong.
Kerry NZ on October 26, 2009 1:40 PMYour view of how the user sees the Ask A Question page is wrong.
The preview is **NOT** in the line-of-sight of the user.
James on October 26, 2009 1:45 PM"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"
I think the irony is that this is the problem with the helpful "Formatting reference". When I try to read it it looks like:
indent code by 4 spaces don't want colorization?
Use to linebreak use 2 spaces at end > blockquote
backtick escapes `like _this_`
Etc.
It's odd to criticise someones formatting, when you can't even master punctuation and capitalization. Also, I still haven't figured out what backticking is escaping in the example.
Observer on October 26, 2009 1:46 PMFor those who keep insisting the text the user entered looks fine:
http://pastie.textmate.org/pastes/670429
Patrick McElhaney on October 26, 2009 1:55 PMWow, I didn't have time to read all 400+ comments, but what you have here is Jeff outsourcing his re-design brain-storming session. This is just brilliant!
Patrick on October 27, 2009 2:29 AM* Poll? (No hassles - feedback possibilities abound)
* Deliberate change of position of everything, one hour, pre-decided, per week - makes big news - promotional gimmick, usability hack, shoot-in-foot alert! ;-)
* sitewide markdown setting for 1 or 2 newlines = linebreak
* ascii text entry option
* @Mike Taber +1 . How about making the preview beside the text area?
* If the main point is User Myopia, point noted, thnx :-)
PlayAround on October 27, 2009 2:32 AMsnomag hit the nail on the head. You've got the instructions in the same imaginary 'box' on the page the adverts live in.
As soon as people associate that area on your page with ads, they will just stop looking at it full stop.
You might try mirroring the layout of the page (i.e. move the column containing the instructions and the markup help to the left of the edit box)
That might break the users association of it with ads.
Sir Digby Chicken Caeser on October 27, 2009 4:16 AMmatthias wandel> If you put useful information where other people usually put advertising, don't expect the user to even glance at it.
So now because enough "authors" decided to use half the space on their pages for advertising, that space is off limits for the rest of us... Awesome. If you don't advertise, just leave half your page blank.
TomCat on October 27, 2009 4:22 AMOuch - I'm glad that wasn't my question submission. Point taken!
Document Scanning Services on October 27, 2009 5:18 AMI got stuck on stackoverflow trying to get my code formatted for almost 30 minutes the first time I did it.
The problem for me was that that formatting reference on the right is ambiguous. And that is when you discover that it is meant to look like that and not HTML errors. "Indent code by 4 spaces" - No problem, I will do as soon as I can find out how to format it as code in the first place.
It is obvious one you know what it means, fairly useless until then.
Dan Brown on October 27, 2009 7:24 AMWhat we have here is a classic case of the Tragedy of the Commons. This "user mypoia" is a psychological effect of being trained not to think when using software.
Getting users accustomed to thinking when they use your interface enables better interfaces that are more efficient and easier to use for those users. The benefit is not constrained to a single interface: although details of interface will differ (conventions across interfaces can help here, but will only go so far and that's a different matter), the mental mode acquired by users of exercising basic cognitive logic makes all interfaces easier to use if they can assume it. It does not take a lot of time for a person to learn, perhaps 0.001% of a human's lifespan and not more than it takes to learn to tie one's shoes, but during that time, the dumb interface has an advantage. Beyond being the natural assumption for an application (as writing software is a much higher intellectual investment), it's a one time investment in the user that then pays off for all applications that make it.
Now if there's one application developer in the picture, clearly that investment is all on him, and he directly sees the gain from it. When there are several more developers in the ecosystem, each will bear that investment on some proportion of the users (namely, those that didn't have it from another application before), and the benefit is spread across all applications, since the set of applications one user uses can change at any time, but still statistically any one user will spend enough time on that developer's applications that in average the investment on a single user will pay off.
But as the ecosystem grows several orders of magnitude larger, with many myriads of developers and many millions of users: while the investment would *still pay off* if all developers *collectively agree to it* as each will only bear it for a small fraction of users, investment *on any one user* will typically not pay off for the developer of the application it was borne in, as the fraction of the benefit for that same developer from the same user will be under the threshold of the investment; so any developer that cannot assume that investment from other applications and is motivated by the typical user, will not make that investment himself.
The result is that applications compete with each other on how dumb the user interface is -- not because dumber user interfaces are by and large to the benefit of users (indeed, they only hinder the productivity and capability of users in any substantial work), but because of the instant gratification from not having to think, that first stimulus which determines the local maximum users will instinctively tend to.
In smaller ecosystems, such as some classes of software and users decades ago when computers were much less widespread, as well as of the many more specialized applications still today (even if to a lesser extent due to cultural trends that built up), one can discern the different assumptions in the prevalent user interfaces. And it is not users that are naturally smarter -- if any librarian, post office clerk, conductor in a train, or ATM operator can learn, so can the Stack Overflow developers or your Super Users, or indeed all average people, if they weren't trained not to.
TomCat on October 27, 2009 7:35 AMUsers' attention is not only about what you put on sight, but also what you don't.
The current ASK page might be better for newbies if you remove everything but one necessary tip. For newbies, you can add a Review Your Question phase after the first click on Submit. You can display only a preview of the question and a second later add one of those orange notification with an advice.
Another approach would be to alert the user when he/she submits a question with a large block of text, i.e., warn them on specific formatting problem.
Another thing I've noticed is you tell the user how to format the question. The user cares about how to get his/her question answered. Talk to the users in this terminology and they'll be more inclined to listen (and good formatting is a way to get faster, better answers).
Asaf R on October 27, 2009 9:10 AMRocket surgery?
Maybe one day we will see signs like this:
NASA Surgeon General Warning: Use of hydrazine increases risk of thruster contamination
Mauricio on October 27, 2009 9:54 AMPatrick,
One thing you are missing with your example (though it's a cool site) is that, even though what the user types isn't perfect, it's still orders of magnitude *better* than what the preview (markdown applied) shows.
It's a simple statement of fact:
The default formatting should be what the user types in the text box. There is *no* legitimate argument for doing otherwise. A good programmer conforms to the user, not the other way around (and I've been programming various styles of user interfaces and programs for 30 years, and I'll still make that statement).
If the user wants to use markdown (or explicit html), they can then be allowed to do so.
It's easier for the programmer to accommodate the user (especially in this kind of instance) than it is to try to train God knows how many different users to accommodate the programmer.
I've posted comments to literally hundreds of different sites, and the *vast* majority of those sites will preserve the formatting that was entered by the user, even when they also allow for advanced formatting styles.
It's nice that such a pretty and shiny tool such as markdown exists, for those that want to use it. That does not, however, legitimize the idea that the site should mangle the formatting that the user entered, in plain text. Only a lazy programmer would try to force the user to conform to his view of the world.
There's a reason that we're programmers. We like to solve problems, and do cool stuff with code. As a programmer myself, it's much easier for me to help the user do what they would probably do anyway, than it would be for me to try to teach them how to do it my way.
They don't care about your 'rules'. They want to do (or say) something.
And it is remarkably simple to do, especially in this example. Always, always, always, always, DEFER to the formatting that is entered in the input box. And then, apply any explicit formatting directives entered, accordingly.
That isn't hard.
Homer on October 27, 2009 10:35 AMLivejournal has solved this problem for text entry if I'm not mistaken.
Further: I suggest two modes.
One is "dumb default", where what you enter gets hacked into HTML exactly as you wrote it, newlines and all. PRE tag, basically.
The other mode is markdown, which must be manually selected(or opted into in the user options, and that allows more sophistication, etc.
Great article. In reality, readers do not read but rather they scan across a page hoping to find quick answers. The effort of reading through particular formatting rules and the like, may seem helpful from a developer's perspective but it might just be an eye sore for the user. I would assume that this is one of the major paradoxes that user interface designers face.
Josh on October 28, 2009 4:10 AMThe comment by Anonymous - about 7 comments in & the WYSIWYG suggestion are most relevant.
I think people do read comments/dialogs/instructions, they've just learnt to ignore verbage, tech-speak and unclear instructions.
Just as a test I registered @ Super User and opened the 'Ask a question' page.
As a first time user, the formatting panel is all but invisible.
In itself, it's poorly formatted; doesn't stand out and from a (Western) convention is in the lowest priority area on the screen.
Perhaps put the boxes on the left?
When I read it, it little sense to me at all.
What you say ........... what I understand;
"put returns between paragraphs" .... understood, it's a common convention
"indent code by 4 spaces" .... understood, it's another convention
"for linebreak add 2 spaces at end" .... not understood, why? And how hard is it to see/check when you can't see the formatting characters?
"> blockquote" .... understood, but I had to think about it
"backtick escapes `like _so_`" .... no idea what this means or why I would use it
"
[foo](http://foo.com)
foo" .... no idea - what do you want me to do here?
Also, I think your font size(s) could be smaller - For example Apple (and others) are using 10px and it's perfectly legible. This could allow you to get more information on the screen.
Mark Nethercott on October 28, 2009 4:28 AMBloody Hell Jeff your stupidity knows no bounds sometimes.
Give users BBCode markup because that's what people know.
Complaining because people choose not to use carriage returns between paragraphs is pathetic coming from you and your UI bent.
Honestly, I think everyone but you is right in this argument.
If you're asking the wrong questions, there's no wonder you're reaching the wrong conclusions.
The question should not be "Why do users don't bother reading the formatting guidelines?" rather it should be "Why do we want the users to read the guidelines in the first place?". The answer to that is obvious; Its because you're formatting rules are arbitrary and aren't very logical or natural. simply put, Markdown is a total and utter failure of UI engineering.
If I'm pressing the Enter key, I expect that there will be a carriage return. If there isn't, its your fault for not anticipating that, not mine for not noticing the guidelines. If I'm writing numbers at the start of my lines but you fail to notice it, again, your fault for not making the interface smart enough to detect this very common situation.
Yesterday I was caught our with trying to edit the live preview on the stackoverflow web site. I was hitting backspace to delete stuff, which of course because it's not a text field, becomes the action for the back button.
Shaun McDonald on October 28, 2009 5:04 AMhttp://www.codinghorror.com/blog/images/su-ask-what-the-user-sees.png
IT IS WORSE THAN THAT! Users don't look at the preview at all. Jeeze.
Michael Hamilton on October 28, 2009 6:04 AMThe comments to this entry are closed.
Subscribe in a reader
Subscribe via email
|
|
Traffic Stats |
