web-dev-qa-db-ja.com

予約と部屋の表示を改善する

キャンパスには、6つの部屋を表示する大きな電子ボード(下の画像を参照)があります。各色は別の部屋を表し、その部屋が予約されたときに表示されます。

https://scontent-arn2-1.xx.fbcdn.net/hphotos-xlf1/v/t34.0-12/12242102_10153806875886522_506967510_n.jpg?oh=fd0e83158fb5483c154d77121674fc75&oe=564F68CF

この情報を表示するための、よりユーザーフレンドリーな(そしておそらく雑然としない)方法はありますか?

2
N3buchadnezzar

以下のいくつかの提案を参考にしてください。

  • 時間は横軸にして、読みやすくしました。
  • 時間の灰色のフォントを使用します。それらは、画面上の重要度の低い情報です。
  • 部屋の彩度を下げる。彩度を上げると、より乱雑になります。
  • ルームバーで時間を繰り返さないでください。それらは必要ありません。
  • 連続バーを表示します。同じ部屋で2つのセッションが連続している場合、それらを2つの棒としてではなく、1つの棒として表示します。この情報は不要です。
  • 毎日数時間繰り返します。これにより、ユーザーの目の動きが最小限に抑えられます。
  • 日ラベルから灰色の背景を削除します。
  • 灰色の線グリッドを追加します。これにより、ユーザーは空の部屋をより簡単に識別できます。
  • 日ラベルのフォントを太字で大きくします。予約で最も間違いが多いのは日です

結果は次のようになります。

enter image description here

7
DesignerAnalyst

列に週を表示する代わりに、列に会議室を表示できます。次に、曜日をドロップダウンとして移動できます。ほとんどの人は特定の日に会議をスケジュールしようとしていると思います。彼らはその日を選択して、どの時間に部屋に空きがあるかを確認できます。それはあなたのチャートを散らかすでしょう。

2

大きな電子掲示板ではなく、予約プロセス用に設計された小さなページの場合は、一度に1日ずつ表示し、ドロップダウンを入れ替えて表示することをお勧めします。しかし、これは概要を示すように設計されているので、私の推奨は次のようなものになります:

mockup

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

色のグラデーションは、空いている部屋の数を表します。暗い色は部屋が少ないことを意味し、明るい色は部屋が多いことを意味します。混乱を減らすためにいくつかの犠牲を払わなければなりません、そして最も重要な事実はどの部屋が利用可能であるかだと思います。たとえば、赤から緑まで、さまざまな配色が機能する場合があります(ただし、色覚異常のユーザーにとっては不明確である可能性があります。現在のシステムが非常に親しみやすいというわけではありません!)。

私は間違っているかもしれませんが、生徒がボードを見て、選択した時間に部屋が空いているかどうかを確認し、別のデバイスで予約することを集めています。彼らは一目で部屋が空いているかどうかを確認できます。どの部屋かはわかりませんが、ログオンするまでは関係ありません。ログオンすると、より詳細なリストが表示されます。

1
A. Sim