One of the very first things I did when the iPhone came out was to write a little free web based tip calculator. 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. Our new version is available today.
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 drink.
Most tip calculators get you to Scenario 1 or 2. Scenario 1 is pretty easy we need the bill total and the tip percentage and 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 dinners check.
If one person had an extra drink you use the slider or plus/minus arrows to adjust their price and everyone 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.
Our 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 application 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 applicatoin. 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 it on an actual device that we discovered that 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 and making fine level adjustments with your finger can be 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 peeople get the price right.
There’s a lot of subteltly in building applications for mobile devices. We hope you like this one.
Download our new tip calculator from the App Store for $0.99
Tags: Apple, Application, Calculator, Iphone, Raizlabs, Tip
No plus icon for check 3?
There is a plus icon for check #3. The middle section scrolls and the coffee cup stays still. You can’t see that in a screenshot. Having the clipped/overlapped area helps people realize and discover that it scrolls.
actually it just looks weird, when i saw this i tapped on the coffee dish hoping it would click-thru, plus i cant read the number – fail. (i recommend using another approach to indicate to people that it scrolls), but i like the being able to specify each split!
Regarding the cup on the second page. After some thought and feedback it’s going away on our next update. Thanks.
So what was your consideration when you designed the number pad? It doesn’t seem to follow the iPhone’s standard number pad layout. Just wondering!
Sebastian – We actually went back and forth on this. If you take a look at the built in calculator you’ll see that the number pad for a calculator is different from the phone layout. We had to choose if we wanted to be more consistent with the phone or with the calculator. Because we had the decimal point and because we are a ‘tip calculator’ we decided to stay consistent with a calculator number layout.
Just got you app and I definitely think it is one of the best ones, except for one omission. At least where I live (Seattle) when you get your bill, there usually is a sizable amount of tax added. I never tip on tax, although I tip generously. Could you guys use your obvious wizardry and find the simplest way to include this feature where you are only tipping on the actual amount but then the tax is still included in the final amount and split accordingly? This is the ONLY reason that I wouldn’t switch to your app and ditch the two I have on my iPhone right now. FYI, the ones I do use all do this already, but your implementation is the best. Please consider.
Just following up on these conversations. We’ve setup a forum on the support section of our site to provide further discussion on this topic… and yes we will have tax on tip options. Read more:
http://raizlabs.com/forum/viewforum.php?f=11
Gracias!
Nice page!!