User Experience Versus Users. By Paul Bryan Published: December 23, 2013 “Recently, … it seems that user experience is increasingly playing a role in formulating designs that diametrically oppose users’ wants and needs for the sake of generating greater profits.” The field of user experience has, from its inception, championed the notion that meeting users’ needs is the path to success for digital products. Recently, however, it seems that user experience is increasingly playing a role in formulating designs that diametrically oppose users’ wants and needs for the sake of generating greater profits.
The Growth of User Experience By the early 1990s, the term user friendly was in common use for describing software that was easy to use. Subverting Users’ Needs “Where once the goal of user experience was to increase user satisfaction, companies are increasingly leveraging user experience in a manner that is contrary to users’ needs and, in some cases, even causing users harm.” 1. Figure 1—OS X Updates Available window series. Charte de confidentialité : des icônes pour informer. Personne - ou presque - ne lit les politiques de confidentialité. Pour simplifier les choses et rendre compréhensible ce que fait chaque site avec vos données, designers, citoyens et experts soutenus par la fondation Mozilla ont mis en place une liste d'icônes.
Tour d'horizon de l'initiative. Lorsque vous téléchargez un logiciel sur votre ordinateur, une image, une typographie, de la musique, etc. vous vous retrouvez souvent nez à nez avec les fameux textes de “politique de confidentialité”. Je ne sais pas qui prend le temps de lire tout ceci mais les clauses de confidentialité sont en général bien complexes et écrites en corps 9 et en gris sur fond blanc.
Nous avons donc tendance à cliquer sur “oui j’accepte” sans avoir lu. Des icônes Parmi ces idées, voici les icônes du projet réalisé avec Mozilla, Ocupop et “Disconnect”. Ces icônes ont été développées en partenariat avec un groupe de travail dirigé par Mozilla. Informer / rassurer / partager Signification Pour en savoir plus. Ergonomie web : les mythes et légendes ont la vie dure... Malgré le travail acharné de grands ergonomes Web reconnus (Amélie Boucher et Jean-François Nogier chez nous, ou Steve Krug et Jakob Nielsen aux USA, pour ne citer qu’eux), des mythes perdurent en donnant des réponses à l’apparence facile et pratique aux profanes, tout en dépréciant notre démarche au passage.
Grâce aux ouvrages de Steve et Amélie dont je me suis inspiré pour cet article, et en y ajoutant mon expérience personnelle, je vous livre ici une courte liste de 12 légendes qui sont encore colportées régulièrement sur l’Ergonomie Web… 1. La règle des 3 clics Ergonomie web : la règle des trois clics Vous avez déjà tous entendu cette phrase : “Pour que ton site web soit facile à utiliser, l’internaute doit trouver ce qu’il veut en moins de 3 clics, sinon il se barre” ou du style… C’est l’exemple typique d’un argument vrai sur le fond mais complètement idiot sur la forme. 2. « Les clients sont stupides » Ergonomie web : “les clients sont stupides” 3.
“Round One, Fight !” 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.
VISIO_tutorial_v1.0.pdf (Objet application/pdf) Visio et Axure : un tutorial et une version bêta. 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. Il s'agit souvent d'un phénomène ou d'une organisation que l'on peut observer de façon répétée lors de l'étude de certains sujets, auquel il peut conférer des propriétés caractéristiques. À l'inverse, certains anti-patrons se retrouvent dans des erreurs, des instabilités ou des failles classiques. 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] Arts[modifier | modifier le code] En musique, le pattern désigne un motif rythmique de base. Sauvetage[modifier | modifier le code] Équitation western[modifier | modifier le code] 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. Il permet : 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. Pour chaque type de page (ex: page d’accueil, page intérieure, chapeau de rubrique, etc.) le concepteur identifie les différentes zones de la page qu’il schématise à l’aide de blocs ou de boîtes afin de déterminer les grandes fonctionnalités et les zones principales du contenu.
Le zoning sert de base au travail du graphiste. Portail d’Internet. 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 ?) , Page Architecture, Low Fidelity Mock-Up, Page Schematic, Rough Draft. 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. 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. A little over a year ago, on Sunday, February 22, 2006, I participated in an informal workshop on wireframing techniques that took place here in Toronto.
Bryce Johnson, Director of User Experience Design at Navantis Inc., facilitated and hosted the workshop at his workplace. The knowledge sharing and the wireframing best practices that emerged from the workshop, plus the sense of community I experienced there, helped me build a foundation as an information architect and got me started on developing my own design workflow. Now, I’d like to share the techniques I’ve learned with a broader community of information architects. Why a Wireframe Workshop? What Emerged? 1. 2. 3. 4. Présentation d’Axure - Outil de prototypage › lifestream. Bon allez, un petit peu de motivation pour poster des articles plus consistants que mes liens delicious ! Du coup, pour fêter ça, je vous propose une rapide présentation du logiciel Axure.
Je l’ai découvert très récemment, et je dois dire qu’il est rapidement devenu mon plus fidèle compagnon (du moins dans le cadre du travail). Pour faire court et concis, Axure est un logiciel de prototypage. Concrètement, il permet de créer des maquettes fonctionnelles animées (prototype) et de les accompagner de leurs fameuses specs. Pour réaliser un prototype rien de plus simple : 1/ Vous créez l’arborescence de votre site (modifiable à tout moment) 2/ Vous modélisez des masters (équivalent d’un template/gabarit) que vous appliquez à vos pages. Bien sûr, il y a plein d’autres bons points que je ne vous ai pas mentionné : Concernant les ressources pour apprendre, il n’y en a pas tant que ça, surtout d’un point du vue francophone !
Outils sociaux. UI Stencils. UI Stencils Découvrez les pochoirs réalisés par UI Stencils. Des pochoirs très pratiques puisqu’ils vont vous servir à dessiner plus proprement vos wireframes/storyboards avec notamment une petite panoplie d’icônes sympas. Des pochoirs disponibles pour storyboarder appli Iphone, appli Ipad, appli Android ou encore même un site web classique. Vous vous munissez juste d’un bon critérium et c’est parti! Pour dessiner le tout, UI Stencils propose aussi des gabarits papiers où vous allez pouvoir crayonner vos plus belles maquettes !