Tag Archives | UX

V2 de l’application Les Champs Libres

application iPhone Les Champs LibresDécouvrez la toute nouvelle version des applications iPhone et Android des Champs Libres. Cette V2 apporte son lot de nouveautés dont une qui n’est pas des moindre : la refonte graphique.

Afin que les utilisateurs de cette application soient comblés aussi bien du côté informationnel que visuel, notre équipe a retravaillé l’ergonomie, le design et le développement des applications mobiles.

Un tout nouvel écran d’accueil offre à l’utilisateur un confort de navigation lui permettant, rapidement, de trouver l’information qu’il recherche. Cet écran étant d’une haute importance, puisqu’il est la porte d’entrée vers le contenu informationnel, a été retravaillé en profondeur. Nous avons choisi de repenser la navigation basée, dans la version 1, sur une « tab barre » composée de 5 onglets au profit d’une navigation basée sur un écran d’accueil riche en contenu tout en restant épuré.

Le design moderne et coloré se marie bien avec l’essence même de la culture émanant des Champs Libres. Il met également en valeur les différents événements en cours et à venir. Chaque porte d’entrée présente sur l’écran d’accueil affiche une couleur différente permettant à l’utilisateur de se repérer visuellement. Le design est donc véritablement au service du contenu. On remarquera, en comparant la version 1 de l’application des Champs Libres avec cette version 2, que le travail graphique réalisé apporte une réelle valeur ajoutée. En effet, il ne se contente pas de « rendre plus beau » mais est véritablement une pierre angulaire de cette mise-à-jour.

Nouveautés

- Une icône de démarrage très moderne jouant avec la perspective et le réalisme. Alors que la grande majorité des applications mobiles se contente d’arborer des icônes plates proches du pictogramme, celle des Champs Libres, illustrative et léchée, dérivée du bâtiment de l’architecte Portzamparc, s’inscrit dans la lignée des créations trendy du moment qui invitent au clic ;

- Un écran d’accueil composé d’un contenu dynamique et statique basé sur un équilibre mêlant souplesse et rigidité ;

  • le slider à défilement automatique met en avant certaines expositions et alerte les utilisateurs en cas de problèmes de dernière minute (exemple : annulation d’un rendez-vous) ;
  • les gros boutons colorés et de taille conséquente affiche l’arborescence principale. Ils sont également placés dans la partie basse de l’écran de telle sorte que le pouce de l’utilisateur puisse tous les atteindre très facilement lorsque ce dernier navigue avec une seule main ;

- Des fiches détaillées des événements de l’agenda et des expositions ont été repensées en termes de contenu pour une meilleure visibilité des informations pratiques. Le tout a été re-designé, favorisant ainsi un confort de navigation et une harmonie visuelle ;

- Une application accessible pour les personnes mal-voyantes ;

- Une application Android entièrement revue pour tendre vers une cohérence avec l’application iPhone.

Nous vous invitons à mettre à jour votre application si vous l’avez déjà où bien à la télécharger ici pour iPhone, ici pour Android.

Read full story · Comments are closed

Visualisation des données géolocalisées sur mobile

Trouver l’arrêt de bus le plus proche, afficher un itinéraire, chercher un service quelconque à proximité…etc. Autant de pratiques qui ont modifié notre mobilité sur le territoire. Plus la peine de faire 4 fois le tour d’un quartier pour trouver un distributeur de billets, une pharmacie ou encore une boulangerie, avec tous les services de géolocalisation qui prolifèrent, ce temps est révolu.

Pour les nostalgiques ou les aventuriers, il est toujours possible de garder son smartphone en poche et de ne pas l’utiliser pour profiter des joies des découvertes urbaines inopinées.

Quoi qu’il en soit, la multiplication des données géolocalisées a considérablement enrichi les cartes des territoires.

Pour faciliter un usage en mobilité, il est nécessaire  d’optimiser l’affichage de ces données et cela ne s’avère pas toujours facile lorsque les informations sont nombreuses.

L’affichage des données sur mobile

Il existe différentes manières pour palier le manque de visibilité sur un écran de smartphone. Voici quelques exemples :

- Une barre de recherche

Géolocalisation Mobizel

Classique, mais efficace, la barre de recherche permet à l’utilisateur d’afficher un nombre réduit de points d’intérêt. Par exemple, s’il cherche une entreprise en particulier dans un annuaire de référence, l’utilisateur verra une punaise et une seule s’afficher sur la carte localisant le siège social de cette entreprise.

- Des filtres

En fonction des besoins de l’utilisateur, les filtres permettent de cibler et réduire le nombre de résultats affichés.

sreenshot application iPhone

sreenshot application iPhoneSur la vue d’ensemble (écran de gauche), nous pouvons observer la totalité des points d’intérêt dans un espace géographique donné. Sur la vue avec les filtres(écran de droite), seule une catégorie de points est affichée (points verts).

Ce système est intéressant et permet à l’utilisateur d’afficher qu’une partie de la totalité de l’information accessible. Il visualise donc les données à travers un spectre qu’il a lui même déterminé.

- La clusterisation

Cette solution permet de regrouper les données afin d’éviter la surcharge informationnelle sur une carte.

Le mot anglais « cluster » signifie « grappe » en français. La clusterisation est finalement une grappe de données réunie sous une même entité.

Comment ça marche ?

sreenshot application iPhone

sreenshot application iPhoneLe point rouge indiquant « 76 » regroupe en un seul point 76 autres points. Lorsque l’utilisateur clique dessus le degré de précision augmente jusqu’à afficher un seul point d’intérêt.

La carte est claire et met bien en évidence les zones chaudes (très concentrées en points d’intérêt) et les zones froides (peu concentrées en points d’intérêt). D’ailleurs, la plupart du temps, le code couleur utilisé reflète bien cette répartition : des points rouges pour regrouper un grand nombre de données, des points verts pour regrouper un plus petit nombre de données.

S’adapter au mobile

Intérêt de la clusterisation ? La réponse en image

sreenshot application iPhone

Cette carte affiche des informations non clusterisées. Nous voyons bien la grappe de données qui donne une impression d’abondance mais qui ne facilite pas la lecture.

La clusterisation des données géographiques n’est pas nouvelle mais apparaît de plus en plus dans les applications mobiles.

Les contraintes du mobile

Nous avons vu qu’il existait différentes manières d’afficher l’information géolocalisée. Afin d’optimiser la lecture des données cartographiées, il faut penser aux usages en mobilité et bien sûr à tout ce que cela entraine :

1 – Une petite taille d’écran

L’écran d’un smartphone est petit. Il faut en tenir compte. Le contenu doit être adapté à la taille de l’écran tout en étant exhaustif.

2 – Vite, vite, vite !

Le mobinaute est un être impatient. S’il cherche une information il a envie de la trouver vite et sans trop faire d’efforts. Le contenu doit être accessible en quelques clics et doit être en adéquation avec la recherche effectuée.

3 – Une navigation intuitive

En lien avec le point 2, pour ne pas « enrager » le mobinaute, il faut penser simple et bien hiérarchiser l’information. La navigation à l’intérieur de l’application doit favoriser l’accès aux contenus recherchés. Sur une carte, si l’utilisateur a effectué une recherche spécifique il doit visualiser un point d’intérêt.

4 – Un zoom adapté

Lorsque le mobinaute cherche un acteur rennais par exemple, il n’a pas envie de voir apparaître sur son écran de smartphone toute la carte du territoire français avec une punaise sur Rennes car si c’est le cas, il devra zoomer plusieurs fois avant d’atteindre le degré de précision qu’il souhaitait. Résultat des courses : perte de temps et de patience. A contrario, si le zoom est déjà réglé de manière à ce que le mobinaute ait un affichage fin de l’information recherchée, la satisfaction et l’expérience utilisateur est bien meilleure.

Finalement, comme dans toute application mobile, il est nécessaire d’avoir une réflexion en amont quant au contenu affiché à l’écran et au chemin de navigation pour y parvenir.

Gardez toujours cette phrase à l’esprit : il faut penser « usages en mobilité ».

Follow us : @mobizel


Read full story · Comments { 0 }