Passer au contenu de cette vue

ninja     Livret d'architecte de l'information

ou Comment « réaliser son livret » avec Booktype

Mon livret sur Booktype

Attention ! Respectez bien les consignes pour créer le titre de votre livret. 

Les livrets dont le titre n'est pas conforme seront définitivement supprimés le vendredi 22 mai. La liste des livrets concernés est visible sur la FAQ du livret sur laquelle nous vous demandons de vous signaler si vous êtes concerné.

Sommaire Livret

Corrigé des livrets

Télécharger au format ePub le corrigé des activités livret des six séquences, proposé par les professeurs.

Séquence 6

Pour cette séquence, nous vous proposons d’appliquer certaines techniques de conception UX vues dans le cours.

Vous pouvez effectuer cette activité dans la continuité de la séquence 5 : repenser le micro site iPhoto de Jean Coutu. Ou alternativement, vous pouvez vous intéresser aux situations dans lesquelles des personnes veulent passer leurs photos d’un format numérique à un format physique : tirage classique, livre, poster, calendrier, etc.

L’objectif est d’abord d’identifier certains problèmes rencontrés par les utilisateurs dans leur activité et d’explorer ensuite des pistes de solutions.

    1. Conduire deux entretiens utilisateurs. Idéalement les personnes interviewées devraient correspondre à deux des personas définis en séquence 5. Aller à l’essentiel en se concentrant sur la dernière fois que la personne inteviewée a essayé de tirer des photos numériques. Il est préférable de chercher des points de frictions, des problèmes dans l’expérience d’utilisation (ne pas passer plus de 15 minutes par entretien).
      Les entretiens sont synthétisés dans le livret par :
      • Les besoins : identifier un besoin utilisateur par entretien (le décrire en 3 lignes, au maximum 1 paragraphe par entretien).
      • Les pratiques : identifier une pratique inattendue par entretien (la décrire en 3 lignes, au maximum 1 paragraphe par entretien).
      Passer 10 minutes maximum par entretien sur la rédaction de la synthèse.
    2. En se basant sur les résultats d’entretiens, esquisser rapidement une façon radicalement différente de répondre aux besoins des utilisateurs. Ce croquis peut prendre la forme soit d’un squelette d’écran, soit d’une esquisse plus globale, mettant en scène le contexte d’utilisation (écran, lieu et utilisateurs). L’objectif de l’exercice est d’explorer une alternative possible au moyen d’une ébauche grossière et non de spécifier une interface.
    • Pour l’esquisse, utiliser de préférence du papier et un crayon, les esquisses numériques prennent plus de temps. Le rendu pourra être scanné et intégré dans le livret. La précision de l’illustration et qualité “artistique” ne sont pas des critères d’évaluation.
    • Expliquer l’esquisse en une phrase.

La synthèse des entretiens, l’esquisse et ses explications seront insérées dans le livret dans le chapitre Modéliser l’expérience utilisateur (UX - User Experience). La rapidité d’exécution caractérise l’agilité d’une démarche de prototypage. N’y passez donc pas trop de temps.

Séquence 5

Compétence : Maîtriser la gestion dynamique des projets

Activité : Mise en évidence de phases abstraites de conception à partir d’un site Web existant

  1. En utilisant un logiciel bureautique de type traitement de texte ou présentation, ou encore un dessin sur une feuille de papier que vous numériserez, faire les premières étapes, les plus abstraites, du prototypage du micro site iPhoto de Jean Coutu :
    • prototypage de la stratégie :
      • proposer des objectifs visés par le site ainsi que des indicateurs permettant de les vérifier.
      • identifier 3 types d’utilisateurs cibles et construire les fiches de personas liés.
    • prototypage du cadrage : lister les thèmes abordés, le type de ressources, le type de fonction.
  2. Insérer l’ensemble dans le chapitre Maîtriser la gestion dynamique des projets de votre livret.
  3. Rédiger un court texte critique d’une page maximum sur la stratégie et le cadrage tels que votre analyse les dégage.

Séquence 4

Pour cette séquence, le travail sera à insérer dans le chapitre : Savoir faire dialoguer et coopérer des métiers connexes de votre livret.

Vous faites partie d’un petit groupe de crudivoristes (partisans de la “pratique alimentaire qui consiste à se nourrir exclusivement d'aliments crus [...] et souvent issus de l'agriculture biologique” - Wikipédia) d’une quarantaine de personnes réparties dans toute la francophonie. Pour faciliter le partage de vos recettes, vous voulez développer un site Web. Vous pourrez vous y créer un profil ainsi qu'entrer et consulter des recettes. Votre profil vous permettra de vous présenter au reste du groupe (nom, région, courriel entre autres) ainsi que de décrire votre régime alimentaire (préférences, intolérances alimentaires, date de conversion au crudivorisme par exemple). Ce profil vous permettra aussi de marquer vos recettes favorites ainsi que de les commenter. Pour chaque recette, vous voulez bien sûr lui donner un titre, en présenter les ingrédients, indiquer les directives et le temps pris pour la réaliser, le niveau de difficulté. Ce site Web intégrera une base de données.

  1. Commencez par expliquer pourquoi ce contexte est propice à l’intégration d’une base de données.
  2. En vous basant sur le contexte décrit, évaluez s’il s’agit d’une base de données relationnelle ou plutôt une base de données NoSQL. Résumez, en un paragraphe, ce qui vous fait pencher vers l’une plus que l’autre.
  3. En vous aidant le cas échéant des références données ci-dessous, réfléchissez à la structure des données sous-jacente en précisant succinctement :
    1. les principales collections qu’on y retrouve,
    2. les tables nécessaires pour représenter ces collections,
    3. des exemples d’attributs que l’on pourrait retrouver pour ces tables et, en particulier, leur clé primaire, et
    4. les relations possibles entre ces tables en précisant leur cardinalité et l’impact qu’elles auront sur la structure des tables de données.

Votre rendu pour l’ensemble de cette activité ne devrait pas dépasser une page. 

Références proposées

A priori, pour réaliser le travail demandé par le livret, le module S4.3.1 de la séquence suffit, en s’appuyant en outre sur l’exemple du module S4.3.2 et sur les notions générales des modules S4.1 et S4.2. Le mieux est de relire tranquillement les supports dans la version PDF pour bien comprendre les notions.

Cependant, au cas où vous auriez besoin de ressources supplémentaires, nous vous proposons des parties spécifiques des sites suivants :

Notons qu’il est difficile de trouver de bons tutoriels sur les bases de données qui ne se centrent pas sur un système donné (Access, MySQL, etc.).

Séquence 3

Pour cette séquence, le travail sera à insérer dans le chapitre : Savoir structurer l’information, les données et les ressources documentaires de votre livret.

1. Construire l’arborescence du micro site iPhoto de Jean Coutu sous forme d’un schéma. Indiquer pour chaque page son type (cf. module S3.4 Périmètre d’intervention de l’architecte de l’information Web) :

  • Accueil
  • Navigation
  • Terminal

2. Insérer l’ensemble dans le chapitre Savoir structurer l’information, les données et les ressources documentaires de votre livret.

3. Rédiger un court texte critique d’une page maximum présentant les avantages et inconvénients de cette organisation de l’information en ligne.

Séquence 2

Votre travail sera à insérer dans votre livret dans le chapitre : Réaliser des prototypes (avec des technologies web).

L’objectif de cette activité est de modifier le code HTML d'une page (voir la copie d'écran ci-dessous) et le code CSS associé.

Pour cela, nous utiliserons un site spécialisé, qui vous permet d’avoir simultanément sous les yeux le code HTML, le code CSS et le rendu, et de mettre à jour automatiquement le rendu quand les codes HTML et CSS sont modifés.

Voici les différentes étapes à suivre :

  1. Se créer un compte sur codepen.io.
        1. Se rendre sur codepen.io.
        2. Cliquer sur « sign up », en haut à droite.
        3. Sur la page suivante, choisir la formule gratuite (Free Plan tout en bas de la page, sous les formules payantes).
        4. Remplir le formulaire.
  2. Créer une copie personnelle du document à modifier.
        1. Se rendre à l’URL http://codepen.io/jmague/pen/RPPrbz (vous devez être connecté auparavant).
        2. Cliquer sur Fork (en haut). Vous aurez alors à l’écran une copie personnelle de la page web. L’écran est divisé en 4 zones principales, les codes HTML, CSS et JavaScript en haut, le rendu en bas. Cette activité n’utilise pas JavaScript, vous pouvez donc fermer la zone correspondante.
  3. A vous de jouer !

A vous de faire les modifications dans les zones HTML et CSS pour que le rendu corresponde au fichier image ci-après.

Il s'agit ici de retravailler le sous-titre "Activité pour le livret de la séquence 2", le titre "la fourmi et le perdreau jules renard" et de justifier le texte.

Voici trois ressources qui peuvent vous aider :

4.   Récupérez votre travail.

        1. Cliquez sur Editor, en haut à droite.
        2. Dans le menu qui s'affiche, choisir Debug. Le résultat de votre travail, le rendu HTML, s'affiche dans un nouvel onglet.
        3. Nous vous demandons une capture d’écran de ce rendu HTML (vous pouvez cliquer sur les liens suivants pour des indications sur les captures d’écran sous Windows ou sous Mac). NB : Vous aurez peut-être à faire un zoom arrière avec votre navigateur pour que l’image toute entière soit capturable.
        4. Nous vous demandons également une copie d’écran du code source HTML, bien qu'il ne soit pas conforme à la norme du fait du fonctionnement de codepen. Ce que nous vous demandons est un code complet. Ne faites pas cette capture à partir de la fenêtre de codepen montrant simultanément le HTML, le CSS et le rendu. Placez-vous plutot dans l’onglet que vous avez ouvert à l’étape 4.2 et dont vous avez fait une copie d’écran à l’étape 4.3 et affichez le code source (clic avec le bouton droit sur la page, puis afficher le code source). NB : Vous aurez peut-être à faire un zoom arrière avec votre navigateur pour que l’image toute entière soit capturable.
        5. Placer les deux copies d’écran dans le livret à la séquence “Réaliser des prototypes (avec des technologies web)” et indiquez brièvement la manière dont vous comprenez l’interaction entre HTML et CSS dans cet exemple, ainsi que les difficultés que vous avez pu rencontrer.

Séquence 1

Pour cette séquence, nous vous proposons de réfléchir à la définition d’un architecte de l’information. Votre travail sera à insérer dans le chapitre : Poursuivre de façon autonome et critique son développement professionnel de votre livret.

Pointez les accords et les différences entre les trois définitions d’un architecte de l’information présentées sur trois sites français et rappelées ci-dessous. Expliquez pourquoi elles diffèrent. Proposez votre propre définition, issue des apports de la séquence 1 et, le cas échéant, de votre propre expérience.

Vous reproduirez les définitions et ajouterez à la suite votre analyse. La longueur de votre apport personnel ne doit pas dépasser une page.

   Définition de l’association des professionnels de l’information

Intervenant lors des différentes phases de conduite d'un projet de site web, d'intranet ou de logiciel de grande envergure, il a pour rôle principal de proposer, et spécifier une organisation efficiente de l'information au sein du dispositif cible. Il intervient également pour vérifier l'adéquation du dispositif mis en oeuvre aux besoins spécifiés et son bon fonctionnement. Véritable chef d'orchestre il est en relation avec différent métiers, définit la typologie et la classification des contenus, optimise la navigation et la recherche d'information en fonction des objectifs et du public visé.

Véritable chef d'orchestre il est en relation avec différent métiers, définit la typologie et la classification des contenus, optimise la navigation et la recherche d'information en fonction des objectifs et du public visé.

   Définition des Designers interactifs

Responsable de la structure et de la terminologie du contenu d’un site web ou d’une application, l’architecte de l’information oriente l’expérience utilisateur. Son activité est fondée sur la dimension interactive du projet pour permettre aux utilisateurs de combler leur besoin en information et de faciliter l’accomplissement d’activités que le service propose. De par la transversalité que son intervention implique, l’architecte de l’information collabore avec l’ensemble des intervenants : l’équipe projet du client et l’équipe design interne. L’architecte de l’information prend ainsi en compte les aspects marketing, l’identité de marque, la communication, la sémantique, le design visuel, les profils d’utilisateurs, l’ergonomie web et la technologie. Il traduit le comportement des utilisateurs en solutions de conception et formalise de manière conceptuelle et schématique des livrables tels que l’arborescence, le storyboard ou encore le scénario d’usage.

   Définition du Portail des métiers de l'internet

L’architecte d’information intervient en amont d’un projet de conception de site web, d’intranet ou de logiciel de grande envergure. Il définit la typologie et la classification des contenus, optimise la navigation et la recherche d’information en fonction des objectifs et du public visé et modélise l’ensemble dans des maquettes fonctionnelles (wireframe). Il garantit « l’utilisabilité » du produit et la « trouvabilité » des informations et enrichit « l’expérience utilisateur ». L’architecte d’information exerce essentiellement en agence Web.

Logo FUN Mooc Powered by Open edX