This weekend we watched the movie, ”Now You See Me”. I don’t want to give any of the plot away, because I really enjoyed the movie but short story it involves 4 magicians. However, there was a line repeated a few times that I loved, “The more you think you see, the less you actually notice.”
Wow, right? Okay, maybe not right away.
Later that night, I posted a short tweet just saying I enjoyed the movie with that quote in it. After posting, I thought to myself how appropriate that could be for the world of design and development.
The whole idea that we attempt to attain is that our users become immersed in our applications. We want the same thing that a magician does. We want our users to be engrossed in the experience of our application that they don’t notice the pieces were pulling from here and there.
How do we bring this “idea” into our world of front-end development? Here’s a few thoughts of how we can code for better experiences. This in no way is an attempt to cover the gamut, so please add any comments you have below.
Just-In-Time Initialization (JIT)
First off, what is “just-in-time initialization”? You can think of it as a sort of lazy evaluation. Many times on our pages, we like to get everything set up and initialized right from DOM ready. We want everything setup and usable, but we don’t always take the time to consider how the user utilizes the application.
By setting everything up, we are being a burden to our page load time. The goal here is to bring the audience in closer, right? “The more you see”, remember?
What we need to do, is capitalize on user behavior to initialize the pieces necessary Just-In-Time. The question is, “how do we do that?” There are several approaches you can take, but we’ll try to cover a short example here.
For our example, let’s use something like the following form:
In the form above, there’s several things going on. Thinking from a normal state, this is what might be happening on DOM ready:
- Loading our validation library.
- Binding events to trigger remote calls to validate username
- Set up of functionality to show the password as plain text.
- Set up any particular events based on validation types of our inputs
There may be more, but you can see we’re doing an awful lot up front. What if the user never even uses our form? Then we’ve wasted the bandwidth and memory to put something up that the user never even interacts with.
This is where we can leverage building an HTML/CSS facade. This facade can provide the user with the same entry point as the image above. However, as they “get closer, the less they actually see.” (See what I did there?)
With our facade in place, we can leverage a one time event like a focus on an input field as a trigger to let us know that we need to set things up and get pieces ready. As the user is drawn in, they can simply experience the masking and un-masking of the password without knowing that there’s work going in behind the scenes.
This is a simple example, but by leveraging this type of approach we can make better use of our resources, speed up our page load times, and provide the user with a more immersive experience in our applications.
This may be a bit of a stretch, but it can create the illusion that multiple things are going on when we can utilize the same functional code. Think of it like this, we have a particular object - say a snack - and we want to display it in different forms. Maybe in a list view, and individual item view and maybe a gallery view.
Looking at it there, we are most likely going to have 3 entirely different markup structures. The list view is most likely going to be inside of an
li where the individual view may be contained in a
div or a
Let’s look at a simple example of maybe what our individual snack would look like in a list view:
1 2 3 4 5
The above forms a convention that depends on two points:
- A container with a class of
- A container with a class of
nameto hold the snack name (this of course could be optional in certain views)
- A couple links - Edit/Remove - for snack management (again, these could be optional).
This will make your code more maintainable and also accomplish the illusion of multiple things happening while utilizing one piece of functional code.
1 2 3 4 5 6 7 8
As you can see, we have a completely different approach to the HTML and the user is going to get an entirely new view. However, we can still utilize any functional code the same way.
These are just a couple ideas of how we can bring the idea of “the more you think you see, the less you actually notice” into the world of front-end development. We could talk about leveraging user behavior, events of user intent and several other topics. If you have any comments or additional ideas post it in the comments.