Aluku Kusouka - Design

Holoptisme : les documents de design, esperanto des projets web ?

Oric — Fri, 03 Apr 2009 00:53:00 +0200

Depuis quelques temps, la question des livrables, en particulier les documents de design tel que les personas, les plans de site ou les wireframes, devient de plus en plus pertinente, quand il s'agit de faire communiquer et converger les différents métiers du web en un tout cohérent, un projet, un site web.

C'est par le biais d'un billet d'Elie Sloïm, que je viens de découvrir le terme "holoptisme" via l'interview en vidéo Jean-François Noubel : "C'est quoi l'Holoptisme ?" (Expérience à Paris le 12 juin 2009)

[...Dans le cadre d'un groupe, une équipe] en holoptisme, on est à la fois en souveraineté individuel, on est soit même, on est complètement unique, dans notre zone d'expertise, qui est unique, et en même temps on sert le tout. C'est à dire qu'il n'y a pas de contradiction entre le collectif et l'individuel.

Je sais quoi faire. Je peux être en création, je peux être en réaction. Je peux être moi même et en même je sais quoi faire parce que j ai accès au tout et le tout se configure en fonction de qui nous sommes les uns les autres dans notre souveraineté [...]

Dans le même temps, Jean François Noubel lui oppose le panoptisme.

Ce terme, désigne les organisations pyramidales, un peu à l'image de "Big Brother", source de contradictions, d'opposition entre l'intérêt individuel et l'intérêt collectif, majoritairement vécu dans les équipes projet, car chaque strate n'a qu'une vision partielle de l'ensemble.

Ainsi, dans ce contexte de groupe, on distingue deux paramètres : la direction collective et les moyens collectifs.

Replacé dans le contexte d'un projet de site web, en me référent à la déclinaison des documents de design proposé par Dan Brown dans "Developing Web Site Documentation for Design and Planning", on peut alors définir ces documents comme le langage de l'holoptisme qui permet à chaque participant de s'exprimer dans sa zone d'expertise et en même temps dans l'intérêt collectif.

User Needs Documents
- Personas
- Usability Test Plans
- Usability Reports
Strategy Documents
- Competitive Analyses
- Concept Models
- Content Inventories
Design Documents
- Site Maps
- User Flows
- Wireframes
- Screen Designs

Interaction design ou software design : le dilemme du designer

Oric — Wed, 04 Mar 2009 00:16:00 +0100

http://www.graphpaper.com/2009/02-11_are-we-designing-interactions-or-designing-software entame une réflexion autour de la place du designer et de ses compétences au regard d'un environnement technologique, en l'occurence, celui des applications web.

Toute la question réside dans le rapport entre le designer/l'interface utilisateur et le développeur/l'application (le code) qui lui permet de prendre corps.

En parallèle de la spécialisation de plus en plus marquée entre les métiers, il se dessine le besoin d'outils qui assurent la convergence de ces diverses compétences tout en assurant un niveau compétitif de productivité.

Les frameworks font parti de ces réponses dont les CMS, par exemple, sont une réponses à une problématique de production éditoriale.

Les plus modernes intègrent directement des solutions ergonomiques voire accessibles (dans une certaine mesure) et tout en restant dans un cadre applicatif défini, permettent aux designs de s'exprimer.

Ce qu'il y a de sain dans cette évolution, c'est que designer et développeur doivent apprendre à s'écouter et à trouver des compromis pour assurer la production d'applications de qualité dans un contexte rationnel.

C'est justement cette caractéristique rationnelle qui rapproche le designer web de son métier de designer. Et ça tombe bien puisque le développeur a besoin de s'appuyer sur des règles tangibles pour concevoir des applicatifs efficaces.

Paris Web 2008 : Ergonomie des interfaces riches

Oric — Wed, 24 Dec 2008 16:53:00 +0100

Amélie Boucher a ouvert cette première journée technique de Paris Web 2008 sur un constat récurrent en matière d'ergonomie : Technology changes, humans don't

Partant de ce constat, elle nous rappel que malgré l'engouement actuel pour les interfaces riches, les principes ergonomiques établis depuis bien longtemps restent d'actualité pour produire des interfaces dont la vocation reste in fine de transmettre un service à l'utilisateur.

Le message d'Amélie est donc en résumé "Oui, faites des interfaces riches (ou pas) mais faites les pour vos utilisateurs"

A travers différents exemples concrets et riche de son expérience tiré de nombreux tests utilisateurs, elle présente donc des interfaces riches en pointant du doigt leur intérêt et leurs lacunes. Elle nous montre que c'est parfois dans le détail que se cache le rendez-vous manqué entre les efforts techniques déployés pour intégrer une interface et son publique...Dans un contexte concurrentiel ces détails sont dramatiques car ils (les clients) peuvent aller ailleurs pour faire la même chose" !

Donc au programme :

Affordances
Feedback
Respect des habitudes tirées des applications offline
Accompagnement des utilisateurs
Tests utilisateurs
...

Je ne peux que vous conseiller de lire le livre très accessible d'Amélie "Ergonomie Web".

J'ai lu aussi récemment "Designing for interaction" de Dan Saffer un brin plus théorique, avec une partie sur le design de service plus que parlante.

Enfin, on ne peut que recommander le site de Jacob Nielsen "le Pape de l'ergonomie" pour sa richesse en terme d'études de grande envergure sur les utilisateurs dont la pertinence contredit parfois ce qu'on entend ici et là sur "c'est ergonomique !". Sa newsletter est bien pratique pour être un peu au jus de ces dernières publication.

La vidéo de la conférence d'Amélie Boucher

Loulou ? Loulou ?! Loulou ?!!!

Oric — Sun, 16 Nov 2008 10:44:00 +0100

Non, je ne suis pas aux cabinets, mais comme eux, je suis occupé (pas par Loulou...)

Contrairement à ce que je crois encore, on n'a pas toujours prise sur son temps (libre).

Les priorités (parfois discutables) sur le temps qui me reste après mes lo(oooooooooooo)ngues journées de travail du moment, a mis un petit coups de frein à la rédaction des cogitations qui se bousculent sous la peau de singe de votre serviteur (ouais il est tôt - ! - , je dis ce que je veux !).

J'ai tout de même entamé deux billets

Une série de réaction sur un billet qui présente l'intérêt des prototypes XHTML comme support pour le design web.
Une présentation de l'essai "Changements : paradoxes et psychothérapie" (P. Waztlawick, 1975), qui me servira de base pour de futurs billets

Un autre est à venir très rapidement, puisque mon agence, Actinext (Groupe AFG), a eu la bonté de me lâcher (dans la nature, pas les basques ;) ) pour assister aux deux journées de conférence de Paris Web 2008

Et vous ? Comment ça va ?

Jakob Nielsen : Bridging the Designer-User Gap

Oric — Wed, 08 Oct 2008 00:09:00 +0200

En essayant de rattrapper mon retard sur la lecture des articles de la newsletter de Jakob Nielsen, je suis tombé sur Bridging the Designer-User Gap (qui pourrait se traduire par "réduire le fossé entre l'utilisateur et le designer").

Summary:
Depending on how representative designers are of the target audience, a project might need more or less user testing. Still, usability concerns never go away completely.

En résumé, il décrit 3 cas qui induisent un espace allant de la petite faille à un gouffre entre utilisateur et designer lors du design d'un projet :

Le designer est l'utilisateur :
C'est le cas (le plus confortable) par exemple des projets open source designed by geeks, for geeks où le designer et l'utilisateur final partagent la même hyper-connaissance du domaine d'application. Pourtant, il lui faudra effectuer un minimum d'aller-retour pour recueillir des feedbacks et améliorer le design du projet initial.
Le designer comprend le produit :
L'article prend l'exemple du design d'un téléphone portable. Bien qu'il en utilise un lui même, le travail du designer sur un tel produit ne se résume pas à y intégrer sa seule expérience avec un téléphone portable. Il existe bien des utilisations que seule une série de tests utilisateur pertinents peut découvrir.
De plus, généralement, l'équipe de design est sur-compétente techniquement, ce qui l'empêche d'être impartiale dans la définition d'un produit qui doit toucher une audience non qualifiée.
Designer pour un domaine inconnu :
Le designer endosse le rôle du newbie et doit s'en remettre à l'expérience des experts d'un domaine qui lui est totalement inconnu. L'article suggère même le recrutement de personnes du métier pour découvrir comment elles travaillent, quelles sont leurs attentes etc... et travailler sur des prototypes papier pour tester les premières idées.

Dans tous les cas, on voit bien que le designer ne peut pas sortir un design de son chapeau magique. Il lui faut des données tangibles sur le produit et son environnement pour produire un design cohérent.
A méditer...

Faisez simple en image

Oric — Wed, 19 Mar 2008 00:34:00 +0000

La simplicité illustrée à l'ordre du jour introduite par http://www.qualitystreet.fr/?2007/10/09/64-simplicite-en-fait-tout-sexplique qui nous amène rapidement à http://headrush.typepad.com/ (franchement c'est long mais c'est tellement bon à lire - ya même des images pour ceux qui n'aiment pas lire ;) )

D'ailleurs, tiré de cet article voici un jeu "Qui est ce ?" parmi ces 3 profils :

Concentration / Déconcentration

Oric — Tue, 18 Mar 2008 00:39:00 +0000

Un petit billet qui enfonce le clou sur <blink> and Co

http://www.fredcavazza.net/2008/03/16/de-lart-de-deconcentrer-lattention-des-internautes/
Le plus simple c'est de tester la vidéo (ça dure 2min), un exemple vaut souvent un long discours

Le billet suivant parle des forums "ouvert"

Ca désigne juste une manière plus libre et plus constructive de mener des réflexions collectives http://www.qualitystreet.fr/?2008/03/15/106-pour-nos-rdv-internes-et-le-usability-day-2008-forum-ouvert-open-space-technology-allons-y

Billet d'actualité non ? :)

Dîtes le avec des mots

Oric — Tue, 04 Mar 2008 00:53:00 +0000

Ca commence par quelques bons billets collectés sur Superfiction

un livre qui décrit les métiers émergeants du design web sous forme de fiches. C'est téléchargeable en pdf pour 18 €
un billet sur les libellés des formulaires de recherche et les quelques détails qui compte pour éviter les echecs des utilisateurs. Quand on sait que c'est un des mode de navigation le plus utilisé pour trouver un produit ou une info dans les sites un peu touffu, on peut comprendre l'intérêt de porter une attention particulière à son implémentation...
un exemple de process d'achat tout-en-une-page qui évite de perdre les clients allergiques aux écrans qui s'enchainent interminablement :)

Et ça finit par un billet de Jakob Nielsen sur le wording des liens html à la lumière d'exemple récents. C'est parfois les petits détails qui changent tout ;)

Des livres et des tips

Oric — Mon, 03 Mar 2008 00:58:00 +0000

Dans la série "Je fais du business jusqu'au bout" voici une sélection de livres de Fred Cavazza qui mèlent Web design utilisateur et Marketing (je connaissais déjà de référence Web Design for ROI et Designing the Obvious). Les bouquins sont tous en Anglish pour reprendre les termes d'Aurélien ;)

Ensuite un petit lien à creuser (pas testé) relevé par Oliv' sur Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire

Enfin, un lien vers une petite référence XHTML pour bien savoir quoi mettre dans, dedans, avant et après les balises...

Simple comme...

Oric — Tue, 19 Feb 2008 20:43:00 +0000

Je vais essayer de suivre le fil conducteur de Fred Cavazza en vous listant une série d'articles récents qui, à n'en pas douter, prônent la simplicité pour cacher des choses complexes, un peu comme l'arbre cache la forêt...

http://www.fredcavazza.net/2008/01/10/connaissez-vous-la-simplexite/ pour commencer à définir encore une "porte ouverte" dans la façon de présenter à l'utilisateur des interfaçes complexes sans rebuter les débutants
http://www.fredcavazza.net/2008/01/13/est-ce-la-mode-des-menus-deroulant-riches/ après les bigs menus , Fred nous montres quelques exemples de menus déroulants contenants différents éléments comme des champs textes, des cases à cocher etc... J'aime assez celui de Monster. Ca peut paraître complexe, contrairement à ce que j'ai annoncé, mais je trouve là une solution élégante pour simplifier des formulaires de recherche notamment.
http://www.fredcavazza.net/2008/01/03/un-systeme-de-navigation-3-en-1-chez-burton/ si on le couple avec l'exemple du même article sur http://food.yahoo.com/ (que je n'aime pas particulièrement), on peut obtenir un mixe qui nous donne un fil d'ariane auquel on agrémente pour chaque niveau de navigation un menu déroulant contenant les options de même niveau. Je vois là une façon élégante (ça n'engage que moi :) ) de permettre à l'utilisateur de savoir où il est dans le site (fil d'ariane) en lui laissant la main sur la navigation sans pour autant prendre trop de place. A méditer.

http://www.fredcavazza.net/2008/01/10/est-ce-la-mode-des-blogs-minimalistes/ j'aime assez l'idée, à force de vouloir tout mettre au même endroit ça fait mal aux yeux !
Keep it simple, stubborn !
http://www.fredcavazza.net/2008/01/10/simple-et-efficace-n%c2%b08-la-tasse-avec-indicateurs-de-choix/ parce que vous le valez bien ;)

Du neuf avec du vieux !

Oric — Tue, 19 Feb 2008 01:13:00 +0000

C'est fou ce qu'on peut découvrir tous les jours sur internet, notamment des articles genre effet kisscool :
La première claque c'est la pertinance de l'article et la 2e c'est la date (genre 2006)...

Le point de départ c'est le blog css4design sur lequel je suis tombé après une recherche sur l'édition de design de formulaires (pas trouvé de choses révolutionnaires mais on peut jeter un coups d'oeil à ça comme point de départ).

Attention donc, voici une avalanche de sujets genre "Mais comment j'ai fait pour m'en passer !"

Attention donc, voici une avalanche de sujets genre "Mais comment j'ai fait pour m'en passer !" :

Design - Crea

Votre palette de couleurs avec Color Palette Generator : de cet article j'ai retenu Color Palette Generator qui propose de déterminer la palette de couleurs d'une image (il faut juste indiquer l'url) et Color Blend qui permet de déterminer des couleurs intermédiaires à partir de 2 couleurs dominantes

Créer le logo et la charte graphique de mon nouveau blog en 4 étapes s'appuie sur Quelques notes sur la conception d’une charte graphique (un article plus ancien qui a le mérite d'être relativement synthétique et de présenter quelques outils pratiques). De fil en aiguille on arrive sur La fin du design web (revisitée) (ancien mais reste pertinant encore aujourd'hui), en passant par Traduction : Les Principes du Design, pour finir sur De la granularité de l’information (plus dédié à l'architecture de l'information)

5 règles simples pour gérer l’affichage de votre texte dans vos mises en page qui présente quelques bonnes pratiques concernant la forme du texte dans les site web.
Un des commentaires associé au billet m'a conduit à découvrir 3 outils pour tester les polices en ligne :

http://typetester.maratz.com/ (le plus facile à utiliser)
http://www.fonttester.com/
http://www.korhoen.net/css_typeviewer.html

Design - CSS

Frameworks CSS + Reset CSS : design from scratch : tout comme les frameworks côté serveur (ie. Cakephp qu'on ne présente plus ;) ), il sagit d'environnements de dev dédiés aux CSS dont le but est de ne plus réinventer la roue à chaque projet. Je vous laisse le soin de lire les avantages/inconvénients listés dans l'article. Il présente également le principe du "Reset CSS" qui se traduit souvent par * {padding:0;margin:0} mais on apprend que ce n'est pas forcément une bonne pratique,il existent toutefois des alternatives ;)

Organiser ses feuilles de style CSS : tout comme l'article précédent l'introduit, au delà de l'architecture des fichiers CSS, il y a la structuration du code CSS lui même. L'article fait le point sur différentes pratiques

Smashing Magazine : des CSS plein les yeux : Noël 2006 et pleins de liens sur des exemples de design de formulaires CSS, polices, icones, et design web dans la hot du Père Noël

Accessibilité

Le billet http://www.neoma-interactive.com/2008/01/04/access-keyorg/ présente Access-Key un site né d'une collaboration entre 2 universités françaises et dédié à l'accessibilité des sites web. Pour une fois, ce site à le grand mérite de faire du concret en proposant des tutoriaux vidéo qui mettent en situation un handicapé visuel qui browse sur un site et présente ses contraintes...

D.U. Accessibilité du Web à Nice présente un Diplôme Universitaire datant de 2006 et forme à l'accessibilité des sites web. On peut donc en déduire que ce genre de profils va émergé progressivement sur le marché de l'emploi