Versions Compared

Old Version 1

changes.mady.by.user Unknown User (lihaoyi@mit.edu)

Saved on

compared with

New Version 2

changes.mady.by.user Unknown User (lihaoyi@mit.edu)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Jaden navigates to this page whenever he makes a purchase

Image Added *

This is the initial landing page. The purpose of this page is for a user to enter his expenditure, for tracking.

In order for encourage compliance, the page is as simple as possible, with only one input for the user to key in the expenditure. This also helps increase efficiency by reducing as much as possible the friction involved in entering the expenditure.

The map itself serves to help both learnability and safety. Learnability because it tells the user that the current location is part of the record, and safety because it allows the user to correct the system i case the device’s location service is wrong, makng it difficult to inadvertently enter incorrect data.

...

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:

Image Added *

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.

The actions that a user can perform on the graph are also relatively simple: pinch to zoom will allow the user to see more or less of the graph, while the user can also drag the graph from side to side to view different sections.

These actions may be somewhat obscure, an may require some sort of new-user popup to tell the users how to manipulate the graph. Once the user has been shown, the actions should be intuitive enough to remember, and fast enough to aid efficiency. Safety is inherent since the user cannot do anything destructive on this page.

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:

Image Added *

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:

Image Added *

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.

...

Wiki Markup
With that information in mind, Jaden wants to know which clubs he is spending all his money in on saturday nights (he goes to several). He right pinches to zoom in on the time period he wants (12mn \-> 6am Sunday morning) and selects the \[Map\] from the android menu. This brings up a map of his spending hotspots for that time period, with expenditure automatically consolidated based on physics proximity:

Image Added *

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).

The size of the spot representing each cluster of expenditure represents the net expenditure at that location. Clicking on a spot will bring up the detailed history view for that location.

In terms of learnability, the size-represents-expense relationship should be relatively simple for users to understand, given that such visualizations are often seen elsewhere in infographics.

Efficiency is also maintained by the fact that the user can at a glance see qualitatively all the information he needs, and can easily drill down into more detail if necessary by tapping an inividual hotspot.

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:

Image Added *

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.

...