Criticism of form over function is a tale as old as time. People line up to criticize Frank Lloyd Wright, as Regina Cole wrote:

His roofs were improperly supported, they say. His buildings leak. They waste energy, are maintenance nightmares, have no garages, inadequate closets and as for the kitchens…

Makes you wonder what the development parallel is. I think it’s adding Kubernetes to the stack of a startup that hasn’t established product market fit yet.

By “linear design process” I mean cookie-cutter case studies that always read the same. The designer learned about a problem, conducted user interviews, created user personas, proceeded to sketches, then mockups and wireframes, made everything beautiful through visual design, created a prototype, and tested it with five users. Everything was perfect so they also created a design system which is not a design system but a style guide. But they call it a “design system” because it’s trendy and a keyword for the recruiters. 

🌶️. I take the point: it feels fake and easy to see through. A real project is never this clean. The process is more like a squiggle.

Poking around big job posting sites, I do see it around used like this a bit (nice!) but it’s a more common term in the not-terribly-related field of mechanical engineering. I wouldn’t hate it to see it as “Web Design Engineer” when used officially.

Maggie Appleton has curated a bunch of writing, and just as interesting, a group of actual people who typify the role and examples of their work.

Design engineer captures something simple, important, and worth distinguishing: a person who sits squarely at the intersection of design and engineering, and works to bridge the gap between them.

I feel compelled to say that the kind of design engineering examples on display are what I see heaps of on CodePen every day.

You’re given a design with a note: the dividing line between these two containers should be interactive so the user can drag to resize the respective containers on either side.

Maybe you’re picking up on this around here, but I’m pretty big on asking all the right questions as an important part of your journey to “senior” in any role. With this small design note (or mockup), there are definitely going to be questions.

• Does the interaction have a resize affordance?
• How does it happen (e.g. on mouse in or mouse down)?
• When does it happen (e.g. immediately or on a delay)?
• Where does it happen? Directly on the line itself, or in a target area? How big is the target?
• Is there some kind of snapping involved?

Maybe you answer them yourself, but you’re thinking about them. In this case, in order to ask and answer these questions, you need someone who is saavy in design/UX and coding.

Perhaps one of the most cliché introductory things to build on the web (or otherwise), is a to-do app. But we’re going to do it again, as a website, and for good reason: it’s the perfect scope. A to-do app is fairly simple, adding and removing short bits of text forming a list. But it’s not too simple. It requires us to think about all sorts of things. While we’re ultimately going to care about coxre web development technologies like HTML & CSS, we’re going to choose to layer in JavaScript to help with user experience and data handling, and then see what other technology we might find helpful along the way, if any.

We’ll call our project TODO. Don’t sue me. It’s just for learning.

And we’re going to do this thing as a series, so this list of posts will be updated as they are completed.

Prior Art

Marc has already broached this subject on this very blog. Go check out the GitHub repo, where there is a lot of code to explore. Marc went deeper on the JavaScript aspect than we likely will. He tells me:

I added branches for TypeScript support, used lit-html for performant rendering, and an app-architecture branch for how to architect larger apps

There is also an extremely cool project called TodoMVC that was hot’n’heavy around 2012-2016. The purpose of it was comparing different approaches of a to-do app created using different JavaScript frameworks and vanilla approaches.

TodoMVC is useful for comparing syntax and solutions, is officially used in cross-browser benchmarks.

It was/is useful in helping people decide things like “Do I like the Angular approach or the React approach?”, for example. People could decide by looking at the actual code as well as seeing/feeling the output. We might fiddle with those ideas a little, but we’ll be focusing more on the thinking and experience of building and leaning toward vanilla code.

There are no wrong answers

We’re going to take an intentionally wordy trip through this project. We’re going to think about lots of different aspects of product development and web design and development. We’re going to do it in a certain order and land on certain choices.

If you were going to build a to-do app of your own, you might think about things differently. You might make different choices. You might do these things in a different order than I’m doing them. I think there is a rhyme and reason to the path I’ll write about, but that doesn’t make yours wrong. In fact, I think finding your own way is a great way to learn, and probably what you’d do anyway regardless of anything you read.

So unless what you build is broken or inaccessible, there is no wrong way.

Design: Thinking First

I like putting design first, design-driven development as it were, and here’s why. Design forces you to think about your app more holistically than you might otherwise.

When I started thinking about this idea, admittedly, I started poking around at JavaScript right away, putting some basic HTML together the JavaScript could work with. I was having fun reminding myself how powerful native web tech has become and how much we can do without reaching for anything else at all. But then things started to feel sloppy as I realized I was just randomly poking at things rather than have any actual plan. Sure, I could add new to-do items to a list, then remove them. But oh yeah I need to display the list from saved data. And then what else? Can you re-order them? Can you edit them? Can you delete multiple at once? That’s just scratching the surface. Design allows you to take a beat, stop thinking about implementations, and think of a plan first.

A Look Around

There is no shortage of to-do apps. It’s not like we wouldn’t be able to piece it together with our own thoughts of what should be in an app like this, but don’t let that confidence fool you! It’s always worth a look around to see how other apps are doing things, particularly successful ones because those in particular help establish the genre and set user expectations.

Here’s a quick walk through some to-do apps I happen to know about. Seriously, quick. These are very surface-level observations, nothing deep.

Things

Things is the to-do app that I’m most familiar with. It’s a native app, as opposed to the web like we’re doing, but that doesn’t stop us from looking at the UI and UX.

Notice they don’t go very heavy at all on UI for adding new items. A tiny + on the desktop app and a blue (+) on the mobile apps. The emphasis is more on knowing that Command-N will do the trick. I do enjoy the little feature that you can drag the mobile (+) where you want it before adding a new item. Notably, you add a new item before you add any text or information to the item. Metadata is pretty limited, preferring that you group things in various ways (areas, projects, headings), although there is things like tags if you want them. If any metadata is emphasized, it is due dates.

Todoist

Todoist actually is web-based, so that’s nice to see (hey, you get multi-platform for free!).

More metadata is exposed here. Tasks have a description which you automatically some of is interesting. Plus tags, plus due dates, plus collapsible groups.

Notice that adding a new task is also relatively chill. Unlike Things, pressing the + Add task button doesn’t automatically create a new task, but instead expands into a fleshed out task adder:

The task name is the only required thing, which makes sense. It would be obnoxious if anything else was. It feels like a reasonable choice to allow you to add all this metadata immediately, but certainly not the only path. They could do it such that you add the task first, then optionally add more to it if desired as an optional next step if you wanted.

TeuxDeux

TeuxDeux is big on having you put to-do items on individual days, although you can customize it if you want to. Having this kind of initially opinionated structure will have a huge influence on how people think about your app.

Notice there is almost no UI for adding new items. The way it works is that the next item in each column is automatically a live input, waiting for you get into it and add text. The extremely narrow item widths will also encourage you to get to the point darn quickly. You can see the markdown come through with the editing toolbar (Things also does Markdown, but only in the body of the description, which is hidden until opening an individual item.)

TodoMVC

This is the standard design as part of that TodoMVC project I mentioned (example). This is fun, as it’s quite intentionally minimal.

Note there is no submit/add button for new items, which weirds me out a little bit on the web. I’d say this then entirely relies on the submit even from the <form>, but in this case there is no <form> (?!), which then not only requires JavaScript but more JavaScript as they can’t just use that native event. It’s likely our app will require JavaScript as well, at least at first, as adding a backend language might be a trip too far for this series (but we’ll see, if y’all love it, lemme know).

Here we’re seeing implied categories based on completion (and a way to delete the cleared items as well). Plus a count. Plus the ability to double-click to edit. That editablity feels like a significant thing to think about. Does that double-click feel right or should you just be able to click in there? Native operating systems have a click-and-linger approach to name editing sometimes. You could certainly offer an “Edit” button (Pencil icon?) as well, but anything you add to every item is going is a risk of visual clutter. Reveal it on focus? Maybe there will be enough items to warrant a sub-menu? We’ll have to see.

Initial Features

There is no way we’re going to be as robust as some of these apps who have been working on their feature set for years and years. Let’s call it like this:

1. Let’s emphasize the simple text input. Let’s see how easy we can make it to add a new item to one big single list.
2. Let’s also emphasize the Add/+ button. Not only does it lean into HTML and accessibility correctness, but we can also make it part of our branding. Maybe we can borrow the Things approach of draggability someday.
3. Just one big list for now, but let’s think extensibility when we store our data. It shouldn’t be a stretch to add multiple lists, tags, descriptions, or anything else.
4. Add and Complete are the primary actions. For now, let’s borrow TodoMVC’s approach of double-click to edit unless we find something we like better while building.
5. Let’s try and make drag-to-reorder happen.

Very basic.

Of course, we’d love to add user accounts, Markdown support, due dates, tagging, an API, bulk actions, recurring items, and who knows?? AI helpers? Integrations? If you absolutely knew that these features needed to be there for day one, then they should be part of the design process from day one. For us, not so much, so we’ll keep things simple and trim and build that first.

It’s fun to think about though! Heck, a to-do app, as simple as it seems at first, might be just as complicated or more than an app in just about any other genre.

Design

Knowing what a trim feature set we have, I’ll Figma something up real quick. Half an hour later, here we are.

This artifact is a little useful. We can reference colors. We can be relatively sure we’ve represented what we wanted there for day one. But mostly, this forced us to actually think about all that before our greedy little fingers started coding.

We’ll code better if we more clearly know where we’re going.

Working design-first also frees up your mind, I find, to think more creatively. Personally, I’m happy to drag things around weird places. Pick weird colors. Make things humungous or tiny. Explore totally different icons. All sorts of stuff like that that I just know I’m much less apt to do once I’m actually coding. For lack of a better metaphore, a left brain / right brain thing. As you get to know how you work best and most creatively, you’ll have your own tricks.

See ya next time!

So, let’s look beyond the hype and instead look at how AI can help with the subject of my course on creating high-converting websites. Can AI help us produce more compelling landing pages and websites while saving us time?

And no, we’re not delving into those AI startups promising to whip up the perfect landing page at the click of a button. Instead, we’ll explore how AI-powered tools can inform and enhance the design process I have shared with you before.

Empowering Your User Research with AI

As I say in my course on creating high-converting websites, user research is fundamental to success. It’s a crucial step to understand who your audience is, what they want, and why they might not follow through with your call to action. For instance, I suggest in my course that you employ exit intent surveys to gather insights on user behavior. These surveys pop up when a user is about to leave the webpage without completing the intended action, asking questions like, “Why didn’t you make a purchase today?” or “What information was missing that prevented you from signing up?” The answers serve as a treasure trove of insights to refine and optimize your landing page.

Exit intent surveys are a great way to identify why someone hasn’t taken action on an existing landing page or website.

However, sifting through these survey results can be daunting and time-consuming, particularly when you’re dealing with a mountain of data. This is where AI steps in as a game-changer. AI algorithms, particularly Natural Language Processing (NLP) techniques, can speedily analyze survey results, spot patterns, and highlight recurring themes. These tools can process volumes of data far beyond human capability, accomplishing in seconds what might take us hours or even days.

Sentiment analysis, for example, gauges the emotional tone behind words, helping you discern whether users leave your site in frustration or confusion. Topic modeling identifies common themes that keep surfacing in the responses, allowing you to target specific areas of your landing page for improvement.

Best of all, you don’t need an expensive tool to perform this kind of analysis. A free account with Chat GPT is sufficient to get started.

Imagine you’ve conducted an exit intent survey and want AI to help analyze the results. You can export your results into a CSV file and use the following prompt within Chat GPT.

I am going to provide you with data containing the results of an exit intent survey on a landing page. Once you receive the data, identify the main reasons users did not complete the call to action, highlight any recurring themes, and determine the overall sentiment of the responses. Are you ready for the data?

With prompts like this, the AI takes on the heavy lifting of data analysis, freeing you to focus on using these insights to craft an irresistible landing page. This process begins with a well-articulated value proposition.

Articulating Your Value Proposition with AI

In my workshop, I introduce the importance of having a clear value proposition. It is vital in creating any high-converting website or landing page. The unique blend of elements sets your product or service apart from the competition, compelling visitors to stay, learn more, and ultimately convert. A captivating value proposition usually consists of a headline (or strapline), a series of benefits tailored to your target audience, and unique features your product or service offers.

While the features of your offering may be clear, articulating the benefits and crafting a compelling strapline can be challenging. With its knack for generating creative and targeted content, this is where AI can lend a hand. AI can suggest straplines and propose benefits. Let’s delve into how this works.

The Frontend Masters homepage features a strapline emphasizing the benefits of signing up for their service.

Straplines

A compelling strapline should be concise, clear, and impactful. It’s your chance to communicate your product’s unique value quickly. AI can assist in this process by generating a variety of options for you to pick or refine.

Consider using a prompt like this:

Create a strapline for a cloud-based project management tool designed for remote teams.

AI might whip up something like “Empower Team Collaboration from Anywhere” or “Elevate Your Projects to the Cloud.”

I often ask AI to conjure up a dozen or more options, giving me the freedom to select the one that resonates most with the brand and audience.

Benefits

Identifying the key benefits your product or service offers to your target audience is crucial. AI can aid in brainstorming these benefits, considering various facets of your product or service.

For instance, you could ask:

What are the key benefits of a cloud-based project management tool designed for remote teams?

AI might suggest benefits like “Synchronize Collaboration Across Time Zones” or “Integrate Tasks, Schedules, and Communication Seamlessly.”

This AI-powered brainstorming can be a lifesaver, particularly when you’re missing guidance from colleagues or clients on what should appear on the landing page.

Too often, we resort to creating mockups with lorem ipsum text when we could be using a tool like Chat GPT to produce meaningful content for stakeholders to review and refine.

The benefits of a tool like Chat GPT extend beyond your value proposition. It can also be a valuable ally in creating compelling, on-brand copy, which can enhance the conversion potential of your landing page.

Leverage AI to Produce Engaging, Brand-Aligned Copy

When writing or managing stakeholder-provided copy, AI can prove to be an invaluable ally. Often, the copy we receive is verbose – it’s lengthy, dense, and challenging to decipher, especially when written by stakeholders who aren’t professional writers.

On the other hand, effective landing page copy should be brief, easily skimmed, and written at a lower reading level to ensure comprehension and retention.

Ideally, we would hire a professional copywriter to help us create relevant copy. However, this often doesn’t happen due to various constraints.

As a result, we may end up resorting to using lorem ipsum. However, this can negatively impact the conversion rate because the copy and final design won’t work together. Fortunately, AI can help us in this regard too.

In my conversion workshop, I explain that the best strategy for landing page copy is to compartmentalize our copy into distinct content blocks, each comprising a heading, a brief description, and an optional link for more information.

Content blocks help users scan, comprehend, and retain information on your landing pages.

If you’re dealing with copy provided by stakeholders, AI can assist in identifying the essential themes, which can then be converted into these content blocks. You may use a prompt like this:

Summarize the key themes or talking points found in the following copy, and create a 2-4 word headline for each. The objective is to encapsulate the theme and spur the reader to explore further.

Subsequently, we can employ AI to expand on those talking points with a description, referring to the original copy when necessary:

Now, for each identified talking point, compose a concise description no longer than 165 characters. When possible, reference the original copy provided. Restrict the reading level to 9th grade or below.

If you’re starting with a blank canvas, without stakeholder copy, you can use a similar strategy to enhance the value proposition initially created by AI.

If you provide an AI tool like Chat GPT with a list of benefits or features, you can instruct it to generate headings and descriptions for each. After feeding Chat GPT your list of benefits and features, utilize this prompt:

For each of the provided benefits and features, write a concise headline (2-4 words) encapsulating the benefit or feature. Also, compose a brief description of no more than 165 characters. Restrict the reading level to 9th grade or below. Ensure the copy is as persuasive as possible, while sidestepping marketing clichés. The objective is to motivate users to take action.

Once your list of content blocks is assembled, complete with their headings and descriptions, we can then use AI to create relevant images for each.

Enhance Your Visuals Using AI

In my workshop on conversion optimization, I explain how the wrong image can cause users to focus in the wrong place, missing critical messaging that would improve conversion.

However, finding the perfect images can often feel like a daunting task. You need to identify the type of imagery that best encapsulates your talking points and then see the exact image that embodies this concept and guides the user’s attention.

Sifting through an endless array of pictures to find the right subject, color scheme, and focal point can be a draining process.

Fortunately, AI tools such as Midjourney or Leonardo.Ai can offer immense relief in this regard. These tools have the capability to generate images based on your exact requirements, greatly reducing the time and effort you’d otherwise spend.

While Midjourney may produce better images, Leonardo offers greater control and a better user interface.

But let’s begin with Chat GPT, which can help suggest prompts to generate ideas for potential images. An example prompt could be:

For each of the headings and descriptions you created earlier, suggest a prompt for an image that represents the theme of the copy. This prompt will be used with a tool like Midjourney.

Following this instruction, Chat GPT will provide a variety of image concepts that can be used as starting points for Midjourney or Leonardo.ai.

What’s more, you can infuse these prompts with your own artistic direction. Suppose Chat GPT suggested an image prompt of “A portrait of an adorable puppy gazing at the camera.” If your goal is to direct the reader’s attention towards copy to the left, you could alter the prompt to “A portrait of an adorable puppy looking left.”

You can even incorporate specific style and color palette requirements to align with your brand identity. For instance: “A portrait of an adorable puppy looking left. Plain purple backdrop. Photo-realistic. Shallow depth of field.”

Perhaps the most impressive feature of these AI tools is the ability to apply what’s known as a ‘Seed parameter’ to your prompts. This ensures all your images share a similar aesthetic, a considerable advantage since finding a set of images that meet your criteria and maintain a consistent look and feel is virtually impossible with traditional stock libraries.

This process should yield a far more captivating visual design where you maintain a high level of control over where people focus. But, even with these AI-assisted visuals, it’s crucial to verify their effectiveness – and once again, AI can lend a hand.

Validate Your Design Through AI

Design validation typically involves answering two critical questions: Does the design evoke the desired emotions in users, and are users focusing on the content we want them to see?

Although extensive semantic differential surveys and eye-tracking studies are often desirable, time constraints may render these methods unfeasible. However, as I point out in my workshop, AI offers us a convenient alternative. While it might not be as comprehensive as in-depth testing, it can provide a helpful sanity check.

Our first step is to conduct a survey where we simply present the design to users and ask for their impressions. As we did with our user research survey, we can then use Chat GPT to identify themes and sentiments within the responses, assessing whether they align with our intended outcomes.

Secondly, we can use an AI tool called Attention Insights. This tool simulates an eye-tracking study, predicting where people will focus when viewing a page. While it may not be as accurate as a real eye-tracking study (with an accuracy of 90%-96%), it’s more than capable of providing insightful guidance.

Attention Insights can predict where people will look on a page with 90%-96% accuracy.

We can iterate on our design using the information garnered from these AI tools. And if you find yourself stuck on improving things, don’t hesitate to call Chat GPT for some creative inspiration! The AI’s ability to generate a wide array of ideas can be a precious resource when seeking fresh perspectives.

Embracing AI’s Untapped Potential

As we stand on the brink of a new era in AI-driven design, it is intriguing to ponder how technology might shape the future of landing page creation and conversion optimization more generally.

While the fundamentals discussed in my workshop on creating high-converting websites will never change, AI opens up possibilities to further enhance these techniques.

Personalization: AI can potentially offer an unprecedented level of personalization to landing pages. AI can customize the page in real-time to appeal to each unique visitor by analyzing a user’s past behaviors, preferences, and interactions. This could involve tailoring headlines, images, and calls to action to cater to the user’s specific needs and interests, resulting in a truly personalized experience that could lead to increased conversion rates.

Automated A/B Testing: Currently, A/B testing is a manual process where marketers create different versions of a landing page and then measure which one performs better. In the future, AI could automate this process. It could simultaneously create and test numerous page variations, analyzing the results in real-time to optimize the page for the highest conversion rate.

Chatbots and Virtual Assistants: AI-powered chatbots and virtual assistants can offer immediate, personalized assistance to users visiting a landing page. They can answer queries, provide recommendations, or guide users through the conversion process, significantly enhancing the user experience and potentially boosting conversions. I am already trialing this on my personal website.

Predictive Analytics: AI can extend beyond analyzing past and present data to predict future user behavior. This could involve predicting what kind of content a user might be interested in or what kind of offer might prompt them to convert. These predictive insights could then be used to design landing pages that are reactive and proactive in guiding the user journey.

In conclusion, the potential of AI in landing page design is immense, and we’re only beginning to explore it. However, it’s essential to remember that AI is a tool—an aid in our quest to craft compelling, conversion-optimizing landing pages. It doesn’t replace human designers’ and marketers’ creativity, intuition, and understanding. Instead, it bolsters our abilities, helping us to work smarter and more efficiently.

The future of AI in design is exciting, and it’s not something to be afraid of. Instead, it’s a new resource in our toolkit. While some people may fear AI will take their jobs, it’s unlikely. However, someone with more experience using AI may have a competitive advantage.

Using AI can provide a competitive advantage to help advance your career or build a reputation if you’re a freelancer or agency.

Do you ever feel like the web has turned into Mos Eisley, “a wretched hive of scum and villainy”? A place where anything goes as companies attempt to persuade us to click, download or buy.

The web seems full of deceptive design patterns that use psychology to manipulate people into handing over personal information (also known as “dark patterns”), buy things they do not want or need and become addicted to an endless stream of ad-supported clickbait.

As digital professionals, we often find ourselves caught in the middle of this battle for the integrity of the web, yet our pleas of “will no one think of users” fall on deaf ears.

In this article, I want to help you make the case against deceptive design and provide you with more ethical alternatives that are ultimately better for everybody.

But before we get to that, let’s start by defining what we mean by deceptive design.

What Are Dark Patterns and Deceptive Design?

In my book Click, I define deceptive design (also often known as dark patterns) as: “User interface elements that have been carefully crafted to trick users into doing things they might not otherwise do, often using psychological manipulation.”

The critical word there is “trick.” Not every annoying tactic used online is a deceptive design or a dark pattern. For example, popup overlays can be annoying, but they are not necessarily deceptive. Too often, dark patterns are used as a catchall for all annoying website characteristics, but when you go down that road, it becomes harder to argue against them.

Popup modals may be annoying, but they are not always dark patterns or deceptive.

So, for the sake of this article, I want to focus purely on manipulative tactics, not simply annoying ones.

No doubt you have experienced these kinds of techniques yourself. For example, maybe you have been warned that only one item is in stock to illicit a fear of missing out if you do not act. Or perhaps you have had a company add something automatically to your cart in the hopes you do not notice. Then there is the classic technique of making it ridiculously complicated to unsubscribe, so we give up. The list goes on.

What all of these techniques share is that they use some element of human psychology against us. They rely on us being too afraid, too lazy, or too unobservant. That is what makes these techniques so unethical.

The Business Case Against Deceptive Design

Unfortunately, arguing that deceptive design is unethical is not enough. There are no shortage of articles online deriding dark patterns and deceptive design as unethical. However, this approach is fundamentally flawed.

I am in no way suggesting that deceptive design is not unethical. It absolutely is. I am merely saying it is not an adequate argument to stop people from using these techniques.

The problem with the ethical argument is twofold. First, accusing a colleague of being unethical will likely anger them and make them defensive. Confrontation is rarely the way to achieve change.

Second, when somebody is under pressure to meet a business target, they can justify almost any behavior to save their job. The truth is that most of those who use deceptive design do so because they know it will deliver the results they need, not because they like to screw other people over. Deceptive design is driven by desperation in most cases.

With that in mind, there are two strategies for combatting deceptive design:

• to demonstrate that deceptive design causes more damage than it helps,
• to offer tangible alternatives.

Let’s begin with the argument that deceptive design is ultimately damaging. That begins with the reality that consumers are much savvier than many think.

Consumers Are Cynical, Savvy, and Spoilt for Choice

Let’s be clear; deceptive design works. As a result, many who adopt these practices presume people must be oblivious to them. If people are aware they are being manipulated, they reason, they would not act.

In reality, it is not that simple. Time and again in usability testing, I see users complain about deceptive design practices. They moan about sites attempting to manipulate them and claim they simply ignore their attempts.

In usability testing I have run on booking.com, users claimed to ignore the urgency the site creates. However, in reality, these do improve conversion.

The problem is that users may think they ignore these techniques, but subconsciously they still influence behavior, meaning that ultimately deceptive design techniques do improve conversion.

All of this means that dark patterns work, but they alienate people, and that is dangerous because consumers are spoilt for choice and tend to avoid companies that use them.

Whether they switch supplier or not, they are still likely to complain, and those complaints have a real impact.

Complaints about Deceptive Design Have a Real Impact

The internet has changed the dynamic between a company and a supplier. In the past, there was little a consumer could do when a company mistreated them. However, today a single customer can badly damage a brand.

There are many stories of customers who caused such a fuss after having a bad experience that it turned into a major PR headache for the company involved, and when customers unite, it gets even worse.

Then, of course, there are also review sites that are major influencers in people’s buying decisions.

All of this is to say that if customers are unhappy because you tried to deceive them (even if you succeeded in doing so), it is likely to influence how your brand is seen in the marketplace.

In fact, complaints about deceptive design techniques online are becoming so prevalent that increasingly governments are intervening.

From subscription services that make it hard to unsubscribe, to hotel booking sites that use deceptive techniques, government bodies are increasingly legislating against and pursuing those who use dark patterns.

So even if a deceptive design technique works today, there is no guarantee it will continue to be so as governments intervene. And it is never wise to build your business practices on anything that may be untenable in the future.

However, probably the biggest argument against deceptive design is nothing to do with the consumer and everything to do with the cost to the business.

Deceptive Design Techniques Have Hidden Costs

Unhappy customers can often prove expensive. For example, if they have bought a physical product, there can be significant costs involved if they want a refund. Unfortunately, these costs are often hidden by poor internal communication.

I once worked with a company that sold consumer electronics. Their biggest seller was a kettle that included a water filter to avoid limescale build-up that would damage the kettle and affect the taste.

The kettle was the most popular item, but people weren’t buying the filters (which needed replacing regularly) either because they didn’t want to, didn’t realize they had to or were buying “non-brand” versions for less.

The company decided to automatically add filters to people’s shopping carts when they selected the kettle without notifying them. This is a classic dark pattern and one that most people will miss unless they are paying attention.

Sure enough, the number of filters sold shot up considerably, and the ecommerce team responsible for sales went away happy.

However, elsewhere in the company, things were not so rosy.

The customer service team saw a significant increase in complaints that needed to be handled, costing the company in person-hours and communication costs.

Unsurprisingly many customers wanted refunds which cost the company postage, processing, and restocking.

In short, the fallout almost eliminated the additional profits from this deceptive design technique. A fact that didn’t come to light until I got involved and thought to ask the customer services and returns teams.

So although dark patterns can appear profitable on the surface, they rarely are because of the internal costs they generate and the damage they do to brand identity. Damage that has to be offset by increased marketing spending.

But telling your colleagues this isn’t always going to be enough if you don’t give them an alternative. If they are under pressure to hit a target, they may decide to ignore future PR problems or costs that will impact other teams.

To really change their minds, you need to offer them an alternative.

4 Alternatives That Are More Effective Than Dark Patterns

Fortunately, not only are there alternatives, these often turn out to be more effective in the long-term and actually improve how people perceive your brand. In addition, they are techniques that, in many cases, benefit the customer and help you stand out from the competition.

There are far too many of these techniques to get into here, so I want to focus on the four that, in my experience, have the biggest impact. For more on these techniques and to discover others, you may wish to watch my course on Frontend Masters entitled “Web UX Design for High Converting Websites.”

That said, let’s dive in with one of the most significant ways to increase your conversion rate, reducing people’s cognitive load.

Reduce People’s Cognitive Load

Cognitive load refers to the fact that we can be easily overwhelmed and that when we are, it causes all kinds of issues.

When people are overwhelmed, they fail to spot critical messaging, are significantly more likely to abandon a site, and often describe the experience as hard work or frustrating.

However, even more interesting is that when people are overwhelmed, they become more distrustful and are less likely to act on a website.

If we can keep people’s cognitive load low and avoid them becoming overwhelmed, it will likely lead to higher conversion and improved customer perceptions. In other words, it has all the benefits of a dark pattern (higher conversion) without the downsides (negative brand perception).

So how do we minimize people’s cognitive load? Well, the answer lies simply in applying sound design principles.

High cognitive load is caused by an inconsistent user interface, too much information vying for attention, and unexpected behavior. However, these problems can be addressed by simply sticking to design fundamentals.

At the most basic level, it comes down to removing clutter and being consistent in how your user interface behaves.

However, one other element that can lead to a high cognitive load is a person’s mood. The more negative the mood, the higher their cognitive load and the more mistakes they will make.

Anything we can do to improve a user’s mood will ultimately lead to lower cognitive load and improvements in conversion. This could be as small as adding humor to the user experience or as big as giving the user a free gift.

Whatever technique you use, putting somebody in a good mood not only reduces cognitive load, it also builds trust.

Establish Trust and Overcome Cynicism

Trust is critical in encouraging people to act, whether you want them to give you their email address or spend money on your ecommerce site. If people don’t trust you, they will not act.

That is why, according to research by Adobe, 71% of customers say they are more likely to purchase from a company they trust, and 61% say they are more likely to recommend that company to others.

Unfortunately, people are becoming less trustful primarily because of all the manipulative techniques companies use.

Fortunately, we can do a lot to build trust, and by far, the biggest tool in our arsenal is social proof.

Knowing whether to trust a website or not is hard to work out. So instead, people tend to rely on the opinions of others, even if they do not know that person.

Social proof provides those independent perspectives through testimonials, ratings, reviews, and expert opinions. In other words, instead of you saying how great you are, you let others do it on your behalf.

The problem is that people are becoming increasingly cynical about social proof. They don’t trust ratings, reviews, or testimonials as genuine. They are even suspicious of awards and certifications when they come from organizations they do not know.

We need to back up our social proof with evidence to combat this problem. Typically this will involve linking to an independent source.

Websites are increasingly using third-party review sites like Trust Pilot or linking back to testimonials shared on social media. This helps people reassure themselves that these sources are trustworthy.

Another alternative is to record video testimonials of people over Zoom, allowing users to see that the testimonial is from a real person and not made up. The quality doesn’t need to be great, as highly polished professional videos actually make it appear less trustworthy.

Not that users rely solely on the opinions of others before deciding to act. Users will need answers to the majority of their questions to reassure themselves that any concerns they have are unjustified.

Address People’s Objections and Questions

I am amazed at how many websites are created from the wrong premise.

Organizations start by asking themselves what they would like to tell their audience rather than asking what their audience wants to know. The result is a website full of self-congratulatory copy that does nothing to answer the customers’ questions.

If you want people to act on your website, you must answer any questions they have and address any concerns they harbor.

I am currently working with a company that sells network monitoring software. Their website does not mention the price because it is complicated to work out as it depends on the number of devices on the network.

Unfortunately, price is the number one thing the audience wants to know. To make matters worse, because this question is not addressed on the site, users assume it must be expensive and, therefore, out of their price range.

Failing to answer the question is frustrating for users and leads them to false presumptions.

However, worse than failing to answer the questions of your audience is a failure to address their objections.

Whether a user worries about how you will use their data or about your organization’s ability to deliver, they will not act without being reassured.

Despite this, many organizations choose not to address potential objections for fear of planting the idea in the mind of consumers.

Although there is some validity in this, you can address an objection without overly raising the objection. For example, the Mcdonald’s website mentions that they only use chicken breast. They don’t say that many customers have concerns about what goes into a chicken nugget.

So instead of falling back on some deceptive design gimmick, you will see far more success simply addressing the user’s questions and objections.

In my 27 years working in conversion optimization, simply answering user questions has consistently brought exceptional results. However, there is one last technique that might even trump that.

Save People Time

According to research by Microsoft, we have approximately 8 seconds to encourage users to stay on a webpage. That is because, in most cases, users’ most precious commodity is not money but time.

With so many options and so little time, consumers are brutal in how quickly they will dismiss a website.

If a page does not load fast enough or they cannot instantly find what they are looking for, they will abandon a website. So, if you want to improve your conversion rate, you must save people time at all costs.

A big part of this is simply making your website easy to use. However, probably the most overlooked component is site performance.

The Aberdeen Group discovered a 1-second delay resulted in 11% fewer page views, a 16% decrease in customer satisfaction, and a 7% loss in conversions.

Put another way, if you could shave 1 second off of load time, you could see a 7% increase in sales as well as happier customers. No dark pattern could compete with that.

Unfortunately, many of the techniques we use to try to improve conversion actually have a detrimental impact on performance.

For example, designers favor custom fonts, video backgrounds, Javascript driven animation, and other “design delighters” in the hopes of encouraging users to act.

Although these things have their place, they cannot come at the cost of performance. Performance is too powerful a tool for increasing conversion (not to mention search engine ranking) to ignore.

Happier Customers, More Sales

The advantage of the techniques I have outlined when compared to deceptive design is that they give you higher conversion while also leading to happier customers.

While dark patterns anger and frustrate users, these techniques improve the experience, leading to more word-of-mouth recommendations. Done right, this can lead to a self-sustaining cycle where, unlike dark patterns, you are not reliant on significant advertising spending to drive new customers.

So next time your marketing or ecommerce stakeholder wants to start using dark patterns, hopefully you will be better equipped to point out their flaws and offer them some alternatives.

Next, check out Paul’s course Web UX Design for High Converting Websites and learn to encourage users to act without dark patterns!

~ Frontend Masters Team