Reinvent the List Control

June 1 2014

The Quest

Xbox One initially shipped with a horizontal scroll model. It was due to the nature of controller interaction (left and right bumper/trigger pairs), as well as the convenience of adapting to split screen scenarios.

The common list control used in system apps used 2-3 rows of fixed-size tiles. We observed the following problems:

Xbox One (2013) Collection

Xbox One (2013) Party Invite

The Proposal

My alternative list control model is one dimensional. In the case of browsing one’s collection or store recommendations, it significantly reduces the cognitive load upon the user. One just go previous(left) and next(right) and read what’s on the current focus.

By freeing up the vertical space, I introduced a jump list to help the user quickly navigate to sections of the list. It serves as header for the list items, and collapses when gets focus. Navigating downward from an item can be used for the once buried contextual actions, to remove the extra step of opening the menu.

The placement of focus is used as the knob of the scroll bar - to indicate its relative position in the list. When navigating a very long list it greatly helps with way finding. In this early wireframe the non-focus items are shown scaled down in order to display more items in one screen:

Moving Fixed Focus

The Prototype

I built a prototype in WPF to test the interactions. I found that the scaling of images when focus changed was quite jarring. Next I tried keeping the images stationary and make the tile boundaries sliding view ports into them. The interaction felt much more fluid and in control. I introduced a subtle parallax effect as the list scrolls. It looked amazing.

I tested multiple visual designs for different scenarios. With comparable scannability to the existing app, I was able to make game artworks the star and really celebrate the user’s collection. The list control also accommodate various aspect ratios elegantly, as demonstrated with movie posters and web videos.

user experience console prototype C#