3

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?

5
  • You could make it more presentable by using tick marks and cross marks
    – Varun Nair
    Mar 17, 2016 at 13:20
  • 1
    "the only option to create this UI is to use a table" is that a technical limitation?
    – Midas
    Mar 17, 2016 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, 2016 at 15:06
  • 1
    @Midas not really, the nature of data is tabular. Mar 18, 2016 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. Mar 18, 2016 at 17:00

3 Answers 3

2

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.

1
  • 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. Jul 22, 2016 at 0:00
1

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.

1
  • Thanks for your answer. Your argument gives a good edge to "Actual/Planned" option. Jul 21, 2016 at 23:48
0

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 and acknowledge you have read our privacy policy.

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