JS Nation

JSNation 2022

Engaging Ecommerce with the Visual Web

♪♪♪ ♪♪♪ Images, video, and media are part of our everyday web experience. How can we take advantage of it from an e-commerce perspective and make sure that we're delivering the best experience we can? So who am I? I'm Colby Fayok. I'm the one hugging BB-8 and Kylo Ren over there. I work with the dev community as a developer experience engineer at Cloudinary. You can find me pretty much anywhere on the web by just Googling my name as I'm the only one in the world. So we're going to start off at the top with the king of e-commerce, Amazon, where the first thing we see when we load this page is it's covered in media. It's a good way to showcase available products, so it makes a lot of sense. This is the landing page for their fashion store, which likely looks similar to a lot of the top-level landing pages that you've seen where we have large images that are meant to showcase the available products. And if we scroll down, we have the ability to shop by category, where we have images that represent each category. Once we dive in here, we can start to see a grid of images where, like here on the product listing page, the easiest way to browse a large amount of products is to put them in a list. So we put them in a grid where we can scroll through. Once we're on our product details page, we want to get a closer look and choose our options. Ideally, this means having several photos showing different angles. Now, not to pick on Amazon here, but there's really nothing innovative going on, and I'm sure they A-B test every minute detail of this page to make sure that it's not going to hurt conversion, which we'll get to later, but it's all very practical and functional. So how can we take our media in e-commerce up a step further? Here we have Star Cadet, where I'm a big fan of their Final Space merch. They take advantage of GIFs to display video-like category and product images. It's a bit more of a creative approach, taking a very typical static medium and making it exciting. Glasses USA allows potential customers to get a firsthand look at what glasses would look like on somebody's face. Buying glasses is hard, and you want a pair that you're going to feel confident in. Traditionally, you'd have to hope for the best with a good return policy, but this gets us a step closer to feeling like we're actually in a store. As far as product pages go, you still need to have the ability to showcase your product. People need to buy something, and it needs to be very clear. So you don't want to be over-creative, but here, like Nike, we can see that they have embedded video as part of that experience to give people a better idea of the fit. Now, as creative as some of that is, it's still fitting into a traditional medium. The web is changing, so what does the future of e-commerce look like? Nike recently acquired Artifact Studios, a team who creates shoes and collectibles ready for the metaverse. It's similar to the collectible game that Nike has always been a part of, but now as an investment into the digital world. And that wasn't Nike's only foray into that world. Nike also launched Nike Land on Roblox. It's an experience that allows you to connect to a digital version of Nike HQ. They have games, sports, and community-oriented features. But they also have a showroom that lets you check out specific, special Nike products, where you're given the ability to deck out your Roblox avatar with exclusive gear. While we still have a lot of time before this thing becomes super mainstream, we're already starting to see really creative solutions. There's a lot of change happening, and it's happening fast. But let's talk about some of the more practical ways where we can look at our media today. While the metaverse is likely coming fast, we still need to maintain an effective Web 2.0. While for some of you this might seem like an easy one, it's super important to make sure that you're displaying large, clear images and video to showcase your product. It's especially helpful when you have more than just a single wide shot of the product. People care deeply about the products that they're buying. So being able to have a clear, up-close look at what it looks like helps them to ensure the quality that they're getting. And we can't have e-commerce reference shots without Apple, because they do a really good job at showcasing large, detailed imagery of their products. But that's not always enough to make sure that the features are clear. They make the extra point to highlight features, diagramming different points for the products, such as their potentially confusing use of three separate lenses for a single iPhone, where they point out the differences between the three. And while it's important to have those big, clear images, which Wyze does a really good job at, lifestyle photos are a way to place your product in people's everyday lives. Whether the potential customer knows it or not, this helps them to imagine how that product would actually fit into their own life. So how could these Wyze headphones help you out? Well, maybe enjoying some music in bed? They're so comfortable that you might forget that you're wearing them, as you see on the headline there. Now, ThinkGeek, a company that I worked for, who used to sell cool things from all your favorite fandoms, took this a step further. Not only did they showcase the products in a real-life scenario, they showed it with a fun twist. So you can fully imagine yourself as Darth Vader, baking with your R2-D2 measuring cups. But it makes a difference going this extra step, helping to build a stronger connection with your audience. Now, upgrading media from static images, we have video, which can help drive more context between the visuals in a shorter period of time, along with audio to provide more verbal descriptions. But we can do better than a video just simply embedded in a pop-up. Like my examples earlier, we can use video in ways that will add to the experience without taking away from the existing one. Under Armour instantly sets the tone with video on their homepage. Their audience is full of athletes, so this is a really good way to take somebody right into the gym and get them hyped up. So enough outlooking a bunch of pictures. See what I did there? How can we actually take some of this and make it happen from a developer perspective? In reality, some of these answers may not include technical solutions. Like in order to show large, clear images, the first thing you need is large, clear images. But make sure you're actually showing those images large and clear on the page. And make sure you're not over-compressing or showing really tiny thumbnails. People need to be able to have a clear look at what the product is. So take advantage of those big, beautiful images. But you can take that a step further. You can allow people to zoom in on those images right as they're on your page, avoiding unnecessary steps to take them off that page. There's a lot of great zoom-based libraries that can help us out with this. Like React to inner image zoom gives us a simpler experience to Uniqlo. Or there's a lot of other traditional zoom modal libraries where they don't really provide the zoom experience that you would expect on a product page. But you can also try to replicate this on your own. So just as an example, once zoom is enabled, we can dynamically grab the cursor position and update the image's position relative to its container. And while this is just a simple example of how this might work, it shows the basics of how we can start to achieve that UX. Now, providing point-based details is both a little bit easier and a little bit trickier. Adding some text overlaid on an image isn't too bad. But each one of those lines are pointing precisely to that lens. While we can do that pretty easily for one single viewport size, realistically, most of us are trying to build responsive experiences. Again, this is a very simple and incomplete representation, but we can start to see how we can make this happen by using the resize listener and setting coordinates based on the original width and height, where it's percentage-based. So we can dynamically update that position as it resizes. Now, lifestyle imageries is one of those things where, again, unless you're also the photographer, we're going to need creative support in imagery. But we can still see how we can provide nice banners like this without having to embed the text inside of the image. By including the text on the page, we're helping both search engines read that text and accessibility. Also, it's likely easier to make responsive so that the text is readable everywhere. And as far as video is concerned, yeah, I would imagine you might be thinking, I can just slap a GIF in there. And yeah, you can, but GIFs can be huge, especially if you want them big and high quality. We can instead take advantage of actual video on the page, and embedding on the use case may provide much better file size results. Using the HTML video element, we can hide all the controls in the player UI and set it to automatically play in loop, just to make sure that your app is actually able to see that solution with the results and see how it compares to others. Now, we have a lot of awesome tools at our disposal, but it's not always as easy as just dumping a bunch of images and videos on a page. There's serious considerations that we need to take into consideration for how we actually deploy these experiences. Without considering the impact, we could be putting a lot of unnecessary load on our people's devices and bandwidth, severely slowing down their page load and hurting their experience, or worse, killing our store's conversion rate. Now, if you're not familiar, conversion rate is the percentage of your traffic that actually buys something. There's a lot of studies about how website speed directly correlates to conversion rate. eBay, for instance, found that a half percent increase in their conversion rate with a 100 millisecond load time improvement. Now, that might not sound like a lot, but eBay is worth over $10 billion. So just as an example, 0.5% of 1 billion is 5 million. So it starts to add up really quickly. That means that while all of our video and imagery might help build a good user experience, that media is going to take up a vast majority of the size of the page. So if we don't pay attention to how we're delivering it, we're going to bloat our pages and destroy our conversion rates. So what can we do to help optimize that delivery? Well, let's look at some examples of images. To start off, while JPEG is a great option, there's more modern formats that can help us deliver high-quality images at reduced sizes. WebP and AVIF are two great options, and depending on the image, can bring some drastic reductions in size. We can also compress our images to the point where we're not impacting the visual quality. Maybe it won't matter for this tiny little thumbnail, but we've learned that we want to display these nice and big, right? So we want them all displayed in their all-beautiful big glory, so we can let tech automatically decide how much we want to optimize without hurting the visual quality. We're not over-optimizing, and we're not wasting precious kilobytes in downloads. If you're working with high-quality imagery, your source files might be huge. If you serve them as is, the browser has to resize them down anyway, so you're just wasting bandwidth. Resize to the image sizes that you need, and don't try to just crunch the image just to make it smaller. You'll end up with super blurry or pixelated images. Modern image delivery can give you the exact sizes you need on the fly, so take advantage of that. Bringing this all together, we have some pretty amazing results. Using modern formats, letting tech handle automatically optimize our images, and serving the images in sizes that make sense for our web app, we were able to slash this particular example down from 652 to 76.6 kilobytes, all without sacrificing quality. If we pay more attention to our media, not only will we be able to responsibly build great experiences for the web, we'll be helping ourselves provide the best opportunity for conversion. Speaking of e-commerce, if you want to learn how to build your own online store, check out my course, Ecom Product Management and Storefront, where I walk you through building a full-stack app with Next.js, Snipcart, and GraphCMS. You can find it at egghead.io, where I'll include it in my talk notes. And that's it. If you want to learn more or chat about the talk, you can find me everywhere at Colby Fayok, and also tweet out a link with some of the stuff you've seen here today. Thanks. ♪♪♪


#core web vitals