Pas d'utilisation Commerciale (non commercial)

Transcription

1 Avertissement au lecteur Ce document est soumis à la licence Creative Common: Vous êtes libres : De reproduire, distribuer et communiquer cette création au public ou encore de modifier cette création, Selon les conditions suivantes : Paternité (attribution) Vous devez citer le nom de l'auteur original de la manière indiquée par l'auteur de l œuvre ou le titulaire des droits qui vous confère cette autorisation (mais pas d'une manière qui suggérerait qu'ils vous soutiennent ou approuvent votre utilisation de l œuvre). Les mentions à faire apparaître sont les suivantes : Source : Bernard-Paul Eminet - p-interactif Pas d'utilisation Commerciale (non commercial) www-p-interactif.com Vous n'avez pas le droit d'utiliser cette création à des fins commerciales. À chaque réutilisation ou distribution de cette création, vous devez faire apparaître clairement au public les conditions contractuelles de sa mise à disposition. Chacune de ces conditions peut être levée si vous obtenez l'autorisation du titulaire des droits. Rien dans ce contrat ne diminue ou ne restreint le droit moral de l'auteur ou des auteurs. Pour en savoir plus sur la licence Creative Common : En français : Ce document est déposé à la SCAM (Société Civile des Auteurs Multimédia) et donc n est pas libre de droit. Google et un site «responsive» Depuis début avril 2015, lorsqu une recherche est réalisée sur un mobile avec Google, ce dernier privilégie dans les résultats de la recherche - les sites qui sont adaptés aux mobiles. Ce test va analyser l'url et indiquer si la conception de la page est mobile-friendly (adaptée aux mobiles). Taper l URL du site et bouton «Analyser» Si une erreur survient, recommencer le test. Résultat site non adapté aux mobiles Exemple Résultat site adapté aux mobiles Note Ne pas trop se fier à l écran de smartphone affiché.

2 La conception graphique d un site web moderne Il est important d insister sur un aspect fondamental du développement d un site web moderne, utile, utilisable et opérationnel. Privilégier le graphisme ou l accès? Depuis qu'internet existe (25 ans) ont été privilégiées des approches graphiques d'un site "imitant" une mise en page statique telle que proposée par un magazine papier soit une approche «figée». Du type : "ce que tu as sur le papier, tu le retrouves à peu près sur un écran". Cette approche n'est plus du tout acceptable de nos jours Note Pourquoi? Tout simplement parce que les chiffres montrent que : Plus de 60 % des sites web ne sont plus consultés sur des écrans d'ordinateur mais sur des terminaux dit "dégradés" comme ceux des smartphones ou tablettes. L'internaute devient très "volage", le temps passé sur un site web a été divisé par 3 lors de ces 5 dernières années. Sur un téléphone mobile le graphisme doit «s effacer» devant le contenu qui devient le plus crucial Un design «clinquant» ou très «flatteur» est inapproprié sur un smartphone Depuis début avril 2015, lorsqu une recherche est réalisée sur un mobile avec Google, ce dernier privilégie dans les résultats de la recherche - les sites qui sont adaptés aux mobiles. Selon une étude, plus de 60% des sites français ne sont pas adaptés à l interface mobile. Notion de site web dit "responsive" Un site dit "responsive" est un site web qui s'adapte automatiquement au terminal utilisé par l'internaute (mobile / tablette) de façon à rester utilisable, utile et opérationnel. Cela signifie qu'un site utile et utilisable n'est plus celui qui propose une ligne graphique élaborée et flatteuse, mais celui qui propose une information lisible et utilisable pour l'internaute sur un écran de mobile. Désormais il ne faut plus raisonner «affichage» (ce que l'organisation a envie de dire) mais plutôt penser en termes «d'accès» (ce que l'internaute a envie de lire) et tout de suite. Le «smartphonaute» désire en priorité aller à l essentiel. Penser accès "téléphone mobile" dans un premier temps et "charte graphique" ensuite Un site web moderne L'accès "mobile" à un site web moderne ne doit plus être une option. C'est LE site Il doit être prévu "accès mobile d'abord" et ensuite avec une charte pour un accès sur un écran dit "non dégradé". Qu'est-ce qui est le plus judicieux? Une charte graphique, "flatteuse" sur un écran classique d'ordinateur mais inutilisable sur un écran de mobile? Une analyse en amont des éléments qui doivent être affichés en premier pour être utiles dans la consultation avec un terminal dit "dégradé"? Le tout replacé dans une cinématique cohérente de navigation. C'est pourquoi, l approche doit être différente et plus moderne L'objectif étant de ne pas se poser de questions en termes de charte graphique mais d'analyser ce qui est affiché sur un téléphone mobile au sens du contenu. Dans le web moderne on n a plus une réflexion «à plat» d un écran d ordinateur qui «imite» une page papier, mais une vision de blocs qui sont affichés les uns après les autres sur un écran de smartphone en donnant la priorité aux blocs correspondant à ce que l internaute a envie d entendre et/ou ce que l organisation désire placer en avant. Sur un site web moderne on ne réfléchit plus en termes de classement de contenu mais en termes d accès. Vous trouverez en Annexe une analyse rapide du "design responsive" d un site communal. Ne pas perdre de vue La notion de «perte de capacité» de l utilisateur de smartphone par rapport à l utilisateur d un ordinateur. On ainsi passe d une logique «pointer / cliquer» à une logique «toucher». Ordinateur Smartphone ou tablette Système de pointage Souris ou trackpad Doigts Pointer Placer le pointeur de la souris sur une cible Pas d équivalent pour l instant 1 Cliquer Clic ou double clic Toucher ou double toucher Défilement Défilement vertical et horizontal envisageable Défilement vertical Défilement horizontal possible mais pénible. Le 1 La notion dite de «toucher long» pourrait être envisagée dans le futur pour «simuler» la notion de «pointer» Bernard-Paul Eminet - p-interactif.com 2

3 «smartphonaute» abandonne vite les sites qui l obligent à cette manœuvre Le terme «perte de capacité» utilisé ici pour comparer les comportements d un internaute sur PC et sur smartphone est impropre et assez réducteur. En effet les doigts permettent certaines manœuvres qui ne peuvent pas être réalisées avec une souris. Exemple : «deux doigts qui s écartent pour zoomer», «deux doigts qui se rapprochent pour réduire». La notion dite de «point de rupture» Exemple 1 Pour un écran de PC Nous avons par exemple : Le «menu principal» est horizontal. Sur un site web - avec le navigateur Firefox - faire Ctrl Majuscule M (Ctrl Majuscule M pour revenir en arrière). Avec un autre navigateur, réduire la fenêtre horizontalement. Le menu horizontal devient vertical Le visuel d appel au menu principal s appelle le «commander» ou Multi Toggle Menu (MTM). Utiliser l icône située à droite de la fenêtre pour en augmenter sa taille. Bernard-Paul Eminet - p-interactif.com 3

4 Vers 640 pixels de large, le menu redevient horizontal Ce point s appelle le point de rupture (breaking point) Exemple 2 Pour un écran de PC Nous avons : Sur un site web - avec le navigateur Firefox - faire Ctrl Majuscule M (Ctrl Majuscule M pour revenir en arrière). Avec un autre navigateur, réduire la fenêtre horizontalement. En mode «responsive» Le visuel d appel au menu principal (le «commander») a l aspect suivant Bernard-Paul Eminet - p-interactif.com 4

5 Action du «Commander» Pourquoi le terme de «Commander»? Pour frimer devant les collègues L icône du «Commander» Le nom semble indiquer un terme militaire. Or dans l armée française 3 galons correspondent à un capitaine Ce terme et le visuel corresponde en fait à un type d officier dans l armée britannique ou dans les forces navales américaines. Royal Navy Britannique Royal Air Force Force navale US Commander (capitaine de frégate) Wing Commander (Lieutenantcolonel d'aviation) Commander (capitaine de frégate) Exemple 1 - Analyse d un site de laboratoire En mode PC Le site propose un menu principal avec un système de sous menus déroulants. En mode «mobile» Au «point de rupture» le «Commander» apparait Au «toucher» le menu apparait. Bernard-Paul Eminet - p-interactif.com 5

6 Exemple 2 - Analyse d un site communal Objectifs Commune de Saint-Alban de Montbel (73610) Analyser les "blocs" de contenus qui sont affichés en premier sur un téléphone mobile. Il est possible d'analyser "rapidement" la responsivité en réduisant horizontalement la fenêtre du navigateur. Il suffit d accéder au site avec un smartphone moderne. Analyses avec des testeurs de sites dits "responsives" La page d accueil Prise "de base" sur un Iphone. Ou - encore mieux - avec le navigateur Firefox faire Ctrl Maj M (Ctrl Maj M pour revenir en arrière) Vision sur un écran d ordinateur : Bernard-Paul Eminet - p-interactif.com 6

7 À noter Le menu horizontal de navigation Les blocs dits «de premier accès» - «première frappe» ceux qui sont affichés en premier sans appliquer aucune manipulation avec les doigts. La page d'accueil Le menu de navigation Un peu plus bas Bernard-Paul Eminet - p-interactif.com 7

8 Blocs dits de «premier accès» - «première frappe» Il s agit des toutes premières informations qui sont proposées à l internaute lorsqu il arrive sur le site avec un smartphone. Il ne réalise donc aucune manœuvre avec ses doigts. Note : ces blocs de «premier accès» ont été analysés en fonction des demandes des citoyens de la commune de Saint-Alban de Montbel. Bloc d entête pour «rassurer» l internaute. => je suis bien au bon endroit «je suis chez moi» Le menu de navigation Un carrousel de photos -> c est joli et cela ne prend pas trop de place => «je suis fier d habiter à St-Alban de Montbel» Trois blocs assez discrets (ils ne prennent pas trop de place) Les informations flash avec ici (avril 2015) une information «flash flash» Note concernant les trois blocs dits «de premier accès» Réservation des services périscolaires Saint-Alban de Montbel possède deux écoles, maternelle et élémentaire (60 élèves) et un service de cantine. Le lien permet d aller vers un applicatif extérieur de commande de tickets de cantine (Société 3D Ouest) + TAP Cette option proposée ainsi sur smartphone a été très vite appropriée par les familles. Les actualités de Saint Alban de Montbel Les actualités de la commune se trouvent effectivement plus bas dans la page d accueil mais le «toucher» sur le lien permet d y accéder directement sans être obligé de «déplacer ses doigts» sur l écran du smartphone Météo à Saint-Alban de Montbel Cette information se trouve aussi dans la page d accueil mais le «toucher» sur le lien permet d y accéder directement sans être obligé de «déplacer ses doigts» sur l écran du smartphone Bernard-Paul Eminet - p-interactif.com 8

9 Le lien permet d accéder directement au bulletin météo Note : Saint-Alban de Montbel est situé sur les bords du lac d Aiguebelette et donc dans une zone très touristique. Insister sur le côté météo permet de «forcer» la venue des citoyens sur le site. «Allons sur le site de notre commune pour voir le temps qu il va faire ce week-end» Eventuellement, ils iront voir d autres choses À noter Toutes ces opérations sont complètement automatiques et ne demandent aucune intervention des webmasters. Bernard-Paul Eminet - p-interactif.com 9