A l'usage des designer d'Apps, une rappel des bonnes pratiques à adopter pour une ergonomie adaptée aux guidelines et aux usages d'Apple. Quelques infos aussi sur ce qu'il est désormais possible de faire avec la Watch. Plus d'infos sur http://www.bewoopi.net

1. APPLICATIONS IOS / APPLE WATCH
COMPOSANTS ET RECOMMANDATIONS UI

2. SPLASHSCREEN
Point d’entrée obligatoire dans l’app
• Court : pas d’infos essentielles
• Ne pas le prolonger plus que
nécessaire
• Fond + Image et/ou texte

3. MENU LATÉRAL
Rien n’existe de manière native !
Au choix :
• Faire un menu original (librairie)
• Se calquer sur la version Android
• S’en passer et adopter une
navigation plus créative

4. LES ONGLETS
Version native : la Tab Bar
• En bas de l’écran
• Max 5 items (4 conseillés)
• Icône et/ou texte
• Le dernier bouton peut ouvrir un
menu latéral
• Couleur de sélection
La version « Android-like » nécessite
le passage par une librairie

5. BARRE DE
NAVIGATION
• En haut de l’écran
• Fond monochrome, opaque ou non
• Bouton de gauche : Back
• 2 boutons de droite max (1 seul
fortement conseillé par Apple)
• Si besoin de plus : Toolbar en bas ou
repenser l’ergonomie
Titre centré sur l’espace disponible,
Espace occupé par les boutons
déterminé par l’OS

6. DIALOGUES ET
NAVIGATION
2 types « naturels » de transition :
• Push (navigation classique)
• Modale (ouverture « par dessus »)
Un écran affiché par push a un bouton
Back
Un écran affiché de façon modale a (ou
pas) un bouton Close

7. DIALOGUES ET
NAVIGATION
Bonnes pratiques concernant les alertes :
• Information : non critique, ne pas
bloquer la navigation
—> Toast (rien de natif)
• Erreur / Confirmation : Bloquer la
navigation, donner des options à
l’utilisateur
—> AlertView
• Formulaire, ou input utilisateur de
manière générale : nouvelle vue
modale

8. DIALOGUES ET
NAVIGATION
La popover :
• Sur iPad, à partir d’un bouton avec un
point d’ancrage
• Sur iPhone, à partir du bas de l’écran,
en semi-transparence

9. LES BOUTONS
• Nom/Image explicite : l’utilisateur
ne doit pas se demander à quoi
sert le bouton
• La taille du bouton doit être
suffisante pour un touch facile
OUI NON

10. LES BOUTONS
• Dans les Navigation Bar / Tool Bar :
donner assez d’espace pour
faciliter la sélection
• Idem que pour les boutons dans
l’écran : le bouton doit être
suffisamment grand pour que le
clic soit facile
OUI NON

11. WATCHOS 2
Les notions essentielles :
• L’Apple Watch reste une montre :
informations essentielles, interactions
légères
• Digital Crown : la molette sert à
scroller ou à sélectionner un élément
d’un picker
• Force touch : un appui fort sur l’écran
ouvre le menu associé

12. WATCHOS 2 : LES
NOTIFICATIONS
• 2 modes : short look et long look
• Short look : apparait quand on
approche le poignet, informations
minimales, design par défaut
• Long look : apparait au touch ou
après un moment, customisable,
peut comporter des interactions

13. WATCHOS 2 : LES
APERÇUS
L’aperçu est une vue permettant à
l’utilisateur d’avoir un accès rapide aux
informations essentielles de son app
Pour qu’il soit intéressant :
• Pertinent par rapport au contexte
• Contenu concis et facile à lire
• Cohérent par rapport aux autres
Un utilisateur choisit quels aperçus il
veut afficher sur sa montre !

14. WATCHOS 2 : LA
NAVIGATION
• Pas obligatoire !!
• 2 modes principaux, selon l’utilisation
• Navigation par pager pour des
informations non liées
• Navigation hiérarchique pour des
informations liste - détail
Pager Hiérarchique

15. WATCHOS 2 : LE
DESIGN
• Fond noir (pour créer l’illusion d’une
absence de transition avec le bord de
l’écran)
• Alignement à gauche pour la lisibilité
• Utiliser le scroll intelligemment pour ne
pas afficher trop d’informations sur une
taille trop réduite
• Afficher le même contenu sur les 2 tailles
d’écran

16. AUTEUR : NICOLAS GOOSSAERT
SOURCES : USER INTERFACE GUIDELINES (DEVELOPER.APPLE.COM)
VOUS VOULEZ FAIRE DÉVELOPPER UNE APP IOS ?
HTTP://WWW.BEWOOPI.NET
CONTACT@BEWOOPI.NET