background preloader

Ergo

Facebook Twitter

UX Design : définition. The Three Types of Formal Methods of Human Computer Interaction. "Formal methods" sounds kind of scary but it in reality it’s a way of saying; “the system with which we record ideas/information/etc.” and that’s rather less scary.

The Three Types of Formal Methods of Human Computer Interaction

In Human Computer Interaction (HCI) there are a multitude of formal methods, in use, to record ideas and other types of information. Today, we’ll take a look at the three main types of formal method and then we may look at the methods themselves in more detail in another article at a later date. The Three Types of Formal Methods for HCI Users It perhaps comes as no surprise that there are formal methods dedicated to capturing what goes on at the user-level. What may come as a bit of a surprise is there are no commonly used formal methods for dealing with groups of users at higher levels.

Systems If you have a formal method for documenting the user’s approach to a product; you also need a method for documenting the system level too. World In Combination. 5 things digital marketers should know about user experience. 40 Free Mockup Templates to Present Your UI Designs. Gesturecons - Icons For Multi-Touch Interfaces. UI, UX mobile, où trouver l'inspiration ? Concevoir des interfaces adaptées à vos smartphones et tablettes demande une connaissance toute particulière de l’ergonomie de ces écrans réduits.

UI, UX mobile, où trouver l'inspiration ?

Pour commencer un projet sur de bonnes bases, découvrez une liste de ressources indispensables. Le plus efficace : expérimentez ! La meilleure source d’inspiration est encore votre propre smartphone ou tablette. Télécharger des applications, surfer sur le web, partager, expérimenter, rien de tel pour être immergé dans une interface mobile. Si vous utilisez un smartphone Android, des sites comme AppBrain ou tout simplement des sites d’actualités comme FrAndroid vous permettrons de trouver les dernières applications tendances.

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.

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

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.

Selon Forrester, en 2017, 42% des internautes européens auront une tablette tactile. Je partage > Le cabinet d’étude Forrester a rendu public une étude sur ses estimations de ventes des tablettes pour le grand public et les entreprises.

Selon Forrester, en 2017, 42% des internautes européens auront une tablette tactile

Dans une nouvelle étude paru en ce début du mois d’août, le cabinet d’analyse Forrester estime qu’en 2017 : 60% des internautes nord-américains (USA/Canada) posséderont une tablette, ce qui en ferait leur appareil de navigation internet principal. 42% des internautes européens en posséderont une aussi. Pour les pays émergents , seulement 25% des internautes auront une tablette.Le total des ventes de tablettes dans le monde devrait atteindre 381 millions d’unités vendues, dont 18% achetées par les entreprises.905 millions de tablettes seront alors en utilisation dans les foyers mondiaux.

7 Killer User Interface Designs For Gestures. Réduire les temps de chargement web mobile : comment et pourquoi? Fasterize vient de publier son livre blanc intitulé : « Stratégies marketing : les dessous de la performance web » dans le but de démocratiser les temps de chargement des pages web et rendre ce sujet accessible et réconcilier les équipes marketing et techniques.

Réduire les temps de chargement web mobile : comment et pourquoi?

L’occasion pour moi de vous présenter ce livre blanc avec un focus porté sur le web mobile. Plusieurs études le démontrent : les internautes n’aiment pas attendre pour avoir accès au contenu d’un site internet. En effet, ils seraient près de 49% à quitter un site sur lequel ils rencontrent des problèmes de chargement durant une transaction et près de 88% à ne pas revenir suite à cela. 7 fausses idées sur le Responsive Web Design. 24 jours de web : Le calendrier de l'avent des gens qui font le web d'après. Les boutons de validation en voie de disparition ?![ Usaddict: Ressources sur l’ergonomie des interfaces (le blog Usabilis)]

Sur l'impulsion du Web riche et du mobile (téléphones et tablettes) on voit disparaître des boutons permettant de confirmer une action….

Les boutons de validation en voie de disparition ?![ Usaddict: Ressources sur l’ergonomie des interfaces (le blog Usabilis)]

Quel sont les avantages de cette disparition ? Alléger l’interface ? Diminuer le nombre de clics ? Nous vous proposons de faire un point sur quelques cas concrets qui nous montrent, à des degrés différents, l’obsolescence du bouton de validation. Pour comprendre l’enjeu de la disparition des boutons de validation, voici quelques règles d’usage extraites de notre livre Ergonomie des interfaces : Employer les boutons pour les commandes fréquemment utilisées.Préciser l'intitulé de la commande en toutes lettres dans l'étiquette du bouton. La disparition de ce petit composant est donc une problématique intéressante puisqu’elle touche à différents aspects ergonomiques. Valider un champ de saisie. Optimiser l'ergonomie des formulaires web. Les formulaires sont très fréquents sur les sites web et parfois complètement incompréhensible.

Optimiser l'ergonomie des formulaires web

Il existe une multitudes d'astuces pour améliorer la compréhension de ceux-ci, éviter que les utilisateurs fassent des erreurs et optimiser le durée nécessaire pour les remplir. Cet article présente plus de 60 astuces et recommandations avec des explications. Structurer le formulaire. IHM, Ergonomie & expérience utilisateur. UX – Ergonomie. Difficile de passer à côté du phénomène Twitter Bootstrap, cet ensemble d’outils CSS JS et UI pour créer des interfaces web-app en moins de deux.

UX – Ergonomie

Il doit notamment sa renommée à sa gestion du responsive qui propose deux grilles css dont une entièrement gérée en unités relatives. C’est un framework de création d’interfaces web avancées tout comme « Zurb Foundation », ou le nouveau framework « Pure ». Le beau et l’utilisable. Le beau et l’utilisable sont souvent deux notions qui sont mises en opposition quand on fait du Web, certains voudraient du « Wahou » d’autres que ça soit simplement utilisable au quotidien.

Le beau et l’utilisable

Pour situer le contexte, la notion de beauté qui nous intéresse est celle que perçoit l’utilisateur et non une notion de beauté universelle ni même ce qu’en pense le graphiste ou le directeur artistiques qui l’ont conçue. C’est bien du point de vue de l’utilisateur final dont je vais vous parler. De même, l’utilisabilité ou l’ergonomie n’est pas universelle, elle se définit pour un utilisateur (ou une population d’utilisateurs) dans un contexte donné pour une tâche en particulier. Ergonomy / UX. Règles d’or en Ergonomie Web : Toujours le bon choix ? (la suite) Comme promis voici la seconde partie du mini dossier consacré aux règles d’or en ergonomie web.

Règles d’or en Ergonomie Web : Toujours le bon choix ? (la suite)

Rappelons que l’objectif est de prendre quelques règles d’ergonomie parmi les plus citées et considérées comme « universelles » et de voir si dans la pratique ces recommandations sont toujours valides ou non… Dans la première partie j’avais abordé la loi de Miller, la règle des 3 clics et la loi de Pareto. Règles d’or en Ergonomie Web : Toujours le bon choix ? La professionnalisation des sites web a mis en évidence l’importance de l’ergonomie et des concepts d’expérience utilisateur et d’architecture de l’information.

Ergonomy / UX. Usaddict: Ressources sur l’ergonomie des interfaces (le blog Usabilis) Ergognome. [ws] Color Scheme Generator 2. Napkee - make your mockups come alive. Mockingbird - Untitled.

MockFlow: Online Wireframe Tool. Home - Pencil Project. Mockups. Take a second. Let it sink in. The first impression might be disorienting. Liste de 18 outils pour prototyper des maquettes. 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). Maqetta.

Color Hunter. 52 semaines pour une ergonomie web parfaite - Le livre blancPoule Design. Et si on vous donnait la possibilité en une année de mieux comprendre les besoins ergonomiques de votre site web ? Votre réponse : quand est ce qu’on commence ? Justement cette semaine, Poule design vous divulge ses premiers petits secrets. Non non, ce n’est pas la dernière recette miracle de l’été pour perdre du poids, ni un subterfuge pour vous faire acheter le nouveau produit phare de la saison ! Rien de tout ça ! Mais bien des kilos de plumes et d’infos, le tout concentré en une poule à croquer ! Poule design se dévoile et vous propose une série de conseils résumés dans un livre qui vous permet d’optimiser au mieux vos pages web et l’ensemble de votre site e-commerce. Landing page : comment réussir toutes vos landing pages. Avez-vous déjà créé des landing pages pour vos services et produits ?

Les sociétés qui y ont recours augmentent considérablement le ROI de leurs campagnes, leur référencement naturel, ainsi que le nombre de leads générés. A condition, bien sûr, de bien optimiser chaque landing page… 8 recommandations pour un meilleur effet parallaxe [Usaddict] Depuis quelques années, une nouvelle tendance s'est invitée dans la navigation web. Cette tendance relativement récente, mais qui commence néanmoins à faire grand bruit dans le monde du web design, pose la question de l'expérience utilisateur pouvant être associée à cette nouvelle forme de navigation. Avant tout, qu'est-ce qu'un effet de parallaxe ? En conception informatique, les effets de parallaxe consistent à séparer les éléments visuels de l'arrière-plan de ceux de l'avant-plan et à les faire défiler à des vitesses différentes permettant de créer l'illusion d'une navigation en 3D. De manière plus concrète, les effets de parallaxe sont une superposition de calques qui défilent à vitesses différentes.

Effet de parallaxe et expérience utilisateur. L'importance des espaces blancs dans le design. Les espaces blancs (ou White-Space en anglais), aussi appelé "espaces vides", consistent à aérer des éléments afin de les mettre en avant et les valoriser. Découvrons pourquoi ces espaces jouent un rôle clé dans l'élaboration de votre design. « Less is more » (moins c’est plus) disait Mies van der Rohe, architecte grandement inspiré par le minimalisme et le modernisme.

Ces espaces trop souvent mal aimés Pour un designer, vendre du vide est toujours mission impossible, car les espaces blancs sont généralement considérés comme du « gaspillage d’espace précieux » qu’il faut absolument remplir avec quelque chose, peu importe quoi, tant que ça ne fasse pas « vide ». L’importance de ces espaces blancs est presque toujours négligé, alors qu’ils sont indispensables.

Etude sur la compréhension des icônes. Bibliothèques d’icones pour le Web et les applications[ Usaddict: Ressources sur l’ergonomie des interfaces (le blog Usabilis)] Zooming in on the Customer Experience. Content Square, l'optimisation Web et mobile en temps réel. Ergonomie : le scroll augmente, l'importance du premier écran baisse.

The Fold Manifesto: Why the Page Fold Still Matters. Vidéos - Histoires de l'ergonomie - Canal-U.