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.

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.

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...

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.")

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...

...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...

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.

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!!!


Monday, July 21, 2014

How much scrolling is too much scrolling

This article explores the idea of scrolling and how we should consider it when building out a screen.

Many of you have worked on those crazy projects where you are teamed up with the guy who only sees things in black and white. Buttons are buttons, links are links, and questions cannot be answered with anything that isn't explicitly the exact right answer. In fact, I can hear his voice now...

"Don't go below the fold!!!"

Thanks buddy, but there's more to it then that. Many UX practitioners have adopted the stance of seeing in shades of grey, shade of priority, or if you're like me, shades of plaid. Let's just put it this way, there are not always hard-fast answers to all our UX questions.

Enough liberal lip-flapping; let's get to the point e.

In this day in age, it seems that our users are accustomed to scrolling. Sure, it's good to have your main points "Above the fold", or in other words, above the point in the browser window that the users can immediately see without having to use the scroll bar to access content that appears lower on the screen.

I've seen some crazy stuff, but one particular example completely reminds me of the guy mentioned above. Take a look at this screenshot...

Now, as you can see, the navigation section at the top takes up so little room that there is ample room to fit one or two examples below and still probably still be above the fold. But, that guy mentioned above just had to put the "back to top" link on each one to stay consistent.

In evaluating the above example, the only word that comes to my mind is "Silly". In this design, it would have made more sense to simply leave off the navigation tiles at the top, and all the "Back to top" links as well.

Is there research that has given clue to an acceptable range at which a scroll is totally viable? I could understand if the RV descriptions were larger, than maybe it would warrant a top side navigation such as this, but how much larger?

One solution might be to make use of jQuery to have the "Back to Top" link stay on screen the moment the person begins to scroll. As the person scrolls down, the link stays in a relative place to the window size. Then, if you are hundreds of lines down and click the button, the jQuery script causes the screen to slowly and smoothly go back to the top.

But still, is this even necessary? Let's look at some hard facts...

Fact 1: looked at 25 million user sessions across a wide variety of sites and content types to see where users were spending there time...

Fact 2:
In 2010, Jakob Nielsen wrote an article highlighting that their eye tracking research concluded that web surfers spend about 20% of their time below the fold. Here's an image that explains his findings a little bit better...

The evidence that we can see is that people DO go below the fold. Why? Is it a habit? Is it an instinct? Not sure about either of those things. I believe that is has to do more with a web pages affordance for scrolling. If your site has a layout that makes it seem as though there isn't anything below the fold, then users are likely to miss info that is below, but if you design your screen to communicate to the user that there is further information, then you have effectively created affordance for scrolling. 

Maybe this is the case for Parallax Scrolling!


Saturday, July 19, 2014

Understanding graphs based on time, space and matter

This article is intended to provide the reader with a basic understanding of the foundation elements for all graphs. Ready? Here we go...

There is an enormously large universe out there. The physical universe seems to be in many cases defined quantitatively and qualitatively through time, space and matter (and an honorable mention to "energy" which doesn't really have a place in our conversation today). When we consider information, we generally view it through the lamplight of one, or through a combination of one or more of these three basic measures.

For example, let's say we wanted to track doughnut consumption of policemen. We'd likely have some sort of "measure" such as number of doughnuts. We might try and visualize how many doughnuts were eaten by policemen over a period of time. Another example might be if we wanted to look at the number (the amount of matter, or volume) of doughnuts by itself. Maybe we want to see how many doughnuts were eaten in various parts of the town, so as to best scientifically avoid the policemen.

Graphs and charts are intended to provide us with visual representations to give us a different perspective on what might otherwise be a bland, or boring set of numbers. In some cases, we can glean new information by looking at something from a different or higher holistic perspective, or in a different light. These data visualizations are integral to our day-to-day operations in business and have even proven to be beneficial in bettering our quality of life.

If we combine the idea that graphs and charts are just extensions of our own innate tendency to create, and the concept that our temporal world is generally viewed in terms of time, space and matter (volume), it seems that we can easily identify some of the basic graph/chart concepts which can then be used as building blocks for creating more customized visualizations.

First, a little math. Since there are three foundations that we will be using, it's important to identify how many base unique variations we can come up with. Another way we might look at this is to ask the question: Where do the 3 base foundations intersect? These basic intersection points will represent the building blocks.
Here are the comparisons that I was able to come up with.

Graph and Chart Basic Comparisons

  1. Compare over time
  2. Compare in space
  3. Compare by matter (or volume)
  4. Compare over time in space
  5. Compare over time by matter
  6. Compare in space by matter
  7. Compare over time, in space and by matter

And now for some examples. There may be better examples (which I'd like you all to tell me about), but for now, we'll go with mine...

1. Compare over time

This graph pattern is intended to help visualize a bit of data in relation to a period of time. One example usage would be if you wanted to see when during the day your office peaked on sales based on sale time-stamps.

time data visualization

2. Compare in space

You may find insight in displaying your data based on where the data took place. One example might be if you are a grocery store and are looking to determine specifically where the most traffic flow might be based on the amount of sales numbers.

Compare by matter (volume)

To better understand this one, I prefer to switch the term "matter" with the term "volume". This chart pattern may be to help display the volume of a particular statistic. For example, let's say you wanted to give your desk neighbor at work an idea of your awesomeness. You could have a tiny dot with their name next to it, then you could put a giant circle with your name next to it. The message will be clear as day. Be careful with that example though. Don't do it, or there may be hurt feelings.

Compare over time in space

This graphing pattern is intended to help identify where someone might be in a journey at a given time.

Compare over time by matter

This charting pattern is a foundation for explaining the size of something over a period of time. An example might be if you needed to explain how big your belly is at various points in your pregnancy.

Compare in space by matter

Graph patterns that compare space and matter can be handy for visualizing how large or small something something is and where it's at. For example, a military strategist may find it handy to be able to see where the biggest concentration of enemy forces may be on a map.

Compare over time, in space and by matter

Let's just say if you are crossing this bridge, you may be going into "To much info" land. What we are talking about is basically mixing all three of the foundation concepts into one supercharged visualization. Viewing data as it exists in space, over time by how large/small it is... well, that's going to be a rare need.


There may be some graph pattern that I've missed. I can't think of any others though. I believe that if you can fully understand these foundation patterns for charting and graphing, you will have the macro foundation design. With these foundations, you can really make some complex visualizations. Image if you had graphs nested in graphs. oohhh, that would be nice.