I wrote about this in more detail here:

adamsilver.io/blog/the-pe...

Since uploading a file is one of the most labour-intensive things users have to do on the web, reducing all that into clicking ‘Yes’ is next level.

If you have an example of next level UX like this, drop a comment below.

- No transferring it the computer
- No opening up the file browser
- No browsing to the correct folder
- No dragging the photo onto a drop zone
- No file format or size validation errors

He said that instead of asking you to upload a photo, he was asked this:

“We notice that you’ve already got a passport with us. Do you want us to use your passport photo for your driver’s license?”

You just click ‘Yes’ and it’s all done.

- No taking a photo

The best file upload UX doesn't include a file upload at all.

"How do you take design from good to great?"

By doing the hard work to make it simple.

Anthony Hobday gave the perfect example on the Complimentary podcast when he was describing his experience of applying for a driving license.

3. When the design system gets misused, that misuse gets copied.

Bad design is much harder to change than to prevent.

Once it’s out there, other designers use it as precedent to do the same.

Remember:

You can’t colour your way out of a content problem.

1. When everything draws attention, nothing does.

So be highly protective about what you highlight.

Aim for one highlighted thing per screen.

2. Using colour alone is bad design.

Some people are colourblind. And colour alone is ambiguous.

- Different accordion panels had different coloured left borders
- The panel component on the same page had a thick coloured pink border

The designer probably got bored (but rationalised it with “users couldn’t find it”).

But there are 3 problems:

You can't colour your way out of a content problem.

“Design is just stopping other designers from doing stupid sh*t.”

My designer friend sent me this yesterday.

She was trying to convince her team to use the standard design system components.

Because they’d all strayed from the standard:

Just scheduled a newsletter “The perfect file upload pattern”.

It goes out in under an hour.

If you fancy it, you can sign up to my newsletter here:

adamsilver.io/

No, I am saying, if you have a menu that shows on hover, then show it on click.

yes thats the triangle!

But no need to grab cursor position or any of that if you do it on click.

2. It works on mobile/touch devices
3. It’s way easier to use

And it’s way less work to build.

Most designers are seduced by complexity like this.

But good design eliminates complexity at the root.

The fix involves JavaScript that forms a hidden triangle from the cursor position to the corners of the menu.

If your mouse stays inside it, the menu stays open.

Really clever UX.

Except it’s not really.

Just open the menu on click.

This way:

1. There’s no problem to solve

In 2013 I came across a UX tip for designing mega menus.

Most mega menus work on hover.

So you hover and out pops a menu.

But you have to move your mouse perfectly horizontally to enter the menu.

Because if you don’t it disappears.

That’s inefficient and unnatural.

4. It could be confusing - maybe users think they can interact with the butterfly

I’d consider removing signal 6 and rely on signals 2 to 5 instead.

Because you need things to look good to achieve those.

That could look beautiful to someone, but I think it's totally unnecessary and potentially problematic:

1. The animation pulls focus away from the actual task
2. Motion can trigger migraines for some people
3. It goes against signal 2 (slows you down)

The only one I question is signal 6.

For example, to make things “as aesthetically pleasing as possible” you could put a butterfly on the corner of every button.

That butterfly could slowly flap its wings.

Then when you hover, it could take off and fly away.

→ Can the person do what they need to do with the software?

Signal 5: Efficiency

→ Can the person do what they need to do with the software as easily as possible?

Signal 6: Beauty

→ Is the software as aesthetically pleasing as possible?

It’s a great list.

→ Does the software react to input instantly, or as near as practically possible? For those tasks that must take longer, are they as fast as possible?

Signal 3: Clarity

→ Does the person using the software understand everything?

Signal 4: Efficacy

The six signals of quality in software 1. Reliability: Does the software technically perform as expected, all of the time? This means no bugs, no downtime, no errors, and so on. 2. Speed: Does the software react to input instantly, or as near as practically possible? For those tasks that must take longer, are they as fast as possible? 3. Clarity: Does the person using the software understand everything? 4. Efficacy: Can the person do what they need to do with the software? 5. Efficiency: Can the person do what they need to do with the software as easily as possible? 6 Paauty, Te tha coftuaro de docthatically nloscina de noccibla?

The six signals of quality in software - according to UI/UX designer Anthony Hobday:

Signal 1: Reliability

→ Does the software technically perform as expected, all of the time? This means no bugs, no downtime, no errors, and so on.

Signal 2: Speed

“Your button doesn’t look like a button which makes it hard to recognise and use”

“I suggest making it look like a button so that users know it’s a button”

Clear language beats clever language.

It still has affordance.

Users just have no idea about it.

That’s a signifier problem.

That said, I don’t think you need either words in your vocabulary.

Both words are usually unnecessary jargon.

Because you could just say:

But the label, shape, colour and position are what tell users that they can click it.

Those are “signifiers”.

You could have a button with zero signifiers:

- No bounding box
- Looks like regular text
- Positioned badly

That’s bad design.

But it still submits the form.

Avoid using words like "affordance" Firstly, it's probably wrong. Secondly, it's unnecessary.

Most designers use the UX term “affordance” wrong.

For example, they might say:

“The CTA needs better affordance”

But affordance just means what something can do.

A submit button affords submission. That’s it. It only describes the capability.

about time. i had to listen to super old ones that came before I discovered you.

For more info:

adamsilver.io/blog/page-t...

A common mistake is giving every page the same title. Or just using the org/company/website name.

This is far more common than you think, especially with internal enterprise applications.

And that degrades UX across the whole product.

That way the most important information comes first. This helps everyone:

- Screen readers read out the most important information first
- Sighted users see the most important information before the tab truncates it

- Appears in link previews when shared on Slack, for example

99% of the time the first part of the title should match the h1 heading.

For example, if you're looking at your orders on Amazon then the page title should be:

"Your orders - Amazon"

The pattern is: page first, site second.