Opposing sorting direction

Question

The problem: We have 2 screens in our app where the scrolling chronological is reversed (one page scroll in ascending chronological order and the other descending). From a UX point of view, this seems problematic and inconsistent UI behavior.

Page 1: Is like a scrolling calendar list where the current day is at the top of the list and the user scrolls down (past/present -> future) to view upcoming calendar items. This makes good sense because the users will start from the day they are on and rarely have the need to look at previous days in their calendar.

Page 2: Is more like a notice board where the user views notes from others. It is most important for them to see the upcoming and current note items first and then scroll to see previous notes (newest -> oldest).

As you can see the chronological order of the scrolling direction is reversed between each page.

Will this be a big problem for the users? How might I go about reducing any possible confusion?

Answer 1

When in doubt, I find that thinking about how a feature would work in the physical world is a good clue to how the digital feature should work.

In the calendar on page 1, it makes sense that the items in the future are below the current items, as this is how every calendar is designed. Both digital and paper calendars move left to right (in western cultures), top to bottom, first page to last page, as they progress forward in the timeline.

In the notice board, users will want to see the most relevant items at the top, and those are going to be the newest ones. As new messages come in they "push" the older messages down, in the same way that new messages on a physical noticeboard would be pinned on top of the older messages, and you have to move them out of the way to see the older ones.

Given the above I think your ordering is fine as it is, however you could use little visual hints to underscore the differences. For example, page 1 could be formatted in a more calendar like manner, and on the notice board you could put a border around each notice that is reminiscent of a real life post-it note.