uxd #10 - comment concevoir une interface sur une smartwatch

38
Comment concevoir une interface sur ma montre connectée ? 16 juin - Cantine Numérique de Nantes #UXDMeetup Baptiste Rongier @brongier Claire Gallic @clairette5

Upload: uxd-meetup

Post on 08-Aug-2015

501 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: UXD #10 -  Comment concevoir une interface sur une smartwatch

Comment concevoir une interface sur ma montre connectée ?

16 juin - Cantine Numérique de Nantes

#UXDMeetup

Baptiste Rongier @brongier

Claire Gallic @clairette5

Page 2: UXD #10 -  Comment concevoir une interface sur une smartwatch

Qu’est ce qu’une smartwatch ?

#UXDMeetup

Page 3: UXD #10 -  Comment concevoir une interface sur une smartwatch

Qu’est ce qu’une smartwatch ?

#UXDMeetupSource : http://www.extremetech.com/computing/188828-samsung-unveils-standalone-gear-s-3g-smartwatch-awesome-until-the-battery-runs-out-after-an-hour

Page 4: UXD #10 -  Comment concevoir une interface sur une smartwatch

Dans les imaginaires et la fiction

#UXDMeetup

Page 5: UXD #10 -  Comment concevoir une interface sur une smartwatch

Dans les imaginaires et la fiction

#UXDMeetup

Premières diffusions : 1983-1986

Inspecteur Gadget

Sa nièce Sophie utilise une montre pour- passer des appels en visio- se géo-localiser- utiliser la commande vocal

Diffusions : années 80

K2000

Utilisation de la montre pour appeler sa voiture

Création : 1995

Toy Story

Utilisation de la montre pour contacter sa base

Page 6: UXD #10 -  Comment concevoir une interface sur une smartwatch

Un peu d’histoire

#UXDMeetup

Page 7: UXD #10 -  Comment concevoir une interface sur une smartwatch

Un peu d’histoire

#UXDMeetup

1983 - Seiko Data 2000

Display text transferred to them from a keyboard dock via magnetic pulses

1980s - Casio Calculator watch

Must-have gadget

2000 - IBM WatchPad

Navigation grâce à une moletteContrôle de d’autres appareils via une connexion bluetoothCommande vocaleConsultation de mails, gestion d’agenda, du carnet d’adressesDétecteur d’empreintes digitales pour identifier le propriétaire

2003 - Palm Fossil Wrist PDA

TouchScreen & sync with a PC

2004 - Microsoft SPOT

Smart personal objects technologyUtilisation de la bande FM (voie hertzienne)Push d’informations telles que la météo, la bourse, de courts messages ou encore le trafic

routier

2009 - Samsung S9110

Connexion BluetoothLecteur audioCommandes vocalesGestion sms/mmsConsultation webCalendrier, calculatrice, enregistreur vocal

Page 8: UXD #10 -  Comment concevoir une interface sur une smartwatch

Un peu d’histoire

#UXDMeetup

Source : http://www.businessinsider.co.id/the-smartwatch-and-fitness-band-market-2015-1/#.VXwQmaSsVAw

Page 9: UXD #10 -  Comment concevoir une interface sur une smartwatch

Pourquoi la smartwatch va envahir nos quotidiens ?

#UXDMeetup

Page 10: UXD #10 -  Comment concevoir une interface sur une smartwatch

#UXDMeetup

#FOMO

Page 11: UXD #10 -  Comment concevoir une interface sur une smartwatch

#UXDMeetup

Un monde de notifications

Page 12: UXD #10 -  Comment concevoir une interface sur une smartwatch

#UXDMeetup

Page 13: UXD #10 -  Comment concevoir une interface sur une smartwatch

Exemples de smartwatch

#UXDMeetup

Page 14: UXD #10 -  Comment concevoir une interface sur une smartwatch

Exemples de smartwatch

#UXDMeetup

Page 15: UXD #10 -  Comment concevoir une interface sur une smartwatch

Comment concevoir une bonne applications ?

#UXDMeetup

Page 16: UXD #10 -  Comment concevoir une interface sur une smartwatch

« Ne confondez pas une smartwatch avec un smartphone »

Quel contenu appartient à votre poignet et lequel ne lui appartient pas ?

Comment une bonne expérience utilisateur est définie ?

Comment obtenir une bonne expérience utilisateur sur une smartwatch ?

#UXDMeetupSlideshare : Apple Watch / Smartwatch UX: 7 Guidelines for greater Apps

Page 17: UXD #10 -  Comment concevoir une interface sur une smartwatch

1 COMPRÉHENSIBLE AU PREMIER COUP D’ŒIL

Source : Onefootball

On jette souvent un petit coup d’œil à sa montre pour connaître l’heure.Par conséquent, les informations présentes à l’écran doivent être conçues pour ce court moment d’interaction avec sa montre.

RECOMMANDATIONS

Limiter les interactions à 5 secondes. Utiliser des icones avec un wording précis. Utiliser des mockups papier taille réelle pour vérifier la

lisibilité du contenu.

#UXDMeetupSlideshare : Apple Watch / Smartwatch UX: 7 Guidelines for greater Apps

Page 18: UXD #10 -  Comment concevoir une interface sur une smartwatch

2 LE CONTEXTE EST ROI

Source : GMail

Pousser les informations pertinentes au bon moment est la clé pour d’une grande application.Cependant, du contenu important dans une situation inadéquate peut se perdre.

RECOMMANDATIONS

Sélectionner les situations pour enrichir ou simplifier votre application.

Utilisez tous les nouveaux capteurs disponibles pour déterminer le contexte de l'utilisateur.

Utiliser le contexte comme un filtre pour vos notifications.

#UXDMeetupSlideshare : Apple Watch / Smartwatch UX: 7 Guidelines for greater Apps

Page 19: UXD #10 -  Comment concevoir une interface sur une smartwatch

3 RESPECTER LA VIE PRIVÉE

Source : Android Wear

Un smartwatch est un dispositif très présent.Comme il est porté toute la journée, il crée une liaison physique et émotionnel de l'utilisateur.

RECOMMANDATIONS

Respecter la vie privée de l'utilisateur et l'informer que dans des situations appropriées en utilisant le son et les vibrations.

Less is more: Soyez encore plus sensibles à l’utilisations des notifications push que sur une application smartphone.

#UXDMeetupSlideshare : Apple Watch / Smartwatch UX: 7 Guidelines for greater Apps

Page 20: UXD #10 -  Comment concevoir une interface sur une smartwatch

4 RÉDUIRE L’UTILISATION DU SMARTPHONE

Source : Apple Passbook

Utiliser un smartphone peut exiger un certain effort, comme le sortir de votre poche.Par exemple, écouter les messages du répondeur ou payer avec votre compte Apple Pay.

RECOMMANDATIONS

Utiliser des suggestions de réponse simple. Laisser l’utilisateur réagir aux notifications: Lire plus

tard, Voir sur mon téléphone, Supprimer ... Montrer suffisamment d'informations, pour laisser

l'utilisateur décider d’ouvrir ou non son téléphone..

#UXDMeetupSlideshare : Apple Watch / Smartwatch UX: 7 Guidelines for greater Apps

Page 21: UXD #10 -  Comment concevoir une interface sur une smartwatch

5 EVITER LES INPUTS

Source : Apple SMS

La smartwatch est un affichage étendu du smartphone.La taille d'une smarthwatch n’est pas conçue pour plus d'une gesture (swipe, tap).

RECOMMANDATIONS

Les inputs devrait être facultatifs. Remplacer les champs de texte en proposant des modèles et

des réponses rapides. Si la saisie d’un texte long est nécessaire, l’enregistrement

vocale devrait être la seule possibilité. Passez sur l'application smartphone pour plus d'interactions..

#UXDMeetupSlideshare : Apple Watch / Smartwatch UX: 7 Guidelines for greater Apps

Page 22: UXD #10 -  Comment concevoir une interface sur une smartwatch

6 LESS IS MORE

Source : Trouver mon smartphone

Sur un écran d'ordinateur, les petits écrans comme les smartwatch apparaissent beaucoup plus grand que leur taille réelle.Une mauvaise prévisualisation peut amener à un mauvais résultat.

RECOMMANDATIONS

Plus de fonctions signifient des interactions plus longues - le smartphone est fait pour ça.

Concentrez-vous sur un seul usecase à la fois. Tester rapidement sur papier.

#UXDMeetup#UXDMeetup

Slideshare : Apple Watch / Smartwatch UX: 7 Guidelines for greater Apps

Page 23: UXD #10 -  Comment concevoir une interface sur une smartwatch

8 ETENDRE L’APPLICATION SMARTPHONE

Source: Lufthansa

Utiliser le contexte pour obtenir des informations spécifiques en un un coup d'œil.Par exemple: "Combien de temps avant l'embarquement?" ou "Combien de temps cela prend-il pour se rendre à la porte?« Porter votre smartwatch en permanence vous permet d'obtenir des données plus précises et, vous permet d’étendre les fonctionnalités de votre application smartphone

RECOMMANDATIONS

Pensez quelles extensions seraient utiles par rapport à l'application smartphone.

Enrichir l‘application smartphone à l'aide des nouvelles données plus précises.

Le contexte est l’élément clé de la smartwatch

Slideshare : Apple Watch / Smartwatch UX: 7 Guidelines for greater Apps

Page 24: UXD #10 -  Comment concevoir une interface sur une smartwatch

Naturellement, cela conduit à une règle simple:

NE JAMAIS COPIER LES FONCTIONNALITÉS DE L’APPLICATION

SMARTPHONE

#UXDMeetupSlideshare : Apple Watch / Smartwatch UX: 7 Guidelines for greater Apps

Page 25: UXD #10 -  Comment concevoir une interface sur une smartwatch

Avec quoi concevoir ?

#UXDMeetup

Page 26: UXD #10 -  Comment concevoir une interface sur une smartwatch

Guidelines

#UXDMeetup

Page 27: UXD #10 -  Comment concevoir une interface sur une smartwatch

Guidelines

#UXDMeetup

Page 28: UXD #10 -  Comment concevoir une interface sur une smartwatch

Templates papier

#UXDMeetuphttp://pxdotpt.com/blog/2014/11/16/freebie-2-smartwatch-templates

Page 29: UXD #10 -  Comment concevoir une interface sur une smartwatch

Templates papier

#UXDMeetuphttp://pxdotpt.com/blog/2014/11/16/freebie-2-smartwatch-templates

Page 30: UXD #10 -  Comment concevoir une interface sur une smartwatch

Template papier

#UXDMeetuphttp://pxdotpt.com/blog/2014/11/16/freebie-2-smartwatch-templates

Page 31: UXD #10 -  Comment concevoir une interface sur une smartwatch

Exemples d’applications

#UXDMeetup

Page 32: UXD #10 -  Comment concevoir une interface sur une smartwatch

Soundcloud

#UXDMeetup

Page 33: UXD #10 -  Comment concevoir une interface sur une smartwatch

Bankin’

#UXDMeetup

Page 34: UXD #10 -  Comment concevoir une interface sur une smartwatch

Voyage-sncf

#UXDMeetup

Page 35: UXD #10 -  Comment concevoir une interface sur une smartwatch

Amazon

#UXDMeetup

Page 36: UXD #10 -  Comment concevoir une interface sur une smartwatch

The 7 guidelines for greater smartwatch apps in #sketchnotes Thanks @dolbydigger @FrauHoelle ! #uxce15

#UXDMeetup

Vu à l’UX camp de Berlin

Page 37: UXD #10 -  Comment concevoir une interface sur une smartwatch

Retour d’expérience

Arnaud MALON - CIC

#UXDMeetup

Page 38: UXD #10 -  Comment concevoir une interface sur une smartwatch

MERCI :-)

Des questions ?

#UXDMeetup

Baptiste Rongier @brongier

Claire Gallic @clairette5