WHAT: 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 a UI example that I like and try to replicate that design, and have a 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, or a web app?
Tools and resources that I used for this challenge
Design Tools: Sketch, photoshop
UI example
​​​​​​​Source: The UI example is the older version of 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 used. You might wonder how hard is to use a calculator? The one I used in 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 more enjoyable experience. Two great details/features are the instant result display and the delete function. You don't have to press the "=" 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.
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.
More thoughts...
Should I rearrange the number pad as a phone number pad? How useful is the calculation history? Under the history section, does adding 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 work better? I don't have all the answers. It may be easy to make decisions based 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.
Kommentare