How To Stop Analysis Paralysis With Design
How To Stop Analysis Paralysis With Design
Suzanne Scacca
<p>As a web designer, you do your best to remove friction from the decision-making process. You place only one CTA above the fold. You keep interactive elements to a minimum. You make the menu only as large as it needs to be.</p> <p><strong>But what happens when the content itself causes analysis paralysis?</strong></p> <p>There’s an overabundance of choice all around the web, from e-commerce stores with thousands of products to content generation machines pushing out new posts every day. While you can’t do anything to stop the flood of information or items going out to your visitors, you can design your interfaces in a way that makes the decision-making process easier to bear. What’s more, you can help them walk away feeling more confident with their choice, too.</p> <p>Let’s look at what it is about the psychology of choice that can be detrimental for conversions and what you can do to keep your PWA visitors from succumbing to it.</p> <h3>Why Analysis Paralysis Is Hurting Your Conversion Rate</h3> <p>Paralysis by analysis is what happens when someone finds a situation or decision too overwhelming or difficult. Despite thinking over the circumstances or options, they’re unable to make a clear choice, often leading to no action at all.</p> <p>It’s the exact opposite of what we want to happen with our visitors and customers. And, yet, we see it all the time.</p> <div data-component="FeaturePanel" data-audience="non-subscriber" data-remove="true" class="feature-panel-container hidden"></div> <p>Take <a href="https://www.amazon.com/">Amazon</a>, with its hundreds of millions of products. Let’s say a shopper is looking for socks for an upcoming snowboarding trip. So, they search for “snowboard socks”:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg" sizes="100vw" alt="Amazon search snowboard socks" /> </a> <figcaption class="op-vertical-bottom"> A search for “snowboard socks” on Amazon yields 728 results. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/0e8be585-5c37-4268-b3e1-445da42ead57/amazon-paralysis-analysis-snowboard-socks-search.jpg'>Large preview</a>) </figcaption> </figure> <p>There are 728 matching results for snowboard socks. While that’s nothing compared to the size of Amazon’s marketplace, it’s still way too many results to sift through on one’s own.</p> <p>So, the shopper decides to narrow their search down to “knee-high snowboard socks antimicrobial compression”, which hits all of the key features they’re looking for:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg" sizes="100vw" alt="Amazon search knee high snowboard socks antimicrobial compression" /> </a> <figcaption class="op-vertical-bottom"> A search for “knee high snowboard socks antimicrobial compression” on Amazon yields 8 results. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5eef64b4-9b46-4eb4-9f20-b6e616b4ce0a/amazon-specific-search-results.jpg'>Large preview</a>) </figcaption> </figure> <p>That takes the list of 728 products down to a more manageable 8. However, there are a number of problems with this.</p> <p>For starters, Amazon doesn’t actually present only eight options. The first thing it shows is a banner with sponsored results:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg" sizes="100vw" alt="Amazon search – sponsored products banner" /> </a> <figcaption class="op-vertical-bottom"> Amazon displays sponsored products on a search results page before organic products. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/af4d6c99-4f56-4528-8338-ee5e6075d4ed/amazon-search-sponsored-banner.jpg'>Large preview</a>) </figcaption> </figure> <p>The next two rows <em>do</em> contain organic search results. However, the products either don’t have any reviews or high enough ratings to rave about.</p> <p>To make matters worse, Amazon adds <strong>three more rows of sponsored products</strong> to the end of this page:</strong></p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg" sizes="100vw" alt="Amazon search results overrun with sponsored products" /> </a> <figcaption class="op-vertical-bottom"> An Amazon search results page promising 8 results is full of sponsored products. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5b79e209-b967-4eff-b76a-0ccd01a8ed9d/amazon-extra-sponsored-results.jpg'>Large preview</a>) </figcaption> </figure> <p>Essentially, Amazon has tripled the number of products the shopper has to look at now. Not only that, but one could argue that it’s polluted the search process with so many paid products.</p> <p><strong>It’s just a poor experience all around.</strong></p> <p>It’s a similar story on mobile. The main difference is that, when the narrow search is applied, only five results remain. That said, Amazon continues to muddle search results by prioritizing sponsored posts. This is what the shopper sees above the fold:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png" sizes="100vw" alt="Amazon mobile search results with sponsored products" /> </a> <figcaption class="op-vertical-bottom"> Amazon search results display only sponsored products above the fold on mobile. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/31b67685-7253-4425-967b-d3ce0606dba1/amazon-mobile-search-sponsored-results.png'>Large preview</a>) </figcaption> </figure> <p>Once the shopper scrolls, they’ll see two organic products (with no ratings, much less) before being shown yet another sponsored product:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png" sizes="100vw" alt="Amazon mobile search with organic and paid products" /> </a> <figcaption class="op-vertical-bottom"> Amazon fills mobile search results with paid product listings. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/17de3711-a320-4637-abca-0bc4b52844de/amazon-mobile-sponsored-products.png'>Large preview</a>) </figcaption> </figure> <p>What should have been a succinct product search page ends up running on and on with sponsored listings and Amazon recommendations. As you can imagine, this is an even bigger problem for mobile shoppers who don’t have the patience or time to waste.</p> <div class="sponsors__lead-place"></div> <h3>How To Simplify Decision-making With Design</h3> <p><a href="https://www.ted.com/talks/barry_schwartz_on_the_paradox_of_choice?language=en#t-574423">Psychologist Barry Schwartz gave a TED talk</a> on this exact problem and explained how it doesn’t just lead to abandoned purchases, but to less satisfying purchases.</p> <p>Essentially, Schwartz argues that too many choices cause consumers to:</p> <ul> <li>Have too-high expectations whereby no option ever seems perfect or satisfying.</li> <li>Focus on minute details or features they missed out on by not making a different choice.</li> <li>Regret the option they settled on even if it proved to be the best.</li> <li>Blame themselves for spending too much time analyzing a decision and still making the “wrong” choice.</li> </ul> <p>In other words, an abundance of choice puts your audience in the wrong state of mind. And if your site or PWA can’t afford to process returns or watch visitors walk away at a rate that a company like Amazon can, then you can’t let paralysis analysis become part of the decision-making process to begin with.</p> <p>Here are some things you can do to make decision-making more bearable, even with too many options available.</p> <h4>Prioritize Your “Big Rock”</h4> <p>There’s a productivity hack called the “Big Rocks” method. Essentially, it says that if you want to get more stuff done, you have to take on your biggest challenge or priority first thing. All of the smaller tasks and requests nagging at you get slotted in once you’ve tackled the most critical ones.</p> <p>And now I’m suggesting you do something similar with your design.</p> <p>Basically, what you want to do is this:</p> <ul> <li>Look at all of the “stuff” you’re trying to put in front of your visitors.</li> <li>Ask yourself (or your client): “Which one takes top priority right now?”</li> <li>Then, stick it to the top of your home page.</li> </ul> <p>Why do this? Well, for starters, it’s much less overwhelming to show one thing than to throw everything you have at your visitors right away — or to force them to dig around and figure out where to start. Plus, chances are good that there’s something especially pressing you want every visitor to see.</p> <p><a href="https://barkshop.com/">BarkShop</a> shows us one way you might do this:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png" sizes="100vw" alt="BarkShop Halloween sale banner" /> </a> <figcaption class="op-vertical-bottom"> The home page of the BarkShop website displays a Halloween sale banner. (Source: <a href='https://barkshop.com/'>BarkShop</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e13b6643-f68a-4cc8-adf3-d339ceddd730/barkshop-home-page.png'>Large preview</a>) </figcaption> </figure> <p>Notice how the top of the page isn’t littered with an inventory. Instead, the primary focus is on the Halloween sale.</p> <p>This is clearly BarkShop’s big rock right now. If they don’t get their Halloween items out the door by October 31, they run the risk of losing money on the seasonal inventory. And while they could leave it up to their visitors to <em>assume</em> there are Halloween toys and treats available, why do that?</p> <p>It’s hard enough showing up on a site like this and deciding what you’re going to buy for your dog this month. So, let your big rock become their guide.</p> <p>You can see that it’s not just about the Halloween line either. Just below the banner, BarkShop has prioritized its top-trending toys. This is another trick you can use when designing product inventories and news sites. Display the most popular or top-rated/shared items first. There’s a greater likelihood <a href="https://www.smashingmagazine.com/2019/09/too-much-social-proof/">they’re going to click on something that others have shown interest</a> in than a bunch of random items they have to explore on their own.</p> <p>Another way you might tackle big rocks in design is to go the way of <a href="https://www.apple.com/">Apple</a>:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png" sizes="100vw" alt="Apple home page promo for iPhone 11 Pro" /> </a> <figcaption class="op-vertical-bottom"> The Apple home page banner advertises only its iPhone 11 Pro. (Source: <a href='https://www.apple.com/'>Apple</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d24bba-068a-4dac-ae09-a083373913a9/apple-home-page.png'>Large preview</a>) </figcaption> </figure> <p>Again, Apple could’ve shown a bunch of its iPhones and iPads here or pointed visitors to different categories of products and accessories to explore. Instead, it’s put its big rock right up front: the iPhone 11 Pro.</p> <p>Sure, there are probably plenty of Apple customers who come here looking for older models. But what makes more sense?</p> <ul> <li>Showing a bunch of similar-looking smartphone graphics that visitors are immediately put into analysis paralysis mode with?</li> <li>Or showing them the latest model that everyone wants?</li> </ul> <p>You can do this with other kinds of websites, too. Blogs, for instance, will use the sticky post feature to show off their “big rocks” to every visitor who stops by. This might be the most popular post of all time or it could be something relevant to something happening at the moment.</p> <p>Whatever it is, there’s a conscious decision made to stop visitors in their tracks and give them a moment of calm before they have to enter decision-making mode.</p> <div class="sponsors__lead-place"></div> <h4>Gate Off the Choices</h4> <p>While you want your visitors to know that there’s a plenitude of things available, you don’t need to tell them how much there is. It’s only going to add to the pressure of the decision-making process.</p> <p>So, whenever you can, gate off the choices.</p> <p><a href="https://www.ehealthinsurance.com/">eHealth Insurance</a> is a website where Americans can purchase health insurance for themselves or their companies. With a wide variety of healthcare providers and dozens of plans available for each, a service like this is necessary for insurance-wielding U.S. citizens.</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png" sizes="100vw" alt="eHealth Insurance home page" /> </a> <figcaption class="op-vertical-bottom"> The eHealth Insurance website gates off its insurance provider options and plans. (Source: <a href='https://www.ehealthinsurance.com/'>eHealth Insurance</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1e9cf6b3-cff7-4745-8dc9-d5bf5c909a00/ehealth-choose-insurance.png'>Large preview</a>) </figcaption> </figure> <p>The only decision it asks visitors to make is what kind of insurance they’re looking for. It then asks them to fill out a simple enough form. It’s what eHealth Insurance uses to pare down the options:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png" sizes="100vw" alt="eHealth Insurance qualification form" /> </a> <figcaption class="op-vertical-bottom"> The eHealth Insurance form asks qualification questions of visitors to help list the right options. (Source: <a href='https://www.ehealthinsurance.com/'>eHealth Insurance</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f9321f4d-a350-4900-9bf8-34b9eb604c47/ehealth-form.png'>Large preview</a>) </figcaption> </figure> <p>Once filled out, eHealth Insurance shows the user a list of providers and plans that are available in their area. This keeps the consumer from having to:</p> <ol> <li>Visit individual health insurance websites to do their own research.</li> <li>Sift through hundreds of options all at once (some of which they’d probably be ineligible for and others that would just be a bad fit).</li> </ol> <p>Websites like these typically allow you to compare up to three items at once, making the decision-making process even simpler.</p> <p>Another way to gate off your choices is by asking visitors to start narrowing their choices from the moment they arrive as <a href="https://www.sothebysrealty.com/eng">Sotheby’s International Realty</a> does:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png" sizes="100vw" alt="Sotheby’s home page rental search" /> </a> <figcaption class="op-vertical-bottom"> The first thing the Sotheby’s International Realty PWA asks visitors to do is narrow down their search results. (Source: <a href='https://www.sothebysrealty.com/eng'>Sotheby’s International Realty</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/263f5ba3-1b6e-401e-86d4-a4ea3e475d20/sotheby-s-home-page-search.png'>Large preview</a>) </figcaption> </figure> <p>This way, consumers aren’t distracted by all the great-looking properties or even the attractive prices. They’re still focused on taking action (e.g. finding a rental), but it’s more about taking baby steps towards the desired result which makes it much less intimidating. It’s also going to lead to a more satisfying result in the end as they won’t spend time looking at rentals they can’t afford, that don’t allow cats or that are too far away from their kids’ schools.</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png" sizes="100vw" alt="Sotheby’s location search results" /> </a> <figcaption class="op-vertical-bottom"> Sotheby’s helps visitors narrow their searches by location. (Source: <a href='https://www.sothebysrealty.com/eng'>Sotheby’s International Realty</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/cf2d7730-586e-4d8e-8eb0-6b7a5148fb78/sotheby-s-search-results.png'>Large preview</a>) </figcaption> </figure> <p>The next page of the Sotheby’s search process starts to show matching results, but not before letting them know that there are “55 Luxury Homes for Rent in London”. And if that number is just too much to handle, that’s fine. Directly to the right of that note is a filters widget.</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png" sizes="100vw" alt="Sotheby’s rental filters" /> </a> <figcaption class="op-vertical-bottom"> Sotheby’s helps visitors narrow down their choices even further with comprehensive filters. (Source: <a href='https://www.sothebysrealty.com/eng'>Sotheby’s International Realty</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/59993a32-74cb-493a-8342-7a1a96e58d10/sotheby-s-filters.png'>Large preview</a>) </figcaption> </figure> <p>Sotheby’s filters are great. Not only are all the essentials covered, but it’s even divided up the filters by category.</p> <p>Let’s recap how smooth this experience is going to be for already-anxious home-buyers or renters:</p> <ul> <li>The first thing they see on the Sotheby’s home page is a search bar.</li> <li>If they do the search, the next thing they see is the number of properties in the area.</li> <li>If that number is too intimidating, the filters widget is there to help them narrow the list even more.</li> </ul> <p>By keeping the rentals off of the home page and even away from the top of the fold of the internal page, Sotheby’s can control how calmly visitors go through the decision-making process.</p> <h4>Enable Side-by-side Comparison</h4> <p>Internally, there’s not a lot you can do about choice overload except giving your visitors a really great set of sorting and filtering tools. Even then, once they start to see lists of related products, recommendations on previous purchases and so on, the analysis paralysis is going to creep back in.</p> <p>One thing you can do to make this less stressful is by including side-by-side comparisons.</p> <p>It’s similar to laying out pricing plans side-by-side. Rather than make prospective customers review their options one-by-one, stack up the top few choices. Then, align the specifications so it’s as easy as looking across a row to weed something out because it doesn’t fit the budget or the product is too large.</p> <p>Although Amazon doesn’t handle analysis paralysis flawlessly, I do like what it does with its side-by-side product comparisons:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png" sizes="100vw" alt="Amazon comparison table" /> </a> <figcaption class="op-vertical-bottom"> Amazon shows a table of similar products to customers for easy comparison. (Source: <a href='https://www.amazon.com/'>Amazon</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/20496ed8-3e90-407b-a876-577542a66e84/amazon-product-comparison.png'>Large preview</a>) </figcaption> </figure> <p>I can’t tell you how many times I’ve struggled to make a decision on Amazon, only to discover one of these comparison tables and immediately been able to make up my mind. It’s just so much easier to see a bunch of lookalike products all at once and to say “This one definitely won’t fit in my kitchen” or “That’s the exact color I’m looking for”.</p> <p>You can do this with other kinds of websites, too. <a href="https://www.verizonwireless.com/">Verizon Wireless</a>, for example, uses a side-by-side comparison to make choosing between its plans easier.</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png" sizes="100vw" alt="Verizon Wireless 2GB wireless plan details" /> </a> <figcaption class="op-vertical-bottom"> Verizon Wireless displays the details for its 2GB wireless plan. (Source: <a href='https://www.verizonwireless.com/'>Verizon Wireless</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/f12e19d2-7a2a-4127-9571-59b81c177af1/verizon-mobile-plan-1.png'>Large preview</a>) </figcaption> </figure> <p>There are scroller dots below this block that indicate to customers that there’s more to be found. All they have to do is scroll to reveal more plan options. And because <a href="https://www.smashingmagazine.com/2019/10/breadcrumbs-pwa/">the scroller breadcrumbs</a> are kept to a reasonable amount, this doesn’t seem like that burdensome of a task.</p> <p>The next block over, for instance, contains the information for the 4GB plan:</p> <figure class=" "> <a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png"> <img srcset="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 400w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_800/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 800w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1200/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 1200w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_1600/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 1600w, https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_2000/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png 2000w" src="https://res.cloudinary.com/indysigner/image/fetch/f_auto,q_auto/w_400/https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png" sizes="100vw" alt="Verizon Wireless 4GB wireless plan details" /> </a> <figcaption class="op-vertical-bottom"> Verizon Wireless displays the details for its 4GB wireless plan. (Source: <a href='https://www.verizonwireless.com/'>Verizon Wireless</a>) (<a href='https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/07c62892-3f19-4c00-9470-590b67411c47/verizon-mobile-plan-2.png'>Large preview</a>) </figcaption> </figure> <p>Even though the specs can’t be seen see side-by-side, the details are simply broken down and are consistently laid out. So, when someone moves from plan to plan, the same details are in the same place which makes flipping back and forth quite easy.</p> <p>Another thing I really like about this is the summary provided at the top of each card. The 2GB one tells customers right away that it’s the best plan if you mostly talk and text whereas 4GB is better if you stream a lot of content and surf the web. This way, if all the technical details don’t mean much to customers, the layman’s summary will help them more confidently decide.</p> <p>While I realize side-by-side comparisons might be something you’d normally try to avoid on mobile screens, these two examples show that it is possible to do so without introducing too much friction to the experience.</p> <h3>Wrapping Up</h3> <p> As I said before, you can’t do anything about scaling back the multitude of options your clients want to present their audiences with. If they want to sell thousands of products to customers that are demanding them, then good for them.</p> <p>That said, the way you design around these options can have an impact on how well or poorly they’re received. Just remember what Barry Schwartz teaches us about the psychology of choice. If your visitors, users or customers walk away feeling overwhelmed, drained or disappointed with the experience, it’s going to cost you. So, be mindful of how much you present the options to them.</p> <div class="signature"> <img src="https://www.smashingmagazine.com/images/logo/logo–red.png" alt="Smashing Editorial"> <span>(ra, yk, il)</span> </div>
Articles on Smashing Magazine — For Web Designers And Developers