Beacon’s ‘How it works’ button

Through research, and personal experience, I find that the websites with a positive user experience tend to have more responses to user interactions. For example, buttons changing colour or size when clicked show that the interaction was successfully carried out.

I decided to implement this technique into my own project to make the interactions easy to follow and the site pleasant to navigate.

Inactive state

This particular example is the button I use to direct users to the ‘How it works’ section of my website. When this button is in its ‘inactive’ state, which means nothing is interacting with it or hovering over it, the visual is a square with a thin black outline and black text in the centre saying ‘How it works’. It is designed in this way to be easily readable and colourless to blend in with any page that might be displayed below it.

When the ‘mouse over’ command is triggered this button changes to the hex code #FC4A1A which is one of the chosen colours in my colour palette for the project. This change in colour alerts the user that this is an active button that can be clicked on to take you to a different page within the website. The design and text displayed on that button should clearly tell the user which part of the site it will take them too, for example ‘home’ or ‘profile’.

Active state

Designing user interactions like this are not required nor are they present in all of the popular websites out there today, but I find those that features these heavily on their sites create an experience that helps the user, and in turn creates a welcoming and intuitive user journey.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.