The Stack Exchange android app has a neat new feature: code blocks that are super wide get cut off, and you can tap them to pop up a code view in which you can scroll around to view the whole thing.

The problem is: a lot of people don't know about or discover this behaviour, and just get confused about why they can't view all of a code block. That's quite understandable, too — this isn't how the full site or mobile site work, and there's nothing to indicate to users that these code blocks on the Stack Exchange app work any differently to the code blocks we're all used to.

Here's some previous threads by people confused why they can't scroll code blocks:

As it is currently, this is not a good user experience.

I don't know if this is only the case because it's a beta and the android app team is hard at work getting other things working, but either way, I'm here to make a request that this be fixed.

So here's the request: please provide some visual indication of the new behaviour!

For those interested in suggesting how this can be done UX-wise: I've asked a question about it over on User Experience Stack Exchange. Direct your UX answers there where it will be voted on by UX enthusiasts.

Here's a wide code block to test with:

using System;
namespace HelloWorld
    class Hello 
        static void Main() 
            Console.WriteLine("Hello World! This line is very long, and to read it you'll probably have to scroll to the right.");
  • I've been thinking of this one for a while. I'd love some requests for signifiers to add here. The best I've come up with is showing a Toast (those short-length messages that fade in/out of the bottom of the screen) telling you tap the code blocks. How else could we visibility signify that they are tappable? Jan 30 '14 at 3:12
  • 2
    @Kasra I've asked our local UX community: ux.stackexchange.com/q/51281/3124 Jan 30 '14 at 3:27
  • @KasraRahjerdi I feel like this was answered during the alpha, but is there a technical reason why can't the code block scroll within the context of the question?
    – Steven V
    Jan 30 '14 at 4:07
  • @StevenV The question/answer views themselves are horziontally scrollable. If we add in scrolling (which I don't even know if we can or not) to the webview itself then the page would respond to horizontal scrolls from the far left pane (nav drawer), from the far right pane (inbox drawer), from the rest of the viewport (scrolling to answers) and also from directly on code blocks. Jan 30 '14 at 4:11
  • @Kasra How about a vertical bar at the right of the code block with a set of double arrow pointing right, to sort of indicate that the user can see the rest of the code to the right by clicking there? The only problem is dealing with keeping the arrow visible if the code block expands vertically past the screen.
    – animuson StaffMod
    Jan 30 '14 at 4:41
  • @animuson that could work. We might also be able to do something by playing with the border and indentations of the code, or even having a static header that says "Tap to view". Jan 30 '14 at 4:44
  • 3
    It's an app. You'd rather keep it clean and minimalistic, and attempt to use icons/patterns that are common for such patterns. Posted an answer in the UX exchange question mentioned earlier.
    – Dirk v B
    Jan 30 '14 at 5:05
  • 1
    @KasraRahjerdi I think this is status-completed now Feb 10 '14 at 7:40

You must log in to answer this question.

Browse other questions tagged .