Wednesday, July 23, 2014

Getting Started with Parallax Scrolling

Why should I learn about Parallax Scrolling?

  • Parallax Design is becoming a standard element in Responsive Web Design
  • Mobile Devices are starting to include Parallax effects as part of their base operating systems (i.e. Amazon Fire and Apple iPhone).
  • Provides you with one more layer of visual stimulation to manipulate and steer the user's attention.
  • Need I say more?

What is Parallax Scrolling?

Parallax Scrolling is the term used to identify a design technique where a page's code is configured so that images set at different layers move in different ways based on a user's scroll input. 

It is common however to have the movement of the background images tied to other user inputs such as the movement of a mouse. As the mouse moves across the screen, the user may see the background move ever-so-slightly towards the opposite direction to give the illusion that the user has covered more ground than they actually have.

Website Examples:

The word "Parallax" is a word used to refer to a visual effect  whereby the direction or position of an object seems to change depending on the angle at which it is view in relation to the background scenery.

The Parallax effect has been around since the first set of eyes was created. It is our inherent tendency to try and see in 3D (width, height, and depth) in order to identify our position or orientation in space. For example, when a baseball player in the outfield wants to throw a baseball to a player at second base, they look and see the players size and relative position to other objects, and relative to the background (stadium seating). These inputs then get immediately processed by the player's brain and in turn, they can better estimate how much strength and force it will take to get the ball to the person.

Where did Parallax Scrolling come from?

Many people believe that Parallax Scrolling found it's origins and popularity in 2D video games such as the 1982 arcade game Moon Patrol. Is that really where the idea came from though? I don't believe so.

The concept revolves around the idea of creating layered effects for the sake of creating a visual atmosphere in which the eyes can perceive depth. This technique has been around many-MANY more years than video games have been around. 

Theater has been using this layering effect for a long time. The art and science of theater design has been developing over a 2400+ year span. This side view sketch of a baroque theater (found in George C. Izenour's book Theater Design), clearly shows the layering concept (see my red notation lines) that we find our Parallax Scrolling built upon.

theater auditorium from the Baroque era

In sticking with this historical example of harnessing parallax to tell a story, let's take it a step further. It has been identified that there have been trends in stage design over the years. Here's an image that shows some of those common stage layouts.

various theater stage layouts

A quick glance, and I believe that we can identify that the stage layout that best matches our browser window (a.k.a. view port) might be the one labeled as "Fan-shaped auditorium proscenium, apron, caliper stage".

And here is my modified version...

sketch of the top view of a person sized theater stage with a person's head looking into it.

The layering that takes place in Parallax Scrolling is more conceptual than visual. Understand that the furthest layer from the person head is the background layer (Layer 0). In standard websites, you have a background, then as you start adding elements, they would then start stacking towards the user. Layer 1 might be a table or a div. Layer 2 might be a span that sits in the table or div. Layer 3 might be the copy or an image. When viewed from straight on, it all seems flat to the un-trained eye. Developers however are likely to already have a firm grasp of this concept. 

In real life, if you move across a room, the chair that is furthest away from you and the chair that is closer to you may look one way, but then if you move to the other side of the room, now you are seeing them both from a different perspective and in a different way. With Parallax Scrolling, the layers are set up so that depending on the user's action (i.e. scroll movement, mouse movement, head movement, etc...), they react through movement or adjustment of their own to create a different perspective.

Leave a comment if this is still unclear, if you totally disagree, or if you like Pho. I'm all about "getting it" better, so let's talk.

When should I and when shouldn't I use Parallax Scrolling?

As with any design concept, there appear to be good times to make use of the concept and bad times. Below is a rough (growing) list of time 'when' you might find Parallax Scrolling useful and times 'when not' to employ the technique.

When it Parallax Scrolling might be helpful
  • When trying to draw the users attention to an item, or area
  • When a subtle 3D motion will not distract the user from the primary activity on the interface
  • When you need to create an affordance for scrolling.
When not to use Parallax Scrolling
  • When a subtle 3D motion will distract the user from the primary activity on the interface
  • When the implementation would be too resource intensive resulting slow loading or choppy behavior
  • When the plan is to cause the scrolling mechanism to scroll slower than the user is used to.

How do I design using Parallax Scrolling?

There may be other strategies for designing screens that employ Parallax Scrolling, one such method that I believe to work well is to burrow from a process used to design theater sets, and throw it in the blender with the UCD process...

Step 1: Understand the stage location (Research)
When you are researching to determine the layout of the design, consider the location at a high level. What country would the location take place in? What is the environment you are trying to create? Maybe your background or backdrop is going to be in a sci-fi movie. Maybe it's a shopping mall. Maybe its a warm fuzzy teddybear with a high intensity Gaussian blur applied. Maybe it's simply a desert of grey... or waves... or paper?! Once you have identified the high level theme or location, write it down in words. Think about it.

Step 2: Identify the stage "Props" (Research)
Now that you've figured out what the environment will be, it's time to start "flesh"ing it out. In other words, let's figure out what the essential elements will be that should appear on your stage. Part of the research phase is to document all the parts of the web site that must be in the end design. Things such as navigation bars, headers, or main calls to action should ALL be part of your high level understanding before you begin laying the new design out...

Write these elements down. Prioritize them; 1 is most important. Then start counting up from there. The higher the number the least important that prop will be. This step will help you identify it's Layer position further in this process.

Step 3: Sketches (Design)
Sketching for Parallax Scrolling is the tricky part (same with prototyping and mock-up). There are some tools out there that might help you with this. I personally think that the best tool will be to simply sketch these 3 perspectives out.

Front View
Sketching the front view can be relatively simple. Since this is a sketch, a standard page layout sketch with notations of expected movements should work nicely. My recommendation on this is to keep the front view simple. Use this low-fidelity sketch to get a good idea of where those "props" will sit.

Remember, because we are looking at the front view, it's difficult to identify where the parallax scrolling elements will be. Start with the basic props. Once you have them in place, then notate accordingly (i.e. "This object is going to move slightly up as I scroll down the page to appear to be trying to exit quicker than the rest of the page.")

Parallax sketching 2d top view

Oh, and one more thing. Remember to design for all the channels or platforms that your interface will be used through (maybe check out What's the best approach to responsive web design)

Top View
I recommend that you use a method such as this...

same sketch as above where a person is looking into a person sized stage. Parallax Scrolling

...with the one caveat that the sizes of the stage should be drastically different depending on the size of the platform you are designing for. Remember to notate. When it comes to these low-fidelity designs, your notations are really the best chance of communicating with the person who reviews your design when you are not around to give a walk-through. I think you get the idea though.

3D Model View
This last view is a bit tricky. It's going to take some patience and practice. Follow this sketching example to get started...

parallax scrolling 3d layout example

Once you get going there, it's going to be a matter of finding that right fit that works best for your design flow. There are some really great examples out there. You can also adopt 3D modeling software into your tool belt. Here's a more complicated example of this 3D view.

really good example of layering that was used to create a video game sort of look.

Step 4: Test it
Without actually developing this out fully, your rather limited to testing against sketches. There may be tools out there that can make prototyping or mock-ups easy, but I couldn't find any really good ones. A few folks suggested that you use layers in an image editing software such as Gimp or Photoshop, but ultimately you need to get creative here...

CAUTION!!! Don't skip this test because it's hard. If you do, you may be designing something that will be fully rejected by your user base. Test it. Stay objective about your findings. Iterate back to a research phase with your test findings, and refine your design from there. Do this until you reach about an 80-95% success rate in the web page's basic functionality.


5. Build it!
It's finally time to build. Hopefully Parallax Scrolling is by far a small part of your overall design. If you are sending a design to development that is mostly this technique... I'm cringing, and crying a little inside right now if that is the case.

Oh, and because this is relatively a new technique, be prepared to be heavily involved during the development phase of the project. Have examples ready. Give a detailed walkthrough of your design. Stay available to your dev team. Hope and pray for the best! Good luck!!!


My New blog is Come see my newer/more relevant content.

No comments:

Post a Comment

Yes, please comment.