Webアプリケーションのユーザビリティに関するいくつかの一般的な間違いは何ですか?
遅延が指定されていないCSS/Javascriptドロップダウンメニューを使用すると、「対角線の問題」が発生します( Jakob Nielsen を使用)。
チェックボックスにクリック可能なラベル およびその他のフォームフィールドを配置しない。
それはとても簡単です。 HTML <label> タグを参照してください。
I 嫌い検証に失敗したフォームを送信すると、アプリケーションは次のいずれかを行います。
フォームのプライマリアクションボタンとセカンダリアクションボタンのデザインが悪い。
ユーザーは、ブラウザ(またはマウス)の[戻る]ボタンと[進む]ボタンを使用します。また、更新ボタンも使用します。だからあなたのウェブサイト上のフォーム投稿に注意してください。
誰もこれが好きではありません...
このダイアログボックスは、データが投稿されたページを更新すると表示されます。幸い、可能であれば method = "get" を使用するか、必要に応じてmethod = "post"の直後にリダイレクトを続けることで回避できます。長さやセキュリティ上の理由で投稿を使用する必要がある場合、このメッセージを回避するために、リダイレクトはフォームアクションとは異なるURLに移動する必要があります。
JavaScriptリンク。javascript:loadPage(34576)
の新しいタブを中クリックで開くことはできません。
必要でない場合は、登録フォームで必須の個人情報を尋ねます。
例:
この情報を必須にすることは、 "dummy"、 "[email protected]"などで汚染されたデータベースを取得するための最良の方法です。ほとんどの人は、本当に必要でないときにそのような情報を提供したくないからです。
さらに、この情報を変更できないのは、本当に悪い設計です。
アンカーのtarget = "_ blank"は最も一般的なものの1つであり、私が最も嫌うものです。しかし、私の意見ではそれが理にかなっているいくつかのケースがあります。
これは、Webデザインの間違いトップ10のかなりよく知られているリストです。 http://www.useit.com/alertbox/9605.html
戻るボタンの機能が無効になっているか、ユーザーが期待する機能から変更されている場合。これは、カスタムダイアログ、ライトボックス、iframeを使用するアプリケーションでよく見られます。
「パスワードをお忘れですか?」リンクをクリックしてからクリックすると、パスワードが平文で送信されます1 見つけたら。親愛なるジェフ・アトウッドは、「 おそらくパスワードを正しく保存していない
1 確かに、この部分は プログラミングの問題 に近いものですが、使いやすさの問題でもあると思います。
ラジオボタンとしてのチェックボックスの使用、およびその逆。
アカウントを閉鎖する場所がない、またはアカウントを閉鎖する場所を見つけるのが本当に難しい。
理想的には、「アカウント」または同様の言葉で書かれたセクションが必要であり、そのページには、他の必要なものとは別に、「アカウントを閉じる」と明記されたリンクまたはボタンが明確にラベル付けされています。あなたは彼らに去る理由を彼らに尋ねるか、フィードバックを与えるように彼らに招待するページでそれに続くことができます、しかしそれらすべては実際の「私のアカウントを閉じる」(または削除、削除など)の行動を促すよりも優先順位を下げられるべきです。
非常に厳密な検証を行うフィールド。たとえば、郵便番号を入力した場合、「V5X4O4」は機能しますが「V5X 4O4」は機能しません。
テキストラベルまたはタイトルのないアイコン(ホバーの有無)。
タイトルが切り捨てられている場合は、ホバーすると完全なタイトルのツールチップが表示されるはずです。
重要なボタンがエンドユーザーから難読化されて、広告または販促資料が優先される場合。 Paypalの「アカウントなしで続行」ボタンを考えてみてください。
JavaScriptが無効になっていると、サイトの品質が低下しません。
質問は少し一般的すぎて、実際にはもっと議論の余地があります。
私は繰り返し見たことを1つ投稿できます。
「すべてクリア」ボタンのあるフォーム。
「クリア」ボタンの理由はまったくわかりませんが、絶対に主張する場合は、非常に微妙なリンクを使用して、ユーザーに1つの単純で明白なアクションを許可します。
本当に登録を必要としないいくつかの基本的な操作を実行するために登録する必要があります。または、「ワンクリック」の登録方法を許可します。
ユーザーには決定権が必要です。結局、非常に多くのウェブサイトに「使い捨て」のアカウントがたくさんできてしまいます。
必要ではない例:
Meebo Bar など。これらは不愉快であり、有用な機能を提供することはめったにありません。彼らは不必要なスペースを取り、気を散らす風船をポップアップします。
「創造的」であり、検索バーをタブやリンクなどの背後に隠している。検索を提供する場合は、ボックスを利用できるようにしてください。検索する必要はありません。
私の最大の不満は、1つまたは多くの理由でメールアドレスのプラス記号を正しくサポートしていないサイトです。多くの場合、ウェブサイトは「@」の前に「+」が付いたメールアドレスを検証しません。最悪なのは、サイトがアドレスを受け入れたが、データを正しくエスケープおよび/またはエスケープ解除せず、スペースが含まれているアドレスまたは「+」の両側がつぶされているアドレスにメールを送信する場合。
PHPで記述されたこの無料のバリデーター は、すべてのRFCとそれに関連するエラッタに従っているとされています。
多くのサイトでは、アクセスしたリンクに異なる色を使用していません。
ヤコブ・ニールセン: アクセスしたリンクの色を変更する
安全なHTTPS接続で実行されるが、HTTP接続からコンテンツを読み込むWebアプリ。一方ではこれで十分ですが、IEユーザー(特に私ではありません)の場合)のセキュリティ警告は扱いにくく、ユーザーを混乱させます...
すべてのページで閉じるのは非常に煩わしいだけでなく、言い回しも扱いにくく、ボタンのアクションはIE(6&7)とIE8 +で異なります
古いIEダイアログ:
新しいIEダイアログ:
したがって、ユーザーが「ページ全体をロードしたいだけ」の場合(たとえば、「離れる」ボタンを探している場合)...これがデフォルトです。 Yes IE6およびIE7では、デフォルト以外 No IE8 +で。
注:ダイアログの目的、およびMicrosoftがダイアログを変更した理由についてさえ、開発者として十分に理解していますが、エンドユーザーにとっては、特にIE8で混乱するだけです。エンドユーザーは、「許可」、「確認」などを求めるダイアログが表示され、ダイアログを読み上げないため、「OK」または「はい」オプションをクリックすることを期待します。ユーザーはそれを読むべきだと主張することもできますが、開発者が混合コンテンツがないことを確認すれば、それを完全に回避できるのであれば、それはより簡単です。
ログアウトリンクを検索する必要があります。私はページにログオンしますが、完了したら、ログアウトボタンまたはリンクを検索する必要があります。
最近、私はユーザビリティの問題とは考えたことのないことに気づきました。
アクションを利用可能にするためのホバー。たとえば、ツイートにカーソルを合わせるとリツイートと返信のコマンドが表示されるTwitter.comのように。
これは単にタッチベースのデバイスではまったく機能しません。ホバーはありません!
私のもう1つの不満は、新しいタブで外部リンクを開かないWebサイトです。見て、私は木をブラウズしています。私が今いるすべてのドメインがブランチを表すと期待しています。ブランチを使い終わったら、タブを閉じます。私は間違いなく、「戻る」を10回クリックしてブランチを上に移動したくありません。
ユーザーが望むものを隠し、代わりにあなたが望むものを与える。
たとえば、カスタマーサポートです。電話番号やメールなどで大きな太い箱をリストする代わりに、FAQをヘルプの手段として表示し、そのページに連絡先情報がない場合があります。
スクロールするときに画面の上下に「浮く」メニュー構造を持つサイト。なぜそうしたのかはわかりますが、多くの場合、それは非常に気を散らすものであり、設計者が明らかに望んでいたほど「滑らか」ではありません。
私が参照している例はここにあります: http://www.deluxe-menu.com/floatable-menu-sample.html
承認された回答を2回表示するQAサイト。
List ApartにはAza Raskinによる記事があります。「元に戻すことを意味するときに警告を使用しないでください」。
http://www.alistapart.com/articles/neveruseawarning/
ユーザーは「警告」ポップアップを無視または嫌う傾向がありますが、「元に戻す」機会をユーザーに提供する方がはるかにユーザーフレンドリーです。
最近は非常に人気がありますが、特に、知らない単語を認識できない場合(またはキーボードにýáěíčなどの特殊文字さえない場合)は、アクセシビリティの問題と見なされます。
個人的には、この機能を提供するために単純な合理的な質問を使用しています
例:番号11に続く次の整数を記述してください
私は通常、さまざまなメーリングリストからのプログラミングの質問/回答を表示する多数のタブを開いており、これらのサイトの多くは重いJavaScriptを実行しています(adblockのインストールは役立ちましたが、それでも重いサイトがあります)。 Chromeを使用すると、原因となっているタブを最終的に確認できます。
新しく改善されたGoogle画像検索は私のCPUに大きな負荷をかけ、数百メガバイトを消費します。多くのリソースが不足しています。
マウスカーソルを置くと色が変わるが、クリックしても何もしない静的要素があること。同じリーグ内:クリック可能な領域がテキストに制限されているハイパーリンクまたはボタン。
ルートURIからサブディレクトリまたはサブドメインへのリダイレクト(wwwを削除/追加しない)。