Après avoir compris les objectifs globaux de notre application existante, il est temps de mettre nos mains dans le cambouis technique.
Analysez les écrans
Commençons par une étape cruciale : l'inventaire des écrans. Cela nous aidera à visualiser la structure de l'interface utilisateur et à évaluer l'expérience utilisateur actuelle. Prenons le temps ensemble de cataloguer précisément chaque écran de l’application EPCollaboratif. Nous allons suivre les étapes suivantes.
Ouvrez votre projet dans Xcode.
Naviguez à travers les différents fichiers de vue ou "View" en anglais. Nous utiliserons plutôt la version anglaise dans ce cours.
Pour chaque écran, notez son nom, sa fonction et ses caractéristiques principales.
Voici ce que ça donne :
Écran d'accueil "HomeScreenView"
Il permet aux utilisateurs de visualiser tous les projets en cours. Les fonctionnalités clés incluent la recherche rapide de projets et une vision de l’état d’avancement d’un projet.
Écran de gestion de projet "ProjectDetailsView"
Il offre une vue détaillée d'un projet, où les utilisateurs peuvent ajouter ou modifier des tâches, les statuts de chacune d’elles et l’état d’avancement du projet.
Écran d’ajout d’un nouveau projet “AddProjectView”
Il permet aux utilisateurs d’ajouter un projet dans leur liste de projets en cours.
Écran d’ajout d’une nouvelle tâche "AddTaskView"
Il permet aux utilisateurs d’ajouter une tâche dans un projet.
Analysez le code
En plus de cet inventaire visuel, il est essentiel de jeter un œil au code sous-jacent. Nous allons pour ça ouvrir les fichiers de code source de chaque écran et examiner les points suivants :
Dernière modification : Vérifiez la date de la dernière modification du fichier pour comprendre si certaines parties de l'application sont obsolètes ou n'ont pas été mises à jour récemment.
Documentation : Est-ce que le code est bien documenté ? La documentation est-elle à jour ? Cela inclut les commentaires dans le code, les annotations pour expliquer les fonctions complexes et les instructions sur comment le code interagit avec d'autres parties de l'application.
Analysez la navigation
Maintenant que nous avons une compréhension claire de l'interface individuelle de chaque écran, il est crucial d'examiner comment ces écrans sont connectés entre eux. Comprendre l'architecture de navigation de l'application EPCollaboratif nous permettra de détecter les points de friction potentiels dans l'expérience utilisateur et d'identifier plus tard les opportunités d'amélioration pour une navigation plus fluide et intuitive. Pour analyser la navigation, posez-vous les questions suivantes.
Comment la navigation de l’application est-elle structurée ?
Focalisons-nous sur la façon dont les écrans sont accessibles depuis l'écran d'accueil. Généralement, il existe plusieurs possibilités pour naviguer à travers une application. En voici des exemples :
Barre de navigation : Est-ce que l'application utilise une barre de navigation en haut de l'écran pour permettre aux utilisateurs de naviguer facilement entre les vues principales ?
L’application EPCollaboratif permet, par exemple, aux utilisateurs de revenir à l'écran d'accueil à partir de n'importe quel point dans l'application en utilisant la barre de navigation.
Onglets (tab bar en anglais) : Y a-t-il des onglets en bas de l'écran qui permettent un accès rapide à différentes sections comme les projets, tâches, ou paramètres ?
Menu latéral : L'application dispose-t-elle d'un menu déroulant latéral (aussi appelé menu hamburger) qui contient des liens vers des fonctionnalités ou des sections moins fréquemment utilisées ?
Est-ce que la navigation est cohérente ?
Voyons maintenant si cette navigation est intuitive et cohérente. Considérez les aspects suivants.
Cohérence visuelle : Les éléments de navigation sont-ils cohérents en termes de design et de placement à travers différentes vues ? La navigation d’EPCollaboratif est faite de manière intuitive grâce à l’utilisation d’une barre de navigation.
Prédictibilité : Les actions de navigation entraînent-elles les résultats attendus par les utilisateurs ?
Réactivité : La navigation répond-elle rapidement aux actions de l'utilisateur, ou y a-t-il des délais perceptibles qui pourraient frustrer l'utilisateur ? Dans le cas d’EPCollaboratif, il n’y a aucun délai car les données ne sont pas chargées depuis un serveur distant.
Comment le flux utilisateur (user flow) se présente-t-il ?
Illustrons le parcours typique d'un utilisateur au sein de l'application. Nous devons tracer un chemin que l'utilisateur moyen pourrait prendre pour accomplir une tâche courante. Prenons, par exemple, la création d’un projet ou l’assignation d’une tâche. Notez les trois étapes suivantes :
Démarrage : À partir de l'écran d'accueil, l'utilisateur peut voir un résumé des projets actifs.
Action : L'utilisateur sélectionne un projet pour voir les détails et ajoute une nouvelle tâche.
Suivi : Après l'ajout de la tâche, l'utilisateur souhaite suivre l'avancement du projet sélectionné.
Observons comment les écrans sont organisés et reliés entre eux. L’application EPCollaboratif est basée sur un user flow très simple. Elle inclut par exemple une liste des projets en cours, la possibilité de naviguer vers la vue d’ajout d’un nouveau projet, ou bien vers celle qui affiche le détail d’un projet (comprenant la liste des tâches associées etc). Depuis cette dernière vue, l’utilisateur peut aller plus loin et vers une vue d’ajout de tâche.
Soyez alors attentif aux potentiels goulots d'étranglement où l'utilisateur pourrait se sentir perdu ou pourrait effectuer des actions inutilement complexes pour atteindre son objectif. Notre application manque, par exemple, d’une fonctionnalité de tri ou filtre des tâches sur la vue du détail d’un projet. Ça peut rendre l’expérience complexe si l’on doit trouver une tâche particulière dans une longue liste.
À vous de jouer !
Contexte
Nous avons exploré l'application EPCollaboratif et compris son architecture ainsi que les besoins des utilisateurs. Maintenant, concentrons-nous sur l'écran spécifique d'ajout de tâche, qui est un composant clé pour la gestion des projets. Cet écran permet aux utilisateurs d'introduire de nouvelles tâches dans un projet, en spécifiant les détails nécessaires pour une gestion efficace.
Consignes
Ouvrez le fichier "AddTaskView" et examinez l'écran associé pour comprendre comment il s'intègre dans l'expérience utilisateur globale de l'application. Identifiez les champs et les options disponibles pour l'ajout d'une tâche.
Évaluez via Xcode Preview si l'interface est intuitive et facile à utiliser. Considérez la facilité de navigation entre les champs et l'accessibilité des options.
Regardez si la documentation est présente et de quand date la dernière mise à jour.
Livrable
Un état des lieux couvrant les deux étapes décrites ci-dessus. Un simple format texte suffit pour cet exercice.
En résumé
Effectuer un inventaire des écrans et examiner leur conception et interconnexion révèle des informations précieuses sur l'expérience utilisateur actuelle.
Examiner la documentation et la structure du code existant aide à évaluer la maintenabilité de l'application.
Comprendre l'architecture de navigation et le flux utilisateur à travers l'application permet de détecter les goulots d'étranglement et les points de friction.
Maintenant que nous avons une compréhension approfondie de l'état actuel de l'application EPCollaboratif, y compris ses objectifs et son architecture, passons au chapitre suivant. Nous définirons les objectifs précis pour transformer et optimiser cette application, en passant d'une architecture monolithique à une structure plus modularisée.
