6

When a web app's master/detail grid (narrow master on left, wide detail pane on right) is not full-screen like Outlook or the iPad Mail app, but is instead embedded in a page that can be vertically scrolled, then where should the detail pane be vertically displayed when the top of the grid is scrolled off the page when a lower-down element in the master list is selected?

Should the detail pane's content be displayed above the top of the viewport, forcing the user to scroll up to see it? Or should I have the detail pane content "follow" the user as the user scrolls down until it bumps up against the bottom of the grid? Or is there another option?

The particular use-case I have in mind is a master list that will never be longer than 25 items-- long enough that scrolling to the bottom of the list may hide the top of the list on smaller browsers, but short enough that I don't want to put a separate scrollbar on the master list.

I'm sure I'm not the first person to face this quandry. What are options?

Improve this question
3
  • 2
    An example mockup and description of what your app does would be helpful.
    – user31143
    Nov 24, 2015 at 7:44
  • While you're waiting for an answer, pull your copy of Alan Cooper's About Face off the shelf and re-read the section on software posture. It will help you to understand your question from another perspective. Don't have this book? Here's some information about it: amazon.co.uk/About-Face-Essentials-Interaction-Design/dp/…
    – JeromeR
    Nov 24, 2015 at 11:21
  • Why don't you want a separate scrollbar? If you're concerned with the clutter for something rarely needed, hide it until it is needed.
    – Michael Zuschlag
    Nov 24, 2015 at 13:18

1 Answer 1

Reset to default
1

I guess, it's tough to answer the generic use case without seeing a mockup, but for the particular use-case the following comes to mind:

  • If you don't want the scrollbar in principle you will have to provide some explicit navigation for the users. They won't be pleased if they can't see how to scroll the list.
  • The biggest enemy of any UX designer is an urge to come up with new logic instead of relying on existing patterns. There are not many users who likes to learn how software works, rather than just using it. New elements/logic frequently bring more confusion, than improvement in usability.
  • That said, why not to check if master list fits the page? If it does, don't show the scrollbar. This is default behavior for most content elements.
  • If this answer is absolutely not acceptable, I would suggest something like this: enter image description here Clicking the arrows at the bottom/top, essentially, will scroll hidden items into view.
Improve this answer
4
  • "They won't be pleased if they can't see how to scroll the list" it's worth noting that not one of my OS X or iOS devices shows any scroll indicators anywhere (not till you begin scrolling, anyway)
    – Cai
    Feb 14, 2016 at 15:20
  • 1
    @CAI I'm a Mac user for many years and a big proponent of Apple's approach to design. In the recent versions of OS X it's assumed that you may scroll any content which looks scrollable to you. This why scrollbar is not displayed. However, this particular decision is quite controversial exactly for the same reason - there is no clear indication if there is extra content to scroll or not.
    – mikryz
    Feb 15, 2016 at 7:50
  • Of course - I agree - I just thought it was worth noting :)
    – Cai
    Feb 15, 2016 at 10:50
  • @mikryz My solution to this (when it is unavoidable) is to make sure that the height of the scrollable box cuts a menu item in half, clearly showing that there is more to see "below the fold".
    – skybondsor
    Mar 25, 2016 at 16:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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