クリックする必要がないのに、なぜユーザーにクリックさせるのですか？週のすべての営業時間と営業時間を簡単に表示できますが、ユーザーが探している曜日がすでにわかっているため、情報が過負荷になることはないと思います。これが私が話していることの大まかなスケッチです：
店舗の開店・閉店日時、開店の有無をシンプルかつエレガントに表示します。
どちらの画像も優れていませんが、2番目の画像は最初の画像よりも明らかに優れています。
これらと同様のコンセプトを使用してみることができます 再設計された駐車標識
私は、ベルギーのかなりの数のショップ（すべてのショップが独自のランダムセットを構成している）で、この種の横型のデザインを営業時間に見たことがあります。
|08 |09 |10 |11 |12 |13 |14 |15 |16 |17 |18 |19 |20
Mon |----|----|----|----| |----|----|----|----|----|----|----|
Tue |
Wed |----|----|----|----| |----|----|----|----|----|----|----|
Thu |----|----|----|----| |----|----|----|----|----|----|----|
Fri |----|----|----|----| |----|----|----|
Sat |
Sun |
私は次の理由で2番目のものを好みます：
- ラジオボタンのあるフォームを思い出させる最初のカレンダーと比べると、カレンダーのように見えます。
- 営業日を明確に示してください。
- 同様に開いていない日。
ただし、改善できる領域があります。
本日vs営業日
今日の営業日と営業日の違いは何ですか？ Mon-Friから営業していることをすでに示している場合、本日営業していることを示す必要がありますか？
ラベリング
ユーザーは、コンテンツに本当に興味がある場合にのみ、Webで逐語的に読みます。彼らは通常、ハイライトされたキーワード、意味のある見出し、短い段落、スキャン可能なリストを探してページを読み飛ばします。探している情報をすぐに見つけようと急いでいるので、無関係なものはスキップします。
- XMyths から取得
モックアップに長い段落があるわけではありませんが、最初の例では時間がどのように記述されているかを好みます。 タイミング：15:00〜00:00は、午前10時からの営業時間よりも処理とダイジェストがはるかに簡単です午後8時まで。おそらく、ラベルをに書き換えることができます。営業時間：10 am-8 pm、Fri 10 am-4pm
特定の日付のみを操作する場合を除き、カレンダーの日（21、22、23 ..）を削除します。
テキストのコントラスト
テキストのコントラスト、特に黄色の背景に対して白いテキストを上げる必要があります。視覚障害のあるユーザーは、コンテンツを読みにくい場合があります。 カラーコントラストアナライザー を使用して、コンテンツをアクセシビリティに対してチェックします
私も2番目のものを好みます。色がより美しく、店（またはこのデザインが何であれ）が開いている時間はより明白です。 「タイミング：15：00〜00：00」の意味がわかりませんか？
「今すぐ開く」通知があっても気になりません。たとえば、Googleマップにも表示されます（特定の会社を検索すると、営業時間と現在営業しているかどうか、営業時間を表示している人が表示されます）。時間、しばしばその時に行くことに興味がある）。
あなたが考えることができる2つの追加の事柄：1）「クーポン」ステートメントは重要ですか？あなたはex.1ではそれについて言及しますが、ex.2では言及しません。 2）聴衆を念頭に置いてください。すべての国が同じ曜日に週を開始するわけではなく、すべての国が同じ方法で時間を述べるわけではありません（AM-PMと24時間）。ほとんどのクライアントが1つが普及している国から来ることを期待する場合は、そのクライアントを使用します。
バージョン2は視覚的にはより魅力的で、わずかに優れています（開業日についての手掛かりがより優れているため）が、どちらのデザインも非常に混乱しています。デザイン1のあいまいさ：
- タイミングはすべての日に適用されますか、それとも現在選択されている日に適用されますか？いずれかの日付をクリックしようとするまではわかりません。
- 別の日をクリックするまで、この店が開いている日を知る方法がありません。
デザイン2のあいまいさ：
- 営業時間はすべての日に適用されますか、それとも現在選択されている日に適用されますか？他の日をクリックしようとするまでわかりません。
- 日には日付もあります。来週の営業時間を調べるにはどうすればよいですか。
混乱（少なくとも私の頭の中では、それは私かもしれません）はおそらく、営業時間が選択された日付の上に表示されているためです。
別の方法として（すべての質問に答えるためにクリックする必要がない場合）：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これは、営業時間のスケジュールが比較的単純な場合に機能します。
- シンプルな開始時間と終了時間、昼休みの複雑化なし
- 非常に少数の例外を除いて、毎週同じ営業時間
物事がより複雑である場合、他のいくつかの回答のより広範な設計がより適しています。
間違いなく2番目のものです。私は私の目がすぐに曜日に引き付けられるのが好きです。
私は一般的に、時間をより明確にすることに関する他の回答に同意します。おそらく、日を選択したら、時間に注意を向ける単純なアニメーションかもしれません。
二つ目
最初のものは全然わからなかった。
しかし、2つ目は、土曜日と日曜日が定休日であることを明確にすることで改善できます。
2つ目は、最初の1つが非常に悪いためです。
2つ目は、それ自体に問題があります。
- 現在開いているのは黄色で、現在選択されている日も黄色で表示されます。別の日を選択すると、閉じられているため、選択されている日は再び黄色になりますか？
- 営業時間と下部の時間の表示は冗長です。
- 時間を表示するには、すべての日をクリックする必要があります。
- 土曜日と日曜日は淡色表示されていますが、常に閉まっているかどうかは不明です。開店時間があるのですか、それとも単に無効になっているのですか。
- 現在の日時が明確ではありません
使用されている一般的なインターフェースは最良のものではないと思います。まったく異なるアプローチが必要です。
それでも、この種のインターフェースは、ほとんどの人が思っているよりも難しいものです。
正直に言うと、この場合のビジュアルプレゼンテーションは、必要以上に混乱を招くだけだと思います。
滑らかなUIを構築するよりも、適切な表現を使用したいと思います。
「平日午前10時から午後8時まで、週末は午前10時から午後11時まで」のように書いたり、スケジュールが単純でない場合は、「月曜、火曜、金曜の午前10時から午後8時まで、その他の日は午前10時から午後11時までを使用したりできます。 」.
1週間に2セットを超える開店時間がある場合、UXの問題は所有者にあり、開店時間と矛盾しています。