Similar to previous shaares I stored

1. . If you look at 99% of all websites in the wild, everybody who worked on them seems to be allergic to semantics and shit. Headings are random levels, loosely based on font-size, Form Fields have no labels, links and buttons are divs.
2. The whole industry doesn't understand semantics and shit.

So when I teach about HTML I always start with the elements that are obviously interactive. I show them the multitude of UX layers of a link.

s and layers of UX that are added to a well considered form. I show them what happens on a phone when you use an input with a default text type instead of the proper type of email.

See the example between a span with an onclick-event and a proper link: the proper link opens a specialised context menu on right-click.

Why "Semantic HTML" fails? There’s no clear UX feature to point at.

First we need to get people exited about HTML by showing all the free yet complex layers of UX you get when you use the interactive elements properly.

You need a good idea of what UX is before you can understand things like the option to nagivate through the headings on the page with a screen reader.

I didn't know the radio button has an "indeterminate state" :o
I am curious about HTML form validation with HTML and clever CSS.

In other words, talks about what HTML does, and much less about what it means in theory. Let’s talk about user experience, and let’s stop talking about semantics and shit.

Bad #UI
experience: I was trying to send a friend some money via #CashApp
, but could not verify my identity. Here’s what their tech support found out:

“...from the documentation you have provided, we see that you have a legal one letter name. While we understand that is the name chosen and legally granted, we regret to inform you that we cannot proceed with the request at this time.”

I sent a response thanking them for figuring out the problem, and I wouldn’t try to get verified -- or use CashApp -- again.

I also sent them the URL for “Falsehoods Programmers Believe about Names”

I.

Most things fail because nobody cares.

II.

Let’s start with what doesn’t work: copying success. Everyone trying to make the next Facebook creates a wasteland of social networks nobody wants.

III

Here’s the core principle: people give a shit about things that meaningfully change their lives.

IV

Solving real problems isn't enough. You also need to solve them in a way that resonates emotionally.

V.

Why didn't someone do it sooner? Because the obvious solution was previously impossible, illegal, or insane.
The sweet spot? When something just became possible, legal, or sane enough to try. That’s why timing matters more than ideas. Being too early is the same as being wrong.

VI.
Communicate why anyone should care. Focus on outcomes.

VII.

Making something people care about often means making something people already care about, just better.

VIII.

The most successful products are often worse in most ways but radically better in one way that matters.

IX.

Sometimes, making something people care about means removing things people hate.

X.

Finally, there’s the hardest truth: you have to give a shit yourself.

XI.
Hit 6/8 (from III. to X.). More is overkill. Less is self-sabotage.

making something people give a shit about doesn’t mean making something perfect. It means creating something meaningfully better in a way that touches people’s lives.

In the end, people don’t care about products, features, or specifications. They give a shit about their lives being better. Everything else is just details.

(XII.)

creating something people give a shit about isn't enough – you have to remember why they gave a shit in the first place.

Example of playbook: https://www.gov.uk/service-manual

What can a playbook contains?

• engage with the digital team: it provides clear guidance.
• digital project lifecycle
• publishing best practices
• help understand the users
• recommends resources
• clarify policies and governance

In order to make the playbook stick, the team has to ensure:

• to make it easy to find
• keep it engaging
• present it as a resource
• share it

Anyways, there’s a real friction between great UX and great security, and I can appreciate a lot of the challenges and compromise required to strike a balance.

The UX is currently hard.

There is often websites that have "bad" UX as listed in the post. The majority starts to have the "better". The "best" does not exist yet.

It's more complicated than initially thought.

On single-purpose pages containing forms.

Such as login, signup, password reset or 2FA pages.

There are some cases to avoid such as a login form with the use of social logins (Google, GitHub, and the like) and you don't know which one they'll use don't add an autofocus.

However, if not well-designed, in-line error messages can become overwhelming. For example, flagging a field as incorrect after just one character can be disruptive, especially if the person filling out the form hasn't finished typing.

There's absolutely no need to shout as users while they are in the process of filling out your form.

"federation" yes, beautiful thing, but you know what? that is what scares normal people. the UX of this thing

The image describes the Mastodon login prompt asking for the user's home server domain with options to take the user home or create an account.

• 3D flow diagram for relationships and connections
• Card Diagram to highlight and select information or data in relation to its surrounding data and information
• Pyramid graph: Being great at showing two categories of information and comparing them horizontally, they are an alternative to typical horizontal or vertical bar graphs.
  Pyramid graph
• Sankey Flow Diagram: show the progression and the journey of information and data and how they are connected in relation to their data value.
• Stream graph: a great way to show the data and how it relates to the other data
• Tree map: It’s a great way to show the data spatially and how the data value relates, in terms of size, to the rest of the data.
• Waterfall chart: showing the data and how it relates in a vertical manner to the range of data values.
• Doughnut chart: show the data against the other data segments, and value within a range of data.
• Lollipop chart: excellent method to demonstrate percentage values that also integrates the label and data value well.
• Bubble Chart: illustrate data values in terms of size and sub-classification in relation to the surrounding data.

When you can, avoid number-only date formats. Sighted users could be confused on whether the first number is the month or day. If you've incorrectly designated your document's language, screen reader users might hear the wrong date. Writing out the month prevents this confusion.

(via https://a11y.info/@WebAxe/112880703997755323)

Use a radio buttons in place in the login form to choose how to sign-in.

Other user flows collection

Think you've found an example of good UX? Take a screenshot and send 'er in! We want to build our library to provide as much inspiration as possible. You can also contact us with questions, concerns, or just to chat.

Specific resources. They seems qualitative

Instead of showing screens, this website collects page flows. It's better to shape UX with complete examples :)

I was against constently creating "friendly, conversational experience" but the rest of the post has great advices.

good error messages explain what has happened or is happening, why (if we know the reason), and what the user should do. Additionally, include any sensitive information related to the process or flow where the error appears. For example, if an error occurs during the payment process, provide users with information concerning their money.

I can also quote all headings