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

git history

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

  • 2
    For transactions related to money where you make a payment, "Pending" is just a state/status and it would be much simpler to display this state/status as text not a diagram. No one is interested in the history of state/status changes for payment transactions (basically your example is not very good to illustrate what you are looking for). There are quite a few linear diagram types which can be easy to understand to show linear history, but I would need more context before recommending any of them. – SteveD Jun 30 '16 at 9:20
  • Thanks for your input @Splatz! What else can I add to the OP so that you can recommend me something? – Maria Ines Parnisari Jun 30 '16 at 14:03
  • Do you have a particular situation you are designing for? – SteveD Jun 30 '16 at 14:05
  • Yes, I need to show the history of transactions for a user: debits and credits. Sort of like the Stripe app. But actions can be denied or stay pending for a long amount of time (1 day or 2 for example). – Maria Ines Parnisari Jun 30 '16 at 14:08

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.


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.