web-dev-qa-db-ja.com

タイムラインを表示するには?

私の質問は簡単に思えますが、レイアウトの制約のため、小さな領域にタイムラインを表示する必要があります。また、行全体で行う「アクション」をいくつか記述する必要があります(1〜4ワード)。時々私は同時に2つの異なるアクションを持っています。これらのアクションはほとんど静的です。ユーザーはすべてのタイムラインを一度に表示する必要があり、タイムラインをスクロールまたは移動することはできません。このタイムラインの目標は、特定のプロセスに対してその月に必要なすべてのユーザーのアクションを表示することです。

私はそれを明確で理解できるようにするためにこの行をどのように処理するかわかりません。

3つのバージョンについて考えました。ここに簡略化したモックアップがあります。

左から右(ただし、データは重複)

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

上から下(データ揃え)

mockup

bmmlソースをダウンロード

下から上

mockup

bmmlソースをダウンロード

どちらがより一貫性があり理解しやすいですか?代替案はありますか?

13
Alex

最初の解決策は古典的な解決策です。ウェブ上のタイムラインのほとんどは、このソリューションで作成されています。 「タイムライン」をググって、写真を見てください。しかし、あなたは言った、あなたのタイムラインを使用するための小さな領域しかないので、これはきついかもしれません。ページの下部に線があり、イベントを上に表示するバージョンを使用します。例えば:
enter image description here

2番目と3番目の例は、多くのWebサイトで使用されている最新のタイムラインです(この回答に関するJørnE. Angeltveitのコメントを参照)。ここでは、タイムラインで何が最も重要かを自問する必要があります。ストーリー全体をユーザーに伝えたいので、最初から始めますか、それとも最新のイベントが最も重要ですか?

  • 「トップツーボトム」ソリューションを使用すると、ユーザーには最初に最も古いイベントが表示され、会社の履歴を表示するのに最適です。

  • 「Bottom to Top」ソリューションを使用すると、ユーザーには最初に最新のイベントが表示されます。最も良い例はFacebookなどのソーシャルネットワークです。

この2つのソリューションは、モバイルでの使用にもベストプラクティスであり、全体的なビューを失うことなく、1〜3語以上を書くこともできます。

希望があなたの決心を助けることを願っています。

13
Michael Schmidt

バリアントのいずれについても、データをラインの両側に配置することはしないと思います。少なくとも、同じ種類のデータではありません。左側に環境の大幅な変更のようなものを配置することを検討できますが、右側には、解釈しようとしているすべてのイベントがあります。

(垂直)方向はユースケースによって異なります。最新のイベントのみに関心がある可能性がありますか、それとも履歴コンテキスト全体が必要ですか?タイムラインが長くなると、最新のイベントがスクロールせずに表示されることに注意してください。水平グラフの場合、時間の方向には左から右のみを使用します。

最後に、複数のイベントを同時に配置する方法は混乱します。ラベル間のつながりは、イベント間のつながりを私に示唆しています。代わりに、(垂直タイムラインの場合)タイムラインへの接続ラインを斜めにしてそれらを上下に配置し、両方が同時に発生することは明らかですが、他の関係は示唆されていません。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

7
André

あなたのモックアップは、私にタイムラインのいくつかの古典的な表現について考えさせました。

timeline

それらは理解しやすく、多くの相互作用を可能にします。

5
Gabin

通常、タイムラインは水平に表示されますが、ウェブでは、左右に比べて上下にスクロールする方がはるかに簡単です。そのため、ウェブページのコンテキストや残りの部分によっては、下から上へのタイムラインが使いやすくなると思います(最新上部のイベント-Facebookタイムラインの仕組みに似ています)。

0
zigojacko