Initial Editor Blocks prototype editor testing

@iseulde linked another prototype for people to discover in #editor on Slack. It’s a work in progress so very much at this stage discovery and feedback is useful.

How to test?
You can test in any way you want. You can test yourself and also test others. You can take images, audio or video. If you do create a video don’t forget to pull out those bugs, action points and do a summary. Cutting smaller videos out is also really useful.

Questions you can ask:

  • (on first look) Can you explain in words what each section does?
  • Can you re-order? How does it feel? What are your thoughts?

If you find a bug please report it in this repo.
You can also leave results from your testing either as a comment here, or you can link to a blog post.

Share a walkthrough of setting up a WordPress site

A really powerful way to share your experiences using WordPress, is to actually show us how you use it to build sites. As the Editor and Customizer teams start working on researching and designing better experiences for core, now is a great time to share examples of how you use them in your day-to-day work.

So, what does that mean?

Please walk us through your process of setting up a new WordPress site. I’d suggest is to pick a subject — for example, today I’m going to redesign my blog, or I’m going to build a website for a local restaurant — and then walk through the setup process, from installing WordPress, to picking a theme, to setting up some pages and writing some blog posts, to completing something you’d feel comfortable launching.

As you do your walkthrough, be sure to take notes about your experience and keep a list of any bugs you encounter.

Once you’ve reported back from your own experience, asking someone else such as a friend, family member, a coworker, and even a client would also be helpful. For some useful pointers as to how to run user tests, you can check out this handbook link.

What format is useful?

How you report your walkthrough is truly up to you.The important thing is to feel comfortable with what you share. Here are some suggestions:

  • Video (with or without audio)
    • If you do a video with audio, please also create a transcript. If you do a video without audio, feel free to just highlight the biggest pain points, “gotcha!” moments, and bugs. You can post your video to Youtube, or upload it somewhere like Cloudup or CloudApp to share.
  • Screenshots
    • You can do a series of screenshots. With each screenshot, add a caption or comment about what you’re doing, along with any highlights or observations.
  • Text
    • If you’re not comfortable or capable of doing video or screenshots, it’s also okay to just post your observations via text. Lots of times when I’m casually testing a feature, I’ll write some freeform, stream-of-conscious style notes. These are good for capturing your state of mind while you’re working and revealing particularly frustrating moments.

However you decide to do your walkthrough, please post your results here as a comment. If you’re comfortable submitting bugs you find to Trac, add those tickets to your comments. Otherwise, describe the bug you encountered and we’ll create a ticket for you.

Thanks!

+make.wordpress.org/flow #user-testing #editor #customization

(Thanks to @karmatosed for getting the draft for this started!)

Improving Post New

Before I get into it, I’m going to need help to get some of these projects going. If you see something you’re interested in working on, let me know in the comments. The following project proposals are not intended to be a single feature plugin because they are separate projects with separate goals.

I could use your help with:

  • running usability tests
  • putting out a survey
  • design
  • managing some of these projects
  • development
  • testing (including accessibility testing)

The process

Before we get into designing, we need to do discovery (research) and a clear idea of which specific problems we’re going to solve. All of these will require research, some usability tests, maybe a survey or two,

Potential projects

I did a bit of searching on Trac (and am still doing so) specifically looking for anything related to posting or content creation. I have started some initial researching on anything related to creating content. I looked as past usability tests. I looked at some feedback around WordPress.com’s editors as well. We can learn from some of the ideas tried there.

The following are a list of project ideas. If some get interest and traction, we will do a kickoff post for it (depending on scale) and I’ll add any resources/related information I’m aware of. Ideally, I’d like one of you to step up and lead a few of these if you have the time and are interested. If you have something you’d like to add as a potential project idea, please let me know in a comment.

Publishing UX

@helen brought this up as a project idea and it’s a good one. Here’s the proposal:

When running user tests for post formats during the 3.6 release cycle, one of the most striking observations was that a majority of users had a hard time locating the Publish button at all. Because it’s typically in the top right, it’s possible it’s not on the screen, and is very disconnected from the general content workflow of writing and then publishing. The most common idea is to put the buttons in the bottom bar of the editor, since it pins and makes sense within a writing flow. There are, as always, other considerations to make, such as post types without an editor or various post statuses (another problem in the current box – you can’t actually have a private draft, because it’s the same field in the database). This project would likely involve multiple approaches, storyboards, mock ups, and lots of user testing through all stages.

Related ticket: #17028

Shiny saving

Currently, when saving or updating a post the whole page reloads. The page reload makes it easy to lose your place when saving or updating. Because of the page reload, saving feels slow.

My proposal is to introduce Ajax saving to prevent the page reload. This will introduce new problems to solve. We’ll need a way to provide feedback to the user about the status of a save. It will need to be accessible. I believe those are both doable.

Related tickets:

Toolbar remix

I’d like to see what we can do to improve the editor’s toolbar. This will likely include a bit of button shuffling and some style changes. For example, I think the drop down to select the type of text (heading 1, paragraph, preformatted) should be in the primary toolbar rather than in the kitchen sink.

Related ticket: #27159

Post New UX

I’d like us to take a look at the Post New UX as a whole. This might result in some mini projects/experiments rather than being a single feature plugin. I suspect the space could be utilized more efficiently. We can probably also make Post New feel a bit less overwhelming for newer users (I don’t want to remove functionality at all).

Metabox physics

Metaboxes are helpful. That’s why we have so many of them, right? Let’s see what we can do to make them part of the posting flow rather than a bunch boxes of settings that we have to battle before publishing anything. This project will need a good amount of love and research and will need to consider how plugins/themes use or hijack them. This might be a good place to provide some patterns or suggested design practices as a resource for plugin authors.

Autosave

I think if we implement Shiny Saving, we can definitely have autosave functionality. When digging through WordPress.com editor feedback, autosave was almost universally loved. It does have some awkward issues with revisions, but I’ll talk about revisions in a second.

Revisions UI

This is a bigger less-urgent project (unless we get Autosave in), but I think the revisions interface could use a bit of a rethink. It is currently a bit difficult to use and understand. I know @melchoyce had come up with some promising ideas during the community summit when we were discussing it with @adamsilverstein. This project will likely include some way to move between revisions quickly as well as potentially showing a different interface for viewing changes.

Don’t break my divs

It’s really easy to break just about any theme by forgetting to close a `div` or a `span` (and some other elements). I’m wondering if we can do something to warn users about unclosed html elements to give them some idea why their preview is looking funky. I wouldn’t try to autoclose tags.

Live preview

Wouldn’t something like a live preview (even if it’s tiny or off screen) be pretty handy? I think so.

Proofreading mode

I’ve had quite a few people request some sort of proofreading mode that allows them to comment/highlight/interact with post content. This is in the realm of projects I’m not sure are right for WordPress core, but might just be. Even if it isn’t, it could be a pretty dang rad plugin (if there isn’t one already).

Content blocks?

I was hesitant to add this as it’s been attempt a few times in the last few years (RIP CEUX). The idea of content blocks has come up again in conversation a few times over the last few weeks so I think we should revisit it with vigor. I know the Shortcake group is looking at an interface that might go hand in hand with a content block interface. The initial Shortcake implementation could be great first steps toward the block editor some of us dream about (or have nightmares about).

Thoughts?

If you are interested in tackling any of these, have a proposal in addition to these, or are have concerns/thoughts about a project, let me know in a comment.

 

#editor, #post-new, #pulishing

WordPress Images/Galleries — Usability Test 1

I did a usability test on the recently updated image and gallery features in the editor using WordPress r27502 with a beginner user.

Summary

  • Drag and drop to add an image is not discoverable
  • Resizing an image by dragging is not discoverable
  • Extensive inline help needed to figure out cropping
  • Unable to find “medium” size setting
  • Difficulty replacing an image, but only because she didn’t insert one to start with
  • No trouble rotating, deleting, re-adding images
  • No trouble adding, deleting, or changing columns in a gallery

You can download the full video here: bf80a9a3.mp4 (Length: 19:00)

Points of Confusion

Drag and drop to add an image is not discoverable (Length: 3:01)

Task given was to resize an image (trying to get them to drag the corner), but she scales it instead (Length: 1:05)

Difficulty cropping, had to use inline help to learn how it works (Length: 1:18)

Unable to find the setting to change an image to medium size (Length: 1:41)

Difficulty replacing the image because she never actually inserted it in the first place (Length: 3:22)

See more highlight reels after the jump.

#editor, #images, #media, #usability-testing-2