WordCamp Contributor Day: Workshop Findings

December 4, 2016

WordCamp Contributor Day: Workshop Findings

BACKGROUND

Goals

This test allowed Flow Patrol to 1) observe sign-up and log-in flow, as well as 2) gauge user experience of creating an entirely new site solely through the WordPress Mobile App version 6.2 on Android 5.1.

Tester

The tester has experience using WordPress, but has procrastinated making a blog for a long time. He has used WordPress for other things, commercial sites for example, but has never made a blog because he finds it difficult to get into writing. The tester is a recent Android user, who is new to using smartphones in general, and often expressed that he dislikes prolonged typing on mobile devices.

 

OBSERVATIONS

Sign-up

Since the tester has trouble typing on mobile devices and was self-conscious about making mistakes, he began looking for a “show password” button as he navigated the sign-up page. He commented that it needs to be more visible and thinks perhaps the image of a crossed-out eye is too abstract for some users.

The tester found that an account already existed under the name he wanted and figured it was his old one. However, he was required to back out of the sign-up page before navigating to the log-in page to try entering it. He commented that it would be nice to simply be taken to the log-in page for the account once WP discovered it, or at least to be prompted to try to log into that site.

The tester clicked on “forgot password” and was redirected to the browser version of WPs’ sign in page, which caused some confusion. He said that he expected to leave the app to retrieve an email confirmation from his email inbox, but he didn’t understand why he was taken outside of the app to reset the password. He said that changing platforms like this takes a person out of their work-flow. He admitted that this left him with a bad impression, explaining that if WordPress can claim to power over a fourth of the Internet, he expects that it “should have this figured out by now.”

 

Log-in/Log-out

Done with sign-up, the tester tried to log in with what was believed to be his “username”, but could not get in because it turned out that he was using his “public display name.” In the site navigation screen, the “public display name” is emphasized – it’s a darker, larger font and above “username.” Log-in using email address was successful.

The tester attempted to log out to figure out which name was to be used to log in. A “log-out” button was difficult to find, because it was expressed as “disconnect.” The tester expressed fear at the confirmation prompt, which seemed like a warning about permanent deletion of accounts, sites etc. He suggested that it simply be called, “log-out.” Only after two successful log-ins did tester realize the difference between and significance of “username” and “public display name.”

 

Site Creation

Once logged in again, the user saw past sites displayed on the opening screen. The tester explored other parts of the site looking for a “create new site” button. He openly questioned where he should go, even exploring “account settings.” The tester expressed that he felt stupid and surprised that it was difficult for him to find. After prompting from the interviewer that he search back at the “show sites” screen where he started, he found a plus sign which turned out to be what he was looking for all along.

When asked where he expected it to be, the tester explained that maybe front and center was not appropriate because he already had sites and doesn’t create them all the time. Still, he found “show sites” to be misleading because it implies that it would take him to view existing sites only. He only found it when looking for it intently and with extra help. The tester suggested that the plus sign makes sense, but could be emphasized by making it a brighter color.

 

First Post

The tester was intent on creating a quick post just to see how it would look. He successfully created a simple post with a title and a sentence in the body. When he then viewed the post, it opened up in the app itself, which he liked. He then checked the post on the mobile browser and was satisfied with the way everything looked. The end result matched his expectation.

 

VISUAL RECORD

A visual record of this test does not exist. Subsequent testing will hopefully provide such data.

 

CONCLUSIONS

At the end of the test, the tester offered this feedback:

  • Publishing was a great experience and everything went as expected.
  • “Switch sites” proved to be misleading and he might not have looked there without guidance.
  • Logging in was frustrating and “could have been done better.” The tester was not a strong typist, and was made to do it several times. He admitted that if it wasn’t for the sake of test completion, he would have put the app down and “done it later,” perhaps not revisiting it for some time.
  • After the test, the tester admitted that he would likely never pick up the app again anyway. Writing is not something the tester would do on the go; he prefers instead, a laptop or desktop to work from.
  • The tester would instead want the app for notifications that would help him keep up to date with happenings on his site. He said that an ideal app would allow him to make quick corrections, approve work submitted by other writers on a shared blog, track business/e-commerce information, and generally keep track of his site when away from keyboard.

Customizer: Browse, Install, Preview Themes on Mobile

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

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

Better Dogfooding Tips

This was originally written by @karmatosed. I’ve adapted it for WordPress.org.


Dogfooding is a great way we can use WordPress and test our features. By testing WordPress ourselves, we get to unearth all manner of bugs, issues and fun things. Try setting up a new site from scratch, especially thinking about specific use-cases like a new photoblog, or a company website.

I thought it would be great to come up with some tips for so new folks doing dogfooding can have a resource to start with. So, without further ado here’s just that!

Format

How you present the post really helps for people to read and also how we can use later on. A rough format for reporting your observations via video that works is:

  • Title: Make sure your title has the word “dogfooding” in it somewhere, so it’s easy to scan. Also include what feature you’re testing in title. ex: Dogfooding: Theme Setup
  • Use the more tag to shorten posts. It helps keep the p2 streamlined so it’s easier to scan.
  • Talk about your perspective as a user, and what you’re trying to accomplish.
  • Embed the video in your post.
  • Under the video, pull out any key points at minute marks. ex: 01:00: here’s where I spent a whole minute trying to search for directory themes from my installed screen. Keep this list short; don’t worry about pulling everything out, as if this is long, people will be less likely to read. Just make sure to list the biggest finds.
  • After that, it’s often useful to chop up the video (if it’s very long) and pull out significant clips. Making clips like this is useful for bug reporting and summaries. Clips can go after or next to minute marks, and also next to bugs for easier visual reference. Just consider that not everyone will want to watch your entire video. 🙂
  • Bugs: List out any bugs you found while testing. You can even do a fun thing by putting the bug emoji at end to make them stand out: 🐛
  • Summary: Summarize the main issues and conclusions you found from testing. ex: I stumbled a lot with the theme installation process because… If we did x or y it might improve this feature…
  • Tags: Tag it #dogfooding and anything else relevant.

Here’s what the above would look like laid out:

  1. Dogfooding: Feature You’re Testing
  2. As a user, I’m trying to accomplish x
  3. Video embed
  4. 1:00: something amazing, 2:00: something else amazing
  5. Significant clips
  6. Bugs 🐛
  7. Summary
  8. #dogfooding

Reporting

If you see a bug, report a bug. It’s important we follow through on the bugs and don’t just leave them on this p2.

The same goes for things you think are issues, or even enhancements. Sometimes you may think of something awesome nobody else has thought of before, and it could become something that changes the life of our users. Pretty cool right? That’s why it’s very important to report on trac.

Enjoy and please dogfood 🐶


 

This has also been x-posted to make/design.

Shiny Updates User Testing – update-core.php

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

Shiny Updates Review

Dear Flow Patrol,

We’ve already posted a few user tests and a visual records for Shiny Updates here but in order for Shiny Updates to be in the best shape it can be before getting merged to core, it would help us tremendously if you could look over the latest version and review the various interactions and flows.

If you do encounter issues during your review, it would be great if you could file those on GitHub for us to discuss and fix them.

Our next chat will be on Tuesday, May 17 at 19:00 UTC[/time’] in #feature-shinyupdates, in case you have questions or want to discuss any aspect of Shiny Updates. We’re also around to answer questions outside of that of course, please feel free to let us know.

Thank you!

#feature-plugin, #needs-testings, #review, #shiny-updates

Shiny Updates User Testing – Plugins

This is another Shiny Updates user test focused on the plugin flow of Installing, Activating, Updating, and Deleting. I tried to be more specific with the questions so that we could push the user in the direction we needed them to go without allowing them to ‘discover’ their own way through. While I understand this request, I’m not entirely sure this is the best course of action. Even with specific instructions, the user still had trouble.

 

 

NOTES

2.22 – The user completely missed the ‘Activation’ task. My assumption is she considered ‘activation’ as part of the ‘installation’ process, or the fact that the plugin card doesn’t offer a way to ‘activate’ the plugin after install alludes to it not being a manual task. Or she just completely missed it.

3:05 – Rather than going to her list of installed plugins, she remains in the Plugin Dir and performs the update process from there by searching for the specific plugin I mentioned in the task. This caused a bit of confusion.

4:29 – It bothered her that the Updated icon and the Install Now icon were the same. I wonder if the Install Now icon should be something like a ‘download’ icon to help differentiate?

5:46 – When deleting a plugin with Shiny Updates installed, the deletion process still took her to the Bleak Screen of Sadness.

6:51 – After performing a bulk update on two plugins, an error appeared and no updates happened. She didn’t notice the Error Message at the top, nor did she initially notice the inline messages in the plugin rows themselves.

8:27 – The inline message in the plugin row after Updating the plugin still reads “Updating…” even though it’s done and should just read “Updated”.

9:18 – The green left border on the Updating message looked like the update only got so far. Because the message still reads “Updating…” she thinks that the dark green border is supposed to fill in as the updating process occurs.

 

CONCLUSION

I’m going to refine the tasks a bit more and work with @obenland to make sure the errors are resolved before creating more tests.

#shiny-updates, #upgrade-install

Shiny Updates Visual Records

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)

Theme update on multisite

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.

Plugin delete in multisite

Documented in above video, this is to show how it looks on mobile.

Plugin install error

Theme install error

FTP credentials

#shiny-updates, #upgrade-install

Deleting a site with iOS app 6.1, iPhone 6+

With the April 4th TestFlight build.

#app, #ios, #phablet

Editor: Survey of the link toolbar and dialog on an iPhone 6+

4.5-RC1-37079-src with 36359.1.patch applied.

 

#33301, #36359, #editor, #inline-link-toolbar, #inline-toolbar, #ios, #phablet

Editor, Media: Inline image toolbar obscured by selection, copy edit toolbar, iOS

Taping an image to bring up the inline toolbar results in a selection box around the image and the cut-copy-paste toolbar popping up. Depending on where you tap, the image toolbar can be unusably obscured. Tapping through to the buttons doesn’t always work. Editing posts that contain images is very frustrating on iOS devices. I often accidentally insert individual images into posts instead of galleries thanks to the media modal defaulting to individual insertion. Removing twenty images from content while dealing with the inline image bar is joyless.

Contrast with Android, which is well behaved.

 

#android, #editor, #images, #inline-image-toolbar, #inline-toolbar, #ios, #media, #phablet, #phone