Jenny Ho

004. The mobile calculator

004. The mobile calculator

 

The fourth challenge was to design a better calculator interface, either standard and scientific, or a web or mobile app. In exploring the designs and functionalities of various mobile calculators, research reveals the type of calculations typically used on mobile calculators and users' experiences with physical and digital calculators. As such, this redesign is focused on enhancing the mobile calculator experience without impacting the user's cognitive load. 

Before

In order to gain an fair redesign of the mobile calculator, I compared 3 designs across iOS and Android to review their interactions according to Nielsen's heuristics. In my review, I was surprised by the amount of the initial consistency in interactions but also how each mobile provider applied their own look and feel, most likely to adhere to style guidelines. 

 
Calculator- Julie's interface.png
Calculator- Shirley and Jenny interface.png
 

In comparing each interface of the simple mobile calculator, the layout of the number pad and the mathematical operation look almost exactly alike. Similarities also exist in the error functionality between these calculators. When users make an error, they aren't asked to redo, they simply clear the calculator and repeat their calculations until they get it right. It is most likely based on our familiar experiences to the physical calculator, which preceded the mobile calculator.

Yet, when reviewing the scientific calculators, the differences in these interfaces show how the competitors found opportunities to extend or detract calculator functionality. With the iOS scientific calculator, you need to press the numbers before pressing the scientific operation, going against user's mental model of calculators. When I wanted to calculate tan 45, it would only work by pressing 45 then the tan operation, rather than normally entering tan first. It was not the case for the android mobile calculators, where you would type tan then 45 to get your result. Also, the android interfaces allowed you see your calculation on the screen, to prevent any errors before completing the calculation. The android interfaces also contain a history feature to enable users to retrieve previous calculations. In one interface, it also features to export the calculations to Facebook, Google or Whatsapp which can be helpful to track how you gather your calculations. 

It highlights that users have made built mental models on the calculator, but it also opens opportunities in how to make the physical calculator experience more accessible and tangible to digital devices. 

Our relationship to calculators

In my brief user research about learning mobile calculators designs, I discovered that not all users were apt in using the mobile calculator. It came from a preference in using a physical calculator from their childhood such as the Casio calculators below. They were less inclined to use scientific calculators on the mobile, instead they were drawn to the physical calculator.

 

 
 
The calculator of choice in high school

The calculator of choice in high school

IMG_4241.JPG
 
 

 

Users were more comfortable in using a physical calculator for calculations because of its tactile qualities and pressing the buttons.  However the benefits to use mobile calculator were for situations where they were on the go, e.g. a holiday for currency exchange transactions. The feedback made me think about how to emulate the physical calculator experience and yet provide users with unnoticed value.

Sketches, wireframes and testing

With this feedback in mind, I prioritised the features that would enhance the user's current calculator experience. These would be:

  • a Help feature to educate users about how to use this calculator. The reason is that covers any assumptions that people who do not know how to use a calculator, and it brings awareness to other features. 
  • Keeping the history feature. Despite my user feedback sample weren't initially aware of its existence, they recognise the value this feature would have in remembering where their previous calculations disappeared to. 
  • a Export/ Share button to allow users to attach a record of their calculation to other platforms. 
  • Unit preferences to change the calculator to suit other needs such as currency exchange, weight, length etc.

 

 
Calculator sketches.png
Calculator wireframes .png
 

Sketching and creating non colour wireframes allowed me to learn from design iterations, particularly in the layout of the numberpad and menu bar. I changed the design from placing the navigation bar from above the number pad to the bottom, to anchor the menu features. It then involved redesigning where best to position the delete button and introducing an ANS key to also help users to accelerate their calculations. 

The feedback from users ranged from high level to the specific. On a high level, users still required to look at the screen to calculate and not require muscle memory, to type what I see what they feel. However, much of their references were due to the experiences with physical calculator.  From a detailed perspective, the currency and temperature keys did not belong with the scientific set, but valued this information to make the calculator multi purposeful. 

Learning from the Visual Mockups

 

 
Calculator visual design final.jpg

In cementing the navigation bar, tackling the visual design for this calculator was subjective. As this project did not have a specific style guide, there was creative freedom to define the look and feel. 

In terms of inspiration, I aligned with the look and feel of Casio calculators. User research revealed users have an affinity for the Casio scientific calculators growing up and shaping their visual expectations. 

1.

The rose coloured keys signal the clear and delete operations to help users make edits or corrections to calculations appear visible. Its colour is reminiscent of the same keys on Casio calculators. 

2.

The dark grey keys signal the mathematical operations and the equal sign. In mimicking the position of physical calculators, it allows users to recognise and apply the divide, multiply, subtract, and add operations very easily. 

3.

The look and feel of the bottom navigation screen is based upon mobile conventions. In anchoring the history, save and unit settings allows users to apply their calculations to other platforms or solve other problems such as weight or currency. 

4.

Incorporate blue and green keys allowed the experimentation of colour that was similarly applied to competitors, to create visibility and providing an engaging experience with the calculator. User feedback determined this was the least appealing interface.

5. 

In designing the top layout to generate calculations, it allows calculations to be visible but enables multiple transactions to be continued. The wide layout is outlined to track previous calculations particularly when the history feature is applied. 

 

 

 

The Final Design

 

 
 
Calculator final design- portrait.jpg
 

In testing the three above visual designs with users, they all chose the first design because it was clear representational of the physical calculator.

Given the users' affinity with physical calculators, a skeumorphism look was applied to the final iteration of the number pad.
A skeumorphic design would help users connect the resemblance with traditional physical calculators. The use of colours also did not make any negative visual impairment of colour contrasts. 

 

Calculator final design- landscape 1.jpg
Calculator final design- landscape 2.jpg