Session notes: forked flow, featured images, images in posts list, network errors

forked-flow

  • Start on permalink post page
  • Click the pencil icon in the actionbar
  • Make changes
  • Save
  • Click View Post in the confirmation message
  • Opens in #new-tab-window and forks flow

View Post forks flow by opening in #new-tab-window. Could/should view post be made aware of when flow passes in from the actionbar and offer to return to calling context? How do our post-post trampoline concepts handle actionbar edit flow?

Jetpack connected site links to wp-admin – iOS app

Wishing my Jetpack connected site linked to Calypso instead of wp-admin.

Photo sites and featured images – Macnchrome, iOS Safari

So far, every post to this site was made through the iOS app, IIRC. I upload a single photo and publish. I don’t set a featured image or add taxonomy. Here’s what my site looks like.

I dig it, but here’s what I see in the backend.

No images.

Here’s the posts list after setting a featured image.

And here it is after waiting 10 seconds-ish.

The iOS app shows images for all posts. Setting a featured image is not required.

As mentioned in this session, I had some single image posts mysteriously pubbed as galleries. The iOS app does not show images for these posts, but Calypso does.

So, the app shows images for single image posts but not galleries. Calypso shows images for galleries but not single image posts.

Themes and posts list shouldn’t require setting featured images.

Stuck loading – Macnchrome

I reloaded the page after 30-ish seconds of waiting.

Masterbar – iOS Safari

Can’t save draft – Macnchrome

This was due to some network issues. Is it possible to be more precise with the error message?

#app, #chrome, #desktop, #desktop-bias, #desktop-first, #featured-images, #forked-flow, #inclusion, #ios, #macos, #media-flow, #mobile, #posts, #safari, #session-notes

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

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: Signup site title – Macnchrome

In response to the showSiteTitleStep variant call for testing.

Name, title, domain ambiguity

Give your new site a name.

Enter a Site Title…

This associates name with title, taking a step toward clearing name, title, domain ambiguity.

You can always change this later.

Good to know. Reduces anxiety and likelihood of backtracking.

Your Site Title is the name of your Blog or Website. It’s often displayed at the top of your site.

This reinforces the name, title association. For this WP old-timer, “name” is still ambiguous, because I know how many things it can mean. At this point in the process, I’m wondering how domain fits in. In the spirit of “you can always change this later”, I click on.

This page uses domain, custom domain, domain name, address, and keyword language. The title step used name and site title language. There are several terms on this page. Perhaps a necessary acknowledgement of varied terminology, but each term begs a distinction from the others.

Let’s find a domain.

Choose a custom domain, or a free .wordpress.com address.

Domain or address. This introduces a choice and a new term. What’s the distinction? Is the comma needed?

The title and domain name images are helpful. I forgot to check their alt text. Disambiguation images need good alt.

The title step uses Site Title language that is also used in Settings and the Customizer. The domain step does not use the “Site Address” or “Custom Address” language used in Settings.

Title, Domain Order

When setting up a site, I usually don’t know exactly what I’m going to call it. I start typing names and see which are taken. The domain and title are settled through iterative namespace searching.

I change the title depending on if I can get the domain I want. With showSiteTitleStep, there’s a lot of distance between setting the title and picking the domain. If one of the suggested domains strikes me as a good name/title, prompting me to want to change the title I set earlier, my choices are to back up a couple steps or finish NUX flow and try to figure out where to set the title later. Noticing “You can always change this later” in the title step nudges me to go forward.

During site creation, I’m more concerned with domain than title. I usually want to get domain sorted out before worrying with title since domain requires hunting in a namespace. Also, title is easier to change later.

In the vizrec below, the title I selected resulted in available domains. Title first flow is smooth in this case. My concern is when someone is doing repeated searches looking for an available domain. If you end up with a domain that doesn’t match the title, you have to make a decision to go back or go forward.

My domain first mindset may be an artifact of my technical and WP background. When setting up site identity, I think first about securing the domain, the address on the public web.

Prefill domain with title

Other have mentioned this, and it’s in the works—prefill domain with title instead of starting empty.

If I couldn’t find a domain that aligned with my title at this step, would I be anxious about fixing the title?

Username prefill

The username prefills, but is it prefilling based on the title or domain? Domain seems the right choice. I’ll test the scenario where domain and title don’t match in a later session.

Facilitating post-signup Title/name change quests

What if I just finished site creation and want to change the title/name to match the domain? Is there room to mention Title/name here?

Name, Title Consistency

Customizer and settings use “Site Title”. NUX flow also uses Site Title, associating it with name on step 2 of signup. Seems we call it Site Title everywhere and associate it with “name” during signup to help resolve name, domain, title ambiguity.

Domain, Address Consistency

Signup uses Domain and Custom Domain language. Settings uses Site Address and Custom Address language.

Layout jiggle when mousing in/out of Pointer buttons

Mousing in and out of the buttons in the onboarding pointers causes some layout jiggle.

After mousing in, the button gets a highlight and the message box adjusts size in response.

Visual Record

Here are screenshots for every interaction in the signup flow plus some shots of me dipping into the customizer to peek at title editing, checking the confirmation email, and peeking in title settings.

#ambiguity, #chrome, #desktop, #domain, #macos, #nux, #session-notes, #vizrec

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: drag-and-drop image flow, trackers, editor, masterbar – Macnchrome, iPhone 7+

Lack of alt editing in drag-and-drop upload flow

Without an image modal, drag-and-drop image upload flow requires diving into the media library to add alt text to an image. #accessibility

Calypso editor Ghostery report

Lots of trackers. We load 12 – 15. Six months ago, there were only 4.

Clipped editor action bar, iOS Calypso

Masterbar buttons, iOS Calypso

#ad-blockers, #ads, #chrome, #desktop, #editor, #ghostery, #ios, #macos, #masterbar, #mobile, #phablet, #session-notes

The State of Video

The premium plan features video support and more storage. A premium upgrade needs premium flow. Here’s where video flow falls short.

Editor embed preview

On wordpress.com, a wpvideo shortcode is shown instead of an embedded preview.

Core WordPress shows an embed preview, and has for years.

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

https://github.com/Automattic/wp-calypso/pull/2267

Edit modal

Core offers a video edit modal accessible from an inline toolbar. wordpress.com does not.

Video upload dead end

Attempting to upload a video without a premium upgrade resulted in a confusing error message instead of clear explanation and a pointer to the premium upgrade.

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

This bad flow existed for years, surviving multiple editor and plans/premium iterations.

Until today. Fixed.

#chrome, #desktop, #editor, #macos, #video, #wpvideo