営業時間入力フォーム
レストランが営業時間を入力する必要があるインターフェースを設計しています。 1日のタイミングにスライダーコントロールを使用して、そのタイムラインが適用される曜日をユーザーに選択させることを考えています。
問題は、いくつかのレストランが営業時間の間に数時間休業することです。この問題のエレガントなソリューションに関するアイデアはありますか？
**更新**
この質問は、彼の週刊ニュースレターで Sacha Greif によって言及されたので、要件をより正式に述べる必要があると思いました。
- レストランのオーナーは、営業時間と曜日の異なる時間の間の休憩を含め、営業時間を入力できる必要があります。
- レストランが休業する日/日。この要件はツイートから生じました：
![enter image description here]()
- インターフェースは主に、複雑なインターフェースに慣れていないと思われるレストラン経営者を対象としています。
- 目標は、レストラン経営者がサインアップすることを奨励することです。そのため、サインアップフォームに記入している間、彼らの側の最小限の労力が理想的です。
この質問が生み出した関心に感謝し、あなたの提案を歓迎します。
これはトリッキーなやり取りです。これは、エンドユーザーがコンピューターに精通していないため、非常に直感的でなければならないためです。私は過去にそれを処理しなければならなかったのでそれを知っています:)
11870.com（Yelpに類似した推奨Webサイト）のUXチームで作業しているときにも同じ問題が発生しました。これは、私たちが処理した方法であり、理想的な解決策ではないかもしれませんが、うまく機能し、レストランやビジネスには問題がありませんでしたそれを構成する：
ユーザーは営業日と営業時間を選択します。
サービスが分割されている場合（レストランの99％が2つに分割されている場合）、「分割サービス」をクリックすると、さらに2つの選択項目が表示され、テキストが「xからx AND xからx」に変更され、リンクが「継続サービス」に変わります。 "ユーザーが前の状態に戻ることができるようにします。
時間枠は30分です。そしてデフォルトとして、最も一般的な選択（ここでは09:00から17:00）
以下に、ユーザーに情報を表示しますそして、それはページに表示される方法でもあります
ここがトリッキーな部分です。
情報の巨大なブロックに変わらない、簡単でわかりやすい方法で表示する必要があります。
グループ化が重要です。同じスケジュールで日をグループ化します。
たとえば、考えられるすべてのコンボについて考えます。
- ユーザーが毎日すべての時間を選択する場合、冗長なすべての日と時間を表示する代わりに、「終日オープン」を表示します。
- 2日以上連続して同じスケジュールで「グループ化」できる場合は、「mon to wed」と表示します。
- 週末のみを選択した場合：「週末：xからxまで」を表示
等...
難しい選択を表示する例を見ることができます（月曜日から木曜日はスプリットアワー+金曜日と土曜日を別のスプリットアワーのセット+日曜日はフルスケジュールで開きます）：
月曜日：13-16：30h/20：30-0hfri and sat：13-16：30h/20：30-0：30h日：13-16：30h
ここでライブで確認してください： 11870.comのレストランページ
休暇時間と特別な休業日に従って、別のセクションを作成することをお勧めします。そうしないと、ユーザーが混乱しやすくなります。
そのためには、インタラクションのようなカレンダーが最適です。
通常の営業時間と日数を特別な休暇時間と区別することで、ユーザーは一方に影響を与えずに一方を変更することもできます。
そのような入力を視覚的にサポートするほうがよいと思います。これにより、休憩だけでなく休日も入力できるようになります。入力は次のようになります。
行またはセルヘッダー（時間または日付き）をクリックすると、すべての日または時間のオン/オフが切り替わります。また、人気のバリエーションを表の上部に追加して、すばやく選択することもできます—"24x7"、"週末なしのすべての日"など。
また、一部の聴衆（最新のインターフェースに慣れていない）にとって正確な時間を選択することが難しい場合があるため、単純な（ブレークなしの）入力にスライダーを使用することはあまり便利ではありません。
ユーザーがデータを入力するための最良の方法はフォームを使用することだと思います-誰もがそれらの使用方法を知っており、多くのデータを簡単に小さな管理可能なチャンクに分割できます。これが私の解決策です：
これにより、必要なものをすべて入力できる十分なコントロールが提供されますが、大量の質問で彼らを圧倒することはありません。
[このスケジュールは祝日のみに適用されます]をクリックすると、祝日リストとドロップダウンメニューが表示され、さらに不明瞭な休日の日付ピッカーが表示されます。
[このスケジュールは1年の特定の時間にのみ適用されます]をクリックすると、2つの日付ピッカー、つまり[datepicker]から[datepicker]が表示されます
編集：休業日を特定する方法について少し説明しました。私の解決策では、「ヒント：このスケジュールのために閉じている場合はすべてのシフトを削除します」と言って、[保存]ボタンの左側に小さなツールチップを配置します。」
WWYD（Yelpはどうしますか？）
成長と成功のために同様の入力フォームに依存している人気のあるサイトを簡単に調査しました。 Yelpには最もシンプルで直感的なソリューションがあると思います （自分で試してください） ：
- 3つのコンボボックス（日、開始時間、終了時間）と[時間を追加]ボタン
- [時間を追加]をクリックすると、入力ウィジェットの上にある時間のリストに追加されます。
- 各リスト項目の横に削除リンクがあります。
- 日コンボボックスのデフォルト値は月曜日に始まり、新しい時間が追加されるたびに自動的に増加します。
- 他の時間のコンボボックスには、適切なデフォルトが与えられています。
Google+プレイスソリューションは次点です。この設計は、実際の大量の使用状況データによって駆動される可能性があります （自分で試してください） ：
追伸.
レストランを登録するとき、私は時間をオプションにします（上記の例のように）。あなたはいつでもレストランのオーナーにゆっくりと時間をかけてゆっくりと時間を追加することができます。
しばらく前にレストラン関連のウェブサイトについて考えたところ、Sachaのニュースレターの問題が私にこれを再浮上させました。レストランの営業時間にはさまざまな種類があるため、ソリューションはさまざまなバリエーションに対応できる十分な柔軟性を備えている必要がありますが、（技術に詳しいとは限らない）レストラン経営者を脅かさないほどシンプルである必要があります。
直感的でコンパクトなTwitter bootstrapのように、曜日を選択するためのチェックボックスボタングループ（ http://Twitter.github.com/bootstrap/javascript.html#buttons ）。画像はデスクトップブラウザ/クライアント用ですが、モバイルインターフェースに簡単に変換されることは想像できます。
このインターフェースは適切にスケーリングされます。営業時間が単純なほとんどのレストランでは、入力は非常に簡単です。ちょうどあなたが開いている日をクリックし、あなたが開いている時間を選択します。毎日別々のランチとディナーのサービスがありますか？問題ありません。タイムスロットが異なる複数の時間行を追加してください。レストランの常連客にとって有益な情報はラストオーダーのタイミングなので、それも入れました。レストラン経営者が時間の入力を完了すると、入力したすべての情報が1ページに表示されるので、入力した内容を簡単に確認できます。
この入力形式では、すべてが標準化されたマシンフレンドリーな形式でキャプチャされるため、出力を解析して読み取り可能な方法で表示できます（月曜日から木曜日の午前8時から午後8時、金曜日は休業）。
この質問には、複雑さを増大させる無限の可能性があると思います。たとえば、レストランが冬の時間限定で開店するとどうなりますか？すべてのシナリオを把握するのは難しいでしょう。
とは言っても、ユーザーが要求するまで混乱を減らすために、プログレッシブ開示のウィザードのようなフォームを使用して、かなり単純な方法で多くをキャプチャできます。
ステップ1：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ステップ2：（以下の段階的な開示を含む）
ステップ3：
このサイト で素敵な例 （フルサイズの画像を参照） を見つけました。スポーツトーナメントのスポーツ会場の空き状況を管理するためのものですが、このデザインはレストランの営業時間にも簡単に適用できます。最後の2つの列は必要ありません。
私の好きな事：
- スライダーのドラッグが簡単で、1週間にわたって明確な視覚的可用性
- 時間情報を含む複数のドロップダウンリストよりも速く時間範囲を設定しやすい
- 毎日の隣に特定の開始時刻と終了時刻を表示します
- レストランが毎日営業する合計時間を示します
- スライダーハンドルをクリックしてから、キーボードの矢印キーを使用してスライダーハンドルを一度に5分ずつ動かすことによる、きめ細かな制御
- スケジュールをクリアしてワンクリックで再開できる大きなボタン
- jQueryUIスライダー で簡単に実行できます。
短所：
- 平日の営業時間を分割することはできません。平日に営業時間を分割したい場合は、別の行を動的に追加する必要があるでしょう。
いくつかのアイデア。
1）「分割」時間を考慮します。
Hours:
[ ] to [ ] (+ split hours)
そして、彼らが分割することを決定した場合：
Hours:
[ ] to [ ]
[ ] to [ ] (+ split hours)
2）テキスト領域として自由に形成できるようにします。
Enter your hours of operation:
----------------------------
| |
| |
| |
| |
----------------------------
ここに私がそれがどうあるべきかについてのモックアップがあります：
- ユーザーは最初に2つのオプションのいずれかを選択します
- ノイズを回避するためにホバー上にゴミが表示されていると仮定します
- デフォルトでは、ユーザーは（オープン）（開始）（終了）というタイトルのスロットを1つ取得します
- （From）および（To）ドロップダウンは、テキストフィールドとしても機能します（Googleカレンダー）。
- スライダーはドロップダウンの代わりに各スロットに使用できます
Macのカレンダーに似ていないのはなぜですか？
これは視覚的に非常に明確ですが、クリックしてドラッグすることもできるため、時間ブロックの作成と調整をすばやく行うことができます。
ここでは、シンプルさが重要です。レストランのオーナーにとって価値あるものにするために、私はこの製品が何よりも非常に迅速で管理しやすく、直感的である必要があると考えています。
登録フローには2つのステップがあり、それぞれ異なる画面に表示されます。 
この最初の部分は登録です。彼らに求められるのは、名前、電子メール、パスワードだけです。次に、この情報が送信されると、次の画面が表示されます。 
彼らは考えることができるすべてのルールを入力し、それぞれ独自の文を作成します。理解することは何もありません。彼らは、他の人と同じように、自分の時間を段落形式で簡単に説明できます。次に、自然言語処理はすべての文を解析し、曜日と「オープン」または「クローズ」（他のトリガーワードの中でも）を探し、データをカレンダーに表示します。 
上部には、カレンダーに追加する新しいルールを追加できます。カレンダーの各ルールは、クリックして編集できるテキストボックスです。カレンダーの下部には、将来についてのメモがあります。休日や予定されている時間の変更など、将来のレストランのスケジュールに適用される近日中の通知が含まれています。
ただし、カレンダーには現在の週が表示されます。現在の曜日が強調表示され、レストランのすべての時間情報がタイムラインのように横方向に1日ごとに表示されます。
同じタスクを何日も繰り返さないことが最善だと思います。ほとんどの場合、レストランは営業時間を適用する日数の範囲を選択します（通常、平日と週末の2つの範囲）。
私が提案するインターフェースは、レストランのウィンドウに表示される営業時間に似ており、1日または特定の日の範囲を追加する柔軟性を提供します。
日の範囲内で余分なシフトを追加することもできます。最初のシフトは削除できません（少なくとも1つのシフトを含める必要があるため）が、追加の行の横には削除ボタンがあります。
対話は、マウスまたはキーボードの左矢印と右矢印（どちらも有効になります）での水平スクロールです。必要な柔軟性に応じて、分単位で15分または00または30にすることができます。
最初の範囲（月〜日など）内ですべての日が選択されている場合、追加の日の範囲は表示されません（営業時間内に「毎日」を表示できます）。
祝日に必要な柔軟性は完全にはわかりませんが、レストランが休業する祝日を選択する機能を追加しました。
インターフェースやインタラクションについて不明な点がある場合は、お気軽にお問い合わせください。 :)
これは難しい問題です。難しいUIの問題に対処するときは、物事を詳しく説明し、簡潔でコンパクトにしないでください。スペースを無駄にする可能性を犠牲にして、シンプルにしてください。役立つもう1つのことは、ユーザーに自分の作業の結果を表示することです。ユーザーが情報を入力すると、情報がどのように解釈され表示されるかを示す出力セクションがあります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
今、私はこの例の入力セクション（左側）に100％満足していません（それはまあまあですが、より良い提案が表示されても驚かないでしょう）、ここで重要なことは、入力の結果が表示されることです右側の「出力」セクションでリアルタイムに。これにより、ユーザーは結果を探索および実験して確認し、満足する結果を得ることができます。
サチャグライフのニュースレターを読みながら問題について聞いた。考えられる問題と解決策に関するSachaのコメントを読んでいると、自分の解決策を視覚化し始めました。それのクイックワイヤーフレームを作成しました。
ワイヤーフレームの例http://inkreaser.com/ext/stack-exchange/restaurant-hours.png
このソリューションは、必要なすべてをエレガントにカバーするのに十分複雑ですが、新しいユーザーが直感的に理解できるほど単純だと思います。デフォルトでは、フォームには1日と1シフト（最小要件）があります。ユーザーは「開始」と「終了」の時間と分を選択してシフトを入力できます。これは迅速ですが、完全な柔軟性を保持しています。ユーザーは、[+シフトを追加]をクリックしてシフトを追加できます。これにより、[元]ドロップダウンと[終了]ドロップダウンの別のセットが挿入されます。ユーザーは、このシフトセットを適用する日を指定し、必要に応じて日ブロックを追加して、異なる日シフトごとにプロセスを繰り返すことができます。
また、ユーザーがエラーを起こした場合に備えて、[このシフトを削除]ボタンと[この日を削除]ボタンを含めることもできます。
レストラン経営者やショップのオーナーは、一般的に営業時間を（たとえば）午前9時から午後10時と考え、数時間の休憩があると思います。たぶん、休憩/シエスタはローカルなもの（私はキプロス出身）ですが、毎日2つの営業時間の代わりに「休憩」を追加すると、レストラン経営者の観点から物事が簡素化されると思います。
もう1つ考えたのは、スケジュールを追加するためのタブ付きインターフェースです。私が理解しているように、ほとんどのレストランには2つの主要な営業時間のスケジュール（冬/夏）とそれに加えていくつかの休日のスケジュールがあります。
レストラン経営者は、タブ付きインターフェースを介して自分のスケジュールを作成できます。スケジュールに名前を付け、スケジュールの日付範囲を追加し、平日ごとの営業時間と休憩を入力できます（これはその日付範囲に適用されます）。
さて、これに関して私が考えることができる問題は、日付の重複の問題です。たとえば、2013年1月8日から2013年8月30日の範囲が2つ（またはそれ以上）のスケジュールに存在する場合、システムはどちらを選択しますか？
これは、ある種の「上書き」設定（たとえば、「これらの日付はSchedule2に存在します！上書き？」）で解決できますが、これが使いやすさを増すかどうかはわかりません。また、さらに複雑になります（たとえば、優先スケジュールが削除されるとどうなるかなど）。
私はウェッジに分割された時計ウィジェットを描いています。ウェッジは、開く時間をクリックするだけです。選択された時間はウィジェット上で水色で強調表示され、オープン/クローズされた時間はその下のテキストに表示されます（たぶんテキストエリアにあるので、一度クリックすると時間をコピーしてコピーできますか？）。または、クリックする必要が少ないように思われるため、閉じられる時間（おそらく非常に薄い赤で）のみを強調表示することもできます。
時間が選択されていないウィジェットの（非常に）大まかなBalsamiqモックアップを次に示します。
画像の例は粘着性のあるサイドバーで提供されるため、継続的に参照できます。また、クリックしてドラッグすると、複数のタイムウェッジが強調表示されます。
Alex Ovtcharenkoの拡張オプションは、視覚的な表示に関して非常に明確だと思います。それはそれを余分に使いやすくするためにいくつかの微調整を必要とするでしょう。これを行うには、30分間隔で表示し、営業時間のブロックを個別の列ではなく1つの領域として表示し（mac-calendarの横のみなど）、入力のクリックと入力のドラッグの両方を許可します。これの意味は：
- シングルクリックで入力ブロックをマークします。すでにマークされた期間に隣接している場合は、このブロックをそれに追加します。そうでない場合は、新しい期間を開始します。期間がすでにマークされている場合は、マークを外し、必要に応じて領域を分割します（たとえば、昼休みのマークを外すだけでなく、終日入力できます）。
- 領域/期間の境界線をドラッグできるようにします（適切なマウスカーソルを提供します）
- クリックアンドドラッグで領域を一度に選択できるようにします。