How to Design Beyond Default UI Patterns for a Rich UX

Designing outside the box

If you examine most mobile apps, you might notice they all look the same. They all use navigation bars, table lists, and a linear data display. These default patterns that designers habitually use may get the job done, but they’re not always the best approach for UX.

Information structures that are too flat often fail to capture the attention and interest of users. As a result, users have to work harder to consume the information. It’s still doable, but the experience requires more cognitive effort and is less enjoyable.

When you break free from these default UI patterns, you’ll go beyond navigation bars, table lists, and linear data displays. Your data, navigation bars, and table lists won’t be confined to a fixed structure.

The example above shows how the new design breaks the mold of default UI patterns. It still displays the same data, but it does so in a more organic way. It doesn’t confine the data to a set pattern. Instead, it displays it in an appealing way that doesn’t feel like the interface just regurgitates information.

Expose the Information Layers

The default UI patterns display the data in a straightforward, linear way. You have the salad name and all the ingredients listed below. The user can read it and select the one they want. However, this linear data display doesn’t do it justice because richer information layers haven’t been explored.

The feature of each salad hasn’t been highlighted in any way. For instance, the key ingredient of the sashimi salad is the fish, but it’s only listed as tuna in the ingredients list.

The new design takes it to another level by describing how the tuna is marinated. It ignores listing all the other ingredients on the initial screen and only displays them after the user taps an item. Instead of bombarding users with a list of ingredients from the start, it focuses on the key ingredient of each salad that customers care about foremost.

The default table list displays all the salads under the “salads” tab. However, exposing deeper information layers can make the UX richer. Instead of showing a linear list, you can highlight which salads…