Lessons in UI Design: Where does “doing” happen?

I recently tested some designs for my company and thought that a screen design I came up with (a UI module that gives users better visibility into their finances – in a sense, “how are things going?”) was rock solid. It was building on a couple of earlier iterations of the design and I considered the testing to be a mere formality.

Boy, was I wrong.

Testing began, and before I showed the first participant the design in question I exposed the participants to other designs in the prototype system, screens which allowed them to move money around and do things. Then, I got to that “how are things going?” screen.

Blank stares. Confused looks.

EPIC FAIL.

Whenever you have to explain to a participant how something works when they can’t, after some consideration, you tell yourself “well, you see that big thing on the wall over there? It’s called a drawing board, get back to it.”

(And, obviously, the majority of your users will not have the opportunity to have a tall bald man sit next to them and tell them how stuff works – though anything could happen).

After seeing the same reaction occur, again and again, with the remaining participants it became pretty obvious the design was NOT “rock solid” and in fact had some significant issues. What was simple and obvious to me, the designer, was not at all to the participants, who all represented typical users of the existing system. Again, this is why you test designs with users (probably preaching to the choir, but still).

After analyzing their responses and the notes my lab partner took, I discovered a major problem with the design. It was intended to be “interactive“ in that, if you saw a data point on this screen that was a cause for alarm, you could click it, open the item, and change it. The participants did not see this AT ALL. They thought, due to the location of the screen in the navigation structure and the content surrounding this design that the screen was only a helpful “report” = Informational, NOT functional.

Why? Well, it was because the navigation structure that was applied in the proposed design. The UI modules that supported the primary functions (moving money around) were on other pages… the participants expected that they needed to go to one of those pages if they saw something “wrong” instead of doing it on the page itself.

In other words, the participants separated the system into two spaces: the “doing” space and the “reviewing” space, and mixing them in this screen caused an unexpectedly high amount of confusion.

How to fix this? Well, I’m still working on it, but a possible solution is to place a smaller, more streamlined version of the “how are things going?” module on the functional pages, as “thermometer” to help users understand their current situation (and making sure to not duplicate functionality that already exists).

This was a good reminder to me, and hopefully you, kind reader, to remember: Every screen, like a scene in a movie script, should have a point to it, a purpose, to help support the goals of the user. What I did was the UI design version of mixing a dialogue-heavy exposition scene with a big action sequence… it was a muddled mess. Live and learn.