Saturday, January 17, 2009

A Better iPhone Tip Calculator

Technology / Mobile

One of the very first things I did when the iPhone came out was to write a little free web-based tip calculator app. This was mostly a tool to learn about the web-capabilities of the iPhone while writing a simple tool. We decided we could do much better with a native application.

iPhone displaying a tip calculator splitting a check between 3 people

For this application, we really wanted to do a scenario-based design. We had three core scenarios in mind:
1) I go to lunch or dinner and figure out a tip
2) I go to dinner with friends and split the check with a tip
3) I go to dinner with friends and one person just gets a salad and everyone else gets a full meal with a drink.

Most tip calculators on the iPhone get you to Scenario 1 or 2.

Scenario 1 is pretty easy. We need the bill total and the tip percentage then we can quickly compute the tip amount.

Scenario 2 was a little more complex but not much. We perform the original calculation and then just divide the total bill and the tip line up between the number of people.

Scenario 3 was when it got a little more interesting and I think this is a unique feature I haven’t seen anywhere else. We allow the user to go into the details of the bill and manually adjust each diner’s check.

If one person had an extra drink, you use the slider or plus/minus arrows to adjust their price and everyone’s price adjusts automatically. This can also be used as people are putting money into a pile. You can quickly see who has put in how much and what amount is left. If you adjust a slider, it stays fixed allowing you to move to the next diner.

Tip calculator for the iPhone showing an adjustment slider

Our iPhone tip calculator allows you to see if you have an underpayment or an overpayment. This makes it easier to ask everyone to chip in another buck or two as needed.

The visual design of the tip calculator app is styled to look like a restaurant napkin. While this doesn’t impact the functionality, it makes for a fun and attractive design that we hope people will enjoy sharing and using with their friends.

We learned an interesting usability lesson in building this application. It turns out that it’s critical to test on actual hardware and not just on a simulator. For most of our basic development, we built the application and tested it in the iPhone simulator software. It was only when we got the tip calculator on an actual iPhone that we discovered the slider bars can be a little tricky to adjust at a fine granularity. If you had a $90 bill the slider can go from 0 to 90, which can make fine level adjustments with your finger quite difficult. After usability testing this we decided to add the plus and minus icons to make fine grain control a little easier.

We also made it possible to just hold down the plus/minus and allow the button to repeat as an added way to help people get the price right. There’s a lot of subtlety in building applications for mobile devices.

Do you have a project in mind? We’d love to work with you. If you’d like an opportunity to work on projects with us, check out our Careers page. We’re hiring!