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.

Improve this question
3
  • Nice question! Do all the eliminations happen on one lever before moving to the next? Frist 16, then 8?
    – Benny Skogberg
    Apr 4, 2012 at 4:37
  • Benny, yes, all the eliminations happens on the first round before going to the second round.
    – Benoit Lefebvre
    Apr 5, 2012 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, 2017 at 7:35

3 Answers 3

Reset to default
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

Improve this answer
2
  • 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, 2012 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, 2012 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.

Improve this answer
-1

iOS

Big Short Bracket Buddy

Bracket Buddy

March Bracket

Probably it will help with creation a little: League navigator

Improve this answer
1
  • 4
    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, 2012 at 7:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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