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

Session notes: Instagram widget auth flow, editor flow, embed reflow, list flow, vscroll

Notes from my past couple weeks-ish of sessions.

Instagram widget auth flow

So I tried Cmd+click to open auth in a new window. After completing instagram auth in the new window, I was redirected here.

The widget is not added in this new session.

I added it in this new session and hit the same auth blocker.

I went back to the original session. It is not authorized. I Save & Publish and then reload the customizer, still blocked at auth.

I couldn’t find a workaround.

Editor layout after AYS

After triggering AYS

Content area disappeared

I think this happened while typing.

The only thing in the console was

Cropped embed

Switching to HTML and back to visual fixed it.

Like, video overlap

Undo reflow

#undo-reflow after hitting Cmd+z.

Editor flow

The familiar frustrations of:

  • embed reflow
  • undo reflow
  • vscroll loss when an embed is selected and you click another embed
  • having to switch to the html editor to move embeds
  • waiting for embeds to load every time I re-enter a post
  • reflow, reflow, reflow

Idle editor wish: Outline of headers for easy jumping around. I use this a lot in Ulysses.

Lists of links

Today’s frustration: Links losing their href on paste, last mentioned here.

https://test.wordpress.com/2016/11/10/session-notes-back-buttons-hidden-sites-touch-image-flow-notifications-site-switching-flow-keyboard-flow-media-section-desktop-first/

Issue opened:

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

Also, the inline link toolbar gets in the way when rearranging lists of links. Whenever I work with lists of links, these two bugs/behaviors make for #frustrated.

Back button vscroll respect

Audit back buttons for vscroll respect. Losing vscroll kills browsing flows. For example, I prefer wp-admin themes flow to Calypso themes flow. Calypso loses your vscroll place when you return from the theme details page to /design. This makes for awkward theme browsing flow. wp-admin remembers your place in the /themes list as you navigate in and out of theme details.

wp-admin uses a modal for theme details, which flows much better for me. It respects vscroll.

Scrolling /posts/

I’ve had trouble with scrolling /posts/ several times today. Posts stop loading into infinite scroll. Sometimes the loading placeholder gets stuck showing. The screen becomes inured to clicks. Chrome gets CPU happy.

Embed reflow

I spent lots of time in the editor today, waiting for embed reflow. Embed reflow is the #frustrated. I work tweets into my posts, a not at all uncommon thing.

When I paste a tweet into a post with several embeds, reflow dances my vscroll. I lose my place and can’t remember what I was doing. Over and over.

Alt text flow

Wishing I could add alt text from an image modal. Make alt text available to drag-and-drop image flow. I encounter this lack all the time when writing about disability. Lamenting the lack of an image modal right now as I work on…

The Segregation of Special

#accessibility

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

Blockquotes and embeds

Adding stuff after embeds is frustrating, particularly if there is a blockquote nearby. My attempts at creating a new line between embed and block quote get block quoted.

Editor flow

Today’s editor flow harshers:

  • Editor unsaved changes #ays
  • #undo-reflow
  • #embed-reflow
  • links losing href on paste
  • inline link toolbar getting in the way of list editing
  • can’t blockquote lists without using html editor

Wishing I could toggle embed expansion so I can edit my posts without all of this reflow grief. Reflow and vscroll loss every time I Cmd+z or paste in another embed makes me wish Ulysses would hurry up and release editing of published WP posts.

Posts at the top disappear when I scroll back up

If I don’t touch anything, they’ll wink back in after 30-ish seconds.

Moving embeds

To move an embed, I:

  • flip to HTML
  • scan tag soup
  • cut the embed link
  • flip to visual
  • paste the link (If I past while in HTML, the embed won’t unfurl.)

List Soup

The bug where links lose their href when cut and paste pushes me to the html editor, where this greets me.

Working with embeds

I want to get at the underlying link so I can visit it and copy it.

An inline embed toolbar? An embed modal?

Sometimes embeds don’t load

Embeds can be slow to load in. Sometimes they don’t load at all. The links for the embeds don’t show, giving the appearance of vanished content.

After reload.

Remember size of notifications comment box

Wishing the comment box remembered the size I set with the drag handle.

In the comment box, ping backs display with “Reply to” followed by a link that is partially offscreen. The link is followed by an ellipsis, which makes me think the link has been truncated, although that’s not the case here.

#auth-flow, #editor, #embeds, #session-notes

Session notes: cursor control, moving block quotes, editor flow, flow forking, scroll bleed, modal consistency, unreadable web

Cursor control – iOS

Cursor control and text selection compromise the editing experience on iOS. I really enjoy the cursor buttons in Ulysses and Reboard’s cursor controlling spacebar. Now that I have a 3D touch iPhone, I’m trying the cursor control built into the default iOS keyboard.

Blockquoting a list – Macnchrome

When highlighting a list to blockquote, I expect the list to be inside the block quote.

Issues like this drive me into the HTML editor. Since the Visual|HTML tabs don’t show on screen when scrolled down, this means scrolling up, switching tabs, scrolling down while scanning raw markup to find my place, making edits, scrolling up, switching back to Visual, and scrolling down while scanning. #tedious #frustrated

Working in the editor

Losing hrefs during cut and paste, Undo (Cmd+Z) losing vscroll and cursor position, and editing link text are frustrating productivity killers that prevent achieving flow state. Example:

  • Cut and paste link
  • Link loses href
  • Cmd+z to undo
  • Undo causes reflow and loses vscroll and cursor position
  • Scroll up
  • Switch to HTML editor to do the cut and paste.
  • Scroll down while scanning markup
  • Cut and paste
  • Try not to munge tags while moving link
  • Switch back to visual
  • Scroll down while scanning

During all of this, spoons are burning. I sometimes measure flow in spoons.

The Spoon Theory written by Christine Miserandino

View Post Flow Forking and Post-post Trampolines

I have two editor sessions with conflicting changes again. View Post flow forking causes this. #forked-flow

I have sessions where I edit the same post in multiple tabs, haplessly stomping changes back and forth. There’s no indication that the content changed beneath me.

Which brings me back to post-post trampolines. Some things post-post needs to consider:

  • flow forking – View Post and #new-tab-window are flow forkers
  • publicize anxiety – Cleaning up an oops after publicize-ing is hard
  • destination anxiety – Which site did I post to? Work or personal? Oops.
  • update -> view -> edit -> update -> view -> edit flow
  • Editor “discard/restore changes” AYS flow

The iOS app could use some post post attention too, like putting the name of the target site in the confirmation to head off mis-publicize anxiety flow. Also, differentiate between published and updated. Communicate state.

On #forked-flow. View Post is a flow forker. View Post in the publish/update notification opens in #new-tab-window. That new tab has an Edit button at the bottom. Since update -> view -> edit -> update -> view -> edit is my habitual flow, I thoughtlessly fork my sessions by clicking edit in the actionbar in the tab opened by View Post. I end up with a proliferation of editor and view post tabs and conflicting changes in each editor. And then the hapless stomping starts.

For me, a better behavior for View Post would be to open in a modal like we do from the site name/icon at the top of the menubar. Have the edit icon in the actionbar dismiss the modal in case I go that route instead of closing the modal via clicking X to dismiss.

BTW, site name/icon doesn’t open in a modal in the editor. It opens in #new-tab-window, creating a vector for #forked-flow. This inconsistency between the editor and the menu often trips me.

A selection of comments on iOS app post-post flow:

  • “Post posting should be super slick and animated”
  • “Post list is a weird place to land, there are lots of next actions after posting that would be interesting. It’s a moment to celebrate!”
  • “My post list almost always shows a dupe for a while”
  • “as a separate issue, every time I go to post it defaults to a blog which is not the last one I posted to. should always default to whatever the last posted to was”

Related:

No load

Saw this again.

Flow Wants

  • post post trampoline
  • bulletproof, trustable editor discard/restore changes AYS flow
  • delightful revisions flow
  • respect for vscroll and cursor location, everywhere
  • no more #scroll-bleed, #cursor-bleed, #tap-bleed
  • smooth undo
  • keyboard flow
  • trustable media uploads
  • full-width image views in media pickers & captioning flows, respect presbyopia
  • avoidance of scroll, scan, correlate flows
  • avoidance of #forked-flow, #new-tab-window

Plans loses back nav header

Changing the section in the dropdown loses the back nav header.

Accessed from jet pack mail.

Site preview modal consistency

Clicking the site title/icon at the top of the menu opens a modal.

Except in the editor. There, clicking opens in #new-tab-window allowing for #forked-flow.

A new tab is a new session.

Scroll bleed – iPhone 7+

You can see the underlying page bleed through at the bottom. #scroll-bleed is a pervasive, long-lived problem across Calypso on iOS.

How the Web Became Unreadable

There’s a widespread movement in design circles to reduce the contrast between text and background, making type harder to read. Apple is guilty. Google is, too. So is Twitter.

The typography choices of companies like Apple and Google set the default design of the web. And these two drivers of design are already dancing on the boundaries of legibility.

Source: How the Web Became Unreadable

I’m feeling this one. Some themes lack contrast, and there’s not a way to bump font color/contrast in the customizer. I switched themes on some of my sites to improve contrast in response to readers in the neurodiversity and disability communities.

Design trends that make me feel old. Presbyopia is a drag.

#accessibility, #contrast, #cursor-control, #editor, #post-flow, #post-post, #presbyopia, #undo-reflow, #vscroll-loss

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