background preloader

Rédaction web

Rédaction web
Lire sur le web est beaucoup plus pénible et plus lent que sur le papier. Et la majorité des internautes ne lisent pas les contenus des sites internet. L'utilisateur d'un site ne lit pas mot à mot, son oeil scanne, survole, explore. L'objectif n'est pas de faire de la littérature, mais de proposer l'information importante vite et bien. L'utilisateur doit comprendre instantanément si le contenu de la page correspond à sa recherche. Pour rendre les informations plus lisibles sur le web, voici quelques recommandations utiles pour une bonne rédaction web. 1. Les informations les plus importantes doivent être présentées au début. Il faut donc hiérarchiser l'information. De cette manière, l'information utile et importante est immédiatement accessible. 2. Après avoir hiérarchisé l'information, donnez un titre à chaque partie pour faciliter l'accès à l'information. Le titre est particulièrement important car il contient les informations principales. 3. Préférez les paragraphes courts. 4. Related:  ergonomieguyabalainErgonomie

Ergonomie web: 3 principes à garder en tête pour une ergonomie efficace de votre site Internet (PARTIE 6) Ergonomie web: 3 principes à garder en tête pour une ergonomie efficace de votre site Internet (PARTIE 6) Avant dernier article de la série “Les étapes détaillées pour créer un site capable de persuader et convertir ses visiteurs.” Je considère personnellement l’ergonomie comme: « LE » levier de performance par excellenceet un important levier de différenciation pour votre site web. Le magazine papier « de référence », Ecommerce mag, a relayé une étude réalisée par Benchmark Group: 75 % des internautes rencontrent “souvent” des difficultés pour trouver ce qu’ils cherchent sur les sites66 % trouvent les contenus des sites “souvent mal présentés” 58 % sont “souvent” confrontés à des problèmes de navigation Découvrez 3 grands principes valables pour tout projet web et à garder constamment en tête pour concevoir les fondations d’un site « ergonomiquement » efficace. 1 – L’internaute ne lit pas; il scanne des mots clés Ensuite, balisez vos textes avec

8 façons d’améliorer l'expérience utilisateur sur votre site Un site web doit être en adéquation avec les besoins des utilisateurs afin qu’ils puissent trouver les informations recherchées et réaliser les tâches nécessaires le plus rapidement possible. Les sites lents ou qui proposent une interface déroutante sont frustrants et la majorité des utilisateurs sont peu tolérants avec les expériences utilisateurs pauvres. Améliorer constamment votre site est très important pour maintenir un flux constant d’utilisateurs heureux. Si vous buttez sur ce sujet, voici quelques idées pour commencer à optimiser votre site. 1. Pour perdre un utilisateur, quelques secondes suffisent ! 2. Le logo présent dans l’en-tête de votre site doit être comme un phare, guidant les utilisateurs vers la page d’accueil lorsqu’ils en éprouvent le besoin. Dans le cas contraire, ils devront chercher soit un bouton en forme de maison, utiliser frénétiquement le bouton « retour » du navigateur, ou pire, retaper l’URL de votre site dans la barre d’adresse…voir quitter le site. 3.

Ergonomie web: Pour des sites web efficaces - Amélie Boucher Les « Style Tiles », un nouvel outil pour le webdesigner ? | Édition Nº4 Mais qu’est-ce que c’est ? On peut traduire en français les “Style Tiles” par le terme “Planches Tendances”. Habituellement utilisées en mode, en déco ou même en publicité, elles servent à définir les grandes tendances (graphiques, texturales, chromatiques, etc.) d’un projet donné. Un article de Samantha Warren, paru récemment sur A List Apart, propose d’adapter le concept et de l’utiliser en webdesign pour ressortir des tendances visuelles sans se soucier de la structure de la page. En bref, de faire l’inverse de ce qu’on fait avec les “wireframes” (ou “filaires”, ou “gabarits”, ou même “storyboards”… selon vos habitudes) pour déterminer une structure sans se soucier de l’apparence visuelle… Pourquoi s’en servir ? Ça marche bien et les clients y sont habitués. Partie intégrante de la démarche de “responsive webdesign” (“design adaptatif”), les “Planches Tendances” se proposent donc de décorréler la structure de page du choix des aspects graphiques et stylistiques en eux-mêmes. Conclusion

Ergonomie web - Téléchargements Téléchargements Téléchargez gratuitement un extrait du livre ! Offrez-vous un aperçu du livreen téléchargeant dès maintenantla règle n° 2 (Chapitre 5).Cet extrait concerne l’organisationvisuelle des pages web. » Télécharger (PDF, 4.1 Mo) Support au chapitre 5 Votre aide-mémoire d'ergonomie : les 12 règles Télécharger (format jpg, 53 Ko) Vu à la page 68 (Chapitre 3) : La Figure 3-28 en audio Ce mp3 vous permet d'entendre comment une synthèse vocale (ici, Jaws) lit le contenu d'une balise Title. Cette information, qui n'est visible sur le site que dans une info-bulle, devient capitale en mode auditif. En effet, la perception auditive est nécessairement linéaire. Ergonomie web, le site du livre

Théorie de la Gestalt La théorie de la gestalt, « forme » en Allemand, est une théorie d’origine allemande (début du XXème siècle) qui définit les principes de la perception. Le postulat de base est le suivant : devant la complexité de notre environnement, le cerveau va chercher à mettre en forme, à donner une structure signifiante à ce qu’il perçoit, afin de le simplifier et de l’organiser. Pour cela, il structure les informations de telle façon que ce qui possède une signification pour nous, se détache du fond pour adhérer à une structure globale. Cela s’applique à tous les sens. Cette théorie de la gestalt se décompose en lois : Comment appliquer cela aux interfaces ? Des zones ayant des fonctions ou une importance similaire devront avoir un aspect graphique similaire.Dans un formulaire, les champs concernant l’adresse (rue, n°, code postal, ville, pays) vont être regroupés dans un bloc. Quelques exemples des lois de la Gestalt. Ce diaporama nécessite JavaScript. Auteur : Raphaël

Liens - ergonomie, architecture de l'information, utilisabilité derniers liens User Interface (Q&A) Une plateforme de Questions / Réponses dédiée à l'expérience utilisateur web et mobile. » Visiter le site Baekdal.com Le site de Thomas Baekdal est très riche en ressources diverses, la plupart appartenant au champ de l'expérience utilisateur. Colour Contrast Check Un formidable petit outil proposé par Jonathan Snook, qui permet de calculer les rapports de contrastes de couleurs et de luminances entre des caractères et un fond. » Voir tous les derniers liens Les couleurs et l'accessibilité En France, la proportion de daltoniens est d'environ 8% chez les hommes et 0,45% chez les femmes (source Wikipédia). Plus de 10% de la population masculine est daltonienne dans le monde, et affectée par une perception des couleurs déficiente. Il existe différentes formes de cécité des couleurs : rouge-vert, vert-brun, et ainsi de suite... Bien entendu, il est très difficile, voire impossible d'éviter de mettre sur son site toutes les couleurs qui pourraient être mal perçues. Cependant, il est à la portée de tout le monde de faire en sorte que les pages soient lisibles par tous, quel que soit le handicap visuel. Dans cet exemple on voit bien que C et E sont plus facilement lisibles parce que le contraste est assez fort. En plus de faire attention aux couleurs employées, je vous rappelle qu'il est important de garder à l'esprit que la couleur ne soit jamais la seule indication de sens.

Jesse James Garrett: Visual Vocabulary for Information Architecture (French) Looking for more? My book The Elements of User Experience puts information architecture and interaction design in context for beginners and experts alike. You can now order the book from Amazon.com. version 1.1b (6 mars 2002) Jesse James Garrett (contact) Original English version Traduction libre de Francois Lamotte Table des matières Sommaire Le diagramme est un outil essentiel pour communiquer l’architecture d’information et la conception d'interaction entre les équipes de développement web. Historique des versions 1.1b (6 mars 2002) L'information intégrée pour le support OmniGraffle 2.0 Nouvelle bibliothèque de formes pour iGrafx Flowcharter 2000 1.1a (17 sept 2001) Nouvelles bibliothèques de formes pour Macromedia FreeHand Feuille PDF de synthèse 1.1 (31 janv 2001) Ajout de l'élément de pile de fichiers Ajout de l'élément de sélecteur conditionnel Modification l'élément de flèche pour permettre les flèche multiples Nombreuses améliorations aux bibliothèques de formes 1.0 (17 oct 2000)

Inspiration du moment : Les sites TV/Movies Aujourd’hui découvrez de magnifiques sites autour de la thématique Movie / Tv. Retrouvez toute la séléction directement sur mon pinterest The Lincoln Movie Socbilet by Andrei Zhukov Warner Bros Ellen DeGeneres Show Warner Bros. The Bounce Legacy by Justin Carroll Les propriétés CSS :nth-child et :first-child Afin de styliser en CSS une liste d’éléments, que ce soit pour la navigation de votre site web ou pour une liste dans vos contenus, vous pouvez utiliser un « ID » différent pour chacun de vos items. Cependant, cela aura comme inconvénient de vous créer plusieurs lignes de codes qui auraient pu être évitées à l’aide de différentes propriétés telles que :nth-child, :nth-of-type, :first-child et :last-child. Ces propriétés sont également très utiles lorsque vous avez une liste avec énormément d’éléments. Voici un article illustrant à merveille l’utilisation de chacune de ces propriétés CSS dans différents contextes afin d’avoir un contrôle absolu sur vos listes HTML. L’article suivant a été écrit par Chris Coyier du site web CSS-Tricks.com Sélectionner seulement le 5e élément Si vous devez sélectionner seulement le 1er élément de la liste, vous pouvez utiliser ceci li:first-child ou tout simplement li:nth-child(1). Tout sélectionner sauf les cinq premiers Sélectionner seulement les cinq premiers

fiche personnage, carte d'identité des personnages Vous venez de définir votre histoire avec son début, son milieu et sa fin. Vos personnages principaux ont un nom, une mission, des épreuves. Ainsi que des alliés et des ennemis. C’est pas mal du tout non ?! Mais connaissez-vous votre ou vos héros ? D’ou viennent ils ? J’aimerais être là pour voir votre tête ! Il n’y a rien de plus frustrant, que d’entendre un lecteur (producteur par exemple) vous dire « ce n’est pas logique la façon dont il agit / ou parle). Donner un passé aux personnages permettra de comprendre ses réactions futures. Prenons un exemple (j’aime bien ça) : Les aventuriers de L’arche perdue / crusaders of the lost ark. ATTENTION : n’en faites pas trop non plus. nom, prénom, âgesa taille, ses cheveux, ses handicaps (béquille, lunettes, prothèse etc.)l’aspect psychologique, son caractère : peureux, courageux, frustré etc. Faites une fiche personnage ou si vous préférez une carte d’identité pour chaque personnage. N’en faites pas un surhomme/ ou une loque humaine. Tom Weil

Pourquoi 99% des entreprises se trompent avec leur site web? + 2 exemples Gagner en visibilité, acquérir des prospects, vendre plus de produits, si je ne me trompe, ce sont les raisons pour lesquelles vous avez engagé un développeur web et construit votre site web. Car vous savez cette vérité immuable. Vous avez compris que pour exister, vous devez être visible. Avoir son site web est le chemin pour quitter de l’obscurité et atteindre la lumière. Mais vous faites probablement cette erreur énorme. Vous construisez votre site juste pour faire tendance et entrer dans la mode. Vous construisez votre site pour prouver à vos proches que vous aussi, avez un joli site web. C’’est une très grosse erreur. Pourquoi? Parce que vous n’avez pas vraiment compris à quoi va servir votre site web. Faire un site tout beau, clinquant, avec des jolies couleurs par ci et là ce n’est pas ce qui donne de l’argent. Faire un site web pour épater vos partenaires et amis, ça ne fait pas des ventes. Un site web en lui-même n’est rien. Les web designers font rarement de bons sites. Exemples :

SPIP pour débuter

Related: