Media object page re-design

[elynema]

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

• move transcript closer to media player so that users can view them both at the same time since they are synchronized. Does Aviary or Youtube have good models we should adopt?
• Keep viewer and transcript visible even when objects have very long list of sections below the player
• consolidate edit/publish/delete/create thumbnail buttons into an action bar
• reduce space above video at top of page so video is primary element

Useful Links

• Aviary example with transcript to the right of player in a tab next to Details
• Avalon record with many sections and very long Details section
• Avalon record with transcript

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

• Move title directly below video above the action bar (like Youtube)
• Create one action bar below title (below video / audio) with create timeline and share buttons on left and create thumbnail, edit, publish, and delete on the right
• bring video/audio player up to the top of the page below the menu bar with little whitespace
• Move transcript up into a tab next to Details
• make Sections section scrollable
• add a show more/less to Details tab for records with tons of metadata
• experiment with expanding width of columns to utilize whitespace on left and right
• experiment with ways to pin video and transcript if scrolling down?
• other ideas?

[gfitzwat]

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

• I'm thinking the buttons under the video would shift under the title if the title was longer, and maybe we went with the smaller buttons. To save space, I've made the edit actions a dropdown.
• Clicking on the video or transcript tab should automatically open the transcript which scrolls.
• I need to add a show/hide more with a longer Details.
• I'm thinking if the user clicks full screen, the Details/Transcript/Files tabs could go off canvas with a button so the user could view the transcript at full screen, just an idea -- an example of off canvas https://getbootstrap.com/docs/5.0/components/offcanvas/

[elynema]

@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.

[elynema]

@gfitzwat Matt, we have some feedback on the mockup. Thank you for sharing it!

• We like the line of action buttons below the player. Edit needs to be its own button, not accessed through a drop-down. I'm not sure if we can find a good way to keep the other two (publish/unpublish and delete) hidden in a drop-down because I'm not sure what you would call it (maybe manage?). We also need to add a button to Create Thumbnail. Because the second you click on Create Thumbnail is important, it probably shouldn't be hidden behind a drop-down (it grabs the current frame in the video and sets that as a default poster for the item).
• Most titles are going to wrap to a second line, so let's try just having the title be the first line under the player with the action button row below that
• Manager buttons (edit, publish/unpublish, delete, create thumbnail) could be left-aligned with user buttons (share, create timeline, add to playlist) right-aligned
• We'd like to get rid of the auto-switch to Transcript when click on the video. We want to try having that be manually activated (more accessible and less unexpected behavior).
• We like the scroll of the list of sections below the video player. We probably need a [small] header for that section that includes the # of items. Maybe on the left something like "62 sections" and the Expand All button on the right. Expand All needs to be moved down closer to the list of sections since it acts on them rather than the video itself.
• Do you have any clever ideas about how to handle that Expand All functionality? We don't love the current expand all if there's some other design pattern we might leverage.
• If there is nothing below the metadata component on the screen, I'm not sure of we need the show more / show less functionality on the metadata tab. What do you think?
• There is still whitespace above the video we can compress in order to make the scrolling section below the player as visible as possible above the fold.
• Is this design responsive? What would it look like on a mobile device?
• Are you familiar with accessibility requirements? That's the other piece that came up when we showed this initially - whether this design would present any particular accessibility challenges

[gfitzwat]

@elynema

• 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.

[elynema]

@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.

[elynema]

@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.

[elynema]

@gfitzwat Several other pieces of feedback from Jon C.

• Jon agrees on moving the title above the buttons below the player and giving it a full line. This will push things down a bit and leave expand all on its own line. I think we'd like to see how that looks.
• Order of buttons below player should be: Edit, Manage, Create Thumbnail. Historically, we have had primary buttons as shaded and secondary buttons as white. To remain in line with that, Edit should be a shaded button.
• Expand all needs to change to collapse all when clicked.
• Can you add some additional details to the sections mockup based on real data? Here's an example record that actually has segments within a section. We need to keep the duration elements in parentheses, but it would be nice to have them presented in a way that can be more easily visually scanned. Perhaps right aligning them? Other ideas?

[gfitzwat]

@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

[elynema]

@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:

• If there is only 1 section (as on the second figma mockup), then we'll just have that section auto-expanded, so it doesn't need a caret to collapse it
• Edit button shouldn't have a caret, as it's a simple button
• We are going to move Delete functionality to the edit page, so the Manage button can just say "Publish" with no caret
• For the first figma mockup, can you move the title above the button row like you did in the second mockup?
• Looking back at the current Avalon media object page interface, the user buttons (Create Timeline, Share, add to playlist) are on the left below the player. To retain that consistency, we think it makes sense to flip those buttons with the edit buttons. So the order below the player in the button bar would be: Create Timeline, Share, add to playlist (starting on left), then a gap, then Edit, Publish, Create Thumbnail (right-aligned).

Then we have some larger asks that pertain to actually getting this design implemented:

• Can you make a third figma mockup that shows what this would look like if the user is not an admin? In that scenario, there would be no Edit, Publish, or Create Thumbnail buttons. Everything else would stay in the same place.
• Are you able to provide us with CSS that provides arrangement of buttons, etc. on the page? I know you have been working in figma, rather than HTML, and so I'm not sure how much of an ask that is. I know you've done the actual HTML / CSS layout for the AMP design work in the past. IF you can do that even in Rivet, it would probably be pretty easy for us translate into Bootstrap, which we use in Avalon (or doing in Bootstrap would work, too).

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.

[gfitzwat]

@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.

[elynema]

@gfitzwat Thanks for passing along these HTML versions. We have a few hopefully quick items that didn't make it from the earlier mockups:

• Please move the title of the item above the row of buttons to directly below the player
• The mockup is missing the Expand All button
• Can you add the section numbers and durations back to each section like in the figma mockup?
• The section box is supposed to scroll independent of page scroll. Is that something you can implement here so we can copy it?

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?

[gfitzwat]

@elynema I don't believe I have any questions at this point, I'll start on these changes

[gfitzwat]

@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.

[elynema]

@gfitzwat This is really looking good!

Tweaks that would be nice to see:

• Get rid of the add to playlist buttons in the section list that's next to the caret. We're just going to have a single add to playlist button up in the list of buttons
• The right hand tabbed component (Details, Transcript, Files) should flow below the sections, rather than above the video content, in the mobile view.
• The Expand All button should say "Expand sections" (where x = number of sections) and it should go below the Edit / publish buttons on its own line right-aligned on the page (basically just above the expand/collapse carets). The button was in this place originally, but was next to the title. We moved the title up, but I think we want to keep expand all down next to the sections.
• We noticed that the aspect ratio of the video player changes as you re-size the screen. That won't work for us in a real implementation, as we have fixed aspect ratio to work with. That may need to be something we deal with on our side, though.

[gfitzwat]

@elynema I believe all of the changes are in place now. I've forced the aspect ration to 16/9 in the css.

[elynema]

@gfitzwat

Thanks! I'm not seeing the forced 16:9 aspect ratio in Chrome or Firefox. Any ideas?

Private Zenhub Image

Is the "guest" page able to be resurrected or is that a lot of work? It's giving me a 404 now.

[gfitzwat]

@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

[elynema]

@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.