Parfois, je me demande si nous nous vivons pas la même situation dans le domaine de l’expérience utilisateur. Nous nous définissons par des rôles qui semblent assez semblables pour des gens extérieurs à notre domaine – Architectes d’information, designers interactifs, concepteurs visuels, ingénieurs et concepteurs d’expérience utilisateur sont des termes couramment utilisés.

Mais quelles sont les différences? Et comment peuvent-ils travailler ensemble?

Architecture de l’information

L’architecture de l’information concerne la façon dont les données sont organisées ou structurées du point de vue de l’utilisateur – par opposition à la perspective du système.

Au niveau d’un site web, l’architecture de l’information vise à définir les données sur chaque page et la façon dont ces pages se rapportent les unes aux autres. Par exemple, la définition d’un plan du site est une des livrables de l’architecte de l’information. Au niveau de la  page, l’architecte de l’information est préoccupé par la disposition et s’assure que les données sont regroupées logiquement et sont intimement liés.

L’architecte de l’information est également préoccupé par l’utilisation et la définition de taxonomies (comme les hiérarchies) et la classification des données au sein de ces taxonomies. Ainsi, la définition des menus et des structures de navigation est une travail d’architecture de l’information. Le travail de l’architecte de l’information est plus facile quand il ou elle comprend la façon dont les utilisateurs et les experts du domaine pensent l’information, de sorte qu’ils utilisent des techniques telles que des entretiens structurés et des ateliers de tri par cartes pour rentrer dans la tête des utilisateurs.

Interaction Design

Le Design d’interaction concerne les contrôles, mécanismes et processus que les utilisateurs utilisent pour effectuer leurs tâches avec le système.

Par exemple, le Designer d’Interaction détermine si nous devrions avoir un menu plutôt que d’un ensemble d’onglets, que nous devrions avoir une liste déroulante plutôt que jeu de boutons radio et il ou elle déterminera les étapes à suivre pour la mise en place d’un nouveau compte de messagerie à l’aide un assistant.

Les Designers d’Interaction sont concernés par les aspects cognitifs : que font les contrôles  et quels sont leurs mécanismes, et comment cette information est communiquée aux utilisateurs. En conséquence, vous verrez souvent des designers d’interaction faire appel à des bibliothèques de r!gles pour reproduire une technique d’interaction particulière.

Conception visuelle

Le Concepteur Visuel est préoccupé par l’esthétique de l’interface. Les concepteurs visuels assurer l’interface est agréable à l’oeil et qu’elle communique une «image» correcte aux utilisateurs, y compris la conformité aux codes de la marque.

Les concepteurs visuels ont souvent une expérience de conception graphique. Les bons concepteurs visuels ont souvent d’excellentes compétences en illustration, en animation et en photographie, qu’ils intègrent dans leur travail de conception d’interface.

L’ergonomie

Les ergonomes conçoivent et mènent des études afin de tester l’utilisabilité des interfaces. Ils font aussi des recommandations sur la façon de corriger les problèmes qui remontent dans leurs études. Ces recommandations peuvent être très spécifiques comme par exemple : «Faire un fort distinction entre les boutons « OK » et « Annuler » », ou très générales comme par exemple : «L’architecture de l’information est à revoir ».

Pour ce faire, les ergonomes doivent être compétents dans plusieurs domaines : la conception du questionnaire , les entretiens et l’utilisation d’un logiciel spécialisé dans les tests d’utilisabilité (comme Morae). Les meilleurs ergonomes ont également de bonnes bases en statistiques afin d’appliquer les bonnes méthodes statistiques et les tests de résultats de l’étude quantitative. Ils sont aussi familiers avec les normes pertinentes telles que l’ISO 9241 et l’ a norme ANSI / NCITS 354-2001.

Alors, quelle est la conception de l’expérience utilisateur?

Dans un article publié il ya quelque temps par Melisa Cooper (malheureusement plus disponible en ligne), elle a attiré l’analogie entre un architecte de l’expérience utilisateur (un terme plus populaire que User Experience Designer dans les années 1990) et celui d’un architecte qui conçoit des maisons conventionnelles.

Donc, lors de la conception d’une nouvelle maison:

• Un architecte de l’information permettrait de s’assurer que la chambre principale peut contenir un lit double, deux tables de chevet et une grande armoire; la cuisine est à côté de la salle à manger et l’unique salle de bain n’est pas dans le garage;
• Un Designer d’Interaction fera en sorte que le robinet d’eau froide est toujours sur la droite, que les escaliers ont une main courante et les interrupteurs sont sur le bon côté de la porte;
• Un Concepteur visuel choisira les tapis, les rideaux et les meubles afin qu’ils s’accordent bien et qu’ils sont en harmonie avec le caractère de la maison et les goûts du propriétaire;
• Un Ingénieur Ergonome suivra la maison au cours du développement pour identifier les problèmes que les gens éprouveront quand ils emménageront.

Mais quelqu’un a besoin d’assumer la responsabilité globale de la conception: diriger et informer tous ces spécialistes, résoudre les conflits inévitables entre ces experts et plus généralement «représenter» le propriétaire de la maison (pas les constructeurs) dans le processus de conception.

Avec une maison, c’est l’architecte qui conçoit toute l’expérience pour le propriétaire de la maison. Avec un système interactif, un « User Experience Designer » joue un rôle similaire. Tout comme un architecte classique, un User Experience Designer est le «professionnel de haut niveau» sur un projet. (Cela signifie qu’ils ont aussi besoin d’excellents profils généralistes tels la gestion de projet, les compétences de communication interpersonnelle, les techniques de présentation et les compétences d’animation).

Conclusion

Dans cet article, j’ai identifié quatre domaines de spécialisation en conception de l’expérience utilisateur : Architecture de l’information, design d’interaction, conception visuelle et ergonomie. On peut assimiler ces quatre profils à des objectifs à travers lesquels le User Experience Designer regardera de temps en temps.

Les User Experience Designers ont différents niveaux de compétence dans chacun de ces domaines, qu el’on peut classer sur une échelle de 1-10 dans chacun de ces domaines de compétences pour aider à définir leur «profil UX» :

• Un  »10″ dans l’ergonomie signifie par exemple que vous avez 20 + articles publiés sur des études d’utilisabilité dans des revues de référence .
• Un  »10″ dans la conception visuelle signifierait par exemple que vous dirigez les travaux de conception visuelle de l’interface iOS.
• Un « 10″ en architecture de l’information signifierait par exemple que vous dirigez la conception du schéma de navigation sur eBay.
• Un « 10″ dans le design d’interaction signifierait par exemple que votre interface d’assistance en ligne permet aux contribuables de compléter le formulaire de remboursement d’impôt en ligne à plus de 90% du temps.

Dans mon expérience, vous aurez besoin d’une cote d’environ ’6 ‘dans ces domaines pour être qualifié pour assumer le rôle dans de nombreux contextes commerciaux.

Pourquoi ne pas prendre le temps de définir votre propre profil UX?

Via

Pour toutes celles et ceux qui en doutent encore (en êtes-vous ?), voici une animation de Human Factors, assortie de son poster à télécharger

Des faits, rien que de faits, toujours des faits !

A quelles mutations une bancassurance doit-elle se préparer pour absorber les changements de comportements de ses clients dans un contexte digital ?

Les relations avec les clients s’atomisent

En premier lieu, il convient de se préparer au temps réel. Celui d’une victime en état de choc qui vous skype en vidéo dans les minutes qui suivent un accident, comme celui d’un client qui appelle votre centre d’appel lorsqu’il découvre le taux de vétusté appliqué au mobilier de son appartement où il avait séjourné en famille durant plusieurs années.

Ensuite, il faut se préparer à traiter avec la plus grande attention la plus petite faille de son système d’information. Un conseiller mal informé qui peine à réaliser un devis, un client qui s’impatiente face à la complexité dun formulaire ou un autre qui résilie ses contrats sur des arguments non avoués.

Enfin, il faut réduire les délais de mise en mplace d’un dispositif alternatif, lorsqu’il s’agit par exemple de différer une campagne de liens programmée le lendemain un mouvement social.

Ces réflexions ne sont pas le fruit de mon imagination. Pas plus que leurs répercussions, qu’il s’agit d’anticiper par des dispositifs à actionner avec la plus grande vigilance. « Little big details that matter« .

Quel(s) rôle(s) pour la DSI ?

Appliquée aux métiers de l’informatique, cette hyper-vigilance naît dans la stratégie d’entreprise, prend corps dans les Directions de maîtrise d’ouvrage pour se matérialiser dans les e-services, qui n’ont plus rien de virtuel depuis bien longtemps.

La Direction Informatique assume plusieurs rôles dans cette course à l’innovation :

• Celui d’anticiper les tendances de fond du web : responsive design, moteurs d’indexation sémantiques, virtualisation des serveurs, sécurisation accrûes des données clients plus que jamais au centre des flux personnalisés et du marketing « one to one ».
• Celui d’accompagner le changement des usages en entreprise, sur des populations hétérogénes et dispersées, en offrant les meilleurs e-services à ses clients internes, et par capillarité aux usagers finaux.
• Celui d’opérer les meilleurs choix technologiques sur tous les projets, quelque soient leurs enjeux, avec une finalité gouvernée par le business.

En conclusion

Ainsi, la DSI doit offrir demain des réponses à des problématiques non encore formulées pour certaines mais qui émergent déjà : la recherche de personnification dans des relations toujours plus impersonnelles, l’aspiration à plus de confort dans la gestion d’un sinistre ou plus simplement la recherche d’un tarif le plus adapté à son besoin sur un comparateur de prix.

Les applications webisées doivent refléter les préoccupations liées à l’usage de ses e-services : rapidité de chargement des informations, accès garanti aux personnes déficientes, optimisation du parcours de navigation et meilleure prise en compte des conditions d’utilisation. Les bonnes pratiques existent, encore faut-il les appliquer.

Les réponses offertes par les éditeurs de logiciels offrent aujourd’hui une couverture fonctionnelle étendue et répondent à tous les besoins existants, dans des conditions financières étudiées pour toutes les entreprises, dont les grands groupes.

L’adoption grandissante des méthodes agiles apporte à tous les acteurs de l’entreprise un surplus d’efficacité mesurable dans la mise en place de ces applicatifs.

Le dernier enjeu pour les entreprises consiste à initier une collaboration entre le métier et les experts en technologie dès la réflexion initiale d’un projet, en établissant de nouvelles règles de collaboration qui préfigurent une relation inédite avec leurs clients certes digitalisés mais pourtant ancrés dans leur réalité.

• Sylvie Daumal
• Manuel Diaz – emakina.fr
• Alexandre Malsch – Melty Network
• David Raichman – Ogilvy Paris
• Matthieu Mingasson – Digitas France
• Benjamin Servet – Nealite

Les mauvaises habitudes de travail

Le temps de l’écran unique 15 pouces / 1024 pixels est révolu. Hier, il suffisait de produire un PSD unique, et de compter sur l’habileté de votre intégrateur HTML pour interpréter les variations éventuelles au resizing de la fenêtre. Pour éviter les comportements non souhaités, il a été communément accepté de fixer la largeur de la fenêtre, ce qui évitait de se poser la question des écrans au-delà de 19 pouces. Par ailleurs, on considérait qu’une fenêtre de navigateur n’était pas systématiquement ouverte en plein écran.

Ainsi, l’intégrateur HTML « interprétait » souvent la maquette PSD et comblait les lacunes de conception. Et selon sa curiosité et son bon sens, il était souvent confronté à des situations inédites, et répondait souvent à des questions telles que :

• Comment doit-on ajuster la mise en page pour les écrans de tailles inférieures à 1024 pixels ? Il serait bon de hiérarchiser les éléments de la page selon leur importance…
• Quelle est la hiérarchie du contenu? Tout ce « Lorem Ipsum » n’est qu’une vue du designer…
• Comment faciliter la navigation des écrans plus petits? Comment puis-je gérer dix items de menu, avec cinq pages de second sur un écran de 320 × 480 appareils tactile ?

Ces questions engendrent de graves problèmes si le développeur n’est pas un peu webdesigner. Et même pour les développeurs qui assument ces nouveaux enjeux, il est dangereux de leur affaire assumer seuls ce genre de décisions, qui relèvent de la stratégie de contenus, et son donc sous la responsabilité du client.

Quelle réponse pour une méthode de travail efficace ?

La première réponse qui vient à l’esprit est de réaliser deux interfaces, pour les deux types d’écrans phares du marché : les 15 pouces et les mobiles. Deux fois plus de travail donc. Oui mais voilà, cette réponse n’est pas universelle et ne convient pas aux multiples tailles d’écran et aux usages, tel que l’orientation des tablettes au format paysage.

Mais alors, comment faire ? Dois-je produire autant de livrables que de cas d’usages ? Il est certain que cette inflation nuira à votre productivité et amputera votre temps de sommeil…

La solution réside sans doute dans l’application d’un process de travail qui simplifie la démarche sans rogner la qualité de livrables.

Straight to the point

Je ne sais pas si vous l’avez noté, mais les modes d’écriture anglo-saxons vont à l’inverse de nos modes latins. Alors que nous entamons la rédaction d’un article par un fait anodin (la pomme de Newton par exemple), les anglo-saxons entament les débats en tranchant directement dans le vif. « Straight to thé point ».

Cette méthode est notamment promue par l’agence Seesparkbox, qui place les enjeux des applications sur la gestion des contenus.

Cette méthode est certes moins stylisée, mais elle présente l’avantage de ne pas se perdre en circonvolutions. Ainsi, si on applique cette règle à notre problématique actuelle, la bonne méthode de travail consiste à entamer nos travaux en dénouant l’interface la plus complexe : le mobile. Il est sans doute plus complexe de regrouper en 320 pixels de large un site qui est initialement conçu en 1.024 pixels que l’inverse.

Observez cette expérience de mises en pages alternées et vous comprendrez quel travail peut être mené.

L’un des enjeux état de rendre au mieux compte de la réalité du site, il va sans dire qu’il est essentiel dans ce cas de travailler sur des contenus réels. Adieu donc le lorem ipsum …

La vocation de cet exercice est de produire un prototype complet. Il s’agit donc de maquettes les pages du parcours de navigation de l’internaute, en précisant les comportements des éléments de navigation (menu, liens « en savoir plus ») et des boutons call-to-action. En voici un exemple ci-dessous.

Télécharger le PDF.

L’empilement des informations est un excellent exercice pour décider de la hiérarchie des contenus, là où les interfaces plus larges laissent l’internaute décider de sa lecture, le mobile est plus « dirigiste ».

Phase 2 : le design, le vrai !

A cet état de la conception, il est plus aisé pour le designer de produire l’interface graphique car il disposera d’éléments calibrés et entamera son travail avec une vision à 360° du futur site, dans toutes ses modes d’affichage.

Un premier cahier de tendances pourra être produit, qui offre une étape préalable à la validation définitive de la charte graphique. En voici un exemple sur Styletil

Il lui suffira ensuite de passer la main à l’intégrateur HTML, dont le travail sera grandement facilité par la résolution préalable des éléments de mise en page notamment.

Pour aller plus loin :
Introduction to responsive design

64% des utilisateurs de smartphones attendent des sites qu’ils s’affichent en moins de 4 secondes. Etes-vous surpris ? Mieux encore, les gens s’attendent à ce que les sites s’affichent au moins aussi rapidement sur leurs appareils mobiles que sur ​​leurs ordinateurs de bureau.

Comme vous le savez sans doute, environ 80% du temps nécessaire pour afficher une page web est partagé entre le traitement côté client et le chargement des ressources telles que des feuilles de style, les fichiers de script et les images. Ainsi, les trois principales stratégies pour améliorer les performances – pour les visiteurs à la fois de bureau et mobiles – sont les suivantes :

• Réduire le nombre de requêtes HTTP nécessaires pour aller chercher les ressources pour chaque page.
• Réduire la taille de la charge utile nécessaire pour satisfaire chaque demande.
• Optimiser les priorités de traitement côté client et l’efficacité de l’exécution du script.

Comme vous le savez sans doute aussi, les utilisateurs mobiles sont confrontés à des problématiques de performance quand il s’agit de mettre en œuvre les stratégies ci-dessus. Ces défis comprennent:

• Des réseaux plus lents (ce qui explique pourquoi la réduction des demandes et la charge utile est importante)
• Des navigateurs mobiles plus lents à analyser HTML et plus lents à exécuter JavaScript (l’optimisation du le traitement côté client est cruciale)
• Une taille de mémoire cache beaucoup plus petite que celle des navigateurs de bureau (nécessitant de nouvelles approches s’appuyant sur ​​un stockage local des ressources réutilisables)

Il existe un certain nombre de tactiques fondamentales et avancées que vous pouvez utiliser pour relever ces défis. En voici les principaux. Iils sont décrits de manière plus précises dans le livre blanc de Strangeloop sur l’optimisation des sites Web mobiles.

Réduire les requêtes

1. Consolider les ressources

Aujourd’hui, il s’agit d’une pratique courante, donc je ne vais pas l’expliquer ici, mais je tiens à souligner que la consolidation des ressources peut être une arme à double tranchant pour les navigateurs mobiles. Réduire les demandes accélère le chargement de la page lors du premier appel, mais leur mise en cache n’est pas aussi efficace. Donc, si vous utilisez cette technique, assurez-vous de mettre en balance avec les techniques pour optimiser le stockage local (voir ci-après).

2. Utiliser la mise en cache du navigateur et le stockage en local

La mise en cache est une technique essentielle pour obtenir des performances acceptables, mais les caches des PC de bureau et des mobiles ne sont pas identiques. En effet, les caches des navigateurs mobiles sont généralement beaucoup plus réduits que sur les machines de bureau, ce qui envoie les données plus rapidement. Le cache du navigateur traditionnel ne fonctionne pas bien pour les appareils mobiles. Heureusement, la spécification HTML5 Web Storage, qui a été mis en œuvre dans tous les navigateurs de bureau et mobiles, offre une excellente alternative pour ​​la mise en cache par le navigateur.

3. Intégrer les ressources au format HTML pour la première utilisation

Si une ressource n’a pas une forte probabilité d’être déjà en cache (comme dans un contexte mobile), il est souvent préférable d’intégrer cette ressource en HTML de la page – une technique appelée «inline» – plutôt que de la stocker en externe avec le lien ad hoc.

L’inconvénient de l’inlining est que le poids de page peut devenir élevé. Il est donc essentiel pour une application web qui utilise cette stratégie d’identifier si la ressource est nécessaire et si elle est déjà mise en cache sur le poste client. Par ailleurs, la demande doit générer un code pour stocker la ressource sur le client alors du premier envoi de ce inline. C’dest pourquoi l’utilisation de HTML5 localStorage sur les appareils mobiles (tel que décrit ci-dessus) est une excellente option pour l’inlining.

4. Utilisez les événements HTML5 serveur

L’objet HTML5 EventSource et les événements Server-Sent permettent au code JavaScript dans le navigateur donnent un accès beaucoup plus efficace depuis le serveur vers le navigateur, que le serveur utilise pour envoyer des données dès qu’elles sont disponibles, ce qui élimine la surcharge HTTP de la création de requêtes multiples.

5. Éliminer les redirections

Lorsque les utilisateurs tentent d’accéder à un site standard à partir d’un appareil mobile, cela génère souvent un aller-retour supplémentaire vers le client et vers le site mobile, consommant plusieurs centaines de millisecondes sur les réseaux mobiles. Pour des raisons évidentes, il est plus rapide de livrer la page Web mobile directement en réponse à la demande initiale, plutôt que de délivrer un message de redirection qui appelle ensuite la page mobile. Et par courtoisie pour les utilisateurs qui préfèrent voir le site du bureau sur leur appareil mobile, vous pouvez fournir un lien sur le site mobile qui propose de supprimer ce comportement.

Réduire les charges

6. Compression et minimisation

La compression et la minimisation sont les meilleures pratiques de base. Les techniques de compression comme gzip réduisent les charges utiles. Les réponses qui incluent des textes, y compris HTML, XML, JSON, Javascript et CSS, peuvent être réduits à hauteur de 70%. La minimisation, qui est habituellement appliquée uniquement aux scripts et feuilles de style, élimine les caractères non essentiels tels que les espaces, les caractères de nouvelle ligne, et les commentaires. les fichiers minimisés sont réduits d’environ 20% en moyenne.

La minimisation réduit non seulement la consommation de bande passante et de latence, mais elle peut aussi faire la différence entre un objet mis en cache et qui est trop grand pour la mémoire cache sur un périphérique mobile particulier. La compression Gzip n’est d’aucun secours à cet égard, car les objets ne sont pas mis en cache par le navigateur tant qu’ils n’ont pas été décompressés.

7. Redimensionner des images

Les images sont une des principales causes de perte de performance. Sur les appareils mobiles, les images haute résolution occasionnent un gaspillage massif de la bande passante, le temps de traitement, et l’espace du cache. Pour accélérer le rendu des pages et réduire la bande passante et la consommation de mémoire, redimensionnez dynamiquement les images dans votre application, ou remplacez les images avec des versions plus petites pour les sites mobiles. Ne perdez pas de bande passante en comptant sur ​​le navigateur pour adapter une image haute résolution en largeur et en hauteur.

Une autre option consiste à charger initialement une version très basse résolution d’une image pour obtenir la page aussi vite que possible, puis la remplacer par une version haute résolution sur le onload ou le ready event, après une première inreaction de l’utilisateur.

8. Simplifiez les pages avec le HTML5 et les CSS 3.0

La spécification HTML5 comprend de nouveaux éléments structurels, tels que les en-tête, nav, article, et pied de page. L’utilisation de ces éléments sémantiques rend une page plus simple et plus efficace que quand elle est constituée de div imbriquées et de balises span. Une page simple est plus petite et plus rapide à charger et un DOM plus simple signifie une exécution plus rapide du JavaScript. Les nouvelles balises sont rapidement adoptées dans les nouvelles versions des navigateurs, y compris les navigateurs mobiles. Maximiliano Firtman a créé un excellent tableau qui montre les fonctionnalités HTML5 prises en charge par les ordinateurs de bureau et les navigateurs mobiles .

De même, de nouvelles fonctionnalités CSS 3.0 peuvent aider à créer des pages légères en fournissant un support intégré pour des éléments comme des dégradés, des bordures arrondies, des ombres, des animations, des transitions et autres effets graphiques qui nécessitaient auparavant de charger les images.

Optimiser le traitement côté client

9. Différer le rendu HTML

Sur les appareils mobiles, charger et afficher une page avec beaucoup de HTML peut être plus lent que charge le HTML en premier puis ensuite le rendu. Une approche consiste à entourer le code HTML dans une balise de commentaire, puis d’utiliser JavaScript pour supprimer le commentaire, chargez le DOM, et rendre la page.

Vous pouvez également veiller à ce que l’utilisateur voit la page plus rapidement en retardant le chargement et tout contenu qui est « en dessous du pli » de la zone initialement visible. Afin d’éliminer la nécessité de repositionner le contenu après le chargement du reste de la page, remplacez les images avec un espace réservé qui spécifie la bonne hauteur et la largeur.

10. Différer le chargement et l’exécution de scripts

L’analyse du JavaScript peut prendre jusqu’à 100 millisecondes par Ko de code sur certains appareils mobiles. Beaucoup de bibliothèques de scripts (tels que les scripts qui prennent en charge les interaction avec les utilisateurs, comme par exemple glisser-déposer) ne sont nécessaires qu’une fois le rendu terminé. Le téléchargement et l’analyse de ces scripts peuvent donc être reportés après l’événement onload. La même logique s’applique à l’exécution du script : Reporter autant que possible après onload.

Le script de report peut être à votre propre initiative, ou être exécuté par des tiers. Les scripts mal optimisés pour les publicités, les widgets sociaux ou les analytics peuvent bloquer une page de rendu, et ajouter parfois de précieuses secondes au chargement de la page. Vous aurez également besoin d’évaluer soigneusement l’utilisation des bibliothèques de script comme jQuery pour les sites mobiles, surtout si vous utilisaez uniquement quelques objets du framework.

11. Utiliser Ajax pour l’amélioration progressive

JavaScript asynchrone avec XML (AJAX) est une technique pour utiliser l’objet XMLHttpRequest et récupérer les données à partir d’un serveur web sans rafraîchir la page où le code est exécuté. AJAX permet à une page d’afficher les données mises à jour dans une section d’une page sans reconstruire la totalité de la page. Cela peut permettre à votre application de charger une version dépouillée d’une page rapidement, puis de remplir le contenu détaillé lorsque l’utilisateur visualise la page.

L’AJAX est également une des techniques d’optimisation recommandées pour les réponses standard: en-têtes de cache, compression gzip, minification, la consolidation des ressources, etc

12. Mettre en œuvre un préchargement intelligent qui s’adapte au type de connexion réseau

Certaines techniques ne doivent être utilisées que combinées avec du code pour détecter le type de connexion mobile. Par exemple, le préchargement des ressources en prévision de futures demandes est intelligent, mais il ne peut être mis en oeuvre que si (1) la bande passante de l’utilisateur est mesurée et (2) qu’une partie de ces ressources peuvent s’avérer inutiles.

Sur Android 2.2 +, la propriété navigator.connection.type retourne des valeurs qui vous permettent de faire la différence WiFi à partir de 2G/3G/4G connexions. Sur le Blackberry, vous pouvez vérifier la valeur de blackberry.network pour obtenir des informations similaires. En outre, la détection côté serveur des données d’en-tête User-Agent ou toute autre information intégrée dans les demandes peuvent alerter votre demande le type de connexion utilisé.

13. Utilisez Web Workers HTML5 pour le multi-threading

La spécification Web Worker en HTML5 introduit une exécution multi-thread concurrente dans le monde de la programmation JavaScript. Pour améliorer la performance des sites mobiles, le code Web Worker peut être utile pour le préchargement de ressources qu’un utilisateur est susceptible d’avoir besoin de compléter les actions futures, en particulier lorsque la bande passante de l’utilisateur n’est pas mesurée. En utilisant le code multithread qui utilise des objets Web Workers (et peut-être localStorage pour mettre en cache les données), les opérations qui préchargent des ressources peuvent s’exécuter sur un flux séparé sans affecter les performances de l’interface utilisateur.

14. Remplacer les événements OnClick avec des événements tactiles

Sur les appareils à écran tactile, l’événement onclick ne se déclenche pas immédiatement quand un utilisateur appuie sur l’écran. Au lieu de cela, l’appareil attend jusqu’à une demi-seconde (300 millisecondes sur la plupart des appareils), donnant à l’utilisateur la possibilité de lancer une autre geste au lieu d’un simple clic. Ce retard peut entraver de manière significative la performance réactive que les utilisateurs attendent. Pour résoudre ce problème, préférez l’événement touchEnd. Cet événement se déclenche immédiatement lorsque l’utilisateur appuie sur l’écran.

Vous pouvez toujours vouloir gérer l’événement onclick pour vous assurer que le navigateur modifie l’apparence du bouton pour afficher un état cliqué, et pour supporter les navigateurs qui ne gèrent pas les événements tactiles. Pour éviter l’exécution de code en double sur les événements touchEnd et onclick, ajoutez un gestionnaire d’événements Click qui appelle preventDefault et stopPropagation si le clic est le résultat d’une action de l’utilisateur qui a déjà été traitée par touchEnd.

15. Prendre en charge le protocole SPDY

Parmi les goulots d’étranglement qui affectent les sites Web, qu’ils soient de bureau ou portable, on note l’inefficacité de la couche applicative des protocoles HTTP et HTTPS. En 2009, Google a commencé à travailler sur un protocole alternatif nommé SPDY qui aborde certaines de ces limitations. Comme les serveurs Web mettent en œuvre SPDY, votre site sera en mesure d’utiliser ce protocole pour tout utilisateur disposant d’un navigateur qui le supporte. Google SPDY rapports d’essais des améliorations entre 27% et 60%.

Comme je l’ai mentionné ci-dessus, il s’agit d’un joli aperçu de haut niveau de ces stratégies mobiles amplifiantes. Si vous êtes à la recherche pour plus de fond, ainsi que comment faire renseignements, consultez le livre blanc de Strangeloop.

Source

Confiance dans la stratégie de l’entreprise, dans la qualité de ses produits, et donc dans la relation que nous entretenons avec l’entreprise, nous les consommateurs, les salariés, les investisseurs, les instances dirigeantes ou plus simplement les relais d’opinions.

Voici donc quelques recettes pour créer un contexte favorable à l’épanouissement de ses visiteurs et éviter le désastre d’un bad comment en page 1 de Google.

Vos visiteurs savent-ils à quoi s’attendre ?

Rien de nouveau me direz-vous. Cependant, combien de sites présentent leurs informations institutionnelles, leurs produits, leur stratégie et toute chose avec une valeur d’usage marginale pour ses publics ? La grande tendance qui j’observe auprès de mes clients actuels est à la verticalisation des contenus, et c’est tant mieux. A chaque cible ses attentes, selon que l’on soit étudiant, chercheur, ournaliste, prestataire … ou simple client ! D’autres ventilations sont possibles, pourvu qu’elles satisfassent à 2 règles d’or : être discriminante et suffisamment explicite pour l’internaute !

Mais en fait, qu’est-ce que tout cela me rapporte ?

Tout d’abord, « ce qui s’énonce clairement se conçoit aisément ». Observez les bienfaits qu’une architecture de l’information bien pensée produit auprès des personae (profils-type d’utilisateurs).

Ensuite, imaginez que vos visiteurs ont une vue biaisée de votre métier et que vous seul êtes référents pour vous exprimer sur votre marque, vos valeurs, vos ambitions et votre relation à eux. Vous avez la parole, sachez en user !

Bénéfice #1 : Réduisez les frustrations

Si votre discours rassure vos visiteurs et que leur relation à votre marque est en phase avec votre discours, alors ils seront confiants dans leurs choix et cette réassurance est un point-clé dans la relation qu’ils entretiennent avec vous.

Sachez organiser sa visite selon ses aspirations : Si vous avez acquis la certitude que certaines informations devaient figurer sur votre site, affichez-les. Si certains contenus doivent être clivables pour renvoyer sur des explications plus précises, faites-le.

Enfin, mettez en cohérence toutes les composantes de votre site : l’ergonomie, le design, les contenus. Votre travail d’optimisation ne se limite pas aux landing pages !

Bénéfice #2 : Personnalisez sa relation avec vous

L’un des enjeux de l’interactivité est de créer du contact. L’acquisition d’une adresse mail, de renseignements d’ordre privé, l’abonnement à une newsletter, les feedbacks… Avec la dématérialisation des processus, l’éloignement des centres d’appels et la complexité des stratégie de vente, la marque utilise de nombreux canaux pour rester à l’écoute de ses publics et mesurer son taux de satisfaction.

Bénéfice #3 : Obtenez des feedbacks et pourquoi pas des idées… révolutionnaires ?

Un internaute impliqué est une denrée rare pour une entreprise, qui dépense souvent des sommes importantes pour sa R&D alors que les meilleures idées sont souvent les plus simples. La différence d’un produit ne se mesure pas uniquement à sa technologie ou au confort qu’il vous apporte, mais dans sa valeur d’usage et sa facilité de prise en main. Plus que jamais, ce sont les petits riens qui font la différence. Demandez donc à Steve Jobs lorsque vous le rejoindrez – le plus tard possible donc – pourquoi ses produits étaient si populaires et qu’est-ce qui rend ses utilisateurs aussi inconditionnels de la marque à la pomme.

Le questionnaire reste l’outil incontournable pour recueillir des données exploitables. Veillez donc à :

• Indiquer le temps estimatif de l’enquête au préalable
• Indiquer la progression dans le remplissage
• Préciser de quelle manière vous exploiterez ses réponses

Quelques conseils pour réduire le stress de vos internautes

Avant tout, votre taux de transformation dépend de la valeur perçue de votre marque et de la justesse de vos propos. N’hésitez pas à expliquer pourquoi vous sollicitez un internaute et à quoi les informations qu’il vous communiquent seront destinées.

Soyez aussi explicite que possible sur la relation que vous lui proposez en ligne, la fréquence de vos envois s’il s’agit d’une newsletter, les offres – exclusives -que vous lui proposerez. L’objectif est de mettre en perspective une valeur d’usage pour vos visiteurs.

Ces points sont particulièrement sensibles pour les organisations caritatives ou pour toute entreprise qui recrute des volontaires, car ils donnent de la visibilité aux (gentils) donateurs/volontaires.

Finalement, tout ceci n’est que l’application de règles de bonne conduite, isn’t ‘it ?

Sur Internet, il en va comme au téléphone : lorsque vous souriez, votre interlocuteur le ressent !

Voici donc quelques conseils d’un vrai pro – Truman Hedding, du site TruInteractive – pour maximiser vos chances de retenir son attention… avant qu’il ne file à la concurrence !

1. Créez un design attrayant

La première impression est capitale – comme IRL. Quelque soient vos efforts pour produire du service, si votre site n’est pas esthétique, les gens le quitteront.

La principale raison des défauts de mise en page des sites est le manque de priorités et/ou de ressources. Pourtant, les meilleures pratiques sont connues, c’est leur application qui fait défaut. Même les professionnels manquent parfois des compétences basiques car ils ne sont pas au fait des tendances et des avis d’experts sur le sujet.

2. La conception doit être le miroir de l’activité

Le design n’est pas une fin en soi. Votre design doit refléter votre entreprise, les produits que vous vendez ou les services que vous offrez.

Si votre site permet de travailler en homeoffice, vous privilégierez les longues pages de contenu, la typographie et les grandes images. Si vous travaillez dans la finance, vous ferez appel à un contenu structuré, moderne, une typographie épurée, des couleurs franches et des images professionnelles.

3. Mettez-le en avant

Les gens viennent sur ​​votre site pour une raison précise. L’accès à l’information doit être évident, sinon, vous perdrez un client potentiel. La navigation sur votre site doit être structurée, simple et facile à trouver.

Les internautes sont des gens gâtés et impatients. ils veulent savoir immédiatement qui vous êtes, quelle est votre offre, pourquoi elle est meilleure que celle de vos concurrents, et qui sont vos clients.

4. Éliminez les interstitiels

Les pages interstitiels sont des pop-in qui couvrent l’ensemble de votre site et apparaissent avant que vous puissiez consulter la page attendue. Il est rarement conseillé d’utiliser ce type de publicité, sauf cas rare.

Les interstitiels font baisser la fidélité de vos visiteurs, quelle que soit la taille de votre entreprise, car vos utilisateurs détestent les contenus qui surgissent.

5. Etudiez les cartes de chaleur

Les cartes de chaleur (voir l’eyetracking) aident les entreprises à isoler les points attrayants sur les pages Web.

Les cartes de chaleur vous donnent un aperçu de ce que les utilisateurs de contenu apprécient ou pas.Vous pouvez découvrir à travers la carte de chaleur si les gens ont visité votre page «à propos». Et envisager de changer le nom en «Pourquoi [Nom de l'entreprise]?, et laner un test d’exécution pour 1000 visites.

6. Oubliez l’enregistrement automatique

Exiger de la part des visiteurs qu’ils s’inscrivent sur votre site avant d’en visualiser le contenu est pire qu’une pop-up. Il existe d’autres alternatives à l’enregistrement qui sont moins envahissants.

Il est préférable de différer l’enregistrement sur une autre page. Le seul cas où vous pourriez exiger l’inscription est celui où vous avez quelque chose d’exclusif à offrir, comme Groupon.com, même s’ils permettent d’afficher leurs offres si vous cliquez sur leur logo.

7. Rendez la FAQ accessible

Quelque soit votre avis sur la qualité de votre site, les gens auront toujours des questions à vous poser et les meilleures entreprises l’anticipent.

Il est important pour n’importe quel site Web d’avoir une FAQ pour trois raisons. 1) Tout le monde a des questions; 2) Les FAQ figurent toujours parmi les cinq pages plus consultées. 3) Cela atteste de votre prise en compte des besoins de vos clients.

source