Why Color Matters in Design
An analysis of Bucknell’s student resource site.
When using a website for the first time we are often drawn in by bright colors. This is because color has a significant impact on our perceptions and emotions. When used correctly, color can even evoke a specific reaction for users. In this article, I am going to be analyzing myBucknell, the most used resource for all students at Bucknell.
What’s it used for?
myBucknell is a site designed to give students access to every possible resource available, all in one place. Here you can view:
- Course Schedule
- Academic Progress Report
- Today’s Menu at on-campus eateries
- Financial Aid
- Career Center
- + Many more
The Design
Less then a year ago myBucknell was redesigned completely, and not all for the better. Now I could go on and on about everything wrong with the site but instead will focus on a few changes they made that really catch my eye.
The first thing I notice when I visit myBucknell is this extremely long and blaring red banner.
I immediately feel like I’ve done something wrong.
Further investigation shows that these banners are maintenance alerts warning me that the site will be down at some point. Great. I didn’t break anything. But I also haven’t done anything besides open up the website. So why do I feel this way?
As mentioned before, color can evoke reactions in users. This is why color choice is so important when it comes to design. There are certain colors that are actionable, like green or red. Green is usually a calming color that is used to indicate safety or success. Red, on the other hand, is a very hot color used to show warning, danger, or error.
We have been conditioned by society to think this way. Think about a traffic light. Green means go, yellow means slow down (or to some speed up), and red means stop.
The same can be seen with technology. Battery icons are always green when fully charged and red when low. Closing out websites and deleting posts are almost always done by clicking a red icon. When users see such dialogs the red color encourages them to think twice before making the final decision.
Certain colors are engraved in our brains to make us behave a certain way.
Jakob’s Law
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
If we are used to websites having red as a danger/delete button, then we wouldn’t want to use red as a color for positive actions like creating a post, submitting an assignment, or completing a payment. Thus, design should follow what we know and are used to.
A simple fix.
In my example above, myBucknell grabbed my attention away from my original task and instead, had me focused on the bright red banner. To me, the color red naturally gave me pause due to its connotations. It delivered the message that something went wrong at a glance. Although the alert is important, I do not believe it warrants the powerful red color. With a simple change to the color of the banner, the alert is still eye-catching without causing stress to the user.
I no longer feel that I’ve done something wrong. I can access the cite with less interruption and focus on the task that I originally planned to do.
Hopefully this article gave you a taste of why color matters and how color plays a pivotal role in all our visual experiences.
Thank you.
