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 について

推薦する

WindowsでのNginxの起動や停止などの基本操作コマンドの詳しい説明

Windows で Nginx を使用するには、Nginx サービスの起動、停止、Nginx のリロ...

jQuery タグセレクターの適用例の詳細な説明

この記事では、jQueryタグセレクターアプリケーションの具体的なコードを例として紹介します。具体的...

HTML にネストされた div の無効なマージンに対する解決策

div がネストされているときに margin が機能しない問題の解決策を次に示します。さて、マージ...

kubernetes1.5.2 から kubernetes1.10 にアップグレードする際の主要な設定変更記録

この記事では、kubernetes1.5.2 から kubernetes1.10 にアップグレードす...

MySQL グループレプリケーションの設定手順 (推奨)

MySQL-Group-Replication は、MySQL-5.7.17 で開発された新しい機...

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorException の解決方法

bitronix を使用して MySQL に接続するときの MySQLSyntaxErrorExce...

mysql 8.0.16 winx64.zip インストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16 winx64.zipのインストールと設定方法の具体的なコード...

VMware + Ubuntu18.04 による Hadoop クラスタ環境の構築に関するグラフィック チュートリアル

目次序文VMware クローン仮想マシン (準備、3 台の仮想マシンのクローン、1 台のマスター、2...

mysql8.0 パスワードを忘れた場合の修正とネットコマンドのサービス名が無効になる問題

cmdにnet start mysqlと入力すると、プロンプトが表示されます: サービス名が無効です...

Vue で echarts を使用してコンポーネントを視覚化する方法

echarts コンポーネントの公式ウェブサイト アドレス: https://echarts.apa...

imgタグ間のスペースの問題の詳細な説明

IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...

js はランダムロールコールを実装します

この記事では、ランダムロールコールを実装するためのjsの具体的なコードを参考までに共有します。具体的...

MySQL 8.0.15 圧縮版インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...

Zabbixのインストールと展開の詳細な説明

序文Zabbix は最も主流のオープンソース監視ソリューションの 1 つです。導入自体は難しくありま...

jQueryはネストされたタブ機能を実装します

この記事では、ネストされたタブ機能を実装するためのjQueryの具体的なコードを参考までに紹介します...