[atelier Frenchweb] Tester efficacement son site Responsive design
-
Upload
stardusttesting -
Category
Software
-
view
6.740 -
download
5
description
Transcript of [atelier Frenchweb] Tester efficacement son site Responsive design
![Page 1: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/1.jpg)
27 MARS I ATELIER FRENCHWEB : COMMENT TESTER EFFICACEMENT SON SITE RESPONSIVE ?
![Page 2: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/2.jpg)
DE QUOI NOUS NE PARLERONS PAS ? ?
! Pourquoi développer un site Responsive Design?
! Faut-il un site Responsive ou un site Optimisé ?
! Comment fonctionne le Responsive Design ?
! Comment concevoir un site Responsive Design ?
! Comment développer un site Responsive Design ?
![Page 3: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/3.jpg)
DE QUOI VA-T-ON PARLER AUJOURD’HUI ? ?
! Les enjeux du test
! Les spécificités du test Responsive Design
! Concevoir son échantillon de configurations de test
! Comment organiser ses tests ?
! Quels tests? Quelles étapes? Quels outils ?
! Quels efforts prévoir en maintenance ?
![Page 4: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/4.jpg)
StarDust est une société franco-canadienne spécialisée dans la validation de sites internet et applications mobiles. Nous offrons à nos clients des services de tests de leurs solutions digitales permettant de réduire les risques, améliorer les performances et promouvoir un développement pérenne.
NOTRE ACTIVITÉ
MÉTIER
CHASSEUR DE BUGS
![Page 5: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/5.jpg)
CARTE D’IDENTITÉ STARDUST
tests effectués
25 000 bugs remontés
150 plans de test écrits
650 000
160 projets
PRODUCTION 2013
1 nouvel écran acheté/jour
1800 écrans
132 versions d’OS différentes
71 résolutions différentes
professionnels du test
25 PRO-JETS
Exp. moyenne par testeur
100 %
< 10% Turn over annuel
Geeks 100 %
LABORATOIRE ÉQUIPE DE TEST
ans d’ancienneté
120% Croissance 2013
Fidélité Client 90%
3 150 clients
LA SOCIÉTÉ
![Page 6: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/6.jpg)
RÉFÉRENCES
§ ACCOR SA § AD4SCREEN § ADL PARTNERS § AEDIAN § AFNIC § AIRWEB § AXA § BACKELITE § BEEAD § BEEZIK § BNP PARIBAS § BOUYGUES TELECOM § CANALPLUS OVERSEAS § CAISSE D’EPARGNE
§ CITADIUM § CITROEN § CREDIT AGRICOLE § DIGITICK § e-TF1 § EKINO § GFI § HSBC FRANCE § ISOBAR § KEYNOTE § L’EQUIPE § LA FRANCAISE DES JEUX § LA REDOUTE § LAST MINUTE
§ LE FIGARO § LE POINT.FR § LECLERC DRIVE § LEGRAND § LEKIOSQUE § LEROY MERLIN § LOGITECH § MAIF § MAZARINE DIGITAL § NESPRESSO § NETSIZE § NOVEDIA AGENCY § ORANGE LAB § PAGES JAUNES
§ PARKEON § PMU § RADIO FRANCE § RTL § SANOFI § SOCIETE GENERALE § SOFIALYS § UBISOFT § USERADGENTS § VENTE PRIVEE § VIADEO § VIAMICHELIN § VISUA MOBILE § VOYAGE PRIVÉ § VOYAGES SNCF.COM
![Page 7: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/7.jpg)
NOS OFFRES
MY TESTING LAB
Prenez les rênes du centre de test StarDust
LABEL STARDUST
Associez-vous à un tiers de confiance reconnu
GO TO MARKET TESTING
Faîtes-nous tester vos services avant de les lancer
! Simplicité : à joindre à vos offres
commerciales
! Transparence : votre capacité à délivrer
! Efficacité : focus sur votre cœur de métier
! Sécurité financière : réduction du nombre
de correctifs suite à la mise en prod
! Simplicité : accompagnement global
! Sécurité budgétaire : maîtrise des coûts
! Adaptabilité : sur mesure / intégration des
outils du client
! Productivité : recours à une société de
service dont c’est le cœur de métier
! Flexibilité : ressources à disposition
! Réactivité : délais courts
! Souplesse administrative : formule
d’abonnement
! Efficacité : accès direct à un parc de 1800
terminaux et sollicitation des testeurs
![Page 8: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/8.jpg)
MULTIPLICITÉ, DIVERSITÉ, ÉVOLUTION permanente
des terminaux et des OS
POURQUOI FAIRE DU TEST ?
PROBLÈMES récurrents
FREEZE
LAG CRASH
70% des mobinautes
suppriment immédiatement
une application jugée instable
Jusqu’à 10%
DU CA sécurisé
![Page 9: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/9.jpg)
QUELQUES CHIFFRES
17% du trafic mondial vient du mobile 40% des achats du Black Friday réalisé depuis un mobile 1,2 Mds d’humains accèdent au Web via mobile 48% des utilisateurs disent qu’ils se sentent frustrés et agacés lorsqu’ils sont sur un site qui n’est pas mobile-friendly. 61% des utilisateurs déclarent que, s’ils n’ont pas trouvé facilement ce qu’ils cherchaient sur le site mobile, ils vont directement sur un autre site.
“Mobile users will do anything and everything desktop users will do, provided it's presented in a
usable way.” – Brad Frost Sources : Google │ Think Insights, July 2012 www.supermonitoring.com/blog/state-of-mobile-2013/
![Page 10: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/10.jpg)
LE RWD
![Page 11: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/11.jpg)
LE RWD : UN PETIT RAPPEL
! Site web
! HTML 5
! Ergonomie adaptée aux différentes tailles d’écran
! Approche « Mobile First » ?
Avantages Inconvénients
! Expérience utilisateur privilégiée sur chaque
terminal
! Economies (temps & argent)
! Maintenance + facile
! Mise à jour transparente et déploiement
multiplateformes
! Projet complexe (cadrage, définition)
! Projet + long
! Maîtrise indispensable des aspects
techniques du RWD (wireframes, media
queries, …)
! Tests nombreux et variés tout au long du
projet
![Page 12: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/12.jpg)
DANS LE DETAIL
![Page 13: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/13.jpg)
CE QUE L’ON CHERCHE A EVITER
![Page 14: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/14.jpg)
CE QUE L’ON CHERCHE A EVITER
![Page 15: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/15.jpg)
LA REALITE
![Page 16: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/16.jpg)
LA REALITE
![Page 17: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/17.jpg)
LES POINTS DE VIGILANCE ?Graphismes
Navigateurs Type de réseaux
Opérateurs
Langue et localisation
Fonctionnalités
Terminaux supportés
OS et Versions Performance Ressources
![Page 18: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/18.jpg)
CAS DE TEST RESPONSIVE ?
RESOLUTIONS BREAKPOINTS
ACTIONS COMPORTEMENTS
BLOCS DE CONTENU
IMAGES RESEAUX
NAVIGATION
COMPOSANTS EXTERNES
Portrait
Paysage
FCT PLATEFORMES
![Page 19: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/19.jpg)
SELECTION DES CONFIGURATIONS ?
BREAKPOINTS RESOLUTIONS
STATISTIQUES VENTE TRAFIC
NAVIGATEURS SUPPORTES
USAGES CIBLES MKT
![Page 20: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/20.jpg)
DIFFERENTES ETAPES, DIFFERENTS TESTS
Spécification
Développement
Intégration
Pré-production
Production
Fonctionnel Ergonomie Portabilité Performance
Rece.e sta/que
Rece.e u/lisateur
Qualifica/on fonc/onnelle
Maintenance & montée de version
Focus Group
![Page 21: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/21.jpg)
METHODES & OUTILS : QUELQUES BONNES PRATIQUES
Impliquer les équipes de test au plus tôt Au cas où ils aient des bonnes idées
Typer les cas de tests Pour connaître les forces et faiblesses du service
Scénariser les tests On ne peut pas toujours tout tester
S’assurer de la stabilité des environnements de test C’est bête (et cher) de perdre du temps !
Définir un formalisme clair et explicite On se comprend ?
Mettre en place des outils de gestion des anomalies (plan de test, bug tracker, …) Sinon, c’est l’anarchie !
Planifier les tests sur plusieurs jours avec 1 seul testeur sur la première journée puis une montée en puissance
Ca évite encore de perdre du temps, et c’est de l’argent !
Ne pas sous-estimer la charge de project management Tout est une question d’organisation !
![Page 22: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/22.jpg)
Matrice d’exécution : Avoir la bonne granularité
![Page 23: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/23.jpg)
OUTILS POSSIBLES
Spécification
Développement
Intégration
Pré-production
Production
Fonctionnel Ergonomie Portabilité Performance
Nealite,Axance,LudoTIC,Testapic,…
Emulateurs : resizeMyBrowser Respondr Screenfly Responsive.is …
Automates
Neoload LoadRunner
…
Nouvelles configura/ons
Terminaux
Terminaux
![Page 24: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/24.jpg)
OUTILS EN LIGNE
![Page 25: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/25.jpg)
MAINTENANCE & MONTEE DE VERSION ?
Prévoir les scénarios de non-régression
Nouvelles versions Nouveaux terminaux
![Page 26: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/26.jpg)
LES CHARGES A PREVOIR POUR UNE PHASE DE RECETTE ?
“If you think compliance is expensive,
try noncompliance.”
Paul McNulty - Former U.S. Deputy Attorney General
![Page 27: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/27.jpg)
LES CHARGES A PREVOIR POUR UNE PHASE DE RECETTE ?
Test d’un site e-‐commerce
Min Max Moy Défini/on de la stratégie de test 1 j.h 8 j.h 2 j.h
Rédac/on des documents de test 2 j.h 20 j.h 6 j.h
Produc/on des tests 8 j.h 80 j.h 20 j.h
Suivi des anomalies 4 j.h 40 j.h 10 j.h
Project Management 4 j.h 40 j.h 10 j.h
Maintenance mensuelle 1 j.h 4 j.h 2 j.h
![Page 28: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/28.jpg)
LES CHARGES A PREVOIR POUR UNE PHASE DE RECETTE ?Test d’un site e-‐commerce en mode agile
Min Max Moy Défini/on de la stratégie de test 2 j.h 8 j.h 2 j.h
Rédac/on des documents de test 4 j.h 30 j.h 8 j.h
Par itéra8on
Produc/on des tests 1 j.h 6j.h 3j.h
Project Management 0,5 j.h 2j.h 1 j.h
Rece:e intermédiaire
Produc/on des tests 6 j.h 30j.h 10 j.h
Project Management 2 j.h 10j.h 3 j.h
Rece:e finale
Produc/on des tests 8 j.h 40 j.h 10 j.h
Suivi des anomalies 4 j.h 20 j.h 5 j.h
Project Management 4 j.h 20 j.h 5 j.h
Maintenance mensuelle 1 j.h 4 j.h 2 j.h
![Page 29: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/29.jpg)
OFFRES SPECIALES FRENCHWEB €ANALYSE EXPLORATOIRE POST LANCEMENT : 6500€ à 5400€
Formalisation d’une grille d’analyse spécifique Analyse des statistiques de trafic et sélection des configurations à tester Tests exploratoires sur 15 configurations
RECETTE UTILISATEUR FRONT RESPONSIVE : 10-15 K€ à 10% FRENCHWEB
Définition des scénarios utilisateurs sur le périmètre fonctionnel principal Rédaction des cahiers de recette Choix de 30 configurations à tester Production des tests, reporting et suivi des anomalies
RECETTE COMPLETE SITE RESPONSIVE : 25-45 K€ à 10% FRENCHWEB
Analyse des périmètres fonctionnels: back-office, front, … Scénarios utilisateurs et cahiers de recette Sélection des configurations à tester Production des tests, reporting et suivi des anomalies Suivi montée de version et maintenance pendant 3 mois
Ces offres sont valables pendant 1 mois à compter du 27 Mars 2014 Pour toute question : [email protected]
![Page 30: [atelier Frenchweb] Tester efficacement son site Responsive design](https://reader031.fdocuments.net/reader031/viewer/2022013121/5560b649d8b42afe3b8b4a55/html5/thumbnails/30.jpg)
EN CONCLUSION
“On se souvient de la qualité bien plus longtemps que du
prix”
Guccio Gucci