Calculator
Design a calculator. Standard, scientific, or specialty calculator for something such as a mortgage? Is it for a phone, a tablet, a web app?
Introduction
I use the iOS and Windows calculator a lot mainly because they are the most easily accessible to me at any given point in my day.
With today’s challenge, I set out to make certain changes that I felt I would have preferred in customizing my experience with both calculators.
This is mainly driven by recognizing certain functions that I didn’t use as much which I felt could be replaced with something else that I used more.
The Calculator
Header Bar
I wanted this to be the space for mode changes. While I designed it for the simple calculator mode, clicking on the hamburger icon will open up a menu to switch to the usual array of calculator modes (scientific, programmer, graphing, etc). The current mode will also be reflected in the title.
Main Display
This is where the current calculation and final sum are shown. The current calculation takes up center stage with a larger font size while the final sum is above it in a smaller font. This makes sense to me as I would usually want to know both these figures as I make my calculations.
On the top left I have the History button. This is a pretty handy feature on the Windows calculator as I can jump back to any calculation that I’ve made in that session and work from there. I felt that the History button should be placed here as it is something that involves the calculations and the various results throughout. It’s also something that I don’t use as much but handy to have around. Hence the choice to place it away from most of the content but still convenient enough to access.
Calculation Manipulator Bar
This bar allows the user to manipulate the current calculation.
The left most button is to clear the current calculation. Useful button, but potentially destructive if accidentally pressed. Which is why I placed it away from the main body of the calculator and further from where the user’s eyes and mouse might spend most of the time. Bear in mind that Windows 10 natively supports touch screen so this would also be a benefit for a majority of touchscreen users. I suppose they can be mirrored for better accessibility for left handed users too.
Beside the Clear button are the Copy and Paste buttons. These are pretty standard and straightforward functions that I feel work better than the set of memory related Ms that Windows Calculator (and many other calculators) use.
While I find them to be particularly useful in a scientific calculator where I can save values to a memory bank, I think a simple calculator would benefit from simpler copy and paste functions. Coupled with the History function, I feel that it gets most of the use cases covered.
The right most button is the Back button. This omits the final input in the current calculation.
I didn’t go for icons here even though I imagine a final product would have that. I wanted to keep to the challenge of having short designs that I could finish quickly. I couldn’t find a set of free icons that was suitable for these 4 buttons so I figured it was better to not spend too much time dwelling on it.
Main Controls
The main body of the calculator. This is where the user inputs their calculations. Being a simple calculator, I have limited myself to the few function for good reasons.
- Numbers 0-9, basic arithmetic, decimal point – This are pretty standard functions that are non-negotiables.
- Equal sign – I like the equal sign to be bigger as it has a sense of finality when using it. It’s also likely to be the most used button here so making it bigger would help with usability.
- Invert (1/x) – This isn’t as widely used but I feel that I use it often enough to warrant having it here. I think having it in the main page of the main controls makes it more intuitive as inversion is not a very intuitive function to have in a calculator. Having it more easily accessible minimizes that confusion.
- Percentage (%) – This is pretty commonly used especially when dealing with finances. It makes sense to have this here as the user can save some time using that button than having to write the same thing in decimal.
- For everything else, there’s the Shift button. This changes the buttons to the additional functions that are still fairly commonly used but not as much as the things in the main page. Things such as power of 2, power of x, square, cube, and n roots, pi, and so on.
Conclusion
This was a quick one. Having done 4 days of Daily UI Challenges, I start to reflect back on how I feel about it. There’s a few things I like about it and a few things I don’t. I think it’s still too early to give a full writeup on it. For that I’ll work on it for a few more days to get a better sensing of how it is over the days.