5

I have an application that tracks the housing history of program participants. The worker using this program will already have their current housing information inputted elsewhere.

Normally, I would use the current information to denote which order the table is in. If the current is at the top, then it will order from most recent to least. If the current is at the bottom, then it would list from least recent to most.

Housing history table

Apart from spelling it out with a text description, is there a way to design the table so that it implies data will be entered in reverse chronological order (meaning most recent at top)?

  • Why should the order of entry matter? Consider adding a date range field to your table. Allow users to enter this however they feel like, then sort the results appropriately. – nightning Mar 28 '16 at 21:35
  • The data fields were not for me to decide. I am looking for a graphical way to denote which order the table should be formatted. I am NOT looking to do this via the data in the table. – invot Mar 28 '16 at 22:28
  • You have already provided a text label "Last 2 years or last 4 housing situations required", which does set some expectation for the user that the entries will be in reverse chronological order. If not, then you already have spent screen real estate trying to explain it, so why not do a little bit more to make it absolutely clear (if required). – Michael Lai Mar 29 '16 at 0:13
  • @MichaelLai: I agree that the text label takes care of it slightly, but I also would like a visual indicator to accompany that set of text. – invot Mar 29 '16 at 13:50
5

Consider adding textual instruction and a visual indicator to the side of the table showing the time-based ordering of entries. I would also allow users to re-order entries within the table. Something like this:

enter image description here

I think this approach ends up being the most effective if you must stick with your stated constraints (no date entry, low impact to screen real estate). Look into list re-ordering UI techniques - the example I have above is a little crude and there is likely a similar technique that will fit the technologies you are using.

  • 2
    Putting the sort arrows control next to the "most & less recent" indicator might be helpful. – nightning Mar 28 '16 at 23:04
  • I think the issue with having the "More Recent" / "Less recent" label is that it doesn't necessarily 'enforce' the way the user enters the information, and there is no other fields that allows the system to validate the input, so it does only mitigate the issue of incorrect entry to some degree. – Michael Lai Mar 29 '16 at 21:29
  • Michael, I agree. It would be better to allow date entry or to have a validation step of some sort to ensure the order is correct. – Joshua Barron Mar 30 '16 at 22:55
5

Just label it

Sometimes the best solution is the most obvious one. You can come up with all sorts of clever UI tricks to reinforce the sort order, but you're better off just spelling it out.

Without thinking about it in great detail, I see two ways to make it obvious.

Sort control

If possible, allow the user to sort the list according to a handful of dimensions. It is a computer after all, why shouldn't the users have a little control. And a visible control will explain exactly what's going on.

Row labels

If you don't want to include a sort control (even if you do), label each row or set of rows with a date indicator. It doesn't have to be prominent, it just needs to be available when users want to understand the sequence.

To put it visually ...

Wireframed example of recommendations

  • +1 I think Row labels is the best 'compromise' given the situation, although I would probably only have "Present" and then "Previous" as you click + Add housing so it is more flexible. – Michael Lai Mar 29 '16 at 21:33
  • I like how you changed the yes/no to checkboxes. The reason we have the yes/no is because we wanted to differentiate between "yes", "no" and "unanswered" states. Otherwise, the checkbox would clearly be the better option. – invot Mar 31 '16 at 15:41
  • having an "unset" state is very uncommon and unintuitive for a toggle. If the goal is to force interaction, I think a dropdown is the better option. – plainclothes Mar 31 '16 at 16:32
  • I think that is a matter of opinion. Having a dropdown for only two options feels unnatural to me. – invot May 12 '16 at 17:35
1

You can use opacity and blur as the metaphor. See a very quick example:

enter image description here

Since memories and past is always blurred (and future is unknown), it's relatively common to use the graphic blur as the metaphor you want to convey.

This approach is used in some controls with the same effect: you can see the NOW, the future becomes uncertain, the past is blurred:

enter image description here

enter image description here

or, what you don't pick, lose focus:

enter image description here

As you may see, this is a reasonable way to solve your request in a graphical manner.

Now, I'm 100% sure that what Nightning suggested in the comments is the way to go, and as such, you should at least suggest it.

Also, pay attention to your inputs and elements, there's a high cognitive load on them. As an example, by adding that color border to the "evicted" toggle, it actually looks as if the person was actually evicted (when s/he didn't).

  • 3
    Isn't that UI based on the idea that those controls are like wheels, like an analog-digital clock? I don't think that they're blurred to indicate past/future, but just because they're father away/on the other side of the wheel. (That doesn't mean that it's not a good visual cue; I'm just not sure that the metaphor is accurate.) – Joshua Taylor Mar 29 '16 at 2:58
  • So is the language chooser listed according to the language's dates of origin? – plainclothes Mar 29 '16 at 5:40
  • @JoshuaTaylor ,I see my explanation is confusing. What I tried to use is the metaphor and shown those examples as similar in terms of graphic approach, hence why I also shown an example not realted to time. Thei mportant part is the focus, but in his case it would help to convey the idea of past times. This being said, I have seen this in timelines, can't find an example right now – Devin Mar 29 '16 at 6:17
  • 1
    I don't want to effect the legibility of any of the columns. I don't see this being effective for this specific situation. – invot Mar 29 '16 at 13:51
1

OP said "the data fields were not for me to decide", which indicates to me some sort of failed process with their front-end and back-end devs... but for other folks looking at this problem, I think the best solution is to give calendar inputs to allow the user to enter dates.

UI with move in / move out date pickers

Or if you didn't want to allow for gaps in the dates, then you could just have one column for move in date (or move out date) and infer the other date.

  • 1
    Mock-up shamelessly stolen from @plainclothes :) – Nathron Mar 29 '16 at 20:15
  • 1
    Thx ... ? I didn't think that was theft-worthy. – plainclothes Mar 29 '16 at 20:16
  • We are modernizing an old command-line application. We cannot change the fields used, just the layout. Thus the constraints. – invot Mar 31 '16 at 15:42
1

Since we are just 'borrowing' each others' ideas (great discussion by the way, and I think it really helped me to reach my own conclusions), this is what I think:

  • Row labels: applying them is much clearer compared to just providing more text, which is at the point of need rather than right at the top or down at the bottom
  • Move up/down controls: since the user won't necessarily remember them in chronological order, or may enter something out of sequence accidentally, this will allow them to move the entries so that they correspond to the row labels
  • Visual cue: might not be the most practical, but I do like the idea of making the present/current entry more prominent, either by a brighter colour or larger size or some form of highlighting. May not need to apply visual treatment to other entries.

Would like to see how it all looks when put together, because it might just end-up being a 'Frankenstein design' that doesn't work at all...

0

There are couple of thoughts you should consider for this situation.

  1. Move this Add Housing to the top of the Table and make sure the Table header Sticky. This way its always visible and persistent position irrespective of the number of rows. Whenever you click on "Add Housing" Highlight the row with a light cream

  2. Simply including a "Date Created" column, this will take care of the ascending and descending issue, letting the user know the sorted by. I don't think there is any need for visual queue, because the mental modal of users is already trained or aware that latest is always on the top.

  3. Finally: test the prototype with some real / representative users to check the usability.

  • Business requirements in this project kept the button from being at the top, but either way, the highlight effect is a good point. – invot Mar 30 '16 at 21:40

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.