Visual Record – Make WordPress Test

The Test team patrols, curates, and tests the WordPress experience. We use a QA mindset to do visual records, using, observing, user research, manual testing, and user testing. We also document and triage top flows.

Step one: click additional CSS

Step two: add CSS

Step three: save

#css

Step one: click edit

Step twor: see edit screen

Step three: click in see underlines

Step four: save edit

Step rive: change files

Step six: switch themes

Step seven: theme loads

#editing

Step one: click edit

Step two: edit screen

Step three: click into textarea get underlines

Step four: look up function

Step five: new tab see function details

Step six: save change

#editing

I tested the patch proposed on #37661 on Windows Phone 10 with the Edge browser. Here’s a visual record of that experience:

Open the customizer, tap “change.”

Tap “see 10 themes.”

Scroll through the themes.

Tap a theme screenshot.

Tap the right arrow.

Tap the close icon.

Tap “Filter themes.”

Tap “featured.”

Tap “See 15 themes.”

Should this have scrolled back to the top instead of starting down the page? Scroll to top.

Tap “Filter themes.”

Tap Favorites.

Tap the username input.

Enter username, tap get favorites.

Tap see 12 themes.

Tap filter themes.

Tap feature filter.

Scroll through list, tap on some features.

Tap see 294 themes.

Tap theme screenshot.

Tap install.

Installing… tap close icon.

Installed. Tap Filter themes.

Scroll up.

Tap search input.

Enter a search, tap see 7 themes.

Scroll.

Tap live preview.

Loading…

Tap preview.

The biggest potential fixes I found were to show a loading indicator in the filters (next to the theme count button in the header?) when a new filter is loading, and to scroll the themes container to the top whenever a new section is opened or a search/filter is changed (which should be happening, but isn’t).

I should also note that since it is impossible to reorder images in galleries with Chrome on laptops that support touch, see #31652, I had to go to the text editor to fix one that jumped out of order when creating this post.

#customize, #customizer, #edge, #phone, #shiny-updates, #visual-record, #windows-phone

Originally by @mapk posted on Slack

The first user test on update-core.php:

Notes:

1. Great confirmation to the recent changes we’ve done.
2. She provides some alternate ideas on how to order the updates in the list: by importance, or by update release date.
3. One of my concerns was whether or not it was easy to identify the different types of updates now that they’re all included in the same list. She was able to find a “plugin” to update just fine once she realized they weren’t all plugins.

Also:

“It was a super easy update process”
“if this is the way it is, you should keep it and never gonna think about changing that”

#shiny-updates, #upgrade-install

In preparation for proposing parts of Shiny Updates v2 to be included with WordPress 4.6, I assembled visual records of the various flows and interactions that the plugin touches.

There are six interactions across ten locations throughout the admin where plugins and themes can be installed/updated/deleted. I created two videos to illustrate the changes for the most common use cases on a single site: plugin install/bulk update/delete, theme install/update/delete. For multisite I took screenshots on mobile and for the actions that differ from single sites.

Plugins on a single install

Themes on a single install

Theme install on multisite (same as on single install)

: Click Install…

: …installing…

: …installed.

Theme update on multisite

: New version available. Click update now…

: …updating…

: …updated.

Theme delete in multisite

This one is a little harder to document in images since the theme (or plugin) disappears after the AYS message as soon as it’s deleted. See video above for delete animation.