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

ブログ    

推薦する

MYSQL の COLLATE とは何ですか?

序文MySQL で show create table <tablename> コマンド...

MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装

MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...

Bootstrap FileInputは画像アップロード機能を実装します

この記事の例では、Bootstrap FileInputの具体的なコードを共有して、画像アップロード...

マテリアルデザインで水滴アニメーションボタンを実現するための純粋なCSS

序文こういう特殊効果ってよく見かけますよね。すごくかっこいいですよね。 これは、Google Mat...

Dockerの匿名マウントと名前付きマウントの具体的な使用法

目次データ量匿名マウントと名前付きマウントデータボリュームの場所データ量匿名マウントと名前付きマウン...

Tomcatのサーバーオプションの詳細な説明

1. 構成デフォルトでは、最初の 2 つはチェックされていないので、チェックする必要があります。 (...

163 メールボックスログインボックスインタラクティブデザインの改善体験と共有

LOFTER のコンテストで、ログイン ボックスを再設計できると言及されているのを見ました。過去 2...

WiFi 開発 | WiFi ワイヤレス テクノロジーの紹介

目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...

CentOS 7 に MySQL 8.0.20 データベースをインストールするための詳細なチュートリアル

関連記事: MySQL8.0.20 インストール チュートリアルとインストールの問題に関する詳細なチ...

Linux でアップロードされたファイルのスケジュールされたバックアップと増分バックアップを実装する方法

導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...

https ウェブサイトを展開し、Nginx でアドレス書き換えを構成するための詳細な手順

Nginx は、高性能な Web サイト サーバーおよびリバース プロキシ サーバーであり、IMAP...

IE8 互換性について: X-UA-compatible 属性の説明

問題の説明:コードをコピーコードは次のとおりです。 <meta http-equiv=&quo...

mysql 結合クエリ (左結合、右結合、内部結合)

1. MySQLの一般的な接続INNER JOIN (内部結合、または等価結合): 2 つのテーブ...

反応自動構築ルーティングの実装

目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...