Un nouveau look pour une expérience plus conviviale

Comme vous avez pu le remarquer depuis quelques mois, la section Médications du DMÉ Web met de l’avant un nouveau style se démarquant de la présentation traditionnelle.

Vis-à-vis ce changement, deux catégories de réactions sont observables :

  1. « Wow, une nouvelle interface! J’ai vraiment hâte de pouvoir l’essayer! »
  2. « Argh! J’avais développé de bonnes habitudes avec l’autre version et je n’ai pas le temps de réapprendre comment utiliser ce module. »

Ça vous dit quelque chose? C’est normal! Bien qu’elles consistent en grossières caricatures, l’attitude d’un individu face au changement se situe généralement entre ces deux extrêmes. Certaines personnes embrassent le changement alors que d’autres y sont plus réticents.

Cependant, lorsque l’innovation est fondée sur des bases et des principes solides, il est plus facile d’accepter et d’apprécier les transformations qui sont proposées, pourvu que l’on en comprenne les motivations. Voilà ce qui nous a poussés à vouloir vous expliquer pourquoi nous avons adopté de nouveaux standards d’ergonomie : le Material Design

Qu’est-ce que le Material Design?

En vous appropriant la nouvelle interface graphique du module Médications, vous pourriez avoir eu une impression de déjà vu. Que ce soit en manipulant un téléphone intelligent Android, ou bien en utilisant certaines applications populaires (Google Drive, Evernote, Slack), vous avez probablement fait l’expérience de ce standard. C’est le style graphique adopté par la compagnie Google au cours des dernières années afin de rendre plus conviviale les interactions entre leurs applications et les utilisateurs.

Les grandes lignes

En se basant sur des principes classiques combinés à l’innovation et aux possibilités qu’offre la technologie, cette ergonomie facilite la prise en main pour l’utilisateur et permet également d’uniformiser l’apparence de l’application sur toutes les plateformes pour que vous retrouviez facilement les fonctionnalités auxquelles vous tenez, que vous soyez à votre poste de travail, sur votre tablette ou encore votre téléphone intelligent.

Résumons d’abord les principes de base véhiculés par Google

  1. La métaphore du matériel : Le matériel, c’est tout ce qui est tangible, ce avec quoi vous pouvez interagir tous les jours. Material Design veut répliquer les comportements des objets du quotidien dans un environnement virtuel tout en les embellissant.
  2. Rien n’est laissé au hasard : Chaque élément graphique est intentionnel, que ce soit sa couleur, sa taille ou sa typographie. On veut que l’application soit intéressante pour l’utilisateur, mais demeure simple de prise en main. L’emphase graphique est mise sur les fonctionnalités importantes afin d’en faciliter l’adoption.
  3. L’importance du mouvement : Pendant la navigation, certains éléments apparaissent, disparaissent ou changent. Le mouvement est primordial pour deux raisons : attirer l’attention de l’utilisateur aux endroits appropriés et définir l’utilisateur comme acteur principal de l’application, étant le seul responsable des mouvements provoqués.

Vu la popularité et l’impact positif de ce design sur l’expérience utilisateur et notre désir de fournir à nos usagers la meilleure expérience possible, il était tout naturel pour nous d’entamer une transition vers ce style. Ce changement nous permettra de vous présenter de nouveaux modules beaucoup plus simples à utiliser et qui pourront s’adapter sur diverses plateformes.

Intégration du Material Design chez Omnimed

Laissez-moi vous présenter comment l’adoption de ce type d’ergonomie est venue influencer nos méthodes de travail, autant au niveau de l’analyse de besoin que du processus de développement.

Du processus d’analyse

Un des buts premiers est évidemment de développer une application compatible sur tous les types de plateformes, que ce soit tablette, téléphone intelligent, ordinateur de bureau, écran tactile, etc. En ce basant sur cet objectif, ainsi que sur le fait qu’iI est plus facile d’itérer un produit en commençant par une version simple et y ajouter ensuite de plus en plus de complexité, nous avons déterminé que la meilleure méthodologie à adopter était d’orienter notre processus d’analyse et de développement vers les fonctionnalités essentielles, les opérations qui seront les plus souvent utilisées, et de toujours les réfléchir pour qu’elle soit facilement accessible sur une interface mobile. 

Prenons pour exemple le module Médications, pour lequel les deux opérations principales sont la consultation et l’ajout de médication : à l’ouverture du module, le profil médicamenteux du patient est affiché d'emblée, et l’action d’ajout est disponible en un seul coup de pouce (littéralement puisque le bouton d’ajout se situe au niveau du pouce droit lorsque l’on tient son téléphone de la main droite).

Une fois la base établie, nous pouvons étendre ces standards aux autres plateformes offrant plus d’espace de travail. Nous pouvons ainsi ajouter des options dans l’interface afin d’enrichir l’expérience utilisateur. Ce processus permet de réduire à sa plus simple expression un module qui est à la base complexe, afin de bien cerner le besoin à combler, pour ensuite lui ajouter des fonctionnalités supplémentaires.

Des technologies impliquées

Passer à Material Design nous a imposé un changement technologique. Devant adopter une ligne directrice déterminant l’apparence et le fonctionnement de plusieurs éléments, et voulant améliorer notre architecture pour favoriser le développement de partenariat dans l’industrie, nous avons décidé d’orienter nos technologies de rendu client « font-end » en adoptant la structure logicielle AngularJS. 

Chez Omnimed, nous avons choisi de développer notre application comme s’il s’agissait d’un casse-tête, c’est-à-dire en détachant tous les morceaux, p.ex. le système de rendez-vous, le prescripteur, l’index-patient, etc. La structure AngularJS, dans son rôle, nous aide à prendre ces morceaux et à former un tout pour le client (au front-end). Elle nous aide également dans le développement d’interfaces afin de pouvoir échanger certaines informations avec d’autres systèmes et ensuite les intégrer dans l’application de façon structurée (p.ex. avec le DSQ, avec des systèmes de réservation de rendez-vous en ligne, etc.). La structure logicielle AngularJS nous permet aussi d’intégrer plusieurs outils connus développés par d’autres à notre logiciel, ce qui nous permet de sauver du temps de développement.

Même si la nouvelle orientation que nous avons prise au niveau du rendu de l’application nécessite l’implantation de nouvelles méthodologies, nous sommes convaincus qu’avec le temps, cela nous permettra d’améliorer la qualité de nos produits et l’efficacité de notre processus de développement, permettant également de vous fournir la meilleure expérience possible.

Prochainement dans l’application

Vous connaissez maintenant l’essentiel de nos réflexions entourant le développement du nouveau module Médications. Mais nous ne voulons pas nous arrêter là! Le visualiseur du DSQ utilise également ce nouveau standard! Nous procédons également actuellement à une restructuration du module d’administration du dossier patient. À long terme, nous avons pour objectif de retravailler tous les modules afin qu’ils répondent à ce nouveau standard, toujours dans l’objectif de vous offrir la meilleure expérience possible.

Et voilà, vous êtes maintenant au parfum du chemin que nous avons parcouru et qui nous a menés à cette transformation de l’interface de l’application. En souhaitant que ce résumé vous aide à comprendre davantage ces changements et en espérant que ces modifications vous seront bénéfiques!