web-dev-qa-db-ja.com

テーブルでの時系列フローの表現

プログラム参加者の住居の履歴を追跡するアプリケーションがあります。このプログラムを使用する労働者は、すでに他の場所で入力された彼らの現在の住宅情報を持っています。

通常、私は現在の情報を使用して、テーブルの順序を示します。現在が一番上にある場合は、最新のものから順に並べられます。現在が一番下にある場合は、最新のものから順に表示されます。

Housing history table

テキストによる説明とは別に、データが新しい順に入力されることを意味するようにテーブルを設計する方法はありますか(最新のものを上にして)?

7
invot

エントリの時間ベースの順序を示すテキストの指示と視覚的なインジケータをテーブルの横に追加することを検討してください。また、ユーザーがテーブル内のエントリを並べ替えることもできます。このようなもの:

enter image description here

このアプローチは、指定された制約を守らなければならない場合に最も効果的だと思います(日付の入力なし、画面の不動産への影響が少ない)。 UIの並べ替え方法の一覧を確認します。上記の例は少し大まかなものであり、使用しているテクノロジに適合する同様の方法がおそらくあります。

7
Joshua Barron

ラベルを付けるだけ

時には、最善の解決策は最も明白なものです。並べ替え順序を強化するために、あらゆる種類の巧妙なUIトリックを思い付くことができますが、それをスペルアウトするだけの方が良いでしょう。

詳細について考えることなく、私はそれを明らかにする2つの方法を理解しています。

ソート制御

可能であれば、ユーザーが少数のディメンションに従ってリストをソートできるようにします。結局のところ、それはコンピュータなのです。なぜユーザーが少し制御するべきではないのでしょうか。そして目に見えるコントロールは何が起こっているかを正確に説明します。

行ラベル

並べ替えコントロールを含めない場合は(含めても)、各行または行のセットに日付インジケーターでラベルを付けます。目立つ必要はありません。ユーザーがシーケンスを理解したいときに利用できる必要があります。

視覚的に言えば...

Wireframed example of recommendations

6
plainclothes

不透明度とぼかしをメタファーとして使用できます。非常に簡単な例をご覧ください:

enter image description here

記憶と過去は常にぼやけている(そして未来は不明である)ため、伝えたいメタファーとしてグラフィックぼかしを使用することは比較的一般的です。

このアプローチは、同じ効果を持ついくつかのコントロールで使用されます。今を見ることができ、未来は不確実になり、過去はぼやけています:

enter image description here

enter image description here

または、選択しないものは、フォーカスを失います。

enter image description here

ご覧のとおり、これはグラフィカルな方法でリクエストを解決するための合理的な方法です。

今、私はナイトニングがコメントで提案したことが行く方法であることを100%確信しています、そしてそれ自体として、あなたは少なくともそれを提案するべきです。

また、入力と要素に注意を払うと、それらに高い認知的負荷がかかります。例として、その色の境界線を「立ち退かされた」トグルに追加することにより、実際にはその人が実際に立ち退きされたように見えます(そうでない場合)。

2
Devin

OPは「データフィールドは私が決定するものではありませんでした」と言っています。これは、フロントエンドとバックエンドの開発者が何らかの失敗したプロセスを示していることを示しています...しかし、この問題を検討している他の人にとっては、最良の解決策だと思いますユーザーが日付を入力できるようにカレンダー入力を提供することです。

UI with move in / move out date pickers

または、日付のギャップを許容したくない場合は、1つの列に移動日(または移動日)を設定し、他の日付を推測することができます。

1
Nathron

私たちはお互いのアイデアを「借用」しているだけなのです(ところで大きな議論ですが、自分の結論に到達するのに本当に役立ったと思います)。これが私の考えです。

  • 行ラベル:それらを適用することは、より多くのテキストを提供することと比較してはるかに明確です。
  • 上/下のコントロールへ移動:ユーザーは必ずしもそれらを時系列で覚えているとは限らないため、または誤った順序で何かを誤って入力する可能性があるため、行に対応するようにエントリを移動できますラベル
  • 視覚的手掛かり:最も実用的ではないかもしれませんが、現在または現在のエントリをより明るい色または大きなサイズ、または何らかの形の強調表示によって目立たせるというアイデアが好きです。他のエントリに視覚的な処理を適用する必要がない場合があります。

組み合わせるとすべてがどのように見えるかを確認したいのですが、結局はまったく機能しない「フランケンシュタインのデザイン」になる可能性があります...

1
Michael Lai

この状況について考慮すべきいくつかの考えがあります。

  1. このAdd Housingをテーブルの一番上に移動し、Table header Stickyであることを確認します。これにより、行数に関係なく、常に表示され、永続的な位置になります。 [ハウジングを追加]をクリックするたびに、ライトクリームで行を強調表示します

  2. "作成日"列を含めるだけで、これは昇順と降順の問題を処理し、ユーザーにソート順を知らせます。ユーザーのメンタルモーダルはすでにトレーニングを受けているか、最新のものは常に一番上にあることを認識しているため、ビジュアルキューは必要ないと思います。

  3. 最後に:いくつかの実際の/代表的なユーザーでプロトタイプをテストして、使いやすさを確認します。

1
Chan