(Yes, your next assignment is to go experience Bagagia by clicking the link). It doesn't have to duplicate product pages across domains, confuse the customer or slow down the process.īagagia also has a great home page experience that walks you through the value props of its product, and the story behind the brand. The problem usually is a content management system that's not integrated with ecommerce functionality on the brand side, and/or an ecommerce platform that can't accommodate rich content experiences.īagigia is an example of a product page that integrates click-to-buy with its parallax experience. Ideally, the customer is able to transact directly from the immersive experience, without being hijacked into a lesser experience. We expect this from retail partners, but unfortunately Oakely's brand site does what most brand sites do - link off to a separate bolt-on storefront with a product page layout and experience that's just as vanilla as its retail partners. In fact, showing cross-sells is distracting from making a decision on the product. There's no guarantee the customer is going to consume all the relevant content that really sells this pair of goggles.
It's got multiple images, a well-done video, feature-benefit copy, intelligent cross-sells, customer reviews and a clear call-to-action. Until you compare it to the guided product tour on the brand's site, it looks just fine. In fact, this type of experience is likely better for mobile users, as traditional product page templates were never designed for smaller screens or touch input.Ĭontrast this with one of Oakley's retail partner's product pages: This is how the experience appears for mobile users (the site is responsive). (Mobile readers note, the page is non-parallax for tablets and smartphones).įor you naughty readers that didn't do their homework, I've included a few screenshots for context.Įven though these are stills, you can see how the product page experience is much more guided and in-context than traditional product pages, even without parallax' slickness. Please go ahead and experience this for yourself. One of my favorite examples of a parallax product page is Oakley's Airbrake goggles.
Is this really the best way to romance and sell a product, and show it in its best context? Reinventing the product page experience While video helps conversion (if the customer notices the tab), it's still disconnected from product copy. There's a lot of clicking and closing required to view all the product images. Images are flat, and there's not usually no connection between product images and features/benefits. The user has to navigate between tabs (which users tend to overlook). With traditional product pages, it's up to the user to explore content. Traditionally it's organized on a product page like this: There's no doubt that customers crave product content. Ecommerce and brand sites can use parallax design to better show products in context, romance value props feature-by-feature, and guide customers through a prescribed flow of content (perfect for "story-selling"). How "good" parallax design is for a website depends on its implementation, but the idea has radical potential for transforming the product page experience. On websites, parallax design is user-controlled, often peppered with moving images, video and interactive hotspots as a user scrolls down or sideways on a page. Its early application was in video games - think how Super Mario stayed relatively center of your screen while the background appears to move sideways.
Parallax scrolling free#
“Aside from GreenSock’s laser-focused attention to detail, GSAP is fast, reliable, flexible, exceptional value (read: free in most cases) and, very importantly, supported.A groovy design trend you may have spotted in your Web travels is parallax scrolling, which refers to design elements appearing to move independently of each other.“GSAP is just miles and miles ahead of any animation library out there.“The best thing about GSAP is that it just works, and it works well.It seems like I stumble on something new and amazing every time I peek at the docs.” Joseph Labrecque, “The depth of GSAP blows me away like all the time. I’ve managed to learn so much from that so I’ll always be “Really quite impressed with JS - even the small things.” It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. Thank god for GSAP “GSAP, the rolls-royce of JS animation frameworks.
Every time I use GSAP it saves me heaps of time and frustration. “Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever “It's so correct that GSAP's logo is a superhero.
0 kommentar(er)
