1

For our platform we would love to have a good way to visualize a knockout system. So you can easily follow that from quarter final X the winner goes to semi final Y.

A simple diagram like below does wonders to understand a schedule like this.

The problem is; lack of space on mobile.

What are some good user interfaces with similar graph-like structures that work good on mobile?

enter image description here

1

I think the most suitable way is to fit each of the columns you present in a screen, scrollable if necessary, and a button to navigate to the next/previous screen:

Round of 16
---
20 June - Place
Team A
Team B

20 June - Place
Team A
Team B

20 June - Place
Team A
Team B

20 June - Place
Team A
Team B

..Scrollable..

Quarter Finals >

.

Quarter Finals
---
20 June - Place
Team A
Team B

20 June - Place
Team A
Team B

20 June - Place
Team A
Team B

20 June - Place
Team A
Team B

< Round of 16 | Semi Finals >

.

Semi Finals
---
20 June - Place
Team A
Team B

20 June - Place
Team A
Team B

< Quarter Finals | Final >

.

Final
---
20 June - Place
Team A
Team B

< Semi Finals

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.