2

I'm developing a small/simple/personal blogging system with the goal of having an uncluttered, clean admin interface with no unnecessary styles or elements that is equally usable on a mobile device as it is a desktop. Developing for mobile first, the mobile pages display a list of posts that, when clicked, navigate to the post preview page. Here are the screen shots of those two pages.

mobile

As you can see, they keep the clean, uncluttered interface. The entire page content is scrollable and when on a phone/etc. that scroll bar typically doesn't appear until you swipe which keeps the page even cleaner.

When on a desktop, I would like to take advantage of the extra screen size to show the post preview without navigating away (and because a page of just post titles and statuses would be extremely bare--a little TOO uncluttered). Here is what that looks like:

desktop

It does not necessarily look bad, but I do not really like the scroll bar in the middle of the page.

My question is what options do I have to unclutter this combined list/preview page on larger screens. I came up with a few options, none of which I particularly like:

  1. Hide the center scroll until the user hovers the list (not intuitive--would only know scrolling is possible if happening to mouse over that area)
  2. Eliminate the preview, functioning the same as the mobile view (waste of the extra real estate provided by the larger screen)
  3. Add more data to the list view so that it is required to take up the whole screen, forcing the same-as-mobile functionality (adding clutter just to avoid other clutter seems ridiculous)
  4. Paginate the post list so it doesn't scroll but has next/prev buttons (would have to change the number of posts per paginated page depending on screen size which, while not impossible, would add way too much unnecessary complex logic that I don't want to maintain)
  5. Ditch the idea of a list altogether and have the index page be a grid of boxes with post title and status (think Pinterest but with each box being a link to a post)
  6. Leave it as-is because it really isn't that horrible.
  7. Put the content from all posts into the preview pane, and make it a huge scrollable area. Scrolling down through previews will eventually take you to the next post preview which will highlight the item in the list. Conversely, scrolling through the index, scrolls the preview pane (albeit at a much higher speed). (complex to implement, not very intuitive at all).
  8. Customize the style of the scrollbars so they aren't as noticeable until hovered. They will always be present, but only in-your-face if you hover that area, similar to the scroll bars in Gmail (less intuitive, but better than nothing). But, is it acceptable practice to change the default behavior a user expects? I.e. modifying the expected scroll bar?

I keep using the word clutter, but in all honestly, if it increases the usability of the page, it's not clutter. However, I just want as little as possible between the user and their content. Be it scroll bars, paginated links, extra buttons, whatever. I'm not great at the whole UX thing (I can write the technical parts, but am horrible at designing something that looks good) so my hope is that someone reading this has a great idea for me.

closed as primarily opinion-based by Devin, plainclothes, msp, Ben Brocka Apr 5 '16 at 13:41

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

2

Perhaps the biggest problem (personal opinion approaching) is that both scroll bars are the same.

So one solution could be to make them different, and provide a different background for the Posts (left hand column) so it's also differentiated.

But, my way, would be to take a leaf out of the approach of Sublime, and make a representation of the entire document on the far right hand side so that you're giving the writer/reader/editor a very good idea of where they are in the document.

See the far right column representing the entire document in this image:

enter image description here

I'm not sure why no text editor has this feature, as it would be incredibly powerful and a wonderful point of difference for anyone making a longish document.

Alternatively, you could do what Autodesk has done, and say "to hell with it, we'll have MORE!

enter image description here

  • Autodesk, so many scrollable areas! I do like the idea of perhaps differentiating the scroll bars. Maybe not quite to the point of showing the entire doc in the scroll bar, but just something to separate them. I'm going to update the question to add a 7th option that this made me think of -- Make the post preview on the right actually a long list of all of the posts one after another. Clicking a link simply takes you to that spot in the preview pane. Then there is only one scroll, and it moves you through the index and preview at the same time. Also not intuitive, but a possibility. – justinvoelker Apr 4 '16 at 18:30
1

Your current layout is very similar to the web version of iCloud Notes. Apple hides scrollbars until the content is scrolled. With vertical content, especially lists, it is often assumed that the content is scrollable. If you feel it is still missing enough visual cues, you could fade the bottom of the list to imply that the content extends beyond the box.

  • this is a device-centric suggestion that only Apple users will understand. Furthermore, we have ran extensive testing on this hidden scrollbar behavior and not even Apple users get it all of the time, and when they get it, reaction times are up to 500% slower than with visible scrollbars – Devin Apr 4 '16 at 18:29
  • Thanks for the thoughts Devin. I wonder if there is a middle ground (new option #8 in my question) to leave the scroll bars always visible, but style them such that they are not such a stark contrast to the simplicity of the rest of the page. For instance, may them a light grey by default then darker when hovering that section. – justinvoelker Apr 4 '16 at 18:36
  • Also, Eric, I definitely like the idea of fading the bottom to indicate continuation. Regardless of the scroll solution, I think the visual cue could add to the idea that there is more below. – justinvoelker Apr 4 '16 at 18:38
  • I have answered a similar question at ux.stackexchange.com/questions/91200/… – Devin Apr 4 '16 at 19:42

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