Présentation des guidelines iOS pour Afelio

1. iOS Human
Interfaces Guidelines
Simon Dellise - iOS Developer & Integrator

2. Agenda
• UI Elements
• UI Bars
• UI Views
• UI Controls
• Visual Design
• Interactions
• Other things

3. UI Elements
UI Bars, UI Views, UI Controls

4. UI Bars
Status, Navigation, Search, Tab & Tool Bars

5. Status Bar
• Coordonner la couleur de fond Par
défaut, le fond est transparent et le texte
noir.
• Le texte est noir ou blanc en fonction de
la couleur décidée dans la Nav Bar
• Eviter de la masquer en permanence
• Sauf pour du contenu full screen temporaire
(cf. app Photos)

6. Navigation Bar
• Y inclure soit
• le titre de la vue en cours
• des onglets de type "segmented controls"
• quelques contrôles rapides
• Ne pas y inclure
• "trop" de contrôles
• le chemin de navigation, le bouton de
retour joue ce rôle

7. Search Bar
• À utiliser sur les listes soit de façon
• proéminente (screenshot 1)
• minimale (screenshot 2)
• Penser à traduire le placeholder
• Ne pas avoir peur de les utiliser !

8. Tab Bar
• Permet de switcher rapidement entre
différentes sections d’une app ayant la
même importance
• Comment les utiliser ?
• Ne pas désactiver d’onglets
• Maximum 5 items
• L'utilisateur ne peut pas éditer les items
• Uniquement pour la navigation :
pour des actions, utiliser une Toolbar

9. Toolbar
• À utiliser pour afficher des actions
récurrentes pour l’utilisateur
• Comment l’utiliser ?
• Ne pas y placer des commandes peu
utilisées
• Ne pas y inclure de segmented ctrls
• Icônes si plus de 3 éléments, sinon texte

10. UI Views
Action Sheets, Alerts, Tables, ...

11. Action Sheet
• Ne peut contenir que des actions
• Maximum 5 éléments (+ Annuler)
• L'élément destructif est toujours en
premier et en rouge
• Ne pas customiser cet élément !

12. Alert
• Minimum 1 action, maximum 5
• Ne jamais tenter d'afficher 2 Alerts en
même temps : crash de l'application
• Ne pas customiser cet élément !

13. Table View
Plain
• Le contenu doit toujours être mis à jour
automatiquement ou offrir une possibilité
d'être rafraichi manuellement (pull to refresh)
• Possibilité d'ajouter un header et un footer,
ainsi qu'une indexation
• Pas de customisation du type des flèches
(hors couleur)

14. Table View
Grouped
• Chaque groupe peut avoir un header
et un footer
• Pas d'indexation du contenu possible
• Noms des sections toujours en
majuscules
• Sert de menu ou à structurer de
l’information !

15. … and so many others
Maps, Pages, Popover, Activity Views, ...
https://developer.apple.com/ios/human-interface-guidelines/ui-views/

16. UI Controls
Buttons, Pickers, Switches, Segmented Controls, ...

17. Buttons
• 3 types de boutons :
• System Buttons
• Add Contact Button
• Detail Closure Button / Info Button
• Un bouton n'a habituellement pas de fond
• Fond possible pour les Call To Action (CTA)
• Les intitulés sont de la responsabilité
UX uniquement

18. Picker
• Placer les valeurs dans un ordre logique
• Le Picker peut être placé directement
sous un champ ou en bas d'une vue en
superposition
• Attention : utiliser une TableView à la
place d'un Picker si grand nombre de
valeurs !

19. Switch
• Signifie toujours ON/OFF (pas OUI/NON)
• Il ne faut jamais décrire le switch
• Ajuster les couleurs aux couleurs de l'app
• Pas de customisation des formes !
• À utilise uniquement dans des Tables Row
• Peuvent afficher ou masquer dynamiquement
d'autres éléments de la vue

20. Segmented Controls
• À utiliser si le contenu d’une vue peut
changer selon un choix de l’utilisateur
• Comment les utiliser ?
• Limiter le nombre de contrôles
(min 2 - max 5)
• Ils ont toujours la même largeur
• Les couleurs doivent rester cohérentes

21. … and so many others
Stepper, Slider, Labels, ...
https://developer.apple.com/ios/human-interface-guidelines/ui-controls/

22. Visual Design
Typography, icons & images, ...

23. Typography
" Use font weight, size, and color to highlight
the most important information in your app. "
• Ne pas utiliser de police custom, San Francisco est pensée pour fonctionner dans tous les cas.
• N'utiliser qu'une seule police au sein de l'application.
https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/

24. Icons & images
Penser à toujours fournir toutes les bonnes tailles d'icônes et d'images !
https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/

25. One more thing ...
Navigation, loaders et temps de chargement, 3D Touch, ...

26. Navigation
Pushed View Controller vs. Modal
Pushed View Controller
À utiliser dans un flux de navigation
classique pour passer de page en page
Modal
À utiliser lors d’une action (ajout à un liste,
paramètres, filtres, …)

27. Gestures
• Au possible, ne pas créer de geste spécifiques et utiliser les gestes standards :
https://developer.apple.com/ios/human-interface-guidelines/interaction/gestures/
• Ne pas bloquer les gestes du système (centre de notifications, Control Center, ...)
• Les gestes "custom" doivent être des suppléments et non des remplacement aux gestes du
système

28. Loaders
& temps de chargement
• Au minimum : afficher un spinner
• Jamais d'écran blanc/statique, cela laisse
penser que l'application freeze
• Au possible, afficher une barre de
progression en temps réel
• Divertir ou éduquer l'utilisateur avec des
informations, trucs, astuces permet de
masquer le temps de chargement

29. 3D Touch
Peek & Pop
• Utile pour prévisualiser du contenu riche
(mail, photo) ou live (video)
• Toujours autoriser les Peek à être Poppés
• Ne pas lancer de Peek à partir d'un bouton
mais bien de l'élément directement
• Toujours prévoir un autre moyen d'accéder
à l'élément que le Peek & Pop

30. 3D Touch
Home Screen Quick Actions & Widget
Les Home Screen Quick Actions permettent à
l'utilisateur d'accéder directement depuis son
Home Screen à des fonctions principales de
l'application.
• À n'utiliser que pour accéder à des fonctions
importantes (pas de paramètres par
exemple)
• Ne pas rendre les quick-actions dynamiques
si le pourquoi n'est pas clair pour l'utilisateur
(en fonction de l'heure, de sa position, ...)
• Ce n'est pas une alternative à une navigation
mal pensée !

31. - Steve Jobs -
« Simple can be harder than complex: You have to work hard
to get your thinking clean to make it simple. »