Minimal Match Three — Home Screen

Designing for the new iPhone X proposes two new issues:

1. The screen is obscured where common navigation items are placed
2. Gestures drive the navigation through the UI.

To solve an interactive navigation like a video game, in this case a match three game, the UI needs to lean into the same interactions of the native apple interface

Story, aesthetics and design.

The design for this match three app is based on the idea that popular app genres can have modern clean aesthetics, simple gameplay design and tell a story without resorting to candy crush-ing or cute animals.

Minimal Match Three—Level Selection

Less is more

The navigation of Minimal Match Three is bottom left, top right and centre stage. I’ll go into some more detial:

• Back is bottom left like Android and Windows Phone. Back is not top left, but bottom, all UI that is used commonly should sit in thumbs reach
• Settings is where settings is for the native iOS
• Promos are easy to reach but also the least important
• Selection items are large and tell a story — instead of large titles with long descriptions and tiny ‘read more’ call to actions
• Top left tells you where you are—area one

Minimal Match Three — Gameplay area

In arms reach

The area of gameplay that is available on large screen is minimal when held in portrait mode, and smaller still when standing on a crowded moving bus.

iPhone X makes UI design easy—because all there is no UI

The UI disappears, there is no need for faint lines, small arrows, tiny text.

UI on iPhone X is should be as invisible as the iPhone itself, the content should be the main interaction point.

In this respect text as a button — something Windows Phone innovated on, is a interesting new UI pattern for the iPhone X.

Minimal Match Three—Level Theme Progression

What can we learn from iPhone X?

In the advertisements by Samsung for the edgeless display content becomes the focus of the device not the UI.

What Apple understands is that by removing the edge of the screen you need to remove the UI at the same time, and by doing so the content needs to work harder then ever to convey the actions the user should take next.

Now more then ever, content that is not clickable, is not usable.

If you want to talk more about design — feel free to reach out at zakarykinnaird.com or find me on LinkedIn.