Futur des interfaces

graphiques
 Les médias changent et évoluent rapidement.
Nous, comme étant concepteurs, devons changer
aussi et suivre cette évolution.
 Il y a une dizaine d’années, personne ne savait que
la conception de sites Web adaptatifs (Responsive
design) sera aussi importante et nécessaire pour
les médias de nos jours avec les nouvelles
technologies (tablette, smartphone, phablette).
 Même les utilisateurs ont changé. De nos jours, il
est presque impossible de se déconnecter de
l’internet. Les interfaces à concevoir doivent être
conçues pour les appareils mobiles.
 L'utilisation d'appareils mobiles pour naviguer sur
le Web connaît un développement phénoménal. La
majeure partie du Web a subi des changements
radicaux pour l’optimiser à ce type de terminaux.
 Téléphones, “phablettes”, tablettes, ordinateurs,
consoles de jeu, téléviseurs et même accessoires
connectés, il existe aujourd’hui une multitude de
tailles d’écran différentes. Dans ce domaine, le
changement est la norme. Il est donc important
qu’un site puisse s’adapter à tous les formats, que
ce soit aujourd’hui ou demain.
 Référence :
https://developers.google.com/web/fundamentals/layouts/rwd-
fundamentals/how-to-choose-breakpoints?hl=fr
 La conception de sites web adaptatifs (ou RWD,
Responsive Web Design, en anglais), est un concept
défini à l’origine par Ethan Marcotte dans ‘A List
Apart’.
 Ce concept répond aux besoins des utilisateurs et
des appareils qu’ils utilisent. La disposition change
en fonction de la taille et des fonctionnalités de
l’appareil. Sur un téléphone, par exemple, le contenu
s’affichera dans une seule colonne, alors qu’il
apparaîtra dans deux colonnes sur une tablette.
 http://alistapart.com/article/responsive-web-
design/
 Dans le cas des pages optimisées pour un large
éventail d'appareils, l'en-tête du document doit
contenir un élément Meta Viewport. La balise Meta
Viewport indique au navigateur comment contrôler
les dimensions et la mise à l'échelle de la page.
 Viewport est la zone visible de l'utilisateur d'une page Web.
 Elle varie avec le dispositif/device, et sera plus petit sur un
téléphone mobile que sur un écran d'ordinateur.
 Avant les tablettes et les téléphones mobiles, les pages web
ont été conçues uniquement pour les écrans d'ordinateur, et
il était courant pour les pages Web d'avoir une conception
statique et une taille fixe.
 Puis, quand nous avons commencé à surfer sur Internet en
utilisant les tablettes et les téléphones mobiles, les pages
web de taille fixe sont trop volumineux pour tenir la fenêtre.
Pour résoudre ce problème, les navigateurs réduisaient la
taille de la page Web entière pour l’adapter à l'écran. Ce ne
fut pas parfait !! Mais une solution rapide.

 Référence : https://developers.google.com/web/fundamentals/layouts/rwd-
fundamentals/how-to-choose-breakpoints?hl=fr
 Pour offrir aux internautes une expérience
optimale, les navigateurs mobiles affichent la page
avec la largeur d’écran d’un ordinateur de bureau
(soit généralement 980 pixels, mais cela varie en
fonction des appareils).
 Ils essaient ensuite d’améliorer la qualité visuelle
en augmentant la taille des polices et en
dimensionnant le contenu pour qu’il s’adapte à la
taille de l’écran.
 Pour l’utilisateur, cela se traduit par un affichage
irrégulier de la taille des polices et la nécessité de
devoir appuyer deux fois ou pincer pour zoomer
pour afficher le contenu et interagir avec celui-ci.
 La propriété width contrôle la taille du viewport.
Elle peut être réglée à une valeur précise de pixels,
comme width=600, ou bien à la valeur
spéciale device-width qui correspond à la largeur
de l'écran en pixels CSS à l'échelle 100%.
 Il existe les propriétés et valeurs height et device-
height correspondantes, qui peuvent être utiles
pour les pages contenant des éléments qui
changent de taille ou de position en fonction de la
hauteur du viewport.
 Cela permet à la page d’ajuster le contenu selon
différentes tailles d’écran, qu’il soit affiché sur un
petit smartphone ou sur un grand écran
d’ordinateur.
 Exemple:

Sans Meta Viewport Set Avec Meta Viewport set

 Certains navigateurs conservent une largeur de
page constante lors de la rotation du contenu en
mode paysage et préfèrent le zoom à l’ajustement
de la mise en page pour occuper tout l’écran.

 L’ajout de l’attribut initial-scale=1 indique au

navigateur d’établir une relation de type 1:1 entre
les pixels CSS et les pixels indépendants de
l’appareil, quelle que soit l’orientation de ce
dernier, et permet à la page de tirer parti de toute
la largeur de l’écran en mode paysage.
 Le défilement est devenu un geste naturel pour
l'utilisateur, que ce soit sur l'écran d'un ordinateur
de bureau ou d'un appareil mobile.

 Aussi, l'obliger à faire défiler la page

horizontalement ou à effectuer un zoom arrière
pour afficher toute la page dégrade sérieusement
son confort d'utilisation.
 Dans la mesure où les dimensions et la largeur de
l’écran, exprimées en pixels CSS, varient
sensiblement d’un appareil à un autre (que ce soit
entre des smartphones et des tablettes, voire entre
différents smartphones), la largeur de la fenêtre
d’affichage ne doit pas constituer le critère de
rendu.
 Optez pour des valeurs de largeur relatives et non
pas de valeur absolue en pixels, comme width:
100%.
 Exemple
width en valeur absolue width en valeur relative
 Les requêtes média permettent de créer du
contenu adaptatif, des styles spécifiques étant
appliqués à tous les écrans, quelle que soit leur
taille.
 La syntaxe de la requête média permet de créer des
règles applicables en fonction des caractéristiques
de l’appareil.

@media (query) {
/* CSS Rules used when query matches */
}
Attribut Résultat
Règles appliquées pour toute largeur de navigateur
min-width
supérieure à la valeur définie dans la requête.
Règles appliquées pour toute largeur de navigateur
max-width
inférieure à la valeur définie dans la requête.
Règles appliquées pour toute hauteur de navigateur
min-height
supérieure à la valeur définie dans la requête.
Règles appliquées pour toute hauteur de navigateur
max-height
inférieure à la valeur définie dans la requête.
Règles appliquées à tout navigateur dont la hauteur
orientation=portrait
est supérieure ou égale à la largeur.
Règles appliquées à tout navigateur dont la largeur
orientation=landscape
est supérieure à la hauteur.
 Lorsque la largeur du navigateur est comprise
entre 0 pixel et 640 pixels, max-640px.css est
appliqué.
 Lorsque la largeur du navigateur est comprise
entre 500 pixels et 600 pixels, les styles situés
dans @media sont appliqués.
 Lorsque la largeur du navigateur est supérieure ou
égale à 640 pixels, min-640px.css est appliqué.
 Lorsque la largeur du navigateur est supérieure à
sa hauteur, landscape.css est appliqué.
 Lorsque la hauteur du navigateur est supérieure à
sa largeur, portrait.css est appliqué.
 Concevez le contenu pour qu’il s’adapte d’abord
aux écrans de petite taille, puis élargissez l’écran
jusqu’à ce qu’un point de rupture soit nécessaire.
 Cela vous permettra d’optimiser les points de
rupture en fonction du contenu et de maintenir leur
nombre à un niveau minimal.
 Examinons l’exemple de prévision météorologique.
 La première étape consiste à soigner la
présentation des prévisions sur un petit écran
 Redimensionnez ensuite le navigateur jusqu’à ce
qu’il y ait trop d’espace entre les éléments et que
la qualité d’affichage des prévisions ne soit plus
optimale (au-delà de 600 pixels).
 Pour insérer un point de rupture à 600 pixels,
créez deux feuilles de style ; l’une à utiliser lorsque
la taille du navigateur est inférieure ou égale à 600
pixels, et l’autre pour une taille supérieure à 600
pixels.
 Dans cet exemple, les styles courants, tels que les
polices, les icônes, les couleurs et le
positionnement de base, ont été placés dans le
fichier ‘weather.css’.
 Les dispositions spécifiques relatives au petit écran
sont ensuite placées dans le fichier ‘weather-
small.css’, tandis que les styles pour grand écran
sont placés dans ‘weather-large.css’.
 Outre la sélection de points de rupture majeurs
lors de modifications importantes de la disposition,
il convient de tenir compte des changements
mineurs.

 Par exemple, entre deux points de rupture

majeurs, il peut s’avérer utile d’ajuster les marges
ou le remplissage sur un élément, ou d’augmenter
la taille de police pour offrir un rendu plus naturel
dans la disposition.
 Dans l’exemple de prévision météorologique, en
grandissant la taille de l’écran, on a augmenté la
taille de police lorsque la largeur de la fenêtre
d’affichage est supérieure à 360 pixels.
 Ensuite, quand il y a suffisamment d’espace, on
peut séparer les températures maximale et
minimale, de sorte qu’elles se trouvent sur la
même ligne, au lieu d’être affichées l’une au-
dessus de l’autre.
 De même, on a également agrandi légèrement les
icônes illustrant les conditions météo.
 Si l’on se base sur la théorie de lisibilité standard,
la colonne idéale doit contenir entre 70 et 80
caractères par ligne (soit entre 8 et 10 mots en
anglais).
 Dès lors, chaque fois que la largeur d’un bloc de
texte augmente d’environ 10 mots, l’utilisation
d’un point de rupture doit être envisagée.
 Dans l’exemple suivant, sur les petits écrans,
l’utilisation de la police Roboto avec une taille de 1
em fonctionne parfaitement et génère 10 mots par
ligne. Cependant, un point de rupture est
nécessaire sur les écrans avec largeur du
navigateur supérieure à 575 pixels, la largeur
idéale du contenu est de 550 pixels.
 Découvrir un exemple de RWD sur le site suivant:
https://www.ibm.com/developerworks/community
/blogs/bobleah/entry/code_example_of_responsiv
e_web_design_using_css3_media_queries13?lang=
en
 Code à downloader ici :
https://www.ibm.com/developerworks/community
/files/app?lang=en#/person/270000CN12/file/81
92358f-2f89-4717-acd6-77bbc71bb289
 Une conception adaptative d’un site d’un challenge
de transport éco pour encourager les personnes à
réduire l’émission de gaz à effet de serre et protéger
la couche ozone : http://clearairchallenge.com/
 A votre avis, quelles sont les techniques utilisées
pour produire ce design ?
 Consulter le code source de la page. Combien de
points de rupture peut-on distinguer ?
 Quelles 4 modifications ont été apportées au
design suivant la taille d’écran. Expliquer en se
basant sur le test de l’écran et sur le code source.
 Après les interfaces en lignes de commande qui
ont fait les heures de gloire de MS DOS à son
époque, l'essentiel de l'informatique grand public
s'est développée sous le monde des interfaces
graphiques utilisateur (GUI).
 Ce fut deux décennies d'interfaces à fenêtres et à
icônes pilotables par une souris et un clavier.
 Mais l'informatique du futur, qui est déjà à nos
portes, devrait être basée sur un nouveau type
d'interface. Les interfaces utilisateur naturelles
(NUI, naturel user interface).
 L'interface utilisateur naturelle est l'évolution
actuelle que nous confrontons.
 Elle est déjà de plus en plus utilisée, mais à des
degrés variés.
 Les interfaces utilisateur naturelles se concentrent
davantage sur le comment faire (doing). Les
utilisateurs interagissent avec le dispositif ou
plate-forme pour obtenir des résultats, de
préférence en profitant de l'interaction effective,
autant que la réalisation elle-même.
 L'interaction est fluide et directe.
 Un élément clé de la conception de l'interface
utilisateur naturelle est la manipulation directe.
 Les utilisateurs aiment avoir le sentiment qu'ils
sont directement en prise avec un écran (utilisation
de gestes).
 Un autre élément clé est que le contenu devient
une partie importante de l'interface.
 Le contenu devra viser les besoins spécifiques de
l'utilisateur. On en trouve déjà plusieurs exemples,
comme dans les médias sociaux. Par exemple, le
flux de nouvelles sur Facebook d’un individu est
évidemment complètement différent d’un autre
individu car le contenu est basé sur les préférences
de chacun.
 Dans l'interaction homme machine, une interface
utilisateur organique (OUI) est définie comme une
interface utilisateur avec un écran non-plat.
 Après l'interface utilisateur graphique (GUI), qui est
basé sur le tube à rayons cathodiques (CRT), et
celle basée sur l'affichage à cristaux liquides à
écran plat (LCD), OUI représente la troisième vague
de paradigmes d'interaction d'affichage, se
rapportant à des écrans flexibles et en forme
multiples.
 Les interfaces organiques désignent des interfaces
flexibles, gonflables ou lumineuses… c’est-à-dire
physiquement modifiables par l’information elle-
même, tant et si bien qu’elles semblent vivantes, à
l’image de nos organes.
 Avec ces interfaces, l’affichage s’adapte à la forme
du support et le support lui-même devient
l’affichage. Le support est évolutif et peut-être
déformé selon les interactions qu’il reçoit, lui
permettant de se reconfigurer si nécessaire pour
refléter la nature de l’information à afficher.
 Naturellement, une interface utilisateur organique
offre beaucoup plus de possibilités pour les
entrées et les sorties (Input/Output) que les
concepts d'interface précédents.
 Pour le moment nous sommes habitués à pointer et
cliquer, et de plus en plus on utilise des gestes,
comme le toucher et l’inclinaison et la rotation.
Finalement, nous allons courber, déformer et
manipuler des objets physiques réels.