Archives de la liste a​i​d​e​@p​a​h​e​k​o​.c​l​o​u​d​

amélioration (design) de la fiche d'inscription

aurelien

14/06/2023 18:02:28

Bonjour

ce n'est pas une demande urgente, mais une petite amélioration esthétique ;)

Voici une partie du formulaire d'inscription

[image: image.png]

Il y a pas mal de champs, mais j'ai noté la logique pour la plupart des
champs :

*Nom du champ (gras) + facultatif/obligatoire (haut italique) - saut de
ligne - champ*


sauf pour une case à cocher :

*case à cocher - Nom du champ (gras)*


Ça semble un peu "tassé"...


La fiche de membre, elle ressemble plus à un tableau avec de colonnes

*Col1 Nom du champ (aligne à droite) - Col2 Valeurs*


[image: image.png]




Est-ce possible d'avoir la même approche sur la fiche d'inscription ? Avec
une couleur alternée  possiblement ?

En exemple, une saisie comptable avancée, le design est pas mal pour bien
différencier les champs :

[image: image.png]


Juste une idée ;)
Peut-être que ça peut être plus lisible pour d'autres aussi ?


Aurel

amélioration (design) de la fiche d'inscription

BohwaZ

14/06/2023 19:26:18

En fait c'est le mode que tu n'aime pas qui est pourtant le plus
efficace et le plus ergonomique selon les études menées à ce jour :)

Quelques sources sur le placement des libellés pour les formulaires :
https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
https://uxdesign.cc/best-practices-for-form-design-ff5de6ca8e5f

"The best position for placing a form label is above an input field
because users are not forced to look separately at the label and the
input field. This dramatically decreases the number of eye fixations
and results in a faster completion time."

En général l'interface est basée sur ce que j'ai pu lire comme étant un
consensus en terme d'ergonomie et d'UX. Parfois je me trompe ou je
zappe, mais dans ce cas-là je pense que je suis le consensus et que ça
marche pas trop mal :)

Pour les cases à cocher je suis d'accord c'est un peu bizarre,
excellente remarque.

Cependant si je mettais le libellé au dessus et juste la case en
dessous, ça ferait aussi très bizarre.

Je pourrais mettre le libellé au dessus, ET remettre le libellé à côté
de la case à cocher, comme ceci :

Inscription à la lettre d'information
[X] Inscription à la lettre d'information

Mais ça fait un peu répétition du coup.

Je peux sinon proposer quelque chose du genre :

Inscription à la lettre d'information
[X] Oui

voir capture ci-jointe. Sauf que ça risque de rendre les choses pas
super claires si tu as plusieurs cases à cocher de suite, dans ce cas
tu aura plusieurs fois "Oui", ce qui n'est pas forcément très clair
quand tu va cocher.

J'avoue que je ne sais pas si cette solution est meilleure que celle
précédente. Je vais tester comme ça quelques jours pour voir.

amélioration (design) de la fiche d'inscription

aurelien

14/06/2023 20:15:24

Ah je comprend ;)

En effet .. c'est pas des plus simple.. un équilibre..

Ou alors l'alternance des couleurs ? ou juste un plus espace avant ou après
?

mais je vois bien le sujet ;)

Aurel



On Wed, Jun 14, 2023 at 7:34 PM BohwaZ <bohwaz@bohwaz.net> wrote:

> En fait c'est le mode que tu n'aime pas qui est pourtant le plus
> efficace et le plus ergonomique selon les études menées à ce jour :)
>
> Quelques sources sur le placement des libellés pour les formulaires :
> https://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
> https://uxdesign.cc/best-practices-for-form-design-ff5de6ca8e5f
>
> "The best position for placing a form label is above an input field
> because users are not forced to look separately at the label and the
> input field. This dramatically decreases the number of eye fixations
> and results in a faster completion time."
>
> En général l'interface est basée sur ce que j'ai pu lire comme étant
un
> consensus en terme d'ergonomie et d'UX. Parfois je me trompe ou je
> zappe, mais dans ce cas-là je pense que je suis le consensus et que ça
> marche pas trop mal :)
>
> Pour les cases à cocher je suis d'accord c'est un peu bizarre,
> excellente remarque.
>
> Cependant si je mettais le libellé au dessus et juste la case en
> dessous, ça ferait aussi très bizarre.
>
> Je pourrais mettre le libellé au dessus, ET remettre le libellé à côté
> de la case à cocher, comme ceci :
>
> Inscription à la lettre d'information
> [X] Inscription à la lettre d'information
>
> Mais ça fait un peu répétition du coup.
>
> Je peux sinon proposer quelque chose du genre :
>
> Inscription à la lettre d'information
> [X] Oui
>
> voir capture ci-jointe. Sauf que ça risque de rendre les choses pas
> super claires si tu as plusieurs cases à cocher de suite, dans ce cas
> tu aura plusieurs fois "Oui", ce qui n'est pas forcément très
clair
> quand tu va cocher.
>
> J'avoue que je ne sais pas si cette solution est meilleure que celle
> précédente. Je vais tester comme ça quelques jours pour voir.
>
> --
> Liste d'entraide des utilisateurs de Paheko
> https://paheko.cloud/
>
> Pour se désinscrire : https://paheko.cloud/entraide
> Archives : https://admin.kd2.org/lists/aide@paheko.cloud/archives/
>
>