Distraction-free Writing Mode

Once upon a time in WordPress there was a New Feature called Distraction-free writing mode. You accessed it by clicking the icon in the editor toolbar that means full screen pretty much everywhere on the web.

post editor toolbar

It would load a new screen tha mostly just consisted of a writing box not surrounded by meta boxes or formatting, and what limited formatting options there were would only appear when you moused out of the writing area. It wasn’t perfect (I would have liked that fading toolbar to have all the same formatting options as the regular editor) but it was pretty non-distracting, and it just felt calm.

old distraction-free writing interface

A while back I noticed some changes in the wp-admin regular editor. All the navigation and meta boxes now faded away while you were writing, and I thought, “Oh, that’s pretty nice, kind of a DFW Lite!” I didn’t pay too much attention, as I was just writing a quick post, but in my head I approved, and thought it was a good improvement. Until this morning.

Most of my blog-based activity happens on work-related blogs that have front-end posting forms, so it’s been a while since I tried to access DFW mode. But I was going to be writing a long post, and I wanted to go over into that peaceful screen, so I clicked on the full-screen icon. That’s when I discovered that what I thought was DFW Lite was actually the new DFW. There was no more new screen.

At first I thought,”Hm, that’s a lot more efficient. Good for them!” Then I started writing, and thought, “[Letters-in-a-configuration-to-replicate-my-slightly-alarmed-and-uncomfortable-sound]!” I hated to admit it, but I felt physically uncomfortable. Am I turning into Sheldon (skip to 3:34)? Crap! Anyway, here’s why I don’t love the new DFW.

When wp core switched over to the “toolbar anchors to top of editor no matter how long your post” setup, users lost the ability to grab a corner of the editor and drag it to make it taller. Since it is supposed to automatically resize as you write, most people thought this was a tradeoff with a net benefit, and even though I really didn’t want to lose my little corner resize handle, I agreed that the net benefit was worth it. The thing is, if in your head you’ve already thought out a long post, starting in the small box feels cramped, kind of like when you have to repack a sleeping bag and you’re smooshing it with all your might to get it to fit back into the compact stuff sack.

Think about opening a New Document in MS Word (or equivalent writing program) , or a writer putting a fresh piece of paper in the typewriter (for those who are too young to remember, it’s like this). There have been reams written by famous authors in the past about the feeling that action engenders — a feeling of limitless possibilities, a knock on the creative door, an open road ahead. That’s what DFW tried to emulate. Starting in the small box instead of the full height box feels like possibilities with limits, a creative window that won’t open more than 3 inches for safety, a road with one lane closed for construction. Thoughts scrunch down to try to fit into the available space.

Even when the box expands to be the height of the screen (minus padding against top and bottom of browser), a chunk of space is lost at the top for the toolbar. That fade it used to have really did remove distraction. I wish there had been a way to combine the zen of the fade away (Matt’s original nickname for DFW was zen mode) with the convenience of the always-at-top placement.

In the old DFW, the writing window really did have that feeling of a fresh New Document or crisp new sheet of paper. Now, even once it’s tall, it’s a bit off-center to the left, because that’s where the editor box is when on a screen containing navigation and metaboxes.

Screenshot of current distraction-free mode

There was a time (pre-2000) when I didn’t think too much about alignment in UIs. Then I got a lot of design ideas drilled into my head that stuck, especially regarding alignment. I like asymmetry in a lot of things, always have. Hell, in a site we were just working on one of the things we said we wanted was some asymmetry. But for DFW, the symmetry — the centeredness — was a big part of what made that screen so calming. Your brain didn’t have to do any pattern recognition or internal balancing to make it feel right. But now it skews to the left and it’s driving me crazy, Sheldon style. This isn’t zen for me; it’s a misused apostrophe, a lowercase p, a cabinet door left open.

I thought I’d be a holdout forever against using the new wordpress.com posting interface (I have a lot of issues with it, surprise), but, well, their DFW has that open and symmetrical feeling (even if it has other problems) that makes for a non-Sheldony writing experience.

Screenshot of distraction-free writing mode on wordpress.com

So this might be my last post written in wp-admin DFW mode for now. Farewell, old friend!

* * *

Standard disclaimer when writing about WordPress: This is my personal opinion. I have not been the UX lead for WordPress core for a couple of years now, so this post on my personal blog should not be seen as representing the WordPress project in any way, it’s just my personal experience with a user interface.

Testing 1, 2, 3: Usability and WordPress

I did some lo-fi testing of WordPress 3.3 pre-beta on Sunday/Monday with local users, but since in the next set I want to get more multisite users, finding good participants will be tougher. Savannah has an art school, a music scene, and a burgeoning tech culture, so I can’t spend an hour at The Sentient Bean without overhearing someone tell their co-caffeineators about some new WordPress site they’re working on — a flyer posted for half a day gets plenty of individual users.

Multisite superadmins, though, are a bit harder to come by without effort, so I’m going to test out using some fancy web technology called “the skype” + “quicktime recording” as an experiment.

A Bit of Testing History

Once upon a time, usability testing was done in a lab, and was very expensive. Costly software like Morae was used, whole research teams were needed to recruit participants, moderate test sessions, and analyze results, and sometimes things went really high-end and lasers were involved. We’ll call this “formal usability testing.” The testing done in Spring 2008 on WordPress 2.5 and the Crazyhorse prototype was formal, included laser eye-tracking, and led to/strongly influenced the 2.7 admin redesign. Read all about it.

If you couldn’t afford formal testing, lo-fi setups involving a camcorder and a tripod allowed capturing the screen and participant speech, but even with a decent camera, the screen images were never fantastic. Also, unless you set up two cameras, you would miss things like facial expressions (which are hugely informative during observational testing). Although you could set it up anwhere and didn’t have to rent a lab, it was a clunky solution.

It is hard to believe it’s been so long, but I have been doing usability testing –both formal and informal — for more than 12 years now.

In July 2008, Clearleft released their Silverback app, and popularized the concept of  ‘guerrilla’ usability testing. Armed only with your Mac and their app, you could get screen capture and user video/audio thanks to your Mac’s built-in iSight. This was a game-changer. Though it didn’t have the hardcore analysis features of Morae, simply getting a high fidelity screen cap on your own was huge… and it was only about $50! Suddenly, you didn’t need to rent a big lab, you could use your regular office or even set up shop at the local caffeine vendor. Just stick people in front of your laptop and you were good to go. Suddenly testing costs could be a tenth of what they had been, and guerilla testers cropped up everywhere. By the time 2.7 was ready for testing in Autumn 2008, that’s how I was doing it, too.

I had grand plans to introduce a distributed testing model to create an avenue for usability testing professionals to have a way of contributing to WordPress that would be analogous to writing patches or helping in the forums. I put up a post about it, corresponded with potential volunteers, and tried to work out the logistics. Having each volunteer running Silverback and then uploading their videos to a central repository for analysis was the plan, but infrastructure was a problem in two ways:

  1. How would we match volunteer test moderators/usability professionals with volunteer participants? Well, there were some more grand plans around building a volunteer database tied to the .org profiles, but when the person who was working on it left, that basically sputtered, so finding participants remained a normal logistical nightmare.
  2. It would mean only Mac users could conduct testing, and non-Mac users would be using an unfamiliar OS during the test.
  3. We didn’t have a good way to collect the session videos.

So that plan never really got off the ground.

Skip to Today

Guerilla testing is still going strong, and if the number of people proposing sessions about it at SXSW is anything to go on, the fact that it’s been more than 3 years since Silverback was introduced hasn’t made it any less exciting a concept. That said, it’s still not a perfect solution. Let’s look at pros and cons…

  • Pro: Output video content and quality on par with tools like Morae
  • Con: Lacking in the post-test analytic tools of Morae.
  • Pro: Works on Macs! Morae is still PC only.
  • Con: Works on Macs! 3 years later, Silverback is still Mac only, excluding all our PC users from participating in tests in a familiar environment, and preventing non-Mac usability pros from getting involved this way.
  • Pro: Much cheaper than buying Morae.
  • Con: If the plan is to have many people doing testing all over, each moderator needs a copy of Silverback. While markedly less expensive than copies of pro software like Morae, adding up all the copies of Silverback would wind up being more than one person or team running Morae.
  • Pro: Can conduct testing in convenient locations such as an office, a coffee shop, etc. or travel to participant location. Great flexibility.
  • Con: Limited to in-person-only testing unless test participants download and install Silverback on their machines. We don’t want to require people to install software (even a free 30-day trial version) just to be a volunteer test participant, so anywhere we want to test with real users, we would need volunteer moderators with the software to be co-located.
  • Con: Non-realistic experience when using a moderator-provided laptop during in-person tests. Real-world things influence how a user interacts in the browser with any web app — saved passwords, form auto-fill, chat windows popping up, email notifications, torrent downloads of Doctor Who hogging your bandwidth, screaming kids in the background, a ringing phone, you name it. To get a more realistic picture of usage/behavior, the researcher always prefers the setup that is as close to normal as possible. Using someone else’s laptop just doesn’t cut it.* And just as Morae limited us to PCs, Silverback is limited to Macs, but we want to test with users of both platforms. (And Linux! Don’t forget Linux!**)

So while guerilla testing with Silverback is cheaper/and more flexible than hiring a lab, and provides you with deeper observational information than an online service like usertesting.com, you’re still limited to doing testing in a place where you can have both a moderator and participants, which makes the participant pool quite limited, and not representative of the WordPress user base as a whole.

With the advent of Skype screensharing and Quicktime screen recording, we may finally be getting to a point where we can bridge that gap and include participants who are not local to the moderators — where we can get good recordings and can let participants use their own machines without significant cost or requiring unfamiliar software downloads. The drawback to this is that if you’re using skype to screenshare, you can’t also continue the video chat talking head.*** Still, observing real-time usage in a far-away participant’s own environment while being able to ask questions is a big step forward. So, I’m trying it out. We’ll see how it goes… Skype screensharing can get jumpy or laggy if you’re not on a reliably blazing internet connection.

If you are someone who uses WordPress multisite as a superadmin and would like to be a guinea pig to help me work out the kinks of this method (and get a look at some new UI stuff we’re considering at the same time), leave a note in the comments and I’ll get in touch over the next couple of days. Thanks!

When we get into Beta, assuming the trial run of this goes okay, I’m hoping to try and revive the distributed testing idea, so if you are a professional usability tester and would like to get involved with that in a couple of weeks, a note in the comments will get you added to the email list for when that’s ready to try again.

All that said, why do we do testing? It’s time-consuming and expensive, even when the software is cheap or free. Most agencies do it to show their clients that the design decisions they made were good ones. Most companies do it to find out what problems customers/users have with their products. With WordPress, we don’t so much have a “client” and our users tell us straight up in the forums what things cause them problems. So why should we do testing at all?

  • Define benchmarks. One of the things we’re always trying to improve with WordPress is making it faster. How long it takes to complete various tasks in wp-admin is one benchmark of performance and usability that can be measured. Testing can provide a sample data pool with these stats.
  • Test assumptions. With so many people weighing in on every design decision for WordPress, sometimes we have to forge ahead in what we think is the best direction despite siren songs from contributors who would prefer a different UI approach to something. Design by committee, camel, etc. That said, when’s there’s more than one UI idea or suggestion that seems reasonable for a given task, we don’t want to cling dogmatically to the status quo, either. Testing a few different design approaches allows us to see which designs people seem to respond to better.

So, could we live without testing? Sure. But do we want to? No. Seeing our work being used by regular people — not code contributors, not designers, not WordPress insiders with a vested interest in the choices made in the UI — keeps us humble. I challenge you to watch someone who’s not especially web-savvy figure out how to embed a video the first time. Change the tagline. Create a custem menu. I think the perpetual praise of WordPress as the most user-friendly platform for blogging and content management is justified, and we’ve worked hard to earn that reputation, but everyone on the core team is painfully aware of how much further we still need to go. Good testing can help us get there faster.

P.S. I haven’t even touched on testing with people of different abilities, different languages, etc., but that all needs to get more attention as well.

*And also means the researcher will have to re-arrange all her keys to be QWERTY for the sake of testing, then swap back to Dvorak afterward. Hmph.

** We usually forget Linux.

*** If we wanted to do another Mac-only thing, people with iPhones could use FaceTime for the talking head part while Skype was in screen share mode.

A Different Plugin Search Links Thing

When you search plugins from within the admin, it brings in the repo search results. I think that the plugin name should pop up the tabbed info from the repo page for the plugin, instead of linking to the repo page in a new window or the plugin site. I also think that the Install link should be on the left, not the far right, under the plugin name, so it’s in the same place as action links on other Plugins section screens, and that there should be a View Plugin Site link there, like there is on the other screens, too.