• Save
Webdesign, UX et UCD #2
Upcoming SlideShare
Loading in...5
×
 

Webdesign, UX et UCD #2

on

  • 944 views

Cours de webdesign, UX et UCD. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela ...

Cours de webdesign, UX et UCD. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.

Statistics

Views

Total Views
944
Views on SlideShare
944
Embed Views
0

Actions

Likes
2
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Webdesign, UX et UCD #2 Webdesign, UX et UCD #2 Presentation Transcript

  • UX / Webdesign/ visual designFévrier 2013a RITAteachingRelax In The Air2
  • introduction
  • Life is hard, it’s harder if you’re stupid.____________________John Wayne
  • userexperiencebeatscorporate design© Relax In The Air 2013
  • interactionVSvisuel© Relax In The Air 2013
  • engagementVSbroadcast© Relax In The Air 2013
  • René Magritte
  • © Johan de Beer Product Design Student — Pretoria, South Africa
  • © http://www.scform.com
  • mission
  • Relax In The AirmissionFévrier 2013Copyright© 2012 Relax In The AirOrganisateurs de contenu.Concepteurs d’interactions.Créateurs d’émotions.VOUS ÊTES
  • interactiondesignVisualdesigntechnologie* cool webdesign*© Relax In The Air 2013
  • interactiondesignVisualdesigntechnologie* objectifs businessstratégie d’entrepriseBesoins utilisateurAttentes utilisateur*© Relax In The Air 2013
  • les 5 w
  • are you talking to?whoUtilisateur
  • whyMotivationis people coming?
  • whatContenuare you gonna show?
  • wheREContextare you gonna show it?
  • whenArchitectureare you gonna show it?
  • howInteractionare you gonna show it?
  • ANALYSERExigencesPersonasGouvernanceBudget COLLECTERAcquérirVersionsMetadataMANAGERRéviserAnalyserCorrigerPUBLIERAgrégerTransformerExpliquerhiérarchisermission© Relax In The Air 2013
  • responsabilité du designerCommuniquer des idées à travers l’organisation de mots etd’images.Organiser le chaos pour des expériences encore plus folles.
  • UCD - UTILISATEUR
  • Le design centré utilisateur est une méthodedans laquelle les besoins, les envies et leslimitations de l’utilisateur sont au centre duprocessus de design.Le UCD ne force pas l’utilisateur à changerson comportement pour s’adapter à un outil.
  • Le UCD est une méthode itérative qui metl’utilisateur au centre de toutesles décisions de design.quoi?ucdutilisateurRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • Le UCD est une philosophie de design renduepossible par une multitudes de disciplines etméthodes de design.quoi?ucdutilisateurRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • Le but ultime du UCD est d’optimiserl’expérience utilisateur d’un système,d’un outil ou d’un processus.BUTucdutilisateurRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • Le UCD cherche à atteindre ce buten considérant le point de vue de l’utilisateurdurant toutes les phases de développement.BUTucdutilisateurRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • InteractionMoiAutresEnvironnementEnseignementExpérience
  • Besoins et enviespoint de vue de l’utilisateur
  • Buts et motivationspoint de vue de l’utilisateur
  • Obstacles et limitationspoint de vue de l’utilisateur
  • Tâches et activitéspoint de vue de l’utilisateur
  • Géographie et langagepoint de vue de l’utilisateur
  • Environnement et matérielpoint de vue de l’utilisateur
  • Travail, vie et expériencepoint de vue de l’utilisateur
  • Remember happiness is a way to travelnot a destination.____________________Roy Goodman
  • Nous sommesavant toutdes animauxavec des émotions
  • Ecouter les retours
  • • La Recherche• L’architecture de Information• le design d’interaction• Le Visual Design• L’UsabilitydisciplinesucdutilisateurRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • • Interviews• Focus groups• Workshops• Brainstorm• Personas• Scénarios (task models)• Evaluation des concurrentsRelax In The Airméthodes de rechercheucdutilisateurFévrier 2013Copyright© 2012 Relax In The Air
  • • Storyboards• Croquis• Wireframe• Wireflow• Modélisation de navigation• Layout de pages• High/Low fidélité prototypes• Prototypes fonctionnelsRelax In The Airméthodes de conceptionucdutilisateurFévrier 2013Copyright© 2012 Relax In The Air
  • • Graphisme• Branding• IconographieRelax In The Airméthodes de designucdutilisateurFévrier 2013Copyright© 2012 Relax In The Air
  • • Usability evalution• Usability testing• Web analyticsRelax In The Airméthodes d’évaluationucdutilisateurFévrier 2013Copyright© 2012 Relax In The Air
  • • Augmenter les taux d’adoption• Améliorer la productivité utilisateur• Réduire les coûts de maintenanceRelax In The AiravantagesucdutilisateurFévrier 2013Copyright© 2012 Relax In The Air
  • résultatRetour sur investissement
  • le webdesigner
  • rôleUn project manager doit connaître le client.Un webdesigner doit le comprendre.____________________MC Casal
  • You can put the lipstick on the pigwhen I’m done____________________Some UX designer
  • Je suis jeune© Listoid.com
  • Résoudre des problèmesCréativitéEgo-lessUsabilityAccessibilitéSens de l’humourCross disciplinaritéRelax In The AircompétenceswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  • La créativité doit servir les projets de vos clients.Les projets ne doivent pas servir votre créativité.____________________MC Casal
  • • UX Designer• Web Architecte• User Interface Designer• Interactive / Digital Designer• DA Web• Visual DesignerRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  • Affectif RentabilitéVSUX designerRelax In The Airmétierswebdesigner____________________Don NormanQuand il était Vice President of theAdvanced Technology Group chez AppleFévrier 2013Copyright© 2012 Relax In The Air
  • Tout ce qui nécessite une interaction humaineComputer systems, voitures, avions, distributeurs de tickets, software design,user research, design industriel ou web design.StructureFeedbackSimplicitéToléranceVisibilitéRépétitionuser interface designerRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  • user interface designer
  • Créer les liens pertinentspour que l’organisation et les relationsentre les éléments d’un contenusoient compréhensiblesweb architecteRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  • web architecte
  • réaliser du design online et interactifinteractive / digital designerRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  • digital designer
  • Un peu styliste, un peu décorateur.Je suis un artiste, mais j’ai surtoutune excellente maîtrisedes fondamentaux du design,de la typographie etdes contraintes du web.visual designerRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  • visual designer
  • le couteau suisse du web designd.a. webRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  • d.a. web
  • UX & prototypage / / front dév.
  • webdesign
  • Le web design désigne la conception de linterface web :l’architecture interactionnelle, l’organisation despages, l’arborescence et la navigation dans le site web.Il s’agit d’une phase essentielle dans la conception d’untel site. La conception dun design web tient compte descontraintes spécifiques du support Internet, notammenten termes d’ergonomie, d’utilisabilité et d’accessibilité.
  • interactiondesignVisualdesign* cool webdesign*technologie© Relax In The Air 2013
  • Design is not justwhat it looks likeand feels like.Design is how itworks.____________________Steve Jobs
  • things used to be simple
  • but things got digital
  • Plus de libertéMeilleurs standardsplus de plateformesPlus mobileplus visuelet le futur?
  • introduction au designQUI?MC Casalobjectifsbusinessbesoinsutilisateursbrandguidelinescontraintes complexes
  • design is more strategic
  • and you’ll have to thinkand work more to make itmore and more simpleor be a genius like John lautner
  • webdesign• Philosophie• Allégorie de la maison• Objectifs
  • CollaborationDialogueIntégration de tous les acteursTravailler pour l’utilisateurConnaître les limitesphilosophiewebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • graphismesurfacewebdesignmécanique
  • designdans la contrainteTechnologie / Utilisateur / Marque
  • pouvoir deidéeDoit correspondre aux objectifs du client.1
  • pouvoir devertueDoit être invisible, mais avec une identité.2
  • pouvoir deutilitéDoit être utile et utilisable.3
  • pouvoir demesureDoit être mesurable et quantifiable.4
  • pouvoir deambitionDoit être de qualité. Souci du détail.5
  • pouvoir delanguageDoit avoir un discours clair et de la personnalité.6
  • allégorie de la maisonwebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • sexy happy website
  • crappy website
  • Délivrer une expérienceCall to actionCréer des contactsgénérer de l’engagementobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • Moins de temps pour les choixMoins d’effort mentalMoins de fréquence d’erreursutilisateurobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • • Considérez les couleurs des textes et backgrounds avec attention.• Soyez attentifs à la taille des éléments importants• N’utilisez pas de fonds flashy.• Utilisez des bons contrastes de couleurs.• Gardez à l’esprit que les typos avec serif sont plus lisibles.1) Rendre le site facile à lire3 règlesobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • 2) Rendre le site facile à naviguer3 règlesobjectifswebdesignRelax In The Air• Pensez à votre public cible• Les liens et call to action doivent être clairs et faciles à trouver.Février 2013Copyright© 2012 Relax In The Air
  • 3) Rendre le site cohérent3 règlesobjectifswebdesignRelax In The Air• Donnez une image professionnelle• Gardez une cohérence entre les typographies, images et couleurs.• Uniformité.Février 2013Copyright© 2012 Relax In The Air
  • Voilà ce que l’on croit... La réalitémythesobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • • Créez un centre d’intérêt qui attire l’attention.• Créez ordre et équilibre.• Etablissez des motifs pour guider l’utilisateur àtravers une composition.• Dans d’autres mots: RACONTEZ UNE HISTOIRE.hiérarchie visuelleobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • • Raconte l’histoire juste.• apporte la différence.• donne envie d’engager le dialogue.• donne de l’unité à votre site.Belle personnalitéobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • • Couleur (psychologie, chaud-froid, contraste...)• Typo (espace, style, tailles...)• images• formes• textures (sensations tactiles)Belle personnalitéobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • production
  • • Le client• Web design• Project management• intégration html / développement front• Développement back• Contrôle qualité• SEO / SEM• Stratégie digitale• ux / ui (expérience utilisateur / Interface utilisateur)du brief à la mise en ligneproductionRelax In The Air• RechercheFévrier 2013Copyright© 2012 Relax In The Air
  • Impliquez votre clientEt les décideurset ceux qui payentet les championset les sceptiquesClientdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • • Livraison du site• Publication du site• Technologie de développement ou CMS• Langues• Aspect et comportement du layout• Degré d’accessibilité• Public cible• Statistiques actuelles• Audit• Stratégie interne• Buts du site• Sites de référence• Concurrence• Durée de vie du site/app• Budget• Contraintes spécifiquesClientdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • www.theoatmeal.com/comics/design_hellClientdu brief à la mise en ligneproduction
  • le meilleur alliémais designer wannabeproject managementdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • clientsfromhell.netproject managementdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • Où sommes-nous?Pourquoi nous y sommes?Où aller?Comment y aller?stratégiedu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • marchétendancesconcurrencestatistiquesstratégie business ou produitstratégiedu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • Poser des hypothèsesqui doivent être vérifiées par la recherchestratégiedu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • stratégiedu brief à la mise en ligneproductionRelax In The AirQuelle estvotre stratégiegénérale?Commentfaites-vous del’argent?Dans quellesactivités avez-vousinvesti?Dans lesquellesne pas investir?Quelle est votredifférencecompétitive?Votre marchégrandit-il, seréduit-il ou est-ilstable?Quelles activitésse lancer?POSITION VALEUR ACTIVITESINTERNEEXTERNEFévrier 2013Copyright© 2012 Relax In The Air
  • darmano.typepad.comstratégiedu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • recherchedu brief à la mise en ligneproductionRelax In The Airinterviewsservice clientsS.A.V.Call centerobservationpersonasetudes existantesFévrier 2013Copyright© 2012 Relax In The Air
  • recherchedu brief à la mise en ligneproductionRelax In The AirObjectifsdu projetetObjectifsde larechercheIdentifier lesparticipantsetCréer uneméthodeCollecterles donnéesAnalyserles donnéesCommuniquerles résultatsFévrier 2013Copyright© 2012 Relax In The Air
  • ContenuArchitecturePrototypageExpérience utilisateurtests utilisateursUX / UIdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • UX / UIdu brief à la mise en ligneproduction
  • couleurstypographiesesthétiqueprofondeurgrilleinteractionswebdesigndu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • bestwebgallery.comwebdesigndu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • meilleur allié du webdesigner.travail main dans la main.Deux métiers qui se mélangent.Innovation Intégration Optimisation Accessibilitéintégration html / développement frontdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • www.smashingmagazine.comdu brief à la mise en ligneproductionRelax In The Airintégration html / développement frontFévrier 2013Copyright© 2012 Relax In The Air
  • Le prince des bases de données.Le roi du dynamisme côté client ou côté serveur.développement backdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • PHPasp .netSharepointJavaRubyiOS... etcdéveloppement backdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • « Mais c’est juste un pixel de décalage! »« Si moi je le vois, n’importe qui pourra le voir. »contrôle qualitédu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • don’t be goodbe better !
  • Search Engin Optimisation / MarketingUn site qui n’est pas référencé estcomme un roman policierrangé dans la section Entomologied’une bibliothèque municipale.seo / semdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  • where the f* is my website?seo / semdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air