identité Claire Jonca

UX Design

Voir

User Experience Design = Design de l’expérience utilisateur

L'expérience de l'utilisateur ou user experience en anglais est un concept apparu dans les années 2000 pour tenter de qualifier le résultat (bénéfice) et le ressenti de l'utilisateur (expérience) lors d'une manipulation (utilisation provisoire ou récurrente) d'un objet fonctionnel ou d'une interface homme-machine (via une interface utilisateur) de manière heuristique (l'art d'inventer, de faire des découvertes) par un ensemble de facteurs.

1/ L'apparence du site et son ergonomie

Cohérence, placement des éléments...

2/ Rassurer l'internaute et importance de la crédibilité

Utilité et pertinence du contenu et de la mise en forme : absence d’erreurs, identification de l’entreprise, témoignages, créer de l'émotion...

3/ Les performances et l'efficacité

L'internaute doit facilement ou intuitivement trouver les informations recherchées : moteur de recherche interne, catégorisation des contenus...

4/ La facilité d'utilisation

Mise en place d'un process fluide, rapidement chargé.

5/ L'accessibilité

Pour tous et pour tous types de supports (grand écran, destock, portable, tablette et smartphone).
Le contenu est propre, l'information est claire => le site est facile d’utilisation.

6/ Le référencement

L'internaute doit retrouver facilement le site sur l'ensemble des moteurs de recherche. Travail sur le référencement naturel : SEO et le référencement payant avec google Adwords.

Close

Rester authentique

Sa capacité à rassurer l’utilisateur sur sa crédibilité

Communiquer ses valeurs directement du concepteur à l'utilisateur

Authenticité, créativité, équité, empathie, éthique, légitimité, liberté, originalité, partage, culture, philosophie,respect, plaisir, transparence....

UX = User eXperience = Expérience Utilisateur

Utilité, efficacité, ergonomie, facilité, accessibilité, crédibilité, architecture, référencement...

UI = User Interface = Interface Utilisateur

Concept graphique, esthétique, design, typographie, style, message, branding (image de marque d'une entreprise).
Blogdummi : Comprendre le design experience

Close

Le concept

Conception d'une interface pour définir les zones et composants qu'elle doit contenir. La démarche de recourir à des wireframes s'inscrit dans une recherche d'ergonomie.

La première étape : le wireframe

Mettre en forme l'idée générale du positionnement des différents blocs du site à base d'un croquis ou réaliser un zoning ou wireframe = des maquettes appauvries, pour mettre en évidence uniquement le placement des blocs qui composent l’interface.
exemple : version smartphone, bureau.

Les outils de reflexion

Liste des outils gratuits : Responsive Mind.
Préparer ses icônes : les dessiner ou les trouver :FlatIcon, Font Awesome...
typographie : Google Fonts, FontSquirrel ...
Choix des couleurs en fonction des tendances : Générateur Matérial Color.

Close

Le menu

Menu caché, menu coulissant, menu en perspective, menu sticky ou menu "tableau de bord"...

Menu masqué ou menu coulissant

Les menus qui se déroulent uniquement au passage de la souris.
exemple : Hugeinc, World in my lens, Centralcervejas, Adidas

Menu en perspective

Exemple Tympanus

Menu sticky

Les menu sticky sont des menus toujours visibles.
Exemple : Rits, DemiCreative

Menu "tableau de bord" ou big menu

Exemple : Libération
ou Grid Snapshot

Ressources

Webdesignertrends

Close

Le wording

La pertinence du contenu avec une recherche sémantique est primordiale.

Le remplissage au kilomètre avec une succession de mots est à bannir, le texte doit être pensé pour le web.

Il faut identifier clairement tous les éléments fondateurs qui différencient votre entité : son histoire, ses valeurs, ses forces… l’ensemble des spécificités qui vous rendent différent, unique et vous-même.
Puis, faire également une analyse sémiologique comprenant :
- des titres efficaces avec hierarchie H1, H2, H3....H6 contenant des mots clés,
- un texte clair et original donnant une tonalité apportant une valeur ajoutée,
- pas de textes à rallonges, pas de "duplicate content" qui seront décelés et sanctionnés par les moteurs de recherches notament par Google,
- composer et aérer les paragraphes. Eviter de justifier les textes difficiles à lire.

Le référencement naturel : SEO

Penser à optimiser votre contenu pour les moteurs de recherche.
- Autorité du domaine : puissance du domaine acquis au fil du temps.
- Mot clé principal dans la balise title.
- Pertinence du contenu rédactionnel.
- Nommer les images avec des mots clés.
- Importance de la balise "alt" pour les images.
- Bien choisir ses mots.
- Une mise en page bien structurée (html...) avec les balises H1....H6, strong, em...
- Le maillage interne....

Close

L'application "First"

L'application "First" est une application mobile. Celle-ci est développée par le biais d'un programme informatique conçu pour fonctionner sur des appareils mobiles tels que les ordinateurs, les tablettes et les smartphones. Ces applications sont téléchargeables via différentes plateformes :
- App Store (plateforme d'Apple),
- Google Play (plateforme de Google / Android),
- Windows Phone Store (plateforme de Microsoft)

Des systèmes de navigation, des codes spécifiques

Utilisation d'icônes, système de géolocalisation, fonctions natives (produit développé spécifiquement dans divers "langages" (iOS, Android, WindowsPhone) qui se téléchargent et se référencient au sein d'un "Store"), les applications offline (qui utilisent “l'application cache” du navigateur), les push, les notifications...

exemple écrans PagesJaunes
pagesjaunes.fr

Des exemples à suivre

Blogduwebdesign : les splash screen.
Blogduwebdesign: des presentations d'applications mobiles.
Blogduwebdesign: inspiration d'applications mobile.

Close

Les visuels à 360°

Sites web, apps, TV connectée, box internet... existence d'une unité sur tous les écrans

La stratégie de communication est de créer sa stratégie de marque

Il est important de penser cette étape pour que votre identité soit cohérente sur tous les supports de communication web bien sûr mais également sur papier (cartes de visite, plaquettes…) et même oralement (le nom de votre marque se retient-il facilement ?). C’est ce qu’on appelle une stratégie à 360°.

exemple écrans Arte
arte.tv/fr

Close

Le motion design

Sur mobile, le Motion UI renforce l'affordance (= la capacité d’un système ou d'un produit à suggérer sa propre utilisation), la fluidité et l'impact émotionnel.

Interactivité

Les éléments graphiques (formes, textures, couleurs, motifs) animés en css, en gif, en SVG (avec la disparition progressive du flash), les images de synthèse.

Utilisation des effets de transition ou de transformation sur les images, les boutons, les pages...
Effets sur les boutons

Cette interactivité détermine le Design Emotionnel. Celui-ci permet d’exprimer la personnalité d'un produit et donne l'impression aux utilisateurs d'avoir la sensation d’interagir avec un humain.
Ainsi, le consommateur a confiance dans un service car il s’identifie à ce dernier grâce aux valeurs qu’il s’en dégage.
Le Design Emotionnel permet de susciter des réponses émotionnelles positives à l’ensemble des utilisateurs pour offrir une expérience nouvelle, agréable et mémorable.

Des exemples

Capptivate
Blogduwebdesign

Close

L'accessibilité

Nous ne sommes pas tous égaux en ce qui concerne la perception des couleurs et des contrastes.

La deutéranopie, la protanopie et la tritanoplie

La vision des couleurs et daltonisme.
Le daltonisme

Les principes de l'accessibilité web

Il s'agit de permettre l'accès aux services internet et aux contenus en ligne à toutes les personnes :
- les personnes handicapées,
- les seniors,
- les utilisateurs ne disposant pas de confort pour consulter internet sur un ordinateur de bureau dans une pièce tranquille.

Les normes de l'accessibilité web

Il existe 3 normes principales en France :
- La norme de référence => le WCAG 2.0 qui a pour objectif d'être applicable à toutes les technologies actuelles et futures de conception de pages Web, qu'il s'agisse de technologies du W3C comme html, CSS, XML ou d'autres technologies telles que Flash, Silverlight ou PDF.
- Le RGAA (Référentiel Général d'Accessibilité pour les Administrations) qui est un référentiel public.
- Le référentiel Accessiweb qui regroupe des méthodes inspirées des WCAG2.0 et produites par des organismes de labellisation privés.

Pour aller plus loin

Principes et normes de l'accessibilité web

Close

Le footer

Des pieds de page fonctionnels, clairs et épais

Mettre des informations utiles

Coordonnées, menu, plan du site, présence des réseaux sociaux, newsletter, copyright, les mentions légales.... avec visuellement une dominante globale du reste du site et un contenu étoffé pour donner plus de sens.
Cela permet :
- d’obtenir un meilleur référencement,
- d’améliorer l’expérience utilisateur,
- de renforcer l’identité d’une marque.

Pour conserver une bonne expérience utilisateur, il faut veiller à ce que les fonctionnalités principales soient toujours accessibles directement et sans barre de défilement.

Close

Le design

Les tendances pour 2016 et l'incontournable Responsive Design.

La typographie est l’élément graphique incontournable

Les internautes consultent principalement les sites depuis leur mobile.
De ce fait, les typographies doivent être aérées et lisibles sur petit écran afin d'améliorer la lecture.
Les textes et les interlignages sont alors plus gros.

Storytelling et interactivité

Les interfaces des sites sont consacrées au contenu.
On utilisera plus souvent un récit et des éléments interactifs pour faire passer un message.

Disparition progressive des grandes images

Le style devient de plus en plus minimal donc, nous tendons vers un style le plus simple possible.
Les designers arrêteront d’utiliser des images et ne garderont que du texte.
On utilisera plus souvent un récit et des éléments interactifs pour faire passer un message.
Exemple de The New Wave Company

Supprimer les éléments de design inutiles

Pour un design parfait, les designers limitent plusieurs choses sur les sites : background en couleur, un grand nombre de photos, des couches, polices de caractères spécifiques, etc...
Rareview Digital Agency

Largeur fixe

Le standard actuel est le design liquide, adaptatif ou responsive.
Largueur maximale en 1350 pixels

Des photos d'une grande qualité

Utilisation de plus en plus fréquente de photos personnalisées. Il s'agit de rassurer les internautes en donnant l’impression d’une présence et d’une relation personnelle.

Flyout/slideout menu

La tendance est de créer une version responsive avec toutes les fonctionnalités prévues pour la version desktop.
De plus en plus de sites sont calqués visuellement sur les applications mobiles :
24ways ou Rawnet
Ces deux sites utilisent une navigation verticale, qui fonctionne comme un menu Flyout/slideout traditionnel pour les applications mobiles.

Cacher le menu

Utilisation de la vignette «hamburger» avec trois lignes horizontales.
Brian Hoff Design

De très gros caractères

Utilisation de caractères gigantesques comme pour des panneaux publicitaires pour attirer l'attention des clients sur le produit.

La vitesse de chargement des pages

La minimalisation et la suppression des éléments de design inutiles correspond aux exigences de légèreté, de rapidité, de simplification, de lisibilité, d’accessibilité, de mobilité pour les sites web.

.....................

Sketch est spécialisé dans le design de sites et des applications

UI, UX, icônes, design, interface, grilles...
Sketch : le logiciel de design d’interface sur Mac. Il s'impose progressivement auprès de la communauté des UX designers et dans de grandes sociétés telles que Facebook, Google, Twitter, Dropbox…
Lire l'article

Close