Helloダイアログボックスのデザイン体験の共有

Helloダイアログボックスのデザイン体験の共有
「どうしたの?」特定の種類のダイアログ ボックスに慣れていない限り、ダイアログ ボックスが表示されたときの最初の反応は、多くの場合次のようになります。これは、バスに急いで乗ろうとしているのに、途中で頻繁に止められてチラシを渡されるような体験です。それが邪魔であり、時には迷惑であることも否定できません。デザイナーとして、私たちは「中断」を当面排除することはできないとわかっていますが、それが「妨害」にならないように努めるべきです。
① 何度も中断される=迷惑 1時間に1回くらいの中断であれば我慢できるかもしれません。 1 分間に何度も中断されたら、考えただけでも気が狂いそうですよね。このため、Chrome では、この Web ページがダイアログ ボックスでユーザーを複数回「中断」したと判断すると、「このページにダイアログ ボックスが再度表示されないようにする」オプションが表示されます。
こんにちはダイアログボックス 123WORDPRESS.COM
1 つの原則を理解してください。可能であればダイアログ ボックスを使用しないようにしてください。次の 2 つの状況が発生しない限り:
A. 手術は非常に危険であるか、または元に戻すことができません。
このダイアログ ボックスの外観が適切かどうかを判断するには、次の原則に従ってください。
Win7 システムでは、ファイルを削除するたびに、削除するかどうかを確認するダイアログ ボックスが表示されます。
(ヒント: 通常の削除は本当に元に戻せないのでしょうか? Windows にはごみ箱もあります。ごみ箱から取り出すには多額の費用がかかりますか?)
B.事前に回避することはできず、ユーザーが確認する必要があります。
このダイアログ ボックスの外観が適切かどうかを判断するには、次の原則に従ってください。
イベントは終了しましたが、「投票」ボタンはまだクリック可能です。クリックすると、すべてが終了したことを知らせるダイアログボックスが表示されます。
まとめると、ダイアログ ボックスを設計する前に、中断は本当に必要か、中断する価値はあるか、よく考えてください。
② 意味不明=中断 A.「はい/いいえ」や「確認/キャンセル」を尋ねる
まず言語を確認しましょう:
では、ダイアログボックスに戻りましょう。
シナリオ 1: ユーザーが [終了] をクリックします。誤操作を避けるために、ユーザーに本当に終了するかどうかを尋ねます。このとき、「はい/いいえ」と「確認/キャンセル」のどちらを使用すればよいでしょうか。
提案:
「終了」をクリックしたということは、誤って操作した可能性よりも、本当に終了したい可能性の方がはるかに高いです。したがって、ここでは「はい、終了したいです」という強い前提があります。
その後、「終了しますか?」と尋ねるダイアログ ボックスを表示すると、ユーザーは混乱する可能性があります。すでに「終了」をクリックしましたが、まだ終了するかどうかを尋ねられています。すでに選択しているのではないですか?
「本当に終了しますか?」を使用すると、ユーザーに合図を送ることができます。ユーザーが終了することを選択したことはわかっており、これは単なる再確認です。
シナリオ 2: Chrome ブラウザには、外国語のサイトを初めて開いたときに、翻訳するかどうかの意見を尋ねるダイアログ ボックスが表示される機能があります。この時点では「はい」と聞くべきでしょうか、それとも「確か」と聞くべきでしょうか?
提案:
初めて開くので、ユーザーが翻訳を望んでいるかどうかは判断できません。英語は現在広く使用されているため、原文を読みたいユーザーもいれば、大まかな意味を理解するために翻訳を読みたいユーザーもいます。同じ人であっても、時には翻訳されたウェブサイトを閲覧し、時には元のウェブサイトを閲覧したい場合があります。
ユーザーが何を意味しているか推測できない場合は、当然ながら「はい」を使って尋ねる必要があります。これは Chrome が現在実行していることでもあります:
B. 質問に答える
これを見て、疑問に思うことがあるかもしれません。先ほどの Chrome の例では、「翻訳が必要ですか?」と尋ねられたとき、答えは「翻訳/いいえ」であり、「はい」はまったく表示されません。ぜひお読みください...
C. 「はい/いいえ」でも「確認/キャンセル」でもない
「determining」よりも限定動詞を使った方が良いようですね?
必ずしもそうとは限りませんが、質問で言及した点が本当にユーザーの注意を引いている場合や、操作を短い言葉で説明できず、質問で詳細に説明する必要がある場合はそうです。現時点では「OK」の方が適切でしょう。
つまり、ある時点では(上で分析したように):
「はい/いいえ」は「特定の動詞/いいえ」に進化することもあります。
「確認/キャンセル」は、「特定の動詞/キャンセル」の組み合わせに進化することもあります。
D. 質問するときに「はい」または「はい」を使う必要がありますか?
シナリオ: ユーザーが連載小説を読んでいます。有料の章に到達すると、ダイアログ ボックスが表示され、その章を購入するために 30 Q ポイントを費やすように求められます。次のダイアログ ボックスのどれを使用しますか。
ダイアログ ボックス 2 では、「この章を購入」ボタンもガイドの役割を果たしており、直感的に操作できます。しかし、「購入の確認」の質問も、「確認」ボタンもありません。何か問題がありますか?
可用性に関しては問題ありません。
ここでダイアログ ボックス 1 とダイアログ ボックス 2 を使用することの違いは何ですか? 利点と欠点はありますか?
もう少し細かく見てみましょう。「はい/いいえ」と「確認/キャンセル」を区別していたとき、「確認」を求める前に、実際にはすでに心の中に「はい」という前提があると述べました。
現在のシナリオでは、ユーザーが購入の意思を確認し、「購入」をクリックすると、ダイアログボックスがポップアップ表示され、詳細情報が表示され、本当に購入するかどうかを再度確認します。
代わりに、ユーザーは本を試していて、無料の章を次々と読んでいくと、どの章で料金が発生し始めるかを実際に予測する方法はありません。
したがって、このダイアログ ボックスの表示には「はい」の前提は含まれておらず、予期されていません。
現時点では、ユーザーに対して事実を述べることは、通知に似ています。 「この章を購入する」というボタンは、提案とガイドとして機能します。
「本当に…」と聞くのは、相手がその家を買うつもりがあるかどうか、またはその家が気に入っているかどうかを知らずに、家代金を払うように頼むようなものです。それはちょっと唐突でしょう。
言い争いは終わります。同意する場合は、厳格に対処し、ユーザーがダイアログ ボックスを見たときに「嫌い」ではなく「こんにちは」と言うようにします。

<<:  モバイルプラットフォーム開発におけるメタタグの適用の詳細な説明

>>:  Jira リバース プロキシを実装するための nginx について

推薦する

主要ブラウザとそのカーネルの紹介

トライデント コア: IE、MaxThon、TT、The World、360、Sogou Brows...

IDEA 2020.3.1 で Tomcat をデプロイし、最初の Web プロジェクトを作成するプロセスの詳細な説明

目次Tomcat の紹介Tomcat の展開Web プロジェクトの作成tomcatの設定プロジェクト...

DockerHubイメージリポジトリの使い方の詳しい説明

これまで使用していたイメージはすべて DockerHub パブリック リポジトリから取得していました...

MySQLの保存時間の不一致の問題を解決する

Java を使用してシステム時間を取得し、それを MySQL データベースに保存した後、時間タイプが...

Vueライフサイクルカメラの8つのフック関数

目次1. beforeCreateとcreated関数2. beforeMountとmount関数3...

Docker がデータベースのデプロイに適さない 7 つの理由のまとめ

Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...

MySQLのロック構造の詳細な説明

Mysqlは3種類のロック構造をサポートしていますテーブルレベルのロック、低オーバーヘッド、高速ロッ...

JS は VUE コンポーネントに基づいて都市リスト効果を実装します

この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...

HTMLの基礎知識:ウェブページの基礎知識

HTML は Hypertext Markup Language の略です。これは、実際のプレゼンテ...

HTML のスクロールバーについて/スクロールバーの削除

1. xhtmlの下のスクロールバーの色元の HTML では、ページ全体のスクロール バーを次のよう...

CSS スキル コレクション - 古典の中の古典

リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...

単一の MySQL テーブル内の行数が 500 万を超えてはいけないのはなぜですか?

今日は、興味深いトピックについてお話ししましょう。データベースとテーブルを分割することを検討する前に...

jQueryはシャトルボックス効果を実現します

この記事では、シャトルボックス効果を実現するためのjQueryの具体的なコードを参考までに紹介します...

Vue3 の ref と toRef の違いを簡単に分析します

1. refがコピーされ、ビューが更新されますrefを使用してオブジェクトのプロパティ値をレスポンシ...

Linux サーバーのグラフィック カードのクラッシュの解決策

ログインインターフェースの解像度が特に大きい場合、グラフィカルインターフェース全体が特に大きくなり、...