I'm designing a feature for a product, which is going to bring down a panel that contains a list of virtual machines. The user will use this panel frequently to - start, stop and deploy services into production.

There can be 10 ~ 10000 virtual machines. There will be default toggle buttons and text fields to sort amd filter the list

Things I need an opinion on (based on proven experiences)

  1. Slide over page content Vs. Push down the page content to revel panel
  2. Use of Horizontal Vs. Vertical scroll-bar / scroll to navigate through the huge list of VMs

Below is the design of the panel


download bmml source – Wireframes created with Balsamiq Mockups

  • Which actions supposed to do within the panel? Current design seems like an observer tool. Does a service run on several VMs and the panel is tool for manage it across VMs? Nov 24, 2013 at 10:01
  • The current panel lets the admin / user deploy instances or start and stop it. This both an observer and micro management feature. The action commands are brought up on mouse over or a gentle tap on the instance tile. one more important thing - this panel should be available as a part of the global navigation in the portal.
    – Rayraegah
    Nov 25, 2013 at 0:22

2 Answers 2


Slide over page content Vs. Push down the page content to revel panel

Hiding content is generally not good. You are deciding that VM list is "less important" then the other content, by hiding it, until a use clicks on it at which point it is the "most important" thing. Which is it? If it isn't important enough to show right away then you should not demote existing content.

Tooltips and popovers hide content, yes. But they are small areas that are used to extend upon an action currently being taken by the user. They also do not cover complete areas of content -- the user can also see that something else is down there, and they can easily eliminate the popover to get to it.

Perhaps it works better on a different page? More space is available to dedicate to the list and the user is focused on the list -- not what surrounds it. If you are willing to hide content then dedicating a page to the VM list does not seem a loss of functionality or awareness to the user.

Would a user want the list of VMs open, and take action on something they can no longer see now? Having a user select something, close and then take action on something now hidden (something they now have to keep in their own memory) is another reason to avoid hiding content.

Another choice is not to hide the VM list at all! If it is important enough to remain on the page with other content, and that content is important enough not to be hidden, why can they not coexist? The content and the application may benefit by always being present where the user can reference it.

Use of Horizontal Vs. Vertical scroll-bar / scroll to navigate through the huge list of VMs

Vertical. Better yet, pagination - especially if we're talking thousands of entries.

Horizontal scrolling is not the general model users have when moving through content. Having some content scroll vertically and some horizontally will cause confusion and frustration. One reason web carousels tend to grab attention is because the content is moving along an alternate axis from rest of the page content (other times, they're just too big and obnoxious not to miss).

Another issue with horizontal scrolling is browser gestures (you don't mention if this is a web or desktop app). Some browsers support swipe gestures to navigate in history forward & back -- two fingers left/right on a Mac, for example. These same gestures are used to navigate left & right in a horizontal scroll region.

Horizontal scrolling can work, but I find it works best for a little "wow" factor. Moving content along the axis the user does not generally expects lets them have a different experience, but what that content is is key. Large lists are not in that category. Additionally, I tend to move my horizontal scrolls in pages (this carousels again) - where all the visible content moves off to reveal a new page of information... and I provide buttons to do it (thus removing those browser gesture issues I mention above).

But one issue with using vertical scrolling in your case is (I'm making an assumption) you will two vertical scroll areas -- your primary content and this list. Depending on where the mouse is different content will scroll when move the mouse wheel.

Lots of places do this. I'm typing in an independent vertical scroll pane now. It is something users are generally familiar with, but that doesn't stop it from being really annoying when I want to scroll one set of content and the other scrolls instead.

Placing your VM list on a different page, or using pagination can help remove some of these issues. Show a certain number of entries per "page" and provide a mechanism for the user to move to the next "page". Providing sort options and filter options (looks like you do) to help the user rummage through the content.

  • So many useful points from your reply. Here are some clarifications from my side: The panel is a part of the portal's global navigation feature. The users receive notifications, upon certain notifications - they are required to bring down the VM panel (which is opened with different parameters each time) quickly browse through the content and take action. Its a part of an existing feature, which is being redesigned to be more user-friendly. Placing the VM list on a different page was an option 2 weeks ago, but it was discarded (technical architect's decision).
    – Rayraegah
    Nov 25, 2013 at 0:30
  • The panel is a resueable UI component, its title changes and the content on tile also changes from VM to Compute or profiles based on the parameters supplied to open it. The interaction remains the same, the content changes.
    – Rayraegah
    Nov 25, 2013 at 0:36

Providing too much information with matrix view, as in your panel, makes it hard to process it. The reason is there is conflict of view patterns: per-row or per-column. So there could be a risk of loosing eye-view path, see the image.
enter image description here

You could see how Amazon organizes information for its hudge number of servers:
enter image description here Source
enter image description here Source

So, per-row view with vertical scroll is more convenient and preferable option.

Also as the panel assumes rich interaction (search, filter, stop, run, deploy, etc.) I'd recommend to isolate it from other content. If separate page is not an option, pop-up window could be used.

I don't know the specific, but I think in many cases you are not interested in low-level data of which server to run or stop, you primary interest is the amount of running servers and spended money. In this case you could switch to more simple panel.

Your Answer

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

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