Don't Skip the Interaction in Your Experience Design

Twice in a single day (with two separate teams) I encountered clear scenarios where the team was asking questions that would have been answered if the Figma mock had been a clickable prototype.

High Fidelity Won't Save You

The mocks are high fidelity and have annotations, but the developers still have questions! You know it when you hear it; the dev's asking questions like "What happens when..." or probing for clarification with a "So, this isn't visible when..."

While working for one of my favorite teams -- where I was an embedded resource -- I would primarily create mid-fidelity prototypes. But everything was interactive, whether in Figma or Axure, they would often click back and forth between the screens to find the answers to their questions.

IxD is a Health Check for the UX

The act of prototyping was useful to me as a UX designer, because when you have to build the experience, you have to walk through each step one by one and that exercise surfaces questions about how that you might otherwise assume you already know the answer to when you are stringing together a series of mocks into a flow. If your prototype isn't interactive, then you are likely offloading this effort to the developers, who will either make it work or come back to you with clarifying questions. We as the architects should take that on our shoulders and have the conversations with development that come after. It's a much more fruitful use of their time.

---

If your prototype isn't interactive, then you are likely offloading this effort to the developers.

---

When I have an existing design system, prototyping at high fidelity is much faster. But if your team isn't blessed with the externally-facing resources, it's ok to kick it at mid-fidelity by grabbing a screen capture and prototyping on top of that.

We were grooming a card that seemed simple: Make the Return to Search Results (Back Breadcrumb Link) sticky. We all know what "sticky" means, but my first instinct was to verify if we all had the same mental image of what converting this on-page link into a sticky page element would mean. As it turns out -- we learned very quickly -- we didn't. One designer shared this image as a representation of what a traditional sticky would look like:

A member of QA thought these were three separate examples of stickies, not one. We explained what was happening in the image, and words were just failing us. They were asking "When does the bar show up?" and we tried to clarify if they meant "floating sticky button or floating nav bar?" We shared references Buttons: floating action button - Material Design. There was always something that wasn't coming across fully.

I told the designer to throw together a mid-fidelity interactive prototype of this using our site, because the sticky functionality is just a checkbox in Figma, and she had a workable mid-fidelity prototype shared in the chat before the meeting was over. And, just as I said, it was a screen capture with the elements on top. This immediately communicated how the global navigation -- which is already sticky -- would relate to the addition of the sticky link which would appear inside the React application which was embedded.

This was a perfect reenactment of that UX image people used to use to explain alignments, where there were people with speech bubbles above their heads and each speech bubble had a different shape in it to illustrate how one idea creates multiple slightly different ideas in individuals' minds.

Prototypes As Acceptance Criteria

Interactive designs are so valuable that sometimes the prototype becomes the acceptance criteria. Whether you have QA testers or not, there are times when words just aren't good enough to explain all the nuanced details to bring a user flow to life. Or even if it is possible, it would take too much time and too many words to draft all that description.

It's happened twice in my career so far "Can we just use the prototype as the acceptance criteria?" a product owner will say. "Yep" replies the agile coach.

Then there you have it, the definition of "Done" is verified against the product-owner-approved prototype; This does mean that versioning your Figma, Sketch or Axure prototypes will require duplicating before editing the screens for other cards to prevent changing the acceptance criteria by working on other user stories, but the good in that is that you end up with a history of where you've been and where you are going.

Conclusion

Interaction design is a part of the process of experience design and shouldn't get left out. Making your prototypes clickable even for a basic form, can surface unforeseen design details that need to be accounted for as well as provide the developers with answers to the questions you didn't anticipate. A clickable prototype can be simple, single page, and lower fidelity, but it can still speed up grooming and development.