UI and UX
Sunday, February 2, 2020
“You Won’t Believe How Much Money This Company Made After Redesigning Their Website.”
Ah click bait titles. They’re the best. Just like this one you clicked on. Don’t exit it out yet please because we’re here for another super, duper, awesome, comical, satirical, and eloquently lyrical article on what you believe is good design! All of which is probably completely off, or - completely a home run. Today we’re discussing how users push your buttons. The good kind. But not that good. Calm yourself.
But before we can even get there, we need to discuss the elephant in the room. Not sure why there is an elephant in the room, but when you’re working out of a $69M penthouse suite overlooking Central Park, you can do weird sh*t like that.
The Elephant in the Room
Have you noticed the way users interact with buttons on your website? Probably not, because you still haven’t implemented amazing free user tracking tools like Hotjar, you bucket.
According to the amazing team at Nielsen Norman Group, users scan the web in a F-Shaped Pattern. We’re not going to cover F-shaped Pattern behaviors in this article, because the topic is too vast and you’re already thinking of closing this window.
But keeping the F-Shaped Pattern in mind, this is how users browse the web on a mobile device.
It is critical that your brain doesn’t stop functioning at this point. To optimize the takeaways of this research on how users interact with your website’s content, we’re going to blend in a handful of droppings of Gutenberg Principle. Placement of buttons that help you ABC (Always Be Closing) and drive progression in your company is key to creating a successful user interface. Place buttons along the bottom of the screen. A user’s behavior when it comes to scanning content on a screen is something like this:
When You Have the Buttons Going Back to Back
As in next to each other. Not as in Drake (we still love you Drake). Keep the buttons towards the bottom of the screen since they are the last and most important step of the user’s journey. This arrangement of buttons is perfect for situations where 2 actions are equally important. Are you a click away from adding your expensive Gucci shirt to cart? Wait, you realize you have to pay the rent. Voila - next to the Add to Cart button, you have the Cancel button. You’ve been saved from being evicted and living on the street in your Gucci shirt. Thank God for great UX button placement.
There is something important to point out in this situation, however. As a business, you don’t know the backstory of each and every user that is visiting your platform, and there’s a good chance you don’t care. Love is only unconditional between you and the user if the user actually bought your product. You want their money. You want to close. If your button isn’t helping you close, then f**k you. (All of which was mentioned in the previous article 🙃)
By revisiting the Gutenberg Principle droplets and F-Shaped Pattern behaviors, technically you may drive sales or progress your business by placing your “closing” button on the bottom right versus the bottom left. Why is that? Listen, young cricket, when users scan left to right on a screen, there is an intent to want to engage whenever the user hits the right side of the mobile screen. Why? Quit your chirping cricket, isn’t it obvious - users are primed to engage whenever their eyes have reached the end of the content of a screen. Hence the miraculous Gutenberg Diagram’s “Terminal Area”.
Bottom line is - bottom right is for closers.
Another means of engagement can be when you have two buttons on top of each other - now we’re talking a whole other kind of ball game. You’re offering the user the red pill or the blue pill. There are two careful considerations the user needs to be cautious of - each leading the user down their own rabbit hole. One is not more important than the other, but rather each is unique in its own way. A common example of this is when you have a Checkout button along with a Continue Shopping button. One button leads to terminating the user journey while the other allows the user to continue destroying their bank account. But more business for you 😎
Did you know there was an argument over a honeybun that led to the shooting and death of a teen in Tennessee? That’s rough.
Point is, sometimes it’s a great idea to keep your button sticky/fixed to the bottom of the screen. Like honeybuns stick to your finger. Terrible analogy but that’s okay because it came with a fun story to click on. This is particularly powerful in situations where you want the user to purchase tickets or ‘Agree to Terms & Conditions’ sort of thing. It allows the user to move forward in the user journey at any point in time during their experience. Keep in mind, you should only have ONE button in these cases. Never multiple actions. You don't want to appear needy; and it clutters the screen space. Like the websites from your time period. Stop it, boomer.
Honeybuns are bad for you. And so is having bad design. Because at the end of the day, it’ll cost you more than having implemented good design! 😉
Ready to create something awesome or transform your platform? Unlike anyone else in our industry, we can turn it around in less than 10 days, no matter the size of the project, and still cost 70% less than the national average creative agency price. Oh and all of our prices are up front, final, and transparent. So there's no random agency fees that we can sneakily add on overnight unfortunately. Strictly located in the USA. Beat that and we’ll get on the next shuttle SpaceX off of this planet.