Affordance. You might be wondering why it matters what people can afford. Except, affordance has nothing to do with money. It is about whether the design of features conveys its purpose.
The content in this section references using the data from the below sources:
Gibson’s theory of affordance.
Affordance feature reasoning by YS Kim.
The Affordance Structure Matrix by JRA Maier.
You guys probably don’t have the time to shift through all the data, so we went ahead and applied all the principles that showcase in this book. You can feel confident in the knowledge shared in this writing piece to be value-driven. So let’s get straight into how we can apply affordance into action.
First off, you’ll need to get a better understanding of affordance. Affordance is the features of a design that engage human interactions. An example of this in web design could be buttons, lead forms, pop-ups, and any other type of CTA (Call to Action).
You might say that you already know what call to action is. However, you’ve probably not been considering things like red or orange to create 20-30% increased conversion rates. Now you might not be impressed as the red vs. blue debate is still highly debatable.
So other than color, what can you do? Design. You can add little additions like an arrow pointing to your CTA for as much as 26% higher conversion rates. Now you think that you’ve gone so much into this book, but you haven’t gotten your time’s worth. Wait up. In a case study with ContentVerve, using “Start my free 30-day trial” over “Start your free 30-day trial.” caused an increase of over 90% in conversions.
Now you know about color, design, and words. Now, this is great and all, but it means nothing at face value. The reason red converted more is not because of just the fact that it’s red. Red (like yellow, orange, and pink) is a bright warm color that is often associated with happiness. However, up-lifting and happy isn’t always what converts more. You need to be able to access what emotions you’d like to engage for your particular audience.
You might combine yellow and red (like McDonald’s) to use colors that put off the most hunger when combined. Whereas you might use blue, violet, and pink to create emotions of calmness.
You might even use red to portray anger when paired with dark colors like grey or black. Red is a color that sparks happiness, but more impactful when used to instill anger, fear, and jealousy. You’re not wrong to make your audience feel like they’re missing out. Anything that provides value portrays as such.
Accordance Applied ScienceScience is not about knowing what’s known. When you make scientific deductions, it’s about what you didn’t know. Marketing is an advanced applied science (built off of sales) that involves psychology, biology, chemistry, and calculus. Don’t worry. You won’t need too many brain cells to grasp onto the incoming content since we’ve condensed it to simple terms (as much as possible).
Now color theory is something you kind of got a taste of earlier. However, what you read was simply the principle behind color and emotion. Color theory can fill a whole textbook but what applies to web UI (user interface) design.
In color theory, there is a principle of contrasts. This states that every shade of color has a set opposite. Simply look at the opposite color on a color wheel. So how do we apply this in web design? Not only should we be looking for colors that engage certain emotions. The call to action should be something that is relatively contrasting to the background.
A common implementation of this is a white lead form on a black background and a red button on a blue background. Just remember to not take it overboard where everything is contrasting that it loses meaning. Of course, unless it’s a site specifically about showing off your amazing contrast graphic design skills. Perhaps it’s your niche, then that’s okay.
The second principle we need to keep in mind from color theory is complementation. This states that not only can we use design of colors to make a call to action stand out, but also, alternatively, you might have one color as the background, a color on the opposite side as accent points in some part of the page. Then use size and shape to differentiate between the largest contrasting point of the page. You’re probably still confused.
Complementation and contrast are similar principles. However, contrast is focusing on the ability of one color to stand out to the other. In comparison, the complementary colors work together to stand out from the rest of the page.
Next, we have vibrancy. Bright and warm colors like red cause heightened alertness type of emotions, whereas darker/cooler coolers may cause more calmness.
Colors have many emotions that can be engaged from them. So let’s name a few. Red
Promotes: power, importance, youth. Orange Promotes friendliness, energy, uniqueness. YellowPromotes: happiness, enthusiasm, antiquity (darker shades). Let’s end this list off with Green, which Promotes: growth, stability, financial themes, environmental themes.
You probably have a plethora of time to google the emotions behind each color. So let’s move onto some more advanced principles—color schemes. Specifically the triadic. It’s basically a triangle. Use a color wheel (preferably the 12 step color wheel) and choose a starting color as your background. Choose two points on the wheel that create a triangle with equal side lengths. You could pick any of the three colors now to be the background and use the other two for content and navigation.
Take this a step higher with the compound scheme, also known as split complementary. For this principle you take two contrasting colors and two complementary colors. Remember, contrasting pairs help the other stand out. When you complement, they bring it out as a whole.