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:
- Cognitive load: when browsing through contents, the user has to read in a snake path, and constantly make the decision between going left/right and going up/down.
- Traversal: some “whale” users have more than 800 games. Locating a single item in the collection is tedious and frustrating work.
- Hidden actions: in a 2-dimensional list there is no space for contextual buttons. Any action other than open/select is put into the contextual menu, which is not learned by all of our users.
- Visual restriction: we are legally compelled to display the cover assets of games and movies as-is. Using fixed-size tiles means that irregularly sized items are letter boxed. We also have to sacrefice image sizes in exchange for more items on the screen.
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:
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.