Dans les conceptions d’interface utilisateur basées sur du texte, les utilisateurs sont souvent confrontés à des problèmes tels que des commandes longues ou des champs de texte mal alignés. Vous regardez le code et vous pensez : Qu’est-ce qui pourrait résoudre ce problème sans ajouter de désordre ? Eh bien, vous pouvez trouver de nombreuses solutions à ce problème sur Internet. Mais nous sommes ici pour vous en parler un simple parmi eux. Qui utilise des personnages invisibles pour gérer les choses sans créer de désordre.
Sommaire
Entrer dans les bases
Avant d’aborder la solution, pourquoi ne pas avoir une petite discussion sur quelques bases ?
Que sont les conceptions d’interface utilisateur basées sur du texte ?
Les interfaces utilisateur textuelles (TUI) sont également appelées interfaces de ligne de commande, écrans de commande ou interfaces utilisateur de terminaux. De telles interfaces n’impliquent aucune utilisation de souris ou d’écrans tactiles. Au lieu de cela, pour les utiliser, les utilisateurs doivent saisir des commandes dans une invite de commande textuelle. Ils sont souvent utilisés pour l’administration système, l’écriture de codes, les services cloud, etc. Comme dans une GUI (Graphical User Interface), les TUI n’impliquent aucune interaction avec des images et des icônes. Au lieu de cela, les utilisateurs doivent interagir avec les ordinateurs à l’aide de commandes textuelles.
Caractéristiques principales des interfaces textuelles
- Simplicité visuelle : L’interface est composée de caractères alphanumériques affichés sur un fond uni. L’accent est mis sur le contenu textuel plutôt que sur les éléments graphiques.
- Navigation par commandes ou menus : L’utilisateur interagit avec le système en saisissant des commandes textuelles (par exemple, « dir » pour lister les fichiers dans un répertoire) ou en naviguant dans des menus textuels arborescents.
- Faible consommation de ressources : Les interfaces textuelles nécessitent beaucoup moins de puissance de calcul et de mémoire que les interfaces graphiques, ce qui les rend adaptées aux systèmes embarqués, aux serveurs distants ou aux environnements à ressources limitées.
- Accessibilité : Pour les personnes ayant des déficiences visuelles, les lecteurs d’écran peuvent interpréter plus facilement le texte brut que les éléments graphiques complexes, ce qui rend les interfaces textuelles potentiellement plus accessibles.
Types d’interfaces textuelles
- Ligne de commande (CLI) : L’utilisateur saisit des commandes textuelles pour interagir avec le système d’exploitation ou une application. Exemples : Terminal sous macOS/Linux, Invite de commandes sous Windows.
- Menu textuel : L’interface présente une liste d’options textuelles parmi lesquelles l’utilisateur peut choisir en utilisant les touches du clavier.
- Interface utilisateur en mode caractère (CUI) : Utilise des caractères spéciaux pour simuler des éléments graphiques rudimentaires, tels que des cadres ou des tableaux.
Avantages des interfaces textuelles
- Efficacité pour les tâches répétitives : Les commandes textuelles peuvent être combinées et automatisées grâce à des scripts, ce qui permet d’effectuer des tâches complexes rapidement.
- Contrôle précis : L’utilisateur a un contrôle direct sur le système grâce à la saisie de commandes spécifiques.
- Faible empreinte : Idéales pour les systèmes embarqués ou les environnements à ressources limitées.
Accessibilité potentielle : Compatibilité avec les lecteurs d’écran.
Que sont les caractères invisibles ?
Les caractères invisibles, également appelés espaces vides, sont des éléments de texte spéciaux qui disparaissent visuellement. Ils n’apparaissent pas comme des lettres ou des chiffres ordinaires. Pourtant, ils jouent des rôles importants, comme gérer les wraps, créer une bonne expérience utilisateur, aligner le texte ou masquer les marqueurs. Les caractères invisibles sont de plusieurs types, chacun avec une fonctionnalité différente. Il existe de nombreuses façons de les utiliser, c’est-à-dire que vous pouvez placer l’Unicode là où vous en avez besoin ou en copier un à partir d’outils en ligne et le coller directement à l’endroit où vous souhaitez créer un espace.
Comment le caractère invisible peut-il aider avec les conceptions d’interface utilisateur basées sur du texte ?
Maintenant que nous avons abordé les bases, il est temps de revenir au sujet principal. Ci-dessous, nous allons partager quelques applications de caractères invisibles dans les conceptions d’interface utilisateur basées sur du texte qui impliquent des codes et des commandes.
1. Lisibilité des commandes
Commandes longues – l’une des choses les plus irritantes pour les concepteurs d’interface utilisateur. Ils mélangent souvent les choses uniquement parce que leurs yeux ne voient pas où le code est déchiffré. C’est là qu’ils peuvent utiliser des caractères invisibles. Ils les aideront à formater soigneusement les commandes afin qu’ils puissent les lire facilement.
Expliquons avec un exemple : jetez un œil à une commande désordonnée que nous avons partagée ci-dessous :
| docker run -d–name=myapp–restart=always–volume=/data:/app/data–network=custom_net nginx:latest |
Cette commande peut fonctionner, mais elle est difficile à suivre car tout est encombré. L’ajout d’un espace commun peut entraîner des problèmes d’optimisation. Mais ne vous inquiétez pas, un personnage invisible peut le gérer facilement.
Pour améliorer la lisibilité, vous pouvez utiliser l’espace ininterrompu après (docker run -d) et avant (–name, –restart, –volume et –network).
Vous pouvez copier un tel espace d’un simple clic depuis l’outil de caractères invisibles de Prepostseo ou utiliser InvisibleSymbol pour accéder rapidement à ces caractères et découvrir leur Unicode. De plus, vous pouvez également trouver son Unicode directement sur la même page, comme indiqué ci-dessous.
Tableau avec le code Unicode
|
U+0020 |
Espace |
  |
[ ] |
|
U+00A0 |
Espace sans interruption |
  |
|
|
U+2000 |
En Quad |
  |
[ ] |
|
U+2001 |
Em Quad |
  |
[ ] |
|
U+2002 |
En Espace |
  |
[ ] |
|
U+2003 |
Em Espace |
  |
[ ] |
|
U+2004 |
Espace à trois par em |
  |
[ ] |
|
U+2005 |
Espace quatre par em |
  |
[ ] |
|
U+2006 |
Espace Six-Per-Em |
  |
[ ] |
|
U+2007 |
Espace de la figure |
  |
[ ] |
|
U+2008 |
Ponctuation Espace |
  |
[ ] |
|
U+2009 |
Espace mince |
  |
[ ] |
|
U+200A |
Espace cheveux |
  |
[ ] |
|
U+2028 |
Séparateur de ligne |

 |
[ ] |
|
U+205F |
Espace mathématique moyen |
  |
[ ] |
|
U+3000 |
Espace idéographique |
　 |
[ ] |
Source: https://www.prepostseo.com/fr/caractere-invisible
Cela aidera à séparer visuellement les sections, rendant la commande plus lisible sans altérer sa fonctionnalité. Voici à quoi ressemblera la commande ci-dessus après l’ajout d’espaces ininterrompus.
| docker run -d [ ] — name=myapp [ ] –restart=always [ ] –volume=/data:/app/data [ ] — network=custom_net nginx:latest |
Note: Le [ ] dans le code indique qu’ici un espace invisible est utilisé.
Comme vous pouvez le constater maintenant, la commande est beaucoup plus facile à analyser et à comprendre, en particulier pour un concepteur qui exécute ou débogue la commande.
2. Alignement et espacement du texte
Dans les interfaces utilisateur basées sur du texte, il est crucial de garder les choses alignées. Vous devez afficher les données correctement structurées et organisées. Comme un tableau de noms, d’âges et de rôles. Les problèmes d’alignement peuvent rendre les choses compliquées et difficiles à suivre.
Mais ce qu’il faut savoir, c’est que vous pouvez utiliser des caractères invisibles pour gérer de tels problèmes. Prenons un exemple. Regardez le code que nous avons partagée ci-dessous :
| Nom Âge Rôle
Développeur John Doe 30 Jane Smith 28 Créatrice |
Comme vous pouvez le constater, la structure ci-dessus est très difficile à comprendre. Pour vous assurer que tout est correctement aligné, vous pouvez utiliser l’espace invisible de l’onglet horizontal (Unicode : U+0009) pour aligner parfaitement les colonnes. Vous pouvez trouver un tel espace invisible sur Invisible-character.net.
Source: https://www.invisible-character.net/fr/caractere-invisible
Cela vous aidera à bien aligner le texte, créant ainsi un format propre et lisible.
Voici à quoi ressemblera le code ci-dessus après avoir ajouté un espace de tabulation horizontale :
| Nom [] Âge [] Rôle
John Doe [] 30 [] Développeur Jane Smith [] 28 [] Créatrice |
Note: Le [ ] dans le code indique qu’ici un espace invisible est utilisé.
3. Liens insécables dans le texte
En tant que concepteur TUI, vous avez peut-être rencontré des URL que vous souhaitez conserver intactes sans les casser. Surtout dans les espaces étroits comme les formulaires. Rompre les liens peut rendre les choses compliquées, parfois même pires. C’est là que des caractères invisibles comme espace insécable sans pause (Unicode : U+00A0) peut vous aider. Vous pouvez copier gratuitement cet espace à partir de l’outil de caractères invisibles d’Editpad. Cela vous aidera à garantir que les URL, les adresses e-mail ou toute information critique restent regroupées sur une seule ligne, même lorsque l’espace est restreint.
Source: https://www.editpad.org/tool/fr/caractere-invisible
Par exemple, disons que vous avez une URL :
| https://www.example.com/this-is-a-long-url |
Si cette URL se termine au mauvais endroit, cela pourrait entraîner de la confusion ou des erreurs. Au lieu de cela, vous pouvez insérer l’espace à la fin pour conserver l’intégralité de l’URL intacte, comme indiqué ci-dessous.
| https://www.example.com/this-is-a-long-url [] |
Note: Le [ ] dans le code indique qu’ici un espace invisible est utilisé.
Cette astuce simple ne permettra pas à votre URL de se diviser sur deux lignes, même si la zone de texte est petite.
Conclusion
En conclusion, les caractères invisibles offrent des possibilités d’amélioration pour les conceptions d’interface utilisateur basées sur du texte. Leur utilisation peut contribuer à une meilleure organisation et à une présentation plus claire de l’information. Il convient donc de considérer leur potentiel lors de la conception d’interfaces textuelles.
Lire aussi :