6

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.

  • 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
  • Try checking apps for tennis tournaments (Wimbledon, US Open, australian Open, Roland Garros) or the NHL app (or an app of any other sport that has play-offs). You could certainly find an inspiration there. The tennis examples are especially good, since they have much more rounds (round of 128,64,32,16,8,4,2,1) so it's even more challenging. – Jaroslav M Nov 8 '17 at 7:35
4

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:

mockup

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:

mockup

download bmml source


Example of Windows 7 Panorama:

Exampel of Windows 7 panorama

  • Here is what I've done. youtu.be/hmTvmwx5WMk 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
0

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.

-1

iOS

Big Short Bracket Buddy

Bracket Buddy

March Bracket

Probably it will help with creation a little: League navigator

  • 3
    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 clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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