web-dev-qa-db-ja.com

旅行カードとその取引を視覚化する方法は?

現在、地元の運送会社向けのアプリを作成しています。会社は、すべての旅行カードの詳細(プリペイドまたは期間(無制限の旅行の7日間または30日間など))を取得できるAPIを取得しました。

私はすでにアプリを公開していますが、そのレイアウトと全体的なエクスペリエンスについて苦情を受けています。だから、私の質問は、過去の取引を含む旅行カードをどのように最良の方法で視覚化するかということです。

A sample of the UI - Made using MS Paint

これは、いくつかの演習を行うだけで改善されます。

  1. ユーザーの各画面の使用例をリストします。たとえば、「すべてのカードを確認したい」、「各カードのトランザクション数を確認したい」
  2. デザインを検討し、ユーザーが通常行うと思われることを実行することにより、このリストに優先順位を付けます。
  3. そのリストを入手したら、重要な部分が上、大胆、そして大きくなるようにデザインをやり直します。それほど重要ではない部分は、小さく、コントラストが低く、または完全に削除されます。
  4. 次に戻って、前に提案したように、いくつかのスキューモーフィズムを追加するか、シェーディングとゲシュタルトの原則を使用して、関連するアイテムをグループ化します。

あなたが見つけると思ういくつかのこと:

  1. 最初の画面には、カードのシリアル番号が本当に必要ですか?その番号は、2番目の画面の右上に非常に簡単に灰色で表示されます。
  2. 2番目の画面の日付はおそらくそれほど重要ではないか、少なくともラベルや金額よりも重要ではないため、簡略化して表示し、コントラストを低くする必要があります
  3. あなたはすべての見出しを太字にしています。私が探している情報に実際に到達するには、3つのレベルの見出しをたどる必要があります。見出しは見出しのように見えるはずですが、見出しまたは他の場所にある必要があります。探している場合を除いて、私の心は自動的にスキップすることを認識しています。
1
Jeremy T

私はデザインの傾向としてのスキューモーフィズムの大ファンではありませんが、必要に応じてtoolとして使用されます。これはそうする必要がある場合です。

アプリ内のトラベルカードは、物理的なトラベルカードと同等です。私の知る限り、1人のユーザーはそれらの多くを持っていないので、1つのインターフェイス内にそれらの20を詰める方法について心配する必要はないはずです、それはむしろ2-7カード間で変動します(もちろん、私の推測、そしてもちろんカードをアーカイブします) 。したがって、より多くの変形インターフェースを使用できますが、当然ながら、合理的な制限内でグラフィカルデザインを維持します

あなたは私の意味を見ることができます。 Passbook iOS app-スクリーンショットはこちら http://www.telegraph.co.uk/technology/Apple/9326872/Apple -WWDC-iOS6-Passbook-app-prepares-iPhone-to-act-as-e-wallet.html -1つの画面内で複数のカードを梱包することも考慮します(この例では、1つのビュー内に8つのカードが表示されます)。かなり良い結果だと思います)。

詳細ビューについては、さらに進んで展開することもできます(「ウォレット」から疑似的に「引き出す」)。カードはトランザクションのリストを表示し、必要に応じてスクロールできます。

2
Dominik Oslizlo