Smart Interaction Design

I was recently asked to change my password through my online banking institution. In making the change, I was struck by the system's thoughtful interaction design.

For starters, when you arrive at the form, there are only two fields present, with basic instructions off to the left. My view is uncluttered and it takes little effort for me to digest what’s in front of me. The page has been designed in a way that is less verbose and more visual. I like that the form is short, uncluttered and simple to understand.

The truly satisfying experience for me happens when I begin to interact with the form. As I click into the field, I'm provided with guidance on how to format my passcode. As soon as I begin to type, the symbols change in shape and color, indicating whether or not I'm filling in the form correctly.

Once I pick a passcode that fits the bank's requirements, the system signifies that my entry is correct by displaying green check boxes next to all of the passcode criteria, giving me clear visual feedback that I can proceed to the next field.



As I tab into the second field, I again receive feedback pertaining to the field and the desired behavior. This feedback happens in real time, rather than at the time of a page reload (in less optimal solutions, feedback occurs only after the user has filled out the form in its entirety and clicked "Continue").

I'm noticing several smart design decisions:

Less noise: "Visual noise" is reduced by only showing information as needed. Displaying feedback one field at a time allows me to focus on the element at hand and not worry or feel inundated by information related to subsequent actions I may take.

Incremental confirmation: The system is providing just enough feedback to confirm progress and success. It uses confirmations to verify my actions. Key indicators and controls are visible within one eye span, allowing me to quickly assess or correct my progression.

Error messaging: The system also displays error messages real time as you're filling out the field, with succinct and intuitive steps to recover and troubleshoot

Reversibility of actions: I'm able to quickly adjust my entry and move forward without having to reload the page to see my errors.

Not surprisingly, there are countless other ways to design a system interface that guides users through a password reset. In fact, the very same banking site is also simultaneously experimenting with a slightly different solution to the same need.

I find the experience less desirable. Here's why:

Cognitive Load: I see too many sentences when I arrive on this page and am pre-disposed to ignore the blah, blah text. I am visiting the site to complete a requested task, to change my password. As such, I'm here to take action, not to read.

Confusing Visual Feedback: I find the feedback mechanisms, while not dissimilar in color to the first set, more difficult to understand. In this model, I have to interpret three things at first glance: the icon, the colored dot, and the words. I’m here to fill in a form, and yet I’ll end up spending time processing and interpreting these elements.

In addition, two of these elements convey the same information: the colored dot and the thumb direction indicate correct or incorrect entries. Why not combine them? In the first model, I preferred how everything was either red or green (both the icon and the text displayed).

Finally, it's possible that some users will interpret the thumbs up/thumbs down symbols differently than intended. As certain visual cues emerge on frequently used sites (a thumbs up on Facebook indicates that you like someone's content), user experience designers will want to propose (and test!) alternate solutions to keep the experience unbiased and clear.

In Conclusion
If you're designing your own interaction, keep in mind some of the good practices seen here: minimize visual noise particularly in a task-based scenario, provide incremental confirmation to users filling in forms to verify their actions, generate real time error messages to allow users to reverse and correct their actions. Be careful not to inundate users with more information than needed to complete the task, and be selective in choosing feedback mechanisms which should be easy to interpret at a glance.

Universal Principles of Design, by William Lidwell, Kritina Holden and Jill Butler, is a great reference for the aforementioned concepts as well as other techniques related to product and interface design. Find it in stores or on Google Books.