Ways of showing linear history

Question

If you are a software developer you're probably familiar with images like this:

This is a perfect example of a display for a linear history.

I was wondering if anyone has seen other ways of presenting information like this. I haven't done any user testing but it seems like this is hard to understand for non-dev users.

For example: for transactions related to money where you make a payment and it can remain "pending" for a while, until the other end accepts it. (In this example, "master" would be the completed transactions, and the branches merged into master would be pending transactions that were then completed. Branches still not merged are "pending").

Answer 1

It sounds like all you really need is a list, except that you also said you're looking to show debits and credits. So now your list of transactions has multiple dimensions.

There are several ways to lay out information with multiple facets.

A table is a classic solution when you need to read in both directions, i.e. read down columns or across rows.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Another common solution in the responsive-design era is a "card" that either shows key-value pairs or shows the data laid out in a consistent fashion. (For that latter option to work, the data has to be self-explanatory enough that labels aren't necessary.)

^{download bmml source}

In my experience cards are most handy when you need a clear hierarchy—i.e. when one thing on the table is significantly more important than the rest. They also offer more flexibility when you need to incorporate things like buttons (in my opinion).

Some cards are really just tables with different styling...a single row of data on each card, and all the data lines up.

^{download bmml source}

You could include a date/time in any of these formats, but if time is particularly relevant for some reason (perhaps it's a list of fundraising transactions where each item represents a "win" or a step toward a goal) then you could add a timeline alongside whatever format you choose.

^{download bmml source}

You'll notice that most of these are vertical...for the most part, web and desktop interfaces are easier to scroll through if they're vertical. On touch devices it might be a little easier to get away with horizontal scrolling, but by and large, because of the web, we're very used to scrolling downward through content rather than sideways.

Answer 2

If I were you, I would check out the transaction history of several banks for inspiration. For example, Chase shows a table of transactions, which includes fields like Date to send, date to arrive at target destination, status (Pending, Funded, Sent, Paid) and a button that has a dropdown so the transaction itself can be looked at in more detail.

For a graphical interface, I would suggest that you don't show each transaction graphically. Instead, simply provide a finite state diagram that shows each state the transaction can be in, with either rollovers or a text box giving a description of each state.

When combined with the a table interface this should be sufficient for users with several different interface preferences.