locked
Metro dev team: Why the bias towards horizontal scrolling vs vertical?

    General discussion

  • After years of web usability gurus saying horizontal scrolling is evil (or similar) I'd be interested to know the reasons why there is so much horizontal scrolling in Metro (eg: Start Screen, Memories App, the Visual Studio templates etc), something like the recent blogs on speeding up boot and history of the Start menu would be good.

    If this info is already out there somewhere could you post a link on here.

    As


    Acer W500 tablet Ageing HP laptop Too much apple stuff
    Thursday, October 6, 2011 10:06 PM

All replies

  • Horizontal scrolling on the web is generally frowned up because it often leads to the situation in which content needs to be constantly moved back/forth in order to be read. In the case of Metro apps, you're displaying the key information on-screen and horizontal scrolling is instead being used to bring new content onto the display. It feels more natural to bring new content on from the side, as if panning over a row of information, reserving vertical scrolling for bringing up more of the content we're currently looking at, such as scrolling through a document.
    Friday, October 7, 2011 8:40 AM
  • Hi Andy,

      I oversimplified the 'horizontal = evil' guideline and you are right the real guideline is to design your page to avoid making the user pan in multiple directions to view content that can better be viewed by manipulating a single axis. 

    I initially disagreed with your 'feels more natural' comment because for me it didn't, most applications I use are geared towards scrolling content vertically: Word in print preview mode, File manager in details view, numerous IDE's, Applications using TreeView with each level of the information hierarchy expanding the list downwards, my Microsoft mouse even prefers this vertical bias due to the scroll wheel. Using W8 in 'pure' tablet mode seems to be different, navigating a hierarchy of information is done as you said by swiping sideways to see sections at the current level, tapping to 'drill down' and then sideways swipe to view the content at this 'deeper' level and so on until you hit the 'real' detail which then can use horizontal or vertical scrolling (or both) depending on the content.

      Your reply has given me food for thought and I think I need to play with some of the Visual Studio templates and populate them with recognisable content from a familiar hierarchy to see what feels natural in navigating the content. I think MS could make a few changes to make life easier:

    1. Give the user a visual clue which way the content expands. eg Start Menu with a mouse connected shows a scroll bar to indicate that a) there is more content and b) where you are in that content. Touch users only see this visual clue once they've touched the screen. I think  the Memories App actually shows the scroll bar initially (and then fades it out) regardless of being in touch or mouse 'mode'

    2. Let the mouse scroll wheel scroll horizontal content (as it does on the Start Screen) as a system wide feature (the visual studio template don't and neither do some of the sample apps eg Memories). Immediate problem with this idea is what if content can scroll in both directions, if you've shown users by example that a vertical scroll action with the mouse wheel can scroll content horizontally how do you let them know that that same action make provoke a different reaction based on context? 

    3. Give the user a visual indication how deep they are in the hierarchy, in a windows application this is the 'treeview pane', what do we have in Metro? Are Breadcrumbs the answer? if so should there be a specific (optional) UI component or should app authors roll their own?

    4. Slightly off topic but still with visual indicators/clues, how do I know (as a touch or mouse user) that there is an app bar available if I swipe up / right click? I'm fine with the charms menu not having an indicator as its 'always there' swiping from the right edge always brings up the charms it is a constant action/reaction across all Metro apps. Not all apps have a toolbar (sorry App bar) and the sample templates are worse in that some screens within the app do have an app bar but others don't, as a user I have to remember if screen x in app y will show me anything. A couple of times I've tried the up swipe a number of times never sure if I've just swiped too fast, missed the target area for swipe or that there simply is nothing (ie no app bar) available for that screen. I shouldn't have to perform an action to find out if there is a reaction available.

    Interesting times eh, and I'm loving it

     


    Acer W500 tablet Ageing HP laptop Too much apple stuff
    Friday, October 7, 2011 11:55 AM
  • Here is an interesting discussion of the AppBar issue:

    http://social.msdn.microsoft.com/Forums/en-US/winappsuidesign/thread/29f748b7-cba2-4a86-88ea-fd00479edaf0

    Feel free to jump in there and read what we are discussing.


    Jeff Sanders (MSFT)
    Friday, October 7, 2011 12:33 PM
    Moderator
  • 1. Completely agree on that one, with Windows Phone you can often see a little bit of the next "page" of content. I think it would defintitely be a good idea to replicate this in the Visual Studio templates.

    2. Again, I completely agree. If they're going to use the scroll wheel on the Start screen it really should behave the same.

    3. Hmm, not sure about that. Breadcrumbs don't seem very "metro" either, but then it depends to some extent on the application I guess. Let's hope Microsoft can give a bit more guidance on that.

    4. My personal opinion on that is that there should always be an app bar regardless of where you are in the application. Even if it's empty, you'd get a much more consistent user experience to see an app bar rather that it just not being clear whether or not the system is responding.

    Friday, October 7, 2011 12:43 PM
  • cheers Jeff, I started that thread too. I've just gone off topic on this one.

    Any idea how we get this thread changed from a 'question' to a 'discussion' as that's the way it seems to be evolving.


    Acer W500 tablet Ageing HP laptop Too much apple stuff
    Friday, October 7, 2011 1:50 PM
  • Discussion it is!
    Jeff Sanders (MSFT)
    Friday, October 7, 2011 2:08 PM
    Moderator
  • 1. Have you got a WP7? If so, has that eased your transition to Metro?

    2. :)

    3. Was just thinking aloud and I agree breadcrumbs is probably not very Metro. How about some form of popup that shows a graphical representation of your hierarchy with your current location highlighted or maybe I should leave it to MS to come up with something.

    4. I came to the same conclusion in the other thread Jeff mentioned


    Acer W500 tablet Ageing HP laptop Too much apple stuff
    Friday, October 7, 2011 2:15 PM
  • Yeah, I've been both a WP7 and Zune user for ages. Being exposed to Metro style things on a day to day basis certainly helps get a feel for what does and doesn't work so well I find. As far as a graphical pop up goes, it might work. Probably just one of those things you have to try out and see.
    Saturday, October 8, 2011 1:19 PM
  • Definitely coming a little late to this party, but if you're looking for UX perspective on horizontal scrolling this should help show some pros and cons and some good examples A UX perspective on horizontal scrolling
    Thursday, January 5, 2012 3:32 PM
  • Interesting topic. We have the same debate in our team today. Still couldn't figure out why it has to be horizontal scrolling in Metro. I'm wondering is there any chance we can get Metro UI/UX team to explain their thoughts about this? :)
    • Edited by JPinNY Tuesday, February 21, 2012 5:58 PM
    Tuesday, February 21, 2012 5:57 PM
  • One benefit of horizontal scrolling is that if you're using a touch screen in the "two thumbs" posture, a free-scrolling horizontal canvas allows you to reach anything by just "throwing" the view and "catching" the item you want with your thumb when it nears an edge of the screen, without having to move your hands out of position to reach into the center of the screen.

    +1 for having horizontal scroll with mousewheel work on desktop too though.
    Monday, March 5, 2012 1:28 AM
  • One problem with horizontal scrolling is that a horizontal flick is far more awkward than a vertical flick.

    A vertical flick requires just a finger motion.

    A horizontal flick requires wrist and finger.

    Also the implementation of the horizontal scrolling violates the multiple panning rule in the sense you that following the content on most of their pages requires at least one extra level of direction change from what most users have to deal with. This in turn results in an uncomfortable broken rhythm when trying to access the information.

    For most languages, we read either left to right or right to left.

    At the end of a line we go down and left in a straight line.

    So the pattern is L->R; D->L; L->R; D->L; and then as we run out of information we go Down a large amount.

    With horizontal scrolling, if we wanted to keep it as simple as vertical scrolling we would read a line either top to bottom or bottom to top, and then move left or right.

    But since the languages are still written horizontally, we have

    L->R; D-L; for a bit then; U->R;L->R;D->L; for a bit; then BIG D->L; and then repeat the L->R; D->L; a few time; And repeat until we hit the bottom. Then rather than following the major rhythm now established of of moving down for a new larger block of information we add yet another change to the rhythm, of a very big Up and to the Right.

    Horizontal scrolling is not inherently bad, but the implementations we see are all overly complicated and uncomfortable because they prevent the user from being able to comfortably establish and maintain a set pattern for accessing the information.

    And in addition to this, one of the simplest gestures we use to scroll pages with touch if less comfortable to use. One a tablet, at least a horizontal flick isn't too much more of an effort, but on a touch screen laptop a horizontal flick results in some uncomfortable feeling of having to reach across the screen and keyboard in order to flick to the side.

    Overall I can't help but see the whole horizontal scrolling as a mistake probably motivated by an attempt to differentiate the products from current mainstream rather than as an attempt to implement improved usability. If it were to establish a better pattern of usage we would see much more significant changes to the presentation of the information than what is present.

    Sunday, June 8, 2014 12:10 PM