Following Apple’s recent iOS overhaul, “flat” design seems to be all the rage. To help clarify what this term means and how it can relate to both visual and interactive design, I’ve done a quick experiment of redesigning the calculator app.
I for one was happy to see Apple’s recent move from their realistic, glossy design aesthetic to a much simpler one. While this isn’t anything new (many websites have been shedding their Web 2.0 trimmings for a while now), the fact that such a big player in the industry has made the switch has given the movement much more clout. It’s a lot easier to sell a lens-flare demanding client on a simpler and cleaner design when you can simply point to Apple and say ‘See, they’re doing it!’.
To clarify, there are 2 terms we should separate in this discussion. The term “flat design” really only applies to the idea of using solid colours without visual noise like bevels, gradations, drop-shadows, etc. There’s also a much greater emphasis on typography and designing to a grid. Again, this is nothing new: For some flat design inspiration make sure to check out what Swiss/International designers were doing back in the 1920s. The other term we should be talking about is skeuomorphic design, which means designing something to resemble its real life counterpart. The way Apple’s notebook, calendar and calculator apps resemble their real life counterparts in look and feel are perfect examples of this.
Making the calculator flat
The reason it’s important to talk about these 2 terms is that they aren’t mutually exclusive or interchangeable. You can design something that is flat, but is still skeuomorphic, and vice versa. A great way to explore this idea is by looking at the calculator app and how we could redesign it. Check out my first pass where I ‘flattened’ the design.
While the above mockup is very simple and clean, it is still a bit skeuomorphic in structure. The button layout and functions are very similar to what appear on actual calculators. Now this isn’t a bad thing, since this means our user is already going to be familiar with how to use this application. However when it comes to some of the interactive functionality, I think we can do a better job.
Improving the interaction
While the flat design shown above is simple and clean, from a user requirements perspective this calculator still has a couple problems. The first issue is that we cannot fit many function buttons onto the screen. You can rotate it and get a few more of the scientific ones in landscape mode, but it gets a bit cramped and you’re still missing quite a few options. Secondly, the memory functions are a disaster! They’re confusing and antiquated – we shouldn’t have to manage data like this on a 2013 touch screen device. So by starting to shed some of those skeuomorphic restrictions and taking advantage of what interactions a touch device can offer, we can make it much more useful. Here’s an animated demonstration of these improvements.
Let’s break it down
The benefit of interaction design on touch screen devices is we don’t have to rely on buttons and text links to govern all the interactions. One of the problems of adhering to a skeuomorphic structure is that you end up trying to fit every single button and function onto the screen at once. Let’s take a look at some of the screens close up:
You’ll probably first notice I’ve gotten rid of all those memory buttons and moved it into one button near the top. This gives users more room for useful functions like brackets or exponential functions. More advanced functions are made accessible through use of a swipe carousel. (Now I’m no math expert, so I’m not completely sure which functions are best grouped together on each section). The other display addition is the full calculation stacked above the total, which allows you to double check that your inputs were correct.
As previously mentioned, the memory buttons are gone! Now you can store numbers into memory with one button, and access them all with a slide-out drawer. Other swipe and gesture based improvements include rounding a number up a decimal place, and clearing the sum total back to zero. These are all great ways to de-clutter functions that previously would have required a button.
So wait, isn’t it still…
Skeuomorphic? Yup! By maintaining similarities to the traditional calculator, we can draw on a user’s pre-existing knowledge of how to use this device. Even small things like maintaining the number grid order decreases the learning curve dramatically. It’s similar to how we wouldn’t want to reorder the traditional QWERTY keyboard if we were designing a text entry interface.
Now these are just some ideas I’ve quickly put together to explore what we really mean when we talk about “flat design”. I think a proper redesign exercise would start with examining what scenarios the calculator app is used for (simple calculations, scientific, financial, etc) and considering how to best optimize an experience for those. Most importantly, don’t just jump onto the flat design trend because it’s in style right now. Think about which design principles will best serve your user, and then work from there.