Et voilà, c’est officiel, iOS6 existe toujours en 2014!

Pendant que même Apple essaye de se débarrasser de son ancien design et ses guidelines, la ville de Liège nous montre qu’il est possible de le faire revivre et porte un coup de grâce en l’amenant sur Android!

Notre lecteur Maxime nous a mis la puce à l’oreille avec en partageant ce petit commentaire sur Google+

http://www.lavenir.net/article/detail.aspx?articleid=DMF20140221_00437439
Sorry but no, this app is not « bien foutue » (good) at least on Android #lavenir #liege

Et il a raison: contrairement au site du groupe Sud-Presse, nous ne trouvons pas que parcequ’une application affiche de l’information utile, elle est forcément bien foutue.

Contrairement à iOS (le système d’exploitation de l’iPhone), Android a ses propres marques et son propre design, souvent bafoué pour des raisons de marketing (« Nous voulons fournir la même expérience sur iPhone que sur Android »), ce qui est dangereux, étant donné que les utilisateurs d’Android passent leur journée à voyager entre des applications Android, les voilà qui se retrouvent d’un coup avec une application qui leur offre une expérience totalement différente et incohérente.

Tous leurs repères sont mis à mal et chamboulés, ce n’est pas comme si ils passaient d’un iPhone à Android à longueur de journée, messieurs les génies du marketing!

Les explications en image, avec en plus les astuces pour corriger ses erreurs et les liens adéquats:

Un design iOS6 qui n’a pas sa place:

En plus de recopier les icônes de l’iPhone (et cela à plusieurs endroits de l’application), nos amis liégeois ont repris les boutons rectangulaires aux bords arrondis typiques de l’iPhone (Et de l’ancienne génération, même Apple essaye de s’en débarrasser, donc pourquoi ne pas les porter sur Android? – Lien du site d’apple ici. )

Screenshot_2014-02-23-04-29-44

Comment corriger/améliorer?

Lire les guidelines Android abordant le design d’une application sur ce lien.

Ne pas copier les icônes d’Apple, mais respecter la plateforme sur laquelle vous êtes. Les icônes de menu officielles Android sont disponibles ici, il y a un de téléchargement pour le pack d’icônes.

Développer une application native et ne pas utiliser d’outils mixtes iPhone/Android (Phonegapp et consorts)

1) L’icône:

Contrairement à l’iPhone qui consiste en une grille d’icônes carrées aux bords arrondis, le système Android propose une grille d’icônes à la silhouette distincte, et même les grandes marques l’ont compris:

icones

 Source:Octo Talks

Il est donc possible de garder son identité visuelle tout en se pliant aux règles.

Comment corriger/améliorer?

Google propose de très bonnes guidelines et propose même des outils web pour vous aider à y arriver. A partager avec designers et développeurs. Plus d’information ici.

2) Un affichage intrusif

Mais pourquoi diable s’obstiner à utiliser des Toast (petite fenêtre grise sur le bas de l’écran) pour m’indiquer à l’ouverture de l’application que la synchronisation des informations est effectuée? Il suffit qu’elle prenne un peu plus de temps que prévu, et voilà, une fenêtre fantôme qui apparait au milieu de nulle part, comme revenu sur le bureau, dans cet exemple:

Screen Shot 2014-02-23 at 05.16.00

De plus, celle notification de synchronisation (bien oui, tant qu’à faire, autant en mettre une au début et à la fin) est déjà totalement redondante avec le symbole de synchro des deux petites flèches qui tournent dans l’ActionBar (au dessus)

Comment corriger/améliorer?

Il existe de très bonne bibliothèques open-source de notifications non intrusives (lien) ou des feedbacks visuels de chargement dans l’ActionBar (Autre lien). Quoi qu’il en soit, il suffit d’afficher l’information dans le même écran

3) Le problème des web-app

Ce genre d’application est plus que probablement un mélange de HTML et de notions web, le tout emballé à la grosse louche dans une application. Et bien forcément, cela ne fonctionne pas toujours.

Quand c’est le cas, il serait intéressant de pouvoir, au moins formater ses messages d’erreur correctement:

Screenshot_2014-02-23-04-27-15

Comment corriger/améliorer?

Développer une application native et ne pas utiliser d’outils mixtes iPhone/Android (Phonegapp et consorts)

4) Le souci du détail

Alors, voici comment faire fort en un seul écran:

Screen Shot 2014-02-23 at 05.25.45

Nous passerons le manque d’espace autour du texte dans le rectangle gris, mais le popup avec le numéro de téléphone est assez hilarant. Un design au maximum du minimalisme et aucun information sur ce qui va se passer quand vous appuyez dessus (indice, c’est sensé lancer votre téléphone pour les contacter).. Sauf que je ne peux pas placer un appel avec mon Nexus 5.

Nous noterons aussi l’attention du détail dans les textes « yyour device », certainement parceque le ‘y’ vaut 10 points au Scrabble.

Comment corriger/améliorer?

Vérifier son application et la faire tester un maximum

Ne pas faire confiance aux outils de développement qui mixent iPhone et Android

5) La compréhension de l’ActionBar

action_bar_basicsL’ActionBar est le point central, elle contient toutes les informations nécessaires et les boutons pour utiliser le plus agréablement du monde une application.

Ne pas la chouchouter, c’est perdre vos utilisateurs dans un monde inconnu.

Comment corriger/améliorer?

Suivre les guidelines ici.

Ne pas mettre d’icône sur la gauche dans la place réservée au titre

6) un feedback visuel sur les boutons

Apres un petit peu de lecture (Lien), on se rend compte de l’importance de mettre en surbrillance les boutons une fois qu’ils sont cliqués.

touch_feedback_states

Cela aide grandement l’utilisateur dans sa compréhension de l’application.

Comment corriger/améliorer?

(technique): utiliser un ImageButton

(technique): définir les états de click dans un fichier xml

7) Une navigation qui oublie des choses

Pourquoi ne pas permettre de revenir au menu en un click en utilisant la navigation (bouton up, comme expliqué ici)? Pire encore, cette navigation a été implémentée dans UN SEUL écran au long de toute l’application. Pourquoi avoir montré qu’ils sont capables de le faire et ne pas l’afficher partout? Mystère et boule de gomme

Screen Shot 2014-02-23 at 06.01.25

Et bien d’autres

Comme dit plus haut, le but n’est pas de descendre l’application en flèche, mais bien d’informer la ville de Liège, qui avec son budget que l’on devine colossal pour cette aplication, aurait du choisir des moyens « natifs » pour son application.

Je pourrais continuer des heures, mais les points principaux étant relevés, j’espère voir rapidement quelques améliorations

Comment corriger/améliorer?

Il ets fort probable que de nombreuses personnes de l’équipe utilisent un iPhone et n’ont aucune idée de ce qu’en un Android. Le meilleur moyen de le corriger est d’utiliser un androphone et comprendre comment il fonctionne, se familiariser, et ne pas mélanger des concepts de plusieurs mondes en espérant que les utilisateurs s’y retrouveront

En conclusion

Le coup du « nous voulons une expérience semblable sur iPhone et Android » est juste ridicule, vous fournissez une application qui tranche totalement avec les standards du téléphone, ce qui a pour effet de perdre vos utilisateurs et leur procurer de la frustration.

Ils ne passent pas d’un iPhone à Android 20 fois par jours, c’est leur téléphone qu’ils utilisent!!!

Le design mis de côté, cette application remplit totalement son rôle et vous apportera toutes les informations nécessaires rapidement. C’est loin d’être une totale catastrophe et nous remercions la ville de Liège pour cette initiative