web-dev-qa-db-fra.com

Comment visualiser une carte de voyage et ses transactions?

Je suis en train de créer une application pour la société de transport locale. La société a obtenu une API où je peux obtenir les détails de toutes les cartes de voyage (prépayées ou par période (comme 7 ou 30 jours de voyage illimité)).

J'ai déjà publié une application, mais j'ai reçu des plaintes concernant sa mise en page et son expérience globale. Alors, ma question est, comment visualiser au mieux une carte de voyage avec ses transactions passées?

A sample of the UI - Made using MS Paint

2

Ceci doit être amélioré en passant simplement par quelques exercices:

  1. Énumérez les cas d'utilisation de chaque écran pour l'utilisateur. Par exemple, "Je veux voir toutes mes cartes", "Je veux voir le nombre de transactions sur chaque carte"
  2. Donnez la priorité à cette liste en parcourant votre conception et en réalisant ce que vous pensez que les utilisateurs feraient généralement.
  3. Une fois que vous avez cette liste, refaites la conception de sorte que les pièces importantes soient vers le haut, plus audacieuses et plus grandes; et les pièces moins importantes sont plus petites, à contraste plus faible ou totalement éliminées.
  4. Revenez ensuite en arrière et ajoutez soit un skeumorphisme, comme suggéré précédemment, soit utilisez des principes d'ombrage et de gestalt pour regrouper les éléments pertinents.

Je pense que vous trouverez certaines choses:

  1. Le premier écran nécessite-t-il vraiment les numéros de série de la carte, ou quels qu'ils soient? Ce nombre pourrait très facilement être de couleur grise en haut à droite du deuxième écran.
  2. Les dates sur le deuxième écran ne sont probablement pas si importantes, ou du moins elles ne sont pas plus importantes que l'étiquette ou le montant, donc elles devraient probablement être simplifiées et la présentation et le contraste plus faibles
  3. Vous avez mis en gras tous vos titres, et je dois parcourir trois niveaux de titres pour accéder aux informations que je recherche. Bien que les titres doivent ressembler à des titres, ils doivent clairement se trouver dans un en-tête ou dans un autre endroit que mon esprit sait automatiquement ignorer à moins que je ne les recherche.
1
Jeremy T

Bien que je ne suis pas un grand fan du skeumorphisme en tant que tendance dans la conception, je pense qu'il devrait être utilisé comme outil chaque fois que nécessaire et c'est le cas, vous devriez le faire.

Les cartes de voyage dans l'application sont équivalentes aux cartes de voyage physiques . AFAIK, un utilisateur n'en a pas beaucoup, il ne devrait donc pas être nécessaire de s'inquiéter de la façon de regrouper 20 d'entre eux dans une seule interface, il préfère osciller entre 2 à 7 cartes (juste ma supposition, plus les archives bien sûr) . Ainsi, vous pouvez opter pour une interface skeumorphe plus , bien sûr en conservant la conception graphique dans certaines limites raisonnables .

Vous pouvez voir ce que je veux dire par exemple dans l'application Passbook iOS - captures d'écran ici: http://www.telegraph.co.uk/technology/Apple/9326872/Apple -WWDC-iOS6-Passbook-app-prepares-iPhone-to-act-as-e-wallet.html - cela concerne également le regroupement de plusieurs cartes sur un même écran (vous pouvez en voir 8 dans une seule vue dans cet exemple, qui est un assez bon résultat, je pense).

En ce qui concerne la vue des détails , vous pouvez aller plus loin et vous étendre (également "en le tirant" du "portefeuille"). La carte pourrait alors afficher la liste des transactions - faire défiler si nécessaire.

2
Dominik Oslizlo