​Le design digital
pour Devices & web

 

Contraintes
du design d’interface

• La taille/résolution d’écran et densité,
• Le type de support (ordinateur, tablette, smartphone),
• Le type d’interactivité (et le choix de la techno).

 

Différence entre résolution et taille d’écran :

• La création graphique génère des fichiers avec des largeurs et hauteurs de documents exprimées en pixels.
• Seule la résolution intéresse l’architecte de l’information, l’ergonome et le DA.
• La densité exprimée en pixels/pouce indique la finesse d’affichage.

​

Consultation des format, résolution et densité sur : http://screensiz.es/phone

 

Le choix technique d'une publication numérique :

 

La cible de la publication

B to C : Business to Costomers (entreprise vers consommateurs), cela demande une diffusion vers un large public (Stores ou Web)

B to B Business to Business (entreprise vers entreprise), cela permet une diffusion à une plus petite échelle (Cloud, Mail, Page HTML sur Cloud ou serveur Php)

 

La mise à jour d'une publication

Trés fréquente : Cela demande des ressources humaines engendre des coûts non négligeables (Web, Wordpress, Wix,…)

Mensuel, Trimestriel ou annuel : Cela permet d’accroître le choix technique en terme de solutions : Html, , Pdf interactif, Epub 1 & 3, DPS …

 

Les Délais

Doit être pris en compte lors du choix technique d'une publication digitale les délais :

• Influencés par une qualité non adaptés des médias utilisés pour  les interactivité (photos, vidéo…)
• Influencés par la non réactivé du client quant à valider les différentes étapes de production du projet.
• Influencés par les délais de mise en ligne (surtout sur les stores, le DPS mais aussi pour le web pour la création d'un nom de domaine)

 

Les contraintes de coûts

Attention à l'architecture d'information : Plus le projet est important, plus la phase de hiérarchisation et d’organisation est importante.

Attention à l'interactivité : plus elle sera forte, plus le design d'interface et l'interaction est important plus le produit aura un cout de développement élevé.

 

Les spécificités techniques

• Le support cible va influencer le design d’interface et le design d’interaction d’une production.
• La compatibilité d'un format de fichier (format de fichier universel et format demandant un reader).
• Pour le produit est-il sur une format fixe ou adaptatif avec une orientation simple ou multiple.

 

Des solutions très variées

• Documents PDF ou Word/Excel (fixe et paysage)
• Documents PowerPoint ou Keynote (fixe et paysage)
• Documents PDF interactif (fixe en paysage ou à la française)
• ePub 1 (adaptatif  en paysage ou à la française)
• ePub 3 ou ePub fixe (fixe en paysage ou à la française)
• Sites web (fixe ou adaptatif)
• Solution de digital publishing (fixe en paysage ou à la française)
• Apps (fixe ou adaptatif)

 

Le design d’interface doit répondre à un ensemble de paramètres :

• Structure de l’interface d’un programme ou d’une publication,
• Code couleur,
• Code typographique (choix typo, corps, graisse, etc.),
• Style graphique et icônographique,
• Emplacement des boutons interactifs et de navigation.
• Les contraintes techniques

 

Les étapes de création création d’un projet

• Une arborescence,
• Un zoning,
• Un wireframe,
• Une maquette (réalisation intermédiaire),
• Un prototype.

Architecture de l’information :

• Analyser et trier les informations à traiter et afficher à l’écran (détermine le nombre d'écran).
• Organiser le contenu de la publication. (détermine la relation et la navigation entre les différents écrans).
• Le découpage de l’information diffère selon la taille de l’écran et la nature de la publication (Site, Digital Publishing, App, etc.).
• Une mauvaise hiérarchie de l’information peut se traduire par des incohérences en terme de navigation.
• Livrable : arborescence

 

​

 

​

 

​

Ergonomie

La hiérarchie de l’information : déterminer et définir l’emplacement à l’écran des informations

Déterminer les emplacements des éléments de navigation entre les différent(e)s pages/écrans.

La taille des écrans nous a confirmé la nécessité de structurer l’information (Hiérarchie d’information).

Livrable :

1 -  zoning : C'est l’organisation visuelle des pages de votre site web. Il ressemble à un schéma rudimentaire composé de rectangles indiquant la position des zones principales (menus avec les différents niveaux de navigation (textes de navigation ou traduit en iconographie), logo, moteur de recherche, pied de page…) pour chaque page clés.

​

 

​

 

Les maquettes peuvent contenir les différents états des boutons ou les comportements des menus.

​

Comme pour un livre, l’œil lit naturellement une page de haut en bas et de gauche à droite. Il faut prendre en considération cette hiérarchie visuelle dans votre architecture de page, pour accompagner le lecteur dans ses réflexes de lecture, et mettre les contenus les plus important dans les zones les plus visibles de votre page.

C’est pour cela qu’on retrouve toujours le logo, la navigation, le panier d’un site de commerce toujours en haut de la page, dans la zone chaude. Pour tous vos contenus, pensez à organiser visuellement votre page.

​

Pour le web ou du DPS une page comprend en général des zones visibles et celles cachées pour lesquelles on est obligé de scroller pour y avoir accès. On appelle ligne de flottaison, le repère qui indique la séparation entre ces 2 zones.

La ligne de flottaison correspond au bord bas de votre fenêtre de navigateur, elle variera en fonction de la taille de la résolution d’écran et aussi en fonction de la taille de la fenêtre du lecteur. Ce dernier doit donc faire défiler la page afin d’apercevoir le bas de la page.

 

2 - Wireframe (maquette fonctionnelle sous forme d'un schéma pour la conception d'une interface déterminant les zones et composants qu'elle doit contenir. À partir d'un wireframe peut être réalisée l'interface graphique. La démarche de recourir à des wireframes s'inscrit dans une recherche d'ergonomie.)

Cette maquette va plus loin que le zonning il inclut également la disposition du contenu des pages type ainsi que le découpage de l'information devant se trouver dans une page (c'est un peut comme un gabarit mère pour le print).

Dans un première étape consiste à déterminer une grille sur lequel on viendra placer les éléments constituant la mise en page.

​

 

Dans un second temps on placera les pavés les éléments constituant la mise en page en intégrant le zonning.

​

 

Dans un troisième temps il faut définir la hiérarchie de l'information avec la typographie

Une fois que vous êtes satisfait par la disposition de vos boîtes, Insérer du contenu pour vous rendre compte si l'information est bien structurée.

Utiliser différentes tailles de polices est un bon début pour différencier les différents niveaux d'information.

​

 

Dans un quatrième temps déterminer l'impact de chaque partie de la page à  l'aide de Niveaux de Gris

Utiliser toute la palette des niveaux de gris cela vous aidera à déterminer l'impact visuel des éléments sans avoir à choisir une palette de couleurs.

​

Dans un cinquième temps pour réaliser une maquette «Haute-définition»

Faire une maquette haute définition signifie simplement ajouter autant de détails que possible, sans aller trop dans les détails graphiques. C'est remplir la maquette avec le texte final ou du texte de substitution et essayer de déterminer la taille de police idéale ainsi que de faire un calibrage de l'encombrement du texte (indispensable pour valider l'encombrement des zones définies).

​

Création graphique

Créer une ambiance et donner une apparence graphique. Faire appel à différentes techniques de mise en page pour traduire les recommandations de l’ergonome :

• Taille de caractères et graisses
• Choix d’un jeu de typos (limiter à 3 maxi - 1 de préférence)
• Code couleurs (par zone ou fonctionnalité) : La couleur sert à : structurer une interface, mais aussi et surtout à signifier (Validation, Annulation, inactivité/désactivation)
• Gestion des blancs
• …et surtout, faire appel à une iconôgraphie adaptée :
  La taille des écrans nous a poussé à faire appel à des icônes.
  Chercher à vérifier, si la symbolisation d’un élément graphique d’interface est compréhensible.
  Affordance (la capacité qu’a un objet à suggérer sa propre utilisation) d’un pictogramme plus forte dans son environnement. L’affordance d’un pictogramme, l’affordance d’un bouton...

Livrables : charte graphique/écrans types

​

L'iconographie

• Très important (surtout sur les supports mobiles)

• Multilingue (Icon est multilingue)

• Temporalité (certains pictos correspondent à certaines époques)

• Variable selon les cultures

• Peut remplacer un texte

• Ne doit pas susciter un risque d’incompréhension

• Contexte très important

• Ne pas en abuser dans une interface

• Ne doit pas être trop complexe

• Penser à se servir de l’inconscient collectif pour utiliser des icônes dont le sens est connu de tous.

 

Le prototypage

Testez l’interface auprès de plusieurs personnes de pratique (technologique) et d’âges différents, cela vous permettra de savoir si :

• La navigation est visible ?
• La navigation est intuitive ?
• L’affordance des boutons et icônes est suffisamment forte ?
• Les éléments graphiques cliquables sont à la bonne place ?
• Le choix de la couleur est cohérent ?
• Les fenêtres modales (fenêtre qui prend le contrôle total du clavier et de l'écran) proposent une navigation parallèle ?

 

Nous parlerons ici UX (expérience utilisateur) en lui donnant des repères.

• Graphiques
• Fonctionnels
• Sémantiques
• Spatiaux (localisation dans l’espace de l’écran).

 

Livrables : Un prototype dans son contexte d'utilisation (un fichier pdf, un Epub, un site web)

 

 

Recommandations

• Pour les interfaces tactiles, les boutons et autres icones cliquables doivent êtres suffisamment grands/gros.
• Préparation des médias et recommandations (du DA) différentes selon le développement (statique/dynamique). (ex. : Aspect dynamique du web/mise en page statique du DP)
• Pour le Digital publishing, prévoir un « mode d’emploi ou notice ».
• Tenir compte de la navigation propre au support.
• Prévoir dans les applications les écrans de confirmation d’actions.
• L’utilisateur/lecteur doit savoir se situer dans la publication/app. (« Comment sort-on de cet écran ? »)
• Privilégier le/la dataviz dans certains cas. (désigne les techniques permettant de présenter des données sous forme visuelle afin d'en faciliter la compréhension et/ou l'analyse).
• Une taille de caractère adaptée (trop gros : maladroit graphiquement, trop petit : difficile à lire).

• Testez l’interface auprès d'un public varié