When is tablet-style paged horizontal navigation appropriate on the desktop browser?

Question

Background:

I am contributing to a dashboard-like browser application where current thinking is to use a tablet metaphor. The viewport is fixed aspect ratio (1024x768 that scales with a 1024 width minimum). Multiple pages of the dashboard are paged horizontally like on a tablet with the ‘little circles or dots’ indicating what page you are on. When you click or tap one of the elements the item expands to a full screen view. The majority of our users are using this application on the desktop in the browser. Here is an example of the structure:

This feels wrong to me, forcing the tablet metaphor onto the desktop, which has a different set of constraints. I want to scroll vertically. I want to expand the height of my browser to see more content, not to be forced to a specific aspect ratio (the content is chart and image heavy, they scale when you change the browser window to keep the tablet aspect ratio). This is just my subjective opinion, it’s not based on anything other than gut feel for what is the best experience.

Question:

Is there documentation, research, or accepted best practice that suggests whether this approach (I.e. adopting tablet metaphor on desktop right down to forcing the aspect ratio) is valid, and/or when it is appropriate?

Answer 1

Personally I think you shouldn't use a Tablet metaphor on desktop. First of all a Tablet is not a desktop and neither used like a desktop. There are different guidelines for designing a desktop or tablet application and they do not exist without a reason.

If you still think that using a Tablet metaphor on desktop is the right thing, look at Microsoft Windows 8. They tried to make a sort of Tablet interface for desktop. I find the interface quite inefficient. Maybe you could learn from their insights & faults and create something better for your application.

Answer 2

While there is some precedent for this type of design on the desktop (think OS X with Cover Flow), it may not be that useful or user friendly. I know that when I'm on my Mac I barely use Cover Flow and when I do it's for a very specific function like scrolling through a list of photos to find the one I'm looking for.

The biggest problem I see with this design on a desktop, especially a webpage, is the ability of this type of interface to be "useable". If a user has to click to go to the next page of the "flow" it seems to be inefficient. If the user could use a scroll wheel to get to the next part of the flow, then that may be more useful.

What is more valid on a desktop would be a simple long list or even a paged list that supports infinite scrolling.

Some designers are suggesting a "mobile first" approach, that is, designing for smaller form factor devices and then moving up the ladder as the screen size gets larger. But that doesn't mean pushing the tablet or phone paradigm to the desktop. It means starting with a simpler more fluid interface and then building up rather than down.

I think that the acceptance of using a touch screen on a desktop computer is something that a very small number of users would even want making this type of interface not very useful on the desktop.

Answer 3

Good question. Firstly, I don't think the aspect ratio shouldn't be locked. If you look at a lot of websites nowadays, they automatically resize to fit the screen you're looking at it on, whether it's a 24 inch monitor, a 7 inch tablet or a 4.5 inch phone.

If you can scroll sideways with the mouse wheel or touchpad, then I don't see any other issues really (although that perhaps could do with a visual clue). Or if not, large arrow buttons near the sides. As long as the user isn't forced to click on the tiny circles.

Contrary to Marijke's opinion, I think that some designs can work across several form factors. I take no issue with Windows 8(.1) on a non-tablet computer, other than the discontinuity between 'Metro' and 'Desktop', perhaps.

I'm not sure if there's a best practice, but I hope that my opinion helps at least.