écrire pour le web: les règles pour bien rédiger Rédiger pour le web, c’est avant tout écrire pour un lecteur qui cherche une information, qui cherche à apprendre, à comprendre, à se divertir. C’est écrire en lui donnant un contenu riche et intéressant, des liens, qui lui permettent de naviguer dans les différentes parties du site. Si vous pensez qu’écrire de façon concise et précise avec des titres et accroches pertinents, proposer une information riche invitant à l’exploration du sujet vers des liens profonds et populaires, rendre le contenu accessible sur la forme avec des mises en gras, des paragraphes, est une bonne façon de faire vous êtes sur la bonne voie. Mais que cachent les principes de l’écriture pour le web? La nécessité d’adapter son langage: les faits L’étude Designing Web Usability de Jakob Nielsen et John Morkes a démontré en 1998 que le temps moyen de lecture d’un article sur le web est 25% inférieur à celui de sa version papier et que 80% des visiteurs balayent le texte sans le lire. 1 règle pour les gouverner toutes
PHP : Le tutoriel pour grands débutants pressés Pour l'instant, on a manipulé des variables que l'on entrait "à la main" soi-même. Il nous faut maintenant voir comment manipuler véritablement des variables, entrées par l'utilisateur. III-1. Vous le savez, un formulaire en HTML, c'est la suite de balises suivante : un formulaire typique sur la page saisie.php Sélectionnez <form name="inscription" method="post" action="saisie.php"> Entrez votre pseudo : <input type="text" name="pseudo"/><br/> Entrez votre ville : <input type="text" name="ville"/><br/><input type="submit" name="valider" value="OK"/></form> Ici, ce formulaire présente une zone de saisie pour entrer son pseudo, va à la ligne, une zone de saisie pour entrer sa ville, va à la ligne, et enfin un bouton pour valider sur lequel sera écrit 'OK'... Le but, vous l'aurez compris, c'est de récupérer, via PHP, les infos entrées par n'importe quel usager. Voici comment les choses vont se découper : Ah, tout ça sera donc dans une condition, voyons donc immédiatement la syntaxe du si : III-2.
Tout savoir sur l'Expérience Utilisateur (User eXperience ou UX) Design is much more than how something looks like and feels like, design is how it works. C’est en général très compliqué et long de rendre les choses simples. Et ce n’est pas moi qui le dit. Très bon article de Krystal Higgings sur l’importance et la manière de créer une vraie expérience quand un utilisateur ouvre une application mobile pour la première fois. Ce premier lancement doit à la fois séduire l’utilisateur tout en lui apprenant rapidement comme se servir de l’application : laisser jouer l’utilisateur plutôt que lui montrer comment il doit faire, lui présenter une interface avec du contenu sans qu’il ait à le remplir lui même, mettre en valeur les key features et l’inciter à découvrir le reste. Un contre-exemple que j’ai rencontré récemment est le tout récent Blackberry Z10 : au lancement, Blackberry montre à l’utilisateur comment la nouvelle interface de son OS fonctionne (et c’est nécessaire !) (merci à Christophe) En bonus une démo (merci JB)
Retrouvez le plaisir de lire à l'écran Pendant ses dix premières années, le web a su séduire le grand public avec uniquement du texte et des images. Puis vint l’avènement de la vidéo avec YouTube. Puis vient la révolution des terminaux mobiles avec l’iPhone et l’iPad. Heureusement, certains éditeurs de site relèvent le défi en proposant une expérience de lecture à l’écran beaucoup plus agréable. La mise en page (lignes pas trop larges, photos et vidéos bien intégrées, pas d’éléments parasitant l’attention) ;La densité d’information (avec un interlignage optimisé et des paragraphes pas trop longs) ;La typographie utilisée pour le texte, les titres et intertitres… Je précise au passage que tout ceci est maintenant grandement facilité avec les navigateurs récents qui savent correctement afficher les CSS3 qui autorisent des choses tout à fait intéressantes : Vers une scénarisation des contenus textuels. De mémoire, le premier éditeur à avoir fait volontairement un gros effort est Google avec son Think Quaterly :
Première maquette graphique web : comment faire ? Maquettistes affirmés, mais débutants sur le Web, voici les repères élémentaires à connaître pour créer votre première maquette graphique pour le Web : résolution d’écran, pixels, couleurs hexadécimales, page web, scroll, découpe, tout ça. Pour partir sur de bonnes bases. Exprimez tout en pixel : l’unité de mesure, sur le Web, est le pixel, point élémentaire de l’écran, et non pas le pica, le point ou le centimètre pour lesquels il n’existe pas de conversion et qu’il faut donc oublier. Travaillez en bitmap à l’échelle 1:1. Commencez par fixer la largeur de la page. Vous pouvez maintenant commencer à composer votre première maquette web, en partant du bon pied, sur des bases correctes : pixel, bitmap, RVB, 72 dpi, etc. Un conseil : faites moultes captures d’écrans des sites qui vous inspirent et découpez-les dans un logiciel graphique. Que livrer ?
27 conseils pratiques en ergonomie Web 10 blogs et sites sur l’ergonomie pour vous remettre à l’anglais En France on parle souvent de Ergonomie ou Conception d’Interfaces, mais de l’autre côté de l’Atlantique (ou du Channel), on parle plutôt de User Experience, UCD, ou Interaction Design. Peu importe le terme choisi, l’important c’est de rester informés des nouvelles techniques et méthodologies qui font partie de notre métier : la conception centrée utilisateur. Que ce soient les bonnes pratiques sur l'étude terrain, le maquettage d'interfaces ou sur le design graphique, on partage ici nos coups de cœur de la blogosphère anglophone avec vous. Enjoy! 1st Web Designer Spécialiste du web, ce blog vous permettra de trouver des informations concernant le code web (PHP, HTML, Ruby, etc.) ou le graphisme (illustration, photographie, iconographie). Il contient aussi des nombreux tutoriels pour maîtriser les différentes techniques du design web. Smashing Magazine – UX Design Définitivement LA publication incontournable dans le monde de l’ergonomie et la conception d’interfaces. Maintenant : Action !
Art of Illusion - Créer & Éditer Art of Illusion est un logiciel multi-plateforme simple et facile d’utilisation pour s’initier à la 3D. Développé entièrement en Java, il nécessite l’utilisation du J2SE de Sun. Par ailleurs, il est fortement conseillé d’avoir aussi installé le JMF -Java Media Framework-, toujours de chez Sun. Ce programme basé sur trois outils, offre un panel d’action satisfaisant. L’écran général permet d’éditer les dessins. une zone à gauche, avec les outils de dessin, de déplacement, de prise de vue et de lumière, une zone centrale, divisée en 4 parties indépendantes, pour visualiser et paramétrer l’objet en cours, sous différents angles et prises de vue, une zone à droite, avec la liste des objets composant votre dessin, pour une sélection rapide et fonctionnelle. Vient ensuite l’éditeur d’objet pour effectuer du modelage sur l’objet, le lisser ou le déformer. Enfin pour les plus expérimentés, l’éditeur procédurale de texture qui permet d’associer des modèles à des blocks ou procédures [1].
Ergonomie web et logiciel, architecture de l'information, utilisabilité sites Internet – Ergolab TENDANCES GRAPHIQUES Ergonomie web : les bonnes pratiques - STUDIO VITAMINE l'agence web Nom de domaine | Hébergement : Netissime.com Hébergeur professionnel
BP Eminet, Développement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilité, multilinguisme Cet article est paru sur le site www.marketing-internet.com. Il a été complété par la suite. La réflexion concernant l’utilisation d’une typographie adaptée est une partie trop souvent oubliée dans une bonne démarche « ergonomique ». Cinq siècles de typographie et de texte imprimé ont modelé notre approche de la lecture. Trop souvent une direction de communication en entreprise pense qu’un écran web n’est que la translation de l’information papier (impression). Cette attitude est d’autant plus confortable qu’il s’agit d’un univers bien connu et bien maîtrisé. Après tout que représentent 30 ans d’informatique éditoriale en comparaison avec 500 ans de tradition d’imprimerie ? L’objectif de cet article est de soumettre quelques bons principes pour savoir ce qui fonctionne ou pas, et surtout être capable de l’expliquer au client ou au donneur d’ordre. Avoir des réflexions sur la typographie, permet de se rapprocher de ce qui fait la différence entre un beau produit et un bon produit... Et :
5 services en ligne pour les concepteurs et les développeurs Web Être concepteur ou développeur Web n’est pas de tout repos. Répondre aux exigences des clients, créer des sites sur mesure, il faut savoir anticiper et innover. Analyse, créativité et rigueur sont souvent les maîtres mots. Histoire de vous simplifier certaines tâches, j’ai dégoté 5 services en ligne pour les concepteurs et les développeurs Web… 1. Éditeur en ligne qui fonctionne à partir d’un simple navigateur. 2. Typetester est un superbe outil en ligne qui permet de comparer facilement et rapidement plusieurs polices de caractères. 3. Kuler permet de générer des thèmes chromatiques qui peuvent servir pour tout projet de création. 4. En tant que concepteur ou développeur Web, votre meilleur ami s’appelle sans doute “Photoshop”. 5. CSSDesk est un éditeur de code HTML et CSS. Utilisez-vous un service en ligne en tant que concepteur ou développeur Web ? Etiquettes : concepteursdéveloppeurs WebEn ligneOutilsservices Description de l'auteur Cédric blog depuis mars 2009 sur Autour du Web.