Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Imaginer et concevoir un site Web

La création d'un site web d'un point de vue éditorial
by

Annabelle KIEMA

on 25 September 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Imaginer et concevoir un site Web

Imaginer et concevoir un site Web
ISEN - Annabelle KIEMA - Décembre 2012
1. Le cahier des charges
Définition / Contenu / Exemple

2. Architecture et Ergonomie
Organisation de l'information (arborescence,
organisation visuelle, notions d'ergonomie)

3. Contenu éditorial
Rédiger pour le web (ligne éditoriale, charte
éditoriale), webdesign (composition
d'une page web, charte graphique)
Au programme
Beaucoup d’entreprises contactent des agences pour « faire notre site »… Mais encore ? Pour faire comme tout le monde ? Pour imiter la concurrence ?

Quelles motivations ?
Pourquoi créer un site Internet ?
1.1 Définition

Document visant à définir de manière exhaustive
les spécifications de base d'un produit ou service à réaliser.
Il en décrit les modalités d'exécution ;
il définit les objectifs à atteindre ;
il vise à bien cadrer la mission, le projet.
en interne, il formalise les besoins, les explique aux différents acteurs pour être sûr que tout le monde est d'accord.
c'est le REFERENTIEL CONTRACTUEL

2.2 Contenu d'un cahier des charges

Plus il est précis, plus il évite les litiges ou les désaccords entre l’entreprise et le prestataire.
A contrario un cahier des charges trop précis, bride la créativité et l’inventivité du prestataire
Il est important de trouver le juste milieu, le bon dosage
1. Le cahier des charges
Fixer la structure du site : les rubriques, les fonctionnalités puis on définit les technologies.

2.1. Organisation de l’information

Architecture = la structure sous-jacente qui organise le contenu d’un site web.

L’objectif : donner un résultat construit et homogène à partir de données multiples, parfois même contradictoires !
2. Architecture et Ergonomie
Les questions préalables à la rédaction
du cahier des charges
Le budget
Les délais
Les livrables
La propriété intellectuelle
Que doit contenir un cahier des charges ?
Présentation de l’entreprise
Audience souhaitée
Analyse concurrentielle
Objectifs du site web
Les rubriques et fonctionnalités du site
Nom de domaine
Référencement
Contenu du site
Déroulé fonctionnel (ex. Varionet)
Pages statiques ou dynamiques ?
Exemple
Quel est le but ou les objectifs du site internet ?
Quelle information présenter ?
A qui s'adresse le site internet ?
Quelle place sur internet ?
Qui va s'occuper du site internet de l'entreprise ?
Comment mesurer les résultats attendus ?
Comment va s'effectuer la mise à jour du site ?
Comment récupérer les informations d'un site existant ?
Les étapes
comprendre ce que l’utilisateur vient chercher

construire des plans : collecter, organiser et tester une présentation hiérarchique d’un ensemble de contenus. On cherche à optimiser la manière dont s’articulent les éléments entre eux.
Soit on le fait « à la main » sur papier, à l’aide de diagrammes, de plans, de scénarios, etc.
Soit on utilise un logiciel dédié.

Exemples de méthodes :

Le tri des cartes ou "card sording" > participation de l'utilisateur

La méthodes des personas
Arborescence d'un site Internet
C'est la représentation de la structure d’un site en arbre qui permet d’organiser son contenu.
Utilisation du champ lexical de la famille
Cela permet de :
organiser les informations et le contenu d’un site ;
conditionner le mode de navigation et d’accès aux informations ;
établir différents niveaux de navigation.

Fil d'Ariane
Les différentes types d'arborescence

De manière générale, on parle de largeur du site pour les rubriques accessibles depuis la page d’accueil et de profondeur du site pour nombre de rubriques en enfant
.
Structure en toile d'araignée
Pas de hiérarchie
Toutes les pages du site sont liées
Structure en réseau
Des liens entre certaines pages seulement
Pas de lien direct systématiquement possible vers la page d’accueil
Hiérarchie peu claire
Structure linéaire
Chaque élément d’informations découle des autres
Structure avec ligne de saut
Toutes les pages accessibles depuis l'accueil
Structure classique = organigramme
structure hiérarchique des branches
sous catégorisation des pages
plusieurs options de navigation possibles
Organisation visuelle
Ma page est-elle bien rangée ?
Comprendre le comportement de lecture en ligne > eyetracking, lecture en F – attention, très contestable !!
- titres
- zones fonctionnelles visibles graphiquement (blancs dissociatifs ou séparateurs)
- titres dans les zones fonctionnelles- zones fonctionnelles organisées

Le "eye-tracking" = ensemble des techniques permettant d'enregistrer les mouvements des yeux. Cette méthode peut être utilisée pour suivre le trafic sur un site et analyser les zones par lesquelles les utilisateurs sont le plus attirés.
Ergonomie d'un site web
1. Un site web doit être utile et utilisable

UTILITE = répondre à un besoin > CAPTER l’internaute, faire en sorte qu’il y ait du monde sur mon site. Les internautes viennent POUR faire quelque chose.

UTILISABILITE = faciliter la satisfaction du besoin > PROLONGER l’expérience de l’internaute, faire en sorte qu’il reste et qu’il obtienne ce qu’il est venu chercher. On doit l’aider à y arriver le plus facilement possible.

2. Un site web doit être accessible
Navigable pour tous

3. La navigation
•Un fil d’ariane qui permet de se situer, peu importe la page où on se trouve
•Un moteur de recherche interne au site
•Des liens contextuels
•Un nuage de tags
•Cross selling, c’est-à-dire conseiller des produits similaires dans le cadre d’un site d’e-commerce
Contenu Editorial
1. La rédaction web

1.1 Ligne éditoriale :

Un fil conducteur, une orientation à suivre pour le traitement de l’information et des contenus. Qu’elle soit explicitement formulée ou non, la ligne éditoriale est l’élément fondateur de toute publication. La charte éditoriale est ce qui va matérialiser la ligne éditoriale, c’est le document référent qui précise les points de la ligne éditoriale

Fixer les thématiques
Cerner le public
Définir le planning et les responsabilités

Ex. : ligne édito de consoGlobe.com
>> 1.2. La charte éditoriale
La charte éditoriale est un document formel qui fait partie ou non du cahier des charges qu’il s’agisse d’une création ou d’une refonte de site. La charte éditoriale a pour but d’optimiser l’ensemble du contenu du site afin de s’assurer de sa cohérence et de son homogénéité.

C’est un document de référence.

La charte prescrit un ensemble de règles et de procédures auxquelles toute personne chargée de créer du contenu sur le site doit se référer et respecter.

Les règles portent sur l'éditorial (parti pris, positionnement, ton, angle...), le rédactionnel (format, style, règles typographiques...), les illustrations (images, photos, schémas - leur pertinence, taille, droits d'auteur...), validation du contenu
Ex. : article consoglobe
2. Techniques de rédaction
Leçon n°1 : livrer tout, tout de suite
>> on soignera titres et intertitres.
>> aller à l’essentiel, pas de bla bla, pas d’intro lourdingue
>> La règle des 5W (+ 2H + G)

Leçon N°2 : informer, donner à l’utilisateur ce qu’il vient chercher
>> L’écriture est informative, efficace.

Leçon N°3 : structurer son texte
>> faciliter la compréhension
>> Utiliser la pyramide inversée
>> mettre en relief

Leçon N°4 : faciliter la lecture en ligne
>> rendre le texte lisible

Leçon N°5 : enrichir l’expérience utilisateur
>> dimension multimédia

Leçon N°6 : l’écriture doit atteindre les objectifs du site
>> Call to action = écriture incitative

Leçon N°7 : mesurer > les contenus sont-ils lu ?
>> Nécessité de consulter régulièrement des rapports statistiques et des données mesurables.
Le Webdesign
1. Composition d'une page Web
Des zones, plus ou moins visibles...
Lecture en Z
2. Les règles de base du webdesign
Facile à lire >> taille de l'écran.
Les éléments sont lisibles au 1er coup d'oeil (points chauds, ligne de flottaison)
Objectif : page équilibrée et efficace

Se tenir au courant des modes
Couleurs, styles, polices...
Objectif : ne pas être à côté de la plaque !

Mettre l’utilisateur au centre
Faciliter la lecture : blancs, éléments mis en relief

Intégrer les réseaux sociaux
Autant de place que le contenu "officiel" du site

Faciliter la navigation
Plusieurs moyens : gros footers, mise en avant du menu, couleurs pour se repérer, etc.

Gérer les contraintes
Liées au terminal, au navigateur, au terminal
3. La charte graphique
Le Webdesign
« Ensemble des règles de présentation relatives aux éléments visuels qui composent un site Web, visant à lui donner une cohérence graphique et à définir son identité visuelle, et ayant pour but de faciliter la navigation et la lisibilité de ses pages. »
3 éléments fondamentaux à prendre en compte
Le logo : Explication de sa symbolique / règles d’utilisation sur un fond blanc, sur un fond uni, en noir et blanc, sur un fond noir, en dégradé de gris / règles d’utilisation sur les divers documents (quelles marges respecter autour du logo?)
Les couleurs en valeur hexadécimale
Les polices
Et aussi :
typographie, couleurs et contrastes, interlignage, image de fond, aération de la page, longueur des lignes, taille des caractères
Exemple : charte graphique de l'Université de Cergy Pontoise
4. Les règles d'or de l'ergonomie
L’ergonomie doit être prise en compte à tous les niveaux :
en amont, dès le cahier des charges : ce qu’ils attendent (info, fonctionnalités) / pour venir faire quoi sur le site
Pendant la conception : j’intègre les attentes de l’utilisateur / je présente la fonction de mon site (Tagline ou autre)
Après : je procède à des tests utilisateurs (je valide ma conception) pour corriger les éventuels dysfonctionnements.
Règle N°1 : Capitaliser sur l’apprentissage interne (cohérence de tout le site) et l’apprentissage externe (conventions Web)

Règle N°2 : Donner l’info > l’internaute n’a pas besoin de chercher ni de réfléchir.

Règle N°3 : Ne pas laisser l'internaute livré à lui-même
Assister, aider et diriger. En cas d’erreur > porte de sortie

Règle N°4 : …et même, lui faciliter la vie ! Pas de perte de temps
Navigation, clés d’entrée, interaction, accessibilité

Règle N°5 : Satisfaction de l'internaute
Utilité, design, expérience utilisateur globale.
Tout simplement pour qu’il revienne encore et encore !
Les éléments à déterminer en priorité
Les éléments indispensables
Full transcript