229 private links
Write like a human: "Monzo’s approach here is so action-focused, in fact, that you’d be forgiven for not recognising it as an error at all: you'll need your phone for that."
Ask yourself:
- would this message still work for someone having a bad day?
- could this language trivialise the issue?
- are we helping users get unstuck, or just showing off?
Use active voice:
We couldn’t process your application because the file type you’ve attached isn’t supported. Please re-attach the file as a jpeg and try again.
The active voices tells us who is doing what, while the passive voice is ambiguous.
Give a clear way forward: for errors a user can fix, we should clearly state what they need to do.
- Check that your card details are correct, or try a different payment method
- Enter your name
When we handle errors with care, clarity and empathy, we not only help users move forward, we show that we value their time, their goals and their experience.
Similar to previous shaares I stored
- . 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.
- 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”
Names are changing and diverse. They are so different that a validator for them seems irrelevant.
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.
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.