7

The buttons above the post editing box on Stack Exchange sites have these tooltips:

Strong <strong> Ctrl+B
Emphasis <em> Ctrl+I

Hyperlink <a> Ctrl+L
Blockquote <blockquote> Ctrl+Q
Preformatted text <pre> <code> Ctrl-K  [on non-programming sites]
Code Sample <pre> <code> Ctrl+K  [on programming sites]
Image <img> Ctrl+G
Code snippet Ctrl-M  [on programming sites]
Schematic Ctrl-M   [on some sites]
UI wireframe Ctrl-M  [on ux.stackexchange]

Numbered List <ol> Ctrl+O
Bulleted List <ul> Ctrl+U
Heading <h1>/<h2> Ctrl+H
Horizontal Rule <hr> Ctrl+R

Undo - Ctrl+Z
Redo - Ctrl+Y

I see some issues with this text:

  1. They should not display the underlying HTML tag used to implement the formatting, because

    1. it's merely an implementation detail;
    2. it's meaningless to anyone who doesn't know HTML (these tooltips are used even on the non-programming Stack Exchange sites);
    3. it's still confusing even for people who are familiar with HTML, since we're not actually supposed to be inserting those HTML tags in the markup; we're supposed to insert Markdown (which is what the buttons actually do).
  2. "Strong" and "Emphasis" and "Blockquote" are principally HTML terms. The labels on the buttons should simply be "Bold" and "Italic" and "Quote".

  3. "Undo" and "Redo" have a dash before the key combo but none of the others does. (It's a matter of preference; I personally think it's better with the dash, but it should be at least be consistent in whether the dash is used or not.)

  4. "Preformatted text", "Code snippet", "Schematic" and "UI wireframe" have inconsistent styling: using a dash in the key combo whereas the others use a plus sign; and using sentence case whereas the others use title case. (Again it's a matter of preference, but it should be consistent.)

  5. "Code snippet" is confusing because it fails to distinguish its purpose from "Code Sample". It should mention that it's runnable, and should probably mention that it's only for HTML, JavaScript, and CSS. (I've noticed a recent trend on Stack Overflow of people inserting Java or other languages in JavaScript snippets, which is not only confusing when a broken "Run code snippet" button appears, but quietly infuriating on the grounds of correctness.)

  6. "Code Sample" and "Code snippet" are similar... but "Image" is separating them. Maybe the image button should be moved left or right one spot?

A suggested cleaned up version:

Bold - Ctrl+B
Italic - Ctrl+I

Hyperlink - Ctrl+L
Quote - Ctrl+Q
Preformatted Text - Ctrl+K  [on non-programming sites]
Code Sample - Ctrl+K  [on programming sites]
Runnable Code Snippet (for HTML, JavaScript, and CSS) - Ctrl+M  [on programming sites]
Image - Ctrl+G
Schematic - Ctrl+M   [on some sites]
UI Wireframe - Ctrl+M  [on ux.stackexchange]

Numbered List - Ctrl+O
Bulleted List - Ctrl+U
Heading - Ctrl+H
Horizontal Rule - Ctrl+R

Undo - Ctrl+Z
Redo - Ctrl+Y

Additionally, the Portuguese and Chinese Stack Overflows have their own translated tooltips, but they have most of the same issues.

You must log in to answer this question.

Browse other questions tagged .