Donner du sens à une UI pour réussir l’UX est indispensable. MAUI apporte des outils indispensables pour que vos Apps brillent là où les autres s’enfoncent dans le néant…[
L’accessibilité, la lisibilité et toutes ces choses
L’ergonomie d’une App est d’une importance capitale, elle peut faire son succès ou y aider, mais si elle est négligée elle en fera presque assurément l’échec.
Bien travaillée, une UX réussie ne se voit pas, mais ça se sent, même inconsciemment, les choses coulent de source.
Mal réalisée, une UX bancale créera de friction cognitive qui s’accompagnera d’un sentiment de rejet de la part de l’utilisateur.
Etant donné le prix d’un logiciel, il est préférable que la qualité de l’UX soit à la hauteur de celle du code et du montant investi par le client !
Or, trop souvent, l’UX est non pas massacrée, mais totalement oubliée, ce qui est pire peut-être.
Combien de page internet ou d’Apps font n’importe quoi sur l’appui de TAB au lieu d’aller au champ suivant qui fait sens dans la séquence de saisie ? Combien de fois au contraire TAB s’arrête sur un champ optionnel qui ne devrait pas faire partie de la boucle « normale » de saisie ?
Pire, combien de pages débute avec un curseur qui n’est nulle part ou n’importe où, c’est-à-dire pas sur le 1er champ à saisir ?
Tout cela est déjà une catastrophe en soi. C’était le niveau 0 de l’accessibilité il y a déjà 30 ans… Je renvois le lecteur intéressé à l’une de mes anciennes conférence sur la création d’interfaces : https://youtu.be/975AQpZxGCk même si les exemples sont anciens on y trouve l’essentiel des erreurs de conceptions à éviter !
Mais il y a pire car depuis ces temps reculé machines et OS ont fait des progrès immenses en matière d’ergonomie. Mais on dirait que certains développeurs ont totalement raté ce bouleversement, se bornant à coder, et pour les UI, à coller des contrôles les uns à côté des autres, sans aucun sens…
Or nous y voilà ! Le Sens ! La Sémantique !
Et MAUI a des tas de choses pour ceux qui s’intéressent à ce sujet (normalement tout le monde puisque faire une App pourrie ne devrait être un objectif pour personne…).
MAUI et la sémantique visuelle
Nous sommes en été, vous êtes déjà courageux de lire pour vous instruire alors je vais tenter de faire léger…
L'équipe de développeurs Microsoft a enquêté plus en profondeur sur les meilleures pratiques d'accessibilité, pour cette raison, ils organisent des réunions avec différents développeurs d'entreprises qui travaillent sur les bonnes pratiques d'accessibilité et ont apporté ces améliorations à .NET MAUI. Concrètement cela signifie de nouvelles propriétés, de nouvelles classes dans MAUI pour nous aider à rendre les Apps plus agréables, plus accessibles, et pour que les UI deviennent des UX, c’est-à-dire qu’elles véhiculent un sens !
Les prémices avec TabIndex et TabStop
Les deux propriétés TabIndex et TabStop des propriétés qui aident le développeur à contrôler l'ordre dans lequel un lecteur d'écran lit chaque élément de l'interface utilisateur dans Xamarin Forms. Pour .NET MAUI, il est recommandé de travailler avec une approche de conception réfléchie qui vous permettra de commander l'interface utilisateur spécifiquement comme vous souhaitez qu'elle soit lue, cela nous aide à éviter de programmer des alternatives qui peuvent parfois altérer les performances pour gérer le flux du lecteur d'écran. Mais si vous avez encore besoin de contrôler le lecteur d'écran, avec .NET, nous avons SemanticOrderView de la boîte à outils de la communauté (le toolkit est intégré dans MAUI à la différences des Xamarin.Forms qui demandaient son installation à part).
Classe SemanticExtensions
La méthode SetSemanticFocus permet de déplacer le focus du lecteur d'écran vers un élément spécifique. Cela peut s’avérer d’une aide précieuse pour guider l’utilisateur.
<Button Text="Click to set semantic focus to label below"
FontSize="16"
Clicked="SetSemanticFocus_Clicked"/>
<Label x:Name="semanticFocusLbl"
Text="Label with semantic focus"
FontSize="14"/>
Le click sur le bouton déplacera le focus sémantique.
Le code :
private void SetSemanticFocus_Clicked(object sender, System.EventArgs e)
{
semanticFocusLabel.SetSemanticFocus();
}
Les annonces et le reste
On trouve d’autres méthodes ou notations qui appartiennent à cette jungle de l’ergonomie. Chaque OS propose ses propres façons de faire et même en plusieurs couches parfois contradictoires… On cherche, on creuse, on bricole… Mais on avance vers des solutions qui améliorent beaucoup l’accessibilité générale des Apps.
Les annonces en font partie. Elles permettent d'établir le texte qui sera pris en compte par le Screenreader :
void Announce_Clicked(object sender, EventArgs e)
{
SemanticScreenReader.Announce("Write your name here!");
}
L’Ordre Sémantique
Il ne s’agit pas d’un nouvel ordre mondial fondé par quelques illuminés ou inventés par des paranoïaques qui ont vu trop de films de SF. Il s’agit simplement de gérer l’ordre de lecture et de transport pour un groupe de contrôles. Les groupes pouvant faire partie de groupes de niveaux supérieurs.
Dans MAUI un premier pas dans cette direction est la SemanticOrderView. C’est un conteneur invisible qui permet de grouper des contrôles, souvent des Labels, des Boutons, etc. On donne des noms à ces vues. Et par code on va pouvoir indiquer l’ordre réel de lecture. L’exemple suivant sera plus parlant :
<xct:SemanticOrderView x:Name="sov">
<StackLayout>
<Label x:Name="second" Text="Second control" />
<Button x:Name="third" Text="Third control" />
<Label x:Name="fourth" Text="Fourth control" />
<Button x:Name="fifth" Text="Fifth control" />
<Button x:Name="first" Text="First control" />
</StackLayout>
</xct:SemanticOrderView>
Et quelque part dans le code on trouvera ceci qui fixe un ordre différent de celui du code XAML :
sov.ViewOrder = new List<View> { first, second, third, fourth, fifth };Conclusion
Il y aurait tellement à dire sur ce sujet capital. Mais je ne veux pas vous assommer ! En revanche je vous conseille la lecture de ce blog Microsoft qui entre un peu plus dans les détails : https://devblogs.microsoft.com/xamarin/the-journey-to-accessible-apps-meaningful-content-ordering/
Il fait chaud (en fait je n’en sais rien j’écris ces lignes en décembre 2022 et il fait déjà 16°, je redoute donc le temps de juillet ! Donc je prends peu de risques en annonçant la chaleur…), restez à l’ombre, buvez frais et maintenez vos neurones en activité ! Dot.Blog est passé en mode « été » (c’est-à-dire que je bosse comme un fou pour écrire les articles de l’années prochaine !). Le présent article devrait être le seul de juillet qui fera écho au seul article d’août le mois prochain. Avant de retrouver le rythme habituel ou peut-être autre chose, pour moi qui écris c’est dans longtemps, je me laisse la possibilité d’inventer un autre futur…
Stay Tuned !