Les tendances du webdesign
publicité
TENDANCES WEB DESIGN & 2011/2012 by SOMMAIRE 02 03 05 06 09 13 14 20 27 28 33 39 40 43 45 46 Sommaire Introduction Internet comme média traditionnel 1/ Les règles de base du marketing comme socle du webdesign 2/ Les règles de base du webdesign Internet un canal prioritaire de communication 1/ Des aspects graphiques 2/ Mettre l’utilisateur au centre Internet le régime de l’ubimédia 1/ La technique : les contraintes et permissions 2/ De nouveaux usages et terminaux Internet en constante évolution 1/ Entre immersion et interaction 2/ 2012 : une année charnière ? Conclusion Les auteurs INTRODUCTION « En Italie, pendant 30 ans, sous le règne des Borgia, il y a eu la guerre, la terreur, des meurtres et des bains de sang. Cela a donné Michel-Ange, Léonard de Vinci et la Renaissance. En Suisse, ils ont eu la fraternité, cinq siècles de paix et de démocratie, et qu’est-ce que ça a donné ? La pendule à coucou ! » Cette réplique, tirée du film « Le troisième homme » de Carol Reed en 1949, illustre parfaitement la thèse de Parag Khanna développée dans son livre « How to run the world ». Ce dernier a fait l’objet d’une chronique publiée dans le New York Times en janvier 2011 intitulée « For a New Renaissance ». Nous pouvons la résumer en ces mots : « c’est dans les périodes de chaos et d’incertitude que des bouleversements forts et vitaux interviennent. Ce fut le cas en Europe il y a 6 siècles » : la Renaissance. Pour l’auteur, nous pouvons comparer notre époque en Occident à celle du Moyen-Age qui a connu la peste noire, les invasions mongoles, un schisme papal, les famines, les guerres de religion et de découpage des frontières en Europe. Pendant ce temps, la Chine et l’Inde connaissaient leur âge d’or respectivement sous la dynastie des Song et des Chola. Depuis, l’ordre des choses s’est inversé et ce grâce à une période d’intense créativité en Occident. C’est en effet pendant la Renaissance que les plus grandes œuvres artistiques, philosophiques et politiques ont été réalisées et ce hors du « chaos ». Les créations, les inventions et les découvertes ont été déclenchées par besoin et non par goût. C’est face à l’adversité que nous réagissons le plus justement. Quels sont les facteurs qui ont permis de faire émerger cette période faste ? Selon Parag deux ingrédients sont nécessaires : une révolution technologique et une psychologique. Aux XVème et XVIème siècles, ce fut l’invention de l’imprimerie et la Réforme protestante. Aujourd’hui, nous vivons ou du moins commençons à vivre deux bouleversements pouvant jouer ce rôle de déclencheurs : Internet et le néocapitalisme « responsable ». Il est indéniable qu’aujourd’hui Internet est une révolution technologique et sociétale. Il a changé la façon dont les hommes communiquent et créent. Tous les secteurs sont peu à peu touchés par ce media. Il est de droit de se demander dans quelle mesure la création pour ce média est influencée par son environnement. Dès la naissance du web et surtout depuis sa « démocratisation », il existe des tendances de fond dans le webdesign qu’il ne faut pas ignorer. Pourtant, dans notre société consumériste, l’utilisation de leviers impliquant le consommateur est nécessaire pour optimiser l’impact des créations. De fait, l’enjeu majeur de la création graphique est de mettre en adéquation les contraintes et évolutions techniques avec les habitudes et les attentes des internautes. Attentes qui ne risquent pas de baisser à la vue de des échéances technologiques et « politiques » à venir. INTERNET COMME MEDIA TRADITIONNEL entre stratégie marketing et adoption des règles de base de la communication 1/ Les règles de base du marketing comme socle du webdesign Comme l’affirme l’adage populaire, ce sont dans les vieux pots que l’on fait les meilleures soupes. Se référer à un grand auteur de stratégie pour réussir n’est donc pas achronique. Selon Sun Tzu : « Je dis que si tu connais ton ennemi et si tu te connais, tu n’auras pas à craindre le résultat de cent batailles. Si tu te connais toi-même sans connaître ton ennemi tes chances de victoires et de défaites seront égales. Si tu ne connais ni ton ennemi ni toi-même tu perdras toutes les batailles. » Nous pouvons adapter ce conseil à l’univers du marketing : si tu connais ta cible et si tu te connais, tu n’aurais pas à craindre le résultat de ta stratégie. Si tu te connais toi-même sans connaître ta cible, tes chances de victoires et de défaites seront égales. Si tu ne te connais pas toi-même et si tu ignores à qui tu t’adresses, tu perdras toutes les batailles. ‘‘ Avant de considérer un webdesign, il convient alors d’entreprendre une introspection et une étude de marché. Qui sommes-nous ? Quelle est notre place sur le marché ? Quelle est notre histoire en tant que société, association ? Pourquoi disposer d’un site internet ou pourquoi le refaire ? Découle-t-il d’une stratégie de communication ? Est-il un canal de vente ? Quelles sont les pratiques des autres entreprises dans le même secteur ? Voici des questions essentielles qu’il faut se poser dans une phase d’introspection. Avant de s’attaquer à la cible en elle-même, il convient de connaître à qui on est confronté sur le canal choisi, ici internet. Si tu ignores à qui tu t’adresses, tu perdras toutes les batailles. ’’ Qui utilise internet ? Pourquoi l’utilise-t-on ? Selon l’étude Médiamétrie de décembre 2010, plus de 38 millions de personnes âgées de 11 ans et plus se sont connectées à Internet au cours du mois de décembre soit 71,4% de la population. Le nombre d’internautes progresse de 10% par rapport à décembre 2009. Toujours en décembre 2010, 34 393 000 internautes, soit 96,5% des internautes à domicile, sont connectés en haut débit. Cette population internaute progresse de 15% par rapport à décembre 2009. Selon l’Observatoire d’Ipsos, le profil des internautes perd progressivement ses aspérités : la part des 50 ans et plus est passée de 19% en 2005 à 26% cette année, celle des CSP de 25% à 30%. A la lecture de ces chiffres, on peut conclure qu’un large spectre d’individus se connecte et utilise internet : il n’est plus réservé à une élite financière et technologique. Selon Ipsos, les usages du Web se diversifient : 56% des internautes se connectent désormais plusieurs fois par jour (contre 48% en 2005) que ce soit pour s’informer (services pratiques et actualités générales augmentent de 12 points en 5 ans), échanger sur les réseaux sociaux (54%),acheter (52%) ou simplement se divertir : essor des vidéos en ligne (15% en 2005, 38% aujourd’hui) et de la consommation convergente (TV, radio,podcast,…) En 2011, on peut affirmer que toutes les couches de la population utilisent internet et sont donc atteignables via ce canal. La question essentielle est donc de savoir où se trouve sa cible sur internet et quel est son comportement sur ce media. De plus, il faut aussi prendre en compte le fait que la cible traditionnelle de la société n’est pas forcément celle du site internet. En effet, dans une stratégie de conquête de nouveaux marchés, se servir du media internet (traditionnellement plus adopté par les jeunes générations) pour recruter une cible plus jeune implique d’adapter par exemple les messages et les promesses. C’est seulement à partir des réponses à ces questions que les fondations du site internet peuvent être posées et que l’on peut commencer à se poser la question du webdesign. données IPSOS 2/ Les règles de base du webdesign Toute personne qui s’inscrit dans une démarche de construction de site internet et donc de design web doit prendre en compte certains facteurs pour réussir. En termes de graphisme web, il existe un ensemble de règles qu’il faut respecter pour optimiser ses chances de succès et l’expérience utilisateur des internautes. La première et mère des contraintes pour un design web est la taille de l’écran ou plus exactement la résolution. Traditionnellement et statistiquement, la taille retenue est 1024X768. Le bon sens ainsi que les études sur le comportement des internautes face à une page d’un site internet relèvent que les éléments importants de la page du site doivent être visibles au premier coup d’œil. C’est la règle des points chauds et le respect de la ligne de flottaison. Les parties de la page devant être mises en avant doivent être présentes à quatre endroits stratégiques placés tout au long du parcours de l’œil quand il la parcourt. Seulement 28% des internautes lisent les contenus. Il faut donc mettre en avant les éléments importants sur une page internet. (étude Nielsen) © monabanq © monabanq Même si les équipements ont évolué et la résolution des écrans a augmenté, cette règle permet de construire une page web équilibrée et efficace (dans des logiques de recrutement ou de présentation des éléments de navigation) Afficher une page internet sur plusieurs écrans n’est plus un problème : les internautes n’ont plus peur de faire défiler l’écran et la généralisation des roulettes sur les souris ou trackpad est pour beaucoup dans cette avancée. Il s’avère même que certains internautes préfèrent visualiser ce qui se trouve au « 2ème écran », sous la ligne de flottaison justement…. Privilégier la page d’accueil du site par rapport aux autres est aujourd’hui une erreur. L’internaute peut entrer sur un site par n’importe quelle page et ce grâce aux moteurs de recherche ou des renvois sur d’autres sites (trackback entre blog par exemple). Il faut donc porter autant d’attention au design des autres pages et notamment à l’accessibilité de l’information sur ces pages « secondaires ». Un autre paramètre à prendre en compte est celui de la rapidité d’affichage des pages. Il faut veiller à ne pas les surcharger avec des éléments graphiques nuisant à la fluidité du parcours « client » (et accessoirement disposer d’un bon hébergement). De cette règle en découle une autre : le nombre de clics pour accéder à une information importe peu. En réalité c’est le temps d’accès pour arriver à cette information qui compte : à partir du moment où le parcours est clair et que l’information est obtenue, le nombre de clics importe peu. Toujours dans un souci de clarté et de rapidité de lecture, il faut faire aussi attention à l’interlignage des textes. La difficulté réside en trouver le bon dosage entre un texte avec beaucoup d’espace (qui facilité la compréhension) et un interlignage serré (qui facilite la rapidité de lecture). ‘‘ Le nombre de clics pour accéder à une information importe peu. ’’ Cet outil (browsersize dans Google Labs) permet de connaître le pourcentage des visiteurs pouvant visualiser les différentes zones d’un site web sans avoir à faire défiler la barre d’ascenseur. N’importe quel site peut être analysé.. © browsersize de googlelabs INTERNET, UN CANAL PRIORITAIRE DE COMMUNICATION entre stimulation de l’inconscient collectif et implication du consommateur 1/ Des aspects graphiques Vous n’avez pas besoin de ce livre blanc pour apprendre que les bouleversements financiers depuis 2009 ont changé aussi bien la structure de notre système que notre rapport à ce dernier. Le climat social n’est ni celui des trente glorieuses ou celui de la Belle Epoque. Nous avons besoin d’être rassurés par des valeurs sûres car porteuses d’espoir. La nouveauté n’est malheureusement pas considérée comme fiable. Là où en 2010, le Pantone Color Institute consacrait la couleur turquoise comme couleur de l’année, en 2011, c’est le rose foncé chèvrefeuille qui monte sur le podium. Le turquoise symbolise le voyage, le rêve, première réaction normale suite à la crise connue les mois précédant ce choix. Le rose foncé symbolise quant à lui un retour à la réalité : il instille la confiance et le courage nécessaires pour affronter une crise qui dure et qui nous touche de plus en plus. « Le rose foncé chèvrefeuille est une couleur captivante, stimulante qui fait monter l’adrénaline. Rien de tel pour éviter le vague à l’âme. » PANTONE 18-21200 TCX Honeysuckle #CC6687 R=204 V=102 B=135 C=19 M=71 J=24 N=0 Palette de couleur web pour l’année 2011 Toujours dans un souci d’assurance, le défi pour 2011 est de mettre en scène des lignes pures et sobres dans un décor coloré. L’utilisation de couleurs pastel n’est pas agressive pour l’œil de l’internaute : on le guide dans sa recherche d’information sans lui en coller plein les yeux. © quatzuki © alterway © groupon © foursquare Le retour en force du retro est aussi un symptôme de cette volonté d’être rassurés par des valeurs sûres. L’espoir de revoir les Inconnus ou les Nuls réunis ainsi que le succès de la tournée des Yéyé participent de cet effet de mode. En termes de graphisme, on peut dire que la patte graphique des années 50/60 fait son retour. Les années d’après-guerre sont le début des trente glorieuses et amènent l’avènement de la prépondérance américaine dans le monde occidental via les arts et la consommation. De fait, le monde occidental est abreuvé par des campagnes de publicité / communication qui sont restées dans l’inconscient collectif. C’est aussi le début de la consommation de masse. Les principes marketing des produits de première consommation, notamment celui de l’emballage, étaient encore simples, rappelant l’univers des rations distribuées lors du conflit. L’emballage est monochrome voire bi-chromatique avec le nom du produit écrit en gros, allégé de toute autre indication. Pour éviter la monotonie de lecture, plusieurs points graphiques accrocheurs doivent être définis à l’aide de la typographie de type « bâtons ». En résumé, la simplicité, l’authenticité et le vrai sont les mots d’ordre de la charte graphique de ce monde. Plusieurs enseignes ont déjà utilisé ces codes dans leur campagne de publicité : McDonalds et Monoprix par exemple. © monoprix © mc donald’s france ‘‘ La simplicité, l’authenticité et le vrai sont les mots d’ordre. ’’ Pour pouvoir décliner ce genre de typographie sur le web, il existe plusieurs solutions pour utiliser des polices non navigateur : des scripts Javascript ou Typekit, Fontdeck et le CSS3. Sinon le recours à des images reste toujours une solution, avec ses inconvénients. En effet, en cas de site multilingue, il faudra créer autant d’images de textes que de langues et les pages seront alourdies. © fortyseven media © lather bee rich Les polices navigateurs Quand vous utilisez une police dans une page web, elle ne s’affichera que si l’internaute a la même police installée sur son ordinateur. Il faut donc faire « au mieux », c’est-à-dire spécifier des polices (en espérant qu’elles seront présentes), et spécifier d’autres noms de polices alternative (si possible proches de celle que vous souhaiteriez). © torpedo juice D’autres références peuvent aussi être utilisées. N’oublions pas que les années 50/60 sont la consécration des figures célèbres telles que les pinup, les comédiens (John Ford), etc… La personnification d’un mouvement artistique par une figure emblématique fait partie de la patte graphique et peut être reprise aujourd’hui dans les headers des sites. L’utilisation des gros headers n’est plus contre-indiquée : l’espace permet d’afficher des visuels clairs et simples expliquant l’objet du site. Images versus référencement Afin d’optimiser le référencement naturel, il est fortement conseillé de laisser un maximum de textes en version texte plutôt que de les transformer en image. C’est le cas pour les titres de pages, de section et autres éléments structurant votre site internet. © marie catrib’s © all star lanes © team fanny pack 2/ Mettre l’utilisateur au centre Une fois l’internaute rassuré et son inconscient attendri, les leviers l’impliquant doivent être correctement amenés sur la page : le contenu à haute valeur ajoutée doit être visible. Pour y parvenir, rien de magique, simplement de la technique. Tout bon webdesigner doit garder à l’esprit que le style minimaliste n’est pas un gros mot. Même s’il n’est pas nouveau (Google a choisi cet axe depuis sa création), sa consécration est réelle. Ce style permet de mettre en avant le contenu de la page plutôt que le design en lui-même. Seuls les éléments vitaux sont conservés ; le reste étant renvoyé aux autres pages voire supprimé. La règle du 60% d’espace blanc est encore plus d’actualité pour ne pas gêner la lisibilité : c’est la façon dont on organise les espaces vides dans la page qui va faire ressortir les éléments de contenus importants aux yeux de l’internaute. © google ‘‘ © h4-valorisation Le contenu à haute valeur ajoutée doit être visible. ’’ Toutefois, la création de cet univers minimaliste n’est pas si simple. Un des moyens pour y arriver est de s’inspirer du domaine de l’enfance. Pourquoi ? Les produits conçus pour des enfants sont censés être attrayants et simples d’utilisation (non pas simplistes). Ils sont pensés pour que les enfants les utilisent intuitivement comme prévus. Concevoir un design d’un site internet minimaliste efficace passe alors par une réduction du nombre de points d’ancrage de l’information : très peu de colonnes, des gros titres, des gros boutons d’action et des couleurs très vives et contrastées. On peut aussi avoir recours à des cartoons et à des pictogrammes de grandes tailles et personnalisés plutôt qu’à des photos pour retenir l’attention des visiteurs. © 3620 © cornac © veboo labs © shout Outre la mise en avant du contenu, il faut aussi optimiser le parcours utilisateur d’un internaute. Il ne faut pas oublier que la montée des réseaux sociaux et plus particulièrement celle de Facebook et Twitter a modifié la façon d’utiliser le net. L’internaute lambda de 2011 n’utilise plus le net de la même façon qu’en 2000 et ce majoritairement grâce à son appropriation de l’outil. Le contenu sur les sites internet actuellement n’est plus seulement celui proposé par l’éditeur. C’est aussi l’UGC, le User Generated Content. Ces contenus prennent diverses formes : des commentaires, des notes, des profils, des posts, des tweets, etc… et peuvent provenir de plusieurs sources (le site en lui-même, les réseaux sociaux). De fait, l’interaction avec les consommateurs / internautes prend autant de place que le contenu « officiel » sur une page internet. Il faut donc prévoir un design à la fois original mais aussi flexible et adaptatif pour pouvoir intégrer ces flux. Les grands réseaux sociaux participent à cette dynamique et s’intègrent désormais facilement à tout processus d’inscription, de fidélisation et de participation sur un site existant via des API : Facebook Connect et oAuth pour ne citer qu’elles. © harlequin ‘‘ Le contenu des internautes prend autant de place que le contenu « officiel » sur une page internet. ’’ L’intégration de ces dynamiques s’est d’abord faite en reprenant les codes graphiques des éditeurs des API. Ainsi la box d’une page Facebook était très peu personnalisable et pouvait dénoter avec la charte graphique du site en place. Désormais cette box est personnalisable et se fond dans la page internet pour en faire totalement partie. Twitter permet de personnaliser à l’extrême son contenu récupéré en format brut via son API et via des flux RSS. Ainsi, les tweets peuvent être utilisés pour servir tout type de but graphique et fonctionnel. Quelques exemples : Twittervision.com ou Twitspy.com affichent les tweets en temps réel sur une carte du monde, Twitterfox permet d’afficher dans un plugin pour Firefox les tweets de vos followers. © harlequin © old loft © owni © twittervision Toujours dans un souci d’amélioration du parcours de navigation, les gros footers sont revenus en grâce et ce pour plusieurs raisons. Ils sont apparentés à des mini plans de site et de fait guident l’internaute dans sa découverte du site en lui présentant une arborescence claire de ce dernier. Ces mega footers servent également de navigation secondaire lorsque la page est étendue verticalement : l’internaute n’a pas besoin de revenir en haut de page pour poursuivre sa navigation. Au-delà de toute aspiration à l’amélioration de l’expérience utilisateur, les footers sont aussi un moyen d’optimiser le référencement et faciliter le travail des robots d’exploration. © yodiv © bedeo © vsplash © apple ‘‘ Un bon référencement sur Internet est essentiel puisque « 34% des internautes cliquent sur le premier lien naturel d’une page de résultats » préférés, commerciaux ou non. © wikipédia ’’ INTERNET LE REGNE DE L’UBIMEDIA entre Révolutions technologiques et multiplication des usages 1/ La technique : les contraintes et permissions La création graphique web a toujours été limitée par des contraintes techniques découlant du terminal de lecture final. La contrainte absolue est celle du débit de connexion : avant que l’ADSL ne soit démocratisé, les connexions RTC étaient la norme. Avec une vitesse ne dépassant pas les 56ko/s, les webmasters ne pouvaient se permettre de surcharger leur site avec du design gourmand en bande passante. Paradoxalement, ce fut l’époque des GIF animés et autres boutons générés automatiquement par Frontpage… © the-chocolate-cat. Une autre contrainte, plus pernicieuse, est celle liée aux navigateurs internet et plus exactement celle de l’interprétation des standards web (HTML, CSS et autres JavaScript). Cette différence dans l’interprétation des langages pose vraiment problème pour le webdesign. La façon dont il est affiché sur l’écran de l’internaute peut différer selon le navigateur, voire l’OS (Operating System). Cette difficulté peut bloquer le webdesigner, l’intégrateur et le développeur dans l’optimisation de leur site. L’utilisation du Javascript pour améliorer l’expérience utilisateur est aussi soumise à ce même genre de contraintes. © newquest On a cru pendant un temps que l’avènement de Flash viendrait alléger la croix des webdesigners. En effet, cette technologie permet une création graphique quasi sans limite. Ce ne fut malheureusement pas le cas. Le Flash n’est pas aussi souple et accessible que PHP. Il n’est pas du tout optimisé pour un référencement naturel, la pierre angulaire du net des années 2000, est gourmand en ressources et n’est ni multi-plateforme (notamment sur les mobiles), ni libre… © louis vuitton ‘‘ Flash ne permet pas le référencement naturel et n’est pas multi-plateforme ’’ La finalisation de HTML 5 et surtout de CSS 3 permet de faciliter le travail des designers en intégrant des effets sans surcouche de langages externes : • L’utilisation de police non navigateurs • L’arrondissement des blocs en full CSS • Les bordures et ombrés sur les blocs ... © babylon design Côté JavaScript, il existe depuis quelque temps des librairies d’effets optimisées pour tous les navigateurs : jQuery et Scriptaculous pour ne citer qu’elles. Par exemple, elles permettent d’inclure facilement dans le parcours de navigation de l’internaute des Lightbox jouant le jeu des anciennes Pop-up ou alertes JavaScript avec plus de style et sans faire quitter le site internet (aucune nouvelle fenêtre n’est ouverte). ©istock © digg La maturation du HTML5 participe et permet de participer de la nouvelle tendance : la transversalité. Aujourd’hui le web est multi-terminal. Un internaute n’est plus seulement à son bureau, devant son écran d’ordinateur en train de cliquer sur sa souris pour consulter des pages internet. Il peut être dans la rue en train de pianoter sur son Smartphone, dans le métro avec sa tablette sur ses genoux, voire dans son canapé avec un clavier sans fil pour surfer sur son téléviseur. Un même site devra alors disposer de plusieurs designs et plusieurs expériences utilisateurs adaptés au terminal final de lecture : version wap / web / mobile / Smartphone / tablette. A chaque support, son consommateur et sa consommation. La multiplication de ces terminaux et par extension de ces usages est la grande tendance à prendre en compte pour 2011 et 2012 : on passe du web de la page internet à celui des applications. ‘‘ A chaque support, son consommateur et sa consommation. ’’ 2/ De nouveaux usages et terminaux Cette vision applicative du web peut être résumée en ces termes : je veux avoir ce que je cherche au moment où j’en ai besoin. Aujourd’hui, internet est avant tout un outil facilitant la vie quotidienne dans tous les domaines. L’époque des sites vitrines servant uniquement de faire-valoir aux entreprises est révolue. Un site internet doit être accessible, compréhensible et utile. On peut dire que le web entre dans un nouveau paradigme, celui de l’application. Le succès des sites suivant le credo 1 site = 1 service ainsi que l’émergence des App Stores témoignent de ce phénomène. Les années 2000 ont été celles des sites portails sur lesquels l’internaute pouvait retrouver tout ce que l’éditeur estimait nécessaire: des news, un webmail, la météo, le programme télé etc. C’était l’axe choisi par les grands du web comme Yahoo, Altavista, Lycos ou encore les portails de nos FAI (Wanadoo, Free, Neuf,…). © yahoo - 2000 - via web.archive.org ‘‘ © wanadoo - 2000 - via web.archive.org On passe du web de la page internet à celui des applications. ’’ La donne a quelque peu changé aujourd’hui. L’internaute a été éduqué et sait vers quel site s’orienter pour satisfaire son besoin, notamment grâce au « réflexe Google ». C’est dans ce contexte que l’on connaît le succès à la fois des plates-formes aggrégatrices de contenus personnalisables par l’internaute (Igoogle, Netvibes) et des sites à « usage unique » dont le contenu est exportable sur ces plates-formes (via des widgets et /ou des flux RSS). © igoogle © netvibes Un site internet est désormais conçu comme un produit dont l’objectif est la satisfaction d’un besoin et non plus de multiples besoins. Si j’ai besoin d’une adresse ou d’un numéro de téléphone, je vais sur le site des pagesjaunes / pages blanches. Si je veux networker, je vais sur Facebook ou Viadeo. Si je veux faire du shopping, je vais sur Cdiscount, laredoute ou rueducommerce. Le site est alors une application au service du consommateur : j’ai un besoin, un site comble ce besoin, je le consomme et je reviens si j’ai été satisfait.. Plus concrètement, l’arrivée des App Stores aussi bien pour les navigateurs internet que pour les OS (mobiles et fixes) consacre cette lancée. Le premier navigateur à proposer un App Store ou du moins un espace regroupant des extensions a été Firefox. Le second a emboîter le pas a été Google Chrome en proposant son Chrome store dans lequel on peut aussi trouver de véritables applications tournant dans le navigateur. Par exemple, l’application Tweetdeck peut être installée et ressemble aussi bien au niveau graphique que fonctionnel à l’application de bureau. Le même phénomène se produit aussi avec Facebook qui propose un environnement de production d’applications pour venir enrichir ses fonctionnalités (jeux, extensions « sociales » de sites existants). Dans le monde des mobiles ou plus exactement celui des app phones, les App Stores sont la pierre angulaire du système. D’un point de vue technique, les éditeurs ont choisi de créer des programmes pour chaque plateforme plutôt que de développer une version mobile. La raison ? Tirer parti au mieux de chaque plate-forme. L’expérience utilisateur ne doit pas être différente mais adaptée selon le support. Quelles sont les différences majeures entre un PC et un terminal mobile ? L’écran aussi bien au niveau de la taille et de la résolution, la prise en main et la mise en situation. Un téléphone ne se pose pas sur un bureau : il se tient à une main pendant que l’autre interagit avec ou alors les deux mains le tiennent et on l’utilise avec les pouces. Une tablette peut se poser sur une table mais aussi sur les genoux. Dans les deux cas, il n’existe pas d’environnement aussi stable que celui du bureau avec une chaise. Ces contraintes doivent être prises en compte dans les réalisations graphiques et ergonomiques d’application mobile. Tout tourne autour de la taille de l’écran ainsi que de sa résolution. Chaque OS offre une résolution voire deux. Chaque machine dispose de sa propre taille d’écran. Pour être effectif, chaque design doit être donc pensé pour chaque OS et machine. Un app phone C’est un smartphone à base d’iOs, d’Android ou d’un autre système d’exploitation mobile intégrant un App Store permettant d’installer des applications venant ajouter des fonctionnalités au téléphone. © androïd market C’est ainsi qu’aujourd’hui de nombreuses applications Iphone disposent d’une version iPhone 3 et 4 et d’une version iPad. L’iPhone 4 offre une résolution plus importante que l’iphone 3 ou Ipad mais la taille de l’écran de ce dernier permet d’interagir différemment et plus facilement avec le contenu affiché. On ne peut parler de tablette ou d’app hone sans parler d’écran tactile et de multi-touch. Rendons à César ce qui est à César : si Apple n’avait pas réussi à maîtriser aussi bien cette technologie, nous n’aurions pas cette avalanche aujourd’hui. Pour rappel, un écran tactile est un écran qui permet une interaction entre ce qu’il affiche et les doigts de l’utilisateur. Le multi-touch permet d’aller plus loin : l’utilisateur peut interagir avec plusieurs doigts et plusieurs mouvements avec ce qui est affiché à l’écran. Par exemple, pincer l’écran pour zoomer, balayer de droite à gauche pour revenir en arrière,… Cette reconnaissance tactile offre beaucoup de possibilités en termes d’expérience utilisateur face à un service. De fait, le design web peut en tirer profit pour l’ergonomie. Le graphisme web « mobile » doit être constitué de gros boutons, le défilement ne se fait pas obligatoirement par une barre mais aussi par des gestes de balayage, la sélection d’un objet d’une liste se fait par appui dessus plutôt qu’en cochant une ligne, recharger une page en secouant l’appareil, etc. © dismoioù © facebook Autre évolution majeure, la vitesse de connexion à internet ne joue qu’un rôle secondaire dans l’univers des applications mobiles. En effet, elle ne sert qu’à récupérer les données et non plus à charger l’interface d’utilisation du service. On peut alors se permettre de « charger » l’environnement avec des images et autres boutons. Cette pratique change la façon dont un site internet ou plus exactement un service sur le net est conçu. Le contenu du service est stocké dans une base de données existante qui devient le socle commun à toutes ses différentes versions. C’est ainsi que l’on peut récupérer ses fichiers de Dropbox depuis n’importe quel terminal disposant de l’application ou que l’on peut consulter son Facebook ou son Twitter de n’importe où. Dans une moindre mesure pour le moment, ce phénomène App Store est présent sur nos machines fixes. Apple, encore une fois, prend les devants en proposant un App Store pour son OS fixe. Microsoft devrait emboîter le pas rapidement. Google quant à lui est déjà dans les starting-blocks via son chrome store qui est l’embryon du store pour son OS nouvelle génération, Chrome. ‘‘ Le site est une application au service du consommateur : j’ai un besoin, un site comble ce besoin, je le consomme et je reviens si j’ai été satisfait.. ’’ INTERNET EN CONSTANTE EVOLUTION entre détournement des usages et récupération par les sphères traditionnelles 1/ Entre immersion et interaction Le web de papa et maman va passer l’arme à gauche sous peu… Comme nous l’avons vu précédemment, l’utilisation d’internet a fortement évolué depuis les 15 dernières années. L’internet des sites est peu à peu supplanté par celui des applications et ce du fait des avancées techniques et des besoins des consommateurs. Le cloud est la consécration de ce web des applications. Concrètement, ce cloud ou information dans les nuages, permet de disposer d’une plate-forme évolutive et très performante pour héberger des données. Prévue comme base des futurs systèmes d’exploitation (Google et Microsoft aux dernières nouvelles), mise à l’honneur par les plus grands analystes et commercialisée sous forme d’offre par les plus grands acteurs du web (comme Amazon), cette voie semble celle choisie à moyen terme. D’un point de vue graphique, celui-ci confirme les points abordés précédemment. Les designers ne vont plus avoir les mêmes contraintes : ils vont devoir quasi exclusivement se soumettre à des best practices selon le support et les usages. De nouvelles formes d’interaction avec les terminaux de lecture permettront d’imaginer des créations graphiques innovantes non autorisées auparavant. La popularisation de la 3D et de la réalité augmentée laissent notamment présager aussi un bel avenir à la créativité. © métro paris © atol Il est clair que la part de création de sites internet purs par rapport à celle d’application web se réduira. Paradoxalement, nous assistons à un retour aux débuts de l’informatique où les applications étaient développées pour des plateformes spécifiques. Internet avait installé une universalité d’accès aux contenus : avec n’importe quel terminal, toute personne pouvait accéder à un site internet avec une adresse unique. Aujourd’hui, c’est le phénomène inverse qui se produit : à chaque terminal son application. Quelles normes seront adoptées ? Quel géant sortira vainqueur de cette standardisation du web applicatif ? Quels nouveaux usages apparaîtront ? ‘‘ Quelles normes seront adoptées ? Quel géant sortira vainqueur de cette standardisation du web applicatif ? Quels nouveaux usages apparaîtront ? ’’ 2/ 2012 : une année charnière ? Sans être Nostradamus, nous pouvons prévoir des grandes tendances pour la fin d’année 2011 et 2012. 2012 sera peut-être l’année de la fin du monde mais elle sera avant tout une année d’élection à forts enjeux : les Etats-Unis, la France et la Russie vont élire leur président. Qui dit élections dit campagnes électorales (du moins aux Etats-Unis et en France) et donc campagne de communication sur le net. On peut alors s’attendre, à l’image de ce qui s’est passé en 2007 et 2008, à une explosion de la créativité des usages et des créations graphiques à proprement parler. En effet, ce fut pendant ces campagnes que le potentiel d’Internet et plus exactement celui des réseaux sociaux a été démontré dans la mobilisation des électeurs et le financement des candidats. D’autres facteurs vont amplifier cette tendance de fond : • Tous les regards seront tournés vers les élections américaines • La génération la plus active sur le net entre dans une période de maturité politique • Le journalisme traditionnel sait utiliser le web comme amplificateur • Le net est devenu un canal de communication incontournable pour les politiques et ils se doivent de le maîtriser • L’appropriation des usages venant de Twitter, de Facebook ou encore Foursquare (mise à jour de statut, géolocalisation, expression libre,…) est une réalité • Des initiatives citoyennes comme la géolocalisation des bureaux de vote (grâce à OWNI) ont été réalisées. © obama2012 La toile se politise dans le sens démocratique du terme : elle devient un espace à part entière de communication et d’expression libres. Pourtant des tensions s’éveillent. Par nature, Internet est difficilement contrôlable et l’appropriation par la population de cet outil n’est donc pas nécessairement perçu comme bénéfique par les autorités traditionnelles de nos sociétés. Les deux affaires WikiLeaks puis les révolutions en Tunisie, Egypte et Lybie ont démontré qu’Internet peut jouer un rôle décisif dans la révélation d’informations et l’accompagnement des masses. Internet est incontestablement un moyen de l’activisme politique et un de ses symboles les plus forts. C’est dans cette ambivalence que l’année 2011 va se finir et que 2012 va débuter. Entre élections politiques à enjeux importants, instabilités politiques en Afrique du Nord potentiellement contagieuses aux pays voisins et spectre de la crise, l’état d’esprit mondial ne va pas être au beau fixe. Puisque c’est ce dernier qui est analysé par Pantone pour établir sa couleur de l’année, nous pouvons penser que la palette couleur de 2012 sera celle du réconfort. Parmi laquelle nous pouvons trouver des tons de vert et de bleu foncé (denim). © wikileaks Conclusion ‘‘ Que ce soit en termes de créativité ou d’inventivité, le web offre un espace d’expression quasi infini. Les contraintes et les limites sont définies par des éléments techniques, politiques et sociétaux à un instant T, le plus souvent arbitraires. Le web pourra-t-il devenir un « cloud », libre au-dessus et indépendant des Etats ? ’’ by LES AUTEURS Quentin Nichini >> Chef de projet web senior Après des études à Sciences Po Aix en mention Entreprise et une spécialisation en Intelligence Economique, Quentin Nichini a collaboré aussi bien avec des acteurs publics que privés sur des réalisations de sites (réseaux sociaux locaux, intranet, extranet, blogs, sites institutionnels et mobiles) et des campagnes de communication online (événementiel, lancement de produits, etc.) en tant que responsable webmarketing, chef de projet et community manager. Il gère une équipe de 3 chefs de projet et a rejoint l’équipe Alter Way Creative en janvier 2011. Christophe Sadowski >> Directeur artistique Christophe Sadowski est arrivé chez Alter Way Creative en 2007. Il a designé tous les sites produits par la société depuis cette date, parmi lesquels : • C dans l’Air (France Télévisions) • JEC Composites • Lecture-Academy (Hachette) Il est également à l’origine de la charte graphique de nombreux clients (logos / charte / plaquettes...) comme : • Data Base Factory • H4, groupe EDF Il gère une équipe de 3 infographistes. Alter Way Alter Way est né en 2006 d’un pari ambitieux : celui de créer un acteur industriel de l’Open Source, capable d’accompagner et de contribuer à la stimulation de cet écosystème innovant et en évolution constante. Forte de 5 métiers complémentaires, la société créée par Véronique Torner et Philippe Montargès a su fédérer des experts du développement applicatif, de la formation, de l’hébergement, de la communication et du webdesign pour proposer une offre complète, modulaire et adaptée à des besoins mouvants et devenir ainsi l’opérateur de services open source que la maturité du marché exigeait. • Consulting : Conseil, audit et industrialisation • Creative : Agence de communication orientée web et studio graphique • Formation : Accompagnement au changement et formation aux outils de l’Open Source • Hosting : Offre d’hébergement à haute valeur ajoutée et disponibilité • Solutions : Développement, intégration, infogérance et TMA Licence Creative Commons Paternité - Pas d’Utilisation Commerciale - Partage des Conditions Initiales à l’Identique 3.0 Unported.
