[UI Improvement] Suggestion on the timeline page UI

[LumenYoung]

Hi, everyone. I've just updated to the new version and have some experiences on the new timeline UI. I would like to make some suggestion and hope these suggestions can help memos improve.

I think the current timeline is not very easy to interact with.

1. The area to select date is small and ambiguous.

On the mobile device, it is nearly impossible to select the date.

2. The removal of the "back to today button" also makes it hard to navigate. In the meantime,
3. the Date information on the timeline page doesn't change if you were looking at this month or a specific day.

So my suggestion would be

1. Reintroduce the click menu from the previous UI to select date and month. This could help to improve the problem 1. And with it should the back to today button appear when it is not looking at the today's timeline
2. Make the Highlight date information changing when select different dates. Currently, no matter the date, it always show January. But it would makes more sense if the highlight changes to Jan 17 if you were looking at 17. Jan.

[boojack]

A version of a sketch that is still being designed, and the timeline will be displayed in days.

• If it is the current day, it will show create button, otherwise it will show back to the current day;
• Clicking on a date-related component brings up the previous calendar picker.

And if you have more ideas about it, feel free to discuss them right here.

[LumenYoung]

Hey Steven, Thanks for the reply.

Personally I find this version of UI pretty good, besides a few small inputs from my side.

1. Heatmap component is not an ideal part to place many interactions: right now the heatmap view is designed to be clickable on each of the date, and it also has a small date number displayed. I think it is not optimal because 1, it is overall too many targets to click on in this small area (both for desktop or for the mobile device), this leaves large chance of misclick. Therefore I would suggest not to place

2. Also since the heatmap changes the background color of each small cell given the frequency difference, it is actually hard to have a consistent visual experience when you have numbers on it. you can see the inconsistency on the following example.

3. The memo timeline right now essentially has two layers -- monthly timeline and daily timeline. Therefore the highlighted date information (20 Jan) should reflect such difference.

Given the above observations. I think followings are good options to consider:

1. Heatmap interaction: Since the heatmap part is not ideal for complexed interaction, I would suggest remove both the clickables as well as the date information on it for now. The advantage is not only described above, but also leaves possibility for other types of interaction with heatmap. E.g. one might also want to have a look at the heatmap from last month, so it is possible to make scroll left/scroll right available for heatmap component, and this interaction could be alternative way to switch timeline between months as well. Although this is intuitive, it is also not ideal in the sense that the switching logic of months and of days are not consistent -- you switch days by using the calendar widget but scroll on heatmap to switch between months, so I think this could be discussed, but it is probably a good thing to leave heatmap not occupied for calling the calendar widget.

2. The display of date: Since we have two kinds of timeline -- monthly and daily. We could make such difference more explicit by displaying e.g. "Jan(the large part) 2024" for viewing the month and "13(the large part) Jan" a day. This saves the effort to automatically change the highlight when you are scrolling down, and it is also very clear what you are looking at.

[LumenYoung]

Another additional input from others suggestion at the chat here:

The timeline was intended for review purpose of each day's notes. So the order of memos should be ascending in creation time, showing how memos are created throughout the time span.

This was the old behavior before the last UI refactor but now memos are presented in descending order, which IMO contradict the intended usage of timeline. I can also observe myself using timeline less after this change, so I would also like to discuss which behavior is more natural for other users.

[LumenYoung]

@boojack Since we are talking about the future timeline section. I also would like to know how do you envision the usage of this section.

One thing that comes to my mind today is that I find that archived memos are not shown at the timeline, which is kind of interesting. If you want to have a glance on the things happened during that day(which is exact reason you might want to use timeline), would it be more reasonable to include all the memos created in that day, regardless of whether it has been archived? Or provide an option to let user choose whether to also display the archived memos?

One use scenarios for example, is when you are archiving todos when it has been finished (or something to buy), it is natural to archive them since they are not useful for the present work, but it would make sense to bring them into the vision when someone is glancing their past days.

So it kinds of puzzle me whether it is a good thing to offer this option to include archived memos into the timeline. I would like to know if you think it is worth considering. Thanks!