Faster access to venue map from timetable

[ZhangYiJiang]

Recently we added venue maps for timetable venues. This is a great new feature, but there's no easy way to access that page from the timetable. Currently the flow from timetable to venue is

Scroll down to modules table > Scroll down to module timetable > Tap on the slot whose venue you need

This is problematic because it's too many taps and too much scrolling, and since the module info page contains every lesson, you need to hunt for the lesson you need to go to. Ideally there should be a way to get from the timetable to the venue page immediately. Currently my thinking is

• On mobile, a long tap causes a bottom menu to open a bottom action sheet (need to test on iOS to make sure this works properly). Currently I can only think of one action, but we can have others in the future.

  

• On desktop we can have a small triangle or triple dot button on the top right hand corner of the lesson that can open the same menu, but displayed inline beside the lesson

@jiholim Can has UI review for this?

[liaujianjie]

Can I take this?

Some considerations:

• Do any of the current UI libraries have action sheets? If no, should we roll our own (possibly can use this opportunity to start our own UI library) or is there a go-to library for this?
• Action sheet UI for web?
• Is there a need to differentiate the action sheets for iOS and Android?

[ZhangYiJiang]

@liaujianjie I'm still not 100% sure about the UI. Can talk to @jiholim about this.

The main concern is whether we want different ways to open the menu on desktop vs. mobile. I think it would work, but it's really hard for existing users to discover this mode of interaction, because users don't expect this sort of thing from a website. Another option for desktop is to allow right click, since that's usually the equivalent of long press on mobile.

That said

• No. We do have something that looks like it on the module info page, but that's the right hand menu on desktop. In this specific case on desktop we want something like Bootstrap's dropdown menu (which we already use)

  

  Building a generic component for this may be difficult, but it might be worth it. I can't find any pre-made library for this.

• No need for different UI for iOS and Android

If you have any idea feel free to post it here.

[jiholim]

Here are some ideas we can consider to tackle the problem.

1. Long press on mobile + Right click on web

This approach kind of solves our problem but some of the drawbacks can come from inconsistency in the user interaction on different platforms. As @ZhangYiJiang has mentioned, it’s difficult for users to discover the new form of interaction on mobile and will cause some confusion when introduced. We might need to put some banners (like what we currently have for the update announcement) to educate the users on the new interaction.

2. Two different click actions on the lesson card

As shown in the image, we can try implementing two different click actions on the lesson card. When the user clicks on the underlined venue link, it will lead to the venue page. Meanwhile, when he clicks on the triple dot button, he can move the lesson card around as usual.

@ZhangYiJiang and I have discussed about this and we had a concern that the hit range would be too small on mobile.

3. Small popover venue button on top of lesson card

This is a new approach that I just thought of and it goes like this:

When the user click on any lesson card, there will be a mini popover venue button on top of it (shown in the mock ups). He can go straight to the venue page when he clicks on the venue button or just move around the lesson card as usual.

This might be better than implementing action sheet (which is usually used to present 2 or more choices) since action sheet on web requires two steps to move around the lesson card (click the card -> click the option) while this interaction allows users to move the card immediately just like the current one (one step)

However, 1) the popover button will block a small portion of the lesson card above the clicked one (if any) and 2) different colored button is needed for dark mode (unless we set the button’s bg color as orange with white icon)

[liaujianjie]

This is trickier than I thought.

1. Long press on mobile + Right click on web

• Actually, isn't this the default behaviour for a lot of interactions on iOS?—long press for action sheet or context menu. I'm not sure if it's the same for Android though.

2. Two different click actions on the lesson card

• What's the ideal height range for each lesson card? If we knew how large the cards can we stretch then we can decide what kind of interactive elements we can have in it.
• I think the triple dot icon doesn't communicate the idea of "changeable" or "movable" well. Plus, it's kinda the Android icon for "more". But then again, any icon that's more descriptive would probably be too distracting.
• I played with your design a little and came up with this:
  
  1. 👍 Clearer segmentation of interactive elements within a card
  2. 👍 Icon to suggest that clicking on venue will navigate the user away from the timetable
  3. 👎 Will require a secondary colour for each card colour
  4. 👎 Too overwhelming when timetable has a lot of these cards

3. Small popover venue button on top of lesson card

• Doesn't this take up way too much space on mobile?
  

---

Unlikely possibility but just throwing it out here: We can possibly change the interaction for choosing the lesson/tutorial slots to use drag-and-drop instead of the current implementation. Might cause a mass confusion if users are not educated properly about the new behaviour.

[ZhangYiJiang]

• Long press being the mobile counterpart to right click on desktop is well understood by most users. The problem is that most users don't expect websites / webapps to support proper context menus

• I think you misunderstood - the triple dot button opens the menu, while tapping / clicking everywhere else would still do the same thing it does now. I don't think splitting the lesson is an interesting idea, but I don't think it is clearer than the original proposal to underline the venue.

• It shouldn't take up that much space. The menu wouldn't have such a big hit area.

• Haha, we won't go back to drag and drop (if you're not familar with v2, we used drag and drop there http://v2.nusmods.com/timetable/2017-2018/sem1) - there's too many issues.