exclu mondiale :)
formation UX design !
53h de vidéo
60 études de cas
150 livrables - 160 wireframes
places limitées

conception UX design

CONCEPTION D'INTERFACE

wireframing

Esquisse d'interface utilisateur, projection des contenus et fonctionnalités à l'écran.
wireframing
CONCEPTION D'INTERFACE

conception web

Conception fonctionnelle de vos sites web : e-commerce, corporate, transactionnel, portail...
conception web
CONCEPTION D'INTERFACE

conception mobile

Conception fonctionnelle de vos interfaces mobiles : web mobile, application mobile, logiciel mobile...
conception mobile
CONCEPTION D'INTERFACE

zoning et grille modulaire

Clarification de la structure du site, des modèles de gabarits et des fonctions attribuées à chaque zone.
zoning
CONCEPTION MULTI-ECRAN

conception responsive

Conception responsive de votre dispositif pour une expérience de consultation "multi-écran" unifiée...
conception responsive
CONCEPTION D'INTERFACE

scénarisation, prototypage

Storyboard des écrans : approche scénarisée de l'enchainement des écrans illustrant un parcours.
scenario prototypage
CADRAGE FONCTIONNEL

inventaire fonctionnel

Identification et listing des gabarits dans une optique de maitrise et de rationalisation du fonctionnement.
inventaire fonctionnel
CADRAGE FONCTIONNEL

arborescence fonctionnelle

Visualisation de l'organisation des gabarits et projection de la structure fonctionnelle et de son maillage.
arborescence fonctionnelle
CADRAGE FONCTIONNEL

spécification fonctionnelle

Clarification des interactions et de leurs implications front-back pour tous les écrans de l'interface.
specification fonctionnelle
CONCEPTION MULTI-ECRAN

conception tactile

Conception de vos interfaces tactiles pour une expérience utilisateur optimale en situation d'utilisation.
conception tactile
CONCEPTION MULTI-ECRAN

conception tablette

Conception de vos interfaces dédiées aux tablettes : web, applications et logiciels dédiés aux tablettes.
conception tablette
CONCEPTION MULTI-ECRAN

conception objet connecté

Conception d'objets et interfaces connectées : cockpit, tableau de bord, montre, écran de contrôle...
objet connecté
CONCEPTION MULTI-ECRAN

conception logiciel

Conception et optimisation des interfaces de vos logiciels, tout support...
conception logiciel
CONCEPTION MULTI-ECRAN

conception intranet

Conception et amélioration des interfaces de vos intranets et extranets...
conception intranet
CADRAGE FONCTIONNEL

modélisation des processus

Visualisation détaillée des interactions impliquées dans un processus : inscription, commande, transaction...
conception des processus
CADRAGE FONCTIONNEL

charte ergonomique

Document de synthèse centralisant les règles ergonomiques déployées dans l'interface.
charte ergonomique
CADRAGE FONCTIONNEL

persona de site web

Personnalité générale du site, tonalité éditoriale et registre émotionnel déployés.
persona de site web
CADRAGE FONCTIONNEL

synopsis

Résumé synthétique des intentions du dispositif digital et des parcours des utilisateurs.
synopsis
CONCEPTION MULTI-ECRAN

scenario de film interactif

Ecriture et scénarisation de films digitaux interactifs, conception et séquençage d'animations interactives.
scenario de film interactif
CADRAGE FONCTIONNEL

gamification de dispositif

Mise au point d'une mécanique d'engagement progressive autour de badges, statuts, points...
gamification

0 concession sur la qualité. Aucune. Jamais.

IAFACTORY vous aide à concevoir votre dispositif digital,
de l'écosystème complet jusqu'au dernier bouton de l'interface...

UX design avec IAFACTORY.

Bon là encore, c'est vrai, ça fait pas mal de services.

Mais si vous avez besoin d'aide dans votre projet, promis, on fera simple :)...
Si vous souhaitez vous faire accompagner en phase de conception

Besoin de modèles pour vos projets de conception ?

Découvrez tous les livrables et wireframes en téléchargement au sein du shop,
des conseils vidéos, 150 modèles de livrables et 160 wireframes prêts à l'utilisation pour vos projets !

Vous voulez progresser en conception ?

Découvrez notre programme elearning qui couvre aussi la conception (wireframing...)
plus de 50h de vidéo pour progresser rapidement en IA - UX !

Conception fonctionnelle, par où commencer ?

IAFACTORY vous propose une expertise consolidée en conception de dispositif digital, rare, car éprouvée sur plus de 200 projets digitaux de taille critique (dont des cycles d'améliorations UX continu sur plusieurs années consécutives), tout support, et dans des environnements parfois internationaux. Sur chaque projet, nous avons enrichi notre base de connaissance en matière d'ergonomie, d'architecture de l’information et de design d'interaction, ce qui nous permet de vous proposer des conceptions véritablement centrées sur la performance sans ne jamais négliger, ô grand jamais, l'agrément d'utilisation.

La conception fonctionnelle est une étape cruciale visant à déterminer le fonctionnement de votre dispositif digital. Pour concevoir un dispositif digital sur des bases solides, il y a 4 grandes étapes sur le plan de la méthodologie :

  • 1. cadrage fonctionnel et recherches
  • 2. catégorisation et structuration fonctionnelle
  • 3. conception d'interface et projection multi-écrans
  • 4. conception et documentation complémentaire

1. Cadrage fonctionnel

Avant de foncer tête baissée dans la scénarisation des écrans (wireframing), il convient de préparer la phase de conception au travers du cadrage fonctionnel, lequel va permettre de clarifier le périmètre général du dispositif digital sur le plan du fonctionnement (envergure fonctionnelle et éditoriale).

Idéalement, tout travail de conception est précédé d'une phase d'étude et d'analyse permettant de faire le point sur l'existant, de déterminer l'état du marché, de bien cerner les exigences du commanditaire pour les faire converger avec les attentes des utilisateurs finaux. A cette phase d'étude s'ajoute généralement un temps dédié à la définition de la stratégie éditoriale pour déterminer les grands univers de contenus, clarifier les registres de discours notamment au travers de la persona du site web. Et oui, cela paraît évident, et pourtant, la majorité des demandes formulées concernent exclusivement des besoins en conception ; or, sans une connaissance précise du contexte (phase d'analyse) et un travail minutieux sur l'envergure éditoriale (stratégie éditoriale), comment concevoir autre chose qu'une coquille vide ?

Vous l'avez compris, la phase de conception succède aux travaux d'étude et de stratégie éditoriale, et c'est le cadrage fonctionnel qui va permettre de synthétiser le périmètre fonctionnel du dispositif autour de la liste des fonctionnalités et des gabarits nécessaires à la fabrication rationalisée du produit final : c'est que nous appelons l'inventaire fonctionnel. Une étape hyper importante visant à déterminer les écrans types (gabarits) nécessaires à la production.

Dans les faits, le cadrage fonctionnel permet de préparer le travail de conception, en consacrant notamment un temps aux recherches indispensables à tout travail de création : les travaux de cartographie et de datavizualisation permettent souvent de synthétiser et donner corps aux recherches effectuées.

2. Structuration du fonctionnement

Le travail "technique" de conception doit permettre de visualiser le fonctionnement du dispositif digital : basé sur l'inventaire fonctionnel (listing des fonctions et des gabarits), l'arborescence fonctionnelle permet de visualiser le maillage et les interactions entre les différentes composantes fonctionnelles du dispositif (les relations entre les gabarits). Autrement dit, cela revient à travailler le "design d'interaction". L'arborescence fonctionnelle est une base solide pour approfondir les questionnements autour des parcours utilisateurs et scenarios de visite.

L'inventaire fonctionnel et l'arborescence fonctionnelle sont indispensables pour cadrer le travail de conception et fixer le cap des écrans à produire. C'est aussi un moyen précieux pour le chiffrage précis des coûts engagés dans la production d'un support digital. Pour les dispositifs transactionnels, il est souvent important de modéliser les processus sous forme de diagramme et de façon détaillée, pour que tout le monde puisse comprendre les implications de telle ou telle brique fonctionnelle (le processus de commande, l'inscription, la souscription à une assurance par exemple, etc.).

3. Conception de l'interface

La conception de l'interface utilisateur va permettre de passer d'une approche centrée sur le design de l'interaction à une approche centrée sur le design de l'information. La conception d'interface se considère sur 2 plans : conception macro et conception micro.

La conception macro (zoning) projette les grandes zones fonctionnelles de chaque écran. La conception "macro" s'appuie sur une grille modulaire permettant de déterminer la structure et les lignes de force sur lesquels s'établiront les différents composants fonctionnels et éditoriaux. Ce sont bien les zoning qui permettent de fixer le positionnement des zones fonctionnelles à l'écran. Cette étape est importante car elle permet de garantir de la cohérence et de l'homogénéité dans l'expérience finale de consultation. En bref, les zoning vont permettre d'homogénéiser l'ergonomie du dispositif.

Par ailleurs, et dans le cadre de projet adaptatif (responsive), la logique multi-écrans et les problématiques de redimensionnement (adaptations des contenus et des fonctionnalités en fonction de la taille de l'écran) exigent également l'anticipation de tous les scenarios de consultation (desktop, tv, tablette, mobile, objet connecté) : ici l'approche par zoning (vision macro du fonctionnement) dans une logique de conception responsive est salutaire car elle permettra de bien projeter le positionnement des zones fonctionnelles pour chaque support critique identifié.

La conception micro (wireframing) projette la ventilation détaillée des contenus et des fonctionnalités à l'écran, pour chacun des gabarits identifiés dans l'étape de structuration du fonctionnement, et dans le prolongement des zoning macro esquissés en amont. La phase de wireframing est la partie la plus visible de l'iceberg, et ce sont les travaux les plus demandés en matière de conception.

Toutefois, bien que les wireframes constituent indubitablement le document clé du projet en leur qualité de plan et de tracé régulateur, il ne faut surtout pas négliger les travaux de l'ombre précités (inventaire fonctionnel, arborescence fonctionnelle, zoning et définition des zones de l'interface...) qui permettent de réaliser une conception sur-mesure maitrisée et qualitative. D'ailleurs, lors de la matérialisation des wireframes, il arrive très souvent que les documents rattachés évoluent conjointement à l'élaboration des écrans : la conception détaillée peut nous amener à reconsidérer les grandes zones, à ajouter ou supprimer l'un ou l'autre gabarit identifié en amont dans l'inventaire fonctionnel...

La conception fonctionnelle au travers des wireframes peut concerner spécifiquement un type de device / terminal, on parlera alors de wireframing pour la conception web (souvent orienté desktop, c'est à dire écran d'ordinateur de bureau), la conception mobile, la conception tablette, lesquels constituent le triptyque classique du projet responsive adaptatif, dans lequel chaque "device" (terminal, support digital) entraine son lot de spécificités (tactile, taille d'écrans, interactions, ergonomie).

La conception d'interface pour les objets connectés, tout comme la conception d'interface pour les logiciels, et par voie d'extension la conception d'applications dites mobiles (qui sont in fine des micros logiciels embarqués sur un support dit mobile), constituent autant de projets nécessitant des travaux de conception spécifiques : par exemple, un objet connecté embarqué dans un véhicule implique la prise en compte des normes de manipulation en situation de conduite (exemple : tableau de bord et ordinateur connecté), de même qu'un logiciel représente souvent un travail complexe de conception eu égard aux multitudes de scénarios fonctionnels à adresser. Dans le même ordre d'idées, une borne interactive dans un aérogare nécessitera un travail de conception tactile spécifique par rapport aux types de visiteurs et au matériel utilisé...

Les wireframes vont donc vous permettre de figurer le fonctionnement de l'interface et la ventilation des éléments pour chacun des écrans types. Mais cela peut ne pas s'avérer suffisant, car les wireframes restent des documents techniques, et malgré leur dimension visuelle, ils génèrent parfois des incompréhensions quant aux logiques d'enchaînement des écrans... Les prototypes fonctionnels permettent de dépasser la logique "figée" des wireframes pour scénariser les différents écrans autour d'un parcours type. Par exemple, dans le cadre de la conception d'un processus de commande, les wireframes vont permettre d'établir la ventilation des éléments à l'écran pour "le gabarit panier", "le gabarit mode de livraison"... Le prototype, lui, va permettre de dynamiser ces 2 écrans pour scénariser le parcours afin de mieux exprimer la fluidité de l'interaction. Ce sont d'ailleurs sur ces mêmes prototypes que l'on va s'appuyer pour réaliser des tests utilisateurs (à condition toutefois que ces prototypes ressemblent de très près au produit final)...

4. Conception et documentation complémentaire

Comme les wireframes se concentrent sur le design d'information et la ventilation des contenus à l'écran, il est parfois nécessaire de faire appel à une documentation complémentaire pour détailler plus spécifiquement des éléments particuliers du processus de conception.

Parmi les spécificités rencontrées en matière de conception, il y a l'animation des contenus à l'écran et les séquences interactives : narrations interactives, vidéos interactives, animations. Pour cela, on travaillera spécifiquement autour du scenario interactif qui permettra, à la façon d'un storyboard de cinéma, de scénariser les grandes séquences animées... Dans le même ordre idée, il est également très utile de "résumer" les principes d'interaction des écrans structurants autour d'un synopsis afin de bien exprimer le contrat d'expérience utilisateur que l'on souhaite faire émerger et qui n'apparaît pas toujours lorsque l'on appréhende un "wireframe".

Si le dispositif a vocation à embarquer des choses très particulières, comme une logique de jeu par exemple, on pourra travailler spécifiquement la mécanique de gamification du dispositif en faisant apparaître les tenants et les aboutissants du système de jeu (logique de points, badges...).

Enfin, pour les projets complexes, de grande envergure fonctionnelle, il est souvent indispensable de détailler très précisément le fonctionnement de chacun des écrans : les spécifications fonctionnelles et techniques ont ainsi vocation à clarifier toutes les subtilités de l'interface au-delà des wireframes (règles et modalités d'affichage, ce qui se passe "si", ce qui se passe "quand", interactions techniques avec l'interface d'administration, possibilités d'administration). L'exemple du gabarit "Panier" d'un site ecommerce exprime toute la complexité qui existe au-delà de la figuration des éléments de base à l'écran (récapitulatif des articles, prix, bouton de commande) : il y a les mécaniques de stock, de prix dynamiques, d'alerte, etc. qui nécessitent des éclairages complémentaires sur le fonctionnement (c'est à dire des spécifications fonctionnelles plus détaillées).

La rédaction d'un document de spécifications fonctionnelles peut s'avérer particulièrement longue pour des dispositifs complexes. Pour les projets de grande envergure susceptibles d'évoluer sur le très long terme, une charte ergonomique est souvent rédigée pour déterminer les règles à prendre en compte dans le cadre des mises à jour et des évolutions suivant le cours naturel du cycle de vie du support digital.

Et oui vous l'avez compris, on peut faire beaucoup de choses en matière de conception fonctionnelle pure et dure. Pour vous aider dans vos projets de conception, iafactory est à votre écoute et se fera un plaisir de répondre à vos besoins en matière de conception : n'hésitez pas à nous contacter, la conception, c'est notre spécialité :).

Dernière petite chose, dans "design d'expérience utilisateur" il y a bien la notion d'"expérience" : cette expérience doit être évaluée car il ne s'agit pas de concevoir dans son coin sans jamais solliciter l'avis d'autres personnes (utilisateurs, clients, autres...). C'est bien le rôle de la phase d'évaluation et nous en parlons en détail dans la section consacrée aux interventions permettant d'évaluer l'expérience des utilisateurs.