Prototyping parallax scrolling websites: the new rules
Prototyping parallax scrolling websites just got a whole lot more effective. Bring on the new rules!
Parallax scrolling websites were everywhere you looked a couple of years ago, from news sites to ecommerce pages. Parallax web design, in which background elements move more slowly than foreground elements, was touted as bringing depth and narrative to a site, plus augmenting the user experience.
Then parallax scrolling kind of fell out of favor — usability studies showed it didn’t technically result in better UX, and parallax-related SEO blips made e-commerce vendors wary.
But parallax scrolling websites still have a lot to give! As a way to rethink user engagement with longform content, tell visual stories with intuitive scrolling and increase time on-page, parallax design is a great option. You just have to do it right, that’s all.
Step up the new rules of prototyping for parallax scrolling websites. The Justinmind UX and design crew sums up 5 new rules to ensure that you’re using parallax elements at the right moments on the right sites, and running the right user tests on your parallax prototypes.
Rule 1: Use parallax scrolling websites to tell stories
It’s no surprise that media outlets have adopted parallax design as a way to draw readers into long-form content. The New York Times is a pioneer in imaginative, engaging parallax website design — their pieces on women in prison or cage fighting break new ground in content design and delivery. Parallax scrolling websites have the power to draw users into a narrative and provide a sense of progression.
But you don’t have to be literally telling a story to exploit the narrative power of parallax scrolling. Parallax design is also a potent way of utilising “guided storytelling”, points out Jaqueline Kyo Thomas in UXmatters. Use parallax design to weave the story of your product — humans are hardwired to love and remember stories, and parallax scrolling can help you tap into that.
Experiment with the narrative power of parallax scrolling in your website prototypes before moving on to development. Justinmind has a dedicated parallax UI library with pre-baked parallax elements ready to drag and drop into the prototype. Tell the story by prototyping slide-in layers as you scroll; set them to appear at different scrolling speeds to add more subtlety to the effect.
Adding expressions with the expression builder means you can play with advanced element attributes such as rotation and position. By mixing up these elements in your parallax scrolling prototypes you’ll be able to guide users through the story from start to finish.
Use parallax design to weave the story of your product — humans are hardwired to love and remember stories, and parallax scrolling can help you tap into that
Download Justinmind today and prototype parallax scrolling effects
Rule 2: Don’t forget your site’s main objective
It’s all too easy to get carried away with making a parallax scrolling website look super awesome. But parallax design should work to help your site achieve its core objectives, whether that’s selling a product, generating leads or disseminating content. Over-cooked or pointless parallax scrolling can stop users achieving their goals, according to the guys over at UserTesting blog.
Parallax scrolling effects should increase the chances of users following desired paths and carrying out desired actions. Check out the parallax website of boxer shorts designer A-dam: elements slide into view as users scroll, but the most important action buttons are pinned to the foot of the page, following the user wherever they go and providing instant access to products and information.
You can get a similar effect by using the pinned elements in Justinmind’s parallax UI library. Select which orientation you want to pin to the element in (eg “Pinned top” or “Pinned bottom”). Apply the “Move to” action to the element and calculate the exact position you want within the prototype interface. You have 100% control over where your pinned parallax scrolling elements appear in the UI — play around with the prototype and align the parallax design with wider objectives.
Rule 3: Don’t rule out responsive parallax scrolling for mobile
Some say that parallax scrolling and mobile do not a happy couple make. Mobile device users have less patience with effects, and parallax design can fail to ‘pop’ on a mobile. But don’t abandon making your parallax website mobile responsive! Using the Justinmind app you can view and simulate all prototypes on any device — does the design work, does it add to the user experience or not?
Heads up — if you open a select to create a mobile protoype in Justinmind you won’t have automatic access to the parallax UI library. But don’t worry — add the parallax scrolling widgets by clicking ‘Add/remove libraries’ in the Widgets dropdown.
See more parallax scrolling in action with these 10 inspiring examples
Rule 4: Test your prototyped parallax website on real users
Building an interactive prototype before moving on to the final development phase is a great way to test out your parallax design. Usability testing on real users is invaluable when dealing with design styles such as parallax scrolling, which have specific applications and can strike audiences in different ways.
Historically in user testing, parallax scrolling effects have not shown to improve usability; in fact, in some cases users grew tired of the parallax effect pretty quickly. That’s something you want to avoid, so run the full gamut of usability tests on your parallax prototypes.
To facilitate testing, prototyping tools such as Justinmind are integrating with a wide range of usability testing tools, and are set up for cross-device testing. Expose users to parallax prototypes at various points in the design process to ensure you stay on track.
Find out more about parallax scrolling and usability in this great UXPA research study.
Rule 5: Don’t overdo it
As mentioned above, users can tire of parallax websites. That means the effect should be employed sparingly — parallax for the heck of it will have a negative impact on UX, usability and site success.
Successful parallax scrolling effects stick to the follow guidelines:
- Don’t make it hard to find information
- Avoid bottomless scrolling effects
- Don’t apply parallax to secondary elements
So, keep your parallax scrolling subtle as a general rule. Spotify does just that: content blocks fade into site as users scroll, catching the eye and directing user attention in an unobtrusive way.
The new rules of parallax scrolling — the takeaway
Parallax scrolling can be a potent way to direct users’ attention and draw them into the story of a product. But beware of overwhelming or frustrating users who want to find information quickly. Iterate and test your parallax designs with a prototyping tool to ensure that you end up with a site that meets both user needs and business goals.