23

Could we please revamp the editing toolbar to make it easier to use the correct code formatting tool?

In case you are not in the editor right now, here's what the toolbar currently looks like:

Screen shot of editing toolbar

Examining the icons starting from the left, the "bold" and "italic" group is easy to understand if you have ever used an editor before, the next group of icons starts with fairly standard "insert a link" and "insert a quote" icons. The next one in there is fairly nondescript, then there's one for "insert image", then there is one which looks like "insert code".

See what I did there? The placement of the "snippet" tool at the far right end of this group makes it stand out, and arguably obscures the existence of (let alone then preference for) the regular code formatting tool. The vastly different icon designs is also problematic -- if they were next to each other, and looked at least vaguely similar, it would be easier for someone to notice that they are related. As it is now, you look for "hmmm, which one is code formatting?" and find one which apparently does what you think you want, then you conclude your search.

The tooltips help, but only to a point. The basic problem is that you have to know there are two different tools in order to be able to decide to use one or the other.

Here is a quick mock-up of a revised design, where the regular code tool gets the prominent "edge of group" placement, and an icon which is more similar to the snippet icon.

Revised toolbar with icons shuffled, code redesigned

I kept the curly braces, but I'm sure somebody with more time and design experience could improve on this.

Vaguely related: Stack Snippets and non-runnable code

14
  • … Why is this not already a thing!? Commented Sep 20, 2016 at 8:11
  • 6
    ... And don't get me started about icons-only designs; they should be banned, actually.
    – tripleee
    Commented Sep 20, 2016 at 8:13
  • 1
    Also related: meta.stackoverflow.com/questions/271647/…
    – tripleee
    Commented Sep 20, 2016 at 9:09
  • 1
    Deleted (requires 10k+) but conceptually identical: meta.stackoverflow.com/questions/292421/…
    – tripleee
    Commented Sep 20, 2016 at 9:11
  • 7
    Oh, please make the icons more different. I know you want to keep similar things similar, but having the two icons more or less identical (and next to one another) would just encourage more people to use Stack Snippets for C# code... Commented Sep 20, 2016 at 14:24
  • 1
    @MikeMcCaughan This is just a mock-up; I agree that the icons should be distinguishable even at a quick glance even if your vision is not 20/20. A speck of color in the code formatting icon could help make it more enticing, although the group edge position seemed to myself to be sufficient to point to it as preferred. I'm sure the design people will be doing some A/B testing once they have some proposals to work with. Until then, more comments and ideas are certainly most welcome.
    – tripleee
    Commented Sep 20, 2016 at 14:40
  • 3
    Use a cloud for stack snippets? Commented Sep 20, 2016 at 15:16
  • @Yakk: How about an exclamation mark (for runnability), or perhaps a radioactive warning sign (for stacking unstable material together to reach critical mass)…. Commented Sep 21, 2016 at 0:41
  • 2
    Is it a bug though? Sounds more like a feature-request.
    – user692942
    Commented Sep 21, 2016 at 9:13
  • @Lankymart Tomayto tomuhto -- the bug is that people are using the Stack Snippets button when they should not. There is no new feature here as such, just an implementation detail to better guide new users to use the right feature instead of the wrong one.
    – tripleee
    Commented Sep 21, 2016 at 9:19
  • It's really more a usability issue rather then an actual bug. I still think having the two icons looking more similar will just confuse people further, if it was me I'd have one button and offer them a choice of code block or stack snippet (with a little explanation next to each option) in a popup overlay.
    – user692942
    Commented Sep 21, 2016 at 9:38
  • 2
    If we are to re-order the icons, I think insert image should be right after insert link, as they are more closely related (you often see people inserting links instead of images), whereas insert quote is more closely related to insert code (you often see people inserting quotes for e.g. console output).
    – Didier L
    Commented Sep 21, 2016 at 9:50
  • 1
    @tripleee: If we're talking semantics: User error isn't a "bug". It's a mis-used feature. A feature which works as it is designed. I'd go for feature-request
    – Cerbrus
    Commented Sep 22, 2016 at 8:02
  • I don't have a strong preference either way. Something was implemented but doesn't work as intended, that's a bug (though more of a graphical design bug than a code bug). Something needs a change, that's apparently a feature request, according to the tag description. There is significant overlap here. To my mind, a feature request sounds like significant effort, while a bug report is more suggestive of the actual amount of work here.
    – tripleee
    Commented Sep 22, 2016 at 8:25

0

You must log in to answer this question.