Exploit the perception.
--
My ex colleague James, once said: “It’s the web, no one waits.”, and he’s damn right.
No one likes to wait, and I am the first one to close the tab if a page takes few seconds to show up.
UX is speed.
As front end developer, what we can do about it?
Yes, of course, We can optimize our images, minify and concatenate the CSS/JS, avoid blocking resources and blah, blah, blah…but then, can we do something else?
We can work on the Perceived Performance.
With few tricks we can really enhance our user’s experience and make a big difference.
Avoid FOUC as hell.
Seriously, don’t show your page if the font/css are not loaded yet.
Immediate Feedback.
Every user’s action should produce an immediate reaction. After just 100ms the user perceive that the feedback is not immediate.
Transitions are the key.
On Android/iOS we have a lots of great examples.
Why don’t apply some nice and fluid transitions in our websites? Why we have to interrupt our user’s flow of thought at each page change?
Technically speaking.
Adding transitions between pages on your pages can be a bit tedious, expecially if you don’t use any SPA framework.
You have to:
- Prevent default all the links in your page.
- Fetch via XHR the new page.
- Change the URL with pushstate.
- Parse the XHR response.
- Put the new content in the page.
- Make the transition.
Even if that was not enough, you also have to take care of:
- Preventing just the right links (for example skipping the link with different domain/protocol, skipping the link when pressing ctrl/cmd + click).
- Start the transition at the popstate, so the user can still use the browser’s back and next buttons.
- Taking care of all the JS lifecycle, bind / unbind the right events / code when change pages.
Unfortunately that’s a lot of work, in fact introducing this PJAX (push state ajax) navigation takes time and introduces complexity.
Even further.
Using a PJAX navigation we have full control of the navigation process, this will allow few cool things:
- AnimateOut — We can start the transition even if the next page is loaded yet.
- Caching — We can save our loaded pages in a static/permanent cache, in this way we don’t need to perform any XHR call when we visit an already visited page.
- Prefetching — Between the user’s hover/touchstart on a link and the actual mouseup/touchend we have an incredible dead time (100–300ms) that we can use to prefetch our next page.
Wrap it up.
That’s why a couple of month ago I started thinking to a quick, generic way to use the PJAX navigation, and I made a little, flexible and dependency free library called Barba.js.
Barba.js makes really easy to enhance your website with transitions. It tries to abstract all the complexity of a PJAX navigation, giving you a nice, clean and simple API, allowing you to just focus on the transition effect.
It also comes with Views in mind, Transitions objects, Cache, Prefetch and Events.
It’s open source and available on github: https://github.com/luruke/barba.js
