Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 3 down vote favorite
2

I'm trying to gather some best-practices on how to use the parallax effect, combined with different types of uses of the technique.

Here is my beginning, do you know more than me? (probably!) What am I missing? What do you think is important to consider when using the parallax technique.

UX best-practices

  • Good story line.
  • One message per state/page.
  • Navigation between states is clear.
  • Persistent navigation that indicates position.
  • Play is encouraged by providing a scrubber-mechanism that lets the user go back and forth between stages.
  • Mobile first is honored and how/if it ports to smaller screens.

Types of uses + Example

Further considerations:

  • Know why you use the technique, it won't work for most sites. Just like any design pattern, give it some thought.
  • Animation/frame type uses of the technique are often laggy (example) and don't port well across devices or slower computers.
  • It doesn't have to work across the entire screen and involve all elements but can be done more subtly (example: 1).
share|improve this question
In HCI at least it's commonly accepted that 3D displays are largely inferior in presenting information (wikispaces.psu.edu/display/331Grp1/…). The only exception I would make is when the information is 3D (video game or movie) or the information is so complex information must be presented in 3D (scientific information often falls into this category) – Ben Brocka♦ Sep 28 '11 at 13:23
1  
FYI: Another example at Legoland Discovery Centre – Roger Attrill Sep 28 '11 at 15:10
1  
@RogerAttrill: Great example of how to use the technique. +1 – JeroenEijkhof Sep 28 '11 at 17:46
1  
@BenBrocka: I assume you are only talking about the 3D uses of this technique (link was broken). It's not really about 3D as much as it is moving element juxtaposed from each other to create a more immersive experience. – JeroenEijkhof Sep 28 '11 at 17:50
1  
@WmasterJ Weird, here's one of the more important sources useit.com/alertbox/981115.html . It's about 3D techniques in general, and paralax is inherently a 3D effect even if individual items are 3D. It can look good but it's not helpful to digest info. If that's not your point of course it's not as relevant – Ben Brocka♦ Sep 28 '11 at 18:20
show 2 more comments

closed as not a real question by ChrisF, Ben Brocka♦ May 30 '12 at 13:14

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, see the FAQ.

5 Answers

up vote 2 down vote accepted

I don't think "parallax" is a novel UX pattern to be taxonomized as such. It's a dynamic visual effect applied to other (ancient!) scroll, pan or carousel interfaces. Your bullet points apply to these patterns more than the 3D-ish effect.

Another way to put this is that the illusion of depth or moving through space is part of the transitioning between states that occurs all the time.

That said, I do think this is an interesting topic, and in the right context - generally a guided tour kind of use case? - could increase interest and engagement in a scroll/pan/carousel interface.

An interesting way to look at this is not to be so focused on the parallax effect but to look at this as UI that employs any spatial distortion techniques. For example, this bling-y portfolio site doesn't look 3d, but it feels like you are progressing because of the transition effects.

share|improve this answer
Agree, and the link you sent actually uses a parallax affect similarly to the nike one for their Work space :) Back toy our first point (not a novel UX pattern), that is the reason I posted the Wikipedia link so that people can get an understanding what the origins are. – JeroenEijkhof Sep 28 '11 at 22:18
1  
Yes, and for the record I am totally in agreement that there are UX considerations to applying these effects. I wonder, though, if your "UX Best Practices" are really aimed at the underlying scroll/pan/carousel patterns, and don't have to do with the new visual depth. Another way to look at it - if you removed the depth illusion in all of these sites, wouldn't you still want to follow the same UX guidelines? – peteorpeter Sep 29 '11 at 14:19
Oh, I wouldn't call that parallax - it's just literally one layer moving on top of a background (that doesn't move). The appearance is very 2D. I think you might need a another layer or two (moving proportionally to the top layer) before you can call it parallax. – peteorpeter Nov 3 '11 at 16:33
1  
Agree and agree to both of these things. I now think what the parallax effect does is simply add more detail and new possibilities to animate or visually improve the experience. When we look at it like this there are other things to consider for the parallax effect that focuses on how to use these different layers to communicate something that would otherwise not be possible. – JeroenEijkhof Nov 5 '11 at 18:57
up vote 2 down vote

One of the first questions you need to ask is "what benefit does this provide?" In this case, I am unconvinced that it provides a lot. Yes, it is cool as a concept, and there are some situations where it would be appropriate - in particular, where it matched other marketing aspects for the brand.

However, as an interface to interact with, it is not clear or easy. Some of them were just confusing, and others gave no indication what I should do ( and this is an important aspect of any UI ).

So use it only if there is a good marketing reason for it, but otherwise, concentrate on letting users interact nicely, and not gimmicks.

share|improve this answer
I think we are totally on the same side. I didn't provide the best examples above and I'm trying to swap them out so that others who come here later will be able to get some got inspiration that also works as examples for how it could be done. I think in general the question of benefit needs to be asked with any UI design pattern, but with these ones even more so! I do feel like it isn't tied directly to marketing, it could also simple be something that ever so slightly enhances the experience – JeroenEijkhof Sep 30 '11 at 14:58
up vote 2 down vote

Why, oh why, would you want to do that? Please don't do that...

The sites that you linked may have "cool and interesting" UI's but the UX was terrible. If I wasn't specifically trying to work out what you were thinking of doing I would have left each of them very quickly.

Clarity first.

(And remember that the UX gods get very upset when people don't follow their first commandment, and may choose to smite thee with a plague of confused customers)

Edit: I am answering this specifically for web sites as those are the examples given.

share|improve this answer
4  
"cool and interesting" sounds like a great UX to me. Perhaps you mean the UI was terrible? – Rahul♦ Sep 28 '11 at 11:57
1  
The Nike site was great, you could either scroll of click the circle navigation on the right site, which also gave page content on hover. Very clever site and a great UX. – Matt Rockwell Sep 28 '11 at 12:05
3  
"Clarity first" doesn't always fit the goals of a site. Many a marketing person would say emotion first. – peteorpeter Sep 28 '11 at 12:43
@Rahul: good point. Corrected. – JohnGB Sep 28 '11 at 12:51
1  
@JohnGB - From this answer I take: "Know why you use the technique, it won't work for most sites. Just like any design pattern, give it some thought." – JeroenEijkhof Sep 28 '11 at 17:41
show 6 more comments
up vote 1 down vote

I think this can be made a community wiki post just by an answerer checking the 'community wiki' box below the reply field. I'll give that a go. (/EDIT - Nope, that just converts this answer to be a Wiki post. Not sure how to convert the question to a wiki one though).

However, in order for this answer to be more relevant to the question I will make one observation about the set of links featured above:

The 3D Rooms example can probably serve a purpose out in the 'real world' (i.e. not just in developer portfolio pages or tech demos as the other links really are). Because it exists as a seperate content-element it can be used to complement the existing content of the page it sits on (such as for a product demo on an ecommerce site) whereas for the other examples in the list the parallax feature IS the site; it's not a complementary feature. Those sites appear to be just an updated version of the old 100%-built-in-Flash sites that we used to see many years ago, with all the drawbacks that those sites had (low searchability, accessibility etc).

share|improve this answer
Thanks for trying! – JeroenEijkhof Sep 30 '11 at 14:56
up vote 1 down vote

As for where the technique is used as part of the UX the primary example would be side-scrolling video games. In that context, it makes perfect sense...it gives the experience of 3D without the distraction. It's still a 2D interaction plane, just made more interesting (and potentially performant in the earlier days) by using the technique.

As for other places it makes sense to use it, that's a tough one. I see it on occasion on web sites that are designed to encourage exploration...often a trendy ad agency site that decides to try a side-scrolling flash based site. They were neat for a while. Not sure they really impress folks much anymore.

share|improve this answer
I totally agree with the exploration part of it. I believe it speakes to a more emotional part of us that appreciates these exploratory UI's. But the trade-off is of course that there needs to be a balance between utility and play. – JeroenEijkhof Sep 30 '11 at 14:56
I agree. There is definitely places and times where a more exploratory-focused UI makes a lot of sense. I'm thinking educational type sites or rich story based sites. – DA01 Sep 30 '11 at 15:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.