Animating between pages to improve user experience

In it’s early years, the web was largely a collection of plain text documents hyperlinked together, creating a world wide web of documents. Users could click on links and be taken to a new page, with new information on it. The experience wasn’t luxury, and it didn’t really need to be.

Fast forward to 2016 and the web is very much a different place. We’re using the web to accomplish more and more complex tasks. E-mail, banking, social media, accountancy, design, the list goes on.

These complex web applications have different concerns than simply displaying information on a page, and consequently demand a different experience.

In general, navigating web apps in 2016 feels like navigating through the web back in the early years. Clunky and disjointed. I loose trust in an app when I click a link and have to wait a few seconds whilst the page loads.

It’s easy to think screens in your web applications as pages on a website.

If you compare the general experience on the web with the experience on mobile, there’s a clear difference. Take the stock Android settings screen as an example.

Of course you could argue that the form factor makes a difference, but often companies with web applications have mobile counterparts, and more often than not, the mobile user experience is better.

How has this happened?

Well the web was never designed to be a platform for complex web applications and complex web applications have been notoriously difficult to build, let alone built to feel great. However, this isn’t an excuse to deliver a poor experience, and I believe we can do better.

Take this simple example. It’s in a side project I’m working on. The solution took around 100 lines of code to implement, and the result is a seamless transition between views.

No matter what type of app, overlooking the importance of the user’s experience when they transition to the new screen is a mistake. Beautiful animations and experiences aren’t just for mobile apps.