Smart/Origin
  • Solutions
    • Produits
      • Dashboard
      • Cities
      • Citizens
      • Field
    • Usages
      • Informer votre public
      • Observer vos territoires
      • Faciliter les remontées citoyennes
      • Piloter votre organisation
      • Faire participer les citoyens à la vie publique
      • Réinventer les façons de se balader
      • Gérer durablement votre patrimoine arboré
      • Superviser les cours d’eau
  • Expertises
    • Coeur de métier
      • Réalisation d’applications sur-mesure
      • Prestations de services autour des solutions Esri
    • Spécialités
      • Cartographie et data-visualisation
      • Développement web et mobile
      • Expérience utilisateur et design
  • Réalisations
  • Blog
  • Société
    • L’entreprise
    • Recrutement
    • Nous contacter
  • Démo
  • Menu Menu

Archive d’étiquettes pour : UI

Tech

Choisir les bonnes couleurs pour votre design d’interface

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. 

https://smart-origin.com/wp-content/uploads/2018/03/vignette-article-choix-couleurs-design-interface.jpeg 398 575 Denis Martin https://smart-origin.com/wp-content/uploads/2019/01/logo-smart-origin-300x138.png Denis Martin2018-03-08 14:58:462019-03-11 11:03:02Choisir les bonnes couleurs pour votre design d’interface
Tech

Optimisez le design de votre site internet grâce à l’Eye-tracking

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.

https://smart-origin.com/wp-content/uploads/2018/08/oculometrie1.jpg 2973 4460 Denis Martin https://smart-origin.com/wp-content/uploads/2019/01/logo-smart-origin-300x138.png Denis Martin2018-01-16 14:48:152019-03-11 11:04:35Optimisez le design de votre site internet grâce à l’Eye-tracking
Tech

Le métier de designer ergonome

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.


https://smart-origin.com/wp-content/uploads/2018/07/uxuidesign4.jpg 661 992 Denis Martin https://smart-origin.com/wp-content/uploads/2019/01/logo-smart-origin-300x138.png Denis Martin2017-08-22 09:53:172019-03-11 11:07:46Le métier de designer ergonome
Tech

Créez une symbologie moderne pour représenter vos POI sur ArcGIS

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

 

https://smart-origin.com/wp-content/uploads/2018/07/plateforme-arcgis_1.png 945 992 Denis Martin https://smart-origin.com/wp-content/uploads/2019/01/logo-smart-origin-300x138.png Denis Martin2017-07-18 16:49:172019-03-11 11:08:59Créez une symbologie moderne pour représenter vos POI sur ArcGIS

Catégories

Cas client (40) Data visualisation (20) Non classé (4) Team (11) Tech (10)

Articles récents

  • Des rapports géomarketing automatisés à partir d’une adresse22 avril 2026 - 16 h 29 min
  • Associer Alfresco et ArcGIS Experience Builder grâce à un widget personnalisé10 janvier 2025 - 10 h 58 min
  • Ma Boussole Territoires, l’observatoire des solutions d’aide pour les aidants5 décembre 2024 - 12 h 04 min
  • Une nouvelle expérience pour les cavaliers : GéoCheval, l’application de randonnée équestre de la FFE29 novembre 2024 - 16 h 45 min
  • Modélisation 3D du territoire de Val d’Europe8 avril 2024 - 17 h 06 min
  • Application cartographique d’extraction de données SIG format DWG, DXF ou SHP5 avril 2024 - 17 h 37 min

Mots clés

alimentation (3) ArcGIS (2) attractivité (12) carte (20) communiquer (12) data (1) data science (4) dataset (1) datavisualisation (1) dataviz (2) design (10) DevOps (4) drupal (1) démocratie participative (1) démo vidéo (3) ergonomie (4) ESRI (8) event (5) google maps (1) géo-décisionnel (2) habitat (4) infographie (1) jeu de donnée (1) logement (3) marketing territorial (9) observatoire (3) open data (7) OpenStreetMap (1) outil métier (1) patrimoine (2) plan alimentaire territorial (1) portail open data (3) React Native (2) salon SIG (5) SEO (1) SIG (4) smart cities (11) success stories (43) territoire (18) tourisme (3) UI (4) UI/UX (1) Unity (2) UX (5) Xamarin (2)

logo-smart-origin-data-visualisation-carte-tableau-de-bord

Société de services en ingénierie logicielle, experte en cartographie et en data visualisation, façonnant des applications sur mesure et des expériences utilisateurs pensées pour s’informer, communiquer, travailler et vivre avec les données.

Expertises

  • Réalisations d’applications sur-mesure
  • Prestations de services autour des solutions Esri

Produits

  • Cities
  • Citizens
  • Dashboard
  • Field

Blog

  • Des rapports géomarketing automatisés à partir d’une adresse22 avril 2026 - 16 h 29 min
  • Associer Alfresco et ArcGIS Experience Builder grâce à un widget personnalisé10 janvier 2025 - 10 h 58 min
  • Ma Boussole Territoires, l’observatoire des solutions d’aide pour les aidants5 décembre 2024 - 12 h 04 min
© Smart/Origin, made with ❤ à Grenoble | contact@smart-origin.com | 04 76 41 16 69
  • Lien vers X
  • Lien vers LinkedIn
  • Politique de confidentialité et mentions légales
Faire défiler vers le haut Faire défiler vers le haut Faire défiler vers le haut

Nous utilisons des cookies pour nos statistiques de fréquentations. En continuant à utiliser le site, vous acceptez l'utilisation des cookies.

AccepterRefuserEn savoir plus

Cookies et paramètres de confidentialité



Comment nous utilisons les cookies

Nous pouvons demander que les cookies soient mis en place sur votre appareil. Nous utilisons des cookies pour nous faire savoir quand vous visitez nos sites Web, comment vous interagissez avec nous, pour enrichir votre expérience utilisateur, et pour personnaliser votre relation avec notre site Web.

Cliquez sur les différentes rubriques de la catégorie pour en savoir plus. Vous pouvez également modifier certaines de vos préférences. Notez que le blocage de certains types de cookies peut avoir une incidence sur votre expérience sur nos sites Web et les services que nous sommes en mesure d’offrir.

Cookies Web Essentiels

Ces cookies sont strictement nécessaires pour vous délivrer les services disponibles sur notre site et pour utiliser certaines de ses fonctionnalités.

Du fait que ces cookies sont absolument nécessaires au bon rendu du site, les refuser aura un impact sur la façon dont il fonctionne. Vous pouvez toujours bloquer ou effacer les cookies via les options de votre navigateur et forcer leur blocage sur ce site. Mais le message vous demandant de les accepter/refuser reviendra à chaque nouvelle visite sur notre site.

Nous respectons votre choix de refuser les cookies mais pour éviter de vous le demander à chaque page laissez nous en utiliser un pour mémoriser ce choix. Vous êtes libre de revenir sur ce choix quand vous voulez et le modifier pour améliorer votre expérience de navigation. Si vous refusez les cookies nous retirerons tous ceux issus de ce domaine.

Nous vous fournissons une liste de cookies déposés sur votre ordinateur via notre domaine, vous pouvez ainsi voir ce qui y est stocké. Pour des raisons de sécurité nous ne pouvons montrer ou afficher les cookies externes d’autres domaines. Ceux-ci sont accessibles via les options de votre navigateur.

Cookies Google Analytics

Ces cookies collectent des informations de manière compilée pour nous aider à comprendre comment notre site est utilisé et combien son performantes nos actions marketing, ou pour nous aider à personnaliser notre site afin d’améliorer votre expérience de navigation.

Si vous ne souhaitez pas que votre visite soit pistée sur notre site vous pouvez bloquer ce pistage dans votre navigateur ici :

Autres services externes

Nous utilisons également différents services externes comme Google Webfonts, Google Maps, autres hébergeurs de vidéo. Depuis que ces FAI sont susceptibles de collecter des données personnelles comme votre adresse IP nous vous permettons de les bloquer ici. merci de prendre conscience que cela peut hautement réduire certaines fonctionnalités de notre site. Les changement seront appliqués après rechargement de la page.

Réglages des polices Google :

Réglages Google Map :

Réglages reCAPTCHA :

Intégrations de vidéo Vimeo et Youtube :

Autres cookies

Les cookies suivants sont également requis - Vous pouvez choisir d’autoriser leur utilisation :

Politique de Confidentialité

Vous pouvez lire plus de détails à propos des cookies et des paramètres de confidentialité sur notre Page Mentions Légales.

Politique de confidentialité et mentions légales
Accepter les réglagesMasquer uniquement les notifications