Two Dots iPhone App (Good Design)

Two Dots is a game that involves connecting two or more adjacent dots in order to earn points. But without even getting into the actual playing of Two Dots (which I do a lot of on the subway), the navigation interface presents several features that qualify as good design. As soon as you open the Two Dots app, you are presented with a simple screen: the only text is the name of the app and the word “play,” and there are minimal background elements.

Screen presented when app is first opened.
Screen presented when app is first opened.

This is a good example of the use of both a physical and a semantic constraint in a situation that allows for more than one action: the touch screen affords for touching anywhere on the screen, so how does the user know where to touch in order to enter the game? The simplicity of this screen helps the user figure it out by constraining the user to only a few elements that could potentially be clicked on. Then, semantic constraint comes in the form of context: Two Dots is a game, so clicking on “play” makes the most sense. The user also receives feedback in this situation: touching anything but the play button does not change the visual aspect of the screen, but touching the play button turns it a lighter color and produces a clicking sound.

Pathway of game levels.
Pathway of game levels.

Once the user has entered the game, the game levels are presented. Again, sound feedback is used to differentiate the background from the clickable elements: though the user can touch anywhere on the screen, only those elements that take the user to a new screen produce a sound.

The levels are arranged on a pathway. This is one of the many ways Two Dots does a good job of making visible the user’s place in the game and giving clues for measuring progress. Though there is no natural mapping for communicating to the user that the direction of the pathway proceeds up the screen (since one could theoretically travel on a pathway in either direction), Two Dots makes direction visible by graying out levels above the one the player is currently on. Further, each level is given a number. This provides a natural mapping for progress: the higher the number, the greater the user’s progress in the game.

Yet another feature that helps the user measure progress is the use of background environments. Levels are grouped into sections that correspond to different geographic places (for example, a glacier, a forest, and a desert). As the user completes levels, they form a conceptual model of the game that involves not only numbered levels but different places. The user remembers past levels and predicts new ones, which is an enticement to continue.

Two Dots postcards.
Two Dots postcards.

Two Dots goes another step by putting this conceptual model of environments into the world: at the end of each environment, the user earns a “postcard.” This is accessible at the bottom of the screen. The postcards make it such that users do not have to keep knowledge of the environments in the head, but rather can refer to the set of postcards to remember where they are in the game. The postcards screen also shows slots for future postcards. This gives the user a more complete sense of progress: in addition to numbers, which indicate how many levels are behind the user, the empty postcard slots quantify what lies ahead.

Though there are other aspects of Two Dots that could probably be considered bad design, overall the interface makes progress in the game visible and provides useful feedback, both visual- and sound-based.