search

oppia / oppia

A free, online learning platform to make quality education accessible for all.
https://www.oppia.org
Apache License 2.0
5.77k stars 3.93k forks source link

UI Issues in Learner view on smaller viewports #9579

Open dchen97 opened 4 years ago

dchen97 commented 4 years ago

Describe the bug There are several UI/UX issues when you're playing through an exploration in smaller viewports.

To Reproduce Steps to reproduce the behavior:

  1. Start any lesson on Oppia
    1. Change the viewport such that you see the hamburger menu
    2. Observe UI issues

Observed behavior A clear and concise description of what you expected to happen.

Expected behavior

Screenshots

Screen Shot 2020-06-18 at 11 08 48 AM

Desktop (please complete the following information; delete this section if the issue does not arise on desktop):

Additional context Add any other context about the problem here.

seanlip commented 4 years ago

@dchen97 I don't think the "Expected Behavior" section is correct?

Also FYI the "No link to author profiles" and "No entrypoint for user to submit feedback" parts were deliberate because we wanted to reduce clutter on the mobile view due to lack of space. Do you think they are necessary?

dchen97 commented 4 years ago

Sorry updated with right information.

I think the "No link to author profiles" would be fine if we had some way for the users to trace their way back to a page with the lesson information and author names. Considering we will be emphasizing adding author names into our attribution guidelines in the near future, I would argue that its important that the users have some way to know who made each lesson.

For the user feedback, I think its important to include. there seems to be plenty of space along the top and bottom and I think its important the users at least know how they can enter feedback if there's no direct way to do so here. Mobile users make up a significant amount of our user base, and if there's no way for them to submit feedback, then we're taking away the ability for many users to improve upon the lessons. I imagine this would likely also be the entrypoint where users can report lessons for moderation, and we must make sure that's available on mobile.

seanlip commented 4 years ago

OK, sg, thanks! Assigning @mschanteltc for this issue so she can provide mocks accordingly.

mschanteltc commented 4 years ago

Hi everybody,

I created mobile portrait, mobile landscape, and tablet mocks for the Exploration Player: P Exploration Player L Exploration Player T Exploration Player

The content is formatted so that it is consistent with the Revision Player's mocks.

These mocks do not have the Oppia logo at the top nor a hamburger menu. The back navigation brings the user back to the page they clicked the exploration from: either the topic page or chapter list. Once the user is on the topic page, they will have access to the hamburger menu. In mobile portrait view, adding the Oppia logo would affect the display of the exploration's name, which is why it is omitted.

I can add accessibility to authors' profiles and user feedback if needed as I expect those to be at the bottom of the page and not obstruct the user's learning.

@dchen97 What do you think of these mocks?

dchen97 commented 4 years ago

Thanks for putting these together Chantel! These look great, and completely understand the reasoning of keeping the logo and hamburger menu on the topic page so that the lesson title isn't obstructed. It would be awesome if we could add the feedback and author profile entrypoints to the bottom if possible. If anything, I'd prioritize adding the feedback entrypoint, since we'll have that link back to the topic page using the back button.

Diana Chen Growth Team Lead | Oppia Foundation E: diana@oppia.org

On Fri, Jun 19, 2020 at 4:30 AM Chantel notifications@github.com wrote:

Hi everybody,

I created mobile portrait https://xd.adobe.com/view/bcf79207-32d2-469d-608b-4269c9747657-cac6/screen/ce7c13ce-eab9-4a4f-96ed-fa816d1cf894/P-Exploration-Player, mobile landscape https://xd.adobe.com/view/bcf79207-32d2-469d-608b-4269c9747657-cac6/screen/24b21c4e-8520-49da-9558-9893de981854/T-Exploration-Player, and tablet https://xd.adobe.com/view/bcf79207-32d2-469d-608b-4269c9747657-cac6/screen/e18780ec-d414-40ae-ac77-289f16112591/T-Exploration-Player mocks for the Exploration Player: [image: P Exploration Player] https://user-images.githubusercontent.com/22177674/85125921-4c0e8780-b1e1-11ea-8db1-76e10adb20f5.png [image: L Exploration Player] https://user-images.githubusercontent.com/22177674/85125916-4add5a80-b1e1-11ea-8de9-67c8acad5dba.png [image: T Exploration Player] https://user-images.githubusercontent.com/22177674/85125913-49139700-b1e1-11ea-9a77-d74f4c4439b8.png

The content is formatted so that it is consistent with the Revision Player's mocks.

These mocks do not have the Oppia logo at the top nor a hamburger menu. The back navigation brings the user back to the page they clicked the exploration from: either the topic page or chapter list. Once the user is on the topic page, they will have access to the hamburger menu. In mobile portrait view, adding the Oppia logo would affect the display of the exploration's name, which is why it is omitted.

I can add accessibility to authors' profiles and user feedback if needed as I expect those to be at the bottom of the page and not obstruct the user's learning.

@dchen97 https://github.com/dchen97 What do you think of these mocks?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/oppia/oppia/issues/9579#issuecomment-646586350, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC32BW5EARU77KH5V35YIQ3RXND5NANCNFSM4OCA7AHA .

seanlip commented 4 years ago

@mschanteltc -- any progress on this?

mschanteltc commented 4 years ago

I created the author profile and feedback UXs. Please take a look at the mocks at let me know what you think!

dchen97 commented 4 years ago

Thanks Chantel! Overall, I think it looks great. My main concern is that I'm not sure users will be able to tell the difference between the minimize and close options for the Feedback submission form, and there's currently no way for a user to know after they minimize the feedback form that they have draft feedback that hasn't been submitted yet. Do we need to have this functionality? If so, can we add that indication when a user is currently in the process of submitting feedback? Otherwise, I'd recommend just removing it to simplify the UI (and to make it consistent with the Feedback submission UI on the site today).

Thanks again!

On Thu, Sep 3, 2020 at 11:55 AM Chantel notifications@github.com wrote:

I created the author profile and feedback UXs. Please take a look at the mocks https://xd.adobe.com/view/bcf79207-32d2-469d-608b-4269c9747657-cac6/screen/ce7c13ce-eab9-4a4f-96ed-fa816d1cf894 at let me know what you think!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/oppia/oppia/issues/9579#issuecomment-686695012, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC32BW4R4PR4DM2T3IWHXJTSD7RD3ANCNFSM4OCA7AHA .

mschanteltc commented 4 years ago

Thanks for the insightful feedback Diana! I decided to use an indicator to show that there is an ongoing draft. The icon changes from a "!" to "..." and remains this way if the draft is collapsed. PTAL at the mock and let me know what you think.

dchen97 commented 4 years ago

Thanks for revising! I like the creative change on the indicator, but I worry it may be a bit too subtle for most users to notice (even I didn't catch it at first). Perhaps it may be good to add a small colored icon (something like the red dots you see for notifications?), a small toast at the bottom, or some other additional way to bring attention to it? Here are some bad mocks just to help portray what I'm thinking (but am open to any other ideas as well!): [image: Screen Shot 2020-09-05 at 12.36.18 PM.png] [image: Screen Shot 2020-09-05 at 12.38.56 PM.png]

On Fri, Sep 4, 2020 at 5:27 PM Chantel notifications@github.com wrote:

Thanks for the insightful feedback Diana! I decided to use an indicator to show that there is an ongoing draft. The icon changes from a "!" to "..." and remains this way if the draft is collapsed. PTAL at the mock https://xd.adobe.com/view/bcf79207-32d2-469d-608b-4269c9747657-cac6/screen/ce7c13ce-eab9-4a4f-96ed-fa816d1cf894/ and let me know what you think.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/oppia/oppia/issues/9579#issuecomment-687490045, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC32BW2G4MSJW6PG22QYVFTSEGAW5ANCNFSM4OCA7AHA .

mschanteltc commented 4 years ago

Thanks for the advice Diana! I wasn't able to see the images you shared, but I believe I understood the idea you had in mind. I reverted back to the "!" icon and added a yellow dot with the ellipsis. Yellow felt like the appropriate color because it conveys something in progress and does not need immediate attention. PTAL at the mock and let me know what you think.

dchen97 commented 4 years ago

Thanks Chantel! Sorry for the delay but I really like this iteration! It all looks good to me.

dchen97 commented 4 years ago

Just following up on this - are there any other open questions or can these mocks be finalized?

seanlip commented 4 years ago

I think these can be considered finalized!

SanjaySajuJacob commented 1 year ago

Hi @mschanteltc , are you currently working on this issue?

seanlip commented 1 year ago

@mschanteltc isn't working on this, she was preparing the mocks. It looks like the mocks are fine so I think this issue can be worked on. I've deassigned her!