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

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