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.

http://fr.clever-age.com/veille/blog/maquettage-et-prototypage-le-tour-des-notions-et-des-outils.html

Related:  Méthodes & ergonomieGraphisme & Ergonomie / UX & UIergonomie prototypageUX/ Design/ Ergo Apporganisation

Comment rédiger une charte éditoriale web ? Comment rédiger une charte éditoriale web ? La charte éditoriale web, souvent négligée sur Internet, permet pourtant de garantir une véritable cohérence des contenus sur un site. Les rédacteurs et les chefs de projet se succèdent, les contributeurs se multiplient. Navigation horizontale : une nouvelle alternative graphique à l’ère du tout-mobile ? Ces derniers mois ont vu naître de nombreux sites web à navigation horizontale, à la manière de MySpace ou de USA Today. C’est grâce à l’évolution des portfolios, des sites personnalisés et des désirs d’innovation des webdesigners que la navigation horizontale est née. Les sites utilisant cette variation graphique se multiplient et offrent des nouvelles alternatives au design. Souvent considérés comme une aberration d’un point de vue ergonomique, ces sites offrent sans conteste une grande liberté artistique et surtout correspondent à une nouvelle habitude de lecture des internautes devenus mobinautes. Pour mieux comprendre ce phénomène, laissez-nous répondre à trois questions afin d’appréhender la navigation horizontale et comprendre que finalement elle n’est pas si inhabituelle que ça …

Design et ergonomie des applications Presse sur iPad Second article invité par la société Forecomm, toujours sur le sujet de la presse, qui nous fait ici un inventaire exhaustif comparé et hautement détaillé de l’ergonomie des applications presse sur iPad, aspect indispensable pour qu’une application soit performante. A l’heure du web 2.0 et de l’avènement de support médias révolutionnaires et connectés comme les tablettes tactiles, le monde de la Presse s’est vu confronté à une nouvelle problématique : Comment se déployer sur ce nouveau support ?Comment présenter une édition print sur un support hypermédia tel que l’iPad, qui présente des caractéristiques visuelles, tactiles mais aussi auditives et interactives sans remettre en cause toute la chaîne de production ?Comment ces nouveaux paramètres impactent-ils le design et l’ergonomie des applications presse ?

Outils de prototypage d’interface Pour élaborer rapidement et concrètement l'agencement de l'information (et le zoning) et des fonctionnalités d'une future interface, le maquettage en fil de fer (wireframe) est souvent un passage obligé de l'approche ergonomique. Comme le dit Jean-François Nogier dans son ouvrage : "Le prototypage est la clé de voûte du développement itératif". Que l'on soit à l'aise ou non avec un crayon à papier, quand un client veut pouvoir se représenter concrètement sa future interface, l'esthétique du wireframe a tout de même son importance. De nombreux outils sont à portée de souris et tout dépend de ce que l'on veut en faire.

Architecture de l'information Introduction L'architecture de l'information est la structure d'organisation sous-jacente à un système de contenu. Ce système de contenu peut être le web, et c'est souvent dans ce cadre que l'on parle d'architecture de l'information. En effet, là où il y a de l'information, il y a potentiellement architecture de l'information. Cet article présente les grands principes qui permettent de l'optimiser : systèmes d'organisation, de navigation, terminologie et fonctions de recherche.

10 conseils d’utilisabilité avant de concevoir l’UX L’expérience utilisateur d’un site web, vaste sujet que nous avons déjà traité dans de nombreux articles : Chaque éditeur souhaite que les visiteurs prennent du plaisir quand ils visitent leur site, qu’ils gardent un bon souvenir, qu’ils reviennent et qu’ils recommandent le site à leur entourage. L’expérience offerte sur un site web prend de plus en plus d’importance avec la richesse des offres disponibles sur les différents supports : Web, mobile ou tablette. Le marché du commerce en ligne oblige donc à se démarquer des concurrents en offrant aux utilisateurs plus qu’une plate-forme fonctionnelle en ligne. Il n’est plus possible de rendre public un nouveau service ni préparé ni testé et penser créer des expériences extraordinaires. Il est nécessaire de s’assurer que le site web satisfait les attentes les plus simples des utilisateurs.

Comprendre l'internaute Généralités En ergonomie, quelque soit la finalité du produit (logiciel, site internet, application tactile…), il est important d’adapter l’interface à l’utilisateur en s’appuyant sur ses habitudes, ses capacités et ses connaissances. Lors de la réflexion de l’ergonomie d’une application tactile, la contrainte incontournable qui entre en jeu est le doigt. Ainsi, les zones d’interactions doivent être suffisamment larges pour la surface du doigt, et suffisamment espacées entre elles pour éviter la confusion lors de la sélection.

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).

Related:  Conception d'interfaceinterface design