UX methode-paris web

* CONCEVOIR POUR L’EXPERIENCE UTILISATEUR RÉVISION POUR TOUS

QUEL EST VOTRE PROCESS DE CONCEPTION ? DESIGN Panique non Validation oui Livré en Client retard INSPIRÉ PAR : smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/

Design Contenu UX/IA Business Technologie

Design Forme Contenu Fond Objectif Business Fonction Technologie

5 NIVEAUX 1. DECOUVERTE 2. CONCEPT 3. ORGANISATION 4. DESIGN 5. MANAGEMENT DE PRODUCTION

*1 DECOUVERTE

Recherches Utilisateurs - Sources: metrics, analyses... - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE

Recherches Utilisateurs - Sources: metrics, analyses... - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Audit - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...

Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Audit - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...

Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif + Qualitatif DÉCOUVERTE Benchmark - Collecte, capture, Audit veille appliquée - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...

Recherches Modèles Utilisateurs Utilisateurs - Segments: marché - Personas: comportements - Sources: metrics, analyses... - Scénario d’usage: outil conceptuel - Recherches: ethnographie... Quantitatif GRILLE DE SYNTHÈSE + Qualitatif DÉCOUVERTE Benchmark - Collecte, capture, Audit veille appliquée - Sources: contenus, experience Business analyst - Besoins: audit, demande... - Equipe: capacité, organisation...

* 2 CONCEPT

“IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT

“IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT source: http://www.learninglab.jumpassociates.com/?p=113

“IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT source: adaptive path

“IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT source: http://weizhou.wordpress.com/2008/07/07/prototype/

“IdeatioD’IDÉES GENERATION n” - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT

“IdeatioD’IDÉES n” GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) - C’estner la boite - Desig - ... CONCEPT

Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides

Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS

Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION Principes: - générer pasplusmauvaisespossible le d’idées Modélisation - iparticipaants: de trop, ni trop peu l n’y idées Stratégie des Stratégie - prendre toutnien note contenus Fonctionnelle - Méthode: CONCEPT + modèles hybrides - Usages/Objectifs Business - avant-pendant-après l (pour mon persona) - c’estner lalaboite d’accuei quoi page - desig ons - questi - ... Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS + schémas....

Stratégie “IdeatioD’IDÉES n” d’ensemble GENERATION - Diviser par questi/ons ence - Scénaritelling / boarding o d’usage d’expéri Modélisation - Storyquoi la page d’accueil (par persona) Stratégie des Stratégie - C’estner la boite - Desig contenus Fonctionnelle - ... CONCEPT + modèles hybrides Visualisation Principes: - Construirerapidementd’ensemble une vision - Visualiser Méthode: CROQUIS

*3 ORGANISATION

Périmoètre foncti nnel Definition des fonctions, des formats, des principes d’interaction... ORGANISATION

Périmoètre foncti nnel Definition des fonctions, des formats, des principes d’interaction... ORGANISATION Objectifs: - lister rles fonctions ent - obteniun un accord cli - fairmatiobudgetproduction e esti n de et une

Périmoètre foncti nnel Definition des fonctions, Management des Contenus des formats, des principes d’interaction... Tableau Matrice des de page ORGANISATION contenus

Périmoètre foncti nnel Definition des fonctions, Management des Contenus des formats, des principes d’interaction... Tableau Matrice des de page ORGANISATION contenus Structure Plan de site Arborescence Logique Méthode: Méthode: d’ensemble -Vue détaillée tableur schéma -Nommage ou arbre -Références

* 4 DESIGN

Desiognnel foncti n Shémas de Flux structure` logiques (wireframes) DESIGN

Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets

Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets Prototype

Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets Prototype Basse définition - Papier - Balsamiq

Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets Prototype Basse Moyenne définition définition - Papier - Wiqruables cli eframes - Balsamiq - Demo client Flash ou autre

Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets Prototype Basse Moyenne Haute définition définition définition - Papier - Wiqruables - Prototype de cli eframes développement - Balsamiq - Demo client HTML/CSS/DOM ou FLASH Flash ou autre

Desiognnel foncti n d Design on ,interacti Shémas de Flux Charte Comportements d’interaction structure` logiques (wireframes) DESIGN des objets Prototype Interface Basse Moyenne Haute définition définition définition Lisibilité Composants (technologie) (fond) - Papier - Wiqruables - Prototype de cli eframes développement Grille Navigation - Balsamiq - Demo client HTML/CSS/DOM (forme) (fonction) ou FLASH Flash ou autre

* 5 MANAGEMENT DE PRODUCTION

Specifications Production Production Specifications Fonctionnelles graphique de contenus techniques MANAGEMENT DE PRODUCTION

Specifications Production Production Specifications Fonctionnelles graphique de contenus techniques MANAGEMENT DE PRODUCTION PRODUCTION DES SHEMAS DE STRUCTURE (WIREFRAMES) - a fairefier STATUS - a modi - validé

Specifications Production Production Specifications Fonctionnelles graphique de contenus techniques MANAGEMENT DE PRODUCTION PRODUCTION GABARITS & OBJETS DES SHEMAS DE Objectifs: STRUCTURE (WIREFRAMES) - Ratimnalisle développement o er les gabarits - Opti iser - a fairefier Modélisation Description des STATUS - a modi de l’organisation composants - validé des gabarits

Specifications Production Production Specifications Fonctionnelles graphique de contenus techniques architecte n d’informatio chef de ITÉRATION projet designer d’interface MANAGEMENT DE PRODUCTION PRODUCTION GABARITS & OBJETS DES SHEMAS DE Objectifs: STRUCTURE (WIREFRAMES) - Ratimnalisle développement o er les gabarits - Opti iser - a fairefier Modélisation Description des STATUS - a modi de l’organisation composants - validé des gabarits

* Conclusion

AGILITÉ DU PROCESSUS Découverte Concept Organisation Design Production Niveau d’engagement Niveau d’engagement Degrés de définition Inspiré par UX Matters: http://tiny.cc/ux-process-source

AGILITÉ DU PROCESSUS Découverte Concept Organisation Design Production Niveau d’engagement Niveau d’engagement ITERATIONS Degrés de définition - Recherches - “Ideation” - Périmètre - Schémas de structure - Specifications utilisateurs - Esquisses fonctionnel fonctionelles - Personas - Management des - Flux logiques - Production graphique - Modélisation de la contenus - Rédaction - benchmark stratégie editoriale fonctionnelle - Production de compétitif et et fonctionnelle - Structure de site contenus fonctionnel - Réalisation de prototype Inspiré par UX Matters: http://tiny.cc/ux-process-source

* Discutons sur.. @activeside #parisweb linkedin.com/in/mingasson slideshare.net/activeside design.activeside.net

http://www.paris-web.fr	705
http://www.levidepoches.fr	92
http://www.sabinedufaux.com	54
http://w.illi.am	40
http://www.levidepoches.blogs.com	20
http://blog.w.illi.am	15
http://levidepoches.blogs.com	10
http://bclavel.tumblr.com	6
url_unknown	4
http://feedthefox.net	3
http://www.slideshare.net	3
http://demo.etienner.fr	3
http://www.tumblr.com	1

UX methode-paris web

by Matthieu Mingasson on Oct 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

13 Embeds 956

Statistics

UX methode-paris web — Presentation Transcript