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.
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:
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:
- 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)
- Eliminate the preview, functioning the same as the mobile view (waste of the extra real estate provided by the larger screen)
- 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)
- 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)
- 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)
- Leave it as-is because it really isn't that horrible.
- 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).
- 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.