UI, UX, CRAP, and Revision

Continuing our work to bring low-cost but high-impact improvements to the user experience of Eli Review (see the previous post on improving new user onboarding), this post looks at how how some relatively minor (and cheap!) improvements to the user interface (UI) of one specific feature led to a much more desirable user experience.

The Importance of CRAP to UX

Since the audience for a post like this almost certainly knows that CRAP is a heuristic, short for Contrast, Repetition, Alignment, and Proximity, and that it was first named in designer Robin Williams’ in The Non-Designer’s Design Book, I’ll spare further explanation of it here.

However, the importance of CRAP to the user experience is sometimes downplayed, particularly in the design of user interfaces (UI). There’s a litany of “UX is not UI” posts around the web (just look at the Google Image Search results), mostly written by practitioners attempting to prevent UX from being pigeonholed as only being about the UI or in drawing disciplinary maps of what goes into a holistic UX. While this is certainly important to keep in mind, a UI that neglects CRAP can be a powerful detriment to a good UX.

One of the countless results on Google Image Search for “ux ui”.

In the case of Eli Review, the revision plan builder is one instance where a poor implementation of CRAP principles resulted in an undesirable UX. This feature is meant to provide two important experiences to students:

  1. Helping them see and understand the moves behind effective revision (selection, prioritization, reflection)
  2. Helping them put those moves into action with features that let them practice
The moves behind revision planning, which the revision plan builder in Eli Review is meant to teach and support.

In Eli, students receive feedback from their classmates and can select from the comments they receive (more about that feature on a different day). The revision plan builder is meant to support prioritization and reflection in three ways:

  1. Writers can drag and drop the feedback they add to a revision plan to demonstrate their revision priorities.
  2. They can rate each comment to indicate how helpful the found that specific piece of feedback.
  3. They can annotate each comment they add to indicate why they added it and how they intend to act on it when they revise.
  4. They can add a global comment to talk about the plan as a whole, other things they learned from their reviewers (or from reviewing others), or any other plans they have for their revisions.

As we’ll see in the next section, the poor implementation of CRAP in the revision plan builder resulted in a UI that did not communicate these principles as well as it should, and a redesign with CRAP principles in mind made this UX much more effective at accomplishing our goals of a UX that supports learning and practicing.

Hidden Affordances

The existing revision plan UI looks like this after students have added a few comments:

The moves behind revision planning, which the revision plan builder in Eli Review is meant to teach and support.

Where this design falls down hard is in the contrast between comments and the alignment of the different functions available for each comment:

Two comments that a writer selected from all of the feedback received on a review and added to the revision plan.

What we see here in these two comments is that the two objects blend together in a way that makes it difficult to tell which features are associated with which comment. As a result of this lack of contrast, and the extreme proximity of the two objects, the “add a note about this comment” feature is subverted, almost hidden, and it becomes unclear which comment the link refers to. Additionally, ratings are given much stronger visual weight than the note feature, which is not a desirable outcome when we want to encourage reflection on why they selected each comment.

The lack of boundaries between comments also subverts the prioritization functionality, making it less than obvious that comments can be reordered using a drag-and-drop move. Even when students try to rearrange, the CRAP of that interaction makes it less than obvious that they are actually rearranging that list or how those changes will affect the plan:

While these design issues prevented the features from being utilized in the ways we as teachers hoped they would be, where students complained about this UI most is in trying to understand how exactly they turn in their assignment. Looking at the full screenshot above, is it immediately obvious how one would do that?

It’s not immediately obvious how to submit a revision plan.

If you overlooked the “Share with Instructor” link in the yellow box at the top, you’re not alone. It looks exactly like every other bit of support microcopy — a failure of contrast — and doesn’t look anything like the submit options (all buttons) students work without throughout the rest of the application — a failure of repetition.

Improved UI, Improved UX

Without having to invent any new functionality, we were able to apply CRAP principles to this feature and improve the UX amongst our initial testers:

The revision plan builder with its designed tweaked with some CRAP principles.

The immediate reaction from students who gave us feedback was that it just looked cleaner and that it was easier to read. This was certainly one of our goals, to improve the look of the app. However, when our testers engaged with the interface, they noticeably improved when it came to learning and practicing the revision moves.

The redesigned comments, with their affordances showing.

A redesign of this UI with CRAP principles in mind improved how users interacted with this feature substantially:

  • Contrast: the rating and note functions for individual comment pop out from the UI much more clearly, making them better calls-to-action and improving student engagement.
  • Repetition: by repeating this pattern for each comment, it becomes much more obvious that the revision plan is composed of individual objects that can be engaged with.
  • Alignment: the alignment of the pieces in the original design wasn’t bad, but creating some space between each comment made it easier to tell them apart.
  • Proximity: by grouping the elements related to each comment in a distinct box, it became clear which features belong to which comment.

These same principles were applied to the drag-and-drop interaction for prioritizing the list of feedback. In addition to making the entire grey box with the priority ranking a handle that can be grabbed to initiate the drag (making the dragging affordance more clear and more likely to be utilized), but now the objects remain distinct as they move, making it much easier to see where to drop them and what the new prioritization will look like:

Additionally, the “Share with Instructor” option can no longer be confused with microcopy or support links: it is now a big fat button at the bottom of the interface, giving it substantial contrast from its neighboring content and repeating the design that students encounter elsewhere in the app:

No longer confused with microcopy.

Since these upgrades are only now being rolled out publicly and it will take some time to notice the affect on the number of support requests and utilization of revision plans. However, the initial feedback from our test users gives us real hope that these changes will result in more and better engagement with the feature and will dramatically improve opportunities for students to see, understand, and practice these moves that research tells us lead to better writers.

Originally published at mcleodm3.com on October 27, 2015.