I recently completed a series of wireframes to communicate the flow of a feature inside my company’s mobile app. When I built these wireframes, my focus was on designing an intuitive experience around the navigation of the product. To make the experience intuitive, I concentrated on 1) the content, and 2) how the user could seamlessly navigate that content to accomplish certain tasks. (For the record, the task was to personalize a greeting card to his client(s).)
When I initiated the usability testing, my aim was to get feedback on wether the navigation was intuitive: had I designed a flow that allowed him to seamlessly navigate the content?
My process for creating the wireframes was that I worked quickly, copying and pasting artboards within Sketch – combining other iterations into a new one. My goal was to be nimble: to not be inhibited by my tools. Thus, my wires were lo-fi; and my Sketch files were simple (e.g., not relying on symbols or components and using a white, black and a couple default primary colors).
When I began testing with my user, I was pleasantly surprised by one of the simple responses he had to my wireframes. I had some questions around the placement of the “next” button in the design – but it was not a key element of my research. It was more of a micro detail that would not solve the flow problem – but would enhance the overall user experience if executed properly. For example, the button would not appear until a user had made a selection.
Toward the end of the testing, after having learned a great deal about the usability of the flows, I asked my user about the next button – almost as an after-thought. And the reply I received kind of blew me away. It’s almost as if the user couldn’t wait for me to ask about it – because it truly stumped him. He pointed out that on the last screen in the flow – one which I’d copied-and-pasted and made a small tweak to – the next button was confusing to him. Its appearance on that screen was confusing because he thought he’d finished the flow but here the button was still reading next. Should he hit next again, he wondered.
I realized immediately that i’d made a mistake. While copying and pasting and rapidly adjust my wires, I had overlooked a tiny detail – but one that created a massive usability issue for my user.
To recover, I explained that he was absolutely correct – that the next button should not appear in that screen. That screen was the end of his flow. I drew his attention back to what I was testing: did he realize the color of the list items he’d interacted with had updated? Did he feel like he was getting the feedback he needed from the new updated state of the starting screen?
He confirmed that yes, he definitely felt a sense of confirmation and completion. I thanked him and made sure to remove that next button before testing again with another user.