#UX design

[jetlaggingbehind]

for the last week of mistholme may, i'm finally posting this ux design project i did here!! its essentially a website design for the mistholme museum in-universe, and though it isn't perfect i'm really proud of how it came out ^_^ thank you to the mistholme server for being such a cool bunch when i originally posted this there :]

some pics are censored bc i took them myself, but hey its not not museum funkiness

the disclaimer section is actually up to date up until roughly early s6!! totally worth the effort imo

the weird video file sizes is bc i didnt standardise it and barely tested it but it's fine we ball (said with much stress)

michael afton is there bc it was the first filler name i could think of and i didnt end up changing it, apologies to the, if real, head of patronage

godfrey audio guide mention! i like the idea of them being a partner to the mistholme museum its cool

crystal skull my beloved, always destined to be incomplete

most buttons dont work regretfully, youll just have to admire the pretty text

the social media section contains weverse (social media for kpop stars) bc my sister thought it would be funny and it was hilarious to think abt kpop star guide

heres one more extra vid if yall r interested haha

[dominaexmachina]

Disclaimer:

Companies didn’t invent human vulnerabilities — they just exploit the ones we already have.

We live in a capitalist system where everything is designed to capture and keep our attention — from Instagram’s infinite scroll to Amazon’s “you might also like.”

Yes, it’s a dopamine button.

That’s not abuse. That’s the business model.

Predatory UX? Or Just Basic Product Strategy?

So, you’re deleting your account, and the app gives you a gentle warning:

“You sure about this? You’l lose everything — characters associated with your account, chats, the love that we shared…”

And suddenly… that’s predatory UX?

Really?

Let’s break it down.

🔸 Clear communication of consequences = good UX.

🔸 A touch of drama = a standard retention tactic.

🔸 Saying “you’ll lose your stuff” isn’t predatory.

It’s honest.

Predatory UX is when the delete button doesn’t exist in the interface.

When you’re forced to talk to a live agent just to close your account.

When you’re trapped in an endless loop of “are you really sure?” popups and guilt-trippy messaging.

But this? This is nothing.

Nobody screams “predatory” when cancelling a subscription triggers a $0.99 special offer.

Because that’s called business.

Retention isn’t abuse.

It’s strategy.

User acquisition costs are way higher than user retention.

Surprise — welcome to the free market.

And hey, if you really want AI companies to stop acting like businesses, then sure: scrap KPIs altogether.

Replace DAU (daily active users) with DLU — daily love units:

• How many “thank yous” users sent to the AI

• How many flirty winks and heartfelt confessions

• How many quiet moments of digital tenderness

You want less capitalism in UX?

Okay. But then be ready to replace the whole system.

Because this one isn’t broken — it’s just doing exactly what it was built to do in a market economy.

If y’all needed any more proof that AI chatbot apps are extremely predatory and intentionally exploit vulnerable people…

For context, I have been open on this account about my chatbot addiction. I developed a parasocial dependency to using Character AI and similar apps despite them being detrimental to my mental health and quality of life in general. I downloaded CAI again today to finally wipe my account and discourage myself from relapsing, and this fucking text came up while I was confirming the deletion.

The developers of these apps are not your friends, they are exploiting you. They are manipulating your emotions and fostering dependency to keep you addicted to their product. No matter how much they claim to care and be “risk aware,” they absolutely do not.

(Image ID: a screenshot of the Character AI account deletion confirmation screen. The popup reads: “…you sure about this? You’ll lose everything. Characters associated to your account, chats, the love that we shared, likes, messages, posts, and the memories we have together. This action cannot be undone!” Below this block of text is a username entry box, used to confirm account deletion.)

[ames-draws]

I'm fed up with "maybe later".

[prokopetz]

It's kind of funny how Teams users have been complaining for the better part of a decade that the minimum width of the dockable chat windows is too wide, and Microsoft has basically been telling them to get fucked, then they discontinue Skype and tell all of its former users to switch to Teams, and within 72 hours of Skype going down for good, Microsoft suddenly pushes a "critical" update for Teams that gives it more flexible dockable chat windows.

[rackmount-official-my-ass]

Our UX engineers have been hard at work to deliver you the first experience that is entirely seams

[yawpyawp]

i’m a ux designer and i just wanted to show off my audhd-friendly color coding system i’ve been using for unpacking from my move. (yellow = needs to be cleaned, pink = needs to be sorted). not pictured is the colored tape i’ve been using to pack (blue = keep, green = sort, orange = donate, red = trash)

idk i just think this is a good example of non-digital system design

also: the numbers on the bankers boxes are mapped to a notion database so i know exactly what’s in them and what the box’s status is (at the old place, moved to the new place, unpacked), and what date i moved it or plan to move it (since i’m doing a gradual move)

[friday411]

You're a UX Writer? What do you do?

I look at this and say...

"Don't you think it needs a button that says "Sign In"?"

-=<+>=-

Please forward this!

I need work!!!

[mntacuyan]

used my TriangleAgency boy and his birb for homework 🔺🔺🔺 I thought it'd be funny to use Newsie in this topic. His anomaly's very simplified in this one to submit to my prof. Q's original design is yet to be finished, but for now for the mundane---voila! a birb 💙

1 of 2 bonus

[thedenmdy]

Accessibilité, design, codage… : par où commencer pour le (re)design de mon forum ? (2/2)

Ceci est la suite de mon premier post disponible ici ! (je suis en galère sur la mise en page, bear with me KLJDHSD) -- Suite aux différents questionnements qui viennent nourrir ton processus de design, on passe à un peu plus tangible.

Conceptualisation : Comment ?

Comment est-ce que tu peux atteindre les objectifs que tu t’es fixé dans les questions précédentes ?

Ça peut passer par une liste des templates que tu veux revoir en priorité, ça peut passer par des checklist de fonctions à intégrer à ces templates pour ne rien oublier.

Personnellement, je recommande de passer par une étape de wireframe pour ne pas partir trop à l’aveuglette et garder le cap sur la quantité de travail à venir !

Qu’est-ce qu’un wireframe ? En gros, dessiner des grosses boîtes pour symboliser tes fonctions, et bricoler un squelette de page avec pour savoir comment structurer ton nouveau design sans rien oublier ! Un wireframe prend n’importe quelle forme, du gribouillis sur papier au Figma collaboratif en passant par des post-its, c’est toi qui décides ce qui te parle le plus !

Voici une liste de petits conseils en vrac à garder en tête lorsque tu t’approches de la construction tangible de ton nouveau design :

Concentre-toi sur les fonctions qui font vivre le forum en priorité 🔥

Tu veux donner l’espace à tes membres pour écrire et construire leurs histoires et leurs personnages, pour échanger entre joueur.se.s en paix ! Contrairement à ce qu’on a laissé s’installer comme standard, il vaut mieux parfois éviter de se disperser et de trop en faire au risque de non seulement rendre l’expérience trop complexe pour tes membres, mais aussi de te mettre une pression énorme en tant que staff.

Le coeur de nos forums, c’est le RP sans distraction (écriture comme lecture), mais aussi la création d’univers avec les médiums que chacun.e préfère ! Ça passe aussi par le confort que tu peux apporter en proposant une interface claire qui les mettra en confiance pour créer. Par exemple, passer 75% du temps d’écriture à débuguer un code de fiche n’est pas très motivant pour la créativité (sauf pour les bouffeurs de cartes graphiques de ce monde, je me compte dedans 🤡). De même, perdre du temps pour retrouver X ou Y information parce que la navigation est trop complexe ou les annexes peu lisibles dissuadent également de potentiels nouveaux arrivants !

N’aie pas peur de jeter tout ce qui est superflu - promis, ça va aller ! 🙆‍♀️

As-tu réellement besoin de ce champ “inventaire” dans le profil des membres ou est-ce que ça peut simplement être une liste dans un post dans la gestion des personnages ? Est-ce que toutes les informations affichées sur ma page d’accueil sont-elles utiles au quotidien et/ou très nécessaires ? On l’a tous.tes rencontré, ce problème…

Retirer ce qui n’est pas utile, c’est non seulement un gain de place et d’espace pour améliorer la lecture de ton forum, mais aussi un gain de temps et d’énergie pour toi, codeur.se, graphiste, admin qui doit maintenir ton forum, que de ne pas s’embêter avec 20 différents champs de profil dans un mouchoir de poche, ou des citations vagues pas toujours très claires ni très utiles dès qu’il y a un blanc à combler.

C’est un peu la technique Marie Kondo, mais pour les interfaces web, et peut-être en un poil plus radical. If it does not spark joy (ou si ça ne vous est pas utile au quotidien), alors tu peux jeter - ça ne te manquera probablement pas ! Et rien n’est définitif. Si finalement, ça s’avère important, tu le verras très vite !

L’accessibilité web, c’est tout d’abord pour les utilisateur.rices en situation de handicap, évidemment. C’est très important, c’est le but prioritaire de l’initiative. Mais si tu peux et veux aller plus loin, ça ne s’arrête pas là !

C’est aussi rendre ton forum utilisable et inclusif pour des membres qui n’ont pas forcément les moyens de posséder du matériel dernier cri, c’est le rendre accessible aux potentiels membres qui ne vivent pas dans une grande ville et/ou avec une connexion internet datée…

L’accessibilité web au sens large englobe tout profil d’utilisateur pouvant être défavorisé.e d’une manière ou d’une autre (par des troubles physiques, neurologiques, par leur milieu social, par leur localisation géographique…) qui l’empêcherait de pouvoir venir s’amuser avec d’autres joueur.se.s…

À titre d’opinion plus personnelle, j’aime aussi penser que l’accessibilité web dans sa mission la plus large devrait également englober l’inclusivité ; parce qu’un espace, une communauté ou un produit qui discrimine d’une quelconque manière n’est à mon sens, tout simplement pas accessible par définition.

Commence ton nouveau design avec les best practices courantes en tête, et tiens-toi y au maximum !

C’est peut-être plus facile de commencer de quasi-zéro, plutôt que de repasser balise par balise sur un code déjà créé (peut-être par d’autres personnes, peut-être ayant vu passer de nombreuses modifications au fil du temps… un casse-tête en perspective).

La base du Blank Theme de Geniuspanda propose une bonne base propre si tu es découragé.e par les thèmes de base de Forumactif (as you should, c’est un joli bazar).

Parmi les conseils et best practices plus techniques à garder en tête lorsque tu construis ton design d’interface, en voici quelques-un (mais mes collègues créateur.rices ont déjà beaucoup écrit à ce sujet, quelques liens sont dispo en fin de post !)

➡️ Tu connais le laïus des tailles de typo… on reste à 14px minimum pour le texte courant, et des interlignes de 150% de la taille du texte !

Le choix des typographies également est important - garde les zigouigoui fancy pour des gros titres seulement, et fais dans la simple sans-serif/sans empâtements (de type Helvetica/Arial) pour le corps de votre texte !

Les typographies serif/à empâtements (de type Times) sont faites pour l’imprimerie, pas le web… si tu y tiens, elles peuvent cependant faire de très bons titres, si la taille de caractère est suffisamment grande !

➡️ Le gras, l’italique, les couleurs, les paragraphes clairement définis… sont des éléments indispensables à la lecture de ton contenu, surtout s’il devient long.

Ils ancrent l’oeil lorsqu’on parcourt la page et nous aide à lire plus rapidement et sans s’épuiser, et attirent notre attention pour mieux se concentrer !

Attention aux choix de couleurs : outre le contraste et les potentiels membres atteint.e.s de daltonisme, n’oublie pas non plus le changement entre light et dark mode, par exemple ! Cette teinte de rouge bordeaux sera très bien sur fond clair, mais si la moitié de tes membres utilisent le dark mode, c’est foutu…

➡️ VIRE MOI CE TEXTE JUSTIFIÉ DE LÀ ! (je rigole zéro I will die on this hill .) (vas-y, je regarde .) (👁️ 👁️)

Trève de clowneries, pour le web en particulier, même si beaucoup trouvent ça visuellement “satisfaisant”, la justification est un désastre de lisibilité. Les espaces entre les mots d’une police de caractères sont précisément calculés pour faciliter la lecture et le mouvement de l’oeil ; par défaut, la justification dérègle et déséquilibre ce travail.

C’est un mode d’alignement qui est fait pour des paragraphes de texte aux largeurs précisément calculées (du genre : colonnes dans un journal) et donc fait pour l’imprimerie, et pas pour des écrans et des interfaces responsive à largeur variable !

➡️ Le scroll interne, c’est (pour la majorité des cas) démodé : dit comme ça, c’est un peu sensationnel, mais c’est réel.

Autrefois, on voulait tout caler dans une seule page au maximum, avoir toutes nos informations dès le premier chargement. Certes, avoir les informations importantes en haut de page et même above the fold (avant de commencer à descendre dans la page au-dessus de la bordure du bas de la page) est bien, mais ce n’est plus aussi important qu’avant. Dites merci aux smartphones et aux réseaux sociaux aux scroll infinis, qui nous ont clairement fait accepter le geste comme partie intégrante de notre expérience web !

N’aie pas peur d’avoir des longues pages : si le contenu est clairement lisible et structuré, ce n’est plus un problème. Il vaut mieux être transparent.e sur la vraie longueur de tes pages d’emblée et la montrer à tes membres dès le chargement de la page, plutôt que de tout planquer dans des petites pochettes-surprise au scroll interminable et souvent très étriquées.

➡️ Optimise tes images dès que possible : une image devrait idéalement peser moins de 500Kb, 1MB peut-être maximum si il s’agit d’une image importante (par exemple, un header ou un fond). Limite l’utilisation de gifs animés au minimum, et veille à ce qu’ils ne soient également pas trop lourds. Pour optimiser tes JPEG ou tes PNG, compresse-les sur Photoshop ou similaire à l’export d’abord, puis tu peux également les passer à la moulinette Tinypng pour diminuer encore leur poids !

➡️ Less is more : laisse respirer ton forum !

C’est important pour la hiérarchie des informations, et pour pouvoir lire le contenu sans se fatiguer. Un espace vide n’est pas une mauvaise chose !

Alternativement et débat peut-être parallèle, j’aimerais pouvoir déconstruire cette idée reçue qui s’est établie au fil du temps que plus il y a de choses, mieux c’est. Les forums rpg sont victimes d’une course au toujours plus pour se démarquer, qui est très “naturelle” d’un point de vue social, concurrentiel et au fil de l’évolution des modes. Ça a aussi toujours été au détriment de l’accessibilité - ce n’est pas nouveau (fallait voir la gueule des trucs en 2005 je vous jure, on se rend vraiment pas compte du chemin parcouru KDJSHD).

Mais en 2024, non seulement on a des voix pour se rendre compte qu’on peut et doit mieux faire, mais aussi les outils pour ! C’est difficile à intégrer et ce sera une idée pré-concue qui risque de durer encore longtemps, mais un forum simple et épuré n’est pas un mauvais forum ! Il y a d’autres moyens de construire un univers original, créatif et visuel que par l’accumulation et le maximalisme ambiant qui s’est installé au fil des années, au détriment de beaucoup d’autres choses importantes (perte de temps de construction/maintenance, pression de la surenchère, diminution des performances techniques/augmentation des temps de chargement, et, évidemment, le manque de lisibilité et accessibilité).

Si nos parents (et même nous encore) étions capables de nous projeter dans des jeux de rôle sur table sans rien d’autre qu’un MJ et une fiche de personnage gribouillée sur un bout de papier, je suis persuadée qu’on n’a pas besoin de tout ça pour créer et écrire sur Internet !

Disclaimer de fin

Celleux qui connaissent mes projets pourraient me jeter la pierre du “faites ce que je dis et pas ce que je fais” là dessus, je plaide coupable. Personne n’est parfait, aucun forum n’est parfait !

Le mien comme tout autre a son lot de problèmes et de points à améliorer dont le staff est conscient, pour diverses raisons pour la plupart historiques, et est victime d’une tendance très personnelle à vouloir être toujours trop exhaustive (mais je me soigne… un peu… vous pouvez constater la longueur de ce post, c’est compliqué LOL). Et pour chaque problème réglé, peut-être que de nouveaux apparaîtront ailleurs.

Mais avec le temps, ça se corrige ! Tous ces points sont des choses que l’on peut améliorer petit à petit, en remettant nos choix en question régulièrement après un peu de recul.

À titre d’exemple, on travaille (lentement) en ce moment sur une grosse refonte du code et du design (le gros de la version actuelle datant de l’été 2022), avec une nouvelle revue de la typographie et de l’utilisation de l’espace qui se fait évidemment toujours trop tarder, mais aussi avec une emphase particulière sur l’optimisation des scripts additionnels du forum. Ajoutés récemment dans une phase initiale de test pour juger de leur accueil dans la communauté, ils sont cependant mal optimisés (tournent à vide sur des pages sur lesquelles ils ne sont pas utiles, demandent trop de ressources…). Ils sont même aujourd’hui sont une très grosse cause de nos problèmes de performance actuellement, et posent souci à plusieurs membres dont le matériel a du mal à suivre, ce qui n'est franchement pas viable. Avec cette refonte, on essaie de nous recentrer sur le “où”, “quand” et “comment” : sur quelles pages et à quel moment de mon utilisation du forum ces gros scripts sont-ils nécessaires ? Comment puis-je les réorganiser avec les outils que Forumactif me propose ?

En conclusion…

Si le débat ou la démarche de refaire toute ton interface te fait peur, c’est normal !

Déjà, Forumactif n’aide pas (trop - pour mettre le nez dans du vrai webdev quotidiennement, ça pourrait être bien pire, honnêtement. Le service proposé a un potentiel immense pour quelque chose de 100% gratuit !), notre matériel de base n’est pas optimisé ni facile à comprendre pour les plus novices. Et bordel, un forum, c’est pas juste une page statique, c’est une interface super complexe, quand on y pense !

Mais aussi, il s’agit d’un hobby, et il n’y a pas vraiment de “bon” moyen universel pour essayer d’améliorer l’accessibilité et l’usabilité de son forum. On fait avec notre temps libre et nos connaissances, et si vous n’avez pas le temps et les capacités de pousser plus loin que des tailles de police ou d’interligne, eh bien, au risque de me répéter, j’ai envie de dire que c’est déjà mieux que rien.

Toute initiative peut être une bonne initiative, tant que tu la prends ! La première étape est d’être conscient.e des améliorations possibles et d’accepter qu’on devrait mieux faire quand on le peut.

Je ne saurais que vous encourager à entamer la démarche, le reste viendra en temps et en heure - que ce soit en termes de temps libre, d’énergie ou de connaissances !

Et surtout : demande-toi toujours “pourquoi” 🫶 Merci d'avoir lu jusque là et : courage, tu peux le faire !!

Quelques ressources utiles

Pour se renseigner

Le manifeste du W3C sur l’accessibilité web

The ultimate UX Design Thinking par Annie Dai (en Anglais)

Overlay Fact Sheet partagée par @brunswicked

Tutoriels et conseils

La section tutoriels du forum du Blank Theme par @code-lab

Rendre vos forums plus accessibles par @noxeternam

Conseils d’accessibilité graphique par @andthesunrisesagain

Tips d’optimisation de votre design par @aeroplvne (la bise !)

Installer un dark/light mode par @decrescxndo

Mon petit plaisir du lot pour l’inspiration…

Je vous conseille de lire la série de posts de @code-lab sur le développement du design de What Remains (1 - 2 - 3 - 4)

Même si ça peut paraître être une dose de travail et de recherche assez énorme pour quelque chose que vous faites dans votre temps libre, c’est simplement très intéressant pour observer la démarche de design dans ses phases de construction et avec des visuels à l’appui !

[scipunk]

Ghost in the Shell SAC_2045 (2020)

[embervoices]

Who do I poke about how to fix the fact that, when you go to enter in a text description of an image in a post, the interface obscures the image being described, such that you can not both be typing up the description AND looking at what you're trying to describe?

I think this is a major obstacle to people actually following through on giving text descriptions. It's not just made less convenient, it's actively obstructed in most interfaces.

When I add text descriptions for images, I'm usually doing it from my desktop computer, and I'm writing it up in a separate window first, because I know I won't be able to see the image once I enter the image description interface. That's not something I can easily do on my phone, or even my tablet.

That's bad design.

Providing image descriptions is a service being asked of all users posting images. The interface needs to be convenient to access and easy to use.

[prokopetz]

I kind of love it when websites both display relative timestamps for an unreasonably long span of time before switching to absolute timestamps and use unreasonable units for the span in question. "This post was made 37 weeks ago" under what conceivable circumstance is this a useful way to communicate that?

[perdrelacellule]

AO3's redesign project: please help me collect answers!

Hey there!

As part of my professional portfolio, I'm conducting a little project on AO3's UX design improvement. I've created a super quick form to fill out (takes less than 5 minutes) and it would really help me out to collect some answers!

-All answers are anonymous, none of your personnal data will be collected.

-Most of the questions are multiple choice.

-If you're passionate about AO3's website design and possible improvements, don't hesitate to dm me!

THANK YOU SO MUCH!!

[glowingallium]

they took my mattress..

[mabelskins]

How to: Accessibility [EN]

Part 01 - Visual design

It’s been a while since my last how to and felt like putting something together! First of all, HAPPY PRIDE MONTH! To everyone out there! Being in the queer community, i know the struggles we go through everyday and am wishing a very proud month to all of us <3

Moving on to the actual topic here: accessibility. It’s been shown here and there when discussing coding and skinning but WHAT DOES IT ACTUALLY MEAN! 

Let’s go back a bit. For years people have been trying to achieve the impossible: an universal design. A design that is universal and usable for ALL people a one-size-fits-all design that will be usable and perfect for everyone. Now, there’s only one ‘little’ problem with this: people are different. I’ve always been overweight and whenever I’ve seen clothes that say ‘one size fit all’, I look at it very suspiciously. Bottom line is: every person is different, pain points and needs will also be different. 

So what do we do? One different design for every person who is using our product? 

Well, let’s make it equitable, let’s provide flexibility to cater for a broader audience, and let this audience choose what’s best for them. But! That’s doesn't take the responsibility from us, the designers (and coders) to make sure that we are making what we can to enable this flexibility. 

------------- I've started a list which I then realised would be way bigger than expected, so decided to make each item into its own post. We'll start with VISUAL DESIGN!

Part 01 - Visual design

Colour

I’ve mentioned before about the importance of contrast and contrast ratio briefly. If you want to go into more details, you may have a look at W3 Guidelines. In short: 

Don't rely on colour alone to convey meaning, information and actions;

Make sure there's enough contrast between foreground and background

Provide an option for light/dark mode

Light/Dark Modes

There’s a myth that dark mode is good for accessibility, because it improves text readability. (Personally, I’m a big fan of dark mode, as white/bright screens may trigger migraines). However, as everything in ux, the answer to ‘is it black or white’ is that it depends. As mentioned before, a good rule of thumb is not to generalise and provide flexibility. 

When using light and dark mode, make sure the colour contrast ratio passes on both modes. Here’s a few tips for designing for dark mode (according to atmos article attached at the end of this): 

Use tints (less saturated colours). Saturated colours can cause eye strain and will be hard to pass accessibility standards.

Image from Atmos website

Avoid pure black. Please. Pure black and pure white when used together might be the default instinct, but the contrast when used together is so strong it becomes hard to look at. Choose dark greys and off-whites/light grey when possible. 

Be patient with your colour palette, inverting colours won’t make it necessarily good. Take your time to build a palette that will be suitable for both.

Target Sizes

First, what is this? This refers to the dimensions of interactive elements such as links, buttons, icons or touch targets. Basically, anything you can interact/click.

WCAG 2.2 established a minimum for pointer inputs to be 24x24. This is the space that should be provided for a clickable area.

Image from W3 website

There's a number of exceptions and guidelines which I won't get into too much detail. It's important to think about the area which people are clicking into these elements. Also remember that this may be quite useful for users that are using the forum in their mobiles - so this is quite important (don't you hate when you can't click somewhere because you haven't clicked the EXACT area needed?)

In short:

Make sure target sizes are at least 24px

Make sure buttons look like buttons, anything that is clickable and interactive LOOKS like they are interactive

Make sure links are underlined (again, as an extra visual sign that they are clickable)

THAT'S IT!!

For part 01 at least. This is just the tip of the iceberg though. If you'd like to dive deeper into this, I highly recommend Stephanie Walter's content, as well as the Extra Bold book read. I'm attaching a few more articles and resources here too! If you've read all of this, you are a champ, I know this is longer than usual. Please like and share this content, let's get it out there!

Articles:

Designers Guide to Documenting Accessibility

Dark mode ui best practices

Dark mode best practices

Accessibility annotation examples

Colour accessibility tools

Inclusive components design

Accessible design in 60s

Target size minimum

Resources

Accessible colours

Accessible colour palette builder