These little tricks are what can separate a cookie-cutter site from one built to make an impression.
I want you to go back in your mind, and think of a website that stood out to you. One that left an impression for being lively, interactive, and cutting edge. What did it look like? What did it feel like to use? What do you think it was that made it stand out?
These days, with services like SquareSpace and Wix, websites are surprisingly simple to make. To truly make them extraordinary is a completely other matter. Times have changed a lot since the early days of web development, with new features being added constantly. It can be incredibly daunting to try and keep up with this fast pace, and that's where I come in. I absolutely love learning all of the latest developments in the world of web, and I have direct experience implementing them among my client's projects where applicable. Here's a list of some of my favorite tips I've learned over the years.
Below are two seemingly identical buttons. Both will have an effect when you hover over them (Or tap on a mobile device), but one of them has a transition effect.
See the difference? Instead of cutting straight to the lighter shade, the button with the transition fades in. Transitions have been used in various forms of media like Movies and Music, and that all have mostly the same effect. They are designed to make a switch between two states feel more natural. Just as important as the transition itself, is how long it lasts. Below we have 3 examples, all with the same transition as the first example, but with very different transition times.
As you can see, the fast transition is almost as jarring as no transition at all. The slow transition is much more noticeable, but can give the impression of un-responsiveness. This can be off-putting as a user, and in extreme cases, can even have them lose trust in the responsiveness of your website.
As we saw in the first example, adding some subtle motion to elements of a website can help it feel more natural and lively. This motion isn't limited exclusively to transitions on a user action.
Some additional examples of animations can be found on this very site! If you take a look at my logo at the top of the page, you can see the underscore character blinking like a cursor. This gives the impression that the logo was actually typed out on the page, like on a command line or in a Word document. Additionally, I've added transitions to each page navigation. That, along with not waiting for the page to load, makes for a very snappy and fluid experience.
In the early days of the web, if you wanted to make a change to a webpage, you'd have to make a request to the website and wait for the whole page to reload with updates. Over the years, we got the ability to make these requests only for the resources that were updated. This mean that if you posted a comment on a local forum or comment section, you could see your comment appear after a short period, rather than having the whole page reload. Over time these features expanded, to the point where most changes happen immediately right in your browser. This instant to near-instant changes reflected right on the webpage is known as reactivity.
Reactivity is invaluable to making your website feel more dynamic and lively, It is also incredibly empowering to the user, because they can see changes their interactions with your site in real time, making your website a joy to use. Below I have an example of a simple counter, with different messages depending on how many times you've clicked the counter.
It's a fun example to play with, but what about in the real world? Well, the most common use I have for a counter like this, is for Shopping Carts on eCommerce websites. Giving immediate feedback to a user on an action they just made eliminates any confusion that could lose a sale. Giving users confidence in using your site ensures it does it's job as efficiently as possible. Whether that be providing information, accepting applications, or processing online sales.
So now you might think "My website has none of these UI features, how difficult are they to implement?" Well, the good news is you don't need a whole new website to take advantage of features of the modern web. In fact, most of the time they can be surgically added to your website's existing styles, and reactive components can be inserted where needed. At the end of the day, there is no one solution to all problems. Products, platforms and tools that advertise as such will usually leave a lot to be desired. Where other solutions are one size fits all, I can examine your existing solutions and provide something tailor made to achieve a specific goal. If you think your website or experience could benefit from the features of the modern web, reach out to me and book a discovery call! We can go over your wishlist and I can show you how to achieve your goals best.