How to Marry Your Website’s Design and Engineering with the Principle of Affordance
Have you ever visited a website and thought, what on earth am I supposed to do with this? I’m having trouble using this website. Let me go find my answer elsewhere. Not a great user experience, huh? Inversely, have you visited a site and wondered, Wow! This is a visually appealing and very intuitive website. It lets me do what I came here for and more! – this is the reaction you want your customers to have every time they land on your site. So how is this achieved? Enter affordances.
What are Affordances?
That mostly subconscious feeling you have when something “just works” is all thanks to the principle of affordance. You see, affordance is where design and engineering come together to produce something that is versatile even beyond its intended use. Let’s watch this quick two-minute explainer video:
So what does this have to do with websites? Well, let’s just say when it comes to websites… users totally judge the book by its cover. Sure, your website might have been created to help your brand acquire new leads, sell your products/services, and/or educate users, but these days, users crave more. When a site not only offers relevant information but also packages said information in an aesthetically pleasing way, more often than not the enhanced packaging is what increases on-site user engagement. Implement the principle of affordance and suddenly your site users feel like they’ve found your information more valuable – enough to endorse it, vouch for it, share it, and keep coming back all because you gave them the goods they came for and more.
Examples of Affordance at Work
Personally, Thrillist.com, Vox.com, and FiveThirtyEight.com win in my book for providing excellent, affordance-optimized, article-reading experiences. Here’s why:
- Thrillist makes adding local events to my calendar right from their articles super easy.
- Vox uses visuals to help explain a complex topic like the Greek debt crisis.
- FiveThirtyEight creates interactive charts to describe the complete history of the NBA (especially helpful since I don’t know much about sports!)
In the grand scheme of any marketing manager’s strategic focus these days, many neglect affordance. Plenty find ways to succeed without it. However, then you have big shots like Apple making affordance a top priority, a choice many would argue remains a core catalyst for their continued success.
So no, to generally succeed in the digital space, Apple or the websites I highlighted above did not necessarily have to choose to spend time and money developing their unique affordance-optimized features. However, by choosing to invest in these areas, they set them apart from their competitors and enabled their complete UX to soar above and beyond their core affordance – allowing users to read articles, yes, but also creating innovative, interesting ways to reinvent reading itself for the digital space. Essentially, they made their website into the duct tape and zip ties of their industries!
The Magic of Duct Tape and Zip Ties
What comes to mind when you think of duct tape and zip ties? Worthless? Can’t do much with them? Actually, for most I’m guessing it’s quite the opposite. Duct tape and zip ties are two of the simplest tools that can be used in countless different ways. Ever heard of duct tape prom outfits or whatever Christian Grey needed these for (see, many uses!)?
When figuring out how to apply the principle of affordance to your website’s design and engineering, your best bet is to shoot for making your site more like duct tape and zip ties – a simple tool, usable in countless different ways.
Google loves websites with many affordances. It loves them so much so that it is advocating that developers develop versatile websites designed to help users not only complete intended actions, but also complete future actions like asking the website a question or setting a command. Jarek Wilkiewicz, a Googler working on Knowledge Graph, explains that designers must embrace certain affordances as the new standards because search engines are increasingly using them to inform their rankings – favoring webpages with the best affordances satisfying a given user query.
Why has Google started favoring affordances in this way? Well it all goes back to that core principle of affordance. Generally speaking, when a site is optimized with affordances, it not only provides the content a user is looking for, but it eloquently presents the content in a useful context. Essentially, a website or app offering many affordances provides a better user experience and therefore should rank higher.
A Few Affordance Optimization Tricks
Recently, fellow Search Agent Kirby Burke attended the Smashing Magazine Conference, at which presenters discussed many of the performance and design issues I have talked about here. In summary, make sure your website isn’t another useless invention by following these performance and UX tips:
- Fast: Optimize resources to render above-the-fold content in two seconds or less.
- Functional: Ensure the most important elements and actions are accessible to users across all devices. Check out our white paper on Implementing Responsive Web Design for more fast and functional tips.
- Consistent: The visual design style should be consistent across all devices.
Think about the other businesses in your industry or vertical. Which website(s) do what they are made for and more? Which websites do you frequent, and why? Would you still visit those sites if they didn’t have that extra feature which sets them apart from the rest? Which website do you consider to be at that versatile duct tape and zip tie level?
Let me know in the comments!
Like what you read? Subscribe to our newsletter for leading industry insights delivered straight to your inbox!