(vs)+designers

développeurs

supporting interaction designers and promoting design benefits

200 membres‣ 5 % associations‣ 15 % étudiants ‣ 20 % annonceurs / agences‣ 60 % professionnels salariés ou indépendants

missions principale : définir et organiser les professions du design numérique

encourager le partage de bonnes pratiques à travers : workshops, conférences, Pecha Kucha + des publications + une communauté

supporting interaction designers and promoting design benefits

supporting interaction designers and promoting design benefits

tour de table :-)

Pourquoi maintenant ?

20 ans d’évolutions des interfaces web• d’un web line-mode (1989) aux interfaces riches• une grammaire de l’interaction de + en + complexe• le design interactif = davantage la représentation du comportement de l’interface que son aspect esthétique

Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-

out Custom Editing. Inline Text Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In Context Progress. Inline Status. Auto Complete.

Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip.

Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then Suggest. On Demand Refresh.

Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten

Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition. Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide

Transition. Rich Internet Object. Available. Selected. Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing. Popup Custom Editing. Slide-out Custom Editing. Inline Text Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In Context

Progress. Inline Status. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter. Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module -

Faceplate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation.

Validate Then Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules.

www.lukew.com

?qu’est-ce qu’undesigner • profession née dans les

années 30 (U.S.)• travaille sur les qualités formelles (= fonctionnelles+ esthétiques) des objets et des services (ICSID)

• large spectre d’expertises• fonctionnalisme vs ornementalisme (héritage du Bauhaus liens entre art et technologie)

• Le design est une activité créatrice dont le but est de présenter les multiples facettes de la qualité des objets, des procédés, des services et des systèmes dans lesquels ils sont intégrés au cours de leur cycle de vie. (International Council of Societies of Industrial Design - ICSID, citée par l’APCI)

?qu’est-ce qu’undesigner interactif

• traduit, équilibre les besoins utilisateurs et marketing en choix de conception et d’interface (comportement + représentation)

• formes immatérielles (web,

logiciels, services) ou matérielles (téléphones, PDA, ordinateurs, ambient devices)

?qu’est-ce qu’undesigner interactif

• “la revendication de la perfection de l’objet artisanal” (Brigitte Borja) vole en éclats• convergence(s) design industriel + design numérique

• design numérique : un outil et non un objet formellement fini (Etienne Mineur)• une logique de gabarits sans maîtrise du processus complet ou possibilité de contrôle

qu’est-ce qu’undéveloppeur web

• développeur front-office (interface graphique, HTML, CSS, JavaScript, JScript,

ActionScript) vs développeur back-office (programme interactions serveurs/BDD)

• traduit par la programmation le comportement de l’interface en interactions complexes

?

Quel processusde création• place des développeurs ?• place des designers ?• interactions entre eux ?

?

Quelle place pour le design dans un projet ?

• une intervention souvent en surface et en bout de chaîne : habillage graphique hérité de la démarche du logiciel (France = pays des arts déco.)

• le projet design souvent amorcé selon un angle techno ou marketing• un dialogue dev/designer rendu difficile par l’organisation du projet

http://www.internetactu.net/2005/06/16/innovation-et-internet-design-et-dveloppement-logiciel/

arts décoratifs : “entretenir en France la culture des arts qui poursuivent la réalisation du beau dans l'utile”

Quelle place pour le design dans un projet ?

0 investigation & recherche

1 conception

2 exploration /

design

3 intégration

4 développement

5 évaluation

> > > > >

• brief• recherche utilisateur

• architecture de l’information• maquettes fonctionnelles

• concept• design de l’interface (maquettes)• choix du style• déclinaisons• documentation

• intégration HTML/CSS• intégration/animation interface riche

• recettage

Comment réinventer le couple designer & développeur

?

Proposition 1

Proposition 1• les métiers du design numérique : une segmentation héritée de la terminologie de la pub qui a muté vers un dispositif + complexe

Proposition 1• une nouvelle approche du brief pour nourrir le creative hydra

• les développeurs intégrés à l’équipe de création> faciliter l’innovation> communiquer aux designers les opportunités offertes par la technologie

Proposition 1• avènement d’un processus de création non-linéaire [itératif]entre les designers & les développeurs

• la communication avec le développeur comme un livrable

Proposition 2l’hybridation du

devsigner

Proposition 2• un système de métiers évolutionniste> à travers l’histoire des interfaces graphiques (Web 1, 2...)> métiers de transition

• existe-t-il encore des groupes segmentés dev./designers ? Une addition de compétences

avec les “nouveaux usages” (pour ne pas nommer le Web 2.0), le développeur devient designer, le client devient designer...

Proposition 3l’outil comme interface développeur/designer

Proposition 3• Quelle est l’influence des outils ? • Comment les designers s’approprient-ils les outils technologiques ?

Quelle est lʼinfluence des outils ?Exemple dʼappropriation dʼoutils technologiques par les designers :

Proposition 3• effacer la dialectique du “techniquement faisable”• un processus plus itératif (The New Iteration, K. Januszewski & J. Rodriguez)

• Quel rôle pour l’intégrateur ?

des designers de plus en plus souvent amenés à créer leur propre code

Proposition 4

constitution d’une culture commune développeur/designer

Proposition 4

• culture = ensemble de références/valeurs communes

• à travers les livrables• à travers un imaginaire commun à développer

Proposition 4

imaginaire commun

= design d’interaction