UX SEO design site web application

Tandis que le SEO, ou référencement naturel, consiste en un ensemble de techniques permettant à votre site de plaire aux moteurs de recherche, l’UX quant à lui, vise à plaire aux internautes.

Auparavant pensées comme antagonistes, ces deux expertises web sont désormais amenées à être combinées et à se renforcer mutuellement.

L’expérience utilisateur

L’expérience utilisateur, dite UX, désigne la qualité de l’expérience vécue par l’internaute lors de l’utilisation d’une interface, d’un appareil digital ou plus largement de tout service ou dispositif.

Rappelez-vous de la dernière fois où vous avez effectué la visite d’un site web ? Le site, était-il propre et facile d’utilisation ? Avez-vous rencontré des difficultés à trouver ce que vous recherchiez ? Voici quelques composantes de l’expérience utilisateur sur un site web !

L’UX design sur le web englobe donc l’ensemble des dispositifs visant à améliorer la qualité de la navigation de l’internaute.

Pour une expérience utilisateur optimale et pour rendre votre client ou prospect heureux, voici nos 3 règles d’or :

  • Penser ergonomie.Qui n’a jamais Ă©tĂ© rebutĂ© par la simple allure d’un site web ou un temps de chargement des pages interminable, avant mĂŞme de commencer Ă  chercher ce que l’on dĂ©sire y trouver ?

Travailler sur l’ergonomie de votre site web est alors indispensable pour que l’UX soit la meilleure possible. Affichage rapide, plan de site et contenus clairs et lisibles, fluidité de la navigation et design esthétique/responsive seront le savant mélange pour plaire à l’utilisateur !

  • Se mettre Ă  la place de l’utilisateur, chercher Ă  comprendre ses besoins et attentes pour trouver les possibles points d’amĂ©lioration. On appelle ça des personas. C’est-Ă -dire, comprendre les utilisateurs, savoir qui ils sont, pour que la perception et l’expĂ©rience soient optimums. Pour ça, quelques questions simples Ă  se poser, Ă  titre d’exemple :
    • Puis-je trouver intuitivement et simplement ce que je recherche (un produit, une information) ?
    • Puis-je contacter facilement l’entreprise ?
    • Le site web a-t-il l’air professionnel ?
    • De manière gĂ©nĂ©rale, ai-je confiance en le site web, notamment si je souhaite y rĂ©aliser un achat ?
  • Au delĂ  de l’aspect ergonomique d’un site, l’expĂ©rience utilisateur englobe Ă©galement les Ă©motions ressenties par l’internaute. Et si votre site respirait la joie, la confiance, la bonne humeur ? Tant d’émotions et sentiments pouvant ĂŞtre partagĂ©s pour donner envie aux utilisateurs de naviguer sur celui-ci ! Quelques idĂ©es pour y parvenir :
    • Une dose d’humour appropriĂ©e et un ton engageant, dĂ©calĂ©, original dans vos contenus.
    • Des animations correspondant Ă  la personnalitĂ© de votre marque.
    • Le storytelling : racontez votre marque, mettez en avant son univers, sa vision et ses valeurs, grâce aux formats image ou vidĂ©o par exemple.

L’impact de l’UX sur le SEO

Révolue est l’époque où le SEO fonctionnait grâce à certaines pratiques nuisibles à l’utilisateur telles que le « keyword stuffing » (bourrage de mots-clés). Google a développé au cours des dernières années une certaine appétence pour l’expérience utilisateur et cherche désormais à qualifier et quantifier l’UX. L’objectif ? Améliorer ses algorithmes et faire ressortir au sein de ses résultats de recherches, les sites sachant le mieux répondre aux besoins de l’utilisateur, tant au niveau du contenant que du contenu.

Mais comment Google comprend et évalue ce qu’un internaute pense d’un site ?

Puisque les robots de Google ne sont, pour le moment, pas en capacité de juger de la réelle qualité de l’UX, le moteur de recherche s’appuie sur de nombreux facteurs quantifiables, notamment :

  • Le taux de rebond, dĂ©signant le pourcentage d’internautes ayant quittĂ© le site après la visite d’une seule page.

Un taux de rebond élevé peut révéler une faiblesse dans votre UX : malgré la réponse pouvant être apportée au besoin de l’utilisateur, celui-ci ne continuera pas ses recherches sur votre site. Cela peut, par exemple, être dû à un défaut de mise en page, de vitesse de chargement, de combinaisons de couleurs…

  • Le nombre de pages vues par session

Excellent indicateur de l’expérience utilisateur, le nombre de pages vues par session permet à Google de comprendre si les internautes ont trouvé le site facile d’utilisation et ont été encouragés à poursuivre leur navigation au sein de celui-ci. Plus l’internaute aura trouvé votre site agréable et adapté à ses besoins, plus la valeur de cet indicateur sera élevée.

3 points essentiels pour coupler et contenter SEO et UX

  • AmĂ©liorer la vitesse de chargement

Parce que Google a intégré ce facteur dans ses algorithmes.

Parce que l’internaute s’attend à trouver immédiatement ce qu’il recherche.

  • Proposer une architecture de l’information claire pour une navigation fluide et rapide

Parce que Google n’est pas un grand amateur de profondeur et souhaite pouvoir crawler votre site web aisément.

Parce qu’idéalement, un internaute trouve en 3 clics ce qu’il recherche.

  • Adopter le responsive design

Parce que Google voit d’un mauvais œil, voire pénalise les sites non responsifs.

Parce que l’internaute souhaite que l’UX de votre site soit fabuleuse sur desktop, comme sur mobile.

SEO UX Ergonomie

Pour continuer à utiliser les services de Google Maps afin d’afficher des cartes interactives sur leurs sites web, les collectivités locales, les organismes publics et les entreprises devront passer à la caisse à partir du 16 juillet !

 

Jusqu’alors gĂ©nĂ©reux avec les sites web exploitant en masse les API de son service de cartographie, Google Maps a revu sĂ©vèrement sa grille tarifaire. En effet, jusqu’Ă  prĂ©sent, les sites web ne payaient qu’au-delĂ  de 25 000 affichages de leurs cartes par jour.
Ce quota passe à 28 000… par mois, soit un peu moins de 1 000 affichages gratuits par jour !

Un changement radical de politique tarifaire qui va impacter très fortement les collectivités locales, organismes publics, acteurs du tourisme et entreprises.

Prenons par exemple, le site web www.isere-tourisme.com du Comité Départemental du Tourisme de l’Isère, culminant à plus de 100 000 visites par mois. Si chaque visiteur consulte au moins une fois la carte interactive, élément central du site, la facture mensuelle s’élèvera à partir du 16 juillet à 500 € / mois au lieu de 0 auparavant.

Autant dire que la note risque d’être salée pour les nombreuses collectivités et entreprises intégrant les services de Google Maps pour étoffer leur site web ou leur application.

De surcroît le timing imposé par Google est serré puisque les nouvelles conditions tarifaires entrent en vigueur dés le 16 juillet. Certaines collectivités locales risquent de voir disparaître leurs cartes brutalement, faute de temps pour gérer la situation et basculer vers une autre solution.

Quelles alternatives pour remplacer Google Maps ?

Face à une telle hausse des coûts et au risque de voir votre carte rapidement remplacée par un message d’erreur, que faire ? Pour cela 2 alternatives pour remplacer Google Maps s’offrent à vous :

Option #1 — réservée aux plus bricoleurs :

Développer par vous même votre carte interactive en utilisant une solution open source comme OpenStreetMap. 

L’atout des solutions libres réside dans le fait qu’elles sont par natures gratuites, mais ne perdez pas de vue que vous ne disposerez pas d’une solution clé en main et qu’il faudra supporter en interne le coût d’un développement spécifique.

De plus, même des services gérés bénévolement et à but non lucratif ont des limites, c’est le cas des services OpenStreetMap de fond de carte ou de géocodage. Il faut en effet bien financer à un moment ou un autre l’infrastructure qui n’est pas extensible à l’infini. Afin d’éviter que leurs serveurs ne surchauffent, OpenSreetMap limite donc l’usage de ses services et vous pousse à investir dans votre propre solution d’hébergement.

Autre inconvénient avec cette solution en open source, vous ne maîtrisez pas pleinement les données affichées sur la carte car OpenStreetMap affiche des données recueilles et publiées par n’importe quel membre de leur communauté d’utilisateurs.
En somme, en utilisant OpenStreetMap pour développer votre carte interactive, votre organisation s’expose au risque de diffuser des informations partielles ou potentiellement fausses.

Option #2 — pour les organisations souhaitant faire le choix d’une solution pérenne tant techniquement qu’économiquement : 

Saisir l’opportunité d’être accompagné par un éditeur de solutions de cartographie web, afin d’obtenir une carte interactive offrant le meilleur service d’information à votre public.

Pour ce rôle, faîtes confiance à Smart/Origin, start-up innovante officiant dans les domaines de la data visualisation, du développement web et mobile et des systèmes d’informations géographiques !

Notre équipe accompagne de nombreuses collectivités locales, organismes publics et entreprises dans l’exploitation du potentiel géographique de leurs données pour développer l’attractivité de leurs territoires, piloter leurs activités et rendre l’information accessible et lisible au plus grand nombre.

Pour remplacer Google Maps, nous vous proposons notre offre Cities, pensée pour offrir à votre public une expérience cartographique immersive au service de la découverte de votre territoire et de la valorisation de votre patrimoine.

Avec Cities, vous représentez sur votre carte interactive l’ensemble des points d’intérêts et acteurs locaux de votre territoire :  lieux touristiques, commerces, lignes de transport en commun, restaurants, hôtels, espaces naturels, centres d’affaires… Habillée aux couleurs de votre organisation, votre carte interactive trouvera une place de choix sur votre site web pour booster votre communication et attirer plus de visiteurs.

 

5 raisons de choisir l’offre Cities de Smart/Origin comme alternative à Google Maps 

 

 

1#  — Le sens du design dans le moindre détail pour une carte habillée à vos couleurs

Chez Smart/Origin, nous mettons à votre disposition les talents de notre directrice artistique pour habiller votre carte interactive aux couleurs de votre organisation. C’est l’assurance que votre carte interactive soit unique et différenciante. Elle deviendra rapidement un élément central de votre site web et de votre communication digitale pour valoriser votre patrimoine et accroître l’attractivité de votre territoire.

2#  — Une expérience d’utilisation au service de la découverte de votre territoire

Avec Cities, vous organisez facilement les points d’intérêts et lieux emblématiques de votre territoire en thématiques, catégories et filtres pour faciliter la navigation de vos visiteurs. Un système de suggestion permet d’accéder rapidement à vos contenus et de proposer des parcours thématiques et différents itinéraires personnalisés : circuits, balades, lignes de transports…

3# —  Une carte adaptée à tous les supports et s’intégrant sans coutures

Qu’il s’agisse d’intégrer une carte interactive dans votre site web ou dans votre application web, Cities s’adapte à votre environnement. Le responsive design de votre carte interactive permet à votre dispositif de communication d’être accessible depuis n’importe quel navigateur web et sur tous les formats de smartphones et tablettes. C’est l’assurance que votre carte interactive soit toujours consultable en situation de mobilité.

4# —  La possibilité d’enrichir votre carte avec des contenus et services à forte valeur ajoutée

Avec Cities, offrez à votre public une expérience cartographique immersive au service de la découverte de votre territoire et de la valorisation de votre patrimoine. Vous avez la possibilité de raconter l’histoire de vos lieux emblématiques, de proposer des informations contextuelles et d’enrichir le contenu associé à vos points d’intérêts grâce à des fiches détaillées s’ouvrant d’un simple clic sur votre carte.

Avec Cities, vous pouvez également proposer à vos visiteurs un calculateur d’itinéraires pour leurs permettre de rechercher une balade, un parcours ou de créer un itinéraire personnalisé.

5# —  Un accompagnement sur mesure au service de la réussite de votre projet

Enfin, avec Smart/Origin, vous faites le choix d’un partenaire proche de vos préoccupations, vous accompagnant tout au long des étapes structurantes de votre projet et s’assurant de l’hébergement, des évolutions et de la maintenance de votre carte interactive.

Pour la réussite de votre projet, une équipe dédiée à votre organisation sera composé de profils complémentaires : ingénieur de développement, designer d’interface, architecte, chef de projet.

6#  — Bonus : un retour d’expérience sur Cities

« Cities est un outil très intuitif et facile d’utilisation, nous constatons des rĂ©sultats positifs de la part du grand public l’utilisant sur notre site web. Nos usagers plĂ©biscitent l’ergonomie et la facilitĂ© de navigation de la carte interactive. Pour notre part, nous avons particulièrement apprĂ©ciĂ© votre rĂ©activitĂ© pour faire Ă©voluer la carte et rĂ©pondre Ă  toutes nos requĂŞtes. » : Magali Brunet, CommunautĂ© d’AgglomĂ©ration Cannes Pays de LĂ©rins

Vous souhaitez remplacer Google Maps dès à présent et en savoir plus sur Cities ?

Envoyez nous un email Ă  contact@smart-origin.com
ou appelez notre équipe au 04 76 41 16 69 pour échanger plus longuement sur votre projet.

D’après une étude menée par Microsoft en 2015, en arrivant sur un nouveau site web, le visiteur décide en huit secondes de poursuivre sa navigation ou de fermer la page. Durant ces huit secondes, il aura lu les titres principaux, survolé un début de texte et regardé rapidement les images, et aura perçu inconsciemment les couleurs utilisées.

Dans cet article, nous allons parler de l’importance du choix de couleurs pour le design de votre interface d’application ou site web. Car celles-ci ont une signification dans l’esprit de l’utilisateur, elles influencent ses émotions et ses actes. Mais attention, ces principes généraux que nous allons voir ici sont valables pour l’occident. Nous verrons en fin d’article quelques principes à avoir en tête concernant les autres régions du monde, car selon les cultures la signification des couleurs diverge.

Notre perception des couleurs est d’instinct liée à leur présence primitive dans la nature, voici donc quelques principes généraux à avoir en tête lorsqu’on choisi une couleur pour notre logo et notre charte graphique.

Blanc

Qualités associées : simplicité, pureté, spiritualité, virginité, innocence, simplicité, précision, propreté, hiver, neige, efficacité, innovations, sainteté, optimisme.

Activités : mode, actualités, technologies, informatique, santé.

Gris

Qualités associées : solennité, professionnalisme, sophistication, pragmatisme, intemporalité.

Activités : sites professionnels, articles de luxe ou pour créer un effet d’équilibre et de calme.

Bleu

Qualités associées : clarté, confiance, calme, confiance, contrôle, succès.

Activités : high-tech, réseaux sociaux, banques, secteurs juridiques et de la santé.

Jaune

Qualités associées : énergie, joie, optimisme.

Activités : tourisme, énergie solaire, électricité.

Marron

Qualités associées : fiabilité, robustesse, stabilité, amitié, nature.

Activités : contexte culturel ou luxueux, secteur du chocolat.

Noir

Qualités associées : sérieux, luxe, pouvoir, formalité, chic, sophistication, élégance, profondeur, tristesse, autorité, prestige, puissance.

Activités : cinéma, luxe, art, photo.

Orange

Qualités associées : motivation, impulsion, optimisme, enthousiasme, dynamisme, vitalité, équilibre, joie, chaleur, détermination, créativité, encouragement, amusement, fraicheur, jeunesse.

Activités : divertissement, jeunesse, sport, nouvelles technologies, création.

Rose

Qualités associées : amour, féminité, enfance, charme, intimité, chic, beauté, énergie.

Activités : journal, univers de l’enfance.

Rouge

Qualités associées : énergie, mouvement, passion, amour, confiance.

Activités : nourriture, mode, loisirs, sport, marketing, publicité, services d’urgence, santé.

Vert

Qualités associées : croissance,  salubrité, équilibre, nature, environnement, espoir.

Activités : découverte, nature, voyage, écologie, développement durable, santé, renouveau.

Violet

Qualités associées : originalité, créativité, prospérité, mystère, respect, connaissance, élégance.

Activités : produits de beauté, astrologie, massages, yoga, spiritualité.

 

Voici quelques exemples d’interprĂ©tation des couleurs dans le reste du monde, bon Ă  savoir si vous avez pour projet de travailler en collaboration avec d’autres pays :

Le blanc est la couleur du deuil dans la plupart des pays d’Asie, et représente le malheur en Inde. Le bleu caractérise le deuil en Iran, en Chine, c’est la couleur de l’immortalité. Le jaune est une couleur qui fait référence à la royauté en Asie. Au Japon, c’est un symbole de courage et de force. Pour les bouddhistes, le jaune est spirituel et apaisant. En Inde, il est associé au commerce et à la négociation. Enfin, il symbolise le deuil en Égypte. Le noir est porté par les jeunes garçons en Chine. En Inde, le noir rétablit l’équilibre et la santé. En Thaïlande, c’est la couleur de la malchance. Le rouge est la couleur du deuil en Afrique du Sud, elle représente la chance en Chine. C’est aussi la couleur des robes de mariée en Chine et en Inde. Le vert est la couleur du mensonge en Chine, en Irlande, le vert rappelle le symbole national, le trèfle à quatre feuilles.

Vous avez à présent quelques pistes afin de faire votre choix de couleurs pour votre charte graphique, pensez bien au public que vous ciblez et au marché visé. 


Article rédigé par Fanny Koch. 

Il vous est certainement déjà arrivé de vous rendre sur un site internet sur lequel ne trouvez pas les informations que vous cherchez facilement, jusqu’à en être agacé et finir par refermer la page. C’est pour éviter cela et dans un soucis d’améliorer les futurs sites internet que l’on s’interroge sur ce qui fonctionne et ne fonctionne pas dans la lecture d’une page web.

Depuis peu utilisĂ©e en marketing, une mĂ©thode permet d’analyser le suivi du regard afin d’optimiser le contenu d’une page web : l’Eye-Tracking, aussi appelĂ© oculomĂ©trie en français.

Cette mĂ©thode permet pour le marketing de mieux comprendre ce qui motive ou rebute les utilisateurs. Issue de l’ophtalmologie et des sciences cognitives, cette mĂ©thode permet d’analyser l’activitĂ© oculaire d’une personne en rĂ©alisant un suivi de son regard. Cela permet de savoir avec prĂ©cision oĂą regarde l’utilisateur, ce qu’il voit et ce qu’il ne voit pas.

L’Eye-tracking a permis de rĂ©vĂ©ler que les dĂ©placements du regard sur une page web sont fortement influencĂ©s par la mise en page et l’agencement des informations. De plus, contrairement Ă  ce qu’on pourrait croire, notre regard Ă©viterait toutes les zones qui s’apparentent Ă  des bannières publicitaires : les zones publicitaires, animĂ©es ou non, ne sont gĂ©nĂ©ralement pas fixĂ©es par les internautes, qu’elles soient disposĂ©es sur les parties latĂ©rales ou en haut de page d’un site web. Ainsi la publicitĂ© tend Ă  disparaitre sur les sites web : les utilisateurs ont des objectifs pour visiter un site et s’intĂ©ressent Ă  son contenu, ils ne se laissent pas distraire par la publicitĂ©. Pour ce faire, des tests d’Eye-tracking sont rĂ©alisĂ©s sur des participants. Ils se dĂ©roulent gĂ©nĂ©ralement dans un laboratoire d’études cognitives. L’Eye-tracker est un Ă©cran d’ordinateur dans lequel sont placĂ©es des diodes qui Ă©mettent de la lumière infrarouge (inoffensive pour l’œil). Des camĂ©ras intĂ©grĂ©es dans l’écran filment Ă  distance la rĂ©flexion de la lumière infrarouge sur les pupilles du participant afin d’identifier les zones qu’il observe. Afin d’analyser en dĂ©tail le comportement des consommateurs, ces donnĂ©es sont alors calculĂ©es par « zone d’intĂ©rĂŞt » : nombre de regards, temps de regard, sens de lecture, ordre de dĂ©couverte, etc.

Il a aussi été remarqué que les utilisateurs on tendance lorsqu’ils « scannent » une page à effectuer tous les même mouvement de balayage en F comme on peut le voir avec l’illustration ci-dessous. Cela se remarque particulièrement sur les pages de résultats de recherche où les informations sont présentées sous forme de blocs de texte superposés : les déplacements du regard ont tendance à composer deux bandes horizontales suivies d’une bande verticale. L’internaute commence par lire le haut du premier contenu (première barre horizontale du F), il descend ensuite dans la page, repère un point d’intérêt et lit un second passage, généralement plus court que le premier (la deuxième barre horizontale) puis il finit de scanner verticalement la page (barre verticale du F).

 

Le balayage visuel en F illustré avec la carte de chaleur (Expérience Alertbox de Nielsen : « F-Shaped Pattern For Reading Web Content »)

Cette méthode permet de mettre en avant l’importance d’une bonne ergonomie. Quelques règles ressortent de ces observations pour concevoir un site web bien pensé :

  • Placez votre logo en haut Ă  gauche de votre page web
  • Placez les contenus importants dans la partie gauche de votre page.
  • La barre de navigation doit ĂŞtre idĂ©alement placĂ©e Ă  l’horizontal au dessus des contenus
  • Pensez au parcours de l’oeil en F lorsque vous rĂ©digez des textes et insĂ©rez des images dans vos pages, afin d’amĂ©liorer leur lisibilitĂ©.
  • Les deux premiers paragraphes sont les plus importants, il est inutile de surcharger votre page de textes qui auront peu de chance d’être lus.
  • Mettre en Ă©vidence les informations pratiques type numĂ©ro de tĂ©lĂ©phone et adresse.
  • Ne pas mettre d’images trop « lourdes » afin que la page charge rapidement.

En conclusion, pour créer un site web attrayant, il vaut mieux simplifier la navigation en privilégiant une mise en page et un design sobre et épuré, tout en respectant le sens de lecture en F de gauche à droite. À vous de jouer !

Article rédigé par Fanny Koch.

L’utilisation d’un système de gestion de contenu performant, est devenu une condition essentielle à la réussite et l’aboutissement d’un projet Web réussi. Dès lors, le choix du CMS devient un point sur lequel il vaut la peine que les preneurs de décisions se penchent et qu’ils prennent du temps. La grande force de Drupal ? Sa communauté : active et regroupant de plus en plus de membres, elle offre continuellement de nouveaux modules, permettant à chacun d’ajouter de nouvelles fonctionnalités à son application web.

Ces apports sans cesse renouvelĂ©s de la communautĂ© ont toutefois leurs limites lorsqu’un besoin bien spĂ©cifique est exprimĂ©, il est alors parfois nĂ©cessaire de crĂ©er de nouveaux modules. Afin de mieux comprendre comment s’articule un module Drupal, et l’architecture logicielle derrière, prenons ici l’exemple d’un module dĂ©veloppĂ© rĂ©cemment au sein de Smart/Origin, permettant une identification en deux temps, soit via nom d’utilisateur, soit via adresse email. L’objectif est ici de demander un nom d’utilisateur ou une adresse mail, de regarder si la chaĂ®ne de caractères saisie correspond Ă  un nom d’utilisateur ou Ă  une adresse email associĂ©(e) Ă  un compte existant pour ensuite, dans un second temps, demander un mot de passe avec lequel lancer la procĂ©dure de connexion.

Une fonctionnalitĂ© d’identification est bien Ă©videmment dĂ©jĂ  prĂ©sente dans ce que peut proposer Drupal : un formulaire demande un nom d’utilisateur et un mot de passe, interroge la base de donnĂ©es avec les informations rĂ©cupĂ©rĂ©es et procède, ou non, Ă  l’identification. Vous le savez, un des principes fondamentaux du dĂ©veloppement informatique est de ne pas chercher Ă  rĂ©inventer la roue, c’est Ă  dire qu’ici il sera bien sĂ»r prĂ©fĂ©rable de se baser sur l’existant, que de partir sur la programmation d’un module de connexion Ă  part entière !

La première Ă©tape sera alors d’intervenir dans la gĂ©nĂ©ration du formulaire de connexion proposĂ© par Drupal. Le système de hooks nous permet justement de venir modifier le comportement d’un module, Ă  diffĂ©rentes Ă©tapes du process, que ce soit lors de la gĂ©nĂ©ration des blocks, des menus ou du rendu de la vue par exemple.

Représentation du système de hooks utilisé par Drupal (source : https://www.slideshare.net/tanoshimi/creating-custom-drupal-modules)

 

Commençons donc par la modification du formulaire :

 

 

function two_step_module_form_user_login_alter(&$form, &$form_state){
    $form["#attached"]["js"][] = drupal_get_path('module', 'two_step_module') . '/js/two_step_module.js';
    $form["#attached"]["css"][] = drupal_get_path('module', 'two_step_module') . '/css/two_step_module.css';
    $form["#attributes"]["class"][] = "first-step";
    $form["actions"]["submit"]["#suffix"] = "<div id='bouton_next_step' class='bouton-form-connexion' onclick='next_step()'>Étape suivante</div>
    <div id='bouton_login' class='bouton-form-connexion' onclick='login()'>Se connecter</div>
    <div id='retour-page-login' onclick='retour()'>Retour</div>";
}

Pour mieux comprendre le fonctionnement de ce hook, rappelons que Drupal est très prĂ©cis sur l’appellation des fonctions car ce nom spĂ©cifie directement leur utilisation. Ici, notre module « two_step_module » vient altĂ©rer (« alter ») le formulaire user_login(« form_user_login »). Notons qu’ici, la visibilitĂ© des boutons et des champs du formulaire sera gĂ©rĂ©e par les classes CSS « first-step » et « second-step » associĂ©es au formulaire.

 

Exemple de formulaire de connexion avec la classe « first-step » associée, masquant notamment le champ de mot de passe.

 

 

Suivons le fil, avec la fonction JS « next_step() » appelée par « Etape suivante » :

 

 

function next_step(){
    //Récupération de la valeur du formulaire
    var user_mail = jQuery("#text-input-user").val();
    //appel ajax
    jQuery.ajax({
        url : Drupal.settings.basePath + 'check_user_mail',
        type : 'POST',
        data : 'user_mail=' + user_mail,
        dataType : 'json',
        success : function(result, statut){
            if(result["status"] === "failure"){
                jQuery("#messages .section").html('<div class="error messages">' + result["message"] + '</div>');
            }
            else{
                jQuery("#text-input-user").val(result["username"]);
                jQuery("#user-login").attr("class","second-step");
            }
        },
        error : function(res, statut, erreur){
            alert(erreur);
        }
  });
}

Nous rĂ©cupĂ©rons alors dans une variable la valeur du champ « user » du formulaire. Pour le moment nous ne savons pas si cette valeur est un nom d’utilisateur ou une adresse mail. C’est pour cela que celle ci est envoyĂ©e Ă  l’API « /checkuser_mail » qui fait le travail de vĂ©rification et qui nous retourne un rĂ©sultat au format JSON.

Ce rĂ©sultat est soit un statut « failure » pour spĂ©cifier que la recherche a Ă©chouĂ©e, soit un nom d’utilisateur valide. Dans ce cas le formulaire passe en mode « second-step », qui masque le champ « user », et affiche le champ du mot de passe ainsi que le bouton submit.

function two_step_module_menu(){
    $items = array();
    $items["check_user_mail"] = array(
        'page callback' => '_two_step_module_check_user_mail',
        'access callback' => true,
        'type' => MENU_CALLBACK,
    );
    return $items;
}

N’oubliez pas d’indiquer Ă  Drupal comment il doit rĂ©agir lorsqu’un appel est effectuĂ© sur l’url appelĂ©e en ajax, « check_user_mail », qui ici nous renvoie vers la fonction « _two_step_module_check_user_mail » (ci-dessus).

function _two_step_module_check_user_mail(){
    $user_mail = $_POST["user_mail"];
    $status = "success";
    $username = "";
    $message = "";
    //on regarde la base de données Drupal
    $result = _two_step_module_check_user_mail_drupal($user_mail);
    if (!$result){
        $status = "failure";
        $message = t("Nom d'utilisateur ou mail non trouvé, merci de vérifier votre saisie");
    }
    else{
        $username = $result;
    }
    header('Content-type:application/json;charset=utf-8');
    print json_encode(array("status" => $status, "username" => $username, "message" => $message));
    return null;
}

La fonction ci-dessus fait ici office de contrĂ´leur, qui rĂ©cupère la donnĂ©e passĂ©e en POST lors de notre appel ajax, appelle la fonction qui s’occupera de la vĂ©rification (« _two_step_module_check_user_mail_drupal() ») et transmet ensuite le rĂ©sultat.

 

 

function _two_step_module_check_user_mail_drupal($user_mail){
    //construction de la requĂŞte
    $user_name_requete = db_select("users", "u");
    $or_request = db_or()
        ->condition("u.name", $user_mail)
        ->condition("u.mail", $user_mail);
    $user_name_requete->condition($or_request);
    $user_name_requete->fields("u", array("name"));
    //execution de la requĂŞte
    $user_name_requete_result = $user_name_requete->execute();
    //traitement du résultat
    foreach($user_name_requete_result as $single_item){
        $user_name = $single_item->name;
        return $user_name;
    }
    return null;
}

Ce qui nous amène Ă  l’interrogation de la base de donnĂ©es en tant que telle, oĂą l’on cherche ici Ă  savoir si un « user » ayant comme paramètre « name » ou « mail » Ă©gal Ă  notre variable « $user_mail » existe, et que pour le rĂ©sultat, seul le champ « name » nous intĂ©resse. Si nous avons un rĂ©sultat, c’est gagnĂ© ! Nous pouvons maintenant retourner ce rĂ©sultat en tant que « $user_name », car nous sommes alors sĂ»rs que ce que nous avons, c’est le nom d’utilisateur.

Retour donc sur la fonction javascript qui, comme nous l’avons vu, mettra ce nom d’utilisateur en tant que valeur du champ « user », avant de masquer celui-ci et de demander un mot de passe.

 

Formulaire de connexion avec la classe « second-step » associĂ©e : nom d’utilisateur validĂ©, en attente de mot de passe.

 

Notre travail de modification est alors terminĂ© car, lors de la validation du formulaire par l’utilisateur, nous retrouvons l’Ă©tat attendu par Drupal :

• Un nom d’utilisateur dans le champ « user », que celui-ci ait originellement Ă©tĂ© renseignĂ© avec un nom d’utilisateur ou une adresse mail.

• Le mot de passe associĂ© Ă  ce nom d’utilisateur dans le champ « password ».

Comme vous pouvez le constater, il est possible grâce Ă  ce système que chacun puisse se baser sur une fonctionnalitĂ© existante afin de l’adapter Ă  ses desiderata particuliers.

Chez Smart/Origin, nous pensons que l’équilibre d’un tel modèle repose alors sur la participation bi-latérale de chacun. Nous avons donc rendu ce module disponible sur le site de partage communautaire de Drupal, à l’adresse ci-dessous :

https://www.drupal.org/project/ldap_two_steps_login

Le module développé est compatible avec une identification LDAP (https://www.drupal.org/project/ldap), chaque LDAP configuré sera ainsi vérifié si aucun résultat ne ressort de la requête sur la base de données Drupal.

 

Article rédigé par Robin Gueneley.

Après vous avoir prĂ©sentĂ© les diffĂ©rentes solutions existantes pour la crĂ©ation d’applications mobiles multi-plateformes dans un prĂ©cĂ©dent article. Nous vous proposons dans cette article un retour d’expĂ©rience, de certaines solutions pour crĂ©er des applications multi-plateformes, appliquĂ© Ă  une problĂ©matique technique concrète.

Dans le cadre d’une Ă©tude technique rĂ©cente nous nous sommes demandĂ© comment exĂ©cuter du code natif dans le cadre d’une application mobile cross-plateforme.

Qu’entend-t-on par « code natif » ?

Par code natif on entend : un code très souvent dĂ©veloppĂ© dans un langage bas niveau (proche de la machine) tel que le C++. Ce type de code est employĂ© principalement pour rĂ©pondre Ă  des contraintes de performance ou d’accès Ă  des composants spĂ©cifiques tels que la mĂ©moire ou la carte graphique. Bien que l’utilisation de code natif soit frĂ©quente lors d’un dĂ©veloppement iOS avec le langage Objective-C, cette tendance est peu commune sur Android avec le langage Java.

L’introduction rĂ©cente par Apple du langage Swift et l’utilisation de Java sur Android tend Ă  limiter l’utilisation de code natif afin de simplifier le dĂ©veloppement en dĂ©lĂ©guant Ă  la machine les problĂ©matiques de gestion de la mĂ©moire.

En quoi exécuter du code natif dans une application mobile multi-plateforme est une problématique ?

Cette question est tout Ă  fait lĂ©gitime car les outils de dĂ©veloppement proposĂ©s par Google et Apple permettent ce type d’exĂ©cution, rien ne semble donc freiner cette possibilitĂ©. Cependant dans le cadre d’un dĂ©veloppement mobile multi-plateformes l’utilisation d’un Framework tend Ă  organiser le dĂ©veloppement autour d’un langage haut niveau, tels que C# ou Javascript, et ce afin de faciliter la gĂ©nĂ©ration de code spĂ©cifique. C’est pourquoi il est moins trivial d’appeler un code natif lorsque le langage utilisĂ© n’est pas C++.

IndĂ©pendamment d’un dĂ©veloppement multi plateformes comment dĂ©veloppe-t-on du code natif pour mobile ?

Sur la plateforme iOS le code natif se présente de diverses manières il peut être proposé via une librairie dynamique (fichier .dylib), un module objective-C (fichier .mm) ou encore une librairie statique (fichier .a).

Sur Android il faut passer par le Native Development Kit (NDK) pour compiler la librairie en fichier .so (librairie dynamique unix). Ensuite il faut effectuer une liaison (binding) via l’interface java native (JNI) entre la librairie dynamique et le code Java mĂ©tier.

Ce que l’on a cherchĂ© Ă  valider

Lors de notre Ă©tude technique nous avons cherchĂ© Ă  valider l’exĂ©cution de code natif via divers frameworks de dĂ©veloppement multi-plateformes (Unity, React-Native et Xamarin). Le code natif que nous avons cherchĂ© Ă  exĂ©cuter se veut très simple : une fonction qui effectue une somme ou une fonction qui retourne une chaine de caractères. Nous avons chercher Ă  exĂ©cuter une fonction simple afin de nous concentrer sur la problĂ©matique d’appel.

La fonction est encapsulée dans une librairie native que nous aurons compilée via le compilateur C++ adéquat de la plateforme cible.

 

En pratique

Dans cette section nous allons voir comment nous avons réussi à appeler du code natif à partir des différents frameworks ciblés.

1. Unity

Pour les outils, tout se passe avec les IDE Unity et MonoDevlop.

Unity étant destiné au monde du jeu vidéo, il est donc nécessaire de créer une scene (environnement 3D) associé à un asset de type script (C#).

Ensuite il faut ajouter au projet sous forme d’asset les librairies. Pour Android les fichiers .so dans le dossier Plugins/Android/<ABI>/fichier.so et pour iOS Plugins/iOS/fichier.mm et les configurer comme suis :

 

 

Enfin il suffit de charger la librairie en associant une directive de compilation et une directive P/Invoke.

Une fois les fonctions exposées de manière statique il suffit de les appeler dans le code.

La génération de code JNI est transparente avec Unity, néanmoins la compilation des librairies se fera en dehors du projet.

 

1. React-Native

Au niveau des outils, React-Native ne propose pas d’IDE dĂ©diĂ© il faudra passer par un Ă©diteur/IDE supportant au minimum ES6 et au mieux ES6, Java, Objective-C.

Pour React-Native l’appel de code natif sera moins trivial que pour Unity il sera d’abord nĂ©cessaire de passer par un outil intermĂ©diaire (Djinni) qui va automatiser la compilation du code C++ et la gĂ©nĂ©ration de module (iOS) / code JNI (Android).

Ensuite contrairement à Unity il faudra développer les ponts (bridge/binding) entre le code généré par Djinni et le code généré par React Native.

Enfin dans le code javascript React-Native il suffira de charger le module via le package React-Native NativeModules.

 

 

 

 

 

3. Xamarin

En utilisant la dernière version de Visual Studio (PC/Mac) il suffira de créer un projet Xamarin.Forms afin de cibler plusieurs plateformes mobiles.

A partir de ce projet il sera nĂ©cessaire de crĂ©er dans chaque sous projet cible créé par Xamarin un DependencyService qui implĂ©mente une interface dĂ©finit dans le projet global Xamarin. C’est ensuite dans les implĂ©mentations cibles que l’appel Ă  une librairie native se fera, via une directive P/Invoke. Le projet global lui ne fera que des appels de haut niveau en demandant l’interface et non l’implĂ©mentation.

 

La compilation des librairies se fera en dehors du projet Xamarin pour Android, pour iOS il faudra ajouter une directive de compilation au projet.

 

Retour d’expĂ©rience

Comme on a pu le voir au cour de ce dernier article nous avons obtenu un résultat concluant sur chacune des plateformes avec tous les frameworks testés.

Pour arriver Ă  un rĂ©sultat avec Unity il nous aura fallu moins d’un jour, une des difficultĂ©s rencontrĂ©es a Ă©tĂ© d’utiliser ce frameworks (et ses outils) dans un contexte indĂ©pendant du jeu vidĂ©o.

React-Native est clairement l’exemple le plus clĂ© en main que nous ayons produit lors de cette analyse, la gĂ©nĂ©ration du code pour une plateforme cible gĂ©nĂ©rant Ă©galement la librairie dynamique. Cependant cette simplicitĂ© est coĂ»teuse en temps de configuration (1.5 jour pour arriver Ă  un rĂ©sultat), nous avons du crĂ©er des bindings parfois complexes pour obtenir un tel rĂ©sultat. De plus, la documentation Ă©tant actuellement limitĂ©e, aller plus loin que le simple exemple de faisabilitĂ© pourra prendre un temps non nĂ©gligeable.

Avec Xamarin la rĂ©alisation d’un exemple aura Ă©tĂ© assez rapide (1/2 journĂ©e) nĂ©anmoins la compilation des librairies iOS avec le projet Xamarin n’a pas Ă©tĂ© Ă©vidente Ă  mettre en oeuvre.

 

Pour aller plus loin

Les projets Unity/React-Native/Xamarin rĂ©alisĂ©s lors de cette analyse sont disponibles en open source sur notre compte github : https://github.com/smartorigin/Cross-platform-mobile-development-samples N’hĂ©sitez pas Ă  les manipuler/tester, des README sont lĂ  pour vous aider dans la configuration/prise en main de ces diffĂ©rentes technologies.

Smart/Origin vous accompagne dans la crĂ©ation d’applications mobiles innovantes, de l’Ă©tude de faisabilitĂ© Ă  la livraison sur les diffĂ©rents store.

 

Article rédigé par Marc-Alexandre Blanchard.

RĂ©cemment nous avons Ă©tĂ© conduits Ă  rĂ©aliser une Ă©tude sur l’utilisation de code natif dans une application mobile qui cible plusieurs plateformes. Dans cette sĂ©rie de deux articles nous allons revenir sur la notion de dĂ©veloppement multi-plateformes mobiles dans un premier article, avant de prĂ©senter dans un deuxième article, un retour d’expĂ©rience, via divers exemples permettant d’utiliser du code natif dans une application mobile multi-plateformes.

La présentation qui suit ne se veut pas exhaustive, elle présente les points que nous avons jugés clés pour comprendre les principes abordés dans le deuxième article.

Avant de dĂ©finir ce qu’est une application multi-plateformes rappelons quelles sont les principales plateformes mobiles et lesquelles se doit-on de cibler lors du lancement d’un nouveau produit mobile.

Les principales plateformes mobiles

Le monde de la tĂ©lĂ©phonie mobile (en 2017) est reprĂ©sentĂ© par deux acteurs principaux qui se partagent la quasi totalitĂ© du marchĂ© : Google avec Android (87.8% par de marchĂ©) et Apple avec iOS (11.5%) (source Gartner Novembre 2016). La force principale des systèmes d’exploitations Android et iOS est leur extensibilitĂ© via un Ă©cosystème applicatif ouvert aux entreprises et crĂ©ateurs externes. Ces applications sont alors disponibles via un store (App store pour iOS et Play Store pour Android).

Cette sĂ©rie de deux articles ne traite pas de la plateforme Windows Mobile 10 notamment pour sa faible part de marchĂ© (env <1%) mais aussi eut Ă©gard de l’aveu d’Ă©chec de la part de Microsoft : https://t.co/0CH9TZdIFu https://t.co/ePsySxR3LB

Le développement multi-plateforme

Afin de ne pas rĂ©inventer la roue lors de la crĂ©ation d’une application (mobile ou non) lorsqu’on cible plusieurs plateformes il peut ĂŞtre intĂ©ressant de passer par un dĂ©veloppement multi-plateformes (ou cross-platform). Ce type de dĂ©veloppement Ă  l’avantage de factoriser la logique mĂ©tier et d’abstraire les spĂ©cificitĂ©s de dĂ©veloppements propres Ă  chaque plateforme en utilisant un framework (ensemble d’outils pour la crĂ©ation de logiciels). La simplicitĂ© gagnĂ©e par cette abstraction que propose le framework utilisĂ© pourra conduire dans certains cas au dĂ©veloppement de modules spĂ©cifiques destinĂ©s Ă  combler les lacunes du framework.

Les différentes manières de faire un développement multi-plateforme

1. Full web

La solution la plus simple consiste en la rĂ©alisation d’un site web. Toutes les plateformes mobiles disposent d’un navigateur web ainsi il est tout-Ă -fait possible de crĂ©er une application interactive avec les technologies standards du web (HTML/JS/CSS). C’est ainsi que fonctionnent nos produits Cities et Dashboard. Cette solution facilitant le dĂ©veloppement prĂ©sente le dĂ©savantage de ne pas pouvoir tirer entièrement partie du support mobile et de certains de ses capteurs : tels que le gyroscope. De plus en passant par un navigateur web le dĂ©veloppement hĂ©rite de tous les problèmes du dĂ©veloppement web : compatibilitĂ© sur tous les navigateurs, performances limitĂ©es.

 

2. Applications Hybrides

Les applications hybrides sont des applications web dĂ©veloppĂ©es avec les technologies standards du web mais encapsulĂ©es dans une application via une WebView. Cette solution est similaire Ă  la crĂ©ation d’un site web, les problèmes restent les mĂŞmes vu que ces frameworks utilisent les Webview du système sur lequel ils sont dĂ©ployĂ©s. NĂ©anmoins via ces technologies il est possible de dĂ©velopper des modules spĂ©cifiques pour proposer des fonctionnalitĂ©s propres Ă  chaque système.

Parmi les frameworks existants on peut citer : Apache Cordova et Ionic (qui se base sur Apache Cordova)

 

3. Frameworks dédiés au développement multi-plateformes

Cette solution consiste Ă  developper de vĂ©ritables applications natives via un framework qui va abstraire les spĂ©cificitĂ©s propres Ă  chaque plateforme pour proposer des interfaces logicielles de plus haut niveau. Cette solution prĂ©sente l’avantage d’abstraire les problĂ©matiques de dĂ©veloppements propres Ă  chaque plateforme en les rĂ©duisant au dĂ©veloppement de modules spĂ©cifiques.

La solution offrant le plus de libertĂ© pour une dĂ©veloppement reste l’utilisation de ce type de framework que ce soit pour les performances ou encore la crĂ©ation de modules spĂ©cifiques. Cette libertĂ© se paye par l’utilisation d’outils parfois complexes et la familiarisation avec des frameworks offrant de nombreuses fonctionnalitĂ©s.

 

 

 

 

Présentation de quelques frameworks dédiés au développement multi-plateformes

Parmi les frameworks dĂ©diĂ©s nous allons nous concentrer sur les trois frameworks qui suivent : Unity, Xamarin et React-Native. Nous avons ciblĂ© ces trois framework pour leurs communautĂ©s existantes ou grandissantes, leurs supports, leurs utilisations et leurs complexitĂ©s d’utilisations.

Nous n’aborderons pas les frameworks comme : Qt ou encore Juce qui pourraient aussi rĂ©pondre au besoin.

1. Unity

Ce framework est principalement dĂ©diĂ© Ă  la conception de jeu vidĂ©o, nĂ©anmoins il permet de crĂ©er des applications multi-plateformes aussi bien mobiles que bureautiques. L’utilisation d’Unity devient vite limitĂ©e lorsqu’il est question de crĂ©er une application qui n’est pas un jeu, l’IDE Ă©tant centrĂ© sur des concepts de « scene » et « assets » propres au Jeu vidĂ©o.

2. React-Native

Ce framework, rĂ©cemment propulsĂ© par Facebook, propose d’utiliser la simplicitĂ© d’utilisation de la technologie React pour crĂ©er de vĂ©ritables applications natives. Ainsi en utilisant ES6 et JSX la crĂ©ation se veut simplifiĂ©e et permet de profiter des performances et composants des systèmes mobiles. CĂ´tĂ©s points faibles, React-Native reste une technologie relativement nouvelle et dispose d’une communautĂ© encore grandissante, d’autre part React-Native hĂ©rite de la license propre Ă  Facebook qui spĂ©cifie qu’on ne doit pas utiliser cette technologie dans des produits concurrents de Facebook ou assimilĂ©s « The license granted hereunder will terminate, automatically and without notice, if you … take a direct financial interest in, any Patent Assertion: (i) against Facebook or any of its subsidiaries or corporate affiliates ». (https://github.com/facebook/react-native/).

3. Xamarin Forms

DĂ©sormais rachetĂ© par Microsoft, Xamarin grand acteur de l’univers .NET sur plateforme Mono (VM .Net open source) propose la solution Xamarin Forms pour crĂ©er des applications Android/iOS/UWP. Pleinement intĂ©grĂ© Ă  Visual Studio (Windows ou Mac), Xamarin Forms offre une solution logicielle complète pour crĂ©er des applications. Son modèle Ă©conomique reste le principal frein Ă  son utilisation (voir le pricing Visual Studio).

Dans le prochain article…

La suite de cette article (Ă  paraitre très prochainement) proposera un retour d’expĂ©rience via une mise en oeuvre concrète des trois frameworks dĂ©diĂ©s au dĂ©veloppement multi-plateformes. Le cas prĂ©sentĂ© sera appliquĂ© Ă  une problĂ©matique qu’on peut rencontrer lorsqu’on souhaite proposer une application mobile.

 

Article rédigé par Marc-Alexandre Blanchard.

L’industrie du numérique se développant à grande vitesse ces dernières années, de nouveaux métiers émergent dans ce domaine. Nous allons parler dans cet article du métier de UX / UI Designer, autrement nommé « Designer Ergonome ». Entre UX et UI design, il n’est pas toujours simple de faire la différence, d’autant plus que ces deux concepts sont proches et complémentaires. UX Design signifie User Experience Design, ce qui veut dire en français : Design de l’expérience utilisateur. L’UI Design signifie User Interface Design, en français « Design d’interface utilisateur ».

Comme une image vaut mille mots, reprenons l’exemple de l’iceberg afin d’expliquer au mieux la différence entre UI et UX design.

 

UI DESIGN

L’UI est la partie visible d’un produit : c’est ce que l’on voit, entend, touche lorsque l’on utilise une application mobile par exemple.

Cela permet d’améliorer l’interaction de l’utilisateur avec le produit. C’est une réflexion qui est menée pour toutes les phases de l’utilisation produit, la première étant d’attirer le client.

Le but du design d’interface est de faire en sorte que le client soit à l’aise en interaction, que le système soit fluide, et ergonomique.

Le travail du Designer Ergonome consiste donc à mettre en place un parcours client optimisé et intuitif, un vocabulaire simple et compréhensif, un design soigné et à l’image de l’entreprise, ainsi que proposer des outils qui facilitent les démarches de l’utilisateur. Il faut également déterminer quels outils mettre en place pour favoriser l’engagement.

 

 

 

Le design d’interface intervient donc dans l’aspect visuel d’un site ou d’une application afin de capter l’attention de l’utilisateur et de faire en sorte qu’il soit séduit et reste sur la page s’il en a le besoin. Cependant, l’aspect esthétique ne doit pas prendre le dessus sur le contenu afin d’éviter d’en oublier le but premier de l’interface.

UX DESIGN

L’UX permet aux utilisateurs d’accomplir un ensemble de tâches avec simplicitĂ©.

Le designer ergonome se base sur le ressenti d’un utilisateur lorsqu’il est confronté à un site web ou une interface digitale (une application par exemple). En se mettant à la place de l’utilisateur, son but et d’améliorer son parcours et le rendre fluide afin de faciliter sa recherche d’informations.

L’UX design se concentre sur l’aspect émotionnel de l’expérience de l’utilisateur en prenant en compte son sentiment général vis-à-vis du produit, afin de rendre le plus accessible possible les diverses fonctionnalités de ce dernier.

L’UX Designer analyse ce qui attire les utilisateurs, ce qui peut les aider à comprendre le produit ou à l’utiliser.

Dans le domaine du design d’expérience, le design seul ne fonctionne pas sans l’expérience utilisateur.

 

 

Plusieurs principes de bases sont à respecter afin de fournir un travail d’UX design complet :

Accessibilité : il est important de concevoir des sites supportés par les différents terminaux et technologies, systèmes et navigateurs.

Cohérence : le design doit être cohérent dans le choix des graphismes et la réflexion en ergonomie.

Facilité de prise en main : le site ou l’application doit être suffisamment intuitif pour qu’on s’y repère aisément.

Crédibilité : les utilisateurs doivent se sentir rassurés et convaincus.

Efficacité : l’utilisateur doit facilement trouver les réponses à ses questions.

 

POUR CONCLURE

Ce qu’il est important de retenir dans la conception de design d’application ou design web, c’est qu’il faut permettre à l’utilisateur de trouver ce qu’il est venu chercher rapidement et sans difficulté.

Pour ce faire, l’UX Designer doit se concentrer sur l’aspect émotionnel et psychologique de l’expérience utilisateur : il étudie le ressenti tout au long de l’utilisation du produit afin de créer une interface optimale et recherchée.

L’UI Designer quant Ă  lui, se rĂ©fère aux Ă©lĂ©ments pratiques de la crĂ©ation d’interfaces. C’est en cela qu’il est complĂ©mentaire Ă  l’UX design, il dĂ©tient une certaine expertise des outils interactifs.

Chez Smart/Origin, le métier de designer ergonome est utilisé dans la conception des applications géodécisionnelles que nous créons et adaptons selon la demande client.


Une des problĂ©matiques rĂ©currentes lorsque l’on rend disponible, pour le grand public, des points d’intĂ©rĂŞts (POI) dans son SIG est de leur associer une reprĂ©sentation (symbologie) pertinente. Cette reprĂ©sentation doit ĂŞtre agrĂ©able Ă  l’Ĺ“il sur tous les supports (Outils SIG/ Applications mĂ©tiers/Sites web) afin de proposer une expĂ©rience d’utilisation optimale.

Nous nous sommes confrontĂ©s Ă  cette problĂ©matique lors de la publication d’un service ArcGIS Online regroupant divers points d’intĂ©rĂŞts issus de la plateforme Open Street Map :

https://services.arcgis.com/KuaABtfkgFHV6L3h/arcgis/rest/services/Cannes__OSM/FeatureServer/

 

Par exemple, pour des POI citadins il est important de diffĂ©rencier chaque thĂ©matique (lieux touristique, restaurant, mairie…) par une reprĂ©sentation (icĂ´ne) qui lui est propre. Afin qu’en un coup d’Ĺ“il l’utilisateur identifie la thĂ©matique du point. Il est Ă©galement nĂ©cessaire d’Ă©viter certains petits problèmes techniques rĂ©currents tels que les icĂ´nes floues, Ă©tirĂ©es ou mal centrĂ©es. Pour cela il y a quelques astuces Ă  connaĂ®tre.

 

Astuce n°1 : La Dimension

Tout d’abord il est important de centrer les icĂ´nes dans un carrĂ©. En effet lors de la crĂ©ation d’un service, ArcMap redimensionne les images non carrĂ©es pour les faire rentrer dans un carrĂ©.

Plusieurs utilisateurs ont Ă©galement remarquĂ© que proposer des icĂ´nes avec une taille multiple de 4 permet d’Ă©viter les problèmes lors de l’intĂ©gration Ă  ArcMap.

 

Astuce n°2 : La Résolution

La résolution des images doit être de 96dpi.

Pour ceux qui crĂ©ent des icĂ´nes avec Adobe Illustrator il y a une astuce supplĂ©mentaire Ă  connaĂ®tre. Adobe Illustrator semble avoir Ă©tĂ© conçu autour de la rĂ©solution 72dpi, ainsi lorsque Adobe Illustrator exporte en 96dpi des artĂ©facts visuels peuvent apparaĂ®tre et ainsi rendre l’image floue. Pour pallier Ă  ce problème il est nĂ©cessaire d’exporter les icĂ´nes avec une rĂ©solution de 72dpi depuis Adobe Illustrator et ensuite d’utiliser un autre logiciel, comme Adobe Photoshop, pour rĂ©aliser la conversion 72dpi vers 96dpi.

 

 Astuce n°3 : L’IntĂ©gration Ă  la plateforme ArcGIS

Du cĂ´tĂ© de l’intĂ©gration Ă  la plateforme ArcGIS, il faut spĂ©cifier depuis ArcMap une symbologie de type : « Picture Marker Symbol ».

Quel taille donner au symbol dans ArcMap ?

Cette question vient rapidement Ă  l’esprit car ArcMap demande une taille en ‘points’ or très souvent lorsque l’on crĂ©e des icĂ´nes on les penses en pixels.

esri fournit la formule suivante pour effectuer la conversion points vers pixels : (taille en pixel de l’icĂ´ne)x72/96 qui peut ĂŞtre simplifiĂ©e en (taille en pixel de l’icĂ´ne)x0,75. Ainsi un icĂ´ne de 32x32px aura une taille de 24pt. 

Exemple de configuration (ArcMap) pour une image de 32x32px

 

Note pour les dĂ©veloppeurs utilisant l’api ArcGIS for Javascript :

« Une icône publiée avec une résolution de 10pt sera affiché avec une taille de 13px. » (https://developers.arcgis.com/javascript/3/jsapi/featurelayer.html)

 

 Exemple d’intĂ©gration

Nous avons intĂ©grĂ© le service prĂ©sentĂ© en dĂ©but d’article dans notre produit Cities disponible Ă  l’adresse suivante http://cities.test.smart-origin.com/index.html.

Dans cette version, centrĂ©e sur la ville de Cannes, vous pourrez visualiser divers points d’intĂ©rĂŞts issus d’Open Street Map enrichis de donnĂ©es issues des rĂ©seaux sociaux. 

 

 

Pour la réalisation de cet article nous avons également rendu Open Source les icônes du service, elles sont directement utilisables pour vos divers projets : https://github.com/smartorigin/Open-Street-Map-symbology-for-Arcgis-plateform

Il manque une icĂ´ne pour rĂ©pondre Ă  tous vos cas d’usage ? N’hĂ©sitez pas Ă  prendre contact avec nous Ă  l’adresse suivante : contact@smart-origin.com.

 

Marc-Alexandre Blanchard

 

Ce projet disponible sur notre GitHub, s’appuie sur OSM Buildings, projet réalisé par Jan Marsch pour traiter sous forme de volumes les données issues de la base bâtiments d’OpenStreetMap.

En adaptant ces travaux Ă  un usage dans la plateforme ArcGIS, Smart/Origin propose ainsi une couche en 2,5D.

Cela vient enrichir l’expĂ©rience utilisateur en valorisant la reprĂ©sentation des bâtiments reprĂ©sentĂ©s sur le fond de plan vectoriel.