I need to create a UI for a budget overview tool and the only option to create this UI is to use a table. The table will contain expense name, cost in local currency, cost in target currency and a column to indicate whether the expense is actual (already booked, spend, paid) or planned. I can think of a couple of options:

  1. Entitle the column "Actual?" (or Planned?) and use Yes/No in the table itself
  2. Leave the title blank and use "Actual" and "Planned" in the tables

Potentially the table cells could contain toggle switches to change from Actual to Planned and vice versa.

What would be the best option and its drawbacks?

  • You could make it more presentable by using tick marks and cross marks – Varun Nair Mar 17 '16 at 13:20
  • 1
    "the only option to create this UI is to use a table" is that a technical limitation? – Midas Mar 17 '16 at 14:49
  • 2
    How many rows and is the header always visible? How often do users interact with this table? Depending on that, “Status” may be an okayish header if the cells contained “Actual” and “Planned”. – Crissov Mar 17 '16 at 15:06
  • 1
    @Midas not really, the nature of data is tabular. – Jurijs Kovzels Mar 18 '16 at 17:00
  • @Crissov potentially there will could be a lot of rows and most likely header will static, meaning it will not be visible at one point. I think "Status" could actually fit, thank you. – Jurijs Kovzels Mar 18 '16 at 17:00

My suggestion would be to go for a generic title for your expenses\planned column since it establishes a base reference for what the column is about. I would recommend showing the actual value i.e. Actuals or Planned in the row itself since it would establish a reference as the user scans from left to right .

enter image description here

Another reason you need to ensure your table has headers is because it would be used by screen readers to provide context to visually impaired users. To quote this article

Accessible tables need HTML markup that indicates header cells and data cells, and defines their relationship. Assistive technologies use this information to provide context to users.

  • Thanks for you answer. I completely agree that cells should contain actual statuses instead of abstract Yes/No. Accessibility for visually impaired users is very good point but in my case Expense type is already used (Hotel, Flight etc), "Status" should be fine. – Jurijs Kovzels Jul 22 '16 at 0:00

If you use Yes/No, your users will have to reference the top of the table to work out what that means. Even regular users will do this - possibly without consciously realising they are doing so.

If you use Actual/Planned, your users will know what they need without needing to reference anything else.

  • Thanks for your answer. Your argument gives a good edge to "Actual/Planned" option. – Jurijs Kovzels Jul 21 '16 at 23:48

Maybe I'm getting sidetracked here... but I'm still not seeing a good reason for it to be in a table. Yes, it's tabular data of sorts, and there may be other technical limitations at work that I don't know about. But if the issue is that a table doesn't give you the freedom to lay things out in a nice way, why not ditch the table? You could still have sorting (and even filtering) in a layout more like this:

enter image description here

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.