Growing your online business takes more than just publishing high-quality content, sending out engaging email campaigns, and converting more customers. In fact, sometimes it’s the in-person interactions you have…
The post Print Peppermint: Your One Stop Shop for Your Digital Design Needs appeared first on Onextrapixel.
I move to a new state every two to three years, so it’s important for me to live “light”. Every time I prepare to move, I go through the “Do I really need to keep this?” exercise. Although I’ve been doing this for almost 20 years, it never gets any easier. I wonder things like:
What if I sell my bed and never have a comfortable night’s sleep again?
What if I get rid of the fancy dress I wore once but might need for some hypothetical future event?
What if I decide to start baking cupcakes again and don’t have my cupcake tin anymore?
It’s easy to get attached to things when they served you well at one time or another. But if you take a closer look at the “stuff” you’ve accumulated, you’ll realize that a lot of it has lost its usefulness along the way.
I think it’s important to run through a similar type of decluttering exercise in the work you do as a designer. That way, the apps you build always look fresh and modern instead of weighed down by antiquated features or functionality that at one time had a purpose.
Before you start charging ahead into the new year, take a moment to reflect on how you approach mobile app design. If you’re still holding onto components or functionality that no longer serve any purpose or, worse, intrude on the user experience, it’s time for a change.
Want some help? I’m going to run through some elements you can afford to scrap from mobile app builds in 2020 and beyond.
You know why marketers, influencers, and designers use FOMO (i.e. it can be really effective in boosting sales). However, you also know how damaging it can be for users’ mindsets (not to mention the distrust they feel towards brands as a result).
You could avoid FOMO altogether, but it’s a tricky thing, isn’t it?
You know that (when left to their own devices) mobile app users may forget that your app even exists on their phones without something to pull them back in. But it’s too easy to go overboard with FOMO-inducing components.
For example, this is ToonBlast:
The home screen is incredibly overwhelming. More than that, those ticking clocks (there are four of them) are a nightmare for users who can’t help but click on things they feel they’re going to miss out on by not doing so. And for users who can ignore the timers, they won’t be completely unaffected by them either. The game displays pop-up reminders for each of the countdowns. It’s impossible to ignore them.
This is FOMO at its absolute worst.
Even if reminders for each of the countdowns were sent as push notifications instead of disruptive pop-ups, it still would be bad for the user experience. There are just too many things competing for the user’s attention and each of the clocks is like a ticking time bomb.
I know it might seem like giving app users more reasons to engage is a good idea, especially if you’re struggling to attract and retain users. But if that’s really an issue, then you need to work on improving the core product first and foremost.
Going forward, I think we’d all do well to move away from harmful FOMO elements and embrace more simplified and stronger core products.
If you’re not sure what that looks like, I’d recommend turning your attention to Instagram:
Instagram is a simple and straightforward product. Users turn their news feeds into personal curations of people and accounts they want to follow while sharing their own content with the world.
Now, Instagram isn’t completely FOMO-free as you can see from the Stories bar at the top of the page. However, there’s nothing really urgent about the way these stories are displayed. They don’t take up much space in the app (unlike the way Facebook handles it, for instance) nor are there any screaming alarms that say, “Hey! So-and-so’s story is about to expire! Watch it now!”
That said, Instagram is working to remove the harmful effects of FOMO in its app by doing away with like counters and cracking down on influencers and companies that don’t mark ads as such. If you want to create a strong yet simple product that keeps harmful FOMO elements out of the picture, keep this one on your radar.
Unlike mobile websites and PWAs, mobile apps have the ability to get in front of 100% of users who activate push notifications. But that’s the catch. Your users have to be willing to press “OK” or “Allow” when you display that push notification (or phone access) request pop-up.
So, how do you get more of them to do that without constantly shoving those requests down their throats?
Some brands haven’t figured this out yet, to be honest. Take Snapchat, for example.
This is one of those apps that just goes way overboard when it comes to requesting access to users’ devices. It wants to:
Rather than ask for access when it’s relevant, it often sends a deluge of requests first thing when users sign into the app. That’s the wrong way to create a welcoming environment for your users.
A better way to go about asking for access or permissions would be to place it in the context of the app — and only when it makes sense. I’ll show you a couple of examples.
This is the app for ParkWhiz:
Look at the section called “Help Us Find You” toward the bottom.
Not only does ParkWhiz gently remind users to enable location tracking on their devices, but it does so by explaining the reasons why it would benefit them to do so. Notice also that this isn’t displayed in an intrusive pop-up at the point of entry. Instead, it’s in a spot in the app where, when enabled, it can help streamline the search experience.
YouTube is another app that does this well.
In this example, YouTube quickly displays a tooltip over the disabled notification icon. The notice reads:
“You’re missing out on subscriptions! Tap the bell to turn on notifications.”
They’re right. I’m subscribed to this channel and, yet, I haven’t received notifications (push or email) about new videos for a while. I hadn’t realized this until I saw this reminder.
The way this is handled is nice. It makes users stop and think about what they’re missing out on instead of rushing to close out another request pop-up. It also doesn’t force them to turn on push for everything. They can customize which notifications they receive.
Push notifications are supposed to be helpful. And access to your users’ phones is supposed to enhance their experience. That’s why it’s important to ask for their cooperation in enabling these features within the right context. Rather than bombard them with request after request at the outset of installing or opening an app, deliver them within the experience as in-line elements.
Note that this point is called unnecessary icon labels and not just a sweeping generalization of all of them. That’s because there are certain parts of an app where icon labels still work well. Like the navigation bar.
However, I’ve noticed an alarming trend lately whereby apps pair every page or tab name with a matching icon. There are a number of reasons why this is an issue and I’m going to use the GEICO app to demonstrate them.
This home page makes it easy for users to take advantage of their auto insurance and related services on the go. Let’s focus on the “Vehicle Trouble” section though.
There are four tabs:
The icons aren’t all that easy to decipher (except the tow truck) and I’m just not sure they add any value here. Really, if you can’t think of anything better than putting a letter “C” on a clipboard to represent claims, maybe icons aren’t needed after all?
Next, let’s take a look at the GEICO app’s list of settings:
There are a lot of settings pages here. Not only that, they’re not the kinds of pages you’d typically see in other mobile apps, so the designer has had to get creative in pairing them with icons.
If this navigation didn’t have icons, I think it would be much easier to read through the options. The same goes for the home page. Without the icons, the font size could be increased so the focus could strictly be on the page names and insured users could get to the information they need more quickly. As it stands now, the icons are just wasted space.
Let’s look at another example.
Rover is an app that pet owners can use to book pet sitting and walking services. Icons are used sparingly through the app to distinguish services from one another as well as to label the navigation pages.
I don’t think the icons on this page are necessary in terms of expediting user selection (e.g. “I need overnight house sitting so I’m going to choose the moon-over-the-house icon.”). That said, I don’t think the icons detract from the button text since each option is clearly labeled with big, bold font. What’s more, the icons do a nice job of bringing balance to the buttons so there aren’t huge white gaps in the middle.
Now, let’s look at what the designer has chosen to do under the “More” tab:
This is similar to GEICO’s slide-out navigation menu. But notice how Rover’s is text only. Considering how common these settings are from app to app, it would’ve been easy enough to add icons to each, but the designer chose to leave them off and I think that was a good decision.
There’s a time and place when icons serve a purpose. As far as labeling a secondary navigation menu in your app, it’s time to do away with that. I’d also express caution over labeling pages with icons if it’s a struggle to find a match. That should be a sign to you that they’re not needed to begin with.
In web design, we’re seeing much shorter home pages than in years past, thanks to the need for more efficient mobile experiences. So, why isn’t this something we’re doing in mobile app design?
There are some apps where this isn’t an issue. Namely, ones where there’s no scrolling at all (e.g. dating apps, gaming apps, etc.). And there are some cases where endless scrolling on the home page is fine (e.g. news and social media apps).
But what about other apps?
Listings apps (like for real estate or travel) sometimes have a hard time with this. For example, this is the top of the Airbnb mobile app:
This part of the page is well done and includes everything users need to find what they’re looking for:
But for some reason, Airbnb has designed this home page to go on and on and on with sections for:
I’m not sure what the logic was here. While I understand wanting to help your users by providing them with useful recommendations, this goes way overboard. It’s not even as though this is personalized content based on the user’s profile or recent searches. It’s just a smattering of categories that, if anything, are going to overload and overwhelm users with options.
If the app you’re building or have built runs into a similar problem, check out Hotels.com for inspiration:
Unlike Airbnb, Hotels.com’s home “Discover” page is short. All it takes is three swipes to get to the bottom of the page. Users see sections for:
For the most part, the content is 100% relevant to the user and not just meant to promote every possible service or feature of the app.
If you really feel like users would benefit from seeing every possible feature, create a secondary navigation for it. That way, they can quickly scan through the options and pick the one(s) they’re most interested in. When you give them an endless home page to scroll through and too many listings and buttons to click, you’re only going to make it harder for them to take action.
You have to monetize a mobile app if you’re going to make the original investment worth your while. It’s as simple as that.
But I’ve recently encountered some very scary dark patterns in mobile app monetization — specifically, with the way ads are designed. And it’s got me wondering if third-party ad networks are really the smartest way to monetize if they’re going to compromise everything you’ve done to create an awesome in-app experience otherwise.
Now, I understand that app designers usually don’t have any role in designing the ads that appear. That said, do you really think your users know anything about ad networks and how those ad placements get inside your app? Of course not!
So, when one of your users has a bad experience with an ad, what do you think is going to happen? They’re not going to think:
“Oh, that advertiser is terrible for doing that.”
Instead, they’re going to think:
“If I see one more ad like this, I’m uninstalling this app.”
Let me show you some examples of ads that will push the limits of your users’ patience.
This is Wordscapes, a gaming app I’m quite fond of:
I’ve been playing Wordscapes for a long time and when I first started, it was great. The banner ads were there, but they never really got in the way. And the interstitial video ads only appeared every few rounds or so. They were always easy to dismiss, too.
Over the past year or so, however, the quality of ads has majorly deteriorated. Take the banner ad above. That’s actually a video ad that doesn’t fit in the allotted space.
Then, you have this badly designed banner ad for Jynarque:
Neither of these banner ads are really dark patterns. However, they do suggest there’s something not quite right about where Wordscapes is sourcing their ad content from.
Now, I’m going to show you some of the more deceptive ads I’ve come across.
This is an ad from Showtime to promote the TV show Shameless:
See the number “5” in the top-right corner? That’s a countdown timer, which should tell users how long they have to wait until they can dismiss the ad. However, when the timer is up, this icon appears:
The timer gets to “0” and is replaced by this button. It’s not the traditional “X” that app users are accustomed to when it comes to watching ads, so they might not realize this will take them back into the game. In fact, they might misinterpret this “Next” symbol as a “Play” button and watch the ad in full. While it’s nice that Showtime gives users an exit, it would be better if the iconography were consistent with other video ads.
Then, there’s this interstitial ad for DoorDash:
This is what the ad looks like the second it appears on the screen, which is actually encouraging.
“An ad that’s going to let us exit out of it right away! Woohoo!”
But that’s not the case at all. Notice how there are two X’s in the top-right corner. One of them looks fake (the plain “X” symbol) while the other looks like an “X” you’d use to dismiss an ad.
The first time I saw this, I clicked on the good “X”, hoping my finger would be small enough to miss the fake target. Yet, this is where I ended up:
The click takes users out of the Wordscapes app and tries to move them to the app store. After hitting “Cancel” and sitting through five more seconds of the DoorDash ad, this new “X” appears in the top-right corner:
At this point, I can’t imagine users are very happy with DoorDash or Wordscapes for this experience.
These examples of bad ads and dark patterns in monetization are just the tip of the iceberg, too. There are ads that:
I know I’m picking on Wordscapes because I spend the most time inside the app, but it’s not the only one whose reputation is being hurt by third-party ad content.
Again, I recognize that you have no say in the design or execution of ads that come from ad networks. That said, I’d really urge you to talk to your clients about being more discerning about where they source their ads from. If mobile ads continue to be this bad, it might be worth sourcing your own ad content from partners and sponsors you trust instead of random companies that use deceptive advertising tactics.
There are a ton of reasons to declutter your mobile app designs. But if these examples have demonstrated anything, the most important reason to clean up is to get rid of useless and sometimes harmful design elements or techniques.
And if you’re having a hard time getting rid of the excess, I’d encourage you to reevaluate the core product. If it’s not strong enough to stand on its own, in its simplest of forms, then it’s time to go back to the drawing board because no amount of distractions you fill it with will make it a worthwhile download for your users.
(ra, il)
Articles on Smashing Magazine — For Web Designers And Developers
<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
 |
As designers, we like to think we are solution-based. But whereas we wouldn’t hesitate to call out a museum made inaccessible by a lack of wheelchair ramps, many of us still remain somewhat oblivious to flaws in our user interfaces.
Poor visual design, in particular, can be a barrier to a good user experience. Whereas disability advocacy has long focused on ways to help the user adapt to the situation, we have reached a point where users expect products to be optimized for a broad range of needs.
The post Stop Designing For Only 85% Of Users: Nailing Accessibility In Design appeared first on Smashing Magazine.
 |
Have you heard of Docker but thought that it’s only for system administrators and other Linux geeks? Or have you looked into it and felt a bit intimidated by the jargon? Or are you silently suffering with a messy development environment that seems to break all of the time in various mysterious ways? Then read on. By the end of this article, you should have a basic understanding of Docker and have it working on your computer!
The first part of this article gives a bit of background to help you understand the concepts behind Docker through some metaphors. But if you just want to get started with the tutorial, skip to the “Time to Play!” section.
The post Why You Should Stop Installing Your WebDev Environment Locally appeared first on Smashing Magazine.
 |
What makes a great conference? It fuels your ideas and polishes up your skills. It fosters your professional growth and takes your work to the next level. Luckily, a lot of conferences provide videos of their talks after the event has ended, some do even stream live to pass on their knowledge even if you couldn’t attend.
The videos collected in this round-up revive the spirit of the conferences they were recorded at and cater for a lot of fresh insights and light-bulb moments to make the learning never stop. As a very special goodie, we’re very pleased to also feature the live stream of this year’s Build 2016 Conference, taking place at the Moscone Center in San Francisco, CA, right here on Smashing.
The post Never Stop Learning With Conference Live Streams And Videos appeared first on Smashing Magazine.
 |
There are reasons you’re still saying the same thing after all these years — still talking about how it always seems like design gets tacked on to the end of the process. You should be at the concept meeting, you say, where you can make a real difference.
I’ve been hearing it for 15 years. I once had a job where I got to say it myself a few times. I got tired of that pretty quickly. I don’t say it anymore. You shouldn’t either. Primarily because it’s not true.
The post Hey Designers: Stop Being An Afterthought appeared first on Smashing Magazine.
Powered by WhatsApp Chat
