web-dev-qa-db-ja.com

かんばんビューの折りたたみ列

エンタープライズ管理ソフトウェアでは、さまざまな目的で「かんばん」ビューを使用しています。ビジネス機会、タスク、採用プロセス、バグトラッカーなどのパイプライン。以下の例は、機会ビューのスクリーンショットを示しています。

Kanban of business Opportunities in OpenERP

スペースを節約するためにいくつかの列を簡単に折りたたむ/展開するための良い解決策を見つけたいのですが。 (通常、これらのステージでは機能しないため、Lost and Wonの機会は折りたたむことができます)折りたたまれた列にアイテムをドロップできるはずです。

2つの解決策を試しましたが、どちらも好きではありません。

  • 幅が狭くて垂直のタイトル 2
  • 上部の折りたたみ列

Folded column insideFolded column top

あなたはどちらを好みますか、そしてあなたはより良い解決策を持っていますか?

10

ここでの主要な問題は、水平方向のスペースを節約したいという欲求が、言語がどのように書かれているかという私たちの認識と衝突することです。

Outlook 2007に見られるように、列とペインを画面の横にある薄い「ツールバー」に折りたたむのは比較的一般的なパターンです。

enter image description hereenter image description here

したがって、かんばんボードの問題に対する最も明白な解決策は、縦書きのテキストを含むバーに列を最小化することです。

mockup

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

しかし、wはその方向でテキストを読むことに慣れていないため、大文字で書かれたテキスト(小文字バージョンを見たくない)でもうまく機能しません。実際、 本の背のテキストをどのように回転させるかについてのコンセンサスすらありません 。それが中国語、日本語、または韓国語のインターフェースであった場合、それらの言語は一般に上から下に書かれるため、文字の垂直方向の順序は問題ありませんでした。したがって、どのような方法を採用する場合でも、テキストを水平に書く必要があります。

2つの解決策が考えられます。1つ目は実装が簡単で、2つ目はよりエレガントです。

最初の解決策

これは、実際にはOPがすでに試行したものと似ています。主な違いは、折りたたまれている列だけを表示するのではなく、列ごとにトグルボタンを配置することです。このように、ユーザーは利用可能なすべての列とそのステータス(表示または非表示)の完全なリストを表示できますが、狭い画面または多数の列/ビンでの水平方向のスペースには制限があります。

mockup

bmmlソースをダウンロード

第二の解決策

列を折りたたむよりはるかに洗練された方法は、隣接する列を「スライド」させて、一部のコンテンツが非表示であることを示すのに十分なだけカバーすることです。折りたたみ列の上にマウスを置くと、折りたたまれて一時的にコンテンツが表示され、ユーザーが操作できるようになります。このアプローチにより、ユーザーは各列のステータスを簡単に確認できるだけでなく、展開ではクリックするだけでホバーする必要があるため、折りたたまれた列の内容を確認するのにかかる時間を短縮できます。トグルは、ロックアイコン(ロック位置とフローティング位置)のようなもので作成できます。

enter image description here

3
dnbrv

あなたの主な関心事は、構造と順序を明確かつ読みやすく保つことだと思います。その点では、あなたの2つのオプションの問題は次のように思われます。

  1. 垂直のタイトルは、テキストの向きに応じて、次の列または前の列に適用されるセパレータまたはカテゴリのように見えます。
  2. 左揃えのタブは、グローバルなかんばんレイアウトで折りたたまれた列の順序を保持しなくなりました。

列の順序情報を保持するには、2番目のオプションを少し調整することをお勧めします。

mockup

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

1
fdmsaraiva

1つのオプションは、ユーザーが列内でデータを積み重ねることができるようにすることです。これは、彼らが彼らが合うと思うので、彼らがより良い使用スペースを作るのを助けるべきです。 (例:交渉と同じ列のウォン)

別のオプションは、ユーザーがカスタムのかんばんビューを作成し、それらをプリセットとして保存できるようにすることです。一部の列に論理グループがあるように見えるので、これを言います。 (例:「新規」「資格」「提案」)。そのため、ユーザーが個別にではなく、グループで列を折りたたむ/展開することが役立つ場合があります。

0
Jung Lee

素晴らしいツールです。

かんばんでは、左から右の列に固定のタイムラインがあり、その主な目的は進行状況を視覚化することなので、列が折りたたまれていたり最小化されていても、正しい順序で列を表示することが重要だと思います。

したがって、私はあなたの最初の草案がかんばんのニーズにより適していると思います。

ただ1つの提案:折りたたまれた列内のタスクの数または位置を示すことについてどう思いますか?したがって、タイトルと説明を失うだけで、位置と金額は保持します。

Outlookのソリューションのように、2つの日付が同時にある場合、サイズはちょうど半分になります。折りたたまれた列でこれを同様に表示できます。

enter image description here 出典: http://info.eps.surrey.ac.uk

0
FrankL

わかりました、私はここではかなり外れているかもしれませんが、ここに私の心に浮かんだものがあります:

  • 列が折りたたまれている場合、他の列よりも狭いが、例の折りたたみ「開発」列ほど狭くない「折りたたみ列」列を開く/追加します。
  • 折りたたまれた列をタイル/カードとして「折りたたまれた列」列に追加します。
  • ユーザーが別の列を折りたたむ場合は、それを「折りたたまれた列」列にタイル/カードとしても追加します。

確かに、1つの列を折りたたむだけではスペースを節約できませんが、その後は合計が大きくなり、展開した列のカードの適切なドロップターゲットを保持しているように思えます。

これによって可能になる追加の「機能」:

  • 折りたたまれた列のタイル/カードをクリックすると、展開されます。
  • 列(ヘッダー)を折りたたまれた列の列にドラッグすると、折りたたまれます。
  • 折りたたまれた列の列で列の順序を並べ替えます。
  • 折りたたまれた列のタイル/カードにいくつかの統計を表示します。
  • ...

mockup

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

0
Marjan Venema