Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

In case you're unaware, there's now an official Stack Exchange Android app. With it comes some new behaviour for code blocks: you can tap them to pop them out and view them in a sorta-full screen view.

If a code block is especially wide, it's cut off and can't be scrolled around. You have to pop up the code block this way to scroll around and view the whole thing. This is useful, but it comes with a usability problem I'll get into further down.

Here's a couple of screenshots. Left is a code block; right is the same code block popped up and scrolled over a little.

an post with a wide code block that's cut off the same code block, expanded

The problem is: this is confusing to people using the app, because they don't expect that this is possible and nothing actually communicates that they can do it. Plenty of users have simply assumed there is no way to view code snippets that get cut off. I've written a request about this on Meta Stack Overflow (which these screenshots are from).

How can the Stack Exchange app communicate that these code blocks can be tapped?

share|improve this question

1 Answer 1

A full-screen icon floating in the bottom right or top right margin will do just fine.

This is the place where 90% of all movie players have it too. And a lot of lightboxes mimic this. If you care for big well-known sites, Youtube has it on videos, and so does Facebook (images).

It's generally a square with a small arrow in it, a bunch of corners, or maybe some arrows pointing all directions.

Here's a quick mockup just to get the idea across, I'm sure you can improve on this when it comes to style, positioning, etc.

enter image description here

Maybe make it look more clickable by making it look like the app. Another quicky:

enter image description here

You could easily come up with a minimize icon as well for when the app hits full-screen.

Alternatively

Alternatively, you could just add a link. Be it a word or a button, inside or outside the area, that says "full screen", "expand", "maximize" or the like.

Disclaimer: I've only installed it today and played around with it for like 5 minutes, so it's hard for me to give you a definitive fitting answer. Whatever the choice, just think about what pattern would fit best with the rest of the app.

share|improve this answer
    
This is a great suggestion! I was thinking if it was for a picture or video there could be a big play button in the middle of it but that would be way too intrusive in this scenario, a small icon to the side would work though. –  Kasra Rahjerdi Jan 30 at 4:12
1  
Since long code cannot be viewed without a click, the user should have an indication they're looking at a preview only.so I suggest:1. if code is too long, slightly gray it out and super impose your icon larger on top of it (centered), 2. if code is narrow enough and short enough that it's not cut off, just show that without the icon or graying out –  Don Rhummy Feb 1 at 20:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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