マルチタイマーディスプレイUI / UXの問題
それで、私たちのアプリでは、あなたがマッチしたすべての人がリストされている「マッチリスト」画面があります。現在、タイマー/カウントダウンを導入しています。 24時間以内に対戦を開始するか、試合が終了します。会話が始まると、カウントダウンは消えますが、試合は（試合開始日から）14日で期限切れになります。
私たちが直面している問題は、これが非常に明確なUIを作成することです。アイコンとアイコンなし、色分けされたスタイルなど、2つの異なるタイマーシステムをいじってみましたが、非常に複雑でわかりにくいようです。このタイマーシステムを表示する方法に関する良い解決策はありますか？個人的には、マッチリストビューに14日間のタイマーを表示する必要があるかどうかさえわかりませんが、他の考えを聞いてみたいと思います。
これは複雑な状況で、もっと多くの情報が必要だと思います。ただし、答えを出せる部分があり、時間を混ぜるか（混ぜないか）です。 そして答えはNOです。
自分の画面キャプチャを確認してください：22h、次に14d、さらに13m。そして、あなたの説明によると、これらの時間は異なるアクションを測定しています（1つはaの一致、もう1つはanの場合）開始された会話、同じデータスポットを共有する2つのまったく異なるアクション！）
両方のアクションのデータを明確に分離しながら、最初に視覚的な情報を提供し、ユーザーが詳細を学習することを選択します。
この目的のために、名前の下に非常に明確なテキストを追加し、アバターの上に視覚的な「タイムラプスエイド」を追加します。 注：カラーブラインドユーザーにはモノクロバージョンを使用することをお勧めしますが、カラーエイドについて言及しているので、あなたが行く。アバターの不透明度を考慮することもできます。つまり、100％の不透明度は14日間であり、0の不透明度（中空の境界線のみ）は0日間なので、以下の擬似コードのようなCSSルールを簡単に追加できます。
$opacity : $days_left
if $days_left=1 {echo '7%'}
elseif $days_left=2 {echo '14%'}
elseif $days_left=3 {echo '21%'}
....
次に、別の視覚的および情報的次元で、時間と分のみの時計と、が開始した会話アクションのデータとしてのみ。したがって、このクロックはこのアクションを測定し、アクションが開始されない場合、クロックは非アクティブであり、アフォーダンスを通信するための「開始」リンクを示します。
独自の画面キャプチャを使用した簡単なモックアップ：
覚えておいてください：これはあなたが始めるためのアイデアであり、より多くの情報が必要ですが、あなたがそれを持っているので、これがあなたが問題
何らかの種類のタイムトラッカーなしで試合が突然消え始めたとき、ユーザーは不愉快に驚かされるので、この画面には必ずマッチリストのタイマーが必要だと思います。時計の問題は、通常、時間または正確な時刻（目覚まし時計など）に関連付けられており、ここではすべての種類の単位（日、時間、分）を表すことです。ユニットの種類によっては、それ自体が混乱するかもしれません。おそらく、日数だけを保持する方がよいでしょう（過去24時間を0日として表示）。しかし、私はそれをテストします。
とにかく、問題に戻ります。ここではプログレスバーを使用しました。それらは十分に表示され、ナッジを提供しますが、時計のアイコン、特に赤いアイコンよりも煩わしくなく、個人的でもありません。
試合が終了することを伝えたい場合は、タイマーを表示しても問題ありません。 UIに問題がないように見え、UIに並べ替え機能を追加して、ユーザーが特定のパラメータセットに基づいてデータを確認しやすくなるようにします。エクステント
データは、デフォルトで誰が最初に期限切れになるかに基づいてソートする必要があります。上記のスナップショットはそうではないようです。