Iafactory formation-univ-conception-02 outils

1 / 41
support de formation | intervention Julien MUCKENSTURM IAFACTORY | conseil en architecture de l’information | www.iafactory.fr | contact@iafactory.fr |
IAFACTORY
INFORMATION ARCHITECTURE DESIGN
MATERIALIZE YOUR NEXT SUCCESS
support de formation
conception, outils

2 / 41
Notre parcours initiatique… PROGRAMME
• principes généraux,
• outils en conception,
• audit de support digital,
• benchmark concurrentiel.
GESTION DE PROJET CONCEPTION COMMUNICATION
module
module
module

3 / 41
Conception, par où commencer (RAPPEL !)
Rassembler les informations recueillies dans la phase de cadrage.
4 sources INCONTOURNABLES qui vont guider votre conception !
Stratégie
• objectif
• cibles
• positionnement
Besoins
• utilisateurs finaux
• contributeurs
• BU marketing, etc.
Benchmark
• analyse concurrentielle
• bonnes pratiques
• killer app.
Audit existant
• points forts
• points faibles
• axes d’optimisation
ce que le client veut ce qu’attend l’utilisateur ce que font les autres ce qui est à conserver (ou pas)
LA BASE POUR CONCEVOIR

4 / 41
Contenu, fonctionnalité,
module, gabarit, page, processus …
LES OUTILS EN CONCEPTION
• Notions : découpage d’un site,
• Méthode,
• L’arborescence,
• L’inventaire des gabarits,
• Le story-board et les spécifications.
SOMMAIRE

5 / 41
Contenu & médias
Il s’agit des éléments constitutifs de l’INFORMATION ventilée à l’écran sous
forme de textes et des médias (visuel, son, vidéo, flash, 3D).
 Les registres de contenus doivent être identifiés en amont : volumétrie des
textes, nature (historique, article, argumentaire…) VS médias
• Exemple de contenu
• Présentation de l’entreprise (500 caractères, 2 visuels, 1 vidéo)
• etc.
 Généralement, les contenus occupent, avec la navigation, la part la plus
importante de l’espace de l’interface

6 / 41
Contenu & médias

7 / 41
Fonctionnalité
Lorsque les fonctionnalités sont plus élaborées et proposent un
niveau d’interaction plus élevé, on parle alors de module.
!
Elément d’interaction simple permettant d’accomplir une action précise à
l’écran ; elle remplit une fonction (qui peut être proposée dans plusieurs gabarits).
 Elle occupe une zone définie au sein d’un gabarit
 Les fonctionnalités proposent des interactions relativement simples qui se
limitent à une manipulation élémentaire. La fonctionnalité appelle une
FONCTION qui se traduit par une action unique ; elle fonctionne de façon
autonome au sein du gabarit.
• Exemples de fonctionnalités
• Imprimer la page
• Envoyer le lien à un ami
• Télécharger la notice d’utilisation
• Consulter un calendrier des dates pour sélectionner le jour de son voyage
• Trier par date, ajout au panier…
• Note : un gabarit peut proposer plusieurs fonctionnalités, mais l’idée consiste à en optimiser le nombre afin de limiter la charge de travail…

8 / 41
Fonctionnalité

9 / 41
Fonctionnalité

10 / 41
Module = fonctionnalité²
Elément d’interaction élaboré permettant d’accomplir une série d’actions
précises à l’écran ; il remplit une série de fonctions (peut être proposé dans plusieurs gabarits).
 Il occupe une zone définie au sein d’un gabarit
 Les modules proposent des interactions + ou - complexes qui peuvent donner
lieues à de petites séquences et à des manipulations parfois élaborées.
étapes. Le module appelle une série de fonctions qui se traduisent par
plusieurs actions effectuées par l’utilisateur ; le module converge souvent
vers un résultat et peut de fait être organisé en séquence. Le module
fonctionne en son sein de façon autonome.
• Exemples de modules
• Simulateur de crédit
• Configurateur permettant de définir des préférences dans la recherche d’un produit
• Système de présentation permettant d’agréger plusieurs contenus au sein d’une seule et même zone
 Un module peut gérer différents états

11 / 41
Module = fonctionnalité²

12 / 41
Questions fréquentes
3 Comment ça marche ?
• Peut-on motoriser tous les types de volets roulants?
• Est-ce que je dois changer mes fenêtres pour installer
des volets roulants motorisés?
• Pourquoi motoriser mes volets roulants?
• Je voudrais motoriser mes volets battants, avez-vous une
solution?
• Quelle est la différence entre un système de commande
filaire et un système radio pour piloter mes volets
roulants?
• Peut-on trouver aussi des motorisations Somfy pour
volets roulants en grandes surfaces. Quelle différence
avec celles de mon installateur?
• Comment choisir la solution de motorisation dont j'ai
besoin pour mon volet roulant?
• Puis-je programmer moi-même mon installation
domotique?
ajustable en hauteur
Oui, la motorisation et l'automatisation des volets roulants
neufs ou existants sont possibles dans la plupart des cas.
Questions fréquentes
Comment ça marche ?
Le système motorisé Somfy
Le moteur Somfy s'installe dans le tube autour duquel le volet roulant s'enroule. Il est alimenté en électricité et peut être mis en
marche par une télécommande filaire ou murale ou des automatismes (horloge, capteur solaire…)
1
1.2
1.3

Le système motorisé Somfy
Lorem ipsum dolor sia
X
5


6
1.1
7

13 / 41

14 / 41
Gabarit (aussi appelé template)
Il s’agit d’un modèle type de page permettant d’accueillir de façon
dynamique les contenus et fonctionnalités alimentés par une base de donnée.
 Il est composé de zones définies permettant d’agréger les contenus, les
fonctionnalités et modules
• Exemples de gabarits
• Un gabarit article
• Un gabarit fiche produit
• Un gabarit d’univers produit pour une boutique e-commerce
 Un gabarit est qualifié de « gabarit maître » lorsqu’il s’agit d’un gabarit majeur
est structurant du site.
 Les gabarits maîtres donnent lieux à des variantes
 Les gabarits maitres et ou les variantes peuvent donner lieux à des déclinaisons
 Petits sites (- de 10 gabarits) ; très gros sites (+ 50 gabarits)

15 / 41
Gabarit maître

16 / 41
Variante du gabarit maître

17 / 41
Déclinaison du gabarit maître

18 / 41
Page = √gabarit
La page est une occurrence du gabarit. La structure type du gabarit accueille
et absorbe les contenus de l’arborescence.
 Un gabarit
• Exemples de page
• Sur un site e-commerce, l’onglet de niveau 1 est un gabarit type qui fonctionne pour tous les univers sur le même modèle : informatique,
télévision, photo… seront des occurrences, des pages moulinées par le template « Univers niveau 1 ».

19 / 41
Pages…
Autant de pages que de types de catégories
qui utiliseront le gabarit « liste de résultat »
ex.
- 1 gabarit type
- 25 catégories
- donc 25 occurrences du gabarits
= 25 pages

20 / 41
Processus
Le processus est une séquence préétablie prévoyant un à plusieurs
parcours : un enchaînements de gabarits soumis à des règles de gestion.
 Un site peut contenir plusieurs types de processus plus ou moins complexes
autrement dit, d’enchaînements invariables de gabarits pour aboutir à un
résultat.
• Exemple de processus
• Processus d’inscription (enchaînement du gabarit panier > identification > livraison > paiement > confirmation = une séquence)
• Processus de commande
• Processus de souscription à un contrat d’assurance…

21 / 41

22 / 41
3 docs. types pour documenter
et formaliser la conception
• Notions : découpage d’un site,
• Méthode,
SOMMAIRE

23 / 41
Concevoir chacun des gabarits
/ modules et spécifier les règles de fonctionnements et les modalités d’interaction
Identifier les contenus
et répertorier les différentes fonctionnalités envisagées au sein du site
Déterminer et lister les gabarits
ainsi que les modules permettant d’agréger les contenus identifiés
Livrable
Arborescence
Inventaire
Story-board

24 / 41
Organisation et hiérarchisation visuelle
de la largeur et de la profondeur des
contenus, listing des fonctionnalités
• Notions,
• Méthode,
SOMMAIRE

25 / 41
• énumérer
• lister les fonctionnalités
• inventorier lister les contenus
• catégoriser le tout
• structurer
En fonction de la typologie de site
Corporate, e-commerce, portail éditorial…

26 / 41

27 / 41

28 / 41

29 / 41
Modèle à utiliser !!!
Format .PPT prêt à l’emploi…
SPECIMEN

30 / 41
étude de cas
LA REDOUTE
SPECIMEN

31 / 41
Le tableau de bord
du projet !
• Notions,
• Méthode,
SOMMAIRE

32 / 41
étude de cas
Orange
SPECIMEN

33 / 41
Format .PPT ou .XLS selon préférence prêt à l’emploi…
SPECIMEN

34 / 41
Nomenclature
Il est indispensable d’attribuer une côte à chaque gabarit afin de dresser
un référentiel de tous les éléments produits et à produire.
 Je vous propose cette nomenclature très puissante éprouvée sur les sites les
plus complexes
• Découpage du site en X chantiers (catalogue, process commande, compte utilisateur, transverse & éditorial)
• On procèderait comme suit pour le nommage des gabarits du chantier catalogue
CA010000 Pour CAtalogue ou PR pour PRocess
CA010000 010 pour le niveau 1 du catalogue
CA020000 020 pour le niveau 2 du catalogue
CA050000 050 pour le niveau 5 du catalogue (fiche produit 1)
CA051000 051 pour le niveau 5 du catalogue (fiche produit 2)
CA010000 0 c’est un gabarit maître
CA010100 1 c’est la variante numéro 1 de ce gabarit maître
CA010200 2 c’est la variante numéro 2 du gabarit maître
CA010001 01 c’est une déclinaison
• Bien entendu, on associe un libellé à chaque élément nomenclaturé
• Exemple : CA010000 = Accueil du site
SPECIMEN

35 / 41
Design d’information
& design d’interaction
• Notions,
• Méthode,
SOMMAIRE

36 / 41
Format .PPT prêt à l’emploi…
SPECIMEN

37 / 41
étude de cas
Somfy
SPECIMEN

38 / 41
Avez-vous bien tout compris (ou pas…) ?

39 / 41
Alors action !
Nous allons travailler sur la mise en application de la suite de documents
relatifs aux outils de conception au travers d’un exemple simple.
 Mini-site jeu concours tirage au sort accompagnant le lancement d’un produit
• Principe de base : le mini-site présente la gamme produit de façon valorisante ; les produits ne sont pas vendus on-line
mais on propose un module permettant de géo localiser les points de vente. La marque Lorem Ipsum propose également
une approche conseil avec des rituels d’application de ses produits. Ne pas oublier la section corporate.
• Le site comprendra par ailleurs une partie de présentation du jeu concours, des lots à gagner et du processus d’inscription.
Il faudra prévoir en T+1 une galerie des gagnants. A priori on prévoit de découper le site en 4 chantiers : produit / jeu
concours et inscription / gagnant / transverse. Prévoir des fonctionnalités basiques de type « impression fiche produit,
envoi à un ami… ».
• 1) Produits : 4 gammes de produits (shampoing : 4 produits, gel douche :6 produits, bain moussant : 2 produits, savon : 1 produit)
• 2) Jeu concours : présentation du jeu, du règlement juridique, des dotations, incitation à l’inscription, inscription, confirmation
• 3) Gagnant : imaginer un principe sympathique pour présenter les gagnants
• 4) Pages éditoriales et transversales (contact, plan du site, mentions légales, conditions générales de vente…)
• Réaliser l’arborescence
• Faire l’inventaire des gabarits sur la base de l’arborescence
• Scénariser la page d’accueil du site et décrire les interactions
EXERCICE

40 / 41
Merci pour votre attention
LA PROCHAINE FOIS : comment réaliser une analyse de site…

41 / 41
http://blog.iafactory.fr
SPEAKING ABOUT INFORMATION ARCHITECTURE

Iafactory formation-univ-conception-02 outils

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (12)

Similaire à Iafactory formation-univ-conception-02 outils

Similaire à Iafactory formation-univ-conception-02 outils (20)

Plus de iafactory

Plus de iafactory (7)

Iafactory formation-univ-conception-02 outils