5

Disclaimer: I'm cross-posting this question from Meta SE to get input from the UX fanatics here.


I've seen people complain about not been able to use TAB to format code in SE. There are many fixes such as:

  • format code in a text editor, then insert
  • use CTRL + K
  • use SPACE x 4 newb

The request to implement tab formatting functionality has been denied by SE, and refuted on the claim that this would damage TAB's native functionality in the browser.

As a developer who focuses on UX, I disagree, on the grounds that I believe that when editing code, TAB is expected by most users to create a tab, not jump to the next element in the page.

Do you think that giving TAB formatting functionality will improve UX?

2
  • Should this be on the UX Main site? Jun 25 '14 at 4:14
  • 2
    I've moved this to the main site. While it is about Stack Exchange software, the general concept and answers are going to be about the User Experience practices, and therefore useful to a wider variety of people outside of just those interested in how Stack Exchange operates.
    – JonW
    Jun 25 '14 at 8:27
4

I suggest enabling TAB's formating <code> between code tags. </code>


<code> If I were to hit TAB now, it would result in 4 spaces. </code> But not outside of the tags.

Advantages


  • Avoids a keyboard trap. Impaired users can easily avoid using <code> tags, and if they do use them, navigating away from them can be done with arrow keys.

  • It doesn't affect the editor's primary functionality. It targets users who have searched the tab issue and found that tabs work for formatting! <code> between code tags :) </code>

  • The code for the feature is actually simple and fairly short. it can be done in just 365 characters [365 bytes]. Credit 100% to dandavis for this solution.

Try Before You Buy


Go ahead. Put it into the JS console of any Stack Exchange question page, and <code> use tabs between code tags! </code>. Or try the JSFiddle.

$("textarea").keydown(function (e) {
    var t = this.value,
    n = this.selectionStart,
    r = [t.slice(0, n), t.slice(n)];
    if (e.keyCode == 9 && t.indexOf("</code>", n) != -1 && t.lastIndexOf("<code>",
    n) != -1) {
        this.value = r.join("   ");
        this.selectionStart = this.selectionEnd = n + 1;
        e.preventDefault()
    }
})
1
  • I didn't really think about it, but I didn't format my answer to fit the question. I just posed a solution.
    – user46819
    Jun 27 '14 at 1:19
2

I believe the primary reason for browser tabbing through elements is for keyboard/non pointer device users. How would these users navigate out of code area if traditional browser tab functionality was taken away?

Would it be possible to use a key combination along with the tab key to insert tabs? (alt+tab?)

Obviously the solution would need to be validated to make sure it doesn't clash with any browser defaults for other actions. For example shift+tab typically moves back through tabbable elements.

3
  • Make tabs work as 4 spaces between <code> tags. No one needs to or commonly uses the code tags. 4 spaces or back-tics cover code normally, but if a user finds himself wanting to write a fairly detailed code example, he can set up code tags.
    – user46819
    Jun 25 '14 at 11:33
  • The code required to do this is actually fairly simple and short.
    – user46819
    Jun 25 '14 at 11:37
  • Not really alt+tab switches to the next open window, ctrl+tab switches to the next [tab] and you already mentioned shift+tab Mar 26 '15 at 9:59
1

Yes, giving Tab functionality what it is expected to do would improve UX. If someone is explicitly editing code they would expect that pressing Tab will do a tab indent, or 4 spaces instead of tabbing over to Post Your Answer. They might Tab and then press Enter for a newline, and then instead of doing that, I'll posted my unfinished answer instead.

Tab Mockup Comparison

In the rightmost one, I'm writing code in the editor (I forgot to add code tags in this case, but it doesn't matter), and if I were to hit Tab, and in the middle of me attempting to type code, it goes right down to the Submit Answer area.

In the leftmost one, I am writing code, hit Tab and it doesn't interrupt my flow. The only problem is that you have to click the Submit Answer button, but I've always clicked it with a mouse, as it interrupts me and makes me think if I answered it to the best of my ability (which in SE's case, is usually a good thing). Plus, I get to tell everyone about the awesomeness of jQuery.

2
  • 2
    This is really just your individual opinion. You mention a lot of 'I' and 'me' here, but you are but one person. A small use-case that involves you writing code in a text field is made slightly less convenient because you can't use the TAB button in the way you can in a dedicated editor application. What about all the other web users out there? The users who browse with keyboard only? They'd be stuck in that text field forever! And those who require screen-readers to access the web? How would they know what's going on?
    – JonW
    Jun 25 '14 at 8:31
  • @JonW [Shift + Space] == Space x 4 -- What's the harm in that?
    – user46819
    Jun 26 '14 at 22:53
0

The key combo Shift + Space does the trick


See the feature request on Meta SE.

While using <code></code> to target the tab easy formatting is a bit rough around the edges, I think you'll find that Shift + Space offers a shortcut that appears to have no downside.

Advantages


  • No keyboard trap. It doesn't affect Tab Order in any way.

  • Doesn't break anything. No native functionality in any browser nor OS (that was the issue with Alt + Tab in Windows 8) uses this key combination.

  • Doesn't require an interface change. This solution is silent, and therefore can be utilized by anyone who wishes to use the functionality without bothering anyone who doesn't.

  • The code to do this is minimal. Like my other suggestion, the solution is barely over 300 bytes added to the site. Again, credit to dandavis for this code.

Try Before You Buy


Go ahead. Put it into the JS console of any Stack Exchange question page, and use Shift + Space for your formatting tabs. Or try the JSFiddle.

$("textarea").keydown(function (e) {
    var t = this.value,
        n = this.selectionStart,
        r = [t.slice(0, n), t.slice(n)];
    if (e.shiftKey && e.keyCode == 32) {
        this.value = r.join("   ");
        this.selectionStart = this.selectionEnd = n + 1;
        e.preventDefault()
    }
})
0

Vision impaired users need to be able to tab to different navigation points (most would like to submit their answer after typing it in), so no this should not be the default setting.

Using other key combinations like: shift+space or ctrl+K is not widely standardized but easy to learn and would not hinder keyboard navigation, so this is a good compromise for a default setting.

For sites in SE (or any site with user configurable settings) the tabbing behavior should be configurable in user settings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.