Les tendances du webdesign - Industrie.com

industrie.com

Les tendances du webdesign - Industrie.com

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 ?

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.

Pourquoi l’utilise-t-on ?

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

© torpedo juice

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).


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 ? ’’


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.

by

More magazines by this user
Similar magazines