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

Like this? Share it with your network

Share

Webdesign, UX et UCD #3

on

  • 900 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
900
Views on SlideShare
900
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 #3 Presentation Transcript

  • 1. Février 2013a RITAteachingRelax In The Air3UX / Webdesign/ visual design
  • 2. workflow
  • 3. recherche personascontenu task modelarchitecture sitemapwireflow wireframeuser testing visual designintégration htmldév. backcontrôle qualitéstratégie
  • 4. Où sommes-nous?Pourquoi nous y sommes?Où aller?Comment y aller?stratégieworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 5. Brief créatif.Inspirer et stimuler avec saconnaissance de la marque.Accompagner le développement créatif.Maintenir le dialogue.Relax In The AirstratégieworkflowFévrier 2013Copyright© 2013 Relax In The Air
  • 6. personas
  • 7. les personas sontDes représentations devotre public cible baséessur la recherche et lesinterviews.Ces utilisateurs typesdonneront la directionpour la vision et le designd’une solution web.
  • 8. un persona de qualitédoit reposer sur de vraies personnes etun travail de recherche rigoureux
  • 9. et se concentre sur• les objectifs-clé que les groupesdoivent atteindre• Les comportements des utilisateurs
  • 10. doit vous permettre deComprendre si oui ou non vosdécisions vont aider l’utilisateur.
  • 11. • guide à chaque partie d’un projet• Document vivant (à un moment x)• Doit être mis à jour• outil stratégique > nouvelles opportunitésa tout momentquand le créer?personasRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 12. objectifs• Prendre des décisions de design• Rappeler que de vraies personnesvont utiliser votre produit
  • 13. • tâches à accomplir• comportements• état d’espritbasés sur...personasRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 14. • Descriptions courtes• se baser sur de vraies personnes• photographies descriptivesque communiquer?personasRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 15. anatomie du persona
  • 16. objectifs-cléQuels sont les objectifs del’utilisateur?Envies, besoins, attentesQuels sont les besoins et les attentesidentifés pour cet utilisateurobjectifs businessQuels objectifs veut atteindrel’entreprise avec cet utilisateur?freins & frustrationsQu’est-ce qui aujourd’hui freinel’utilisateur dans sa tâche?••••••Matériel à dispositioninformations personnellesProfessionLieuAge(ordinateur, tablette,smartphone...)••••••Nom client nom du projetPrénomgeekinessCapacités à utiliser le matérielScénario: décrire brièvement pourquoi cette et comment cette personne utiliserait votre produit
  • 17. techniquesInterviews poussées:• Parler à l’utilisateurCall Center/Service client/Helpdesk:• Récolter les feedback et des récurrencesRecherches ethnographiques•Observer l’utilisateur dans son environnementnaturel pendant qu’il utilise l’outil
  • 18. Mieux comprendre votre audience.Motivations.Réactions.Envies.butpersonasRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 19. • Buts et besoins de l’utilisateur deviennent le point defocus d’une équipe de design.• L’équipe peut se concentrer sur l’utilisateur.• Sont relativement facile à mettre en place.• Evite le piège de faire ce que l’utilisateur demande vs cequ’il va vraiment utiliser.• Les désaccords sur le design se règlent en faisantréférence aux personas.avantagespersonasRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 20. http://www.slideshare.net/toddwarfel/data-driven-personasliens utiles
  • 21. customer journey / experience map
  • 22. Montre ce que fait l’utilisateur et soncomportement à chaque étape d’une tâche.
  • 23. Destination! Date / heure! Prix! Confirmation!“Je ne cherche pasforcément le moins cher.C’est une combinaison dechoses.”!Départ!aéroport!Spécificités!Acheter tickets!“Un siège côtéhublot”!“Il y a peu d’aéroports d’oùje peux voler”!“Je suis flexible avec leshoraires, mais je ne veuxpas me lever trop tôt.”!“Normalement je ne veuxque le vol, mais je vaisregarder si on me proposedes spectaclesintéressants”!“J’imprimerai mon ticketjuste avant le départ.”!L’utilisateur doit pouvoir facilementbouger entre ces différentes optionsdans le but de prendre une décisionjuste et claire.!La personne n’est pas toujoursseule à ce stade de discussion!But: Booker un vol pas cher pour NYC en juillet
  • 24. But: un événement sur tous les fronts
  • 25. But: expérience de rail europe
  • 26. liens utileshttp://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-maphttp://www.servicedesigntools.org/tools/8http://www.uxmatters.com/mt/archives/2011/09/the-value-of-customer-journey-maps-a-ux-designers-personal-journey.php
  • 27. Content precedes design. Design in the absenceof content is not design, it’s decoration.____________________Jeffrey Zeldmancontenu
  • 28. Résoudre les problèmes structurels.Gérer l’espace.Communiquer du contenu.Apporter le sens au site.contenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 29. Au commencement était le chaoscontenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 30. EnumérerAnalyserSéparerRassemblerEnleverCréercontenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 31. Vos outils:contenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 32. contenu
  • 33. CatégorisercontenuworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 34. Content requirements for choosing a boutique dressHow do users want content presented:Photos – Large high quality photographs showing the front, back, detailing and a model shot. Copy – Clear and non-patronising. Users want to be reassured by the detailing, heritage and ethics.Summary of core needs:Pictures – What do the products look like? Price –Price, any applicable offers and easily accessibly delivery charges. Sizing and availability – What sizes are available and what are thedimensions of our sizing? Do they have my size? Delivery time – When will I get it?ID Page name What must users do?The core purpose of the page.What support do they need?Include quotes from research.Required elements and suggestionsExisting, new or amended assets.1 Homepage Easily be able to locate and select the dressescategory.If users have been to the site before they wantto get straight into the category listing,however in testing it was noted that users“may get side-tracked by other products on thehomepage”.New users will want to get a sense that thebrand offers the types of clothes they wouldbuy.Images of the latest seasons clothing.Sale and offer information.Clear navigation into the product categories.2 Category listing Easily select a product they like the look of. Colour, price and style are all necessary.An indication of available sizes is useful at thisstage, but can be omitted as long as it’s clearon the product page.“I just like looking through everything availableand clicking through to the dresses I like.”Photos that show the front and back of garments:Price and discount information.Alternate color, if applicable3 Product page Add the dress to their basket. Further images including details and modelshots. Sizing and availability. Delivery andreturns information.“I often buy two different sizes to try both, so Ineed to make sure it’s easy to send the one Idon’t want back”.Large (fullscreen) photos both on and off models.Detailed sizing guide with stock levels for each size and color.Delivery and returns information.Quantity and add to basket.Product description including material, detailing informationand the designer.
  • 35. architecture
  • 36. ____________________ErgolabTrouver un système dorganisation desinformations optimal, qui soit adapté auxtâches de recherche de lutilisateur.
  • 37. Hiérarchiser.Structurer.Faciliter l’activité cognitive.architectureworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 38. Vos outils:architectureworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 39. structure & hiérarchiearchitectureworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 40. sitemap
  • 41. ____________________MC CasalSans sitemap, tu peux toujours courir pour queje fasse ton site.
  • 42. Colonne vertébrale du site.Document de référenceincontournable.sitemapworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 43. Vos outils:sitemapworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 44. sitemapworkflowACCUEIL /HOMEPAGE:1_HOME_logged1_HOME_nologgedLOGIN PROCESS:1_HOME_nologged_process11_HOME_nologged_process21_HOME_nologged_process31_HOME_nologged_process41_HOME_nologged_process5DEAL DU JOUR / DEAL OF THE DAY2_DETAIL_ADEALS3_DEALS_actuelsMON COMPTE / MY ACCOUNTRECHERCHE / SEARCHDEAL DETAIL SOLD OUT5_DEALS_detail_SoldOutDEAL DETAIL5_DEALS_detailPROFILE11_MONCOMPTE_profil11_MONCOMPTE_profil_password11_MONCOMPTE_profil_password211_MONCOMPTE_profil_photo11_MONCOMPTE_profil_photo211_MONCOMPTE_profil_photo311_MONCOMPTE_profilWARNINGS111_MONCOMPTE_profilWARNINGS211_MONCOMPTE_profilWARNINGS311_MONCOMPTE_profilWARNINGS4CREDITS12_MONCOMPTE_credits12_MONCOMPTE_credits212_MONCOMPTE_credits3ACHATS / PURCHASE14_MONCOMPTE_payes16_MONCOMPTE_payes_detail15_MONCOMPTE_apayer17_MONCOMPTE_apayer_detail15_MONCOMPTE_apayer_payment15_MONCOMPTE_apayer_payment2BONS / VOUCHERSame structure thanpurchases (18, 19, 20)FOOTERTOPDEAL A PROPOS / ABOUT25_TOPDEAL_aboutCONTACT / 26JOBS / 27PRESSE / 28PARTENAIRES / PARTNERS SUBMIT DEAL24_PARTENAIRES_0124_PARTENAIRES_02CONFIRMATION PAGE24_PARTENAIRES_03INFORMATIONSFAQS21_FAQSCONDITIONS DUSE / 22CONFIDENTIALITE / 23IN CONTENT33_RECHERCHE_results2IN DEALS33_RECHERCHE_results1BASKETBASKET WITH OPTIONS MULTIPLE OPTIONS34_PANIER_B1a34_PANIER_B1b34_PANIER_B1cFORMULA34_PANIER_B2SIZE34_PANIER_B3COLOR34_PANIER_B4BASKET WITHOUT OPTIONSNOTIFICATION BASKET31_PANIER_A31_PANIER_BPAY (LOGGED)31_PANIER_C_logged31_PANIER_C_logged131_PANIER_C_logged231_PANIER_C_logged3PAY (NOT LOGGED)31_PANIER_C_nologged31_PANIER_C_nologged231_PANIER_C_nologged3©Copyright Relax In The Air 2013
  • 45. © Relax In The Air SàRL - 2012Sitemap2Deal du jourConfirmationCampaign Monitor1ACCUEILCompact version3Deals actuels /Anciens deals/Mon compte / 31Panier 8 7Sign Up 3033 9/Kids/Lifestyle/Voyage/Restaurants/Sport4High-Tech5Deal détail11Profil12Crédits15Achats14Payés16Payés détail15A payer17A payer détailSearchRésultats ErreurLogin NewsletterFiltres18Bons18A échanger19UtilisésFiltres20Expirés/ /TopDeal /Infos PartenairesFooter21FAQs22Conditions d’utilisation23Confidentialité25A propos26Contact27Jobs28Presse29Détail (modal window)24Proposer un deal34Taille...
  • 46. wireframe
  • 47. wireframe____________________WikipediaA website wireframe is a basic visual guide usedin interface design to suggest the structureof a website.
  • 48. Distribuer le contenuDéfinir la structureDéterminer les fonctionswireframeworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 49. ConceptualiserDéfinir la place de chaque éléments dans l’interfaceConcevoir la navigationCréer la référence visuelleOublier les problématiques esthétiqueswireframeworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 50. Vos outils:wireframeworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 51. Mike Rohde
  • 52. Définir les comportements.Charte d’interaction.wireframeworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 53. wireflow
  • 54. Créer les liens.Organisation interactive.wireflowworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 55. La MaisonLes pièces d’exceptionLes instruments d’écritureHaute EcritureLa Maison La MaisonLes pièces d’exception Les instruments d’écritureLa MaisonArtistes & professionnelsLoisirsLes Beaux ArtsMaisonLa MaisonArtistes & professionnelsLa MaisonHistoireSavoir-faireShopsContactsLa Maisonafdsdfasdfsdfasdfafadsfjalskdf alkdsfj lkajlakjdf alkdsjf lakdsjgokvokmcklmealk jaeiowvclkml cmaoie aomeoc-WIREFLOWSous-menu pastel / choix des différentspastelsSwitch entre les deux univers:Haute Ecriture & Beaux ArtsPastelsListe roulante de tous les produits dusous-menuCatégories: Pastels, Crayons de couleur,Pinceaux & PeinturesPastels
  • 56. 35CHOICE MENUWHAT’S NEW SHOWROOM SHOPWHAT’S NEW SHOWROOM SHOPSHOWROOM 2 SHOP 2SHOP 3WHAT’S NEW 2PHOTO VIEWDEPENDINGON NEWS...MY BASKET +MY PLANET FIRSTINFOS ABOUTPROJECTSSLIDESHOW FULL SCREEN
  • 57. user testing
  • 58. Permet de mettre à l’épreuve le travail déjàeffectué sur le produit et de faire lesajustements nécessaires.
  • 59. Nik, 32!Young professional!Loved the clarity ofthe site!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!Name, Age!Segment!Key thought!Previous experience!user testingworkflowRelax In The AirutilisateursFévrier 2013Copyright© 2013 Relax In The Air
  • 60. user testingworkflowprototypage
  • 61. user testingworkflowusability testing fonctionnel
  • 62. Client « Super créa, vraiment on aime beaucoup, parcontre ça respecte pas vraiment notre charte. »Nous « En même temps sans l’avoir vue… Vous pouveznous l’envoyer maintenant qu’on est votre agence. »Client « Non, elle sort pas d’ici. »visual designviedecom.com
  • 63. Couleurs.Typos.Formes.Images.Esthétique.visual designworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 64. Souci du détail.Exigence.Excellence.contrôle qualitéworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air
  • 65. contrôle qualité
  • 66. stratégiePersonasexp. map / customer journeycontenusitemapwireframewireflowdocumentsrésuméworkflowRelax In The AirFévrier 2013Copyright© 2013 Relax In The Air