As part of our design process at Ephox, we put a lot of energy into reducing the obstacles between the creation and consumption of content. The harder we work on creating simple and elegant content creation experiences, the less our users will feel like they engaged in “editing” in the first place.
We base our general approach to UX on design thinking and qualitative research methodologies – requiring frequent experimentation, concept validation, and user testing. In April this year, we conducted an observational research session in Brisbane (Australia) to road-test a new inline image editing feature.
In this article, we’ll explore what we did, what we discovered and how we changed the feature design as a result.
The new inline image editing feature
The goal of the new inline image editing feature is to reduce the effort needed to embed the perfect image into content such as blog posts and wiki pages. Right now, cropping an image usually requires the author to switch to an image editing app like PhotoShop, perform the desired edit, export the updated image and re-insert it into the blog post. Our aim was to reduce this multi-step process into a simple action that could be completed right within the text editor.
Initial designs considered
As anyone who has worked in software development will attest, there are many ways to implement any given feature. In our example above, we considered several alternate designs:
- We could add image editing “buttons” to the main toolbar;
- We could add the image editing options to a right-click menu; or
- We could float the image editing buttons in a contextual toolbar near the selected image
Each of these options had implications on both the development effort and also the impact on the UX. After examining the trade-offs, the decision was made to implement and test the first option: adding the image editing buttons to the main toolbar, as shown below.
To validate the efficacy of the chosen design, we devised a simple test: given an image inside the text editor, crop the image down to contain a subset of the original image. The images above show the test as presented to the participants.
Testing the design
The instructions for the test were quite simple: the tester asked each participant to crop down the image in the text editor to show only the girl and the balloon (original image credit: Banksy). The participants were asked to think aloud as they completed the task and, with the participants’ permission, we took an audio and screen recording of each test (sample video below).
Each participant was asked the same question and left to complete the task on their own. After the first couple of participants, however, it became clear that the task was proving too difficult to complete in a reasonable time frame. So, we adjusted the test slightly by offering a “hint” to any participants that were not making progress after 2-3 minutes of effort.
On completion of the initial task, each participant was asked two follow-up questions: (1) what do you expect will happen when you click away from the image (after selecting a crop area), and (2) what do you expect will happen if you try to re-crop the (cropped) image?
We ran the test during the April WordPress Meetup in Brisbane with 15 participants in total – seven male and eight female, ranging in age from early 20’s to late 60’s. The participants represented a wide cross section of computer users. All participants were familiar with editing a document in a browser (this was a WordPress Meetup after all!).
Although 15 participants may seem like a small sample size, it can be enough to draw certain conclusions. As a general rule, when doing observational research of this type, the right sample size will become apparent when patterns begin to emerge, and results converge. An experienced tester will continue testing for a while past this point. In this case, the magic number was 15.
What we discovered
The testing session revealed that most people did not notice the additional image cropping buttons that appeared in the toolbar when the image was selected. Of the 15 participants, seven needed a hint to complete the task. The remaining eight participants eventually found these buttons, however, the average time to complete the task was far too long: 2:11 mins (falling way outside of acceptable UX recommendations).
On the other hand, the responses to the follow-up questions were unanimous: everyone expected that the crop would be canceled on click-away and that re-cropping an image would begin from the cropped image state (not the original image state). A summary of results is shown below.
How we changed the design
The inline image editing test provided us with evidence that the first design we were considering was likely to result in a poor experience for our users. We now knew that we would have to consider one of the other design options.
One of the positive consequences of conducting observational style testing with a loosely guided “think aloud protocol” is that very often, the participants will articulate what they were expecting in the process of completing a task. In our case, it became apparent that either a right-click menu or a floating contextual toolbar will have made the task simpler for our users. So, that’s exactly what we did – keep an eye out for this change in the next Textbox.io release coming out in July 2016!