17
RESPONSIVE WEB DESIGN COMMENT BIEN TESTER ? ATELIER EN LIGNE FRENCHWEB Jeudi 5 novembre 2015

Comment bien tester son site RWD ?

Embed Size (px)

Citation preview

Page 1: Comment bien tester son site RWD ?

RESPONSIVE WEB DESIGN COMMENT BIEN TESTER ?

ATELIER EN LIGNE FRENCHWEB

Jeudi 5 novembre 2015

Page 2: Comment bien tester son site RWD ?

CHASSEURS DE BUGS

Membre de

TESTEURS

ANALYSTES

CHEFS DE PROJETS

STARDUST ACCOMPAGNE SES CLIENTS

DANS LA TRANSFORMATION ET L’OPTIMISATION DE LEURS SOLUTIONS DIGITALES.

Marseille - Paris - Lille - Montréal - Londres - Berlin

ASSURANCE QUALITÉ

A PROPOS DE STARDUST

SPÉCIALISTE DU TEST

Applications

Sites web

Emailing & Bannières

Internet of things

+2 000 TERMINAUX

Page 3: Comment bien tester son site RWD ?

ON DEMANDFULL SERVICE

Outil d’estimation instantanée du budget de test

Aide à la planification de campagnes de test

Bonnes pratiques et boîte à outils

Services de test « à la carte »

Définition de la stratégie de test

Accompagnement et suivi global du projet

Rédaction du cahier de recette

Mise en place des outils et ressources

Reporting des anomalies

Analyse des résultats & bilan

Gestion d’un projet de test de A à Z

Accompagnement ciblé des phases de test

Forfait d’heures de test

Mise en place des outils et ressources

Reporting des anomalies

NOS OFFRES DE SERVICE

A PROPOS DE STARDUST

STARDUSTPARTNER PROGRAM

Agences digitales

Page 4: Comment bien tester son site RWD ?

QUELQUES CHIFFRES

RAPPEL RESPONSIVE WEB DESIGN

ÉTAT DES LIEUX DU TEST RESPONSIVE WEB DESIGN

PRIORITÉ : CHOIX DES TERMINAUX

STRATÉGIE DE TEST

FOCUS TESTS MOBILE

FOCUS BLOCS DE CONTENUS EXTERNES

FOCUS E-COMMERCE

DE QUOI ALLONS-NOUS PARLER ?

Page 5: Comment bien tester son site RWD ?

QUELQUES CHIFFRES

Les mobiles et tablettes sont N°1

pour surfer sur le Web à 52,7 %*.64 % des sites français

ne sont pas mobile friendly**.

+ D’EXPÉRIENCE OMNICANALE

CROSS DEVICEPENSER MOBILE FIRST

* Médiamétrie (09 2015 : smartphone : 43,7 %, tablette : 9 %) ; ** Google.

Page 6: Comment bien tester son site RWD ?

1 seul SITE WEB pour TOUS LES TERMINAUX

Smartphones

Tablettes

Phablets

Ordinateurs

TV

Capacité d’un site web à s’adapter au terminal

1 SEUL DÉVELOPPEMENT

RAPPEL RESPONSIVE WEB DESIGN

DEFINITION

Affichage adapté en fonction de la taille/résolution de l’écran (ou du navigateur)

RWD

Page 7: Comment bien tester son site RWD ?

1 seul développement

1 seule recette

1 code à maintenir

1 MAJ. transparente et multiplateforme

1 référencement global

1 seul contenu

Performance optimisée

Multi-devices

AVANTAGES

RAPPEL RESPONSIVE WEB DESIGNRWD

Complexité (cadrage, gestion de projet)

Projet plus long

Maîtrise du RWD (wireframes, media

queries, etc.)

Maintenance plus complexe

INCONVÉNIENTS

Page 8: Comment bien tester son site RWD ?
Page 9: Comment bien tester son site RWD ?
Page 10: Comment bien tester son site RWD ?

Penser TEST dès les spécifications du projet

TESTEUR

=

utilisateur

Page 11: Comment bien tester son site RWD ?

ÉTAT DES LIEUX DU TEST RWD

67 % des DSI pensent que les sites en RWD sont plus difficiles à tester.*

* ISV- comScore, avril 2014 ; ** Moyenne StarDust 2014

+ 80 % des équipes Projet utilisent au moins une fois un émulateur Responsive.*

1 site RWD est testé en moyenne sur 5 devices.*

62,6 % des bugs sont uniques à 1 ou + devices

37,4 % sont communs à tous les devices

Or, sur 100 bugs détectés ** :

Page 12: Comment bien tester son site RWD ?

PRIORITÉ : CHOIX DES TERMINAUX

RÉSOLUTIONS

POINTS DE RUPTURE

OS / VERSIONS

NAVIGATEURS

ECHANTILLON DE TEST

20 à 25 configurations >> couverture des risques à 80 %

35 à 45 configurations >> Couverture des risques à 90 à 95 %CONSEIL STARDUST

STATISTIQUESVENTE & TRAFIC

USAGES

Page 13: Comment bien tester son site RWD ?

STRATÉGIE DE TEST

Tests prioritaires sur les autres devices

PÉRIMÈTRE DE TEST

SCÉNARISÉE

Scénario 1• Lorem ipsum• Lorem ipsum

Scénario 2• Lorem ipsum• Lorem ipsum

Scénario 3• Lorem ipsum• Lorem ipsum

EXPLORATOIRE

TESTS COMPLETS

Sur les terminaux les plus importants

Manque de temps et/ou budget ? PRIORISER

TESTS OPTIMISÉS

APPROCHES

Page 14: Comment bien tester son site RWD ?

FOCUS TESTS MOBILE

RÉSEAUX

CONNEXION

3G / 4G / WifiMode avion

Perte de connexion

SmartphonePhabletsTablettes

Laptop

NAVIGATIONTOUCH / TACTILE

FRAGMENTATION

RésolutionsOS / navigateurs

Nouveaux devices

Port

rait

Paysage

DEVICESAFFICHAGE

Blocs image / textesIMPORTANT !

Optimiser le contenu

CONTENU

Page 15: Comment bien tester son site RWD ?

FOCUS BLOCS DE CONTENU EXTERNES

!PLAYER VIDÉOS

BANNIÈRES PUB

CHAT ONLINE…

Page 16: Comment bien tester son site RWD ?

Noël 20151 ACHAT SUR 4 sera effectué sur mobile.**

FOCUS E-COMMERCE

ACHATRecherche produit

Comparaisons

Wish listPanier paiement

SMARTPHONES / TABLETTES DESKTOPS / TABLETTES

TESTS DU TUNNEL D’ACHAT

65 % des consommateurs commencentleur parcours d’achat sur smartphone*

61 % terminent leur achat sur desktop*

* Signal 2015 ; ** Criteo 2015.

Page 17: Comment bien tester son site RWD ?

MERCI

François Joseph VIALLON, CEO StarDust

www.stardust-testing.com

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

Guccio Gucci