パッシブフールプルーフ

削除に対する保護を備えた私のかなりシンプルで便利なアイデアが不注意に多くの肯定的なレビューを集めたという事実のため、私は「愚か者に対する保護」の問題を真剣に検討することにしました。 原則として、このトピックは非常に興味深いものであり、多くのブロガーにbeatられていないため、ほとんどの読者に役立つはずです。



フールプルーフ



誰でもできるとはどういう意味ですか? これらは、情報の偶発的な削除を防ぐインターフェースの詳細であり、当然、ユーザーのデータと神経細胞の損失につながります。



上記の提案から、私たちはそれぞれ、「送信」ボタンの隣に配置された「クリア」ボタンを誤ってクリックして、「送信」ボタンの隣に配置した「愚か者」の状況に自分自身を少なくとも一度は発見したことがわかります。 私はすべての人の生活の中でそのようなケースがあったと確信しています。 それでは始めましょう。







ステージ1。 発行



サイト作成者が犯した最も一般的な間違いを理解しましょう。 もちろん、彼らはサディストではありません。彼らは、彼らの頭脳の創造の間、常に理性に導かれるわけではありません。

  1. カーソルのフォーカスは自動的にキャンセル、削除ボタンになります。
  2. 削除、キャンセル、消去のためのボタン-メインナビゲーション要素に疑わしい近さ(次のステップに移動するためのボタン、便利なリンクなど)
  3. 不可逆的な結果につながる要素は、目のユーザーにカルスになるように配置されます。
  4. データ損失につながるアクションは元に戻せません。




ステージ2。 解決策



2番目の段階では、これらの問題に対処し、それらを回避する方法を決定します。



だから:トリック。



フォーカスは非常に重要です。 フォームに入力するとき、タブを押したときのフォーカスは、次のステージに移動するためのボタンにすべてのフィールドが入力された後にのみ、隣接するフィールドに移動する必要があります。 どのような場合でも、フォーカスをキャンセル、削除ボタンなどに設定しないでください。 ユーザーが誤ってEnterキーを押した場合、長い間入力されていた情報が失われることはありません。



キャンセルボタン自体は、ドミナントボタンからある程度離れた位置にある必要がありますが、同時にそれと直接接続されている必要があります。 この場合、色によるグループ化を適用できます。これについては、 フォームに関するメモで説明しました。 それでも、オプションとして、メインボタンを使用して(および必要な)キャンセルボタンよりも多くの操作を1.5〜2回行うことができます。ユーザーの外観は、キャンセルボタンではなくメインボタンに表示されます。 また、色分解を適用することをお勧めします。ドミナントボタンが削除ボタンよりも明るく、彩度が高い場合に最適です。 理想的には、削除ボタンは灰色でなければなりません。



パン(ボタン、ええ)がユーザーの目から遠く離れて元に戻すことはできないが、同時に、ユーザーが時間の終わりまでトーチで検索する必要がないようにする結果につながる場合が最善です。 つまり このボタンは、最初の画面(ページが読み込まれた直後に開くブラウザー内の領域)の外側に配置する必要があります。 良い例として、WordPressエンジンを使用できます。最下部に投稿削除ボタンがあり、誤って押すことはできません。



理想的には、すべてのユーザーアクションを元に戻すことができます。 しかし、いつものように、練習は理想からはほど遠いので、上記の3つの点を考慮する必要があります。


ステージ3。 イデオロギー



この注意のほとんどをこの段階に当てました。この段階では、意図しないユーザーの操作から保護するのに役立ついくつかのアイデアを説明します。



1.削除/キャンセルボタンはデフォルトでは無効です。 その横にチェックボックスがあり、チェックするとボタンが有効になります-非常に有望で直感的なアイデアです。プロジェクトで使用することをお勧めします。



2.削除/キャンセルボタンはデフォルトでは無効です。 ほぼ次のコンテンツのテキストを除いて、近くに要素はありません。「ボタンをクリックしてアクティブにします。」 つまり ボタンが初めてアクティブになった後、それをクリックすることができます。 ランダムなクリックは排除されますが、特に才能のある人はこの保護機能をクロールできます。



3.「削除」リンクをクリックすると、削除は行われませんが、対応するボタンが表示されます。 繰り返しますが、この領域への偶発的なクリックを排除します。



4.システムでの削除に加えていくつかの機能を配置する場合、デフォルトのオプション「アクションの選択」を使用してドロップダウンリストを作成することをお勧めします。もちろん、これは何にもつながりません。 ドロップダウンリストの横には、ランダム選択から保護するための[OK]ボタンも配置されています。



欠点について:



1.ボタンの横にチェックボックスがある場合、このチェックボックスがボタンをアクティブにすることはほとんど直感的に明らかです。 残念ながら、これは誰にも明らかではありません。



2.碑文がなければ、何をすべきかはかなり不明確です。 そして、ご存知のように、すべての人がクリックする前にインターフェース要素の署名を読むわけではありません。



3.特に印象的な性格の刺激を除いて、実質的にマイナスはありません。彼らは自分の利益のために余分なクリックをすることはピップを失うよりも悪いです。



4.しかし、最大3回のクリックを伴う巨大な保護は、すべての視聴者がこの決定をサポートするわけではありません。ギークは不幸であり、一般ユーザーはすぐには理解しません。 上記の中で妥協を模索する必要があります。




Yaroslav Birzul (DezmASter)による投稿。

出典: Web UIブログ

投稿する画像: Designfrick



All Articles