I asked friends what a line above the blocks signifies.
On one hand, everyone guessed what I meant, but on the other, they all said it's very unintuitive. I agree with that sentiment. I've never come across such a solution before.
Here's one of the responses:
When a programmer comes up with a design, it ends up looking something like when a designer codes algorithms.
Most likely, such a list looks unintuitive because people aren't used to it. I hope over time it will become more familiar, because otherwise I can't fit enough information on a mobile screen.
For instance, compare:
As you can see, on a mobile device with a narrow screen, the fourth level barely fits, and the text is so short that its meaning gets lost. There's no even talking about the fifth level. With my approach, the space for text doesn't decrease.
Essentially, we split the list into two layers and then merge them:
Here are a few more experiments with layering levels onto blocks:
And a few more:
A designer showed me a similar approach on some website, but there the level was shown as a number, not a line. I believe lines are still more illustrative.
I liked this version the most:
Judging by the feedback, it's still too early to use such an approach in a commercial project. But I'll give it a try in my personal project.
What do you think about this method of displaying levels?
Top comments (0)