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

Qu’est ce qu’une smartwatch ?

#UXDMeetup

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

Dans les imaginaires et la fiction

#UXDMeetup

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

Un peu d’histoire

#UXDMeetup

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

Un peu d’histoire

#UXDMeetup

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

Pourquoi la smartwatch va envahir nos quotidiens ?

#UXDMeetup

#UXDMeetup

#FOMO

#UXDMeetup

Un monde de notifications

#UXDMeetup

Exemples de smartwatch

#UXDMeetup

Exemples de smartwatch

#UXDMeetup

Comment concevoir une bonne applications ?

#UXDMeetup

« 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

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

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

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

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

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

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

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

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

Avec quoi concevoir ?

#UXDMeetup

Guidelines

#UXDMeetup

Guidelines

#UXDMeetup

Templates papier

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

Templates papier

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

Template papier

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

Exemples d’applications

#UXDMeetup

Soundcloud

#UXDMeetup

Bankin’

#UXDMeetup

Voyage-sncf

#UXDMeetup

Amazon

#UXDMeetup

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

#UXDMeetup

Vu à l’UX camp de Berlin

Retour d’expérience

Arnaud MALON - CIC

#UXDMeetup

MERCI :-)

Des questions ?

#UXDMeetup

Baptiste Rongier @brongier

Claire Gallic @clairette5