31
27 MARS I ATELIER FRENCHWEB : COMMENT TESTER EFFICACEMENT SON SITE RESPONSIVE ?

[atelier Frenchweb] Tester efficacement son site Responsive design

Embed Size (px)

DESCRIPTION

Atelier online Frenchweb, le Jeudi 27 Mars à 11h, animé par StarDust. Depuis l’avènement des tablettes et des mobiles, le Responsive Web Design fait de plus en plus d’adeptes. Il faut dire qu’adresser les différents écrans depuis un code unique est une promesse séduisante. Si l’on comprend rapidement l’intérêt et le gain que le RWD apporte pour le développement et la maintenance du service, il est plus difficile d’évaluer l’effort de test nécessaire pour valider efficacement un service avant son lancement.

Citation preview

Page 1: [atelier Frenchweb] Tester efficacement son site Responsive design

27 MARS I ATELIER FRENCHWEB : COMMENT TESTER EFFICACEMENT SON SITE RESPONSIVE ?

Page 2: [atelier Frenchweb] Tester efficacement son site Responsive design

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

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

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

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

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

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

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

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

LE RWD

Page 11: [atelier Frenchweb] Tester efficacement son site Responsive design

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

DANS LE DETAIL

Page 13: [atelier Frenchweb] Tester efficacement son site Responsive design

CE QUE L’ON CHERCHE A EVITER

Page 14: [atelier Frenchweb] Tester efficacement son site Responsive design

CE QUE L’ON CHERCHE A EVITER

Page 15: [atelier Frenchweb] Tester efficacement son site Responsive design

LA REALITE

Page 16: [atelier Frenchweb] Tester efficacement son site Responsive design

LA REALITE

Page 17: [atelier Frenchweb] Tester efficacement son site Responsive design

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

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

SELECTION DES CONFIGURATIONS ?

BREAKPOINTS RESOLUTIONS

STATISTIQUES VENTE TRAFIC

NAVIGATEURS SUPPORTES

USAGES CIBLES MKT

Page 20: [atelier Frenchweb] Tester efficacement son site Responsive design

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

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

Matrice d’exécution : Avoir la bonne granularité

Page 23: [atelier Frenchweb] Tester efficacement son site Responsive design

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

OUTILS EN LIGNE

Page 25: [atelier Frenchweb] Tester efficacement son site Responsive design

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

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

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

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

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

EN CONCLUSION

“On se souvient de la qualité bien plus longtemps que du

prix”

Guccio Gucci

Page 31: [atelier Frenchweb] Tester efficacement son site Responsive design

François Joseph VIALLON Président

[email protected] 06 37 74 29 36 Skype : fviallon