E. Renaux

Hors les cours BLOG

Le meilleur environnement pour la modélisation de logiciel

without comments

La modélisation d’une application ou d’un logiciel est une étape clé pour la conception. C’est en effet durant la modélisation qu’on réfléchit à toutes les fonctionnalités qu’on souhaite intégrer à notre futur outil.

Pour réaliser les interfaces graphiques de sites web il existe de nombreuses solutions. En effet, plusieurs outils sont aujourd’hui disponibles afin de nous permettre de voir au mieux l’aspect de notre application avant sa mise en production. Au delà de traditionnelle salle de réunion avec un paper board que nous connaissons tous, des outils plus performants et nous permettant de modéliser plus en détails ce que l’on attend de notre application sont disponibles.

—Les applications web et les logiciels

Les applications web

Pour la modélisation d’application web, nous utilisons ce qu’on appelle des logiciels de Moke Up. Un moke up signifie littéralement « maquette à l’échelle » et il permet de faire des prototypes de l’interface utilisateur. Le but est de réaliser de manière agile, intuitive et réactive les différentes interfaces d’une future application web ou mobile. Sachant que cette activité n’est (heureusement) plus réservée qu’aux professionnels. Voici une liste non exhaustive des outils disponibles classés selon nos moyens et nos attentes :

tableau

Balsamiq Mockups : Prototype d’interface utilisateur qui permet de réaliser des maquettes d’application créé en 2008. Il est compatible avec les trois OS principaux : Windows, Linux et MAC. Il est gratuit dans sa version web et payant dans sa version client.

Cacoo : Site web de travail collaboratif pour créer rapidement un croquis ou un diagramme élaboré. On peut à la fois concrétiser un schéma ou un organigramme complexe pour une entreprise et de poser quelques idées de site web ou d’application pour téléphone portable, grâce à ses éléments d’interface intégrables dans le croquis.

JustInMind : C’est un outil qui permet de faire du prototypage et de la simulation d’applications en ligne. JustInMind permet de générer des spécifications fonctionnelles au format Word.

Mockup Builder : Comme Balsamiq Mockups, c’est une application web qui permet de créé des maquettages de site web. Elle a l’avantage d’être un bon outil collaboratif de part le fait de pouvoir gérer les accès des personnes et de permettre des modifications directement sur les maquettes.

Concept Draw : C’est un outil d’analyse et de gestion de projets professionnels, prenant en charge les ressources humaines et matérielles. Concept draw est un logiciel de conception et d’organisation de travail en équipe.

Outils modélisation logiciel

 L’uml est un langage de modélisation graphique utilisé en développement logiciel.

En effet durant la conception d’un logiciel il est utile de pouvoir schématiser les classes, leur hiérarchie, leurs dépendances ou encore leur architecture. Le but est de pouvoir, facilement, représenter le fonctionnement du logiciel. Deux outils freeware de modélisation UML et simples d’utilisation servent à cet effet : ArgoUML et BoUML.

Un design agile avec le Prototypage Papier

https://www.youtube.com/watch?v=oITeUEjrY3Q

Un logiciel conçu et commercialisé, non testé, est forcément un logiciel critique et non apte à l’utilisation. De ce fait, un développement accompagné par des tests au fur et à mesure, permet d’obtenir des produits de grande qualité suscitant probablement un grand intérêt du public.

Ceci ne serait-il pas pratique d’avoir cette même approche pour les conceptions d’ordre visuelle ou encore d’interactions ?

Oui, cela est possible et oui nous pouvons le faire.

Le prototypage (ou mSans titre 2aquettage) papier est une méthode simple pour tester les interfaces d’interactions homme-machine.Ce maquettage papier est un outil facilitant aux parties prenantes d’un projet, la conception de logiciel ou site web, tout en étant centré sur l’utilisateur et répondant à ses attentes et ses besoins.

Protocoles du Prototypage Papier

Vous voulez concevoir un site web, une application, un logiciel.

Vous préparez un scénario en créant des dessins en fil de fer (WireFrame) pour les différents écrans qu’un utilisateur peut rencontrer au cours de l’interaction avec la machine :

–          Un facilitateur (animateur) fournit l’explication nécessaire pour passer le test, donne des détails sur la procédure du prototypage papier, tout en présentant les tâches à effectuer et aide l’utilisateur en cas de difficultés rencontrées. L’animateur demande à l’utilisateur de réfléchir à voix haute lors de l’exécution de la tâche (par exemple, rechercher une référence de document sur un site web)

–          Un membre de l’équipe de conception joue le rôle d’un ordinateur afin d’animer l’interface en fonction des actions choisies par l’utilisateur. Tout en gardant le silence (condition très importante), l’ordinateur « affiche » un écran en plaçant une wireframe en face de l’utilisateur. L’ordinateur se doit de connaître assez finement le fonctionnement de l’interface, de telle sorte à assurer des temps de réponses acceptables.

–          L’utilisateur interagit avec le prototype papier en utilisant un crayon ou tout autre outil. Cette tâche est semblable à l’utilisation d’une souris d’ordinateur ou encore d’un clavier.

–          L’ordinateur répond en présentant des wireframe représentatifs de menu déroulant, ou encore en « rafraîchissant » l’écran par le remplacement du wireframe affiché.

–          L’utilisateur interagit ensuite avec le nouvel écran, l’ordinateur donne une réponse, et l’interaction se poursuit jusqu’à ce que la tâche soit effectuée.

Etant simple d’utilisation, ce prototypage doit cependant s’en tenir à une règle essentielle : aucune conversation. L’utilisateur doit réfléchir à haute voix sans poser de questions, et l’ordinateur exécute son rôle en silence. Cette contrainte oblige toutes les interactions qui ont lieu entre souris/clavier et rafraîchissement des écrans simulées. Les tests appliqués doivent nécessairement respecter cette contrainte afin de valider les résultats obtenus en comparant les tests effectués par différents utilisateurs.

Des séances de tests filmées avec un observateur qui prend des notes tout au long de l’évaluation, permet de repérer à quelles étapes l’utilisateur a trébuché ou a fait un mauvais choix dans le processus. Réfléchir à haute voix fournira des informations précieuses sur les processus de pensée des utilisateurs et proposer ainsi des améliorations de conception.

Sans titre 3

 

 

 

 

 

 

Le prototype papier dans la pratique

Les prototypes papiers sont utilisés pour évaluer les conceptions web assez complexes. Les séances de tests ont permis d’identifier des zones de confusion, chose qui pourrait être amélioré, par exemple en proposant une séparation visuelle pour les utilisateurs, entre des éléments similaires. Ces modifications suite aux attentes de l’utilisateur peuvent, grâce à ces prototypes, être appliquées avant le lancement du projet pour le développement informatique.

Plus important encore, le prototypage papier fournit des preuves tangibles à utiliser dans la « bataille de la page d’accueil ». En effet dans les grandes Sans titre 4organisations, chacun veut voir son projet présent dans la page d’accueil de l’entreprise : un lien visible afin de se donner de l’importance et mettre en valeur les projets réalisés. Les résultats des tests de prototypage papier ont clairement démontré que cela se traduirait par une page d’accueil trop complexe et très déroutante pour les utilisateurs. La conception de la page d’accueil se doit être simple pour les utilisateurs tout en restant efficace.

La valeur ajoutée du prototypage papier résulte de deux caractéristiques interdépendantes :

–          Faible coût de développement

–          Réalisé en amorce du projet (site web, application, logiciel…etc)

En effet, vous n’aurez pas à attendre la conception complète de haute-fidélité du projet avant de pouvoir le tester. En tirant profit des tests utilisateurs à travers les prototypes papiers, plusieurs réajustements seront faits. Le plus tôt les erreurs corrigées, il sera moins cher de le faire.

La réalisation de wireframes pour les futures applications, sites web &cie, est simple et ne nécessite pas un grand investissement. Les résultats obtenus à partir du prototypage papiers sont pris en considération dans la phase de conception de haute-fidélité avant de s’engager dans la mise en œuvre du logiciel proprement dit, qui est à la fois, la phase la plus coûteuse en elle-même, et aussi l’étape où apporter des modifications à la conception devient très coûteux.

Susciter des commentaires de l’utilisateur final au début du cycle de conception permet de tester des hypothèses, supprimer les erreurs, intégrer des suggestions d’amélioration, et de hiérarchiser l’ensemble des fonctionnalités. Le prototypage papier fournit un processus fondé sur des données probantes pour réduire les coûts de restructuration et d’optimiser la qualité d’interactions humain-ordinateur.

Exemples de prototypage papier :

https://www.youtube.com/watch?v=GrV2SZuRPv0

https://www.youtube.com/watch?v=6TbyXq3XHSc

Le support : Le tactile, la plus fine frontière entre le client et son application  

Sans titre 5

La collaboration est la base même d’une entreprise et avec l’arrivée des nouveaux moyens de communication, les entreprises souhaitent améliorer la collaboration entre les différents membres de leurs équipes et les clients ; qu’ils soient dans un même bâtiment ou distants de plusieurs milliers de kilomètres. De nombreux outils utilisés quotidiennement dans l’entreprise permettent de créer des interactions et de communiquer (le mail, les réunions, le téléphone, la visioconférence, etc.)
Mais lors de la conception d’une application, comment réussir à immerger le client dans son propre projet de tel sorte à répondre parfaitement à ses exigences ? A l’ère du numérique quel est la solution la plus pratique et performante ? La projection statique en réunion? Le Paperboard ? Le tableau blanc ? …

Aujourd’hui pour se démarquer de la concurrence en proposant une expérience unique à vos clients, il faut opter pour une solution tactile innovante. Une table ou un tableau blanc interactif c’est la certitude de surprendre tout en associant efficacité et esthétisme.

Sans titre 6

Comment ça marche ?

Il existe plusieurs types de mise en œuvre pour les écrans tactiles, chacune ayant ses avantages et inconvénients. Le choix de l’une ou l’autre de ces technologies se fera en fonction des critères de prix, de résistance aux chocs, de précision ou de taille. La plus ancienne est la technologie dite « résistive », la plus économique. Aujourd’hui, cette technologie a tendance à céder la place à la technologie « capacitive », plus résistante dans le temps et plus agréable pour l’utilisateur, notamment sur le plan de la luminosité de l’écran.

La technologie d’écrans tactiles capacitifs s’appuie sur une surface solide de type verre, laquelle est parcourue par une grille électriquement chargée et invisible à l’oeil nu. L’accumulation de charges électriques sur la plaque de verre lors du contact des doigts de l’utilisateur transfère une partie de ces charges dans les doigts, ce qui provoque un déficit qu’il suffit ensuite de localiser pour traiter l’information. Ce traitement de l’information se fait dans le périphérique.

Sans titre 7

Une troisième technologie, celle des dalles tactiles à infrarouge, très résistante, n’est pas un véritable écran. C’est un cadre équipé d’émetteurs et de récepteurs infrarouges.

Sous différentes formes, le tactile présente des avantages sans pareil.

Aujourd’hui, grâce au tactile, le geste retrouve son naturel et sa logique : le doigt s’approche de l’écran, déplace des images, les agrandit ou les rétrécit à loisir. C’est presque magique.

Une étude de HP-Photosmart, réalisée en 2012, montre que plus de 91 % des Français louent ce système. « Grâce au toucher, l’objet numérique devient plus réel, analyse Yann Leroux, psychanalyste, auteur du blog Psy et Geek, comme si on pouvait entrer dans les images affichées, c’est grisant. »

De plus les appareils intégrant la technologie tactile, sont jugées « plus beaux » selon 71% des sondés. En effet, sans clavier, ni fil, ni bouton, l’appareil, épuré, devient séduisant. « Il n’y a plus d’intermédiaires – clavier, souris – entre l’utilisateur et le contenu de son écran, précise Yann Leroux. Il agit directement sur ce dernier, et ce sentiment de maîtrise est flatteur. » L’interface tactile représente la modernité et la nouvelle ère. Il est toujours gratifiant de se sentir dans l’air du temps, et même en avance.

Sans titre 8

La machine devient presque humaine, prolongement de nous-même. Pourtant, cette technologie n’a pas que des avantages. Le temps de réaction peut être long, l’écran est salissant… Comme le résume Jean-Claude Kaufmann : « L’usage réel du tactile n’est pas aussi facile que l’usage rêvé, mais le rêve va toujours plus vite que la technologie !

De plus, il existe sur le marché des solutions spécialement dédiées à tous les secteurs d’activité. En effet, il est possible d’acheter une borne, une table ou un totem tactile sur mesure intégrant des matériaux exclusifs ainsi que l’ensemble des fonctionnalités recherchées. Un outil de communication digital haut de gamme donnant la priorité au design sans pour autant transiger avec les performances, la fiabilité et la sécurité.

Plusieurs entreprises proposent aujourd’hui des solutions nouvelles, surprenantes, qui sauront faire de répondre aux besoins de la conception d’application : DIGILOR, KINETI, ITEKUBE, etc.

Ce support permet d’accroitre la créativité des différents acteurs d’un projet lors d’une discussion ou d’une réunion de travail. Aussi, il est t possible de garder des traces d’un échange et de la structuration de la pensée.

Sources :

http://www.psychologies.com/Culture/Medias/Articles-et-Dossiers/Pourquoi-le-tactile-nous-touche

http://interfacetactile.com/ecran-tactile-capacitif

http://balsamiq.com/products/mockups/

https://cacoo.com/diagrams/3IpDz9BFFORJtvWg

http://www.justinmind.com/

http://mockupbuilder.com

Hazzaz Zakaria – Ouzgane Ismail – Safir Mouna, FI15

Written by Elèves de CASI

mai 16th, 2014 at 2:56

Posted in CASI'14