WireFrame à toutes les sauces… Publié le 05 sept 2007 par leGizz dans Web Design Vous connaissez sans doute tous les wireframes, il s’agit du design d’une page web de manière schématique, on y place uniquement les principaux blocs d’informations et éléments d’interactions. Les wireframes permettent de structurer une page web avant même d’avoir attaqué le design. Pour vous faire une idée, voici à quoi cela peut ressembler . En général les wireframes sont utilisés au sein de l’équipe projet pour identifier les interactions entre les pages, la disposition des éléments etc. Les wireframes sont très pratique lorsque l’on passe à la conception du site. . Je lui ai naturellement expliqué que le design se fera dans une étape secondaire… Résultat : le client à tout de suite mordu De cette manière j’ai fait d’une pierre deux coups, présentation de mes idées au client et préparation du travail pour le développement du site… J’avais procédé quasiment de la même manière il y a de cela quelques mois pour un autre client.
Ergonomie 101 : les éléments d’une bonne scénarisation Pourquoi scénariser le web? La scénarisation est un terme surtout utilisé dans l’industrie du cinéma. En contexte web, elle désigne l’étape de création de maquettes dites « fonctionnelles », aussi appelées les maquettes fil de fer ou wireframes. Un peu comme l’architecte dessine les plans d’une maison, l’ergonome organise l’espace sur les pages web. les objectifs du siteles personas (ou clientèle cible)les données d’utilisation du site (merci Google Analytics!) Tout ça dans un but ultime : créer la meilleure expérience pour l’utilisateur. Le travail de scénarisation permet de communiquer facilement les orientations du projet au client et valider les enjeux du site. Un complément à l’arborescence L’arborescence illustre bien les différentes sections du site et chacune des pages qui s’y retrouvent. Les maquettes fonctionnelles illustrent clairement comment la navigation, l’interactivité et les fonctionnalités prennent forme sur le site. Le contenu d’abord Le piège du design Exemple Programmeur
Design d’interface et critère ergonomique 8: Adaptabilité Ma liste de critères ergonomiques pour la conception d’interface contient 11 critères. C’est une liste personnelle, établie au départ sur la base des normes & standards existants (ISO 9241, AFNOR Z67 133, Bastien & Scapin, Heuristiques US …), que je m’efforce de partager au quotidien avec les équipes de développement tout en sensibilisant le métier sur la question. Critère n°1 : Incitation Critère n°2 : Lisibilité Critère n°3 :Groupement-Distinction entre items Critère n°4 : Feedback Direct Critère n°5: Contrôle Utilisateur Critère n°6 : ConcisionCritère n°7 : Gestion des erreursCritère n°8: AdaptabilitéCritère n°9: CohérenceCritère n°10: SignifianceCritère n°11: Compatibilité Adaptabilité : en quoi ça consiste ? C’est S’ADAPTER aux caractéristiques des utilisateurs (vues, perspectives, raccourcis…) Portail personnalisé Ce critère concerne la capacité du système à réagir selon le contexte, mais aussi selon les besoins, préférences et niveaux d’expertise des utilisateurs. Bonne pratique :
Pattern Un article de Wikipédia, l'encyclopédie libre. Cette page d’homonymie répertorie les différents sujets et articles partageant un même nom. Sur les autres projets Wikimedia : pattern, sur le Wiktionnaire Le mot anglais « pattern » est souvent utilisé pour désigner un modèle, une structure, un motif, un type, etc. Un pattern constitue donc une solution générique à un type de problème fréquemment rencontré, en décrivant et formalisant les concepts sous-jacents à cette solution. Informatique[modifier | modifier le code] Il est employé en informatique[1] dans les cas suivants : les Patterns d'analyse facilitent et guident les étapes de la phase d'analyse ;Architectural pattern : patron d'architecture (ex. : le Modèle-Vue-Contrôleur) ;Les Design patterns ou patrons de conception sont des façons de programmer éprouvées et réputées pour apporter des propriétés comme la cohérence, la robustesse, la réutilisabilité, etc. Arts[modifier | modifier le code] Sauvetage[modifier | modifier le code]
A quoi sert la pagination sur le web La lecture de la semaine provient de la rubrique “technologies” du site d’information américain Slate (@slate), on la doit à Farhad Manjoo (@fmanjoo), qui tient cette rubrique, le texte s’intitule : “arrêtez tout de suite la pagination”. “La pagination”, écrit Farahad Manjoo, “est, en termes de design et d’usage, le pire péché sur le Web. Elle est la preuve d’un mépris constant et silencieux pour ceux qui devraient être la cible privilégiée des sites d’informations : à savoir les gens qui veulent les articles jusqu’au bout. Or c’est faux, rappelle Manjoo. Image : le tourneur de page d’Andy Brandon. “Chaque jour, comme des dizaines de millions d’autres lecteurs innocents, je clique sur des articles qui se révèlent être des morceaux d’articles. Certains avancent qu’ils aiment que les articles soient divisés en plusieurs pages. Je ne suis pas en complet désaccord avec l’idée que ce sont là des bénéfices de la pagination. “J’y crois”, dit Farhad Majoo. Xavier de la Porte
LaudableApps - Home Wireframe (design) Un article de Wikipédia, l'encyclopédie libre. Exemple de Wireframe Pour Jakob Nielsen, le maquettage wireframe correspond à du prototypage horizontal[1], c'est-à-dire au développement de la partie graphique de l'interface homme-machine. La confirmation de la satisfaction des exigences de l'interface utilisateur et des possibilités du site webLa simulation du fonctionnement a priori du site web selon les objectifs de départUne première estimation du temps et du coût de développement Pour un site web, une première forme de maquette statique consiste à définir le « zoning » des écrans, c’est-à-dire le découpage des pages du site. Le zoning sert de base au travail du graphiste. Bien que le passage par le maquettage papier soit encore une technique courante, il devient de plus en plus fréquent d'utiliser des logiciels dédiés ou détournés de leur fonction d'origine : Portail d’Internet
Ergonomie et référencement : les meilleures pratiques pour 2013 Vous avez été plus de 300 à nous suivre lors de la conférence du salon e-Commerce Paris 2012. C’est avec un grand plaisir que nous vous livrons ici les Best Practices 2013 en matière d’optimisation du référencement et de l’ergonomie. Tout d’abord, un bref rappel des conventions et règles ergonomiques déjà en vigueur… 1. Conventions et règles en ergonomie Les conventions et règles à respecter dans une démarche ergonomique pour le haut de page (header) Vous remarquerez que beaucoup de ces éléments relèvent désormais du bon sens. Ci-dessous, les éléments pour le footer : Les conventions et règles à respecter dans une démarche ergonomique pour le bas de page (footer) Les conventions en Ergonomie : des règles de bon sens qui doivent être adoptées et appliquées par tous en 2013. Les conventions et règles à respecter dans une démarche ergonomique 18 critères répartis en 8 groupes : Voici les autres règles que nous vous proposons : 2. La Méthode du tri de cartes (“Card Sorting”) 3. 4. 5. 6. 7. 8. 9. 10.
20 Mobile Apps Inspiration and Design Patterns As a mobile apps designer I’m sure you are often looking for inspiration to ensure that you can deliver constant innovation and high quality to your clients. A really efficient way to get serious inspiration for specific parts of your mobile apps project is looking for web sites showcasing the best apps created be other creative designers. With hundred thousands of mobile apps flooding the market it can be challenging to stand out and I recommend you seek inspiration and look for good elements and combine the top findings into new unique creations. If you are not a mobile apps designer and developer yet I can tell you that there is a great chance you will be one soon. It is all about mobile right now and it is not going to change very soon! As the mobile Internet surfing is constantly increasing there’s a huge trend right now leaving website administrators with an important job to do. Advertisement 1. Mobile Awesomeness is a gallery for mobile websites. 2. 3. jQuery Mobile 4. 5. 6. 7. 8.
Wireframes et prototypes : ébauche visuelle d'une application web » Blog AppliBox Wireframes : les wireframes sont des schémas utilisés en web design qui permettent de suggérer sommairement les éléments principaux d’une interface web (application, site…). Pour être utilses, ils doivent être mis en place avant toute création artistique. En début de projet, ils permettent de valider les éléments principaux de l’ergonomie et de présenter une maquette fonctionnelle suffisamment évocatrice pour un client non technicien. En cours de projet, ils peuvent servir de référence pour tous les acteurs (client, développeurs, web designer…). Un exemple réel. Un autre (une page) Quelques synonymes : Zonings (franco-français ?) Outils logiciels : Powerpoint Le seul avantage est que c’est un outil que tout le monde connait, et que presque tout le monde possède (au moins en version Open Office). Visio (Microsoft) Les plus : Les moins : Axure Un outil spécifique qui va jusqu’au prototype et aux spécifications. Denim Un outil informel pour le design d’interface ou les ébauches de sites web.
Ergonomie d’un site web et ligne de flottaison Le débat a longtemps fait rage parmi les ergonomes. Mettre du contenu sous la partie directement visible à l'écran sans avoir besoin de scroller sur une page web était une hérésie pour certains. Qu'en est-il en 2014 ? Mais où est le "Fold" Le fold (en français : pli) est représenté par la limite basse de ce que vous voyez à l'écran quand vous affichez une page web. En image, voici la représentation de la ligne de flottaison en rouge sur notre page d'accueil la semaine dernière pour mon écran. Le fold : Une ligne virtuelle qui varie d'emplacement selon l'outil de visualisation. Doit-on encore se préoccuper de cette limite ? Je pense que cette réflexion sur le fait que les internautes scrollent ou pas et sur le contenu qui devait être visible au-dessus du pli était parfaitement justifiée il y a 10 ans. Les choses ont tout de même bien évolué depuis... Des habitudes qui changent Pour info, rappelez-vous qu'il se vend aujourd'hui plus de tablettes que d'ordinateurs... Profondeur du scroll
960 Grid System Wireframing With Patterns By Lindsay Ellerby Published: March 20, 2007 “When you’re starting out as an information architect (IA), being part of a strong community of fellow practitioners helps immensely.” When you’re starting out as an information architect (IA), being part of a strong community of fellow practitioners helps immensely. Why a Wireframe Workshop? There is a fairly informal IA community in Toronto. What Are the Ingredients for a Successful Workshop? For a wireframing workshop like this you need: a facilitator with practical IA experience a place to hold the workshop that allows group viewing of visual documents—a projector is preferable, though not absolutely essential a group of people who are willing to share ideas and ask questions people who bring documents with them to share, whether they are large printouts or visuals for projection on a screen a common desire to build a greater community outside individual workplaces What Emerged? Distinguish the role of wireframes early in a project. 1. 2. 3. 4.
jQuery Mobile | jQuery Mobile