Editor and Media Flow Wishlist

These are the editor and media tickets that most affect my publishing routine. Fixing these would allow me to flow. These are roughly in order from the most to the least impactful on my personal flow. The first 6 are the ones I’d most like to see fixed.

#editor, #media

#duplicates, #hashtag, #hashtags, #longer-ones, #pesky

Calypso, wp-admin parity

A quick personal parity audit. Things in wp-admin that I miss the most in Calypso:

  • The wp-admin editor keeps the Visual and Text tabs visible on screen when vscrolling. I can switch between the two without losing cursor position in the Visual tab. This is a big deal for me, as I often switch between the two modes to work around editor bugs and add ids to headers.
  • Cmd+z undo is smooth in wp-admin, but causes jerky reflow and vscroll loss in Calypso.
  • The wp-admin media modal offers filtering the media library down to “images uploaded to this post”. Without this filter, editing media for an old post requires scrolling through the media lib history looking for the right images. #2136
  • wp-admin has a reverse order button in the gallery editor #339
  • wp-admin offers an image edit modal accessed from an inline toolbar in the editor. This allows access to alt text flow. Calypso’s lack of alt text handling in drag-and-drop flow is an accessibility issue. #307
  • Revisions opens in wp-admin. Editors should have great revisions flow.
  • The wordpress.com customizer does not offer theme switching. When first setting up a site, I want to experiment with different themes without leaving the live preview context.
  • The wp-admin editor allows inserting media in the HTML editor. I need this to workaround bad image flow in the visual editor. #1295
  • Bulk edit. I occasionally need it for changing taxonomy. #8344
  • HTML editor toolbar #308
  • I find myself back in wp-admin often for comment moderation. Landing here is always startling. What level of disorientation do Calypso users experience the first time they follow a link in a comment moderation email and see wp-admin?

Smoother Cmd+z, the Visual and Text tabs staying on screen during vscroll, and image insertion from the HTML editor make wp-admin a more productive editor for me. Respect vscroll. Avoid scroll, scan, correlate cycles.

#comments, #editor, #media, #parity, #vscroll, #wp-admin

#1295, #2136, #307, #308, #339, #8344

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

Session notes: reader, editor, free domain claim, gallery ordering, editing links – Macnchrome, iOS

Free domain claim

How do I get rid of this notice without claiming a domain I don’t want?

Reverse gallery order

Wishing I could click to reverse order.

wp-admin accommodates.

If I didn’t have wp-admin as fallback, I’d work around this by changing the sort order in my source app (Pixave) and reuploading the gallery. Reuploading is my go to workaround for media bugs and awkward flow, impacting quota.

Appending to link text

Here’s a bug we’ve lived with in WP and Calypso for years. It still frustrates. Appending or prepending text to a link requires moving in from the boundaries and juggling characters.

Calypso editor on iOS

  • The reload time after switching to another app and back to the browser is 10 seconds-ish of jerky loading.
  • First taps are slow to process. Double taps are often required.
  • Tapping plus to add media will focus the editor, put the cursor inside, and then open the modal over the course of a couplefew seconds.
  • I tend to wait a couple seconds after tapping anything before tapping again as I might interrupt something.
  • Post preview wouldn’t load.
  • #scroll-bleed behind the preview modal.
  • Cancelling preview takes you back to the editor instead of  to actions.
  • A draft started with Calypso on iOS didn’t show in Calypso macnchrome until I edited another post. Then the draft showed. I also experience this with drafts started in Ulysses. The provokes data loss #anxiety-flow.

Media library

Clicking the pencil icon also selects the image. I expected to edit without selecting.

Links in reader

In the iOS app reader, links within post content open in a pop up that is kind to context. Calypso’s mobile web reader follows these links, requiring browser back nav that sometimes stomps #vscroll.

Video drag-and-drop insertion

A video dropped onto the editor inserted off screen, at the top of the document. I probably scrolled down without clicking into the editor to position the caret. I thought the insert didn’t work since it happened offscreen, so I inserted again after positioning the caret. I saw that I had an extra video at the top when I previewed. I’m used to Ulysses where the caret follows the cursor during drop.

Notifications Search

Wishing again that I could search notifications. 🙂

#desktop, #domain-mapping, #editor, #ios, #links, #macos, #media, #mobile, #reader, #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