Wednesday, July 30, 2014

Don't design in a box -- The give and take two step

Here's a concept that has been widely documented, but I feel like it's worth my two cents as well. The idea of designing in a box goes like this...

Let's say you have been asked to come up with a new design for a website's home page. Upon receiving the assignment, you go to your desk, you sketch some ideas, you iterate 3-4 thousand times on those ideas, then finally, you land on "THE" idea. You then take that design into high fidelity. Following that, you set up meetings with the executives and all the business stakeholders to reveal your masterpiece. You get to the meeting, look around and say to your self, "These people don't even have a clue how awesome this is going to be for them. They may even wet themselves a little like I did when I finished".

"Most digital products today emerge from the development process like a creature emerging from a bubbling tank. Developers, instead of planning and executing with a mind towards satisfying the needs of the people who purchase and use their products, end up creating technologically focused solutions that are difficult to use and control. Like mad scientists, they fail because they have not imbued their creations with humanity." 
Alan Cooper, Goal-Directed Design

As you begin walking through the presentation of your golden baby, you start looking around and notice that there seems to be something wrong with everyone's coffee that is making their faces seem upset. You plow ahead... It's getting worse! Before you can finish, you are interrupted by the guy most likely to turn you in for photocopying your butt. He says "This is NOT what we wanted. This isn't even close to what we wanted. You used red font on that line, but we would have used green. You used a picture of a dog there, but we were thinking of a cat instead. I just don't think this is working out between us. Maybe we don't need the site redesigned anymore. Maybe we can just be friends".

As people begin packing up, you are thinking to your self how embarrassing that was and how maybe a job at the warehouse is a better idea after-all. What went wrong?

You designed the website in a box.

In other words, you designed a user interface that would be consumed by someone else without learning what it is that they want, that they need, or what their can's and can'ts are. You didn't take the time to gain allies prior to going in. You took liberty, and you assumed.

Why a bat, Batman?!
In the movie Batman Begins that was released in 2005, we learn that batman chose the bat because he was terrified of bats. 

He was terrified of bats due to his traumatic childhood experience of falling into an old abandoned cave. Imagine what batman would be today if after choosing to go with the bat, he did some research to identify what other creatures are scary. More specifically, what creatures are scary to his target audience: criminals, the general public as a whole, and governmental officials... Well, maybe he would have been dressed more like Walter White from the HBO Series, Breaking Bad, or a Teletubbie! Who knows. The point is that when we are making a decision, if we just go with our own gut instinct, we may or may not be accomplishing our intended purpose.

The Conversation
When working on any design process, think of it as a conversation. Have you been in one of those conversations where the other person talks, and talks, and talks, and talks, but never quite gives you enough time to respond? How did that make you feel? Sure THEY probably feel good because they got to feel heard, but what about you? Did you get to feel heard also? It is likely that you did not get to feel heard if you were in that conversation because you didn't have a chance to voice your opinion.

Now imagine it the other way around... That is exactly what has happened with your design in the first example. They didn't get a chance to speak into your design. They are not enjoying the conversation.

The Dance
Now imagine that you are dancing with someone. If you step forward, but then step forward again. Then again, and again... You will soon be against a wall, or out the door or window. that's not dancing. That's walking. To make sure that your dance goes well, you take a little (you take a step), but then you must also give a little (let them take a step). In doing this, you are allowing them an opportunity to enjoy the dance.

In conclusion, remember that design work is a conversation between those that the design serves and you (the defender of the user experience). Let them win once in a while. Doing so will earn you an ally. It will also relay to them that you respect them and in-turn will earn you respect.

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


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!