webdesign sites web et mobiles-strategies et enjeux-ergonomie

Sites Web et MobilesStratégies et enjeux de l'ergonomie

Webdesign

L'ergonomiedu Web

Supports – tailles des écrans

Variété innombrable de tailles d' écrans

Supports – résolution

La concentration de pixels par pouces est élevée et relative

Supports – taille d'écran

La tailles des écrans

source : http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6source : http://www.cruxcollaborative.com/the-mobile-web-an-illustrated-look

Supports – mobile vs desktop

L'avenir est au mobile ?

Les solutionset stratégies

Supports – solutions

1. Ne rien faire...Les supports mobiles et navigateurs disposent d'outils d'agrandissement du contenu et de la page

2. Interface fluideLargeur des interfaces définies en pourcentage

3. Application Web : reponsive designStyles (CSS), outils (JS) et contenus adaptés pour différentes largeurs de support

4. Site Web dédiéRedirection automatique vers un site Web dédié aux supports mobilesInterface, outils et contenus créés sur mesure

5. Application nativeEn interaction avec les périphériques et outils du support mobile.(géolocalisation, contacts, appareil photo,...)

https://twitter.com https://twitter.comhttp://mobile.twitter.com

Supports

Exemple : Twitter

http://w3.orghttp://w3.org http://w3.org

Supports

Exemple : W3C

http://www.apple.com http://www.apple.comhttp://www.apple.com http://www.apple.com

Supports

Exemple : Apple

Responsive designMedia queries

Responsive design

Egalement appelé « Media queries ». Modifie le le style (CSS) selon deux critères

Média : définit le support

Fonction : fixe les limites d'application

Responsive design

Médiasallscreenhandheldprintaural / speechbrailleembossedprojectionttytv

Tous (par défaut)EcransTéléphones mobilesImpressionVocalesPlages brailleImprimante brailleProjecteursTerminal (caractères mono espace)Télévision

allscreenhandheldprintaural / speechbrailleembossedprojectionttytv

Responsive design

Profondeur de la couleur (bits/pixel)Table de couleurs indexéesRatio de la taille (ex. 16/9)Ratio de la zone d'affichage du périphériqueHauteur en pixel du périphériqueLargeur en pixels du périphériqueAffichage (bitmap ou grid – ex. lcd)Hauteur en pixel de la zone d'affichageProfondeur des niveaux de gris (bits/pixel)Orientation du périphérique (portait ou landscape)Résolution d'affichage du périphériqueBalayage des téléviseurs (progressive ou interlace)Largeur en pixels de la zone d'affichage

colorcolor-indexaspect-ratiodevice-aspect-ratiodevice-heightdevice-widthgridheightmonochromeorientationresolutionscanwidth

Fonctionsmin/maxmin/maxmin/maxmin/maxmin/maxmin/max

min/maxmin/max

min/max

http://screensiz.es/phone

Responsive design

Viewport : La surface de la fenêtre du navigateur

Responsive design

Les points de rupture : quelques repères

1024px demeure la référence minimum de la largeur des écrans de bureau (~9%, sept. 2014)

Responsive design

Viewport fixé

initial-scale=1.0 : Elimine la possibilité d’agrandir manuellement l’interface. Impose une proportion de 100% de la taille des contenus.

width=device-width : Ajuste la taille des contenus (images) à la taille réelle de l’écran.

Responsive design

Impression de la page

Faire disparaître les outils de navigations.

Modifier la taille des caractères en pt.

Modifier les dimensions en mm, cm ou in.

Indiquer les coupures (sauts) de page.

MobileInterface & outils

Mobile

Les supports mobiles nécessitent une adaptation des interfaces etdes outils de navigation.

Point d’impact large

Navigation simplifiée

Mobilité

Facteurs :

Mobile - navigation

Les menus sont rétractables et invisibles. Accessibles en un «touch clic». Priorité au contenu.

Mobile - contenu

Il n’y a pas d’état de survol (:hover). Retour aux standards du Web (bleu et souligné).

Mobile - contenu

Les accordéons facilitent un aperçu groupé du contenu.

Mobile - contenu

Ajuster les textes et les espaces afin de faciliter la lecture.

Mobile – Les boutons

Ajuster les boutons afin de faciliter leur accès.

Espace cliquablesMinimum—17 pt / 6 mmPréférable—23 pt / 8 mmMaximum—43 pt / 15 mm

Mobile – Les champs des formulaires

Ajuster les textes et les espaces afin de faciliter la lecture.

Espace cliquablesMinimum—17 pt / 6 mmPréférable—23 pt / 8 mmMaximum—43 pt / 15 mm

Espace entre les éléments afin d'éviter les interférencesMinimum—23 pt / 8 mmPréférable—28 pt / 10 mm

Mobile – Les outils des formulaires

Privilégier des outils proposant le «touch clic» à l’utilisation du clavier.

L’attribut type notament enrichi en HTML 5 permet de créer des outils de formulaires pratiques pour les supports mobiles. Leur aspect sera cependant celui défini par le navigateur.

Le Javascript sera cependant nécessaire pour des outils personnalisés.

UI DesignInterface utilisateur

UI Design

Le design de l’interface utilisateur (UI) fait parti de l’expérience utilisateur et consiste à augmenter la valeur de l’interface.

Aspects Valeur Ce qui concerne...Composition graphique

Contenus

Outils

Esthétisme

Accessibilité

Utilisabilité

Organisation des éléments dans la pageMise en évidence de contenusPositionnement stratégique d’éléments

Terminologie cohérenteTextes descriptifs et exemples

Facilite l’utilisation des fonctionnalités et objetsPropose des alternatives d’utilisationIntègre des ressources tiers tels que les réseaux sociaux

UI Design : étude de cas

Le formulaire d’enregistrement (login)

Doit comprendre comment donner des informations

Doit être aidant, aisé et intuitif.

1. La composition graphique

2. Le contenu

3. Les outils

D'autres exemples

http://www.linkedin.com/in/olivierdommange

Olivier Dommange

webdesign sites web et mobiles-strategies et enjeux-ergonomie

Design

p41 - webdesign

book webdesign

magazine webdesign

webdesign tanfolyam - mintalecke 2. webdesign készítés...

webdesign workflow

portofoliu webdesign

webdesign sites web et mobiles-methodes-realisation-outils

introduksjon til webdesign · 2 er god webdesign viktig? 2...

guide - dedi agency › wp-content › uploads › ... ·...

informations responsable ... · responsable pÉdagogique...

aula05 webdesign

webdesign fachbegriffe

webdesign sites web et mobiles-tendances 2015

sicambria webdesign

webdesign - p1

apresentação webdesign

ergonomie, accessibilité et webdesign d'un système de...

la plateforme multicom exemples dintervention en ergonomie :...

webdesign opdrachten

modernes webdesign