Eliminating the sidebar in the media modal

Weekly Meetings (Calendar)

Bi-Weekly Test Team Chat: Tuesdays 11:00 UTC

Bi-Weekly Test Team Triage: Tuesdays 11:00 UTC

You can join these meetings from the #core-test Slack channel.

Please drop by any time in SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. with questions or to help out.

: Media modal with sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. exposed, iPhone 5

: Media modal with sidebar exposed, Nexus 5

Killing the sidebar in the mobile media modal seems the key to opening up a good design. Start there and ask questions about selection, particularly multi-select, and access to image detail views that feature full-width, easy-to-discern images. Selection and image views are the two most important things. They need to be readily accessible, and they must flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.

Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context

. Do we use a selection toggle like the media library’s grid view does? Are image views accessible during multi-select? The media library’s grid view does not make image views accessible during bulk selection, but interfaces like G+ make them accessible with a tap. Should the default action be selection or image detail view? Does this change in different flows? The primary multi-select flow is uploading images from the camera roll, which will likely use the selection mechanism provided by the Android and iOSiOS The operating system used on iPhones and iPads. file choosers. How does this affect our multi-select approach within the media modal?Gallery/camera roll interfaces are not the same as a modal inserting images and galleries into a post. How much can we borrow from these interfaces? Mobile, multi-select, access to big images. These must be solved in a flowful way.

The media library grid view avoids a sidebar via an attachment details modal.

: Decently sized image on top.

: Swipe up to scroll down to the details.

Grid view handles multi-select via a toggle button.

During multi-select, image detail views are unavailable. The G+ app on Kitkat handles this with an overlay on the image thumbnails.

: The multi-select toggle requires digging in a menu.

: Tap the overlays to see a big image.

: Selection is preserved in image view with the top-left overlay.

A mockup of the media modal with sidebar eliminated.

#desktop-bias, #media, #modal

Daniel Klose 8:56 am on October 22, 2014

Hi Ryan,
Have you tried the Facebook App recently? They’ve changed the behaviour to a default grid view, where a tap on the image selects it and holding the image opens the fullwidth view and its edit functionalities. Since this workflow is the most unified across Windows Mobile, iOSiOS The operating system used on iPhones and iPads. and Android (someone needs to confirm as I only have access to iOS) I would assume copying from there makes most sense for a diversified userbase?

What do you think?

Best,
Daniel
- Ryan Boren 1:39 pm on October 22, 2014
  
  Screenshots of the FB app.
  
  https://make.wordpress.org/flow/2014/10/20/eliminating-the-sidebar-in-the-media-modal/screenshot_2014-10-22-08-31-00/
  
  https://make.wordpress.org/flow/2014/10/20/eliminating-the-sidebar-in-the-media-modal/screenshot_2014-10-22-08-31-26/
- Ryan Boren 1:58 pm on October 22, 2014
  
  As a long time Rdio user, I’ve done a lot of longtaps. I’m not sure I like having something as important as fullwidth hidden under a longtap, but it does allow nice things like avoiding selection toggles and has the hope of being a nice flowFlow Flow is the path of screens and interactions taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s being unselfconscious and in the zone. Flow is what happens when difficulties are removed and you are freed to pursue an activity without forming intentions. You just do it.
  
  Flow is the actual user experience, in many ways. If you like, you can think of flow as a really comprehensive set of user stories. When you think about user flow, you’re thinking about exactly how a user will perform the tasks allowed by your product.Flow and Context
  
  . Facebook is the first app I’ve noticed using longtap like this. Anyone know of others? Typically longtap brings up a secondary menu, mimicking a right mouse click. I vaguely recall longtap coming up during the media lib grid view work, but don’t remember how deeply it was considered.
  
  In the final phase of editing a gallery where selection is no longer a concern, would a longtap still be required? The action I want at my fingertip during gallery editing is fullwidth view access.
  
  The FB app provides longtap feedback. Can that be done on the mobile web?
  
  What would desktop do if mobile went longtap?
teamadesign 4:47 pm on October 22, 2014

What if longtap revealed our proposed icons? This would allow for multi-select and editing from the media view, but allow for a single tap to go directly to full-width view. This would then allow the desktop to use a hover state to reveal those icons.
- Ryan Boren 5:01 pm on October 22, 2014
  
  I don’t think I’d like the icons in any context. The full-width view would also be the details view and all of the things the icons offer can be done from there. This seems to be how every gallery interface I use does it. Single tap to get a details view that features full-width images and the ability to edit, etc. That’s a very common pattern that flows well.
Ryan Boren 5:23 pm on October 22, 2014

Expanding from mobile, the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. should be dropped from all devices, including desktop. Adding metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. in that cramped space is not appealing on even a wide monitor. The sidebar is a big reason why some people go to media-new.php and upload.php first and avoid the modal until they are ready to insert into the post. The attachment details modal from the media lib grid view needs to be in more places. I’d love it when editing a gallery, for example. I could actually see the images and flip through them one by one editing the caption in an input that isn’t confined to the width of a thumbnail.

Welcome

Weekly Meetings (Calendar)

Share this: