User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm building an Application for mobile device that needs to display an Elimination Bracket for a tournament (16, 8, 4, 2, 1)

enter image description here

I haven't seen any application doing something similar and I'm "jammed" there..

I tried many ways to display by doing multi-levels tables but it's not intuitive. The best way I've found so far is to display a view larger than the screen and move it around with swipes (UIScrollView in iOS) zooming in with pinch gestures.

I'm looking for inspirations in application that may already implement something like that or a new way to display the data.

share|improve this question
Nice question! Do all the eliminations happen on one lever before moving to the next? Frist 16, then 8? – Benny Skogberg Apr 4 '12 at 4:37
Benny, yes, all the eliminations happens on the first round before going to the second round. – Benoit Lefebvre Apr 5 '12 at 0:37

In this case it is possible to use ideas from Windows Phone 7 Panorama layout where the user swipes left/right to go to the next level like this:


download bmml source – Wireframes created with Balsamiq Mockups

The red lines marks the different screens available. When a user swipes to the next available screen it is snapped in a fixed position avoiding the free motion. This improves the user experience since users need not to worry about how to position the screen. It would most certainly require som advanced programming, but it might be worth it?!

  • Dispaly 8 competitors at once.
  • Shrink elimination chart to fit screen from level 2 (8 competitors) and up.
  • Display visual keys for previous and next level (if exists).
  • Enable zoom out/zoom in. The user would probably like to see the whole elimination chart at once. On doubleclick - show the selected screen.
  • Use style to match iOS guidelines.

"Screenshot" of zoomed in (shrinked) screen on level 2:


download bmml source

Example of Windows 7 Panorama:

Exampel of Windows 7 panorama

share|improve this answer
Here is what I've done. It's similar to what you're suggesting but I find it non-intuitive.. I wonder how users will see that interface – Benoit Lefebvre Apr 5 '12 at 0:44
@BenoitLefebvre: The main thing you're not doing that Benny is recommending is that the interface should snap to each individual "level" of the interface, instead of allowing completely free motion. Each column in the interface is vertically scrollable (only to the bottom of its content), and a horizontal swipe should switch to the next column. – Kit Grose Apr 5 '12 at 6:47

There's a similar UI used to represent a playoff tree in the EA Sports NHL series of video games. Similarly, they have the need to present a 16-team playoff tree in a limited space at a large size.

They allow you to navigate laterally to see each level of the tree independently. Here's a (very low-quality video) of the effect.

share|improve this answer


Big Short Bracket Buddy

Bracket Buddy

March Bracket

Probably it will help with creation a little: League navigator

share|improve this answer
Can you describe the functionality and how these options could meet the OPs requirement, and not just link to sites (especially sites in Russian as UX.StackExchange is an English language site so the majority of visitors will not understand Russian). UX.SE is for providing answers to questions, not lists of links to external websites. – JonW Apr 4 '12 at 7:39

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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