Bonnes pratiques pour les écrans d’identification Souvenez-vous, il y quelques années je me réjouissais de la simplification de la procédure d’identification avec Open ID : La création de compte simplifiée avec OpenID. Depuis, les choses ont bien changé avec l’avènement des réseaux sociaux et leurs mécanismes de social login. Je veux bien croire que le fait de s’appuyer sur les profils des internautes permet de gagner du temps et d’augmenter le taux de conversion, mais de là à ne proposer que cette option comme Klout, c’est extrêmement gênant. Ce type de mécanisme d’identification fonctionne bien pour ceux qui ont un compte Facebook ou un profil Twitter, mais pour ceux qui en ont plusieurs, cela engendre des conflits insolubles (j’ai dû avoir recours au support technique pour me dépatouiller de ce bazar). Il n’est pourtant pas très compliqué de proposer deux systèmes d’identification : délégué (avec Facebook ou Twitter) et internalisé. C’est ce que proposent des services comme Spotify ou Storenvy, et ça fonctionne très bien.
Ergonomie et beauté des choses Introduction Cet article s'intéresse à l'esthétique des interfaces informatiques et à la vision que doit en avoir l'ergonome. Il constitue une sorte de plaidoyer pour la beauté des choses, pour elle-même mais aussi en ce qu'elle sert l'utilisabilité des interfaces. Chaque partie expose ainsi un argument allant dans le sens d'une plus grande considération de l'attrait visuel des interfaces. 1. On a largement démontré l'importance de la démarche ergonomique et les bénéfices que sa mise en œuvre est susceptible d'engendrer. Le seul travail sur l'utilisabilité n'assure en effet pas une qualité d'utilisation optimale. Nous développons des arguments afin d'arriver à ce que la collaboration entre ergonomes et designers se fasse dans le sens d'une discipline commune. 2. On a l'habitude de dire en ergonomie des interfaces que le produit se doit d'être utile et utilisable. Ceci est encore plus vrai dans le domaine du web grand public que dans le domaine professionnel. 3. 4. 5. 6. 7. 8. 9. Isen, A.
Exemple de test utilisateur sur le site seloger.com Responsive webdesign : adapter un site à toutes les résolutions Le Responsive webdesign (conception adaptative ou réactive en français) représente un ensemble de méthodes et techniques permettant d’universaliser un site Web. Qu’il soit consulté sur ordinateur, tablette, e-reader ou mobile, le site ainsi conçu s’adapte automatiquement à la taille de l’écran. Cette évolution très séduisante du Web pose néanmoins certaines questions d’ergonomie et oblige à repenser la conception des sites. Nous abordons dans cet article les objectifs du responsive design, les critères qui doivent décider à le mettre en œuvre, les recommandations de conception et les considérations techniques. Objectifs du responsive webdesign Pour commencer, rien de tel qu’une démonstration. Entrons dans le vif du sujet. Les sites Web sont aujourd’hui consultés sur une multitude d’appareils ayant des résolutions différentes Proposer une seule version du site Web censée s’adapter à tous ces terminaux est utopique. Le site ifttt n’est pas adaptable. Responsive ou versions séparées ?
Variables personnalisées Google Analytics Google Analytics est un puissant outil statistique, à condition de bien l'utiliser. Il est notamment possible d'y ajouter des variables personnalisées pour mieux segmenter et analyser le trafic. Mais comment installer ces customs variables, comment en ajouter plus de 5 et comment s'en servir efficacement ? Découvrez le guide des variables personnalisée d'Analytics ! A la base, ce post était dédié uniquement à l'ajout de plus de 5 variables personnalisée dans Google Analytics. Mais je me suis dit qu'il serait plus intéressant de faire un article complet sur la question. Les variables personnalisées Les customs variables de Google Analytics permettent d'affiner l'analyse de vos visiteurs, pour pouvoir ensuite agir efficacement sur votre site : ergonomie, graphismes, contenus, campagnes de liens sponsorisées, ... Ces variables personnalisées vont vous permettre de mieux comprendre comment les internautes naviguent sur votre site. 1 visiteur unique => 5 sessions => 42 pages vues. Recommandations
Innovations - Le responsive design: le nouveau visage d'Internet? Publié le 05 janvier 2012 Les usages digitaux évoluent et entrainent dans leurs sillages une prolifération des supports. Portables, tablettes, ordinateurs, netbooks ou smartphones, le défi à venir sera de pouvoir harmoniser cette démultiplication de l’écran. Eclairage par Dagobert dans sa dernière étude sur le sujet… Réponse concrète à la prolifération des formats d’écran, le responsive design, qui agite les spécialistes depuis quelques mois, est une approche radicalement novatrice dans la distribution de contenus et services en ligne. Aujourd’hui et depuis plusieurs années, les professionnels de la com et les consommateurs font face à la multiplication des terminaux: ordinateurs fixes, ordinateurs portables, smartphones aux tailles d'écrans variées, tablettes et bientôt téléviseurs connectés… Les résolutions et tailles d’écrans se font plus nombreuses, sans compter les différences et les nouvelles habitudes de lecture. Sylvain Bénémacher La suite de l'étude ci-dessous :
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
Le Responsive Design : un livre blanc pour comprendre la méthode | MiratechMiratech Le responsive design permet d’adapter le design d’un site web à tous types de terminaux : smartphone, ordinateur, télévision, tablette… Quels sont les principes à respecter pour réussir son site web en responsive design ? Quels sont les écueils à éviter ? Quelles sont les limites de la méthode ? Le livre blanc présente les guidelines illustrées des meilleures pratiques , ainsi que l’analyse d’un cas e-commerce concret. 47 pages pour saisir l’essentiel sur le responsive design ! Introduction Qu’est-ce que le « Responsive Design » ? Guidelines Les blocs de contenu Penser en bloc Conserver un ordre logique Adapter les blocs Les menus mobiles Présentation du menu en haut de page Menu en liste déroulante ‹select› Déploiement du menu « Toggle » Menu déroulant par la gauche Menu avec ancre vers le footer Menu uniquement dans le footer Supprimer l’accès au menu Les visuels Supprimer les visuels trop importants Adapter les icônes d’un site Les éléments cliquables Les fonctionnalités des terminaux mobiles
Les QR Codes révolutionnent les usages Générer du trafic en magasin, enrichir un support papier, récolter des données consommateurs... le QR Code s'impose de plus en plus dans les campagnes de marketing relationnel tant il s'avère d'une efficacité redoutable... si son usage est maîtrisé. "Parler de QR Code, c'est comprendre le lien que fait le consommateur entre un média essentiellement print (affiche, annonce presse, produit, PLV...) et un contenu mobile. En ce sens, cela relève d'un marketing consommateur global", déclare Bertrand Espitalier, directeur du développement et de la communication à l'agence Le Fil. Ils font désormais partie de notre quotidien. Les QR Codes, ces petits carrés à l'origine noir et blanc et désormais colorés, sont peu à peu en train de révolutionner les usages des consommateurs. En France, le taux de connaissance des QR Codes s'élève à 89% et leur taux d'utilisation à 53% (1), à tous les âges : ils sont 35% à être âgés entre 25 à 34 ans, 20% entre 35 et 44 ans, 16% entre 18 et 24 ans (6).
An Extensive Guide To Web Form Usability - Smashing UX Design Advertisement Contrary to what you may read, peppering your form with nice buttons, color and typography and plenty of jQuery plugins will not make it usable. Indeed, in doing so, you would be addressing (in an unstructured way) only one third of what constitutes form usability. In this article, we’ll provide practical guidelines that you can easily follow. Why Web Form Usability Is Important The ISO 9241 standard defines website usability as the “effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments.” Let’s clarify this last point by discussing the three main uses of forms. Uses of forms, based on Luke Wroblewski’s Web Form Design: Filling in the Blanks2. Thus, the relationship between forms and usability have two aspects: Forms can make a website usableor unusable, because they stand in the way of the user achieving their goal;Forms need to be usablein order to help the user achieve that goal. Aspect 1: The Relationship 1.
Ergonomie de la page d'accueil Introduction La page d'accueil est un des thèmes récurrents en ergonomie web. Son rôle capital en fait une des pages les plus analysées d'un site. Point d'entrée fréquent dans le site, elle est aussi celle qui témoigne du plus grand nombre de visites. Cet article présente les fonctions d'une page d'accueil ainsi que quelques règles simples à appliquer pour qu'elle soit utile et facile à utiliser. De plus, il existe beaucoup de recommandations valables pour l'ensemble d'un site web (en termes de cohérence, de lisibilité, de trouvabilité, de terminologie...), mais dont on ne parlera pas ici car elles ne concernent pas spécifiquement la page d'accueil. 1. On parle de "page d'accueil" pour désigner la principale page d'un site web, permettant l'accès aux autres pages du site et accessible par le nom de domaine. Une vraie page d'accueil est une page qui sert, qui présente de l'information et permet de naviguer. 2. 2.1. 2.2. 2.3. 3. 3.1. » Navigation » Information 3.2. 4. 4.1. 1. 2. 3. 4. 5. 6.
Ergolab Meaningful Transitions // Home Meaningful Transitions - Motion Graphics in the User Interface »Meaningful Transitions - Motion Graphics in the User Interface« deals with the use of animations in the user interface. It documents transitions in a clustered way to show at which point transitions can be a helpful extension to a static user interface, because of cognitive benefits to enhance the user experience. The purpose of Meaningful Transitions is to illustrate the process of the interaction and the structure of the user interface. »Does your animation have weight, depth and balance? Does your animation have weight, depth and balance? This Website was created in context of the Interface Design Bachelor's degree at the FH Potsdam 2011 by Johannes Tonollo. »Meaningful Transitions - Motion Graphics in the User Interface« deals with the use of animations in software user interface. Click to read »Meaningful Transitions - Motion Graphics in the User Interface« (Preview/German)
Ergonomie web illustrée