Implementation for Course Panel (2/2)

[cloudyyoung]

(Re-phrased partially from #232)

Background

The current desktop user interface is problematic, which doesn't provide a valid user experience to perform primary actions and accomplish user tasks:

1. The assessment list panel and pdf panel are not incorporating
2. Edit assessment dialogue implementation is different from what was defined in the prototype

These two problems must be resolved before we can publish this project as a complete product. (And expecting this issue to be resolved before any other issues addressing the same components mentioned below)

PDF Viewer

On both desktop and mobile screens, PDF viewer must not be a nested container with its own scrollbar, as it creates nested scrolling behaviour and introduces confusion. Though it might be misleading for developers, PDF Viewer should simply display all pages into the static content flow.

Assessment card & PDF pages

Though #229 has mentioned to scroll to the corresponding PDF page on clicking for an assessment, the following prototype demonstrates a furthering improved behaviour, that the assessment cards and PDF pages are bind together when scrolling.

https://www.figma.com/proto/IVhWdzrln3zC3MRo63mkW9/Prototype-v3.0?page-id=84%3A3916&node-id=84%3A3917&viewport=-4659%2C300%2C0.37&scaling=scale-down&starting-point-node-id=84%3A3917

Screen.Recording.2023-03-10.at.2.54.01.PM.1.mov

Again, please refer to the website that we mentioned many times, and see how its user interface is behaving as inspiration. Though our implementation would be a little different.

[cloudyyoung]

Here's a video demonstrating how user would perform actions with a long list of assessment, in case the description in this Issue and #253 wasn't clear enough to anyone.

Screen.Recording.2023-03-22.at.1.08.54.PM.1.1.1.1.mov

Screen.Recording.2023-03-22.at.1.26.32.PM.1.1.mov

1. User need to go up and down to check out assessments in the lower part of the assessment list and PDF content. This simply proves that a user won't be able to perform primary actions and accomplish intended tasks with a good user experience, though we provide such functionalities.

It allows the user to perform all the primary actions it was intended to do.

Please be advised that providing functionalities and usability of functionalities are to be considered separately and at the same time. The video has shown some struggling with using the interface for all users.

2. User open and close edit assessment panel, then users lose their scrolling position in the assessment list. Namely, every time users finish editing an assessment, they must scroll all the way back to the bottom again to catch up their working progress.
3. Nested scrolling bar behaviour is demonstrated in the second video. Please notice that, scrolling PDF viewer scroll bar might sometimes but not always trigger the page scroll bar. I believe this needs no further explanation how much confusion would bring to users.

[tim-macphail]

Yes there are definitely flaws in the UX, it just seemed like you were saying it wasn't possible to perform primary actions. I agree, we will need to change the way the the page scrolls. To be honest, I don't really know where to start making it scroll the way it's described in the prototype, so I'll leave this to someone else