Présentation @CocoaHeads Bordeaux #2, jeudi 9 décembre 2010. Wopata parle ergonomie mobile et modèles de navigation sur iPhone.

2. ERGONOMIE
MOBILE

3. ERGONOMIE MOBILE CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
REGLES D’OR
LUC CHAISSAC @lucchaissac

4. © @maxvoltar

9. 44px
44px
44px

10. ERGONOMIE MOBILE CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
MOBILE GUIDELINES :
«In mobile apps, the main function should be
immediately apparent. Minimalize the number
of controls from which users have to choose.»
LUC CHAISSAC @lucchaissac

11. MODELES
DE
NAVIGATION

13. FLAT PAGES

14. TAB BAR

15. ARBORESCENCE

16. MODELES DE NAVIGATION CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
FLAT PAGES
LUC CHAISSAC @lucchaissac

26. POUR CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
• Accès rapide au contenu
• Nombre variable d'écrans
• Facilité d’utilisation
• Plus d’espace pour le contenu
LUC CHAISSAC @lucchaissac

27. CONTRE CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
• 20 pages max
• Pages invisibles
• Navigation page par page
LUC CHAISSAC @lucchaissac

28. MODELES DE NAVIGATION CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
TAB BAR
LUC CHAISSAC @lucchaissac

38. POUR CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
• Navigation rapide
• Menu clair et simple
LUC CHAISSAC @lucchaissac

39. CONTRE CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
• Espace occupé
• 5 tabs max
LUC CHAISSAC @lucchaissac

40. MODELES DE NAVIGATION CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
ARBORESCENCE
LUC CHAISSAC @lucchaissac

52. POUR CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
• Grand nombre de
fonctionnalités/catégories
• Interaction intuitive
LUC CHAISSAC @lucchaissac

53. CONTRE CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
• Catégories sur page index
• Retour à l’index obligatoire
LUC CHAISSAC @lucchaissac

54. MODELES DE NAVIGATION CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
COMBINAISON
DE MODELES
DE NAVIGATION
LUC CHAISSAC @lucchaissac

59. CONCLUSION CONCEVOIR LA NAVIGATION
D’UNE APPLICATION
• Keep it simple
• Toujours adapter la navigation
au contenu de l’application
• Respectez les standards
LUC CHAISSAC @lucchaissac

60. MERCI
SOURCES
Apple Human Interface Guidelines
bit.ly/iPhoneHIG
-
Tapworthy
bit.ly/tapworthy
LUC CHAISSAC @lucchaissac