UX & Accessibility checklist for AI-built websites

TL;DR - AI will happily give you a website that looks impressive and behaves terribly. This unit is about the rules your AI needs before it starts building - navigation, motion, contrast, accessibility - so your visitors can actually use what you've made.

Estimated time: ~20 minutes

Outcomes & What you'll make

By the end of this unit you'll understand:

• UX and accessibility principles that AI skips by default
• How to document usability rules so the AI follows them consistently

What you'll make:

• A UX & Accessibility Rules section added to your SITE PLAN.md

In the age of Generative AI, companies try to enchant us with impressive, shiny product demos. You can create videos of elephants that look like watermelons! You can create a website super fast - with glowing 3D globes, cool graphics, gradients and shiny buttons!

OK. Fine. But is that what users need? Is that what will provide your website visitors with the best experience?

We're going to cover some bare essentials in this chapter. If you want to skip this - at least grab the checklist at the bottom before you go.

User Experience (UX) & Accessibility - what AI forgets

Here's the first rule of User Experience design: You are not the user.

There are so many ways to impress users - but an underrated one is to just make a rock solid, functional website that quickly communicates what its meant to communicate. It's boring, but true.

I encounter websites every week now that have been completely AI generated. They often look great, but don't behave as you'd expect - text jumping around, buttons disappearing, too many animations...

The truth is, if your visitor can't figure out your site in the first few seconds, they'll leave. Even if they don't, you don't want to frustrate visitors with an annoying experience. Let's dig into how we can avoid that.

Adding UX & Accessibility to your SITE PLAN.md

TL;DR: There is a checklist you can use at the end for your SITE PLAN.md. But I highly recommend don't skip this segment. (Your site visitors will thank you.)

📄 Go ahead and open up your SITE PLAN.md

1. Make a new "UX & Accessibility" segment in your SITE PLAN.md
2. Create a section for each part below (e.g. Navigation, Animations..)
3. Write down some relevant considerations that apply to your site.
4. Remember - AI will make assumptions if you don't, so even if you don't want animations, it's better to say so than leave it unwritten.

Navigation (Desktop vs. Mobile)

Your website has to work across mobile, tablets and desktop. Navigation usually looks different on these devices.

Do you have many links in the navigation bar of your header?

A so-called hamburger menu is probably right for your mobile site. (It's not the only solution, but most users are familiar with it.)

It's important that users know which page they're on, and to offer them a way back.

Sometimes, a clickable logo to the home page is enough.

Breadcrumbs (e.g. "Home > Blog > Article Title") are very user friendly as well - you've probably seen them!

Make sure you have a solid idea for the mobile vs. desktop view of each page.

Most importantly, don't make your users think too much.

📄 Save your thoughts on Navigation in SITE PLAN.md

Legibility, Color and Contrast

You can score some easy points here.

Basic legibility considerations

1. Ensure text size facilitates a comfortable reading experience.
2. Sans serif fonts are better for reading on mobile, but spice it up with some serif headings, by all means.

Color and contrast

Color and contrast go hand in hand. They ensure users can easily discern the contents of your page.

1. White text on a Light Grey background has poor contrast and makes it very hard to read.
2. Use a contrast checker if you are unsure.
3. Strong contrast isn't always the best. (Pure white text on Pure black can be tiring to read.)

📄 Write down your thoughts about this in SITE PLAN.md

Animations / Motion

Many AI generated websites use complex animations to impress users. But they're often counterproductive - leading users through a maze of elements fading in and out, moving around all over the place.

Great ways to use animations on your website

1. Animations are good for giving users feedback on their actions. (Imagine an error message that gives a little shakey dance.)
2. Thus, animation helps guide attention.
3. Less is more.

Don't make your users sick

1. If you're using animations, use the right amount.
2. Effects like parallax scrolling or rapid movements should only be used sparingly.
3. Some people feel motion sickness when pages shift around too much.
4. Web browsers have a setting called "prefers-reduced-motion", which users can turn on. This is meant to reduce animations on the website - and your AI needs to respect this.

Colors can be animated too!

As an example, consider the dark mode / light mode toggle on my site.

I spent some time finding the right balance for the transition time.

Too fast feels disruptive, and too slow felt... well, too slow.

The end result was a smooth, pleasant experience. So, sometimes animations are good for creating a calm user experience.

📄 Write down your thoughts about animations in SITE PLAN.md

Load speed

This one's a bit technical. But basically - the more fancy stuff you attempt to throw onto the page.. animation libraries, auto-playing videos, high resolution images etc. - the slower your page will load.

You probably don't have to worry too much about it, but it's worth incorporating it as a consideration in your plan - your AI will know what to do.

Other things we take for granted

• Links should look like links. Underlined, a different color, something.
• If your visitor can't tell what's clickable, they won't click it.
• Buttons should look like buttons.
• Forms should tell you when something went wrong. (You don't want to miss any leads, do you?)
• Images should have alt text. A one liner about the image matters for screen readers and SEO alike.

Basic UX rules for your SITE PLAN.md

So - as a baseline, here are some points you can add to your SITE PLAN.md under a new segment "UX & Accessibility rules". Based on what you preference and inspiration, you can of course adapt this to your liking.

This list doesn't incorporate all the learnings from this chapter, and is not exhaustive from a UX/Accessibility perspective. You still have to test your site and see what works.

• Navigation must be clearly visible on both desktop and mobile.
• Body text must be at least 16px on mobile.
• Text contrast must be sufficient
• All images must have descriptive alt text. (Ideally written by the user.)
• Links must be visually distinguishable from body text.
• Buttons must look like buttons.
• If forms are used, error message in case something fails.
• Animations must respect the prefers-reduced-motion flag.
• Avoid auto-playing video or audio. (Unless the user insists)
• Avoid loading large libraries for small effects. (Unless the user insists)

Learning reflections

• You've just translated design knowledge - a creative, visual field - into written instructions an AI can follow. Where else do you work with specialists (developers, photographers, contractors) where that kind of translation skill would be useful?
• Think about a tool, space, or product you use every day. What are its invisible UX rules - the decisions that make it easy or frustrating to use? Could you write them down as a list, the way we just did?
• This course is really about learning to communicate creative intent in a new language. What other technical projects have you been putting off because you assumed you'd need to learn too much first?