Webmail mobile

1. 4 Février 2011 Webmail mobile A. Bourdin, C. Chandelier, S. Fifre, Q. Grimaud Encadrants : A-M. Déry, P. Sander https://m.webmail.polytech.unice.fr/

2. Sommaire • Analyse du besoin • Choix de développement : technologies et méthodes • Interfaces et ergonomie Webmail mobile

3. Analyse du besoin Présentation de l’existant Objectifs du sondage Résultats du sondage Synthèse des attentes Webmail mobile

4. Présentation de l’existant Mailouvert Ecritured’un mail Boîte deréception Login Webmail mobile

5. Objectifs du sondage Notre sondage avait pour but de recenser : • les habitudes des étudiants • Fréquence d’utilisation du webmail • OS mobiles utilisés • leurs opinions sur l’existant • leurs attentes pour un webmail mobile Webmail mobile

6. Résultats du sondage Résultats du sondage 286 réponses Webmail mobile

7. Résultats du sondage Webmail mobile

8. Synthèse des attentes Attentes récurrentes des utilisateurs : • résolution d’écran smartphone • ergonomie pensée pour le tactile • affichage clair • accessibilité rapide aux nouveaux mails • facilité d’utilisation Webmail mobile

9. Analyse du besoin Conclusion : • Concerne plus de 35% des étudiants • Attentes exigeantes • Mettre l’accent sur l’ergonomie • Etude à mener • sur les applications • sur les webmails Webmail mobile

10. Choix de développement :technologies et méthodes Web ou application ? SquirrelMail vs. « from scratch » Choix technologiques Webmail mobile

11. Web ou application ? Webmail mobile

12. Web ou application ? Webmail mobile

13. SquirrelMail vs. « from scratch » • Thème pour SquirrelMail • Architecture de SquirrelMail lourde • Solution inintéressante • « from scratch » • Partir des fonctions protocoles • Architecture MVC Webmail mobile

14. Choix technologiques • Langage PHP • Fonctions IMAP / SMTP • Simplicité de déploiement • Framework JavaScript • jQuery (AJAX) • jQueryMobile (Eléments d’UI multiplate-formes) Webmail mobile

15. Interfaces et ergonomie Étude des webmails existants Les choix que l’on a fait Webmail mobile

16. Webmails mobiles existants : réception Webmail mobile

17. Webmails mobiles existants : réception Webmail mobile

18. Webmails mobiles existants : composer Webmail mobile

19. Webmails mobiles existants : message Webmail mobile

20. Webmails mobiles existants : message Webmail mobile

21. Analyse de l’existant • Gros boutons avec images (adaptés à la précision du doigt et de la surface tactile) vs simples liens HTML • Ne garder que les fonctionnalités essentielles pour ne pas surcharger l’interface, les autres sont regroupées dans des menus • Plusieurs solutions d’IHM envisageables pour les mêmes fonctionnalités Webmail mobile

22. Les choix que l’on a fait • Optimiser l’espace • Placeholders • Détails dans bandeau déroulant • Menus • Ergonomie tactile : pagination, toolbars,Swipe Webmail mobile

23. Placeholders et menus déroulants Webmail mobile

24. Menus Webmail mobile

25. Ergonomie tactile : pagination, swipe, toolbars Webmail mobile

26. Conclusion Analyse des problèmes rencontrés Ce que nous avons appris Extensions nécessaires Extensions possibles Avant/Après Webmail mobile

27. Analyse des problèmes rencontrés • Header et footer non fixes • Problèmes d’encodages persistants Webmail mobile

28. Ce que nous avons appris • Pratique des langages, protocoles et frameworks utilisés • Gestion d’un déploiement • Travail collaboratif • Intégration du code et des modules (modèles, contrôleurs, vues) • SVN, GoogleDocs, DropBox Webmail mobile

29. Extensions nécessaires • Audit complet de sécurité • Meilleure prise en charge du HTML Webmail mobile

30. Extensions possibles • Gestion du carnet d’adresses • Ajout, suppression, édition d’adresses • Auto-complétion des destinataires • Attachement de pièces jointes • Actions groupées sur les listes de messages • Gestion des favoris dans les mails Webmail mobile

31. Avant/Après Webmail mobile

32. Avant/Après Webmail mobile