Closed elynema closed 11 months ago
Hi @elynema, I hope you are doing well. Here's what I have so far -- https://www.figma.com/proto/rNfaZ48YQzwOLfHQWkfrJ9/Media-object-page-re-design?node-id=42-620&starting-point-node-id=1%3A2
@joncameron @Dananji Do you have any thoughts about the "off canvas" functionality in full-screen mode?
Off canvas used in coursera - so that you can see chapter list / transcript while showing video in full screen. That can be helpful in that context. Not sure how much of an effort it would take to add this into the item page. Would offcanvas go in Ramp or on the Avalon side of things? If we did it in Bootstrap, that would be implemented in Avalon since it uses Bootstrap.
This would be cool nice to have, but would probably take some work to implement.
@gfitzwat Matt, we have some feedback on the mockup. Thank you for sharing it!
I'm wondering if we could wrap the long titles around the expand sections button and keep that stationary like the attached image, so the title is always visible and the sections would scroll under the title?
I'll remove the auto-switch for the transcript
I'm not sure about the expand all functionality, we might be able to incorporate a different animation, something from https://animate.style/ I'm not sure how else to contain such a large amount of information consistently.
I agree, it doesn't make sense to have a show / hide if there isn't any content
I'll remove the whitespace
We can make the design responsive and mobile friendly, the current design doesn't appear to be, it will take some work.
I'm familiar with the accessibility requirements, the top priorities is that a users can navigate via the keyboard for keyboard/screen-reader users, and text for the hearing impaired.
@gfitzwat The Expand All animation is fine -- I think we were more curious if there were other design patterns for expand all type of functionality, like where to position the button(s), icons to use, etc. I googled a bit, but the accordion with ability to open multiple sections at the same time seems standard. I couldn't find good examples of what "expand all" and "collapse all" buttons looked like. However, it does seem like the caret is used more often to expand/collapse individual sections, so let's switch to that instead of a +/-
Edit button doesn't need a drop-down arrow since it's a single function button.
Also to be clear about title - we were suggesting that we move the title to be immediately under the player so it gets a full line. But if it's a long title, it would still wrap to a second line, we weren't suggesting that we don't display the full title. I do still feel the title needs to be on it's own line immediately below the player, not inline with the expand all button.
We will need to make the design responsive and mobile friendly; I believe Dananji said she could help with that and we'd probably lay the sections out like we do now for smaller screens.
I'll check with Jon C. to see if he has other feedback.
@joncameron See Matt's and my comments above with new mockup - in particular the location of the title. We discussed changing the '+' icon for expanding sections to a caret 'v' as this is commonly used in accordions and it's confusing currently since it's right next to the add to playlist button which also has a '+' as part of the icon.
@gfitzwat Several other pieces of feedback from Jon C.
@elynema Here's an updated version of the mockup based on the feedback
https://www.figma.com/proto/UD0qaTSrhJ730lUwoYZW01/Media-Collections-Online?page-id=0%3A1&type=design&node-id=18-556&viewport=-2535%2C360%2C1&t=MwZ3wVzrIgmVLv0u-1&scaling=min-zoom&mode=design
I've also mocked a version of the accordion that I believe you will like--
I'm thinking the accordions would scroll, however users could jump to a specific section by a toolbar at the botttom
@gfitzwat
I think that we are very close. I have a couple of small tweaks we'd like to see in the mockups, and then a couple of larger asks.
Small tweaks:
Then we have some larger asks that pertain to actually getting this design implemented:
We also took a look at you accordion scrolling idea. Although I like the idea, we don't think it's going to be a lot faster to the user than scrolling because the section numbers don't carry meaning on their own, so the user is going to have to mouseover a section number to see the section label, which probably won't be that much faster than scrolling through a list of section labels. It's definitely an interesting idea to keep in our back pocket. I suppose if you know you need to go to the end, it could get you there faster.
I figured this might require more discussion, so I put a check-in on the schedule for Tuesday next week.
@elynema I believe the changes are now in html -- Here's a signed in version https://mco.stagingcenter.com/ and a guest version https://mco.stagingcenter.com/guest.html Looking forward to your feedback.
@gfitzwat Thanks for passing along these HTML versions. We have a few hopefully quick items that didn't make it from the earlier mockups:
Slightly more complex - we'd like to try to take advantage of some of the whitespace on the left and right of a wider display by making the content wider. Especially would like to widen the tabbed box on the right if there is space available. Also, the blue box you drew in for the player doesn't look like it matches the aspect ration of our current player?
Dananji took a look at the CSS, and said it was Rivet CSS which she could translate to Bootstrap, so that is good.
Do you have any questions about page width it would be good to discuss in-person next week?
@elynema I don't believe I have any questions at this point, I'll start on these changes
@elynema I believe all of the changes are now in place. The section scrollbars are there, and they will show if you expand the 4th section.
@gfitzwat This is really looking good!
Tweaks that would be nice to see:
@elynema I believe all of the changes are in place now. I've forced the aspect ration to 16/9 in the css.
@gfitzwat
Thanks! I'm not seeing the forced 16:9 aspect ratio in Chrome or Firefox. Any ideas?
Is the "guest" page able to be resurrected or is that a lot of work? It's giving me a 404 now.
@elynema Can you check it out now -- I'm forcing this page to 16:9 with a class "wide-screen" and I've created a new guest page -- standard.html that has a "standard" class locking in 4:3 16:9 Logged in https://mco.stagingcenter.com/ 4:3 Not logged in https://mco.stagingcenter.com/standard.html
@gfitzwat That is much better! The only weird thing is when the screen narrows and the top-menu drops down to a second line, it covers over the top of the media player.
Description
Re-doing the media object page in Avalon to have many components rendered by the Ramp instead of Avalon gives us a chance to re-think some elements of design and layout.
Goals for updated media object page design
Useful Links
Youtube / Vimeo also provide good ideas for potential user interaction
Image of Avalon record with management buttons visible (edit/publish/delete) and also create thumbnail button in the player (camera icon)
Changes to try