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

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

Calypso on iOS: The big impact of little interaction bugs

During my last iOS web session, I thought about the little bugs and interaction problems that compromise our iOS web experience. Some of these have been with us for a long time, notably scroll bleed, editor zoom-and-pan, the traveling 2FA prompt, and notifications scroll jitter.

With the recent editor changes, we’re getting closer to a flowful mobile web experience. Scroll bleed and zoom-and-pan, however, baffle our emerging flow.

Ruminating on this and previous iOS web sessions, I arrive at these suggestions.

  • Eliminate scroll bleed, notably in the sidebar and notifications. Scroll bleed interferes with our primary nav.
  • Eliminate zoom-and-pan in the editor.
  • Improve image and embed interactions in the editor, particularly while scrolling.

These are little interaction problems with big impact. They get in the way of flowing through my Calypso publishing sessions.

From my last session:

Scroll bleed

I often experience #scroll-bleed in the sidebar. When a lower layer grabs the scroll, the sidebar doesn’t scroll. Offscreen menu items inaccessible. Usually, waiting a few seconds before initiang another scroll will clear the bleed and allow the sidebar to scroll. This is a little hitch in my flow that occurs often.

Scroll bleed in sidebar

Notifications does it too.

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

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

Zoom and pan when editor focuses

The view zooms and part of the toolbar goes offscreen when I tap into the editor.

Zoom and pan when switching tabs

Tap into HTML. View zooms and pans.

Tap into visual. View zooms and pans.

Cut, copy bar obscures inline image toolbar

Tap an image. The copy bar comes up along with the image bar.

Also, initiating a scroll drag on an image triggers the image bar when the finger lifts at the end of the drag.

Account prompt

The 2FA prompt follows you to the notifications and reader screens.

Notifications scrolling

The filter header in notifications jitters while scrolling and sometimes comes unpinned.

 

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

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

Sharing pop up

The sharing pop up doesn’t dismiss with an #outside-tap.

Sometimes it opens offscreen.

Editor toolbar does not pin

I need the toolbar, even when scrolled.

#editor, #ios, #notifications, #scroll-jitter, #session-notes, #zoom-and-pan

Tracker Survey

Here are a handful of Ghostery reports for various wordpress.com hosted sites.

Logged in:

Logged out:

42 trackers on the front page of wordpress.com when logged out is a lot. Do they all respect Do Not Track?

Previously: https://test.wordpress.com/tag/trackers/

#ads, #ghostery, #trackers

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

Store: Renewing an expired domain via front page

I had two domain registrations (on the same site) expire yesterday. iriesmialpreserve.org is a domain mapping upgrade from the pre-bundle, pre-plan days. iriesmial.org is a mapping included with the premium plan on this site. iriesmialpreserve.org is the primary domain.

I didn’t capture this part, but from the domain renewal splash on the front page of my site, the Renew Now button took me to the /purchases page. It was not filtered by site. I found the iriesmialpreserve.org mapping and renewed it with credits. Here’s the confirmation of that process.

Seeing that Renew Now message and call to action button always makes me doubt the success of my renewal.

From there I went back to the front of my site.

With iriesmialpreserve.org now renewed, I’m down to one expired domain.

Clicking either Renew Now or Cancel takes me here:

There’s no call to action here. AFAICT, everything is fine and there’s nothing to renew. Lacking a better target, I eventually click View Plan and see:

There’s the call to action. I click it and follow through payment. Here’ the confirmation.

“for a few seconds”?

And again there is a Renew Now call to action directly below the renewal confirmation. I have to read through to “in a year” and double check the new expiration date to be confident that I successfully renewed.

#domain-mapping, #store

Flowsharing: Editing posts with embeds and block quotes

I compose posts in Ulysses and then pub them as drafts. I do the final edit and preview in Calypso. When editing these D&I recaps full of Twitter embeds and block quotes in Calypso, I experience:

  • #embed-reflow (#frustated)
  • #undo-reflow (#frustrated)
  • #embed-scroll-jump (clicking an embed jumps to the top of editor when another embed has focus, #frustrated)
  • #vscroll-loss (caused by all of the above, #frustrated x 3)
  • #scroll-scan-correlate cycles (when jumping between visual and html, a source of painful tedium and a cognitive stack smasher)
  • difficulty moving embeds and blockquotes (which drives me into the HTML editor and its hard-to-scan tag soup)
  • lack of embed link edit/visit (how about an inline toolbar and an edit details modal?)
  • a long wait for embeds to load and flow in every time I go back into the editor (makes #front-to-back-to-front-flow and iterative chain editing a slow process where I sit on my hands for 30 seconds at at time so I don’t start editing before everything loads)

#flowsharing #anecdote #journey

#editor