Téléchargé parRelax In The Air
Webdesign, UX et UCD #3
Le document présente une stratégie de design web basée sur la recherche et les personas, qui sont des représentations des utilisateurs types pour guider le développement d'une solution web. Il décrit également les étapes de création de contenu et l'architecture d'un site, tout en soulignant l'importance des tests d'utilisateurs et de la qualité visuelle. Divers outils et méthodologies sont suggérés pour améliorer l'expérience utilisateur et rendre le processus de design plus efficace.
Webdesign, UX et UCD #3
- 1. Février 2013 a RITAteaching RelaxIn The Air 3UX / Webdesign / visual design
- 2.
- 3. recherche personas contenu taskmodel architecture sitemap wireflow wireframe user testing visual design intégration htmldév. back contrôle qualité stratégie
- 4. Où sommes-nous? Pourquoi nousy sommes? Où aller? Comment y aller? stratégie workflow Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 5. Brief créatif. Inspirer etstimuler avec sa connaissance de la marque. Accompagner le développement créatif. Maintenir le dialogue. Relax In The Air stratégie workflow Février 2013 Copyright© 2013 Relax In The Air
- 6.
- 7. les personas sont Desreprésentations de votre public cible basées sur la recherche et les interviews. Ces utilisateurs types donneront la direction pour la vision et le design d’une solution web.
- 8. un persona dequalité doit reposer sur de vraies personnes et un travail de recherche rigoureux
- 9. et se concentresur • les objectifs-clé que les groupes doivent atteindre • Les comportements des utilisateurs
- 10. doit vous permettrede Comprendre si oui ou non vos dé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és a tout moment quand le créer? personas Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 12. objectifs • Prendre desdécisions de design • Rappeler que de vraies personnes vont utiliser votre produit
- 13. • tâches àaccomplir • comportements • état d’esprit basés sur... personas Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 14. • Descriptions courtes •se baser sur de vraies personnes • photographies descriptives que communiquer? personas Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 15.
- 16. objectifs-clé Quels sont lesobjectifs de l’utilisateur? Envies, besoins, attentes Quels sont les besoins et les attentes identifés pour cet utilisateur objectifs business Quels objectifs veut atteindre l’entreprise avec cet utilisateur? freins & frustrations Qu’est-ce qui aujourd’hui freine l’utilisateur dans sa tâche? • • • • • •Matériel à disposition informations personnelles Profession Lieu Age (ordinateur, tablette, smartphone...) • • • • • • Nom client nom du projetPrénom geekiness Capacités à utiliser le matériel Scénario: décrire brièvement pourquoi cette et comment cette personne utiliserait votre produit
- 17. techniques Interviews poussées: • Parlerà l’utilisateur Call Center/Service client/Helpdesk: • Récolter les feedback et des récurrences Recherches ethnographiques •Observer l’utilisateur dans son environnement naturel pendant qu’il utilise l’outil
- 18. Mieux comprendre votreaudience. Motivations. Réactions. Envies. but personas Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 19. • Buts etbesoins de l’utilisateur deviennent le point de focus 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 ce qu’il va vraiment utiliser. • Les désaccords sur le design se règlent en faisant référence aux personas. avantages personas Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 20.
- 21. customer journey /experience map
- 22. Montre ce quefait l’utilisateur et son comportement à chaque étape d’une tâche.
- 23. Destination! Date /heure! Prix! Confirmation! “Je ne cherche pas forcément le moins cher. C’est une combinaison de choses.”! 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 les horaires, mais je ne veux pas me lever trop tôt.”! “Normalement je ne veux que le vol, mais je vais regarder si on me propose des spectacles intéressants”! “J’imprimerai mon ticket juste avant le départ.”! L’utilisateur doit pouvoir facilement bouger entre ces différentes options dans le but de prendre une décision juste et claire.! La personne n’est pas toujours seule à ce stade de discussion! But: Booker un vol pas cher pour NYC en juillet
- 24. But: un événementsur tous les fronts
- 25. But: expérience derail europe
- 26.
- 27. Content precedes design.Design in the absence of content is not design, it’s decoration. ____________________ Jeffrey Zeldman contenu
- 28. Résoudre les problèmesstructurels. Gérer l’espace. Communiquer du contenu. Apporter le sens au site. contenu workflow Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 29. Au commencement étaitle chaos contenu workflow Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 30. Enumérer Analyser Séparer Rassembler Enlever Créer contenu workflow Relax In TheAir Février 2013 Copyright© 2013 Relax In The Air
- 31. Vos outils: contenu workflow Relax InThe Air Février 2013 Copyright© 2013 Relax In The Air
- 32.
- 33. Catégoriser contenu workflow Relax In TheAir Février 2013 Copyright© 2013 Relax In The Air
- 34. Content requirements forchoosing a boutique dress How 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 the dimensions 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 suggestions Existing, new or amended assets. 1 Homepage Easily be able to locate and select the dresses category. If users have been to the site before they want to get straight into the category listing, however in testing it was noted that users “may get side-tracked by other products on the homepage”. New users will want to get a sense that the brand offers the types of clothes they would buy. 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 this stage, but can be omitted as long as it’s clear on the product page. “I just like looking through everything available and clicking through to the dresses I like.” Photos that show the front and back of garments: Price and discount information. Alternate color, if applicable 3 Product page Add the dress to their basket. Further images including details and model shots. Sizing and availability. Delivery and returns information. “I often buy two different sizes to try both, so I need to make sure it’s easy to send the one I don’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 information and the designer.
- 35.
- 36. ____________________ Ergolab Trouver un systèmed'organisation des informations optimal, qui soit adapté aux tâches de recherche de l'utilisateur.
- 38. Hiérarchiser. Structurer. Faciliter l’activité cognitive. architecture workflow RelaxIn The Air Février 2013 Copyright© 2013 Relax In The Air
- 39. Vos outils: architecture workflow Relax InThe Air Février 2013 Copyright© 2013 Relax In The Air
- 40. structure & hiérarchie architecture workflow RelaxIn The Air Février 2013 Copyright© 2013 Relax In The Air
- 41.
- 42. ____________________ MC Casal Sans sitemap,tu peux toujours courir pour que je fasse ton site.
- 43. Colonne vertébrale dusite. Document de référence incontournable. sitemap workflow Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 44. Vos outils: sitemap workflow Relax InThe Air Février 2013 Copyright© 2013 Relax In The Air
- 45. sitemap workflow ACCUEIL /HOMEPAGE: 1_HOME_logged 1_HOME_nologged LOGIN PROCESS: 1_HOME_nologged_process1 1_HOME_nologged_process2 1_HOME_nologged_process3 1_HOME_nologged_process4 1_HOME_nologged_process5 DEALDU JOUR / DEAL OF THE DAY 2_DETAIL_A DEALS 3_DEALS_actuels MON COMPTE / MY ACCOUNT RECHERCHE / SEARCH DEAL DETAIL SOLD OUT 5_DEALS_detail_SoldOut DEAL DETAIL 5_DEALS_detail PROFILE 11_MONCOMPTE_profil 11_MONCOMPTE_profil_password 11_MONCOMPTE_profil_password2 11_MONCOMPTE_profil_photo 11_MONCOMPTE_profil_photo2 11_MONCOMPTE_profil_photo3 11_MONCOMPTE_profilWARNINGS1 11_MONCOMPTE_profilWARNINGS2 11_MONCOMPTE_profilWARNINGS3 11_MONCOMPTE_profilWARNINGS4 CREDITS 12_MONCOMPTE_credits 12_MONCOMPTE_credits2 12_MONCOMPTE_credits3 ACHATS / PURCHASE 14_MONCOMPTE_payes 16_MONCOMPTE_payes_detail 15_MONCOMPTE_apayer 17_MONCOMPTE_apayer_detail 15_MONCOMPTE_apayer_payment 15_MONCOMPTE_apayer_payment2 BONS / VOUCHER Same structure than purchases (18, 19, 20) FOOTER TOPDEAL A PROPOS / ABOUT 25_TOPDEAL_about CONTACT / 26 JOBS / 27 PRESSE / 28 PARTENAIRES / PARTNERS SUBMIT DEAL 24_PARTENAIRES_01 24_PARTENAIRES_02 CONFIRMATION PAGE 24_PARTENAIRES_03 INFORMATIONS FAQS 21_FAQS CONDITIONS D'USE / 22 CONFIDENTIALITE / 23 IN CONTENT 33_RECHERCHE_results2 IN DEALS 33_RECHERCHE_results1 BASKET BASKET WITH OPTIONS MULTIPLE OPTIONS 34_PANIER_B1a 34_PANIER_B1b 34_PANIER_B1c FORMULA 34_PANIER_B2 SIZE 34_PANIER_B3 COLOR 34_PANIER_B4 BASKET WITHOUT OPTIONS NOTIFICATION BASKET 31_PANIER_A 31_PANIER_B PAY (LOGGED) 31_PANIER_C_logged 31_PANIER_C_logged1 31_PANIER_C_logged2 31_PANIER_C_logged3 PAY (NOT LOGGED) 31_PANIER_C_nologged 31_PANIER_C_nologged2 31_PANIER_C_nologged3 ©Copyright Relax In The Air 2013
- 46. © Relax InThe Air SàRL - 2012 Sitemap 2Deal du jour Confirmation Campaign Monitor 1ACCUEIL Compact version 3Deals actuels /Anciens deals/Mon compte / 31Panier 8 7Sign Up 30 33 9 /Kids /Lifestyle /Voyage /Restaurants /Sport 4High-Tech 5Deal détail 11Profil 12Crédits 15Achats 14Payés 16Payés détail 15A payer 17A payer détail Search Résultats Erreur Login Newsletter Filtres 18Bons 18A échanger 19Utilisés Filtres 20Expirés / /TopDeal /Infos Partenaires Footer 21FAQs 22Conditions d’utilisation 23Confidentialité 25A propos 26Contact 27Jobs 28Presse 29Détail (modal window) 24Proposer un deal 34Taille...
- 47.
- 48. wireframe ____________________ Wikipedia A website wireframeis a basic visual guide used in interface design to suggest the structure of a website.
- 49. Distribuer le contenu Définirla structure Déterminer les fonctions wireframe workflow Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 50. Conceptualiser Définir la placede chaque éléments dans l’interface Concevoir la navigation Créer la référence visuelle Oublier les problématiques esthétiques wireframe workflow Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 51. Vos outils: wireframe workflow Relax InThe Air Février 2013 Copyright© 2013 Relax In The Air
- 52.
- 54. Définir les comportements. Charted’interaction. wireframe workflow Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 57.
- 58. Créer les liens. Organisationinteractive. wireflow workflow Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 60. La Maison Les piècesd’exception Les instruments d’écriture Haute Ecriture La Maison La Maison Les pièces d’exception Les instruments d’écriture La Maison Artistes & professionnels Loisirs Les Beaux Arts Maison La Maison Artistes & professionnels La Maison Histoire Savoir-faire Shops Contacts La Maison afdsdfasdfsdfasdfa fadsfjalskdf alkdsfj lkaj lakjdf alkdsjf lakdsjgokv okmcklmealk jaeiowv clkml cmaoie aomeoc- WIREFLOW Sous-menu pastel / choix des différents pastels Switch entre les deux univers: Haute Ecriture & Beaux Arts Pastels Liste roulante de tous les produits du sous-menu Catégories: Pastels, Crayons de couleur, Pinceaux & Peintures Pastels
- 61. 35 CHOICE MENU WHAT’S NEWSHOWROOM SHOP WHAT’S NEW SHOWROOM SHOP SHOWROOM 2 SHOP 2 SHOP 3 WHAT’S NEW 2 PHOTO VIEW DEPENDING ON NEWS... MY BASKET + MY PLANET FIRST INFOS ABOUT PROJECTS SLIDESHOW FULL SCREEN
- 62.
- 63. Permet de mettreà l’épreuve le travail déjà effectué sur le produit et de faire les ajustements nécessaires.
- 65. Nik, 32! Young professional! Lovedthe clarity of the 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 testing workflow Relax In The Air utilisateurs Février 2013 Copyright© 2013 Relax In The Air
- 66.
- 67. user testing workflow usability testingfonctionnel
- 68. Client « Supercréa, vraiment on aime beaucoup, par contre ça respecte pas vraiment notre charte. » Nous « En même temps sans l’avoir vue… Vous pouvez nous l’envoyer maintenant qu’on est votre agence. » Client « Non, elle sort pas d’ici. » visual design viedecom.com
- 69. Couleurs. Typos. Formes. Images. Esthétique. visual design workflow Relax InThe Air Février 2013 Copyright© 2013 Relax In The Air
- 71. Souci du détail. Exigence. Excellence. contrôlequalité workflow Relax In The Air Février 2013 Copyright© 2013 Relax In The Air
- 72.
- 73. stratégie Personas exp. map /customer journey contenu sitemap wireframe wireflow documents résumé workflow Relax In The Air Février 2013 Copyright© 2013 Relax In The Air