UI Design : Les dessous de Task 2
→ This post is translated in English
Lors du lancement de Task en juin 2012, des blogs ont fait le rapprochement entre Task et l'application Clear sortie quelques semaines plus tôt. Il est vrai que les deux apps partagent des gestes précurseurs, devenus courants aujourd'hui dans la manipulation des listes. À l'instar du pull-to-refresh introduit par Tweetie, ces gestes sont désormais inscrits dans le langage de l'interaction sur iOS. Il faut bien comprendre que Task n'est pas une simple to-do list mais un agenda. Nous avons introduit de nombreux éléments innovants pour repenser l'agenda sur mobile. Et nous les avons perfectionné avec Task 2. C'est donc l'occasion de revenir sur ces apports et d'insister sur leur importance.
Notre but avec Task est de rendre l'usage de l'agenda sur iPhone aussi simple et courant que l'usage des applications Messages ou Twitter. Ces deux apps sont rapides à utiliser et se concentrent sur des fonctions simples. Si bien qu'il est possible d'envoyer un SMS ou un tweet en moins de 5 secondes, même lorsque l'on est en situation dégradée (réunion, transports en commun, ...).
On ne peut pas en dire autant des apps d'agendas. Apple fournit deux apps pour faire presque la même chose : Calendrier et Rappels. Elles présentent une interface classique et peu efficace. Par exemple, modifier le jour d'un rendez-vous dans Calendrier demande six actions. Les applications tierces, quant à elles, se concentrent trop sur les fonctions avancées (géolocalisation, labels, mots clés, etc..) ce qui n'est pas bon dans un contexte de mobilité.
Dans Task, une tâche est obligatoirement courte. Si l'on permet aux gens d'écrire un roman, ils vont écrire un roman et perdre du temps. Nous les forçons à être synthétique, ce qui est la première étape pour aller vite. Historiquement, les SMS étaient limités à 160 caractères (facturés 0,13€) et les tweets sont toujours limités à 140 caractères. Ces limitations ont contribué à leur succès.
On peut créer une tâche de plusieurs manières. Cette multimodalité permet de faire face à plusieurs situations.
Le pinch est particulièrement intelligent : il existe des cas ambigus (écarter deux tâches, écarter deux jours, etc.) mais nous sommes parvenus à faire en sorte qu'un utilisateur puisse aisément créer une tâche à la position désirée parce qu'il se comporte comme attendu.
Même ambiguité lors du glisser/déposer : disons qu'il y a deux sections, lundi et mercredi. Que se passe-t-il si un utilisateur veut déplacer une tâche en bas de mercredi ? La tâche pourrait être à faire mardi ou mercredi. Encore une fois nous avons trouvé une solution élégante : un menu gestuel apparaît dans la continuité du déplacement en cas de situation ambiguë.
l'ajout ou la modification d'une tâche doit être rapide. Il n'est guère utile d'afficher par défaut un calendrier alors que dans la plupart des cas l'utilisateur gère des tâches à courte échéance. Le calendrier donne un accès équitable à toutes les dates du mois alors que l'on veut un accès privilégié aux dates proches. Considérant qu'il est nettement plus probable de gérer des dates proches, nous avons créé un sélecteur linéaire centré sur la date de la tâche. Un swipe horizontal sur ce sélecteur permet de passer d'aujourd'hui à demain et ainsi de suite. Avec ce sélecteur, choisir une date proche est moins laborieux qu'utiliser un calendrier. Mais ce sélecteur s'avère inefficace pour les dates lointaines. c'est pourquoi il est toujours possible de déplier un calendrier en cas de besoin.
Avec Task 2, nous avons lissé les choses : nous considérons toujours qu'il est peu probable qu'il y ait beaucoup de tâches futures. Le défilement manuel est donc parfaitement utilisable. En revanche, les tâches passées peuvent s'accumuler et au bout de quelque mois d'utilisation, retrouver un jour précis pouvait s'avérer difficile. Nous avons donc créé un système d'archives : seuls les sept jours passés sont accessibles dans la timeline. Les tâches plus anciennes sont classées par mois. Là encore, le sélecteur de mois fait en sorte que les mois proches du présent soient plus accessibles que les mois éloignés dans le temps.
Pour créer l'interface iPad, nous avons préféré laisser une bande de chaque côté de la timeline pour préserver l'identité visuelle de Task, mais également pour faciliter la prise en main sur iPad mini (absence de bords épais). Il est ainsi possible de tenir l'iPad avec le pouce sur l'écran tout en utilisant Task avec l'autre main.
Sur iPhone, on considère qu'il n'est pas utile d'afficher constamment l'heure et la date. Mais lorsque c'est nécessaire, un simple pull vers le bas permet de jeter un oeil à ces informations à leur emplacement attendu (status bar), aussi bien sur la timeline que dans le formulaire. Sur iPad, il est possible d'afficher ces infos constamment sans encombrer l'interface.
Dernier point, le sens de la timeline. Beaucoup d'utilisateurs nous demandent de ne plus aligner la timeline en bas de l'écran mais en haut, comme dans une liste traditionnelle. Cela impliquerait d'inverser le sens de la timeline, en mettant les tâches futures vers le bas et les tâches passées vers le haut. Nous refusons catégoriquement ! Le sens logique d'une timeline (Twitter, Facebook, ...) représente le passé vers le bas (et donc le futur vers le haut). Contrairement à ces services, sur Task nous gérons principalement des éléments futurs, d': le sens de lecture inversé. De plus, l'écran 4' de l'iPhone 5 ou le grand écran de l'iPad rendent la partie haute de l'interface difficile d'accès. Il est donc plus qu'utile de privilégier l'interaction sur le bas de l'écran.
Concevoir Task a été un exercice très intéressant. Nous avons commencé à y réfléchir en 2011, la première version est sortie en 2012 et nous l'avons utilisé pendant près d'un an avant de penser à Task 2. On pourrait presque voir l'ancien Task comme un prototype de cette nouvelle version. Chaque aspect de Task 2 s'appuie sur une réflexion intense. c'est un travail au long cours qui nous a beaucoup appris. Je pense que l'on a réussi à faire de Task l'application parfaite pour la gestion de ses tâches :)
Task et Clear ne servent pas à la même chose
Notre but avec Task est de rendre l'usage de l'agenda sur iPhone aussi simple et courant que l'usage des applications Messages ou Twitter. Ces deux apps sont rapides à utiliser et se concentrent sur des fonctions simples. Si bien qu'il est possible d'envoyer un SMS ou un tweet en moins de 5 secondes, même lorsque l'on est en situation dégradée (réunion, transports en commun, ...).
On ne peut pas en dire autant des apps d'agendas. Apple fournit deux apps pour faire presque la même chose : Calendrier et Rappels. Elles présentent une interface classique et peu efficace. Par exemple, modifier le jour d'un rendez-vous dans Calendrier demande six actions. Les applications tierces, quant à elles, se concentrent trop sur les fonctions avancées (géolocalisation, labels, mots clés, etc..) ce qui n'est pas bon dans un contexte de mobilité.
Dans Task, une tâche est obligatoirement courte. Si l'on permet aux gens d'écrire un roman, ils vont écrire un roman et perdre du temps. Nous les forçons à être synthétique, ce qui est la première étape pour aller vite. Historiquement, les SMS étaient limités à 160 caractères (facturés 0,13€) et les tweets sont toujours limités à 140 caractères. Ces limitations ont contribué à leur succès.
On peut créer une tâche de plusieurs manières. Cette multimodalité permet de faire face à plusieurs situations.
- Un pull vers le haut pour créer une tâche pour aujourd'hui.
- Un pinch entre deux items pour créer une tâche directement à un endroit précis.
- Un tap au dessus ou au dessous de la timeline
- Un tap sur une entête de jour (Aujourd'hui, Demain, Samedi...)
Le pinch est particulièrement intelligent : il existe des cas ambigus (écarter deux tâches, écarter deux jours, etc.) mais nous sommes parvenus à faire en sorte qu'un utilisateur puisse aisément créer une tâche à la position désirée parce qu'il se comporte comme attendu.
Même ambiguité lors du glisser/déposer : disons qu'il y a deux sections, lundi et mercredi. Que se passe-t-il si un utilisateur veut déplacer une tâche en bas de mercredi ? La tâche pourrait être à faire mardi ou mercredi. Encore une fois nous avons trouvé une solution élégante : un menu gestuel apparaît dans la continuité du déplacement en cas de situation ambiguë.
l'ajout ou la modification d'une tâche doit être rapide. Il n'est guère utile d'afficher par défaut un calendrier alors que dans la plupart des cas l'utilisateur gère des tâches à courte échéance. Le calendrier donne un accès équitable à toutes les dates du mois alors que l'on veut un accès privilégié aux dates proches. Considérant qu'il est nettement plus probable de gérer des dates proches, nous avons créé un sélecteur linéaire centré sur la date de la tâche. Un swipe horizontal sur ce sélecteur permet de passer d'aujourd'hui à demain et ainsi de suite. Avec ce sélecteur, choisir une date proche est moins laborieux qu'utiliser un calendrier. Mais ce sélecteur s'avère inefficace pour les dates lointaines. c'est pourquoi il est toujours possible de déplier un calendrier en cas de besoin.
Avec Task 2, nous avons lissé les choses : nous considérons toujours qu'il est peu probable qu'il y ait beaucoup de tâches futures. Le défilement manuel est donc parfaitement utilisable. En revanche, les tâches passées peuvent s'accumuler et au bout de quelque mois d'utilisation, retrouver un jour précis pouvait s'avérer difficile. Nous avons donc créé un système d'archives : seuls les sept jours passés sont accessibles dans la timeline. Les tâches plus anciennes sont classées par mois. Là encore, le sélecteur de mois fait en sorte que les mois proches du présent soient plus accessibles que les mois éloignés dans le temps.
Pour créer l'interface iPad, nous avons préféré laisser une bande de chaque côté de la timeline pour préserver l'identité visuelle de Task, mais également pour faciliter la prise en main sur iPad mini (absence de bords épais). Il est ainsi possible de tenir l'iPad avec le pouce sur l'écran tout en utilisant Task avec l'autre main.
Sur iPhone, on considère qu'il n'est pas utile d'afficher constamment l'heure et la date. Mais lorsque c'est nécessaire, un simple pull vers le bas permet de jeter un oeil à ces informations à leur emplacement attendu (status bar), aussi bien sur la timeline que dans le formulaire. Sur iPad, il est possible d'afficher ces infos constamment sans encombrer l'interface.
Dernier point, le sens de la timeline. Beaucoup d'utilisateurs nous demandent de ne plus aligner la timeline en bas de l'écran mais en haut, comme dans une liste traditionnelle. Cela impliquerait d'inverser le sens de la timeline, en mettant les tâches futures vers le bas et les tâches passées vers le haut. Nous refusons catégoriquement ! Le sens logique d'une timeline (Twitter, Facebook, ...) représente le passé vers le bas (et donc le futur vers le haut). Contrairement à ces services, sur Task nous gérons principalement des éléments futurs, d': le sens de lecture inversé. De plus, l'écran 4' de l'iPhone 5 ou le grand écran de l'iPad rendent la partie haute de l'interface difficile d'accès. Il est donc plus qu'utile de privilégier l'interaction sur le bas de l'écran.
Concevoir Task a été un exercice très intéressant. Nous avons commencé à y réfléchir en 2011, la première version est sortie en 2012 et nous l'avons utilisé pendant près d'un an avant de penser à Task 2. On pourrait presque voir l'ancien Task comme un prototype de cette nouvelle version. Chaque aspect de Task 2 s'appuie sur une réflexion intense. c'est un travail au long cours qui nous a beaucoup appris. Je pense que l'on a réussi à faire de Task l'application parfaite pour la gestion de ses tâches :)
June 20, 2013