Media Modal: Selection Model, Full-width Images, Gallery Flow, and Click-to-view/edit

In this 2015 thread, I listed some of my media modal requirements. In light of possibly changing the selection model and click-to-view/edit flow of Calypso’s media modal, I thought I’d post the list here.

  • Resolve accidentally inserting individual images instead of galleries. This is annoying on desktop and even more annoying on mobile where cleaning up after inserting a bunch of images is more difficult.
  • Provide access to full-width images during image insertion and gallery creation flows. Currently, when making galleries, I have to take off my bifocals, stick my face in the screen, and scrutinize tiny thumbnails. I correlate the thumbnails with full-width images viewed in the camera roll. I flip back and forth between camera roll and the media modal, hoping I’m selecting the thumbnails that correspond to the images I want. I’ve sat with clients helping them add galleries to their sites. We huddle around a laptop looking at tiny images, flipping back and forth with the camera roll or gallery app. We have an industry of people making awesome themes for showcasing photos and galleries, yet creating those galleries is a presbyopic strain that makes you feel old. Nobody likes software that makes them feel old or stupid. I feel the lack of access to full-width images in insertion flow in every app and mobile web interface I use.
  • Keeping with the full-width trend, provide fill-width input fields, particularly for captions. Inputs constrained to the width of thumbnails or sidebars are really difficult to use. Scrolling through inputs is not enjoyable on phones, especially on iOS which tends to trigger what I call “boxed input scrolling”. You can’t move the cursor through text lying beyond the confines of the input box. Full-width captions will be a huge improvement.
  • Allow arrowing through images in a set similar to what is done in the attachment details modal. This accommodates the full-width captions mentioned above. Tap/click/swipe through images, captioning as you go. As someone who creates a lot of captioned galleries, I really look forward to this.

#click-to-view-edit, #editor, #galleries, #gallery-flow, #media, #media-model, #selection-model

Scenes from an iPhone 6+ photo publishing session

These are scenes from a publishing session on Horizon with a post having two individual images and a featured image.

Featured image is zoomed and pixellated in preview

IMG_8964

Featured image is zoomed and pixellated

Panning that results in flicker and jumping. Exiting the editor and previewing again showed a slightly better view.

Funky offline styling

IMG_8969

Funky styling around Offline indicator

Stuck offline publishing

Tapping Publish while offline left me stuck here:

IMG_8969

Publish button remains inactive and Saving… persists after publishing while offline

Failed publication notice

Here’s what the editor looks like after failed publication.

IMG_8973

“Publishing of post failed.” notice shows at the bottom of the screen after the featured image

 

Detached dot overlay

The dot icon that overlays the pencil when loading/offline/syncing (under what conditions does this appear) detaches when attempting to scroll.

IMG_8977

“Dot” masterbar overlay detaches when scrolling

Below the fold confirmation

The post published confirmation runs offscreen and is obscured by the word counter.

IMG_8979

“Post published on…” confirmation shows at the bottom of the screen, beneath the featured image, with the second line running offscreen resulting in an obscured View Post button.

Inline image toolbar

Tapping an image brings up both the inline image toolbar and the cut|copy bar.

IMG_8974

Both the inline image toolbar and the inline cut|copy bar show on tap.

Sometimes, tapping an image doesn’t show the image toolbar.

IMG_8975

Only the cut|copy toolbar shows in this instance

Gallery preview and scrolling

IMG_8962

Truncated preview with stuck scrolling

Also,

Stuck gallery preview scrolling: https://github.com/Automattic/wp-calypso/issues/3389

Media scrolling: https://test.wordpress.com/2016/04/14/media-scrolling-the-media-modal-gallery-on-ios/

Scroll bleed

Here, the underlying layer shows through at the bottom while scrolling. Classic #scroll-bleed.

IMG_8970 (1)

Feels

I had to back out of editor sessions and do page reloads to complete the post. #frustrated

The inline image toolbar has been misbehaved on iOS for the duration of its existence. The experience is a cluster of #painpoints that leave you  #confused #frustrated and #discouraged.

Stuck gallery preview scrolling and preview truncation are gallery flow killers on both desktop and mobile. https://test.wordpress.com/2016/02/24/improving-captioned-gallery-flow/

#anecdote, #editor, #gallery, #gallery-flow, #ios, #journey, #media, #media-modal, #painpoint, #phablet, #post-flow, #safari, #sesh, #session

Media: Scrolling the media modal gallery on iOS

When scrolling the media modal’s gallery on iOS, the pencil icon pops up on the images you happen to touch while scrolling. Tapping the top right corner of a thumbnail that isn’t displaying the pencil will both show and actuate the pencil.

photo (2)

Overlay on hover is all up in our touch screens.

This screencast shows gallery scrolling in passing.

#desktop-bias, #galleries, #gallery-flow, #ios, #media, #media-flow, #media-modal, #mobile, #phablet

Captioned Gallery Flow

I did a walkthrough of a captioned gallery flow in Calypso on mobile, and the flow for adding captions (or editing any meta) is pretty hidden. There’s a suggestion on the table to make the “Edit” step part of the normal flow in order to make captioning easier.

Here is a visual record in screenshots and my walkthrough video for reference:

#captioned-gallery-flow, #galleries, #gallery-flow, #images, #media

Improving captioned gallery flow

I make captioned, ordered galleries everyday as part of my visual record flow. I also make them for/with friends and clients working on portfolio sites. WordPress gallery flow has always lacked access to full-width, comfortably viewable images. Calypso continues this lack and also removes access to uncropped images from gallery flow. Lack of uncropped, full-width images in gallery flow along with broken gallery upload on iOS devices and disrespect for upload order hamper gallery flow for me to the extent that I still must use wp-admin for galleries on all devices. For details, see The impact of upload ordering and cropped thumbnails on captioned gallery flow.

Fixing the following would ease my gallery flow and prevent bailing to wp-admin. These impact me every day. One of them is a blocker to creating galleries on iOS.

Editor, Media: Gallery flow lacks access to uncropped, full-width images

https://github.com/Automattic/wp-calypso/issues/3532

Fixed: Editor: Media: Stuck scrolling in gallery preview

https://github.com/Automattic/wp-calypso/issues/3389

Related reading:

https://test.wordpress.com/2016/02/10/galleries-the-impact-of-upload-ordering-and-cropped-thumbnails-on-captioned-gallery-flow/

https://test.wordpress.com/2016/02/11/editor-media-stuck-scrolling-and-scroll-bleed-in-gallery-preview/

 

#captioned-gallery-flow, #galleries, #gallery-flow, #images, #media

Galleries: The impact of upload ordering and cropped thumbnails on captioned gallery flow

Random upload ordering and the lack of uncropped images in gallery editing flow frustrate captioned gallery flow enough that I fallback to wp-admin to make captioned galleries.

Screen Shot 2016-02-09 at 10.46.46 AM

The media modal in gallery edit view. Cropped thumbnails make ordering and captioning difficult.

 

Calypso gallery editing flow does not offer access to uncropped images. Cropped thumbnails make ordering and captioning galleries difficult. I’m missing necessary information when given only cropped thumbnails. The core WordPress media modal offers an uncropped thumbnail in the sidebar. This makes the difference in being able to order and caption a gallery, thought it is an immense eyestrain.

Screen Shot 2016-02-09 at 10.54.25 AM.png

Core offers an uncropped thumbnail in the sidebar, making captioning and ordering an immense eyestrain, but possible.

Among the mockups made during the design of the Calypso media modal was a gallery flow with an extra step to satisfy those needing access to uncropped, full-width images and caption fields wider than a thumbnail.

4-view-and-edit.png

The image on the left mocks up a full-width captioning step as part of gallery flow.

To order or caption a gallery, I need uncropped images big enough for my presbyopic eyes to see. With both the Calypso and core media modals, I must flip back and forth between publishing and my camera roll app/site/folder (where the images are big enough to see), correlating lists of images that are often sorted in opposite directions. This is so very frustrating. I’ve hovered over the tiny thumbnails in the core media modal with friends, family, and clients, all backs stooped and eyes squinting as we try to caption and order a gallery. Can we satisfy the need for uncropped, full-width images in gallery edit flow?

A workaround is to leave gallery editing flow, returning to the media library. There you can use Edit to get at wider caption fields and bigger, uncropped images. This workaround flow is complicated by the modal not respecting upload order.

09342d62-8f9e-11e5-954f-2bbf058122ee.png

When dropping multiple files, order is not retained. This random ordering compromises the usefulness of Edit in captioning flow and frustrates list correlation.

That’s the view when returning from gallery editing to the media library. The images are not in order, making correlation with the gallery edit view difficult and frustrating. Edit flow reflects this random order rather than gallery and upload order. Since images in the Edit flow aren’t in order, captioning by arrowing through images is out of order. When captioning, I need the images to be in gallery order. Calypso’s media modal is the only step in my image flow that doesn’t respect order.

My image flow: My photos auto-upload from my devices to Google Photos. I download from Google Photos to my laptop via Chrome, where they are dragged to Calypso from the Mac OS finder. Order is retained through this entire flow until the media modal breaks the assumption of order preservation.

Further, I accidentally cancel the media modal often. I lose selection order when this happens. Since the images are uploaded in a jumble (instead of in the order they are dropped), I can’t easily resurrect selection order like I can in wp-admin, which retains drop order. I re-upload entire galleries to Calypso’s modal rather than scrutinizing images. This is a very frustrating and anxiety inducing exercise that happens to me with regularity.

When editing galleries in older posts, falling back from gallery to Edit flow means scrolling the media library (perhaps a lot) until you see selected images.

Any time I’m in the media library I’m concerned with accidentally destroying selection. This adds anxiety to my gallery flow.

 

 

#anxiety-flow, #captioned-gallery-flow, #editor, #galleries, #gallery-flow, #media, #media-flow, #media-modal