Ergonomie du web
Upcoming SlideShare
Loading in...5
×
 

Ergonomie du web

on

  • 1,251 views

 

Statistics

Views

Total Views
1,251
Views on SlideShare
1,220
Embed Views
31

Actions

Likes
3
Downloads
60
Comments
0

3 Embeds 31

http://www.grafree.ch 28
http://grafree.ch 2
http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ergonomie du web Ergonomie du web Presentation Transcript

  • Webdesign Ergonomie et langage du Web Expérience utilisateur Structure du site La mise en page (user interface) Les bonnes pratiques Olivier Dommange
  • Webdesign L’expérience utilisateur Olivier Dommange
  • L’expérience utilisateur Le flux Page papier Page Web Titre de l’article Article Prénom Nom Nullam in purus arcu 1er mai 2011 Titre de l’article Vestibulum hendrerit arcu Pellentesque ligula diam, interdum ut vestibulum et, mattis sit sed risus placerat ut Titre de l’article amet magna. Vestibulum gravida. Vivamus risus arcu, iaculis pharetra nisl ultricies. ut scelerisque faucibus, elementum non enim. In ornare nisi Prénom Nom ac quam dignissim malesuada posuere tellus eleifend. Donec at lectus et purus 1er mai 2011 Nullam in purus arcu Vestibulum facilisis enim. Fusce sem odio, molestie non imperdiet euismod Vestibulum hendrerit Pellentesque ligula diam, interdum ut vestibulum et, mattis sit amet faucibus vel, feugiat quis ante. convallis vel augue. magna. Vestibulum gravida. Vivamus risus arcu, iaculis ut arcu sed risus placerat scelerisque faucibus, elementum non enim. In ornare nisi ac quam Aliquam vitae nibh nibh, dignissim malesuada posuere tellus eleifend. Vestibulum facilisis ut pharetra nisl ultricies. sed luctus felis. enim. Fusce sem odio, molestie non faucibus vel, feugiat quis ante. Donec at lectus et purus imperdiet euismod convallis vel Vestibulum ante ipsum augue. Aliquam vitae primis in faucibus nibh nibh, sed luctus Maecenas volutpat ante felis. Légende de l’image ac risus pellentesque imperdiet. Morbi est Vestibulum ante ipsum Curabitur molestie orci et lectus vestibulum ac condimentum odio aliquam. Phasellus sit amet metus id sapien convallis neque, cursus vitae auctor primis in faucibus lacinia sed quis dui. Nulla vitae arcu diam, vestibulum tempus sed, rhoncus eu sapien. Maecenas volutpat velit. Morbi est neque Curabitur sodales auctor Auctor sed, rhon Nullam in purus arcu, rutrum porttitor massa. sem quis commodo. Curabitur sodales Vestibulum hendrerit arcu sed risus placerat ut pharetra nisl Aenean orci mauris, Nullam in purus arcu, rutrum porttitor massa. ultricies. Donec at lectus et purus imperdiet euismod convallis Vestibulum hendrerit arcu sed risus placerat ut pharetra nisl ultricies. Aenean orci mauris vel augue. Aliquam vitae nibh nibh, sed luctus felis. elementum in volutpat Donec at lectus et purus imperdiet euismod convallis vel augue. Ooncus sit amet ligula Aliquam vitae nibh nibh, sed luctus felis. Vestibulum ante ipsum Vestibulum ante ipsum primis in faucibus orci luctus et ultrices bibendum, rhoncus sit Sed ac primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nest posuere cubilia Curae; Nest neque, cursus vitae auctor sed, neque, cursus vitae auctor sed, rhoncus eu sapien. Curabitur amet ligula. Sed ac erat rhoncus eu sapien. Curabitur sodales auctor sem quis sodales auctor sem quis commodo. commodo. felis, a sodales nunc. Suspendisse aliquam fermentum tristique. Suspendisse aliquam fermentum tristique. Suspendisse a elit justo, at pretium nunc. Proin quam elit, ultrices a Suspendisse a elit justo, at pretium nunc. Proin quam elit, ullamcorper cursus, venenatis euismod erat. Proin molestie dolor placerat tortor consequat pharetra. Quisque nec justo neque. Sed ultrices a ullamcorper cursus, venenatis euismod erat. Proin lobortis, purus vel dignissim tincidunt, urna tortor volutpat ligula, molestie dolor placerat tortor consequat pharetra. Quisque rhoncus fermentum lorem purus eu urna. Nam dignissim ornare nec justo neque. Sed lobortis, purus vel dignissim tincidunt, augue, ut viverra tortor bibendum quis. urna tortor volutpat ligula, rhoncus fermentum lorem purus eu urna. Nam dignissim ornare augue, ut viverra tortor bibendum quis. Màj. :1er mai 2011 Màj. :1er mai 2011 Haut Page, contenu fermé, passé Processus, contenu ouvert, présentEn complément Communiquer avec Internet - Pierre Bellanger http://www.les-ernest.fr/bellanger Olivier Dommange
  • L’expérience utilisateurLieu de passage Site A Site B Olivier Dommange
  • L’expérience utilisateur Atomisation du contenu Contexte L’échange de contenu avec l’utlisateur en fonction du contexte. Contenu UtilisateurEn complément Jonathan Bélisle - Scénariste d’expérience utilisateur http://users-experiential.net/jonathan-belisle-scenariste-dexperience-utilisateur/ Olivier Dommange
  • L’expérience utilisateurCe que l’utilisateur veut Titre de l’article Titre de l’article Prénom Nom 1er mai 2011 Nullam in purus arcu Pellentesque ligula diam, interdum ut vestibulum et, mattis sit amet Vestibulum hendrerit magna. Vestibulum gravida. Vivamus risus arcu, iaculis ut arcu sed risus placerat scelerisque faucibus, elementum non enim. In ornare nisi ac quam dignissim malesuada posuere tellus eleifend. Vestibulum facilisis ut pharetra nisl ultricies. enim. Fusce sem odio, molestie non faucibus vel, feugiat quis ante. Donec at lectus et purus imperdiet euismod convallis vel augue. Aliquam vitae nibh nibh, sed luctus felis. Vestibulum ante ipsum primis in faucibus Maecenas volutpat Morbi est neque Auctor sed, rhon Curabitur sodales Nullam in purus arcu, rutrum porttitor massa. Vestibulum hendrerit arcu sed risus placerat ut pharetra nisl ultricies. Aenean orci mauris Donec at lectus et purus imperdiet euismod convallis vel augue. Ooncus sit amet ligula Aliquam vitae nibh nibh, sed luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nest Sed ac neque, cursus vitae auctor sed, rhoncus eu sapien. Curabitur sodales auctor sem quis commodo. Suspendisse aliquam fermentum tristique. Suspendisse a elit justo, at pretium nunc. Proin quam elit, ultrices a ullamcorper cursus, venenatis euismod erat. Proin molestie dolor placerat tortor consequat pharetra. Quisque nec justo neque. Sed lobortis, purus vel dignissim tincidunt, urna tortor volutpat ligula, rhoncus fermentum lorem purus eu urna. Nam dignissim ornare augue, ut viverra tortor bibendum quis. Màj. :1er mai 2011 Haut Contenu Contexte Utilisateur Olivier Dommange
  • L’expérience utilisateur Valeur d’un site Internet Un site doit créer de la valeur : Informer Utilité Faire avancer la cause Augmenter les profits Utilisabilité Désirabilité Améliorer la satisfaction de leurs clients. Valeur Trouvabilité Accessibilité CrédibilitéEn complément Traduit par Michael Carpentier de larticle "User Experience Design" de Peter Morville http://www.lesbonnesfrequentations.com/2005/11/24/la-conception-de-lexperience-utilisateur-par-peter-morville Olivier Dommange
  • L’expérience utilisateurValeur d’un site Internet Produits et projets utiles en Navigation aisée dun fonction du contexte, du contenu à lautre. Facilité de Utilité contenu et de l’utilisateur. Trouvabilité trouver également un site sur les moteurs de recherche. La simplicité dutilisation est Accessible aux gens souf- vitale. frant de handicaps (plus de Utilisabilité Accessibilité 10% de la population). Bientôt une obligation légale. Mise en valeur de limage, Eléments dun site Web de lidentité, de la marque influent sur le niveau de Désirabilité et dautres éléments qui Crédibilité confiance des utilisateurs. font appel à lémotivité des utilisateurs. Olivier Dommange
  • L’expérience utilisateurCe que l’utilisateur veutLa valeur réside à tous les niveaux du site Olivier Dommange
  • Webdesign Structure du site Olivier Dommange
  • Structure du siteStructure du site vs Recherche de contenu L’utilisateur oriente sa navigation en fonction de ses recherches de contenus Olivier Dommange
  • Structure du siteScénario (schéma de la navigation ) Les actions proposées à l’utilisateur définissent une navigation selon plusieurs scénarios. Inscription d’un futur membre Paiement en ligne Installation d’une application dans un réseau social ... Olivier Dommange
  • Structure du siteOutils de navigation Les outils de navigation adaptés permettent à l’utilisateur de laisser libre court à l’orientation de la consultation du contenu. Olivier Dommange
  • Structure du siteOutils de navigation 1 2 101 Logo Retour à la page d’accueil.2 Menu principale 7 Ruriques thématiques du site. 43 Menu secondaire 12 Rubriques spécifiques à la page 3 5 courante.4 Onglets Volets de contenus. 95 Catégories Classement de rubriques.6 Complément d’information 11 Poursuite de la consultation du 8 contenu.7 6 Langues Choix des langues. 8 88 Lien contenu 9 Bouton d’action 10 Outil de recherche 11 Recherche avancé Lien spécifique sur un terme Bouton donnant une directive Par mot(s)-clé(s) dans Filtre selon plusieurs critères. faisant référence à un contenu (ex. Télécharger). les contenus du site. complémentaire. 12 Fil d’Arianne Repère selon la structure du site. Olivier Dommange
  • Webdesign La mise en page Olivier Dommange
  • La mise en pageLes zones sensibles 1 5 3 4 6 7 Lien vers l’accueil Chariot d’achat Navigation 1 4 7 7 2 6 Liens externes Publicité A propos 5 3 2 5 8 7 Outil de recherche Aide 3 6 2 8 Olivier Dommange
  • La mise en pageStratégie (cas 1) 5 7 3 1 51 Lien vers l’accueil 32 Liens externes3 Outil de recherche 54 Chariot d’achat5 Publicité6 Aide7 Navigation 58 A propos Le Temps (http://www.temps.ch) -10 mai 2011 5 8 7 Olivier Dommange
  • La mise en pageStratégie (cas 2) 1 7 6 7 3 4 5 51 Lien vers l’accueil2 Liens externes3 Outil de recherche4 Chariot d’achat 55 Publicité6 Aide7 Navigation 58 A propos Amazon (http://www.amazon.fr) -10 mai 2011 7 8 Olivier Dommange
  • La mise en pageAnatomie de l’interface 1 2 3 41 Logo Retour à la page d’accueil. Entête 52 Navigation Ruriques thématiques. 6 7 8 93 Outils génériques Outil de recherche, chariot d’achat. Corps4 Identité et titres 10 Nom de la société et baseline.5 Navigation principale Rubriques principales du site.6 Navigation contextuelle Thème interne à la page. 127 Navigation secondaire 11 Sous-menu de la rubrique courante. Pied de page8 Sommaire Liens internes, liens sociaux.9 Contenu contextuel 10 Outils et informations 11 Pied de page 12 Bas de contenu Contenu en lien avec le génériques complémentaires Coordonnées, copyrights, Liens internes pour accèder contenu principal. Outil de recherche, publicité, dates, décharge légale. au haut de la page, liens coordonnées. sociaux. Olivier Dommange
  • La mise en page L’entête 1 7 3 4 6 1 7 31 Lien vers l’accueil 7 5 8 8 72 Liens externes 7 73 Outil de recherche4 Chariot d’achat 1 7 1 7 3 4 85 Publicité 8 3 76 Aide 7 77 Navigation 7 18 A propos 8 1 7 3 8 7 1 5 8 7 Olivier Dommange
  • La mise en pageLa composition du contenu 11 Accueil < Rubrique < Catégorie < Titre de l’article 1 1 Titre(s) 7 Mise à jour Titre de l’article Titre de l’article (<h1>) et surtitre (5 Date de la dernière mise à jour de Titre de l’article 8 10 2 à 12 mots). l’article. Prénom Nom Nullam in purus arcu Nullam in purus arcu 1er mai 2011 3 Vestibulum hendrerit Vestibulum hendrerit arcu sed 2 Pellentesque ligula diam, interdum ut Donec at lectus et purus risus placerat ut pharetra nisl Imperdiet euismod vestibulum et, mattis sit amet magna. Notifications 8 Liens internes Vestibulum gravida. Vivamus risus arcu, Convallis vel augue Aliquam vitae nibh nibh ultricies. Donec at lectus et purus iaculis ut scelerisque faucibus, elementum Auteur et date de publication. Liens internes vers des thèmes non enim. In ornare nisi ac quam dignissim Sed luctus felis. imperdiet euismod convallis vel malesuada posuere tellus eleifend. augue. Aliquam vitae nibh nibh, Vestibulum ante ipsum 3 spécifiques de l’article. Vestibulum facilisis enim. Fusce sem odio, molestie non faucibus vel, feugiat quis ante. Maecenas volutpat ante sed luctus felis. Chapeau 4 Vestibulum ante ipsum primis in Introduction du texte (30 à 50 mots). 9 Accès au haut de la page faucibus 4 Lien interne pour accéder au haut Maecenas volutpat ante ac risus pellentesque imperdiet. Image de la page. Morbi est neque, cursus vitae auctor sed, rhoncus eu sapien. Image aux dimensions définies 5 Curabitur sodales auctor sem selon l’espace du texte. 10 Contenu contextuel quis commodo. Aenean orci Légende de l’image 6 mauris, elementum in volutpat 5 Contenu complémentaire et en Curabitur molestie orci et lectus vestibulum ac condimentum odio aliquam. bibendum, rhoncus sit amet Phasellus sit amet metus id sapien convallis lacinia sed quis dui. Nulla vitae arcu Légende de l’image relation avec l’article. diam, vestibulum tempus velit. ligula. Sed ac erat felis, a sodales nunc. Informations concernant l’image, Nullam in purus arcu, rutrum porttitor massa. Vestibulum hendrerit arcu sed risus placerat ut pharetra nisl ultricies. Donec at notamment l’auteur de l’image et la 11 Fil d’Arianne lectus et purus imperdiet euismod convallis vel augue. Aliquam vitae nibh nibh, sed luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices date. Arborescence permettant de situer posuere cubilia Curae; Nest neque, cursus vitae auctor sed, rhoncus eu sapien. Curabitur sodales auctor sem quis commodo. 6 l’article dans le site depuis la page Suspendisse aliquam fermentum tristique. Suspendisse a elit justo, at pretium nunc. Proin quam elit, ultrices a ullamcorper Texte courant d’accueil. cursus, venenatis euismod erat. Proin molestie dolor placerat tortor consequat pharetra. Quisque nec justo neque. Sed lobortis, purus vel dignissim tincidunt, Textes et sous-titres. (paragraphes : 9 urna tortor volutpat ligula, rhoncus fermentum lorem purus eu urna. Nam 7 dignissim ornare augue, ut viverra tortor bibendum quis. 3 à 5 lignes) Haut Màj. :1er mai 2011 Olivier Dommange
  • La mise en page Résolutiom d’écranEspace visible au chargement de la page Jan. 2009 Jan. 2010 Jan. 2011Plus de 1024 x768 57% 76% 85.1% 1024x768 36% 20% 13.8% 800x600 4% 1% 0.6% Titre Pellentesque ligula diam, interdum ut vestibulum et, mattis sit amet magna. Vestibulum gravida. Vivamus risus arcu, Autres 3% 3% 0.5% iaculis ut scelerisque faucibus, elementum non enim. In ornare nisi ac quam dignissim malesuada posuere tellus eleifend. Vestibulum facilisis enim. Fusce sem odio, molestie non faucibus vel, feugiat quis ante. Source : w3schools.com http://www.w3schools.com/browsers/browsers_display.asp Titre Titre Titre Vestibulum hendrerit arcu Vestibulum hendrerit arcu Vestibulum hendrerit arcu sed risus placerat ut pharetra sed risus placerat ut pharetra sed risus placerat ut pharetra nisl ultricies. Donec at lectus nisl ultricies. Donec at lectus nisl ultricies. Donec at lectus et purus imperdiet euismod et purus imperdiet euismod et purus imperdiet euismod Olivier Dommange
  • La mise en pageSupports Une mise en page par support HTML CSS CSS CSS Olivier Dommange
  • Webdesign Les bonnes pratiques Olivier Dommange
  • Bonnes pratiques (processus de réalisation) Etape 1 : Stratégie de communication Utilité Utilisabilité Désirabilité Cette première étape consiste à définir la stratégie de Valeur communication à mettre en place afin de sensibiliser, Trouvabilité Accessibilité former ou informer le groupe ciblé. Crédibilité Objectif : Définir la cible et le langage à utiliser afin de mettre en valeur et rendre accessible les contenus à diffuser. Outils : Brainstorming, analyse des outils de communication existants, focus group, ...En complément MARKETING Désirable Utile Les corps de métier (marketing, design et Sémantique fonctionnalités) ont une intervention stratégique DESIGN tout au long du projet, il est essentiel quils soient FONCTIONNALITES tous impliqués dès lorigine. Olivier Dommange
  • Bonnes pratiques (processus de réalisation) Etape 2 : Organisation du contenu Utilité Utilisabilité Désirabilité Conceptualiser et organiser le contenu et envisager les Valeur navigations du site. Trouvabilité Accessibilité Crédibilité Objectif : Définir lorganisation du contenu et structurer les sections et pages du site de manière à ce que laccès au contenu suive une logique cohérente. Outils : ArborescenceEn complément Droits daccès Position dans le site Voici une méthode élaborée dune arborescence. All users index.htm A1 Elle permet didentifier les langages de HTML Page daccueil langages de program-mation à mettre en place ainsi que la programmation B Niveau de correpondance position hiérarchique de chaque page dans le site. Olivier Dommange
  • Bonnes pratiques (processus de réalisation) Etape 3 : Analyse conceptuelle Utilité Utilisabilité Désirabilité Etablir la méthode de communication qui saura Valeur répondre aux besoins en définissant les exigences Trouvabilité Accessibilité techniques quelle comporte. Crédibilité Objectif : Définir le moyen de communiquer 01 le message (contenu) de manière à ce quil suscite lintérêt du public ciblé et que celui-ci 02 linterprète le plus correctement. 03 Outils : Synopsis, scénario, analyse technique et spécifications techniques. 04En complément Quelques raisons pour changer de site : Améliorer la cohérence graphique. Optimiser les contraintes de mise à jour du contenu et de l’interface. Evolution de l’identité visuelle. Evolution du dispositif de communication en ligne Olivier Dommange
  • Bonnes pratiques (processus de réalisation) Etape 4 : Ergonomie et sémantique Utilité Utilisabilité Désirabilité Définir la disposition et la composition de l’inteface et de ses Valeur outils de navigation. Trouvabilité Accessibilité Crédibilité Objectif : Organiser la mise en page des interfaces du site. Miser sur une organisation simplifiée du contenu. Adéquationn optimal entre disposition et les technologies tout en respectant les normes Web daccessibilité. Outils : Maquette fonctionnelle, découpage technique. Accessibilité Web et standars des langages Web.En complément Validation des normes Web : Accessibilité (X)HTML [http://validator.w3.org/] WebXACT (Bobby) [http://webxact.watchfire.com/] CSS [http://jigsaw.w3.org/css-validator/] Cynthia [http://www.contentquality.com/Default.asp] Liens [http://validator.w3.org/checklink] Ocawa [http://www.ocawa.com/] Wave [http://www.wave.webaim.org/index.jsp] Olivier Dommange
  • Bonnes pratiques (processus de réalisation) Etape 5 : Design Utilité Utilisabilité Désirabilité Rendre agréable, voire attrayant, lorganisation et la Valeur consultation du site. Trouvabilité Accessibilité Crédibilité Objectif : Valoriser visuellement le contenu, faciliter la navigation grâce à des repères graphiques tout en respectant le domaine dactivité et limage de linstitution représentée. Outils : Charte graphiques,En complément Quelques critères graphiques Homogénéité des interfaces. Pertinence du matériel iconographique par rapport au thème de communication. Pertinence des choix technologiques : jQuery, Ajax, Flash, etc. par rapport aux intentions créatives. Olivier Dommange
  • Bonnes pratiquesRéalisation1 Titre de l’article Titre de l’article 2 Pellentesque ligula diam, interdum ut vestibulum et, mattis sit amet magna. Vestibulum gravida. 3 Vivamus risus arcu, iaculis ut Prénom Nom 1er mai 2011 scelerisque faucibus, elementum Nullam in purus arcu non enim. In ornare nisi ac quam Pellentesque ligula diam, interdum ut vestibulum et, mattis sit amet Vestibulum hendrerit dignissim malesuada posuere magna. Vestibulum gravida. Vivamus risus arcu, iaculis ut tellus eleifend. Vestibulum facilisis arcu sed risus placerat enim. Fusce sem odio, molestie scelerisque faucibus, elementum non enim. In ornare nisi ac quam dignissim malesuada posuere tellus eleifend. Vestibulum facilisis ut pharetra nisl ultricies. non faucibus vel, feugiat quis ante. enim. Fusce sem odio, molestie non faucibus vel, feugiat quis ante. Donec at lectus et purus imperdiet Titre de l’article euismod convallis vel augue. Aliquam vitae Titre de l’article nibh nibh, sed luctus Vestibulum hendrerit arcu sed risus placerat ut pharetra nisl ultricies. felis. Donec at lectus et purus imperdiet euismod convallis vel augue. Aliquam vitae nibh nibh, sed luctus felis. Vestibulum ante ipsum Titre primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nest Vestibulum ante ipsum neque, cursus vitae auctor sed, rhoncus eu sapien. Curabitur Pellentesque ligula diam, interdum ut vestibulum et, mattis primis in faucibus sodales auctor sem quis commodo. Légende de l’image sit amet magna. Vestibulum gravida. Vivamus risus arcu, Maecenas volutpat ante Curabitur molestie orci et lectus vestibulum ac condimentum odio ac risus pellentesque iaculis ut scelerisque faucibus, elementum non enim. In Titre de l’article aliquam. Phasellus sit amet metus id sapien convallis lacinia sed ornare nisi ac quam dignissim malesuada posuere tellus imperdiet. Morbi est quis dui. Nulla vitae arcu diam, vestibulum tempus velit. neque, cursus vitae Titre de l’article eleifend. Vestibulum facilisis enim. Fusce sem odio, molestie Nullam in purus arcu, rutrum porttitor massa. auctor sed, rhoncus eu non faucibus vel, feugiat quis ante. Vestibulum hendrerit arcu sed risus placerat ut pharetra nisl ultricies. Vestibulum hendrerit arcu sed risus placerat ut pharetra nisl ultricies. sapien. Donec at lectus et purus imperdiet euismod convallis vel augue. Donec at lectus et purus imperdiet euismod convallis vel augue. Aliquam vitae nibh nibh, sed luctus felis. Vestibulum ante ipsum Curabitur sodales Aliquam vitae nibh nibh, sed luctus felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nest primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nest auctor sem quis neque, cursus vitae auctor sed, rhoncus eu sapien. Curabitur neque, cursus vitae auctor sed, rhoncus eu sapien. Curabitur sodales auctor sem quis commodo. commodo. Aenean orci sodales auctor sem quis commodo. mauris, elementum in Suspendisse aliquam fermentum tristique. volutpat bibendum, Suspendisse a elit justo, at pretium nunc. Proin quam elit, ultrices a Titre de l’article rhoncus sit amet ligula. ullamcorper cursus, venenatis euismod erat. Proin molestie dolor placerat tortor consequat pharetra. Quisque nec justo neque. Sed Sed ac erat felis, a Titre de l’article lobortis, purus vel dignissim tincidunt, urna tortor volutpat ligula, sodales nunc. Vestibulum hendrerit arcu sed risus placerat ut pharetra nisl ultricies. rhoncus fermentum lorem purus eu urna. Nam dignissim ornare augue, ut viverra tortor bibendum quis. Donec at lectus et purus imperdiet euismod convallis vel augue. Aliquam vitae nibh nibh, sed luctus felis. Vestibulum ante ipsum Titre Titre Titre primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nest Vestibulum hendrerit arcu Vestibulum hendrerit arcu Vestibulum hendrerit arcu neque, cursus vitae auctor sed, rhoncus eu sapien. Curabitur sed risus placerat ut pharetra sed risus placerat ut pharetra sed risus placerat ut pharetra sodales auctor sem quis commodo. nisl ultricies. Donec at lectus nisl ultricies. Donec at lectus nisl ultricies. Donec at lectus Màj. :1er mai 2011 et purus imperdiet euismod et purus imperdiet euismod et purus imperdiet euismod Haut Page de contenu Tête de rubrique Page d’accueil Olivier Dommange
  • Webdesign Conclusion Olivier Dommange
  • ConclusionRecréer une expérience Accessibilité Asychronisation Sémiotique Médias Sémantique Cohésion graphique Navigation Structure du site Recherche de contenus Contenus Expérience utilisateur Mobilité Découpage technique Flux RSS Maquette fonctionnelle Interface utilisateur Supports Mise en page Flux de données Ergonomie Utilisabilité Référencement Olivier Dommange
  • ConclusionRéférences Guide sur la définition des interfaces Web (en) http://www.webstyleguide.com/wsg3/index.html Interfaces Web (en) http://designingwebinterfaces.com/ Interfaces dapplication Web (en) http://www.theresaneil.com/files/standard_screen_patterns.pdf Le guide de la conception graphique du Web (fr) http://www.espace-x.org/index.php?option=com_content&task=view&id=71&Itemid=77 Les bonnes pratiques du Web Mobile (fr) http://www.w3.org/2007/02/mwbp_flip_cards.html.fr Olivier Dommange