Dématérialiser le service public, une épreuve pour le design

Avec la numérisation progressive de l’administration Française qui se trouve dans le peloton de tête des pays européens en termes d’usage des services publics numérique. Un développement qui correspond à une intention du gouvernement de simplifier les démarches et ainsi dématérialisé le service public, avec de nouveaux outils qui correspondront aux attentes des utilisateurs.

C’est pourquoi je souhaiterais aborder avec vous une petite étude sur la simplification des démarches administratives ou la dématérialisation du service public. C’est un pour le design de simplifier une démarche administrative comme pour obtenir votre acte de naissance par exemple.

L’expérience utilisateur apportera comme dans toute entreprise, une solution pour la modernisation des services publics.

Simplifier le service public par le design

La simplification du service public, c’est de rendre accessible et de simplifier les démarches administratives auxquelles les utilisateurs rencontrent des difficultés.

1 sur 4 juge complexe sa relation avec l’administration. Les démarches administratives peuvent être longues, ou demander des contacts et des déplacements répétés, les renseignements paraissent parfois inadaptés aux situations particulières des usagers, les services administratifs manquent de proactivité

Source

L’utilisateur est confronté à de trop nombreux interlocuteurs et avec des temps de réponse trop longs. Une perte de temps à la fois pour l’utilisateur, mais aussi pour les agents du service public.

Le service public s’oriente vers l’expérience utilisateur

Refondre le service public pour faciliter la vie des utilisateurs passe par l’évaluation de la complexité du processus administratifs lors d’un événement de vie (déménagement, déclaration d’impôts, carte d’identité…).

Il est donc nécessaire d’interroger les utilisateurs sur les différents freins rencontrés, le parcours utilisateur est un point important de la dématérialisation, on se met dans la peau de l’utilisateur pour décrire l’expérience vécue lors d’interaction avec l’administration française.

La compréhension du parcours utilisateur est primordial pour la conception d’un nouveau processus permettant l’amélioration, la dématérialisation et le traitement des demandes.

Un moyen de trouver les freins rencontrés, mais aussi de mettre en causes la complexité du service, pour mettre en place des actions qui permettront d’en améliorer l’expérience de l’utilisateur.

Accompagner les utilisateurs en continue dans la dématérialisation de l’administration française

La dématérialisation numérique ne consiste pas seulement à l’utilisation des outils mise à disposition par l’état, c’est aussi l’accompagnement des citoyens à l’utilisation de ces outils. Une formation continue pour favoriser la manipulation des outils du service public.

Un accompagnement qui peut se matérialiser par des newsletters de rappel (pour les impôts par exemple), des messages d’informations (pour un champ complexe), un moyen de réduire l’incompréhension, la complexité et de rendre les outils autonomes vis-à-vis des utilisateurs.

L’UX Design, une logique idéal pour la dématérialisation

L’UX design est définie par une logique et d’une appréhension de la conception de service. La refonte de l’administration française et des services publics doivent répondre aux besoins de simplification exprimés par les utilisateurs.

Le parcours utilisateur entre dans cette optique, la compréhension, vous l’aurez compris, primordial pour concevoir un parcours simplifié.

C’est un projet de grande envergure qui permettra à toute et à tous, une accessibilité, une simplification, mais surtout, une rapidité dans nos futures démarches administrative.

Wireframe – Comment communiquer sur la hiérarchie visuelle

L’utilisation de la couleur est l’une des meilleures façons de communiquer sur la hiérarchie visuelle, mais sur un wireframe, il est l’un des pires. La plupart des concepteurs pensent qu’ils ont besoin d’utiliser de la couleur sur un wireframe. Si vous utilisez de la couleur pour afficher le poids visuel, la conception finale pourrait perdre sa clarté.

Noir et blanc : meilleure visibilité pour le wireframe

Il est facile de différencier l’importance d’un élément de couleur sur un wireframe car tout le reste est en noir et blanc. Mais il n’y a aucun moyen de savoir si cet élément aura la même clarté lorsque vous traduisez le wireframe en une maquette.

En effet, une maquette aura beaucoup d’autres couleurs qui entrent en compétition entre elles. Tout élément de couleur sur votre wireframe doit apparaît plus claire. Le poids visuel que vous lui avez donné diminue lorsque d’autres éléments de la page ont aussi la même couleur.

Un autre danger de l’utilisation de la couleur est que beaucoup de designers finissent par compter sur elle comme le principal moyen de montrer la hiérarchie visuelle du projet. Il est facile de faire des éléments qui se distinguent par la couleur.

Autres caractéristiques de la hiérarchie visuelle

En ajoutant de la couleur à votre wireframe, il est difficile d’évaluer l’importance des éléments visuelle. Car la couleur éclipse d’autres attributs hiérarchiques. Lorsque vous évitez la couleur, vous permettez aux éléments du wireframe de se démarquer. Le poids visuel des éléments de couleurs se perd sur une maquette, mais ces attributs restent intacts.

Taille

L’élément le plus gros est celui qui attire le plus notre attention. Pour travailler la taille, un élément a besoin d’être plus grand par rapport aux autres éléments autour d’elle.

Forme

Vous pouvez afficher du contenu sur vos pages, pour mettre en évidence une zone de contenu. Vous n’êtes pas limité à seulement la couleur et la taille. Utilisez également la forme, placer une boîte autour du contenu, cela donne de l’importance à la zone.

Wireframe d'un site internet

Placement

Il y a des zones qui recevront plus d’attention que d’autres. Placer le contenu important dans ces domaines d’attention élevé. Le meilleur endroit pour placer vos éléments importants se trouve, au-dessus du fold, là où les yeux de l’utilisateur se rivent le plus.

Coloriage inverse

La colorisation inversée peut ajouter de la clarté dans la hiérarchie des informations. La plupart des wireframes utilisent des couleurs sombres sur un fond clair. En effet, la plupart des sites utilisent souvent une couleur d’arrière-plan neutre.

Lorsque vous inversez les couleurs, vous appliquez une couleur claire sur un fond sombre. Ceci est un moyen efficace pour communiquer un fond de couleur sans suggérer de couleur spécifique.

En suggérant une couleur sur votre wierframe, l’utilisateur comprend que la couleur aura une incidence sur le reste de la conception.

La colorisation inversé, est souvent utilisée pour les éléments d’interface qui ont besoin d’un remplissage de couleur fort. Boutons, menus et notifications, qui ont souvent besoin de cette clarté visuelle, car les utilisateurs interagissent avec eux.

Une hiérarchie visuelle sans couleur

Si votre hiérarchie visuelle n’est pas claire sans couleur, c’est que votre conception n’utilise pas assez d’attributs. Le wireframe sans couleur vous permet d’évaluer la clarté de votre structure et la mise en page. Un wireframe qui n’est pas clair, est un wireframe qui manque d’une hiérarchie forte. Ajouter de la couleur ne permettra pas une meilleure compréhension.

Outils pour la réalisation de vos wireframe

Il existe des outils qui peuvent vous aider à communiquer sur la hiérarchie visuelle. Ils permettent d’avoir une visualisation du wireframe dans son ensemble. Découvrez la liste des différents logiciels de prototypage.

6 idées d’animations pour Search Box

La recherche est au cœur des efforts en ligne. Avec l’utilisation des animations, il est maintenant possible d’améliorer l’expérience utilisateurs et d’ajouter plus de fonctions à l’icône de recherche qui peut révolutionner la Search Box.

Les principales caractéristiques d’une expérience de recherche personnalisées comprennent les filtres de recherche, ce qui nous permet d’obtenir des résultats plus précis.

6 exemples d’animations de barre de recherche

Animated  Form by Bryan (@Blackmagyk) on CodePen.

See the Pen Create CSS3 Animated  Box by wpaesthetic (@wpaesthetic) on CodePen.

DailyUI #022 – Search by Fabio Ottaviani (@supah) on CodePen.

See the Pen Animated  Form by Kyle (@kalwyn) on CodePen.

Recherche Bar animation by Daiinel (@Daiinel) on CodePen.

See the Pen  Input animation by Nikolay Talanov (@suez) on CodePen.

Sources

Prototypage UX, outils et logiciels pour UX designer

Vous cherchez une petite application qui vous permettra de réaliser des prototypes d’interfaces graphiques ? Voici une sélection d’outil de création d’interfaces graphique pour vos projets. Une liste d’outil gratuit et payant pour UX designer, UI desiner, Web designer, graphiste web et développeur.

Logiciels et outils de prototypage

Justinmind

Outil de création de prototype web et application mobiles. Il offre des fonctionnalités typiques des outils comme drag and drop, schématisation, placement, redimensionnement.

Justinmind logiciel pour créer des prototypes

Invision

Il se présente comme une solution aux problèmes auxquels sont confrontés les UX designer. Le service met à disposition une interface web complète pour gérer les projets ainsi qu’une application desktop de synchronisation que vous pourrez tout aussi bien remplacer par DropBox.

Invision logiciel pour créer des prototypes

Marvelapp

Créer facilement un flux marvelapp, il suffit de faire glisser pour créer des interactions, conception qui réagit quand ils sont cliqués ou touchés. Un très bon outil de prototypage.marvelapp logiciel pour créer des prototypes

Axure

Un logiciel de prototypage qui apportent de nombreux de documentation, y compris le contrôle de la mise en page des maquettes. Le logiciel est gratuit pour les étudiants et les enseignants. Une période d’essai de 30 jours est disponible.Axure logiciel pour créer des prototypes

Wireframe CC

Spécialisé dans le positionnement d’interface. Idéal pour réaliser un prototype rapide et propre. Un système de commentaire bien pratique qui fait sa petite différence.

WierframeCC logiciel pour créer des prototypes

 

Hotgloo

HotGloo est un outil UX , wireframe et prototypage conçu pour construire wireframes pour le web , le mobile et wearables .

Hotgloo logiciel pour créer des prototypes

Adobe XD : Adobe Experience Design CC

Interface ergonomique, design simple, fonctionnalités performantes. Bon outil de prototypage pour débutant ou initié.  Maintenant disponible avec une version starter ( version gratuite Adobe XD ).

Adobe Xp, nouvelle solution pour les webdesigner et ux designer

Voici la liste des logiciels de prototypage que j’utilise. Si vous avez des logiciels à proposer ou une préférence pour un logiciel, n’hésitez pas à donner vos avis.