1

We have a screen as below that has a long left navigation list that spans the whole height of the page and is scrollable (a lot of rows).

We also have an info panel that is basically tabular data. We want to show more columns but are basically horizontally constrained without moving the left navigation somewhere.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The obvious way is to move the left navigation to the top or bottom of the page, or perhaps even making it collapsible. If we want to avoid a collapsible navigation, I'm not quite sure about the usability of a scrollable horizontal navigation list.

mockup

download bmml source

  • does clicking a left nav item display the table to the right? Assuming the content pane (the table) displays the events details. – Mike M Jul 20 '17 at 3:02
  • @MikeM That's correct. Clicking on an item on the left changes the view on the right. – Jun Wei Lee Jul 20 '17 at 3:46
  • okay. Since you have a timeline going here, is there a master date picker somewhere else in the screen? Is this a view for a single day period, with multiple events in the sidenav? – Mike M Jul 20 '17 at 3:51
  • What are the values of X in the main screen? You have it in a darker grey but it just says 'data' like other values. – DarrylGodden Jul 20 '17 at 7:00
  • @MikeM The timeline shows all possible navigation options, up to say 5 days in advance (could have 200 rows). We could add some filters, one of which is the date (e.g. only show the 70 happening on the day). – Jun Wei Lee Jul 20 '17 at 14:37
3

Try keeping the scope of items to a single day, and use a horizontal day timeline to hint at volume of upcoming (and past) events with badges. Pair this with a narrower event sidenav (see below) and if need be, responsive tables.

If you have more than 5-10 events a day, a horizontal scrolling event timeline selector will be unwieldy, hard to read more than a handful of events, and push down your vertical space.

Here's an interesting Neilsen Norman article on caution of scrolling, vertical and horizontal.

It sounds like you have some days with a huge number of events, so you'll have some days w/ a sidenav and no scrolling, and other days with overflow.

I admit I don't have anywhere near the info you have, but I took a wild shot at it below.

enter image description here

  • I built some redundancy into the UI, especially to account for an item you may have selected in the sidenav, but is scrolled out of view temporarily.
  • Units of display are always scoped to a day, with badges in the top day timeline so you can get a glimpse of upcoming volume.

  • The sidenav time and label is stacked; it increases the vertical, but keeps it narrow to minimize horizontal space, you can use truncation as well (even as few as 15 characters depending on the event average title), since when you select an item, it's title (and time) is repeated above the content pane data table.

  • You can make a sticky bottom div shadow to indicate overflow items. See sidenav overflow.

  • Prev / Next controls on the right of the content pane header allows a user to quickly step through the days items without scrolling or moving the mouse. This could allow you to make a collapsible sidenav, since you know the Event title and time, and the badge above says the number of items in the day.

  • 'Jump to date' would pop a calendar for quick navigation.

  • Past days in the top timeline can be subtly grayed down to show they are historical items.

  • If you need to see 'empty' time slots, you can treat it like a calendar view, in which the content pane when selected on an empty time slot, allows you to add an event directly (not sure if this is part of your requirements).

  • You can use some responsive data table patterns to fit more columns in the viewport.

  • I like your ideas. I think the real winner would be re-jigging the side nav to stack some info. It'll give us width and the extra vertical space means we can show less events, but that's a very good trade off. – Jun Wei Lee Jul 27 '17 at 12:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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