Daily UI Design Challenge
WHAT: a daily UI challenge for UI exercising
WHY: I want to be more familiar with the UX/UI tools
HOW: a UI design prompt is generated by Daily UI, find an UI example that I like and try to replicate that design, and have an self-reflection for each challenge
Today's UI Challenge: 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?)
Tools and resources that I used for this challenge
Design Tools: Sketch, photoshop
UI example
Source: The UI example is the Google Calculator phone app. I did a screenshot on my Google Pixel phone.
My process
I picked Google Calculator because it is the easiest calculator that I have been used.
You might wonder how hard is to use a calculator? The one I used at Calculus II classes is fairly complicated, and sometimes I have to rely on its thick manual to use it. On the other hand, the Calculator app is a much enjoyable experience. Two great details/features are the instant result display and the delete function. You don't have to press "=" sign to see the result. In fact, the result displays as you type in the math symbols (+,-, ...) and numbers. To clear the calculation result, you can either press once to clear the wrong entry or press and hold to clear everything at once.
You might wonder how hard is to use a calculator? The one I used at Calculus II classes is fairly complicated, and sometimes I have to rely on its thick manual to use it. On the other hand, the Calculator app is a much enjoyable experience. Two great details/features are the instant result display and the delete function. You don't have to press "=" sign to see the result. In fact, the result displays as you type in the math symbols (+,-, ...) and numbers. To clear the calculation result, you can either press once to clear the wrong entry or press and hold to clear everything at once.
I started by replicating the UI in Sketch by using grids. At first glance, the UI seems clean and simple, but you have to look closely to see the details (the drop shadow on the top edge of the number pad, the expended side menu is aligned with the first column of the number pad...) I didn't spend time matching the font, so you will see the numbers are different than the original design. The challenging part is to create math symbols in Sketch. I managed to find the solution, but I just really miss using Glyphs in illustrator
and InDesign.
and InDesign.
Try something new
As I mentioned earlier, you don't need to press = sign to see the result, so in my replicate, I remove the = sign from the number pad. To make it clear for users to see and understand where the result is located, I add the = sign on the screen, next to the result.
I also moved the 0 and . to right, and it may help the user's finger easily reach those
two symbols.
I also moved the 0 and . to right, and it may help the user's finger easily reach those
two symbols.
More thoughts...
Should I rearrange the number pad as a phone number pad? How useful is the calculation history? Under the history section, does add a trash icon next to each past calculation promote easy removal? or should a drag left-and-right motion like archive and delete in Gmail works better? I don't have all the answers. It may be easy to make decisions base on one person's experience and opinions but could be a useless product for others.
I should keep open-minded about others' experiences that are different than mine.
I should keep open-minded about others' experiences that are different than mine.
