UI Challenge 04 - Calculator
UI challenge to design a calculator. My intention was to formulate a design for an intensive heavy duty....standard calculator. It would allow one to to simple problems on it, and I intended to use this exercise as a way to really practice and refine every detail of what I decide to put in a design and a lot of time was spent on the deliberation of functions and use. Every decision, color, placement, and flow has a justification.
First of all, a dark color scheme to reduce eye fatigue and to serve as a backdrop to allow a stronger contrast of the bright colors which will be utilized frequently.
Each of the operators take up the right side of the screen as we scan pages left to right. Users scan for their desired number and then input the intended operator on the right. Numbers follow a standard key layout one would find on other calculators, keyboards, and cellphones. The parenthesis are separated by the zero to reduce miss-clicks as well as to appear more aesthetically appeasing.
The equation you input is displayed at the top and is calculated in real time as you input your equation. (So far as the equation you input can reasonably be calculated with what you have provided so far.) Each operator has a desired color so numbers following an operator will be highlighted according to the last chosen operator so there is no confusion. Order of operations follow this as well, coloring the parenthesis and sections of your equation so there is no confusion when you forget to input a parenthesis here and there.
Once again your answer will appear in real time at the bottom, pressing " = " will clear equation and replace it with your new solution to prepare for your next equation if you want to continue from there. At this point the " = " becomes a "clear" button to reset the calculator to start at zero.
I decided to get rid of both the "C" button for "Cancel" and the "CE" for Clear and fused them together under the "Undo" button. I placed it away from the operators to reduce frustrating miss-clicks as well as to put it in a place many people would be familiar with if they normally use internet browsers and mobile apps. Pressing the "Undo" button will reverse the last action you did. If the last action you did was hit " = ", then it will take you back to that equation you just solved for in case you forgot.
In this way, the labeled "undo" and "clear" buttons together mean that there should ideally be very little confusion as to how to use this app, or at the very least reduce the chances that their features go unnoticed and unused.