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

Editor Prime Directives

With the talk of editor AYS, I thought I would top post my editor prime directives.

 

 

#ays, #cursor-control, #editor, #keyboard-flyup, #undo, #vscroll

Editor: prompts to restore/discard changes when there are no changes

  1. Starting at URL: https://wordpress.com/post/
  2. Publish a post
  3. Click <- Back
  4. Notice dialog that says “You have unsaved changes. Are you sure you want to leave this page?”

Often (but not always), immediately after publishing or updating, I see this AYS (are you sure) dialog when I attempt to navigate away from the editor via the <- Back button. Having to dismiss an unnecessary dialog is annoying, but the much bigger problem is that I can’t trust an editor that makes the save state of my content so ambiguous. One of my editor prime directives is, “Don’t AYS for unsaved changes if there aren’t unsaved changes.”

This ambiguity follows when you edit an existing post. I haven’t visited the post below in 3 years. When I open it, I get a restore unsaved changes prompt. This happens for lots of my old posts.

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 into the post and one on the way out. Unless I restore unseen changes, I will be twice interrupted on every visit.

Untrustable editor AYS comes up in user testing, it comes up in internal testing, yet its misbehavior endures. Here’s an anecdote from a recent user testing session.

To save or not to save: in the customizer and editor, both Lori and Mike got alerts indicating they shouldn’t leave the page they were on. This seemed surprising and confusing. In the editor, it would sometimes happen just after updating. In Customizer, the adaptive site preview gives the facade that it’s been updated, and the Save/Publish button was overlooked. Lori and Mike didn’t think their sites were “live” – neither noted the “Save & Publish” button (they didn’t see it), but I wonder what that might have told them about their site.

Issues:

Also, this occasionally happens post pub and seems to correlate with triggering AYS.

#ays, #editor, #trust

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: iOS Beta Testing, featured images, iOS app, macOS app, editor AYS, white screens, reader lists, programmable web, compassion is not coddling, little big details

Hockey app on boarding – iOS

Apparently, TestFlight is for public betas and Hockeyapp is for private betas. I thought TestFlight replaced Hockeyapp entirely.

So, I’m trying to set up Hockeyapp on a new phone. I already have a log in. I logged in, installed the WP app, and get this when I launch it.

Digging around the internet, I see that I need to register my new phone with Hockeyapp. That must be done on desktop. There, I created a private link that I then opened on my iPhone.

Opening the link put a Hockeyapp link on my home screen. I launched the WP app again to the same failure. I deleted the app and reinstalled from Hockeyapp. Still the same failure on launch.

Turns out, since iOS 9, you must wander over to Settings > General > Profiles & Device Management to trust the developer.

Hockeyapp makes for gnarly beta testing flow. Our TestFlight build has since updated, which is a much better flow.

p2 content doesn’t load – Macnchrome

Happened again

Perhaps more likely to happen from an href.li link.

Loading posts – iOS app

After installing the beta via hockeyapp, the posts list took about 15 seconds to load.

But the images didn’t load in.

Images showed after leaving and reentering the posts list.

Reflow and jumping after pasting a youtube link – Macnchrome

Pasting a youtube link results in a lot of reflow and vscroll jumping.

AYS immediately after publishing – Macnchrome

Update a post. Hit the editor’s back button. You are likely to get an AYS.

Post updated, hit the editor back button.

AYS even though I just saved.

Gif insertion – iOS app

ReBoard and Giphy Keys gifs don’t animate in the editor or posts list.

Featured image removal – Macnchrome

Featured images, both still and animated, remain in the posts list after removal.

Here’s a post.

Note that there is no featured image set. It was just removed.

The removed featured image is still present in the posts list.

Featured image upload – Macnchrome

Featured images take awhile to upload, sometimes stalling for several seconds. If you navigate away while the image is still uploading, there’s a chance of failure.

Site search zooms page – iOS web

Tap into site search.

View zooms.

CNAME records – Macnchrome

How do I get rid of this? This is a Pressable site connected via Jetpack.

Deleting the only post – Mac app, External Site

When you delete a post from the editor, a Don’t Restore/Restore dialog flashes on screen momentarily. When deleting the only post on a new external site from the mac app, the Restore dialog flashes briefly, the editor reloads, and then the restore dialog displays again and doesn’t go away.

After deleting this post, I expected to return to the posts list. Clicking Don’t Restore takes me there.

Autosave, restore, save changes AYS, and delete from editor flow are pretty rough across all interfaces, devices. Hard to trust.

Missing site titles when editing a reader list – Macnchrome

When editing a list in the reader, all subscribed sites are listed below the list being editing. Some of these sites have no titles. List the url in such a case?

Without preview and search, this site list isn’t very helpful when editing a reader list.

Blank tooltip after adding more button – Macnchrome

Seeing this empty bubble appear confused me. I assumed it was broken and almost stopped exploring.

Oh, it gets filled once you start selecting buttons.

hrules in Sharing Settings – wp-admin, Jetpack, Publicize

The two lines above Share This: seem extraneous and busy, especially with a thick full-width line at the start of the section and a thin full-width line at the end.

The thick line in between Enabled Services and Live Preview separates the two even though changes in Enabled Services are reflected in Live Preview. The hierarchy of this page is a confusing. Live Preview is affected by both Enabled Services above it and the settings below it, with hrules of differing width separating them. Available Services drags across an hrule into Enabled Services which can drag into a hide box.

Mac app whitescreen – macOS app

This session was idling on a Jetpack connected Pressable site. Upon returning to it after working on other stuff, it presented a white screen. The menubar remains responsive.

Restarting the app cleared the white screen for a few moments but then it white screened again. The interface paints and then crashes in ~5 seconds. During that time the interface is non-interactive. It’s busy preparing to white screen.

Here’s what shows before white screening.

Cut-and-paste blockquotes

When you cut-and-paste a block quote, an empty block quote is left behind.

Ulysses

Everything I publish starts in Ulysses. The flow is clean.

Compassion is not coddling

I recommend the book Design for Real Life all the time. It is part of the soul of flow patrol. Stress Cases and “Compassion is not coddling” are favorite parts of D4RL. Some compassionate design links:

https://refind.com/rboren/?q=%23compassion&sort=latest

D4RL and the pathways principle from The End of Average will make you reconsider what you call an edge case.

Design for Real Life is informed by neurodiversity, the social model of disability, and structural ideology.

https://ryan.boren.me/2016/08/09/education-neurodiversity-the-social-model-of-disability-and-real-life/#design-for-real-life

Programmable Web

The REST API was approved for merge into WordPress 4.7. Cheers to the programmable web. I look forward to more workflow automation. Tools are arriving that make consuming web APIs much easier.

New Workflow Update with Web API Feature – Mobile Only Tools – Because Productivity matters, everywhere.

Workflow Update Brings Ability to Interact with Any Web API – MacStories

Why is this important? Tools wanting to become part of our cognitive net & working lives need workflow automation, public apis, feeds, & export. Adaptable, cooperative flow is more accessible & inclusive.

Scripting allows users to contribute very small snippets of code that use the virtual reality engine as a host; users contribute code without having to invent a world from scratch and without having to become familiar with outrageously large codebases to do so. Adding scripting interfaces is very much like what Rockstar’s designers did to allow user-generated models and skins. As a rule, scripting is meant to minimize the investment in the programming skills in general and knowledge of particular bodies of code in particular necessary to create change. Scripting interfaces allow users a safe place to play with the medium of virtual reality worlds, but at the same time creates the possibility of their accomplishing real work and powerful transformations of the system.

Garrelts, Nate (2006-10-05). The Meaning and Culture of Grand Theft Auto: Critical Essays (Kindle Locations 4192-4193). McFarland & Company. Kindle Edition.

Little Big Details

Little fixes and improvements like site selector keyboard nav are landing. These little big details help me cope, flow, and be productive. They have impact on my daily life.

#app, #ays, #beta-testing-flow, #compassion, #design-for-real-life, #desktop, #editor, #ios, #macos, #phablet, #programmable-web, #reader, #web

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: Editor, customizer, undo, AYS, vscroll – Macnchrome, iPhone 7+

Author drop down – iOS Safari

Dismissing the author drop requires tapping the disclosure triangle. Tapping author name opens but doesn’t dismiss. Outside taps in the header don’t dismiss.

Switch themes in customizer – Macnchrome

I miss theme switching in the dotcom customizer. The customizer is always where I head first to switch themes. Getting at live preview in the customizer when switching themes requires some clicking on dotcom. Here’s what core WP is up to.

https://make.wordpress.org/flow/2016/10/01/customizer-browse-install-preview-themes-on-mobile/

Editor – Macnchrome

  • Cmd+Z loses the cursor and scroll position and causes some reflow jiggle. This is a flow killer for me. I can’t use an editor that does this every time I try to undo, which is often, very often. I regularly forget to paste as plain text, using Cmd+V instead of Shift+Cmd+V. To clean up, I Cmd+Z so I can Shift+Cmd+V. Having to scroll back down to find my place interrupts an ingrained groove.
  • Updating a posts scrolls the editor to the top to show the notice. Losing scroll position when Updating a published post is frustrating. I like to periodically push my changes without losing my place. I like to edit a section, update to push it live, and then move on to another section. I do this often when updating living documents.
  • I often need to switch between Visual and HTML to put ids on headers and work around cursor bugs, particularly with images. Since the Visual and HTML tabs don’t stay on screen, I must scroll up, switch to HTML, find my place again amidst tag soup, make the change, scroll back up, flip to Visual, and scroll back down to where the journey started. I fall off my cognitive train in the process.
  • View Post in the published/updated notification opens in #new-tab-window, resulting in #forked-flow. I end up with multiple editing sessions because of this, confusing the hell out of me. I’m training myself with poor result to ignore View Post and always use Preview, although it is a source of anxiety over whether I’m seeing what’s actually published or a version with accidental, unsaved changes.
  • Immediately after publishing or updating, I’ll navigate away from the editing session with the editor back button or the masterbar. I often get an unsaved changes AYS despite there being no changes to save. This results in #anxiety-flow. I’m not sure if there are unsaved changes. I could Update to be sure, but what if I fat fingered something and added spurious text? If I ignore it and proceed without updating, I’ll get a prompt to restore the autosave when I come back. There can be days and months before I come back to something. Upon returning, I’ll wonder what’s up the post, and wish I could quick peek a diff between published and autosave. I’ll go through more #anxiety-flow to convince myself I’ve got the right content.

While working on the following post, I experienced these old familiars: Cmd+z in calypso editor loses vscroll and cursor placement. Moving links loses href. Moving blockquotes is awkward. Sometimes clicking in embeds loses vscroll. Editor scrolls down after adding link, losing cursor placement and vscroll.

https://hypubnemata.me/2016/10/03/dsisd-commons-2/

Three dots menu in actionbar, Macnchrome

The three dots button is a noop in this window initiated from the press this bookmarklet. This is the moment after publishing from Press This.

After clicking the follow button, the page reloaded and the actionbar changed. Now the three dots menu works.

vscroll loss switching between editors – iOS app

50% ish repro.

Start in visual.

Switch to HTML and note the vscroll jump.

vscroll loss after peeking link – iOS app

I want to be able to peek a link without losing vscroll or cursor position.

Tap into link.

Note the url and tap Cancel.

Vscroll bumped down and cursor position lost following keyboard flyup gymnastics.

reaching bottom – iOS app

Why can’t I reach the bottom of the post until I tap into the editor?

As low as I can go

Undo and discard changes AYS – iOS app

While editing a post, I accidentally removed hrefs from two links when I bumped the link icon in the keyboard button bar. Where is undo?

Leaving the editor offers to discard the changes. Is this the only route to undo? AFAICT, I have to leave the editor and discard all changes to undo.

I often get this discard ays when I enter and leave a post without making any changes. Is it not really discarding? This happens with several, but not all, posts. Don’t AYS for unsaved changes if there aren’t unsaved changes. Calypso does this too.

Ulysses has a great keyboard button bar. Undo, redo, and cursor buttons are essential to me.

 

https://test.wordpress.com/2016/09/05/session-notes-ios-app-editor-buttons-iphone-6/

Says published when updated

When I hit the Update button for an already published post, I get Published as a confirmation. This makes me question the status of the post.

Also, which posts was updated, and on what site? Give some information to ease anxiety. The pencil button is global. With multiple sites, the post just published may have nothing to do with what’s on screen after leaving the editor.

editor zooms – iOS Safari

The editor zooms when you tap into it, introducing hscroll.

Tapping the HTML tab zooms.

Slow loading Manage Sites – iOS app

This showed only four entries for about 10 seconds then filled.

scroll bleed – iOS Safari

Layout quirk after triggering AYS – Macnchrome

Start a post. Add content and then quickly hit the editor back button. This triggers AYS. Click through the AYS and this presents.

Related to https://github.com/Automattic/wp-calypso/issues/4509

Save/discard changes AYS and editor back button flow are banes of my sessions.

Latest drafts + button title

Hovering over the Latest Drafts + button shows gridicons-plus. How about “Create a new Post” as seen on the pencil icon? Or s/Post/Draft/?

Actionbar flicker

Getting the dancing action bar for the first time in awhile. As I scroll, I see two actionbars flick into being, a larger one and a smaller one that ends up beneath the larger one. Sometimes they continue their flicker dance until you scroll again. No screenshots or screencasts, sorry.

Editor Prime Directives

Thinking out loud, standard disclaimers.

  • Mind the cursor. Don’t lose vscroll or cursor position. Looking at you modals, popups, undo, redo.
  • Mind the keyboard. Watch keyboard flyup and what it does to vscroll and cursor position.
  • Respect calling context.
  • Avoid scroll, scan, correlate cycles.
  • Don’t AYS for unsaved changes if there aren’t unsaved changes.
  • Make undo easy, especially on small screens where mistakes are easy to make and hard to correct.
  • Clearly indicate when there are unpublished changes.
  • Offer a diff when offering to restore from autosave.

#app, #ays, #chrome, #customizer, #desktop, #editor, #ios, #macos, #phablet, #scroll-bleed, #scroll-loss, #session-notes, #undo, #undo-reflow, #vscroll, #web