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

Session notes: scroll bleed, iOS web, alt text flow, captioned gallery flow, unpermalinks, editor AYS

Scroll bleed when Notifications loads more – Macnchrome

When Notifications loads the next batch infinite scroll results, scrolling passes through to the page beneath. Once the new batch of notifications load in, scrolling returns to Notifications. This makes for awkward scrolling that stomps the vscroll context of the underlying page.

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

Screen Shot 2016-10-25 at 2.15.16 PM.pngiOS Scroll bleed

With Calypso on iOS, if you don’t see the problem at first, keep going. Tap around. As state piles up, weird things start happening. #tap-bleed, #scroll-bleed, and #cursor-bleed become more frequent, as do things like bar detachment.

Even with fresh state, the filter header jitters while scrolling notifications. This jitter has existed on iOS for the life of Calypso.

#scroll-bleed is pervasive in Calypso and is featured in Notifications.

https://test.wordpress.com/tag/scroll-bleed/

https://test.wordpress.com/tag/cursor-bleed/

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

Alt text flow

The lack of a modal means those who drag-and-drop images directly into the editor can’t add alt text to dropped images without rummaging in the insert image modal (accessed via a + plus button).

Further, without access to the image details modal from the editor’s inline image toolbar, adding alt to images on old posts requires scrolling through the image modal looking for the right image amidst months of thumbnails. Unlike in core WP, there is no “Images uploaded to this post” filter. This is supremely frustrating flow if you trying to be good about alt text.

https://test.wordpress.com/2016/09/30/session-notes-drag-and-drop-image-flow-trackers-editor-masterbar-macnchrome-iphone-7/

https://github.com/Automattic/wp-calypso/issues/307#issuecomment-256178884

Captioned gallery flow

With a recent fix to gallery previews, this post stands at 3/4 fixed.

Permalink changed date

I noticed that this old tweet of mine links to https://hypubnemata.me/2016/10/03/growth-mindset-and-structural-ideology/

That 404s. The link is now https://hypubnemata.me/2016/10/05/growth-mindset-and-structural-ideology/. The day changed from 03 to 05. I don’t know how I managed this.

Untrustable editor restore prompt

I haven’t visited this post in 3 years. I open it and get a restore unsaved changes prompt. What am I restoring? I just want to peek the post right now, not edit it, so I click “Don’t restore”. I’ll postpone dealing with it until next time I venture to this post. After reading, I click the editor’s back button to return to my posts search and receive an unsaved changes AYS (Are You Sure). That’s an interruption on the way in and one on the way out. Unless I restore unseen changes I will be twice interrupted on every visit. So far, this happens with every post in this search https://wordpress.com/posts/my?s=knolling.

I often search my posts wanting to peek in a post, maybe lift some text, and leave. I see restore prompts often in this flow.

AYS Styles

Close the tab/window.

Browser back button

Layouts look like loading placeholders

For a moment, I thought resources were still loading.

You followed Site Title – iOS app

After creating a new site, I receive notifications with “Site Title”.

Searching themes – iOS web

Have to type right on the icon to search. I often accidentally trigger the dropdown when I want to search.

Search is not autofocused, requiring another tap.

I can have both filter and search open.

When I start typing, scroll jumps.

Scroll bleed

Scroll bleed usually disappears once you lift your finger. This scroll bleed persisted.

Account login overlays notifications

Tap me and then notifications.

#accessibility, #ays, #captioned-gallery-flow, #captions, #chrome, #desktop, #editor, #galleries, #ios, #macos, #permalink, #phablet, #session-notes

Session notes: RSS widget, reader, gallery layout, inline link toolbar, pasting links – Macnchrome, Calypso iOS, iOS app

RSS Widget author feed

Feed broken. Thought maybe because I used /author/ryan/ without feed/ at the end. Changed to /feed, still broken. Removed and readdded, still broken.

https://test.wordpress.com/author/ryan/feed/

Reader invoked when scrolling techcrunch up

When scrolling tech crunch, the reader often invokes. This happened multiple times during my session. It also happened once with the account screen. Seems to follow thumb location. I usually scroll with my thumb aligned beneath reader.

Also, lots of #scroll-bleed.

Gallery Layout

Clicking layout while images are still uploading results in the dropdown auto closing.

Inline link toolbar

The inline link toolbar is a boon to flow, except when I’m rearranging lists. It blocks visibility of list items, adding frustration to sorting.

Cutting and pasting links

Links lose their href after cutting and pasting. I experience this often when sorting lists. #frustrated

About to cut:

Pasted:

The href disappears.

Deleting drafts while editing, Calypso iOS

When deleting a draft from the editor, the restore/don’t restore dialog flashes briefly before redirecting on to the posts list. Confusing and awkward.

iOS app

The keyboard disappeared during an ios app edit session. Going into three dots and back resurrected it.

Floating pencils in customizer

So confusing.

Funky store dropdown labels, Calypso iOS

The labels are all lowercase and don’t match the headings.

An upsell in the posts list leads to those store screens.

#desktop, #editor, #galleries, #inline-link-toolbar, #inline-toolbar, #ios, #links, #macos, #mobile, #phablet, #reader, #rss, #session-notes

Session notes: reader notifications, gallery grid, publicize nonce, expired domain – Macnchrome

“x new posts”

The “x new posts” notification bubble is persistent. Getting rid of it requires giving in to its continuous call to ditch my vscroll. Though I appreciate its presence when I’m ready to scroll to top and see what’s new, the rest of the time it distracts. I worry that I will accidentally click it, losing vscroll in a thoughtless moment of notification gardening.

Can’t scroll thumbnail grid

During gallery creation, the thumbnail grid wouldn’t scroll.

Invalid nonce during Facebook reconnect, Mac app

I successfully reconnected from a Chrome session and then restarted the app.

Expired domain

A “DNS configuration required” notice alerted me to a problem with a mapped domain. This is a domain I let expire. If I didn’t go into this process knowing that the domain expired, I wouldn’t have been able to tell that.

Click fix.

Click Learn more.

The prompts and support documentation don’t mention the possibility of an expired domain.

My next step from here was to remove the mapping. This required some drilling and scrolling.

Click iriesmial.com in domain list.

Click Payment Settings, which was non-obvious to me. I’m trying to remove a domain to get rid of a notice, not mess with payments.

Scroll down to the desired site. This flow should link directly to the site in question instead of requiring #list-scannning.

Click Domain Mapping

Click Remove Domain Mapping.

None of these apply. This is framed as if I’m moving to a free plan or another service. I’m not. I’m just removing a no longer needed mapping. Being put into customer retention type flow when I just want to remove a mapping is annoying. The only reason I’m doing this is to get rid of the “DNS configuration required” notice. I’m forced to answer both of these misframed questions before I can proceed.

My feedback in the form:

I’m not leaving or abandoning the free plan. This framing does not apply to the scenario of removing a domain mapping.

I let this domain expire, as I never really used it. Now, I’m removing it to get rid of the “DNS configuration required” notice.

It doesn’t stop. Thankfully, this form is optional.

At last.

I expected a click to remove and a click to confirm. I experienced forced form filling.

#3389, #app, #chrome, #desktop, #domain-mapping, #forms, #galleries, #ios, #list-scanning, #macos, #publicize, #reader, #web

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

Gallery theme browsing flow

With Chrome on Mac OS, going back in browser history loses vertical scroll position with infinite scrolling themes. I notice this when browsing gallery themes like Cubic, pictured.

Losing vscroll every time you go back is frustrating enough to abandon a session. Thankfully, iOS Safari and Macnfirefox don’t lose vscroll. Firefox preserves vscroll when going back, but you have to wait for all of the posts to reflow. It’s a bit clunky, but scroll position is preserved. iOS handles back nav smoothly. Here’s iOS in action.

#back-history, #back-navigation, #chrome, #desktop, #firefox, #frustrated, #galleries, #image-flow, #ios, #macos, #phablet, #scrolling, #themes, #touch-images, #vertical, #vscroll

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