Like many metropolitan regions Hamburg, with around 1.8million residents the second biggest city of Germany, its infrastructure service (abbr. HVV) has its own app that is used by thousands of people.

The app is also an integrated component of my everyday life, and the functionalities are even superior than many other apps in the same industry. Despite the mediocre rating in the app store and the flaw in some design aspects, it's rich in features and provides value to many people. I do like it, and I would like it to become even better. This article showcases one thing that can be improved, and tries to address this bit with established research.

The problem

The hamburger icon (this one ☰, not that 🍔) in the navigation bar is pretty much considered standard in apps and mobile websites for navigational use, even though some designers have good arguments for criticizing the sole use of it for many contexts. This article however doesn't address its sole use, but its twofold use.

What you expect

Here you see the expected behaviour of the hamburger icon. A tap opens the navigation drawer with more options that otherwise are hard to fit on a small screen.

What you don't expect

When you actually search for a connection and you are presented various options for taking a route, the hamburger icon gets replaced by an arrow, but also reappears on the right side of the same navigation bar. Tapping it here will not open any more options, but it will toggle the state of how the connections are displayed. From a horizontal layout to a vertical one and vice versa. Matching with this, the hamburger icon will rotate 90° hinting the next layout.

While the idea might have appeared crafty to reuse the same icon and only change its location and rotation for different meanings, this creates two fundamental contradictions in the users mind:

The hamburger icon does not do hamburger icon things. As already mentioned, the ☰ icon has its place on mobile user interfaces, and in this use case that assumption is broken.

The same icon is not bound to the same function. Imagine we are talking here about an entirely different icon, which has no predefined role. Even then the use of one icon for two different functions will confuse the user.

Some theory in Usability

User interfaces are a more vigorous researched field of study than you might think. This area of research established principles and heuristics for designing user interfaces 20 years ago that are still relevant today.

Jakob Nielsen's "10 usability heuristics for user interface design" is one of the most referenced lists for Interaction Design principles. These are broader guidelines providing general advice for designing interactive elements. It's a really interesting list for UI designers and the point that matches the discussed problem the best is this one:

Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

One has to note though, that not knowing the function of the icon does not cost a lot to execute and to recover from. The user is able to go back and forth without much more than a tap, no context changes, no annoying dialogs, no submission of mic drops to your boss that causes you to lose your job. This is good and helps the user to learn effortlessly. All the user would need is a possibility for distinguishing it…

Solution proposal

The original solution was to depict rows and columns themself, which is a very appropriate way to represent it, as opposed to a symbolic or figurative one. Three stacked bars have a too similar character to the hamburger icon, but two bars are also already used similarly for other options seen on the first screenshot in the navigation. One should not exaggerate the amount of details in an icon, but I consider four bars still as reasonable to use. Furthermore they are sequentially offset, for one to create an overall different shape (parallelogram instead of a rectangle) and also to assign the chronological character of the information presented (subsequent connections are later in time).

Left: Horizontal layout, Right: Vertical layout

The following points were important to me for this solution and I think it does improve on the given problem without too much compromise:

Matching the style with the rest of the icons Think of stroke width, amount of detail, color…

Keep the change small enough and improve on what is there Evolution increases adaptability

Provide additional context with animation Works best if other icons have animation clues as well

See the animated version in its context here. Tapping on the icon will change the layout and the icon will represent this by animation.