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

Video preview in the editor – Macnchrome

With 8342 merged, let’s check  in on the state of video.

  • Video uploads in the absence of the premium plan show plan upsells instead of inscrutable dead ends.
  • Videos are now shown as embed previews in the editor.
  • Still no video modal.

 

No more wpvideo shortcode. Yay.

#ays, #chrome, #desktop, #macos, #media-modal, #video, #wpvideo

Session notes: Image editing – Macnchrome, iPhone 6+

Belatedly pubbing a few notes from an image editing session last week.

https://github.com/Automattic/wp-calypso/milestone/107

Flow

There is not yet access to image editor from the inline image toolbar in the editor. This is the most natural flow for me. Right now, images must be edited from the media library. The flow:

  • Click + to open media modal
  • Hover over the desired image
  • Click the pencil icon
  • Click Edit Image
  • Make changes
  • Click Done
  • Bounced back to the media library – skipping past the image meta modal – where a new edited image awaits
  • The new image does not copy the meta fields of the original image

This flow is awkward when wanting to edit an image and its meta at the same time or when wanting to edit the image in place. Consider this: you click the pencil icon, make changes to meta fields, edit the image, click Done, and get popped back to the media lib with a new image containing none of your meta edits. Confusing #forked-flow.

https://github.com/Automattic/wp-calypso/issues/7989#issuecomment-246416361

Mobile

Mobile isn’t supported yet, but the interface still shows. I took a couple screenshots on an iPhone 6+ to capture the current state. The editor doesn’t load the image.

Visual record

#desktop, #image-edit, #images, #ios, #macos, #media, #media-modal, #mobile, #phablet, #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

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

Publishing a video on an iPhone 6+

#forked-flow, #new-tab-window, #keyboard-flyup, and #cursor-bleed mar the experience, as does the lack of video embeds and video edit flow.

wordpress.com has long lagged core WP in video feature parity due to showing a bare wpvideo shortcode in the editor. Core has video embeds and video edit flow.

 

#editor, #ios, #media, #media-modal, #modal, #phablet, #scroll-bleed, #video, #wpvideo