Design et ergonomie d’un site Web Comment faire en sorte que vos visiteurs se sentent à l'aise sur votre site, qu'ils y trouvent leurs repères et qu'ils aient envie d'y revenir ? Ces règles simples peuvent vous permettre d'accrocher et de conserver vos lecteurs. Dans cette page : Les standards - Principes de mise en page - Importance du contraste - Le zapping - L'esthétique - La couleur En bref ... Respecter les standards Vos visiteurs sont habitués à certains mécanismes, ne les perturbez pas. A lire en complément : Ergonomie d'un site Web par Kreatys En détail ... Quelques principes de mise en page La communication écrite existe à grande échelle depuis plus de 500 ans. Les légendes des belles images sont lues même par les visiteurs pressés ! source image : civilization.ca La mise en page doit être conçue comme une pyramide. Le titre : Court, explicatif, accrocheur. 50% des lecteurs quitteront votre page si le titre est absent ou peu intéressant. Les paragraphes : Vous devez développer une seule idée par paragraphe. Le zapping
Flat design et skeuomorphisme... Voilà déjà quelque temps que l’on nous parle du flat design comme étant la grande tendance graphique à suivre. À l’inverse, le « skeuomorphisme » serait devenu ringard, passé, « so 2000’s »… . Alors, essayons de démêler tout ça et d’y voir plus clair… Le skeuomorphisme c’est quoi ? Selon Wikipédia : « un élément de design dont la forme n’est pas directement liée à la fonction, mais qui reproduit de manière ornementale un élément qui était nécessaire dans l’objet d’origine. » En d’autres termes, il s’agit de donner l’apparence d’un objet existant à un élément de design ayant la même fonction que cet objet, le plus souvent dans le but de rendre son utilisation plus intuitive. Quelques exemples de skeuomorphisme : Et le flat design c’est quoi ? Le flat design est un style graphique débarrassé de tout effet de relief ornemental privilégiant ainsi la lisibilité de l’interface. Quelques exemples de flat design : Mais alors, on ne mélange pas flat design ET skeumorphisme ? Quelques exemples :
Doit-on remplacer les textes par des icônes 04 juillet 2014 Doit-on remplacer les textes par des icônes ? "Tiens, et si on remplaçait cet intitulé trop long par une icône ? Ce serait plus court, plus convivial, plus rapide, plus..." Prudence. Dans sa dernière étude sur les icônes, l'agence Miratech montre qu'elles ne sont pas toujours bien comprises. Et pour commencer, faites vous-même le test. Remplacer un texte encombrant par un dessin. Miratech a mené un test utilisateur à distance sur un panel de 150 participants, tous utilisateurs de smartphone/tablette ou ayant l’intention d’en utiliser plus tard. Voir tous les résultats par icône Conclusion : avant de remplacer un texte par une icône, assurez-vous qu'elle soit parfaitement comprise de TOUS vos internautes. Voir les autres newsletters de MiratechComment les pages web sont regardées ? Commentaires Poster un commentaire
Optimisez les performances de votre site web par l’ergonomie ! Interview de Jean-Pierre Le Borgne, Yuseo Suite à l’étude menée par Yuseo, agence d’études et de conseil en ergonomie des Interfaces, sur l’ergonomie des sites de cybermarchands et la performance des sites Internet, nous avons demandé à Jean-Pierre Le Borgne, directeur général de Yuseo, de resituer les « contraintes » ergonomiques avant de détailler les enseignements de cette étude. A quelles difficultés méthodologiques la mesure de l’ergonomie d’un site est-elle confronté La principale difficulté rencontrée par l’ergonomie des systèmes interactifs est le manque d’information des professionnels du marketing sur les apports et les méthodes de cette science. L’ergonomie couvre à la fois les aspects d’utilisabilité (dimension fonctionnelle) et d’utilité. L’ergonomie consiste à « optimiser la performance de l’outil Internet dans sa dimension fonctionnelle ». Jean-Pierre Le Borgne, directeur général de Yuseo : "l'ergonomie développe la performance des sites web" Dans ce cadre, notre démarche sur l’aspect fonctionnel est assez simple :
Itérer son design avec invision Bienvenue dans cette nouvelle vidéo Hackademy qui portera sur un outil bien pratique que je tenais à vous faire découvrir : InVision. Cet outil vous permet de gérer vos projets de webdesign, de la maquette à l’intégration. InVision se présente comme une solution à plusieurs problèmes auxquels sont confrontés les webdesigners. Avant de commencer, InVison est un service pensé tant pour un freelance que pour une entreprise et est payant au delà d’un seul projet (ce qui vous permet de l’essayer sans soucis). Le service met à votre disposition une interface web complète pour gérer vos projets ainsi qu’une application desktop de synchronisation que vous pourrez tout aussi bien remplacer par DropBox (et tant mieux puisqu’elle n’est disponible que sur OSX). Posons nous une première question, un outils de synchronisation ? Versioning de fichier design (.psd, .sketch) Dans InVision chaque version est enregistrée avec un screenshot et une date. Outils de prototypage Passons en mode Build. En bref
Comment sécuriser son WordPress Article invité rédigé par Aurélie, développeuse chez Atchik Services, depuis plus de 8 ans ! Hello à tous !! Comment allez vous ? Aujourd’hui je vous propose un article invité qui vous donnera quelques conseils pour sécuriser votre blog / site WordPress. Bref, pas très sérieux de ma part. Merci à Aurélie pour son temps et le partage de connaissances ! Comment sécuriser son WordPress ? Avant tout je tiens à remercier Miss SEO Girl de m’avoir invité à rédiger un petit article sur son Blog Depuis quelques mois il ne se passe pas un jour sans lire ou entendre qu’une personne autour de moi s’est fait pirater son ou ses sites. En mars dernier nous étions a plus de 40 000 attaques par minute. Si vous voulez être notifié des alertes de sécurité concernant WordPress et être averti de la vulnérabilité des plugins et de l’état de correction de ceux ci, je vous invite à vous inscrire à la newsletter de Wordfence. Mais pourquoi ces sites en particulier se font-ils hackér ? C’est fait ? 1. 2.
comment les utilisateurs naviguent dans un site 2. navigation ou moteur de recherche ? Ici se situe un très intéressant paradoxe: j'ai constaté que 1/3 des utilisateurs se précipitaient sur le moteur de recherche d'un site pou y trouver une information (dans son livre, J.Nielsen, qui a observé bien plus d'internautes que moi, parle de 50%), 1/3 utilisent alternativement moteur de recherche et navigation (nielsen: 35%) et 1/3 utilisent presque exclusivement la navigation (nielsen:15%). Pourtant, Selon Jared Spool, l'usage d'un moteur de recherche conduit à un taux de succès moyen dans les recherches d'information de seulement 30%, contre 53% par la navigation !! Il en déduit, très directement, que les moteurs de recherche "craignent" ("on-site search stinks..."). En tout état de cause, un bon moteur ne dispense pas d'apporter tout le soin nécessaire à la navigation dans le site... 3. l'utilisateur recherche d'abord les liens dans le texte ! 4. Un seul moyen: testez votre site ! 5. conclusions : de tout ce qui précède, retenez que:
UXPin ou comment améliorer son workflow en webdesign Nous allons nous pencher sur le workflow ou flux de production pour les anglophobes ! Le processus webdesign que j'applique aujourd'hui est bien meilleur que celui que j'utilisais il y a quelque temps et je voudrais le partager avec vous en vous expliquant pourquoi vous allez gagner en efficacité avec cette méthode plus adaptée aux projets d'aujourd'hui. 1- Pourquoi faut-il maquetter ? Les étapes d'un projet webdesign sont très importantes, à commencer par le cahier des charges. Mais ce n'est pas la problématique que je veux aborder aujourd'hui. Passons directement à la phase de maquettage. Je suis sûr que pour certains, vous sautez directement sur votre logiciel de PAO favori (Photoshop, Illustrator ou encore GIMP) après avoir récupéré les besoins du client. Vous venez de griller une étape ! Et la question que vous devez vous poser, c'est "comment vais-je hiérarchiser et organiser mes éléments et comment vais-je les rendre fonctionnels ?". 2- Le web évolue et les clients aussi ! . . . .
Quand, quoi, comment: tout sur le test utilisateur Observer un participant qui pense à voix haute en réalisant une liste de tâches sur votre site? Faites le test utilisateur tôt et régulièrement! Quand tester son interface web? Il n’est jamais trop tôt dans le processus de développement d’une interface web (site, maquette, application mobile, formulaire) pour commencer à tester l’expérience utilisateur. Selon Steve Krug, auteur du livre « Don’t make me think », tester un site avec un seul utilisateur, assez tôt dans le projet et, répéter l’opération régulièrement, serait plus efficace que de le tester avec 50 personnes lorsque le site est presque abouti! Concrètement? Ensuite, continuez vos test utilisateurs durant l’entièreté du développement: wireframes, prototypes et, finalement, les véritables pages de votre interface. Le rôle du facilitateur est double: d’une part s’assurer que le participant reste concentré sur les tâches à effectuer et, d’autre part, s’assurer que le participant pense à voix haute.
Building your design portfolio? Here are 8 things I wish I’d known. — Doing the Work Building your design portfolio? Here are 8 things I wish I’d known. Two years ago, I was finishing my last semester of college, and preparing for the seminal moment in a design student’s life: portfolio reviews, and finding a job. And even though I was finishing a degree in graphic design, I was looking for a full-time job as a UX/UI Designer. My hard work paid off. But, it was a painful process. 1. Fill your portfolio with as many case studies as possible. When I applied to jobs in college, I filled my portfolio with big, beautiful visuals. I asked a friend for help — and she passed along a few portfolios of friends that’d gotten hired at top tier companies and… They all had case studies. I thought, Why couldn’t I have case studies? So I added case studies. Big beautiful images look great, but they don’t tell a hiring manager if you can solve a problem. Show that you can solve problems, and you’ll show that you’re worth hiring. 2. Should your portfolio be specialized, or general? 3. 4. 5.
10 erreurs fréquentes à ne plus commettre avec WordPress (Infographie) WordPress est LE CMS le plus populaire au monde, avec plus de 75 millions de sites qui l’utilisent dans le monde, que ce soit pour la création de blogs, de sites vitrines ou encore de sites E-commerce, WordPress est massivement utilisé, mais pas toujours aussi bien qu’il le faudrait. Cette infographie revient sur les 10 principales erreurs à ne plus commettre en 2015 avec WordPress. Erreur 1- Garder l’identifiant de connexion « Admin » pour le compte administrateur Toutes les attaques par force brute qui ciblent des installations WordPress seront plus à même de pénétrer votre site internet si ce dernier dispose d’un compte administrateur avec un login inchangé « admin ». Cette modification d’identifiant doit être faite dès l’installation de WordPress. Erreur 2- Garder les préfixes des tables de votre site sous la forme « wp_ » Cette seconde erreur fréquente affecte elle aussi la sécurité des installations WordPress. Erreur 3- Ne pas faire de backups réguliers de son site WordPress
On The Future of Web Design Tools Raise your hand if you remember Dreamweaver. Actually, I can’t see any hands, so tell the person sitting next to you that you remember Dreamweaver. You’re bad ass enough to have rocked it this long, go ahead, tell them. I’ll wait. Back? If you’re not old enough to know what Dreamweaver was (and still is), then I consider you young pup, and I’m glad you’re here because I wish that I would have read an article like this when I was a young designer. Like any forward moving industry, the tools evolve and what once was on top of the heap can quickly slide down the back of the pile as a new contender takes the top spot. We’re seeing that now as Sketch is starting to take over as the primary tool for many UI designers. The Tools Don’t Matter Ok, we get it. So tonight when you head home and you do your daily standup at your dinner table with your spouse and your kids, this is what you can share: the tools don’t matter. Let that sink in. Tools: A Means To An End So there you have it.
Comment Ajouter un Bouton Pinterest Pin It sur vos Images WordPress? Nous terminons la semaine avec un tutoriel qui indique comment ajouter le bouton Pin It de Pinterest sur les images de vos billets dans WordPress. Si vous êtes un lecteur régulier du blog, vous savez que que j’ai déjà un bouton Pin it en bas de mes articles. Cependant je souhaite en ajouter un sur les images pour deux raisons: Améliorer l’expérience utilisateur et donner plus de choix aux lecteurs quand au bouton qu’ils veulent utiliser.Augmenter le nombre de partages des articles sur Pinterest et récupérer donc plus de trafic à partir de cette plateforme. #1. #2. Les endroits où vous souhaitez que le bouton Pin It apparaissent: « Home page », « Pages », « Single posts », « Category and archive pages » ou « Blog pages ».La description soit le texte qui est extrait automatiquement et qui accompagne vos images sur Pinterest. #3. Et voilà :)