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

Session notes: back buttons, hidden sites, touch image flow, notifications, site switching flow, keyboard flow, media section, desktop-first, link pasting – iOS app, macOS app, Macnchrome

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 and doesn’t introduce an awkward back nav interaction.

Change hidden sites

Changing hidden sites leads to a wp-admin page that is not ready for small screens.

Also, the “share on” dialog does not dismiss with outside taps.

Touch image flow

Here’s a screenshot filled post on self-hosted WordPress.

Depending on how you link your images, tapping those screenshots could open them in a new browser window or do nothing. Neither behavior provides good, accessible flow, as has been lamented before.

Every time I tap through to the images in Federico’s screenshot filled posts, another touch media flow lament is logged in my soul.

WP should handle all of this. Shoulda been handling it for years. Insert my usual mobile web advocacy.

Decent touch image flow should be baked into core.

I consume a lot of WordPress sites through the Twitter app. We drop flow. Touch flow comes into us, and we drop it. One of the ways I most often experience WordPress hasn’t changed since before the iPhone came out.

Systems error

Switching from a8c proxy to direct connect fixed it. Happens to me occasionally.

Notifications and Life

I was about to write something in my parity log, and then notifications sidelined me into other cogitations. I now have no idea what I was about to write on parity. I’ve turned off notifications for almost all apps, services. I might turn off for WP as well.

Between neurological disease and medication, my stack is fragile. I can’t maintain high memory states like I used to. The smallest interruptions crash my stack. Notifications are not small interruptions. They are big ones that cause stack dumping, flow forking, and tangents. Notifications disrupt flow states.

Notifications both enable flow and disrupt flow states. Finding balance requires fiddling. I’ll try running WP on iOS with notifications going to the notifications stream w/o showing an alert. I’ll still get a list of actionable notifications, but without the interruption. I wish I had this control on macOS.

I’m also wishing I could turn the orange dot indicator in the masterbar notifications off.

Notion: Notifications interfaces should have a do not disturb toggle. Especially ones that rely on Chrome Desktop Notifications? It’s interface for notifications is not enjoyable.

Finishing setup – Mac app

“Finishing set up” and “Loading my sites” are stuck on screen. This was coincident with slow loading of WP sites in my Chrome session. IIRC, I had to restart the app to get rid of the messages.

Uh oh – Mac app

I abandoned my session after the loading slowness above. I came back later to browse through the reader. After reading a few things, I clicked over on sites and got:

https://github.com/Automattic/wp-desktop/issues/249

No keyboard after switching site – iOS app

The cursor is still in the title, but no keyboard.

This happens after searching in the site picker.

Since the picker always defaults to the primary blog, my usual flow for starting a post is:

  • Tap pencil icon
  • Tap site switcher
  • Tap into search field
  • Type site name
  • Tap the desired site

Now I’m in the keyboard-less state above. From here:

  • Tap into content to restore the keyboard
  • Tap back into title
  • Type in title
  • Carry on with post

Pencil always opens default site – iOS app

I’m on the plantbelly site. Tap the pencil icon.

Picker defaults to my primary site.

I almost published to the wrong site twice in my last session. I had to ditch in progress posts with images twice. I wish the iOS site picker had multisite flow more like Calypso’s. It asks which site to publish to on the way into the editor.

Clicking embed while other embed selected jumps vscroll to first embed – Macnchrome

Click an embed.

Scroll down.

Click on the embed. Vscroll jumps to first embed.

Storify Embed – Macnchrome

No Storify embed?

Twitter embed reflow in the editor – Macnchrome

With a lot of embeds, tweets are slow to load. Links will disappear momentarily as the embed loads. Whenever I load the post, I wait 30 seconds-ish for the load and reflow to finish before touching content.

Single image uploads inserted as galleries – iOS App

Images for two of my posts don’t load in the posts list.

Oh, these single images were inserted as galleries. I published these from the iOS app. I’m not sure how I did this. It was not intended.

Sort recently used to top – iOS app

I wish the iOS app sorted recently used to the top like Calypso does. I wouldn’t have to search so often which would avoid the keyboard interaction bug mentioned above.

iOS landscape – iOS app

I’m flipping back and forth between portrait and landscape in this session. I notice that flipping portrait to landscape to portrait drills down a level. I expected my context to remain consistent as I flipped between the two views.

Dismissing pub drop down in landscape – iOS app

This drop down dismisses with an outside tap in portrait but not in landscape.

Media desktop-first artifacts – iOS web

As with the media modal, the media section’s selection model exhibits #desktop-first thinking in its reliance on showing icons on hover. Here’s how media modal selection and scrolling behaves on touch screens:

https://test.wordpress.com/2016/04/14/media-scrolling-the-media-modal-gallery-on-ios/

And here’s the new media section showing both the edit icon and selection on the same thumbnail:

Calypso media is not designed for touch screens.

Also, #scroll bleed.

Where is reply? – iOS app

Took me a long moment to see reply at the bottom. I didn’t notice until I remembered that @designsimply had experienced the same thing recently. Then, I searched for it at the bottom.

Losing href on cut/paste links – Macnchrome

Links on a line by themselves lose href upon paste. I prefix the link with text as in this screenshot to allow moving the link without losing the href. In the screenshot below, I prepended “Links on a blank line lose href when cutpaste.” in front of my link. Without text in front, the link will lose its href when cut and pasted.

#app, #back-buttons, #back-history, #back-navigation, #comments, #desktop, #ios, #keyboard-flow, #macos, #media-section, #mobile, #notifications, #phablet, #session-notes, #vscroll, #web

Calypso, wp-admin parity

A quick personal parity audit. Things in wp-admin that I miss the most in Calypso:

  • The wp-admin editor keeps the Visual and Text tabs visible on screen when vscrolling. I can switch between the two without losing cursor position in the Visual tab. This is a big deal for me, as I often switch between the two modes to work around editor bugs and add ids to headers.
  • Cmd+z undo is smooth in wp-admin, but causes jerky reflow and vscroll loss in Calypso.
  • The wp-admin media modal offers filtering the media library down to “images uploaded to this post”. Without this filter, editing media for an old post requires scrolling through the media lib history looking for the right images. #2136
  • wp-admin has a reverse order button in the gallery editor #339
  • wp-admin offers an image edit modal accessed from an inline toolbar in the editor. This allows access to alt text flow. Calypso’s lack of alt text handling in drag-and-drop flow is an accessibility issue. #307
  • Revisions opens in wp-admin. Editors should have great revisions flow.
  • The wordpress.com customizer does not offer theme switching. When first setting up a site, I want to experiment with different themes without leaving the live preview context.
  • The wp-admin editor allows inserting media in the HTML editor. I need this to workaround bad image flow in the visual editor. #1295
  • Bulk edit. I occasionally need it for changing taxonomy. #8344
  • HTML editor toolbar #308
  • I find myself back in wp-admin often for comment moderation. Landing here is always startling. What level of disorientation do Calypso users experience the first time they follow a link in a comment moderation email and see wp-admin?

Smoother Cmd+z, the Visual and Text tabs staying on screen during vscroll, and image insertion from the HTML editor make wp-admin a more productive editor for me. Respect vscroll. Avoid scroll, scan, correlate cycles.

#comments, #editor, #media, #parity, #vscroll, #wp-admin

#1295, #2136, #307, #308, #339, #8344

Session notes: Editor, domain claim, vscroll, workflow automation, desktop app, TestFlight

Editor locks out after clicking on images – Macnchrome

In this screenshot, I am unable to click into the editor. I toggled wifi. Tried with and without proxy. Restarted Chrome. The problem persisted through all of that before spontaneously working again. Not the first time this has happened. Clicking and resizing images seem to trigger these situations.

Aside: Resizing images is scary. They collapse for a few seconds and then reappear smaller, causing jump, reflow, and vscroll loss along the way.

Still stuck w/ free domain claim – Macnchrome

How can I get rid of this? I don’t want to map a domain.

Vscroll loss after updating post – Macnchrome

  • Go to posts
  • Scroll down
  • Edit a post
  • Add a tag
  • Update
  • Hit editor back button
  • Back at the top, vscroll lost.

Even when not updating the post, vscroll is a little off when going back to posts.

Changing the title before publishing doesn’t change slug – Macnchrome

Blank p2 pages – Macnchrome

Seen this twice today.

Waiting for video processing – Macnchrome

I always wait for videos to finish processing before publishing. Should I? Will I be publishing an unready video if I don’t wait? How does that affect publicize?

https://test.wordpress.com/2016/10/11/video-preview-in-the-editor-macnchrome/

URL Schemes and AppleScript Dictionaries – Mac and iOS apps

All of our apps need URL schemes.

http://www.2doapp.com/url-schemes-in-ios-and-os-x/

The mac app needs an AppleScript dictionary.

Small comment area in notifications – Macnchrome

The first thing I do when replying is make the box bigger.

Desktop notifications – Macnchrome

Desktop notificiations are very intrusive. Turning them off requires digging in content settings.

View Post, The Flow Forker – Macnchrome

#new-tab-window results in multiple editor sessions and confusion over which session has my latest changes. Worst case, I split changes between editors.

View Post opens in new tab. That new tab has an Edit button at the bottom. Flow forked. Editor session++

Desktop app beta channel – Mac app

Note, be patient after clicking Update & Restart when switching from the stable to beta channel. I thought the app wasn’t restarting so I kept launching it again. This prevented the Update & Restart from happening. I did several Update & Restarts before settling in to wait for the long restart, which eventually happened.

WP Desktop Tab Bar – Mac app

macOS Sierra introduced the tab bar, which you can turn on in the desktop app via View > Show Tab Bar. In other apps, you can show the tab bar, open a new app window, and then go to Window > Merge All Windows to bring the windows into the tab bar. The WP app doesn’t have a means of opening a new window.

Going back from Cmd+N – Mac app

In the desktop app, Cmd+n starts a new post. If you have multiple sites, this invokes a picker.

This stomps my stack. I want a way to go back from here. I’ll Cmd+N and then realize I wanted to copy text from the article I was reading in the Reader. If I click into the Reader from the picker screen, my position in the reader stream is lost. I have to rescan the stream to find what I was looking for.

Supporting Sierra’s tabs would help by allowing a reader session and an edit session.

Restore dialog flashes briefly after deleting draft from editor – Macnchrome, Mac app

The screenshot below is with the Mac app, but this happens in Calypso web as well.

TestFlight not updating iOS app – iOS app

This is on a new iPhone 7+. When I setup this phone from backup, the TestFlight WP app was not restored to the home screen. I had to install from TestFlight. That all went well, but now a couple weeks later I’m not seeing the 6.6 update.

iOS app crashes on open – iOS app

The iOS app (TestFlight 6.5) started crashing upon open. It opens to a post list and then bails. I deleted the app and am now blocked.

Workflow – Desktop

I could not function without a clipboard manager. Really enjoying Copied App on both iOS and macOS.

When you copy a link, it grabs the title for you, and offers pasting title, url, or link. I use Link in Markdown often in my Markdown based flow.

A favorite Alfred workflow is my indelicate hacking of the Lazy Link workflow. It grabs the url and title of the frontmost browser window and inserts it at the cursor as a markdown link.

#app, #automation, #desktop, #domain-mapping, #editor, #forked-flow, #ios, #macos, #mobile, #phablet, #session-notes, #vscroll, #workflow

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

Session notes: reader, editor, free domain claim, gallery ordering, editing links – Macnchrome, iOS

Free domain claim

How do I get rid of this notice without claiming a domain I don’t want?

Reverse gallery order

Wishing I could click to reverse order.

wp-admin accommodates.

If I didn’t have wp-admin as fallback, I’d work around this by changing the sort order in my source app (Pixave) and reuploading the gallery. Reuploading is my go to workaround for media bugs and awkward flow, impacting quota.

Appending to link text

Here’s a bug we’ve lived with in WP and Calypso for years. It still frustrates. Appending or prepending text to a link requires moving in from the boundaries and juggling characters.

Calypso editor on iOS

  • The reload time after switching to another app and back to the browser is 10 seconds-ish of jerky loading.
  • First taps are slow to process. Double taps are often required.
  • Tapping plus to add media will focus the editor, put the cursor inside, and then open the modal over the course of a couplefew seconds.
  • I tend to wait a couple seconds after tapping anything before tapping again as I might interrupt something.
  • Post preview wouldn’t load.
  • #scroll-bleed behind the preview modal.
  • Cancelling preview takes you back to the editor instead of  to actions.
  • A draft started with Calypso on iOS didn’t show in Calypso macnchrome until I edited another post. Then the draft showed. I also experience this with drafts started in Ulysses. The provokes data loss #anxiety-flow.

Media library

Clicking the pencil icon also selects the image. I expected to edit without selecting.

Links in reader

In the iOS app reader, links within post content open in a pop up that is kind to context. Calypso’s mobile web reader follows these links, requiring browser back nav that sometimes stomps #vscroll.

Video drag-and-drop insertion

A video dropped onto the editor inserted off screen, at the top of the document. I probably scrolled down without clicking into the editor to position the caret. I thought the insert didn’t work since it happened offscreen, so I inserted again after positioning the caret. I saw that I had an extra video at the top when I previewed. I’m used to Ulysses where the caret follows the cursor during drop.

Notifications Search

Wishing again that I could search notifications. 🙂

#desktop, #domain-mapping, #editor, #ios, #links, #macos, #media, #mobile, #reader, #session-notes

Session notes: Editor, link modal, taxonomy, list scanning – macnchrome

  • When I cut and paste a link, the href doesn’t follow.
    Cut:
    Paste:
  • My longest running blog predates support of tags and has 11 years of accumulated categories. I struggle with the category picker in the editor. Selected categories need to bubble up somehow. #list-scanning is eye strain and motion sickness. I’m uncomfortably trying to categorize some old posts.
  • When avoiding list scanning, removing the default category involves scrolling the cats list fully above the fold, noting the category name below the Categories & Tags heading (shows when only one category is selected), searching for that name, deselecting, and then canceling search.
  • I’d complement cats with tags on this blog, but navigating below the fold to get to tags requires tip toeing around the categories list vscroll. I find I don’t bother with tags because of it. I’d use only tags if I was doing this blog over again.

  • I’d opt out of having a default category on some of my blogs if I could.

    Screen Shot 2016-08-30 at 7.41.33 PM

  • I expect to be able to add new categories from search. I know I can’t add from search but can’t change the habit. From the unsuccessful search, I type the name again in Add New Category to add. Notion: prefill cat name with search string to avoid typing twice.

  • I link between blogs often. In those moments, I wish I could search posts across all Calypso managed blogs in the link modal. Notion: Enough places do from: with completion that I’m developing a habit for it. from: all

#chrome, #editor, #link-modal, #macos, #session-notes, #vscroll

#taxonomy