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

推薦する

CSS3を使用してトランジションとアニメーション効果を実現する

JS アニメーションの代わりに CSS アニメーションを使用する必要があるのはなぜですか? Java...

必見の JavaScript 面接質問 10 選のまとめ (おすすめ)

1.これは1. 誰が誰に電話をかけますか?例: 関数foo(){ console.log(&quo...

Linux で Grafana をインストールし、InfluxDB モニタリングを追加する方法

Grafana をインストールします。公式 Web サイトでは、直接インストールできる Ubuntu...

MySQL トランザクション分離レベルと MVCC の詳細な説明

目次トランザクション分離レベル同時トランザクション実行中に発生した問題SQL標準の4つの分離レベルM...

MySQL 5.7.15 のインストールと設定方法のグラフィック チュートリアル (Windows)

MySQL をインストールする必要があるため、インストール手順を以下のように記録します。 自分なり...

Reactイベントメカニズムソースコード分析

目次原理ソースコード分析委任されたイベントバインディングすべてのサポートされているイベントを聴くネイ...

MySQL DEFINER の使用方法の詳細な説明

目次序文: 1.DEFINERの簡単な紹介2. いくつかの注意点要約:序文: MySQL データベー...

React双方向データバインディングの原理についての簡単な説明

目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...

Vue 仮想 DOM クイックスタート

目次仮想DOM仮想DOMとは何か仮想DOMの役割Vue の仮想 DOM vノードvNodeとはvNo...

MySQLがトランザクション分離を実装する方法の簡単な分析

目次1. はじめに2. RC および RR 分離レベル2.1. RRトランザクション分離レベルでのク...

jQueryは画像の強調表示を実現します

ページ上の画像を強調表示することは非常に一般的です。ここでは、jQuery を使用して画像を強調表示...

deepin20 で NVIDIA クローズドソース ドライバーをインストールするための詳細な手順

ステップ1: ディープ「グラフィックドライバー」をインストールするdeepin v20にはデフォルト...

jQueryフレームワークは、要素の表示と非表示の3つのアニメーションメソッドを実装しています。

目次1. デフォルトで表示と非表示を切り替える2. スライドして表示と非表示を切り替える3. フェー...

Docker+K8S クラスタ環境構築と分散アプリケーション展開

1. Dockerをインストールする yumでdockerをインストール #サービスを開始する sy...

CSS3 フリップカード番号サンプルコード

今日会社から課題をもらったのですが、効果図は以下のとおりです。 どのような効果を実現したいかは特に決...