web in - mobile first: créer une bonne expérience mobile
Post on 18-Oct-2014
1.329 views
DESCRIPTION
Comme l'industrie du mobile explose et que le support pour de nouvelles technologies est maintenant disponible sur les principales plateformes, nous devons arrêter de prendre les téléphones mobiles comme des appareils de second plan. La philosophie mobilité en premier (Mobile First) nous force à penser, à designer et à créer pour les appareils mobiles en premier lieu. Utiliser cette technique nous forces à focalisés sur ce qui est vraiment important pour nos utilisateurs, nos clients, sans négliger pour autant les autres appareils, tels que les PCs.TRANSCRIPT
Mobile First: créer une bonne expérience mobileFrédéric Harper
Technical Evangelist @ Microsoft Canada
@fharper | outofcomfortzone.net
20
12
-11
-12
le problème
le Web d’avant, la perception actuelle
le Web d’aujourd’hui
Fundamentally, there’s just one World Wide
Web, but it can be experienced in different
ways on different devices.
- Luke Woblewski, Mobile First, A Book Apart
donc, trop souvent…
les mobiles sont pris en considération comme un élément à
part
les mobiles ne sont tout simplement pas pris en considération
l’expérience Web n’est pas très bonne sur les appareils
mobiles
l’anti expérience
la solution
une
solution
Mobile first
Luke Wroblewski bloguait à ce sujet le 3 novembre 2009
L’expérience
les raisons
la croissance
mobilité en croissance
• D’ici 2014 = mobile > desktop
• Aux É-U, 25% = mobile seulement!
• Exemple (sous peu):
50% mobile des vidéos sur YouTube
Sources:http://www.trinitydigitalmarketing.com/the-rise-of-mobile-infographichttp://crave.cnet.co.uk/software/google-is-now-a-mobile-first-company-execs-say-50009727/http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
en perspective
Source: http://lukew.com/
N’utilise-t-on pas tous des apps?
347% d’augmentation sur
le navigateur mobile (4.7
million) en janvier 2010
Source: http://www.lukew.com/
N’utilise-t-on pas tous des apps?
112% d’augmentation sur
l’utilisation du navigateur
mobile (251 million) en
janvier 2010
Source: http://www.lukew.com/
les contraintes
$$$
les capacités
les capacités des appareils mobiles
• Détection de la geolocalisation - GPS
• Orientation de l’appareil – Accéléromètre
• Écran tactile
• NFC (Near Field Communications)
• et plus…
le contexte
la mobilité n’est pas que mobile
Souvent pris comme des inconvénients, il faut savoir en
tirer profit!
les avantages
Mobile First
• Prépare le site aux nouvelles opportunités mobiles
• Nous force à prioriser et à nous concentrer sur le
contenu/contenant
• Permet de créer de meilleures experiences Web mobile
• Permet de créer des experiences innovantes
l’inverse fonctionne bien non?
la réalité
Source: http://xkcd.com/773/
les inconvénients
les désavantages
• Changement dans la façon
• de penser le design/la création
• de créer les sites
• On doit vraiment connaître les besoins et/ou les
produits/services de ses clients
implémentation
redéfinir l’expérience
UI
NUI – Natural User Interface
Touch
Espace facile ou difficile à
atteindre
Limité à l’essentiel
Touch
Recommandé = 9mm/34px
Minimum = 7mm/26px
Espace minimum = 2mm/8px
Grandeur de l’élément visuel =
60-100%Source: Windows Phone UI Design and Interaction Guide v2.0
le code
1. Éliminer les redirections
2. Utiliser Application Cache pour le stockage de contenu local
3. Utiliser CSS3 et les Canvas au lieu d’images quand c’est
possible
4. …
= optimiser, optimiser et optimiser!
fonctionnalités
1. Utiliser la géolocalisation
1. Location et direction
2. Utiliser l’appareil photo et/ou le
micro
3. Utiliser le RFID/NFC
se résume…
Expérience mobile = capacités – contraintes +
priorisation
contextes
ressources
Screenfly
http
Luke W post: http://www.lukew.com/ff/entry.asp?933
Mobile First book: http://www.abookapart.com/products/mobile-first
Luke W presentation: http://vimeo.com/38187066
A list Apart: http://www.alistapart.com/
Tapworthy: http://shop.oreilly.com/product/0636920001133.do
Screenfly: http://quirktools.com/screenfly/
en résumé, Mobile First c’est
• Penser à la croissance des appareils mobiles
• Minimiser les contraintes
• Maximiser les capacités et les contextes
• Généralement une meilleure expérience pour l’utilisateur
• Pas nécessairement facile comme approche au début
aussi…
• Mobile First <3 Responsive Web Design
• Responsive Web Design != Mobile First
• Content First est la clé
• Ce n’est que le début…
…every desktop UI should be designed for touch
now. When any desktop machine could have a
touch interface, we have to proceed as if they all
do.
- Josh Clark, http://globalmoxie.com/blog/desktop-touch-design.shtml
Every UI should be designed for touch now!
- Frédéric Harper, conférence Web-In, 2012-11-12
