As designers, we strive to make the world a better place. Through products, services and experiences, we are largely driven to use our design powers for good. But sometimes, despite our best efforts, we don’t always get it right. In some cases, bad design may be an effort to drive particular behaviour that may not be in the best interests of the user.
As much as design can make life easier, clearer and better, it can also create obstacles, confusion and harmful experiences. Bad design can also harm the relationship a company has with its customers and impact upon brand perception, customer retention and ultimately, the bottom line.
The theme for this year’s World Usability Day is Design for Good or Evil. We’re going to take a look at some examples of bad design and offer up suggestions to change them for the better.
1. Newsletter confirm shaming
What happened: Within moments of arriving on the webpage, a full screen popup appears prompting the user to sign up to what appears to be a newsletter. Three options are presented: sign up, don’t sign up or close the popup via the X in the top right-hand corner (not shown in the above image).
The problem: The opt-out button content of has been designed to make the user feel bad or guilty for not wanting to sign up.
Suggestions for improvement: Rewrite the content to something that is purely focussed on the resulting action of opting-out. Try ‘No thank you’ or ‘Not interested’ instead. The opt-in button content is also potentially confusing as it doesn’t clearly state what will happen and could also be changed to something more action oriented e.g., ‘Sign up’ or ‘Unlock this guide and sign up’.
Also check out this dramatic and somewhat entertaining example of #confirmshaming
Modal on the MyMedic website.
What happened: When the user tries to unsubscribe from an email list on a mobile site, they’re presented with not one but two screens containing content designed to shame and prevent them from completing their task.
The problem: The content, the number of screens, button and link size and placement as well as the lack of contrast in the unsubscribe link. The content is designed to deter people from leaving as they have to repeatedly assert the fact that they do want to leave — this could become quite frustrating. The placement and lack of colour contrast of the unsubscribe links is quite a dark pattern because it’s hard to see and since we’re on mobile for this one, it’s even harder to select the right one when they’re presented like this.
Suggestions for improvement: If a user wants to unsubscribe from an email list, they should be able to. Take it as an opportunity to do some research and find out why they’re leaving. Don’t make participation in your research question compulsory and allow them to unsubscribe — the first time they ask.
3. An online form that tricks the user into buying something
What happened: While transferring funds between bank accounts, the user is presented with paragraph of text accompanied by a checkbox to purchase home and contents insurance.
This is serious #darkpatterns unethical shit by @ICICIBank.— ᴍᴀᴅʜᴜ ᴍᴇɴᴏɴ (@madmanweb) August 7, 2018
Why does a checkbox for buying insurance need to be there on a funds transfer page?
People will just check the box thinking it's a T&C box.
cc: @darkpatterns pic.twitter.com/HDNtVUKnvt
The problem: It looks very similar to a terms and conditions notice for the bank transfer. It’s also in the middle of an online form and it even ends with the phrase ‘I have read, understood & accept the Terms and Conditions’. It is not immediately obvious that the user is purchasing an additional service and even worse — a recurring one!
Suggestions for improvement: Surface this content separately from the online form being used to complete the bank transfer. Since it’s an insurance policy, also include an option to view the Product Disclosure Statement (PDS) so people know exactly what they’re signing up for.
4. No option to unsubscribe
What happened: Unexpected text message appears as a second reminder for the user to book a repeat service with the provider. Previous reminder was delivered (and ignored) months earlier via email.
A screenshot of the SMS app in iOS
The problem: No option to opt-out of receiving this content via text message from this service provider. The persistent messaging and channel switching is also invasive and annoying.
Suggestions for improvement: Include an unsubscribe link or instructions to opt-out of text message communication.
5. Websites that are not accessible
What happened: The website for the Invictus Games held in Sydney last month is not accessible to disabled users accessing it from a computer. The Invictus Games is an international sporting event for wounded, injured and ill servicemen and women.
The problem: Any website that is not accessible to disabled users is a problem. In this case some of the observed accessibility issues included: colour contrast issues in the navigation menu with the white text on a light grey background, only some of the videos included captions, audio descriptions could not be found on the website and some images were missing alt text just to name a few.
Suggestions for improvement: Make accessibility an integral part of your design process and follow the WCAG guidelines. Also, don’t feel like you’ve missed the boat if your current website isn’t accessible — it’s never too late to start.
Here at Optimal Workshop we’re constantly learning and working to improve the accessibility of our tools and website. Accessibility is everyone’s responsibility and earlier this year, we ran an accessibility hackathon with people from across our whole company. Our team dedicated a full day to auditing accessibility issues and designing and implementing solutions. You may have noticed some of the improvements we’ve made through changes to the colour contrast of our text, labels and buttons, as well as the colours we use — just to name a few. Like many organizations, our accessibility journey is ongoing and we’re going to keep listening, learning and improving.
6. Calendar consent issues
What happened: An online learning resource added a recurring undeletable event to a user’s calendar (third party software) without their consent to remind them to renew their service subscription every 3 months for the next 5 years.
What the f**k is this @interacting? You've somehow put an event in my calendar to remind me to resubscribe to your service, appearing every 3 months for the next 5 YEARS, that I cannot delete! Angry doesn't even cover how I'm feeling. So much for user experience. #darkpattern pic.twitter.com/lRTeSJdoEE— Kavan Webb 🤘😝🤘 (@KyloKav) September 12, 2018
The problem: This is a privacy intrusion riddled with consent issues. Even if the user had knowingly agreed to this — it certainly sounds like they didn’t — they should still be able to opt out.
Suggestions for improvement: Communicate with your users through channels that they knowingly consent to and always allow them to opt out.
Evil design doesn’t always happen through evil intent. Design is a process and we’re all on different journeys facing different challenges and constraints. Good design doesn’t happen overnight. As designers, we have a responsibility to ensure that bad design doesn’t happen. We need to design ethically and educate those who are still learning about the impacts of bad design. We need to have the courage to have tough conversations and not be afraid to speak up. We need to keep listening to our users, working together and focussing on how we can continue to create good design that makes life easier and prevent bad design that really doesn’t help any of us.
- Dark Patterns Hall of Shame - A collection of some of the tricks used in websites and apps to get users to submit information or sign up.
- Evil by Design - Examples of various evil designs from around the web.
- Despicable Design — When “Going Evil” is the Perfect Technique - A talk by Jared M. Spool written for UI conference UI22.