9

Today, after being on StackOverflow for five years, I have discovered the { } button, after reading some blog post. My life was changed.

Well, not exactly, but it did make it a lot easier to indent code in questions asked by SO beginners. Before today, I would copy/paste the code in a local editor, indent, then paste back. That, even though I was visually aware of the button since I clicked the "image" icon to its right many times to paste or insert images.

And I'm not the only one who's missed that button for a very long time.

Proposal

One way to alleviate the problem is to make said code button less easy to overlook. How can we make it more easily discoverable?

  1. Move it towards the left (except for right-to-left sites) in the toolbar, based on its frequency of use. I'd guess that it's the most useful tool, perhaps after the link tool. B and I I think are rarely used, because it's comparatively much easier to just type * or _ before and after the text. enter image description here

    This move could be applied only on code-related SE sites. If the { } button were placed before B, it would be hard to miss, while B and I would be also highly visible (and familiar from the toolbars in many other editors).

  2. A slight, subtle, one-time emphasis on the code button (just like the one we have when landing on an anchor, a fading out light orange border - example), for first-time users, perhaps when unindented code is detected (we already have an implementation for this). After the button is clicked for the first time, the user's profile would store a flag indicating that the emphasis should not be repeated.

Notes

  1. The argument that there's a shortcut key for the code button misses the point - a user who doesn't see the button on the toolbar won't mouse over it to learn the shortcut key from the tooltip. They're also less likely to venture in the help and learn about that shortcut key.
  2. History - A previous related proposal has implemented an automatic check for unindented code, but only for users under 50 rep, which some moderators have pointed out is too low of a limit - "I think the reputation limit it too low. I've seen poorly formatted code from people with much higher reputation. – ChrisF♦ Jul 13 '11 at 12:35"
Improve this question
20
  • 1
    You can also just highlight it in the editor and press Ctrl+K.
    – Jason C
    Mar 4, 2014 at 7:46
  • 1
    Markdown editor is already a clean interface with minimal number of buttons. Reviews of first posts assist new users, to which many come from backgrounds savvy enough to look for preformatted code and other formatting.
    – Jason Sturges
    Mar 4, 2014 at 7:51
  • I was going to post an answer saying I prefer it the way it is (and I still would), but then I remembered that I only even use the Image button - the rest I all use keyboard shortcuts for.
    – Bernhard Barker
    Mar 4, 2014 at 7:54
  • 2
    @JasonC: Ctrl+K is even less discoverable than the { } button, because you need to mouse over it to see the hotkey.
    – Dan Dascalescu
    Mar 4, 2014 at 8:08
  • Everything that tries to be "more visible" too hard becomes natural target for adblocks and similar software. So... do it if you must, but don't overdo it.
    – Mołot
    Mar 4, 2014 at 8:11
  • @DanDascalescu I'd argue that it's more discoverable, because all you need to do is read my comment about it! (On a more useful note: I think it would help if it was mentioned in the "Code" dropdown section when you press the big "?" help button in the editor.)
    – Jason C
    Mar 4, 2014 at 8:12
  • @Mołot: I think you're exaggerating. See Effectiveness of Subtle animation to draw attention. Nobody is going to ad-block a button that glows or slightly moves for 2 seconds. I've seen that interaction pattern used very effectively in a number of places. Also, the user profile can store that the button has been clicked (i.e. the user has learned), and never animate it again.
    – Dan Dascalescu
    Mar 4, 2014 at 8:25
  • I don't know whether I should post this as feature request, or as answer to this question, so for safety reason, I just write it as a comment. Maybe what we need is a quick-tutorial/guide about the mark-up/formatting buttons itself. I browsed quickly for these features and didn't find anything. The closest I could find was Markdown Editing Help, which can be helpful, but not for new user (and also doesn't mention buttons at all)
    – Meta Andrew T.
    Mar 4, 2014 at 8:38
  • 1
    @AndrewT. Simply press the "?" help icon while editing.
    – Jason Sturges
    Mar 4, 2014 at 8:39
  • @JasonSturges Thanks, I think I can agree with you then (that it's already okay as it is). The only one thing that I can suggest now is to show that minimal "Markdown Editing Help" automatically for first-post user.
    – Meta Andrew T.
    Mar 4, 2014 at 8:45
  • 2
    I don't know how big of a problem this really is, but I can say this: if I had gone 5 years without figuring out markdown for code on SO, I'd definitely want to pretend I wasn't the only one who had an issue and make a similar feature-request.
    – jmac
    Mar 4, 2014 at 8:50
  • Thanks @Shadow. Glad to see I'm not the only one. From the link you've cited: "And I JUST found the 'code block' feature after many months (having looked through a similar question or two)."
    – Dan Dascalescu
    Mar 4, 2014 at 9:03
  • @DanDascalescu sure, but I don't think this problem is limited to Stack Exchange. Wish I had idea how to make it more discoverable!
    – Shadow Wizard Strikes Back
    Mar 4, 2014 at 9:06
  • @ShadowWizard: I've just updates my question with two proposals.
    – Dan Dascalescu
    Mar 4, 2014 at 9:17
  • Cheers @Dan, by the way only you see the "possible duplicate" banner on top, until the question is actually closed as duplicate. We see only the auto comments and users with enough rep can see the close votes themselves.
    – Shadow Wizard Strikes Back
    Mar 4, 2014 at 9:31

4 Answers 4

Reset to default
6

Here's a radical idea for new users.

When you paste, a little message pops up suggesting if it's code to press the code button. Example:

enter image description here

The argument being: code incorrectly formated is usually (but admittedly not always) pasted from an external file.

I had made the argument that pasted text should be selected by default, but that's seen some disagreement from a UX standpoint. Selecting only on press of the code button could work equally well. If the button is pressed and no other changes have been made, then select and indent the pasted code.

As with most helper messages (such as consider leaving a comment after a downvote), this would stop appearing after some metric that the lesson has been learned.

Improve this answer
8
  • "When you paste, everything you pasted is selected." This would be extremely bad for user experience, even though it would lead to something awesome strictly when you're pasting code. (But, only for when you're pasting code.)
    – doppelgreener
    Mar 5, 2014 at 6:20
  • That's interesting you'd think that. When I paste code, the first thing I do is go and select it so I can format it as code. Which is probably a pretty significant percentage of pastes.
    – mhlester
    Mar 5, 2014 at 6:22
  • An alternative could be: if you've just pasted code, highlight that button. If nothing has been edited at all since pasting, select the pasted stuff when the button is hit. That could lead to the button sometimes magically detecting your code and sometimes not, though... so it might be a better idea just to pop this up on pasting.
    – doppelgreener
    Mar 5, 2014 at 6:22
  • 1
    Oooh, I like that idea a lot
    – mhlester
    Mar 5, 2014 at 6:23
  • I have a different experience, so I suppose that's a contributor; I format my code in another text editor, complete with the right level of indentation to be a code block. But this is also not expected behaviour for pasting, so it'd lead to me pasting, then typing, and overwriting my pasted text because it was automatically all selected, then thinking to myself that nowhere else ever does this, going back to re-paste the text, hit right, and resume writing. (I do a lot of pasting that isn't code, such as when editing a post to move things around.)
    – doppelgreener
    Mar 5, 2014 at 6:24
  • It's a good point, but you're not the target for the educating. :) The trick is of course in balancing convenience, education, and bad surprises.
    – mhlester
    Mar 5, 2014 at 6:27
  • Definitely not, but it'd get in my way. Is this stuff actually targeted only at a certain section of users, or would it affect all users?
    – doppelgreener
    Mar 5, 2014 at 6:29
  • If memory serves, there's a little more handholding at the beginning (expanded formatting help or something?) This too should disappear after the first 5-10 posts.
    – mhlester
    Mar 5, 2014 at 6:31
2

I think the best way to make it stand out and be more recognizable would be to simply make it a rectangle that said "CODE" on it.

Another option is to mention both the button and the keyboard shortcut in the "Code" dropdown that appears when you click the big "?" help button in the editor and on the help page.

Edit: An entirely different approach could be to give editors the option of leaving an instructional comment describing Ctrl+K and the button when they make a code formatting edit. The details of this would need some discussion, but initial thoughts:

  • The comment could only be given to users under a certain rep level.
  • The comment would not be customizable; it would be a canned comment.
  • An editor could mark an edit as a formatting fix; and that would trigger the comment to be made, but only if the comment had never been triggered for that post before.

A little overkill, maybe, but another possibility.

As it stands, though, I'm not sure if this is actually an issue. Plenty of new users don't format their code, but the community's edits respond well enough when poorly indented code is encountered. Additionally, you don't really see high rep users posting unindented code, which implies that everybody eventually figures it out with the current button look and placement.

Improve this answer
8
  • 7
    Changing to a rectangle that said "CODE" would make me die a little inside.
    – Jason Sturges
    Mar 4, 2014 at 7:56
  • 3
    @JasonSturges Fine. I just spent 5 real minutes of my life making a button that said "CODE" on it. It went straight to the recycle bin when I read your comment. Nobody gets to see it, now!
    – Jason C
    Mar 4, 2014 at 8:00
  • High-rep users not posting unindented code doesn't imply at all that they figure out the current button. All these years, I have indented my code manually, or copy/pasted it into a local editor.
    – Dan Dascalescu
    Mar 4, 2014 at 8:14
  • 1
    @DanDascalescu Perhaps I should have said "frequent users". But anyways, I agree that { } isn't the most obvious, and it's also not mentioned on the help pages. Still, for me at least, the thought process was "Hand indenting is inconvenient -> People post a ton of code here -> There must be a good way to do it -> What do these toolbar buttons do? -> A ha!".
    – Jason C
    Mar 4, 2014 at 8:20
  • I like the option to mention the button in the '?' help button. There's already a "Code" section there - maybe move it to the left? Code after all seems much more frequently used than "Images" and perhaps only second to "Links".
    – Dan Dascalescu
    Mar 4, 2014 at 8:20
  • @DanDascalescu I think as long as it's mentioned in the help section, it may not matter so much where the code section is. Since it's there, there's not much excuse for not seeing it given how short the help is; if the help section was longer or multiple pages, moving it would make a big difference. I'm not against it being moved, either, though.
    – Jason C
    Mar 4, 2014 at 8:22
  • @JasonC: edited my question incorporating a simple proposal with a mocked screenshot of the new toolbar.
    – Dan Dascalescu
    Mar 4, 2014 at 9:27
  • 2
    The { } button isn't all that intuitive if you spend most of your time in a language that doesn't use curly braces. lisp
    – Joshua Taylor
    Mar 5, 2014 at 18:04
0

I have seen it in some apps, can't recall which ones now.

  • The idea is to make the icon "shake" to grab attention, once the user click it no more shaking, this will make the user at least hover the mouse over the icon to check what is it for.
  • Another thing can be showing a brief balloon tooltip for the code button for new users once they click the "Ask question" button, this will give them a hint to keep in mind.
Improve this answer
20
  • Many users adds everything that shakes on them and lures them in obtrusive ways to their adblock before even thinking. That's what internet taught many of us to do... Especially if ad "masquerades" as legitimate button or message!
    – Mołot
    Mar 4, 2014 at 7:52
  • 1
    @Mołot: I think you're exaggerating. See Effectiveness of Subtle animation to draw attention. Nobody is going to ad-block a button that glows or slightly moves for 2 seconds. Also, the user profile can store that the button has been clicked (i.e. the user has learned), and never animate it again.
    – Dan Dascalescu
    Mar 4, 2014 at 8:23
  • 1
    @DanDascalescu from accepted answer: "the gratuitous use of animations and transitions can make your program distracting and even annoying." - and answer's author is talking about shake, not subtle glow.
    – Mołot
    Mar 4, 2014 at 8:24
  • 1
    I wouldn't trust a usability study by Microsoft.
    – Jason Sturges
    Mar 4, 2014 at 8:26
  • @Mołot: "Strategic use of animations and transitions can make your program easier to understand, feel smoother, more natural, and of higher quality, and be more engaging." - why do you need to focus on the negative? Have you never really seen that interaction pattern used effectively?
    – Dan Dascalescu
    Mar 4, 2014 at 8:27
  • 1
    Anyway, glow if possible code is detected in content might be a valid idea. Unconditional shakes will not convince me.
    – Mołot
    Mar 4, 2014 at 8:27
  • 2
    Definitely do not want a shaking/glowing/animated button unless it's guaranteed to never animate again after the first time I figure out what it does.
    – Jason C
    Mar 4, 2014 at 8:28
  • @DanDascalescu only in tutorial mode. But I hated when something tried to force that tutorial mode on me too hard.
    – Mołot
    Mar 4, 2014 at 8:28
  • 1
    The OS X Dock Notification icons bounce very so slightly to draw attention. And that's an Apple interaction pattern. CC @JasonC.
    – Dan Dascalescu
    Mar 4, 2014 at 8:29
  • @DanDascalescu They bounce when attention is deserved, not to remind you that they exist. One shake if you've never used it is fine. When I already know what the code button does, the attention is no longer deserved and becomes noise with no informational content.
    – Jason C
    Mar 4, 2014 at 8:31
  • 1
    @DanDascalescu Apple dock animation relates to multitasking. Document editing doesn't need animations - especially Clippy, Microsoft's office assistant.
    – Jason Sturges
    Mar 4, 2014 at 8:33
  • @JasonC: one shake is exactly what I proposed above, "the user profile can store that the button has been clicked (i.e. the user has learned), and never animate it again". It can even be triggered only if code is detected as unindented, per this implementation.
    – Dan Dascalescu
    Mar 4, 2014 at 8:33
  • @DanDascalescu In the comment I made in this thread, I pretty clearly implied that one shake was OK ("unless it's guaranteed to never animate again"). You then responded mentioning Dock Notification icons. Did I misinterpret your response as a counter? Were you just giving me an interesting FYI about Apple design patterns?
    – Jason C
    Mar 4, 2014 at 8:36
  • 1
    @MeNoTalk Given the choice between the two, I think the shake might be more effective because it requires a user to actively check it out -- meaning their attention is intentionally on the button. The balloon tip is a bit noisier and I feel it would be discarded before it is read because it is being forced upon a user who may not wish to interact with that part of the interface at that time. Plus, consider that there's a pretty low SNR on the internet these days in general, passively giving users information may not be effective, even if it is relevant information.
    – Jason C
    Mar 4, 2014 at 8:58
  • 1
    @JasonC: sorry, the Apple comment was meant for Molot.
    – Dan Dascalescu
    Mar 4, 2014 at 9:28
0

Perhaps there could be some fuzzy logic for detecting when pasted text is code. Stack Overflow already has magic formatting code that determines which programming language your code should be formatted as... why not take it a step further and:

  1. Call attention to the button after said paste; that pop-up message for low-rep users looks perfect to me.
  2. Automatically indent pasted code
  3. Maybe even fix indentation within the code

Oh, to get back the hours I spend reindenting HTML and curly-braced code...

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .