Analytraxx
This design is a data visualization application. Essentially, for ever purchase, you type in the amount spet, and the phone will automatically record the current time and location. A map will be shown, together with the current time, to let the user know where the app thinks he is and what time it is. By clicking on the map, the the user can override the apps location-guess if it is incorrect, inaccurate or outdated.
Jaden navigates to this page whenever he makes a purchase
| This is the initial landing page. The purpose of this page is for a user to enter his expenditure, for tracking. |
...
Later on Jaden wants to go back over his previous spending. He does not have anything particular he is looking for, but simply wants to see what he can find out. He navigates immediately to the page showing his recent expenditures:
| This page is a simple time-series graph showing how the users spending varies across time. On its own the data the graph presents is self-explanatory, and should not be confusing to a user. |
And he sees that three days ago, his expenditure spiked, likely because of the start of the weekend. Wondering if this is a recurring trend, Jaden goes on to view the aggregate weekly trends of his expenditure:
| These weekly trends display aggregate data on the various days of the week aggregated over several weeks. Otherwise, the operation of this view, as well as its usability characteristics, is identical to that of the recent expenditures view. |
And he sees that, in fact, he spends more than ¾ of his money on the friday-saturday-sunday that comprises the weekend. Now that’s a surprise! Perhaps Jaden will later want to consciously cut down on his weekend expenditure. However, he also wants more detail: exactly when is he spending his money? Is it on the Saturday night dinner parties? The Sunday afternoon shopping? He simply uses two-finger zoom on the graph and it adjusts to his new viewport:
| Pinching and zooming on the graph does what you would expect: it resizes the graph according to the action, allowing the user to see more or less of it at one glance. |
Clearly it’s Jaden’sdinner outings which are making up most of his spending, given the huge peaks on Satuday night and Sunday nights! Also suddenly apparent is the spending peak that happens every saturday night past midnight, obviously all the nightclubs that he has been going to have been a drain on his pocket!
Wiki Markup
| The map view is meant to display to the user the hot spots of his expenditure. Thus it displays a Google Map of the area which any transactions within a stipulated time period (generally the period that is visible on the time-series view from which the map view originated). |
Clearly his major expenditure is at the Miracle of Science Bar, up near the MIT Museum. How much has he been spending, though, the last few times he went there? He taps on the large circle representing the spending concentrated at the Miracle of Science, which brings him to the location spending-history page:
| The map at the top of the screen reminds a user and makes it explicitly clear what cluster of expenditure he is looking at, all without the user needing to specifically go through and categorize/name the various clusters. This improves both learnability and efficiency. |
Which brings up a historical listing of all the spending Jaden has made in this position. Pretty handy!
Analysis
Overall, the learnability of this design is excellent. This is not because of special cues or metaphors that it is using, but is simply from using familiar metaphors (maps, time-series, dragging, zooming) in a new context. The purpose of this is to allow the user to
...