Gratuitous Design
Our last blog post touched on the reasoning behind Gratuitous and as part of that, we stressed the importance design plays in our software. While the idea of a tip calculator is fairly straightforward, achieving a design we were pleased with required quite a bit of work. This post is the first in a series on the design of Gratuitous.
Presentation
Features and functionality alone are not enough to draw users to your app. Presentation is a key element that, if done well, will serve your functionality in an appealing way. In Gratuitous, we went with the design of a paper on a wood grain surface. This is reminiscent of a bill at a restaurant but presented in a more visually attractive manner (an actual receipt, while obvious, does not provide for an appealing UI).
Our focus on presentation started with the loading of the app. Most apps present the static loading image and then, when the app is finished loading, the screen switches to the app, resulting in a a jarring effect for the user. With Gratuitous, we seamlessly transitioned from the loading image to the application by animating the paper onto the screen without breaking from the loading image. This took a bit of time to get it just right but we think the results were worth it.
It was important to us that this paper on a wood grain surface was consistent throughout the entire app. For instance, when you tap the gear button, only the paper flips over to the reverse side. This maintains the visual theme of the app.
Immediacy
Prior to prototyping the user interface, we discussed design goals we wanted to achieve. One such goal was immediacy in the understanding of the use and the information Gratuitous provided.
Immediately upon starting the app, you are presented with three of the most commonly used tip percentages and your own custom tip percentage. At a glance, the tip amount and total for each tip percentage is clear. Presenting this information up front allows you to quickly view your desired tip percentage without any interaction. Thus, the majority of the time you simply need to enter your bill amount and you’re done.
Have a tip percentage that you always use? We’ve saved it for you from your last session.
Received less than optimal service? Tap one of the lower common tip percentages.
Received great service? Tap one of the higher common tip percentages.
We’ll follow this post up with further posts in the series touching on specific topics in detail. How do you think we did the design of Gratuitous?
