Featured image editing flow through the media modal

Here’s the editor with a featured image set.

Click either pencil icon to edit the featured image. The media model opens to this:

There is no indication of the current featured image nor is there an edit button. If I was coming in here to edit the featured image, either the image itself or its meta, I would be lacking sign posts for my flow.

Further, Calypso lacks an “uploaded to this post” filter. This makes finding previously uploaded featured images all the harder.

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

If the modal were to open with the current featured image selected, an edit button would show.

That marks the way more clearly for those wanting to edit the current featured image rather than swap in a new image.

#editor, #featured-images, #media-flow, #media-modal

Session notes: forked flow, featured images, images in posts list, network errors

forked-flow

  • Start on permalink post page
  • Click the pencil icon in the actionbar
  • Make changes
  • Save
  • Click View Post in the confirmation message
  • Opens in #new-tab-window and forks flow

View Post forks flow by opening in #new-tab-window. Could/should view post be made aware of when flow passes in from the actionbar and offer to return to calling context? How do our post-post trampoline concepts handle actionbar edit flow?

Jetpack connected site links to wp-admin – iOS app

Wishing my Jetpack connected site linked to Calypso instead of wp-admin.

Photo sites and featured images – Macnchrome, iOS Safari

So far, every post to this site was made through the iOS app, IIRC. I upload a single photo and publish. I don’t set a featured image or add taxonomy. Here’s what my site looks like.

I dig it, but here’s what I see in the backend.

No images.

Here’s the posts list after setting a featured image.

And here it is after waiting 10 seconds-ish.

The iOS app shows images for all posts. Setting a featured image is not required.

As mentioned in this session, I had some single image posts mysteriously pubbed as galleries. The iOS app does not show images for these posts, but Calypso does.

So, the app shows images for single image posts but not galleries. Calypso shows images for galleries but not single image posts.

Themes and posts list shouldn’t require setting featured images.

Stuck loading – Macnchrome

I reloaded the page after 30-ish seconds of waiting.

Masterbar – iOS Safari

Can’t save draft – Macnchrome

This was due to some network issues. Is it possible to be more precise with the error message?

#app, #chrome, #desktop, #desktop-bias, #desktop-first, #featured-images, #forked-flow, #inclusion, #ios, #macos, #media-flow, #mobile, #posts, #safari, #session-notes

Full-width media views during selection

Media flows that don’t provide full-width views during selection are inaccessible to me. They are frustrating and make me feel old.  I spend too much time hovering my face over screens as I scrutinize thumbnails with my presbyopic eyes. Most media pickers lack full-width views during selection. Telegram’s picker is an exception.

telegram-media

Telegram in image details view

Telegram shows the full width of the image across the full width of the screen without cropping. Tapping the image selects/deselects.

Few apps have image selection flow that is accessible to me. Google Photos provides one of the better media experiences around, in app form and on the mobile web. But, it, like so many interfaces, limits me to thumbnails during selection.

google-photos-media

Google Photos app showing image selection

Google Photos on desktop, however, provides a magnifying glass overlay on hover that opens a full-width image with a selection toggle and arrows for moving through the images in full-width view. This I like.

And here’s the selection websites get in iOS Safari. I find it so difficult to select images with this that I jump to the camera roll to access more comfortable views and then jump back to the picker on the web page. I then must correlate between the camera roll and media picker lists, which usually sort in opposite directions.

ios-safari-picker

iOS media picker showing image selection

Likewise with the media picker in the WP iOS app.

wp media picker

WordPress iOS app showing image selection

I’ve been going on about full-width images during selection for awhile. The new Calypso media modal accommodates me somewhat.

calypso-media

Calypso’s image details modal

That provides an image large enough for me to make selection and captioning decisions, but it is unavailable in gallery flow and doesn’t correlate between details view and grid view well, meaning list scanning and back-and-forth correlation are necessary. Correlating  between lists and grids is a frustrating drain, especially when deciding on which of several similar looking photos to use. All of my list correlation back and forth is anxiety flow working around inaccessibly small (and often cropped) images in media pickers. Telegram on iOS and Google Photos on the desktop don’t have these correlation problems because full-width images are available and selection is indicated and alterable in the full-width view. This saves me time, frustration, and physical pain. The lack of comfortably viewable images during media selection ruins publishing and sharing interfaces for me.

#a11y, #accessibility, #chrome, #desktop, #full-width, #images, #ios, #macos, #media, #media-flow, #media-modal, #phablet, #scroll-scan-correlate

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

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