Archive

Archive for the ‘Outils’ Category

Un intranet 2.0 dans une organisation publique? Ça se peut!

13 décembre 2012 1 commentaire

Le projet d’implantation d’un intranet 2.0 à la Ville de Québec a débuté au cours de l’année 2010. La refonte de l’intranet a alors été considérée comme une priorité pour stimuler et améliorer la communication interne à la Ville.

L’intranet 1.0 : une source d’information accessoire

L’intranet datait de plusieurs années. Les employés le fréquentaient presque uniquement pour le bottin téléphonique ou la consultation de procès-verbaux.  Il n’était pas considéré comme une source d’information importante.

Par ailleurs, des sondages et des consultations auprès de nos employés nous avaient démontré  qu’il y avait un énorme travail à faire en communication interne. Les employés nous disaient entre autres :

  • manquer d’information
  • travailler en silos
  • ne pas savoir où chercher l’information dont ils avaient besoin dans le cadre de leur travail
  • ne pas connaître les autres services de la Ville
  • ne pas avoir suffisamment de reconnaissance.

De plus, le personnel exerçait des pressions pour que le journal interne ne soit plus imprimé en si grande quantité. Le courriel était également sur-utilisé pour informer les employés sur toutes sortes de sujets, de niveaux d’importance divers. Évidemment, en raison de l’étendue de l’organisation, la circulation de l’information était complexe et les moyens pour rejoindre les employés ne semblaient plus efficaces.

1re  étape : la prise en compte des besoins des employés et des  « générateurs de contenu »

Les employés voulaient un intranet qui soit un outil de travail convivial, qu’ils puissent personnaliser et dans lequel la recherche serait efficace. Certains employés nous ont également dit ne pas le consulter à cause du manque d’accès à des postes informatiques (employés de terrain).

La détermination de ces besoins a conduit à l’adoption d.orientations stratégiques et d’objectifs principaux. En somme, nous voulions concevoir un site :

  • qui soit la 1re source d’information pour l’ensemble des employés
  • qui permette la diffusion et le partage de cette information, en mode collaboratif et participatif
  • dont l’arborescence s’articule autour des besoins et non de la structure administrative
  • accessible directement en ouvrant le poste de travail et à l’extérieur des bureaux de la Ville (à la maison par exemple)
  • qui contribue à renforcer le sentiment d’appartenance et la mobilisation des employés
  • qui facilite le travail des employés, peu importe où ils se trouvent, et s’arriment à leurs habitudes
  • qui encourage le réseautage et stimule la vie sociale
  • que tous les employés s’approprient et consultent régulièrement.

La technologie choisie par le Service de technologies de l’information a été SharePoint 2010. Il faut dire que SharePoint 2003 (WSS) était déjà très utilisé dans l’organisation et que la plupart des services avaient des intranets sectoriels en WSS. Un des objectifs de cette refonte était également de rapatrier tous les intranets sectoriels sous l’intranet de la Ville et d’hiérarchiser l’information.

Pourquoi un intranet 2.0 ?

Dès le départ, nous souhaitions offrir une plate-forme collaborative et participative.  Nous voulions donner des nouveaux outils aux employés pour qu’ils puissent transmettre de l’information et s’exprimer.

Nous espérions aussi que les employés s’approprient réellement l’intranet, que celui-ci ne soit pas seulement l’intranet des Ressources humaines ou des Communications. Nous avons donc donné la parole aux employés, mais de façon encadrée.

Nous avions enfin comme objectif de décentraliser la diffusion de l’information. Dans l’ancien intranet, seul le Service des communications pouvait déposer des documents ou publier de l’information, ce qui était très lourd à gérer. Nous envisagions d’élargir le nombre de diffuseurs en maintenant une équipe responsable du contenu et de la modération sur tout ce qui est publié.

Les principales fonctionnalités 2.0 du nouvel intranet

  • Actualités avec section Commentaires.
  • Babillard pour diffusion des avis de retraites, de l’annonce de l’arrivée de nouveaux employés, des naissances, décès, petites annonces, etc.   Près de 50 fournisseurs de contenu y ont accès.
  • Club social pour les annonces de ce club. La diffusion de ces annonces est réservée aux administrateurs eux-mêmes.
  • Toute la documentation de la Ville alimentée et mise à jour par près de 200 fournisseurs de contenu.
  • Forum  ouvert à tous les employés.
  • Favoris personnalisables par chacun.
  • Mes outils de travail, une section elle-aussi personnalisable.
  • Un accès direct à l’intranet sectoriel de l’employé.
  • La liste des sites de collaboration auxquels l’employé a accès.
  • Bottin avec fiche « enrichie » sur l’employé (description, photo, activité récente, etc.).

Album photos : quelques captures d’écran de l’intranet de la Ville de Québec.

Un vaste chantier qui implique une importante gestion du changement

Implanter un intranet collaboratif, c’est aussi transformer les façons de faire et le travail de plusieurs personnes. Au-delà du concept, de l’architecture d’information, de l’analyse fonctionnelle, de la rédaction de contenu, du design graphique, il nous a fallu penser à la gestion du changement et de la transformation organisationnelle.

La gestion du changement a certainement été un des volets auquel nous avons consacré le plus de temps et d’énergie durant près de 2  ans.  Nous y avons travaillé à l’aide de plusieurs activités de communication.

  • Présentations du projet à tous les gestionnaires.
  • Présentations aux employés.
  • Implication de la Direction générale dans le projet.
  • Rencontres avec des employés pour recueillir les contenus.
  • Conception d’outils de formation (guide, capsules en ligne) et  formation des fournisseurs de contenu de l’intranet.
  • Diffusion d’une vidéo promotionnelle annonçant le nouvel intranet dans l’ancienne plateforme et par les gestionnaires lors des rencontres d’équipes.

Un accueil favorable

Le nouvel intranet 2.0 a été très bien accueilli par l’ensemble des employés et des gestionnaires. Dès les premiers jours, les sections personnalisables telles que Mes outils et Mes favoris ont remporté un tel succès qu’elles ont franchi le maximum d’utilisateurs prévus par le système. Il a donc fallu se réajuster très rapidement et augmenter la capacité de personnalisation.

Depuis le 29 mai 2012, nous avons en moyenne 3 000 visiteurs uniques par jour et au-dessus de 50 000 pages vues quotidiennement. Les 10 principales destinations sont :

  • le bottin
  • les actualités
  • les outils de travail
  • les sites de collaboration
  • le babillard
  • les mouvements de personnel
  • la documentation
  • la section Ressources humaines
  • le club social
  • les intranets sectoriels.

Les forums arrivent au 15e rang. Environ une vingtaine de forum ont été créés depuis le lancement, mais  dans le dernier mois, près de 1 000 visiteurs uniques ont lu au moins un billet sur le forum.

Nous devrons  investir plus d’efforts pour inciter les gens à utiliser davantage le forum, car lorsqu’il est utilisé pour faire des appels à tous, il répond aux besoins des utilisateurs.

Autre fait important à souligner:  aucun commentaire d’employé a dû être retiré de l’intranet . Les gens étant obligatoirement identifiés lors d’une action collaborative dans l’intranet, on observe un phénomène d’autorégulation assez fort.

Les commentaires sur les actualités fonctionnent très bien, surtout lorsque l’actualité concerne directement des employés. Les gens s’en servent beaucoup pour faire de la reconnaissance envers leurs collègues.

Et ce n’est pas fini!

Nous sommes présentement en phase 2 du projet. Cette phase vise l’implantation d’autres fonctionnalités.

  • Calendrier corporatif avec tous les événements et activités de la Ville (internes et externes)
  • Blogues avec blogueurs identifiés et sujets soumis pour approbation à l’équipe responsable de l’intranet
  • Bienvenue aux nouveaux employés – Section personnalisable visible seulement par les nouveaux employés
  • Publication des avis de concours dans l’intranet par les Ressources humaines en remplacement d’un courriel envoyé à tous les employés systématiquement
  • Alertes informatiques – Section en page d’accueil informant les employés des pannes et problèmes informatiques et des travaux informatiques qui peuvent avoir des conséquences  sur leurs outils (mise à jour d’un système, etc.)
  • Étoiles pour évaluer le contenu.

Après cette phase, l’ouverture à l’externe et l’accès aux plateformes mobiles  seront nos prochains défis!

Marie-Ève Humbert, conseillère en communication, Ville de Québec
Collaboration spéciale

En complément :

  •  Entrevue vidéo avec Marie-Ève Humbert et Martin Vézina de la Ville de Québec. Ils y décrivent les principales étapes de conception du nouvel intranet.
Publicités

Faire des sites Web pour mobiles – Deuxième partie: Quelles sont les options techniques?

10 septembre 2012 4 commentaires

Cet article est le second d’une trilogie pour aider les spécialistes du Web du gouvernement du Québec à prendre des décisions concernant la création de sites pour mobiles.

Le premier article avait pour objet l’intérêt de faire des sites pour mobiles, alors que le présent billet devrait guider le lecteur vers l’une des diverses méthodes qui peuvent être utilisées pour répondre à la nouvelle clientèle.

Comme il a été vu dans le précédent article, la technologie mobile est en pleine explosion et il n’existe pas de standards bien définis quant à la réalisation des sites. Ainsi, plusieurs méthodes s’offrent à nous et il importe de connaître les avantages et inconvénients de chacune.

Quelles sont les options pour faire un site adapté pour mobile?

La création de sites pour mobiles implique que l’on doive faire un choix quant au type de technique à employer pour optimiser le site sur les appareils. Il existe diverses méthodes ou approches que l’on peut mettre en place, mais aucune n’est parfaite, toutes ont leurs petits désagréments.

Le prochain schéma présente les différentes méthodes que l’on peut mettre en place actuellement, car il y a fort à parier que de nouvelles approches soient développées au cours des prochaines années.

On retrouve sur le blog de Google un article qui expose les différences entre les deux principales techniques.


Figure 1: Présentation de diverses approches de conception de sites adaptés pour mobiles. Dans tous les cas, il s’agit de présenter l’information stockée sur une base de données et de s’assurer d’un affichage optimal pour l’utilisateur.

Le site dédié

L’approche du site dédié pour mobile est celle qui est la plus traditionnelle. Dans les faits, le site dédié est une duplication, un autre site, qui lui est optimisé pour les petits appareils.

Cette approche est la plus sécuritaire et la plus simple, du moins, en apparence. Le tout repose sur une des diverses techniques de détection de l’appareil et on dirige l’utilisateur vers un site créé spécifiquement pour les appareils mobiles.

Les risques

Un site dédié pour appareils mobiles implique que l’on détecte que c’est un appareil mobile. Donc, on doit déterminer quels sont ces appareils, ce qui devient assez complexe.

Avant de poursuivre, je me permets une petite parenthèse…

Vous souvenez-vous ces quelques sites qui ont été créés au début des années 2000 qui, aujourd’hui encore, lorsque consultés avec Chrome, Safari ou Firefox, dernières versions, nous indiquent que notre fureteur est trop vieux et que nous devrions utiliser Internet Explorer 6 ou Netscape 4?


Figure 2: Encore aujourd’hui, des services ont été conçus pour des fureteurs précis et ne tolèrent pas d’autres logiciels (Chrome 20 ici). Des situations semblables vont se produire pour les appareils mobiles. Par exemple, une tablette non reconnue pourrait être vue comme un mobile et forcer l’affichage réservé aux petits écrans sur un écran de haute résolution, ce qui n’est pas souhaitable.

Fin de la parenthèse.

Il arrive aussi que des développeurs bien intentionnés crée de véritables cauchemars pour les utilisateurs mobiles. XKCD en a fait une superbe démonstration:

Figure 2: Capacité d’attention d’un serveur Web, il est bien connu qu’il oublie vite qui nous sommes, ce qui peut nous causer bien des problèmes.

Ce qu’illustre XKCD est un problème commun. Plutôt que de permettre à l’utilisateur d’accéder au contenu désiré, le serveur dirige toujours vers la page d’accueil. Il devient donc virtuellement impossible de consulter la page, à moins de s’envoyer le lien par courriel et d’utiliser un appareil «standard».

Parallèlement, la technique du site dédié permet aussi de trier les contenus qui seront diffusés pour mobiles et, par le fait même, optimiser la navigation des utilisateurs. Or, il y a un risque de «balkanisation», un peu à la manière de ce qui se passait à la fin es années ‘90 avec les fureteurs. J’ai par ailleurs fait un billet sur le sujet sur mon blogue personnel, si ça vous intéresse d’en savoir plus sur le sujet.

En sélectionnant des contenus qui ne sont pas accessibles pour mobiles, nous décidons pour l’utilisateur quel est son réel besoin sans prendre en considération qu’il pourrait décider de consulter un contenu que nous jugeons inutile pour lui.

Finalement, le fait d’avoir un site pour mobile et un site pour appareils «réguliers» implique que chaque page a son propre URL, donc des contenus identiques sont dédoublés. Ce n’est pas un problème majeur, mais il y a des irritants, comme dans les moteurs de recherche ou bien lorsqu’un lien mobile est transféré à un utilisateur d’appareil standard et qui sera forcé de consulter le contenu en version mobile.

Avantages

Il n’y a pas que des inconvénients aux sites mobiles. Un des avantages de cette méthode est l’optimisation. Effectivement, puisque l’on crée un site spécifiquement pour appareils mobiles, il devient possible d’optimiser le code de façon à limiter l’usage souvent restreint de bande passante des appareils.

Les pages sont alors plus rapides à charger et la navigation peut être plus agréable. Parlant de navigation, il est aussi possible de revoir complètement l’approche de navigation à l’intérieur du site pour mettre à profit des fonctions de l’appareil ou bien les particularités de l’écran tactile.

Contrairement à l’approche du design adaptatif, celle-ci repose sur le SGC et des méthodes de détection du fureteur (user agent) qui comportera des gabarits qui seront conçus pour les appareils mobiles. Ainsi, on retrouvera un code HTML, des JS et autres CSS et images qui seront conçus pour les mobiles, d’où la mention d’optimisation.

On peut aussi, dans un site mobile, intégrer la notion de «contenu différencié», donc que l’on décide quel contenu sera visualisé sur mobile en opposition à celui présenté sur le site régulier. Mais attention à la balkanisation!

  • Le site peut être optimisé pour mobile et comporter des gabarits plus légers et des images de plus petite taille, limitant la charge et facilitant le téléchargement sur les réseaux mobiles;
  • Le site étant indépendant du site régulier, on peut sélectionner certains contenus qui ne seront disponibles que dans une version ou l’autre;
  • La gestion de projet peut être simplifiée et il est possible de créer un site mobile une fois le site régulier conçu car l’impact en l’un et l’autre peut être minimal;
  • On peut créer un site mobile qui comporte une application (type HTML5) permettant de faire du transactionnel.

Inconvénients

  • Des erreurs de conception peuvent créer de forts désagréments pour l’utilisateur, par exemple, de forcer l’utilisation de la version mobile;
  • Un utilisateur de tablette avec une résolution élevée ne désirera pas nécessairement utiliser la version mobile qui lui sera imposée par défaut;
  • Tout le contenu du site devrait être accessible en version mobile et régulière, ce qui n’est pas toujours le cas;
  • Il faut souvent dédoubler la gestion du site (version mobile et standard);
  • Certaines technologies ne supportent pas bien la création de sites mobiles (cas vécu…);
  • Il y a un risque de balkanisation du Web.

Responsive design ou design adaptatif

Présentée en 2010, mais popularisée principalement en 2011 par Ethan Marcotte#, la technique du design adaptatif, mieux connue sous le vocable anglais de «Responsive Web design» est une approche permettant d’adapter le contenu à la largeur de l’écran de l’utilisateur, sans tenir compte de l’appareil utilisé.

Figure 2: Le responsive Web design est une technique permettant d’afficher une même page Web de façon différente selon la largeur de l’écran de l’utilisateur.

La technique

Techiquement, c’est relativement simple (en théorie). Le principe se base sur l’adoption récente des dernières technologies Web, comme le HTML5 et le CSS3 par les fabricants de fureteurs.

Tel que présenté dans la figure 1, la technique repose sur l’utilisation d’une différenciation par CSS de la largeur de l’écran (en utilisant les media queries). Ainsi, on pourra appliquer des feuilles de styles selon la largeur de l’écran et afficher ou cacher, disposer différemment ou modifier l’apparence des éléments de contenu de la page.

C’est le paradis, alors!

L’un des avantages indéniables de cette approche, c’est qu’un seul et même site s’adapte au besoin, selon l’écran. Aucune détection particulière du navigateur ou de l’appareil, un seul URL par page. Bref, ça pourrait être le paradis!

Ce n’est pas toujours le cas…

Mettre une approche de design adaptatif dans un site n’est pas toujours de tout repos. L’expertise est encore jeune, de nouvelles approches sont annoncées chaque semaine (ça nous rappelle un peu la période début 2000 où on abandonnait les tableaux pour faire le positionnement en CSS pures). Bref, c’est une méthode récente qui évolue sans cesse et rapidement.

De plus, un gros inconvénient, c’est le code. Si un seul et même site sert les appareils lourds et les appareils légers (mobiles), on a le même rendu HTML et tout ce qui suit (JavaScript et images). Bon, il existe des techniques complexes pour éviter le téléchargement inutile d’images, mais c’est encore assez complexe.

On se retrouve donc avec un site ajusté pour mobiles, mais qui n’est pas optimisé.

Avantages

  • Permet de transposer l’ensemble du contenu d’un site en format adapté pour mobile simplement par l’utilisation de CSS;
  • Il n’est pas nécessaire de modifier le système de gestion de contenu (SGC), ce sont les gabarits qui feront l’ensemble du travail;
  • Il n’y a pas de gestion en double du contenu;
  • Permet d’optimiser l’affichage pour des largeurs d’écrans et non des appareils, ainsi on évite des écueils des différentes plateformes technologiques;
  • On ne retrouve pas le contenu sous deux URL différentes car c’est la même page qui s’affiche dans tous les cas;
  • Les coûts récurrents de maintenance sont réduits par rapport à la création de sites mobiles distincts.

Inconvénients

  • Il ne s’agit pas d’une «optimisation du site pour mobile», car le HTML et les codes JS demeurent les même que pour un site non-mobile, impliquant une surcharge de poids et une lenteur possible du chargement de la page;
  • Il faut que le design adaptatif soit pris en considération dès le début du projet par l’équipe de conception pour créer l’ergonomie, le design et le code en conséquence, en plus d’adapter la gestion de projet;
  • Il peut s’avérer très lourd de faire la gestion de plusieurs CSS en même temps et les impacts du redimensionnement peuvent être parfois difficiles à prévoir et demander plus de temps de corrections;
  • C’est une approche qui peut engendrer des coûts supplémentaires lors du développement, principalement si l’équipe de travail est peu familière avec le design adaptatif, ce qui tend à diminuer une fois l’équipe bien formée;
  • Il n’est pas possible d’afficher le site en «format régulier» car l’affichage s’adapte selon la largeur de l’écran automatiquement.

Design adaptatif «optimisé»?

Depuis peu, on parle de solutions hybrides, où on inclurait des approches de sites dédiés au design adaptatif. Cette méthode hybride est nommée «Responsive Web design with Server Side components», mieux connue sous le vocable RESS.

Le développement d’application pour mobile

On parle d’application pour mobiles, du type de celles que l’on retrouve dans les AppStores, les magasins d’applications en ligne. Celles-ci sont conçues pour des technologies spécifiques (iOS, Android, WindowsPhone7 ou BlackBerry). Luke Wroblewski parle de «Device experience», une approche plus large qui englobe plus que seulement le mobile.

Dans le cas qui nous intéresse, les applications peuvent s’avérer fort intéressantes dans certaines situations principalement lorsque l’on doit transiger avec la clientèle (transactionnel) ou bien pour mettre à profit certaines fonctionnalités de l’appareil (contacts, GPS, stockage, méthodes de saisies des données, gyroscope…).

Malgré tout, il faut se demander quel est l’intérêt pour une organisation gouvernementale de développer elle-même une application. Les coûts de conception et d’entretien peuvent facilement monter en flèche et il peut s’avérer difficile de faire la maintenance vu la variété d’appareils ou de versions de systèmes d’exploitation sur le marché. De plus, le développement d’applications par les organismes gouvernementaux va plutôt à l’encontre de l’orientation d’ouverture des données publiques qui permet aux citoyens et aux entreprises de créer des applications à partir de ces données.

Avantages

  • Permet d’optimiser au maximum l’utilisation des fonctions de l’appareil mobile et l’interface utilisateur;
  • Les applications sont spécifiques et peuvent s’avérer fort utiles pour certaines clientèles spécifiques.

Inconvénients

  • Il faut développer pour une technologie spécifique ou dédoubler le travail pour toutes celles que l’on désire supporter;
  • Une application pour téléphone sera mal affichée sur une tablette et nécessitera un nouveau développement;
  • Il faut maintenir l’application à jour;
  • Il s’agit d’un développement complet, avec tout ce que ça implique.

Avant d’aller plus loin, je vois poindre les commentaires au sujet des applications HTML5, comme quoi c’est une option viable. Effectivement, il faudrait penser à regarder de ce côté.

Dans les faits, si je ne m’abuse, c’est ni plus ni moins un site dédié dans lequel on retrouve une application (en HTML5), non?

Données ouvertes et API

L’ouverture des données publiques n’est pas, à proprement parler, une approche pour mobile. Effectivement, on parle ici de rendre disponible diverses données spécifiques, via un site dédié ou bien par l’utilisation d’API («Application programming interface») à des développeurs externes du gouvernement qui pourront alors les utiliser dans leurs développements informatiques.

Ainsi, contrairement à toutes les autres approches présentées, au lieu de faire le travail de mobilité, on propose ici d’offrir les données de façon à ce qu’une autre entité puisse développer une application, un site ou autre en utilisant des données que l’organisation rend disponibles.

Il est impossible de déterminer quels seront les produits développés à partir des données ouvertes, ni même quelle en sera leur utilisation, c’est pourquoi on devrait considérer cette approche comme étant complémentaire à toutes les autres.

Oh, et une partie du boulot a été déjà faite, par le biais du portail de données ouvertes du gouvernement du Québec (ne manque que la variété des données qui viendra avec le temps).

Finalement, peu importe la solution de mobilité choisie, certaines données devront être offertes pour que la communauté puisse bâtir des solutions avec ces dernières.

Le choix d’une solution

Choisir une approche mobile, voici maintenant le nœud de l’histoire. Comment fait-on pour déterminer ce qui est le meilleur choix pour notre organisation et notre clientèle? Plein d’éléments doivent être pris en ligne de compte. Premièrement, a-t-on réellement besoin d’une approche de mobilité?

Le premier article de la série est assez évocateur. Oui. Bon, maintenant, on fait quoi?

Je tiens à rappeler que cette série d’articles s’adresse principalement aux responsables de sites du gouvernement, donc d’organismes publics, qui ont comme principal objectif de diffuser de l’information et ce, à moindre coûts et avec un maximum de facilité pour l’utilisateur.

Luke Wroblewski, qui nous a gratifié d’un passage au Web à Québec en février dernier, résume très bien les questions que l’on doit se poser lorsqu’on veut faire un choix.

Il propose trois options:

  1. Responsive Web design (design adaptatif);
  2. Optimisation pour l’appareil (Device experience);
  3. Design adaptatif avec composants serveurs (RESS).

Pour les besoins de la cause, je vais regrouper les options 1 et 3 sous un même nom, soit design adaptatif. C’est ni plus ni moins des solutions de design adaptatif, mais la 3e comporte un volet de détection de l’appareil et des modifications au niveau du serveur. C’est un «design adaptatif aux stéroïdes», si vous préférez.

Là où on a un élément de précision, c’est au point 2, quand LukeW parle de «Device Experiences». Il traite ici une d’approche à la Netflix, où on fait une application selon le type d’appareil utilisé (ex. mobile Android, iOs, ordinateur, console de jeux…). Bref, du développement d’application très poussée.

Compte tenu du contexte gouvernemental du présent article, je me permet de mettre de côté l’approche de développement d’application, onéreuse et complexe.

À moins d’une raison vraiment exceptionnelle, il y a peu de chances que les coûts engendrés par cette approche puissent être justifiables. Il nous reste donc deux candidats: les sites dédiés (non mentionnés par LukeW) et le design adaptatif.

Lequel choisir? Personnellement, je crois que la majorité des sites gouvernementaux seraient nettement plus viables en offrant une interface réactive à la largeur de l’écran de l’utilisateur plutôt que de rediriger vers un site mobile. La raison est simple: les coûts.

Pourquoi favoriser le design adaptatif?

Lors du design d’un site, on doit créer un visuel et les CSS qui y seront appliqués, de toute façon. Prévoir un montant légèrement plus élevé pour intégrer la notion de design adaptatif n’est pas si sorcier et permet de rejoindre facilement nos utilisateurs peu importe leur outil de visualisation.

La création d’un site mobile dédié nécessite une intervention au niveau de la techno, soit sur le serveur. On parle de redirection, de détection de l’agent utilisateur (user agent), de création d’URL et parfois de gestion particulière au niveau du CMS. Bref, des interventions qu’une équipe de communications devra reléguer à celle du développement et que ces équipes devront reléguer souvent, à leur tour, à l’équipe de gestion des serveurs. Vous voyez le tableau.

Un design adaptatif qui ne comporte qu’une détection de la largeur de l’écran en CSS3 est, en théorie, plus facile à implanter. Une fois le tout en place, ça se maintient relativement bien. Par contre, il faut éviter des pièges.

N’oubliez pas qu’un site adaptatif utilise le même code HTML, les mêmes CSS (ou presque) et le même JavaScript. Il n’est pas rare de voir des sites ne passant tout simplement pas sur mobile, comme celui d’un parti lors de la dernière élection provinciale, qui avait un poids moyen de ses pages de 3,6 Mo sur mobile, en design adaptatif.

Plutôt que de voir le site, on avait un message nous avisant que le fureteur était incapable d’afficher le site.

La mort du site dédié?

Non, le site dédié a encore son utilité. Dans certains contextes, il sera préférable de choisir cette approche. Ne serait-ce que pour des sites ou portions de sites impliquant une saisie par l’utilisateur, des applications Web ou de l’affichage de données important.

On pourrait aussi penser à de gros systèmes gouvernementaux complexes qui pourraient nécessiter un volet mobile multiplateformes et optimisé le plus possible.

Certains sites informationnels seraient peut-être aussi susceptibles de bénéficier d’un volet dédié, si on décide de favoriser une portion du contenu plutôt que de rendre disponible l’ensemble de l’information du site, pour des raisons éditoriales ou autres.

Bref, on doit peser le pour et le contre des deux méthodes avant de se lancer dans l’aventure.

Et la suite?

Le prochain article traitera plus précisément du design adaptatif et de son implication, sa mise en place et de cas vécus dans le cadre de projets gouvernementaux. D’ici là, vous êtes invités à laisser des commentaires sur le blogue de E-Gouv Québec!

Thierry Goulet, E-Gouv Québec

Gordon Bell, le gouvernement ouvert et les PDF…

Il y a parfois de petits pas qu’on peut faire pour atteindre nos objectifs en apparence si anodins qu’en regardant le plan global on les oublie. Par exemple, que diriez-vous d’une réflexion sur l’utilisation du PDF? Le croiriez-vous mais c’est ce dont Gordon Bell, chercheur principal à Microsoft et, disons-le, une légende en ce qui a trait à la réflexion sur la technologie dans nos vies, m’a parlé entre deux conférences.

Tandis que lui résumais ce panel fort intéressant sur les impacts du web 2.0 sur les changements politiques dans le monde arabe, j’en ai profité pour discuter de «gouv 2.0», du rapport Gautrin et de toutes ces idées qui se brassent au Québec. Il sourit en hochant de la tête et me demande ce que le citoyen cherche vraiment en demandant des données ouvertes? Je réponds spontanément plus de transparence. Il me répond tout sourire, « peut-être à changer ou corriger quelque chose?», peut-être bien, me suis dit. Selon lui, nous n’utilisons pas encore des outils aussi simple que le PDF à leur plein potentiel. Je n’ai pu qu’acquiescer. Qui n’a jamais été attiré sur un site par la perspective de trouver tous les formulaires en ligne, pour trouver des PDF qu’il fallait imprimer, remplir et numériser pour les retourner par courriel… Pourtant, comme il me fait remarquer, cela fait quelques années que la technologie soutient la création de PDF que l’on peut remplir à l’écran, signer électroniquement pour les envoyer en un clic. Cela dit, nous tendons souvent à utiliser la technologie pour faire les choses comme nous les avons toujours faites…

En quoi cela s’apparente-t-il à une réflexion sur le gouvernement 2.0? Bell me parle de l’Australie, qui est déjà beaucoup plus avancée que les États-Unis en ce qui a trait aux services aux citoyens en ligne et qui offre depuis plus de cinq ans la possibilité de remplir des formulaires et d’effectuer bon  nombre de demandes en ligne. Pour en arriver là, il faut des directives simples et au besoin, de la formation auprès des citoyens moins familiers avec le web.

Eh, oui c’est souvent ce qui ressort des échanges avec les internautes : au-delà des grands principes, ils veulent surtout qu’on leur facilite la vie…

Nadia Seraiocco, conseillère et conférencière
Collaboration spéciale

——

Biographie de Nadia Seraiocco : Nadia est conseillère en relations publiques 2.0, auteure et conférencière. Depuis 2002, elle anime son propre carnet et depuis avril elle blogue sur Triplex (Radio-Canada).

Bye bye Visio : 4 applications spécialisées pour créer des maquettes schématiques

Le «wireframe» — ou la maquette schématique en français —, est une façon de mettre en page les fonctionnalités d’un site Web avant d’entreprendre les travaux de design graphique. C’est un outil pratique pour travailler rapidement sur un concept ou une idée, en faisant plusieurs itérations sans nuire à sa santé mentale et à celle du concepteur graphique de votre équipe.

Pour construire quelque chose, il faut un plan

Le «wireframe», c’est le plan détaillé de chacune des pages d’un site Web.

Lorsqu’un architecte construit une maison, il crée d’abord un plan. Il peut discuter du plan avec son client et apporter des changements au fur et à mesure que la compréhension du projet évolue. La décoration (design graphique), ça vient après. On décide de l’ambiance des lieux après qu’on se soit entendu sur le découpage des pièces.

Un «wireframe» doit donc intégrer et mettre en images les idées de l’architecte informationnel, des autres membres de son équipe et de l’utilisateur. Sa conception doit aussi favoriser la souplesse, afin de refléter les changements d’orientation qui peuvent survenir durant un projet.

L’important dans le processus de création d’une maquette schématique, c’est de ne pas se laisser ralentir par les détails. Si l’outil alourdit le processus de réflexion, il perd son utilité. Le mieux est l’ennemi du bien.

Du papier et un crayon

Comme dans la série MTV Unplugged où les artistes faisaient une prestation avec des instruments acoustiques, il est possible de commencer le processus de création du fil de fer («wireframing») sans utiliser de logiciel et d’en tirer des résultats tout à fait honnêtes.

Lors d’une rencontre de remue-méninges, une première maquette schématique peut être créée à l’aide d’outils traditionnels, mais efficaces : du papier et un crayon (ou une serviette de table comme le dit Dan Roam dans son livre The Back of the Napkin), un tableau blanc, une grande feuille vierge, des crayons, etc. Ce sont de très bons outils collaboratifs qui permettent de faire des itérations rapides, surtout en début de processus.

Par contre, après avoir jeté ses idées sur papier, il est bien de passer à une autre étape et d’utiliser une application de création de maquettes schématiques, pour les mêmes raisons qui font que l’on rédige dans un logiciel de traitement de texte au lieu d’écrire sur papier : ça facilite la bonification du document, le résultat est plus clair et propre et ça favorise les échanges.

Mais j’utilise déjà Visio !

Des applications comme Microsoft Visio et Adobe Illustrator peuvent servir à créer des maquettes schématiques. Beaucoup de gens les utilisent et obtiennent de bons résultats, mais un outil spécialisé vous permettra d’arriver à vos fins plus rapidement, avec un produit de plus grande qualité. C’est encore plus vrai si le logiciel spécialisé est très simple à apprendre.

J’ai pris le temps d’évaluer quelques applications spécialisées en conception de maquettes schématiques. Voici mon compte rendu : je vous laisse en tirer vos propres conclusions.

4 applications spécialisées pour créer des maquettes schématiques

Mockingbird

Mockingbird (tiré du terme anglais “mockup” pour maquette) est une application entièrement Web. Pour l’essayer, il suffit de se rendre sur le site de Mockingbird et de cliquer sur le bouton “Launch”.

L'interface Web de Mockingbird est facile d'utilisation mais l'ensemble fait un peu vieillot.

L’application offre 92 éléments d’interface et permet de créer plusieurs maquettes dans un même projet. L’interface est facile d’utilisation (ça ne m’a pris que quelques instants pour m’y retrouver) mais l’ensemble fait malheureusement un peu vieillot.

Environnement : Web
Prix : À partir de 9 $ par mois
Période d’essai gratuite : Illimitée, mais ne permet pas de sauvegarder.
Avantages :

  • Courbe d’apprentissage rapide.
  • Aucune installation nécessaire, prêt à utiliser en quelques secondes.

Inconvénients :

  • Paiement récurrent.
  • Éléments d’interface moins intéressants visuellement que certains compétiteurs.

Site Web de Mockingbird

myBalsamiq

myBalsamiq est une application Web qui existe aussi en version applicative (voir Balsamiq Mockups for Desktop). Chaque version à ses avantages.

La qualité principale de la version Web est son côté collaboratif. Plusieurs utilisateurs peuvent contribuer et échanger sur les mêmes projets, hébergés dans un « nuage » L’interface est conviviale. Je suis surpris de la facilité d’utilisation, surtout pour une application Web.

Dans myBalsamiq, les projets sont représentés sous forme de livres.

L’écran d’ouverture permet de voir les différents projets qui sont créés, représentés sous forme de livres. Chaque projet peut contenir plusieurs maquettes schématiques. Le tour guidé permet de rapidement comprendre le fonctionnement de l’interface.

Dans myBalsamiq, les éléments donnent l'impression d'avoir été dessinés à la main.

Les éléments de page sont variés et donnent l’impression d’avoir été dessinés à la main. Cet effet «griffonnage» est pratique pour que l’attention soit portée sur le contenu et non le style visuel de la page.

Environnement : Web
Prix : À partir de 12 $ par mois
Période d’essai gratuite : 30 jours
Avantages :

  • Outils collaboratifs entre plusieurs personnes.
  • Possible de l’utiliser à partir de n’importe quel poste de travail.
  • Permet de regrouper les maquettes par projet.
  • Les éléments semblent avoir été dessinés à la main.
  • Mode “présentation” plein écran.

Inconvénients :

  • Paiement récurrent.

Site Web de myBalsamiq

Balsamiq Mockups for Desktop

En complément de la version Web, Balsamiq Mockups for Desktop s’installe sur tous les systèmes d’exploitation supportant la technologie Adobe Air, dont Windows et Mac OS.  Les sytèmes iOS, Android et Blackberry Tablet OS devraient aussi pouvoir « accueillir » cette version : je ne l’ai toutefois pas validé.

On retrouve la même finesse dans le design des éléments, les mêmes fonctionnalités et la même facilité d’utilisation que dans l’application Web. Personnellement, j’aime le fait de n’avoir à payer un logiciel qu’une seule fois. Un paiement unique est souvent plus facile à faire approuver par son organisation. Par contre, si on n’a pas de compte myBalsamiq, on perd tout le côté collaboratif et la gestion des projets de la version Web. En effet, la version « Desktop » et la version Web peuvent se « parler » et fonctionner ensemble seulement si on paye un compte mensuel myBalsamiq.

Mode plein écran

Dans les deux versions (Web et « Desktop »), on retrouve un mode plein écran qui permet de présenter nos créations sur projecteur, à l’aide d’un curseur bleu surdimensionné qui suit le mouvement de la souris. J’adore!

Le mode plein écran offre un curseur bleu surdimensionné.

Environnement : Adobe AIR (Windows, Mac OS X)
Prix : 80 $
Période d’essai gratuite : 7 jours
Avantages :

  • Payable seulement une fois.
  • Les éléments semblent avoir été dessinés à la main.
  • Mode “présentation” plein écran.

Inconvénients :

  • Pas de gestion par projet. Chaque maquette est autonome, sauf si on paye pour un compte myBalsamiq qui permet de partager le tout en ligne.

Site Web de Balsamiq Mockups for Desktop

Omnigraffle

Je vous avais dit que je ne présenterais que des outils spécialisés, mais je fais une exception pour un très bon produit.

Omnigraffle s’apparente à Visio puisqu’il n’est pas d’abord conçu pour créer des maquettes schématiques. Si vous avez à créer des diagrammes de toute sorte, plans de site, organigrammes et autres documents visuels (et que vous utilisez un Mac), il peut très bien faire le boulot et vous offrir quelques petits avantages, comme la mise en page automatique, qui vous permettront de sauver du temps.

Il y a une communauté Omnigraffle appelée Graffletopia qui offre des gabarits des éléments de pages de toutes sortes. La plupart sont gratuits et plusieurs sont axés vers la création de wireframes.

Environnement : Mac OS X, iPad
Prix : 100 $ pour Mac OS X, 50 $ pour iPad
Période d’essai gratuite : 14 jours
Avantages :

  • Pas seulement un outil de wireframe – c’est un logiciel versatile qui peut servir à beaucoup de choses, comme la création de diagrammes.
  • Les éléments provenant de Graffletopia sont bien conçus et utiles.

Inconvénients :

  • Courbe d’apprentissage plus difficile que les autres produits.
  • N’existe pas en version Windows.
  • Requiert le téléchargement de stencils supplémentaires (gratuits).

Site Web d’Omnigraffle

Mon choix : Balsamiq

Après ces essais, j’ose me prononcer en faveur de la gamme de produits Balsamiq. Devriez-vous utiliser la version Web avec outils collaboratifs, la version « Desktop » ou une combinaison des deux, cela dépend de vos besoins de collaboration. Je crois que ce produit évolue bien et qu’il offre de belles fonctionnalités pour le prix. Bien sûr, cet avis n’implique que moi.  🙂

Prochain billet : prototypes fonctionnels

Avant de faire un achat, prenez le temps de lire mon prochain billet, qui présentera des applications de prototypage. Ces applications approfondissent le concept des maquettes schématiques en offrant la possibilité d’en créer des versions fonctionnelles : des prototypes.

Je vous présenterai les applications Axure RP, Flairbuilder, Jumpchart, Proto.io et iPlotz.

Patrick Matte, ergonome Web, Sépaq
Collaboration spéciale

———

Biographie de Patrick Matte : Patrick est un pionnier du Web, créant professionnellement ses premiers sites dès 1995. Il s’intéresse à l’impact positif que peut avoir la technologie dans nos vies, comme outil au service de l’être humain et de sa créativité. Il est ergonome Web à la Sépaq.


De quoi voulez-vous nous voir bloguer?

L’équipe de E-Gouv Québec aime veiller et partager, vous l’aviez peut-être remarqué. Mais les membres de l’équipe et leurs collaborateurs/collaboratrices aiment aussi écrire.

La preuve, en ce moment quelque part (vous savez, avec la mobilité et le sans fil de nos jours, quelque part ça peut vraiment être partout et nulle part), des claviers se font aller les lettres très activement pour vous livrer des articles sur une grande variété de sujets qui touchent les communications numériques.

Mais pendant que nos doigts font surchauffer nos claviers, votre tête doit aussi contenir de bonnes idées. Alors laissez-vous aller, partagez ces idées avec nous en commentant cet article, en nous écrivant ou en prenant quelques secondes pour répondre à ce sondage.

Ça va nous aider à mieux veiller pour vous!

Patrick Parent, E-Gouv Québec

P.S. : Désolé pour les mots en anglais dans ce sondage. Ce blogue est aussi un laboratoire pour nous et nous apprenons à utiliser WordPress sous vos yeux. Nous cherchons encore comment remplacer ces termes anglais par ceux en français. On vous tient au courant…stay tuned! 🙂

Mise à jour (19 mars 2012) : La correction pour les termes anglais a été effectuée avec succès. Merci à notre lecteur Robin Millette pour son aide. C’est entre autres pour cela que j’aime le Web, nous sommes plus intelligents en groupe!

Gestion de communautés et eRéputation : Outils et liens intéressants

28 février 2012 5 commentaires

Dans le cadre de mes fonctions «officielles», on m’a confié le mandat de faire une liste des différents outils qui permettent de gérer nos présences Web sociales (Facebook, Twitter, YouTube, Flickr, Google+, Pinterest, etc).

J’ai fait des recherches sur la grande toile, consulté des collègues, des amis, des contacts…Bref, j’ai fait un peu de «social» pour trouver ce qui pouvait nous aider à gérer les médias sociaux.

Je partage ici quelques-unes de mes découvertes. Si vous en avez d’autres suggestions, ou si vous utilisez l’un des outils ou des méthodes présentés dans la liste, n’hésitez surtout pas à nous en parler dans la zone commentaires.

Merci à toutes mes sources pour le partage!

Quelques outils

Quelques liens d’intérêt

Ces articles ne sont pas tous d’égale valeur et certains ne sont pas très récents. Mais tous nous mettent sur des pistes à suivre ou à ne pas suivre!

En français

En anglais

Patrick Parent, E-Gouv Québec

%d blogueurs aiment cette page :