background preloader

Zoning, wireframe, maquettage, prototype ... : les meilleures pratiques

Zoning, wireframe, maquettage, prototype ... : les meilleures pratiques
Zoning, wireframe, maquette, prototype, voici des termes qui ne vous sont pas anodins, puisque nous les rencontrons de plus en plus dans le monde du Web, notamment dans les phases d’initialisation des projets. Mais savez-vous réellement ce qui se cache derrière chacun de ces termes, qui désignent l’ensemble des techniques et des outils qui permettent de maquetter graphiquement, fonctionnellement, ergonomiquement un site Web ? Tout d’abord utilisée dans la création de logiciels lourds avant la phase de développement, cette technique de conception a progressivement été adoptée, et est aujourd’hui conseillée par les professionnels du Web. ceci dit, il arrive encore couramment que l’on fasse l’amalgame entre les différents termes. Parallèlement, le nombre d’applications permettant de réaliser des wireframes ou des prototypes ne cesse d’augmenter, avec à chaque fois de nouvelles spécialisations. Les différentes notions derrière ces termes Un zoning Exemple de zoning Un wireframe Une maquette 1. Related:  critères de l'ergonomie web

18 outils gratuits pour faire des maquettes d'interfaces graphiques « Korben Korben Aujourd'hui, j'ai cherché une petite application qui me permettrait de réaliser des maquettes d'interfaces graphiques simplement, comme je le faisais sous Linux avec Pencil (mais pour Mac OSX). Puis au fil de mes recherches, j'en ai dégoté plusieurs qui je pense vous intéresseront. Voici donc une sélection de 18 outils de création d'interfaces graphiques (et de schémas) pour vos projets. J'ai fait un mix entre les outils Mac, Windows et Linux (en précisant à chaque fois) et j'ai listé les outils payants à la fin (en bonus). Bon, par contre, comme ils font tous relativement la même chose, j'ai mis uniquement en avant leurs petites particularités lorsqu'il y en avait, donc à vous de choisir celui qui vous convient le mieux. Balsamiq mockups Fonctionne sous Mac, Windows et Linux. Rejoignez les 60762 korbenautes et réveillez le bidouilleur qui est en vous Suivez KorbenUn jour ça vous sauvera la vie..

8 critères ergonomiques importants pour votre site web Internet est un outil créé par des humains, pour des humains. Chaque jour, de nouveaux sites web et de nouvelles pages s’ajoutent pour être utilisés par les internautes. Cependant, il arrive encore souvent de trouver des interfaces dont l’utilisation est une torture. Le travail des designers d’expérience utilisateur, ou UX designers, est de simplifier le plus possible ces expériences. Internet étant un outil mondialement accessible, il convient d’essayer d’uniformiser son langage, grâce à des critères ergonomiques claires, pour rendre la conception des sites web et leur utilisation plus fluide. Parmi les ressources permettant de rendre un système informatique utile et utilisable, on retrouve les critères ergonomiques de Bastien et Scapin. 1. Le guidage désigne tous les moyens mis en place pour conseiller, informer et conduire l’utilisateur dans ses interactions. 2. Il convient de réduire au minimum la charge de travail effectué par l’utilisateur. 3. 4. 5. 6. 7. 8. Sources

Ergonomie des interfaces : la 5ème édition "Ergonomie des Interfaces" est la 5ème édition de « Ergonomie du logiciel et design web ». Cette cinquième édition a été profondément remaniée afin de prendre en compte les nouveaux dispositifs d’interaction et accompagner tous les concepteurs d’interfaces sur les différentes phases de la démarche de conception ergonomique. Ré-édité depuis 10 ans Délibérément pragmatique, cet ouvrage, dont la première édition a été publiée en 2001, a été lu, relu, exploité et utilisé par de nombreux chefs de projet, développeurs et concepteurs d'interface. En 10 ans, les interfaces et l’informatique en général ont beaucoup évolué. Les dix ans de l’ouvrage correspondent aux dix ans d’Usabilis. Pour cette cinquième édition, nous ne pouvions plus conserver cette dichotomie logiciel/web qui ne correspondait plus à la réalité du terrain. Les premières éditions de l’ouvrage ont été construites à partir du support des formations Usabilis et des cours de Jean-François Nogier. L’audience >> Lire un extrait Auteurs

Principes à suivre pour un site web de qualité : Ergonomie, Compatibilité, Accessibilité Les enjeux d'un site web sont multiples et sa compatibilité ainsi que sa qualité comptent parmi les premiers critères de sa réussite, tant au niveau quantitatif (trafic, nombre de commandes) que qualitatif. Pour être de qualité, un site doit être à la fois Utile (répondre à un besoin) et Utilisable (par tous). Les principes universels de qualité peuvent être regroupés dans trois grandes parties, s'appliquant pour tous les sites web quel que soit leur thème (ludique, sobre, académique, artistique), leur concept (professionnel, commercial, associatif, amateur,...), leur objectif et le public visé. Règles d'ergonomie L'ergonomie est la façon de rendre un site utilisable par le plus grand nombre de personnes avec un maximum de confort et d'efficacité. Cette définition est souvent peu respectée au profit des technologies propriétaires (Flash, scripts, balises IE,...) qui rendent l'utilisation des sites souvent difficile et d'une mauvaise utilisation des principes de base en design d'IHM. Liens

Quel est le bon nombre de pages sur un site web pour qu'il soit performant ? Lors de nos échanges avec les propriétaires de sites web et leurs webmasters, il s’agit d’une question qui revient constamment. Idéalement, combien faudrait-il de pages ou de contenus sur un site web pour qu’il soit bien référencé, qu’il satisfasse l’internaute et apporte les résultats attendus à l’entreprise. 10, 100 ou 10000 pages sur un site web : quel est le bon nombre ? Et la bonne réponse est… ça dépend. Référencement naturel ou publicité ? Lorsque l’on écrit du contenu pour être bien placé dans Google pour répondre au besoin de l’internaute ET être bien placé dans Google, il y a forcément des règles que l’on respecte pour plaire aux moteurs. À l’inverse, si le trafic provient essentiellement de publicité, l’objectif est toujours de plaire l’internaute mais beaucoup moins aux moteurs. Gros mots clés ou longue traîne ? La boucle est bouclée : la longue traîne correctement organisée dans l’architecture du site favorise les mots clés plus concurrentiels. Passif SEO ou petit nouveau ?

Les fondamentaux de l'Ergonomie Web - Pierre Lainé Sur un site internet, les éléments qui doivent être particulièrement optimisés sont les éléments cliquables. L'affordance(1) des call-to-action (CTA) doit être hiérarchisée pour guider l'utilisateur jusqu'à la conversion (aspect, taille, couleur). Sur un site, les seuls éléments qui doivent être soulignés sont les éléments cliquables. En complément de cette hiérarchisation, le libellé du bouton mérite une attention propre. En 2016, Amazon a vu augmenter ses ventes de 45% grâce à l'évolution du libellé d'un bouton dans le tunnel de paiement, le bouton "register" par "continue" qui s'est révélé moins incitatif pour les utilisateurs qui ont plus facilement poursuivi leur parcours. Même si cela peut paraître être une évidence, l'interaction avec l'élément cliquable permet de retenir l'attention de vos utilisateurs et doit être systématique.

Comment créer une arborescence de site web ? - 1ère Position Sans une arborescence de site solide, un site internet n’est qu’un ensemble de pages et d’articles de blog complètement désorganisé. Les internautes ont besoin de cette architecture pour naviguer d’une page à l’autre et comprendre où trouver l’information. C’est un élément déterminant de l’expérience utilisateur (UX). Les moteurs de recherche utilisent également la structure de votre site pour déterminer quel contenu est important et ce qui est moins pertinent faisant de l’arborescence de site un enjeu majeur du référencement naturel (SEO). Meilleure est la structure de votre site, meilleures sont vos chances de vous positionner sur la première page de Google. 1ère Position, agence SEO depuis 1999, vous donne quelques conseils et des exemples pour créer une arborescence de site web optimisée pour votre référencement et pour les internautes. Définition de l’arborescence de site web Le rôle de l’arborescence de site internet pour le SEO Améliorer l’expérience utilisateur 1. Concrètement, 2.

Related: