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

推薦する

JS 矢印関数に適さないシナリオは何ですか?

目次概要オブジェクトにメソッドを定義するオブジェクトリテラルオブジェクトプロトタイプ動的コンテキスト...

MySQL 5.7 で my.ini ファイルが見つからない場合の解決策

my.ini とは何ですか? my.ini は、MySQL データベースで使用される設定ファイルです...

Dockerコンテナ間の通信と外部ネットワーク通信の操作

コンテナ間の通信1. コンテナのネットワーク共有このモードの Docker コンテナはネットワーク ...

HTML、CSS、JSコメントの標準的な使用法の概要

必要なコメントを追加することは、責任感と道徳心のあるフロントエンド開発者が持つべき良い習慣であり、コ...

MySQL をデプロイするときに発生する「テーブル mysql.plugin が存在しません」という問題の解決方法

今日、MySQL の無料インストール版をデプロイしたところ、テーブル 'mysql.plug...

他の人が私のウェブページを保存したり、サイトをコピーしたりするのを防ぐためのヒント

現在、インターネット上でウェブサイトをコピーすることは非常に一般的です。では、他人が私たちのウェブサ...

Packetdrillの簡潔なユーザーガイド

1. Packetdrillのコンパイルとインストールソースコードリンク https://githu...

太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード

太陽系の 8 つの惑星(衛星を除く)のアニメーションを作成します。すべての惑星は太陽の周りを回ってい...

Vueがsweetalert2プロンプトコンポーネントを統合する際の問題についてお話ししましょう

目次1. プロジェクト統合1. CDNインポート方法: 2. 箱の梱包を確認する3. 迅速な箱詰め4...

要素 UI に基づいてクエリ コンポーネントを段階的にカプセル化する方法

目次関数基本的なクエリ関数クエリ条件の初期化ページのレンダリングクエリと表示の最適化をさらに強化プル...

JS でオブジェクトを作成する 4 つの方法

目次1. リテラル値でオブジェクトを作成する2. 新しいキャラクターを使ってオブジェクトを作成する3...

Vue2は応答性を提供するためにprovide injectを実装しています

1. vue2 での従来の書き方 // 親コンポーネントは 'foo' を提供します...

Vue3 でタイマーコンポーネントをカプセル化する方法

背景一部のショッピング モールの Web ページで商品の詳細を開くと、購入数量を選択するためのカウン...

検索エンジンのウェブサイトの入り口の無料コレクション

1: Baiduウェブサイトログイン入口ウェブサイト: http://www.baidu.com/s...

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

MySQL 5.7.17 のインストールと設定方法の概要最初のステップは、MySQL公式サイトから...