One of the first tasks we undertake when starting a new project is to perform some preliminary usability testing. This often involves screen recording of a typical user session. Ideally this would be undertaken in a lab environment which would allow for more detailed recording of both the screen and the subject.

My preference is for these preliminary tests to be carried out with no, or only minimal instructions to the user. The goal here is to identify common workflows and hunt down user frustrations/roadblocks.

An Early Candidate

Existing “Save Work” Application Flow

Very early in our usability testing we identified the “Save Current Work” application flow to be problematic. Here is an anonymized prototype which demonstrates the typical user flow.

It was immediately clear from our testing that users were frustrated by this interaction. Post-test interviews indicated that teachers were using the “Save” button often due to anxiety with regard to losing work, but they found the interaction to be unnecessarily jarring. It necessitated a context switch from “editing course material mode” to “addressing a system message mode”. This context switch was irritating for the user and unnecessary from a UX/UI perspective.

Improvements to this workflow were expected to yield a great ROI in regard to developer time needed to implement changes and user satisfaction with respect to improved workflow.

Platform Considerations

The learning management system that we were working with is web based. This means that when presenting proposals for system improvements we need to keep in mind certain realities such as network latency which will affect the end user’s experience. Operations such as saving work can take as long as 200ms, and can fail, particularly if the end user is accessing the system via cellular network.

UX Issues Identified

The interaction generated a modal window

The system did not have good keyboard support meaning that users needed to switch from keyboard to mouse to dismiss the modal window

The information presented to the user was not of a critical nature and therefore did not warrant such an overbearing UI.

Workflow

As with any major, user facing, product change, devising a new and improved user flow was an iterative process which required liaising with a number of stakeholders ranging from the product management team through to developers and of course end users.

Proposals

The following demonstrates, in roughly chronological order, a series of prototypes that were developed to address the usability issues identified.

Proposal 1

The user no longer has to give their attention over to a modal window. While this is an improvement, the user is forced to wait while a potentially lengthy network request is made.

Proposal 2

This iteration lacked a clear indication that changes were saved successfully. From user interviews it was clear that users needed clear communication of the operation’s status.

Proposal 3a

Proposal 3b

Motion is used to draw the attention of the user to a notice that requires their attention.

Proposal 3c

The user cannot miss this important notification, therefore the notice no longer automatically fades away, instead requiring the user to dismiss it.

Rapid Prototyping & User Testing

User testing is an integral part of any UX audit. Our prototyping tool of choice, UX-App, allowed us to quickly produce and edit prototypes. We were able to get immediate feedback from users by demonstrating changes on iPad and Android devices while on campus.

Motion Design

Motion design is a critical component of any modern UI. UX-App is a rapid prototyping tool which allows us to quickly determine where motion can add value to the end user experience.

At this early phase of UX design it would be a costly mistake to devote resources toward pixel perfect animation key framing. Our goal is to iterate on ideas quickly by using UX-App’s pre-built animation templates that are tailored specifically for UI designers. Particularly useful are animations devoted to hiding/showing and highlighting elements such as buttons labels etc.

The choice of whether or not to include motion design in a UX audit is dependent on a number of factors. For example, motion design is more critical for mobile applications than for desktop. One thing is for certain though, communicating complex application flows and state changes via text or static wireframes is not always sufficient.

As a UX practitioner it is important to be able to produce UX artefacts that incorporate motion.

Some tools that are used by UX practitioners include

UX-App

Atomic

Framer — for designers with a technical background (requires programming)

Proto

Flash

Recommendations

Our audit covered many areas of the LMS, from student pages to faculty areas, spanning many application areas such as assignment submission and grading as well as study program planning.

Many of our recommendations centered around reducing complexity by consolidating multi-step processing into more streamlined flows and by reducing context switches as much as possible as demonstrated by this mini case study.