Feedback and Context in Web Design
A few days ago, I was reading an email newsletter that I receive every week. As I got to the bottom of the email, it occurred to me that a friend of mine would probably really enjoy this newsletter, so I decided to forward it to her.
But instead of simply hitting the forward button in my mail client, I opted to click on the Forward to a Friend link embedded in the email, as I know these usually provide the recipient with an easy way to sign up.
I was sent to a webpage with a form to fill out:
This seemed straightforward enough. I filled out the recipient’s name and email address, my details, put in a short personal note, and completed the captcha.
When I hit submit, the fields with my friend’s name and email address disappeared, but the form stayed visible. I assumed there was some error and the form wasn’t sent. So I put in my friend’s details and again hit submit. Once again, I got the same result. What happened?
Look closely or you might miss it:
Each time I hit the “Send Email” button, a small string of black text was added to the header indicating “Your message has been sent!” I hadn’t noticed this string was added because it wasn’t sufficiently differentiated from the previous state. This is a great example of poor user experience design. Luke Wroblewski wrote extensively about this topic in his excellent book Web Form Design: Filling in the Blanks. In this case, the form likely should have taken me to a completion page that indicated it had been submitted.
Visual feedback after any user action is extremely important for them to understand that the action has successfully achieved the desired result. Think about all the different types of feedback our computers provide. We type a key on our keyboard and the letter appears on screen. We click on a link in a browser and the desired page loads. We hit send on an email and a subtle sound plays while the window disappears into the virtual ether. This type of feedback is necessary because most of our digital interactions are different and less tangible than those in the physical world.
Provide your users with useful context
Shortly after receiving the auto-generated email, my friend responded to me and simply asked: “What is this?” I can’t blame her. The email looked awfully spammy and provided no context about what she could expect after clicking through.
What’s the problem here? While this email obviously wasn’t written by a human, it doesn’t need to look like robot vomit. My personal message is buried between a series of machine-generated lines with obscure URLs that give no hint as to what lies on the other side of them.
This email could be dramatically improved by simply moving my personal message to the top, rethinking the URL design, and including additional context about the topic of the newsletter. Finally, the bottom two URLs are self-serving and really of no use to the end-user. Does this email make you want to forward it to your friends? Does it make you want to subscribe for more emails? What kind of emails do you think you’d receive if you clicked that link?
Design isn’t just a pretty coat of paint. It’s also about how it works. In the digital world, your brand touchpoints include even seemingly insignificant details like these straightforward forward-to-a-friend emails. Over time, users unconsciously react either positively or negatively to the design of these experiences and form an opinion of your brand.
