I would like to raise some problems with calculator app's design that came from Canonical's design team. Overall I like their design: it is simple, colors look good, I want to use app. Actually I have tried to make app's design as similar to their proposed design as possible. Simply put Canonical's team made very good job from UI point of view but UX lacks a little bit in my opinion.

Here is their proposal:

From actual app it differs in following ways:

1. Here you enter each number in separate row. In current app's implementation you enter complete calculation in single row.

2. There are some differences in buttons:

   1. There is "=' button in design that makes calculations. In app calculations are done automatically;
   2. There is "(x)" button that most probably corresponds to "C" in app (potentially);
   3. Lastly app has following buttons "(", ")", "M" and "<-" (backspace).

So the main problem with proposed design is that it is too simple and in result of that it has following two problems:

1. It is unforgiving.
2. It is limiting.

It is unforgiving because there is no backspace button. If you make mistake while typing there is no way to fix that mistake. While that's minor problem that can be fixed by adding backspace button somewhere. One option is to do something similar to what Riccardo has done in Sailfish calculator: http://www.youtube.com/watch?v=gqsN-9lC66k.

While limiting aspect is more painful here. Since you type one number per row that means that you are doing operation with result of previous operation. E.g. summing of 5 numbers is (((N1 + N2) + N3) + N3) + N5 and similar. The problem is that this works with addition and subtraction but with multiplication and division you have problem. Let's say you want to buy office supplies (pencils, papers and etc.) and want to quickly estimate how much it will cost you.

Now formula "1.05 × 5 + 10.00 × 7 + 28.79 × 8" in our calculator will become (((((1.05 × 5) + 10.00) × 7) + 28.79) × 8) and instead of 315.57 you will get 1084.32. Looking at design I personally can't say what value to expect. While it looks like old-school calculator visibility of previous entries might give wrong impression that it will perform calculations first and addition later. If it actually behaves like old calculators you will not be able to perform this task at all.

Another problem it is not clear how to reuse previous calculations. While potentially we could just stack calculations above in memory (let's assume it is the way) but what button must be pressed for them to appear there?

Now lastly just two little things that I'm not sure about yet (while not problems per se). While annotations in calculations don't look appropriate if you think short term they might be valuable if we will keep history of calculations. My idea that it should look like this. If we have annotation when entered formula should be shown in smaller font as it becomes less important to user.

As well some users expressed that they want colors in buttons. That might looks like this but here we must be careful. Colors are very sensitive and might look different on different devices (e.g. device with AMOLED screen might recreate colors better):

Simply I would like to hear what users are thinking. What are your preferences?

There was an idea to show items in memory list using their actual size (vs. fitting very long formulas). Image to the right illustrates this idea and actually I had almost implemented it.

Still I have decided not to use this implementation:

• It doesn't look that good. When items have the same size it somehow feels more natural.
• Actually smart user will split his formulas into smaller chunks and will reuse them. Regular user most probably will never type very long formulas and most probably doesn't care at all.
• ListView (currently used) has more functionality (e.g. snapping) and is more efficient (e.g. uses less memory and that most probably will be important in the future).

As mentioned at first I try to change list item's size through bindings. However it looks like there is problem in ListView and using items of different size you are looking for problem - items start to overlap or there appear unnecessary gaps. Sadly I have not found this documented anywhere but found out one Qt 4 sample working around this problem while notepad-qml (one Ubuntu Phone app) seems to avoid this problem somehow. My guess is that it is related to bindings or maybe it was partially fixed in Qt 5. Well I don't know and if somebody knows please share :-)

Assuming problem is with ListView let's use something else: Column. Here Qml let's you shoot yourself into the foot: there are multiple ways to emulate ListView using column. One is to create Qml object dynamically. This approach quickly has shown its shortcoming: it is almost impossible to add items to specific place without knowing how Column is implemented internally. Or maybe that's impossible at all? Well, it is too complicated and I have dropped this approach.

Another approach that required less changes was to use Repeater inside Column. Initial code looked quite simple:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

Column {
    id: formulaViewColumn
    width: formulaViewRoot.width

    Repeater {
        model: Memory{
            id: memory
        }

        Screen {
            width: formulaViewRoot.width
            onUseAnswer: addFromMemory(answerToUse, formulaData)
        }
    }

Well this solution works but... ListView is better because it does not draw objects that are not visible. Meanwhile this solution will draw all elements. That's most probably is not huge problem now as memory is small but in the future we might want to have bigger memory. Other problems started when I wanted to add animations to this and that appeared too complicated. As developer I don't have enough control. Again that's more related to the fact that we want to squeeze everything from Qml and ListView seems to allow more. Therefore that's story why you will have same size memory items in calculator in the future.

While I do not reject possibility that some smart developer appear who will rewrite everything. It is open-source project after all.

Here is video demonstrating most recent version of Calculator: http://www.youtube.com/watch?v=17fG82OfX04

Some points what has been done:

• UI improvements

  • Infinity symbol used
  • Button "=" replaced with button "M"
  • grey parenthesis on auto completion
  • Other minor UI improvements

• Some bugs solved (Yes, you can file bugs for us here: https://bugs.launchpad.net/ubuntu-calculator-app)

• "syntax error" removed

• Trigonometric function improvements

Some tasks are either postponed and at least one task is where I personally decided not to waste time on. I had an idea to use different size memory items but it appeared to be more complicated than I have anticipated.

Design related ideas are actually postponed. The problem is that I'm developer and I'm not very good at design. Here we will try to work together with design team from Canonical. Again I personally don't like some aspects of their proposed design and will write separate article about it. Meanwhile Riccardo tries to implement design team's idea: https://code.launchpad.net/~f-riccardo87/ubuntu-calculator-app/new-design

Here is my attempt to use colors on buttons. Tell me what do you think about it?