web-dev-qa-db-ja.com

一般的なWebアプリのユーザビリティの落とし穴?

Webアプリケーションのユーザビリティに関するいくつかの一般的な間違いは何ですか?

75
tobeannounced

遅延が指定されていないCSS/Javascriptドロップダウンメニューを使用すると、「対角線の問題」が発生します( Jakob Nielsen を使用)。

alt text

81
jessegavin

チェックボックスにクリック可能なラベル およびその他のフォームフィールドを配置しない。

それはとても簡単です。 HTML <label> タグを参照してください。

74

不十分なフォーム検証デザイン。

I 嫌い検証に失敗したフォームを送信すると、アプリケーションは次のいずれかを行います。

  • フォームがリロードされると、フィールドは空白になります。これは、iPhoneでWebアプリにサインアップしているときに起こりました。 8つ以上のフィールドがあったので、私は王室に怒っていました。
  • フォームの送信ごとに1つの検証エラーのみを表示します。
  • フォームの上部にエラーの概要を表示しません。
  • 無効なフィールド入力を視覚的に強調表示しません。
74
jessegavin

フォームのプライマリアクションボタンとセカンダリアクションボタンのデザインが悪い。

http://www.lukew.com/resources/articles/psactions.asp

alt text

55
jessegavin

ユーザーは、ブラウザ(またはマウス)の[戻る]ボタンと[進む]ボタンを使用します。また、更新ボタンも使用します。だからあなたのウェブサイト上のフォーム投稿に注意してください。

誰もこれが好きではありません...

enter image description here

このダイアログボックスは、データが投稿されたページを更新すると表示されます。幸い、可能であれば method = "get" を使用するか、必要に応じてmethod = "post"の直後にリダイレクトを続けることで回避できます。長さやセキュリティ上の理由で投稿を使用する必要がある場合、このメッセージを回避するために、リダイレクトはフォームアクションとは異なるURLに移動する必要があります。

52
Steve Wortham

JavaScriptリンク。javascript:loadPage(34576)の新しいタブを中クリックで開くことはできません。

43
Casey Chu

必要でない場合は、登録フォームで必須の個人情報を尋ねます。

例:

  • この情報が役に立たないウェブサイトのアドレスを尋ねる
  • 「本当の」名前を入力することを強制する
  • ...

この情報を必須にすることは、 "dummy"、 "[email protected]"などで汚染されたデータベースを取得するための最良の方法です。ほとんどの人は、本当に必要でないときにそのような情報を提供したくないからです。

さらに、この情報を変更できないのは、本当に悪い設計です。

37
Julien N

アンカーのtarget = "_ blank"は最も一般的なものの1つであり、私が最も嫌うものです。しかし、私の意見ではそれが理にかなっているいくつかのケースがあります。

これは、Webデザインの間違いトップ10のかなりよく知られているリストです。 http://www.useit.com/alertbox/9605.html

30
Nacho

戻るボタンの機能が無効になっているか、ユーザーが期待する機能から変更されている場合。これは、カスタムダイアログ、ライトボックス、iframeを使用するアプリケーションでよく見られます。

30
jessegavin

「パスワードをお忘れですか?」リンクをクリックしてからクリックすると、パスワードが平文で送信されます1 見つけたら。親愛なるジェフ・アトウッドは、「 おそらくパスワードを正しく保存していない

1 確かに、この部分は プログラミングの問題 に近いものですが、使いやすさの問題でもあると思います。

26
Jared Harley

ラジオボタンとしてのチェックボックスの使用、およびその逆。

24
Gelatin

アカウントを閉鎖する場所がない、またはアカウントを閉鎖する場所を見つけるのが本当に難しい。

理想的には、「アカウント」または同様の言葉で書かれたセクションが必要であり、そのページには、他の必要なものとは別に、「アカウントを閉じる」と明記されたリンクまたはボタンが明確にラベル付けされています。あなたは彼らに去る理由を彼らに尋ねるか、フィードバックを与えるように彼らに招待するページでそれに続くことができます、しかしそれらすべては実際の「私のアカウントを閉じる」(または削除、削除など)の行動を促すよりも優先順位を下げられるべきです。

22
Rahul
  • 非常に厳密な検証を行うフィールド。たとえば、郵便番号を入力した場合、「V5X4O4」は機能しますが「V5X 4O4」は機能しません。

  • テキストラベルまたはタイトルのないアイコン(ホバーの有無)。

  • タイトルが切り捨てられている場合は、ホバーすると完全なタイトルのツールチップが表示されるはずです。

  • 重要なボタンがエンドユーザーから難読化されて、広告または販促資料が優先される場合。 Paypalの「アカウントなしで続行」ボタンを考えてみてください。

    • 権限なしで再生できるオーディオ!笑-また、ミュートボタンはありません。
21
Motolix

JavaScriptが無効になっていると、サイトの品質が低下しません。

19
GSto

質問は少し一般的すぎて、実際にはもっと議論の余地があります。

私は繰り返し見たことを1つ投稿できます。

「すべてクリア」ボタンのあるフォーム。

  • それらのいくつかは、「送信」ボタンと「すべてクリア」ボタンの両方を同じように設計し、それらに等しい重みを与えます。
  • 言うまでもありません(現時点では特定のリンクを考えていません...)左側に「クリア」、右側に「送信」があり、一部のユーザーが最初のボタンを押す原因となっています。最後のフィールドを離れるときに、カーソルに最も近いボタン。

「クリア」ボタンの理由はまったくわかりませんが、絶対に主張する場合は、非常に微妙なリンクを使用して、ユーザーに1つの単純で明白なアクションを許可します。

18
Dan Barak

本当に登録を必要としないいくつかの基本的な操作を実行するために登録する必要があります。または、「ワンクリック」の登録方法を許可します。
ユーザーには決定権が必要です。結局、非常に多くのウェブサイトに「使い捨て」のアカウントがたくさんできてしまいます。

必要ではない例:

  • ファイルのダウンロード(サンプルファイルのダウンロードを許可するために登録を要求する「コード」Webサイトの数は?)
  • 検索(はい、一部のフォーラムは非登録ユーザーの検索を無効にします)
  • 記事へのアクセス(アクセスが無料の場合)
  • ...
17
Julien N

フローティングステータスバーのあるサイト

Meebo Bar など。これらは不愉快であり、有用な機能を提供することはめったにありません。彼らは不必要なスペースを取り、気を散らす風船をポップアップします。

16
Gelatin

「創造的」であり、検索バーをタブやリンクなどの背後に隠している。検索を提供する場合は、ボックスを利用できるようにしてください。検索する必要はありません。

16
agartzke

私の最大の不満は、1つまたは多くの理由でメールアドレスのプラス記号を正しくサポートしていないサイトです。多くの場合、ウェブサイトは「@」の前に「+」が付いたメールアドレスを検証しません。最悪なのは、サイトがアドレスを受け入れたが、データを正しくエスケープおよび/またはエスケープ解除せず、スペースが含まれているアドレスまたは「+」の両側がつぶされているアドレスにメールを送信する場合。

PHPで記述されたこの無料のバリデーター は、すべてのRFCとそれに関連するエラッタに従っているとされています。

15
waymost

多くのサイトでは、アクセスしたリンクに異なる色を使用していません。

ヤコブ・ニールセン: アクセスしたリンクの色を変更する

12
Marc Dong

安全なHTTPS接続で実行されるが、HTTP接続からコンテンツを読み込むWebアプリ。一方ではこれで十分ですが、IEユーザー(特に私ではありません)の場合)のセキュリティ警告は扱いにくく、ユーザーを混乱させます...

すべてのページで閉じるのは非常に煩わしいだけでなく、言い回しも扱いにくく、ボタンのアクションはIE(6&7)とIE8 +で異なります

古いIEダイアログ:

alt text

新しいIEダイアログ:

alt text

したがって、ユーザーが「ページ全体をロードしたいだけ」の場合(たとえば、「離れる」ボタンを探している場合)...これがデフォルトです。 Yes IE6およびIE7では、デフォルト以外 No IE8 +で。

注:ダイアログの目的、およびMicrosoftがダイアログを変更した理由についてさえ、開発者として十分に理解していますが、エンドユーザーにとっては、特にIE8で混乱するだけです。エンドユーザーは、「許可」、「確認」などを求めるダイアログが表示され、ダイアログを読み上げないため、「OK」または「はい」オプションをクリックすることを期待します。ユーザーはそれを読むべきだと主張することもできますが、開発者が混合コンテンツがないことを確認すれば、それを完全に回避できるのであれば、それはより簡単です。

12
scunliffe

ログアウトリンクを検索する必要があります。私はページにログオンしますが、完了したら、ログアウトボタンまたはリンクを検索する必要があります。

12
thursdaysgeek

最近、私はユーザビリティの問題とは考えたことのないことに気づきました。

アクションを利用可能にするためのホバー。たとえば、ツイートにカーソルを合わせるとリツイートと返信のコマンドが表示されるTwitter.comのように。

これは単にタッチベースのデバイスではまったく機能しません。ホバーはありません!

私のもう1つの不満は、新しいタブで外部リンクを開かないWebサイトです。見て、私は木をブラウズしています。私が今いるすべてのドメインがブランチを表すと期待しています。ブランチを使い終わったら、タブを閉じます。私は間違いなく、「戻る」を10回クリックしてブランチを上に移動したくありません。

11
Swizec

ユーザーが望むものを隠し、代わりにあなたが望むものを与える。

たとえば、カスタマーサポートです。電話番号やメールなどで大きな太い箱をリストする代わりに、FAQをヘルプの手段として表示し、そのページに連絡先情報がない場合があります。

11
googletorp

スクロールするときに画面の上下に「浮く」メニュー構造を持つサイト。なぜそうしたのかはわかりますが、多くの場合、それは非常に気を散らすものであり、設計者が明らかに望んでいたほど「滑らか」ではありません。

私が参照している例はここにあります: http://www.deluxe-menu.com/floatable-menu-sample.html

9
Sk93

承認された回答を2回表示するQAサイト。

8
Gelatin

List ApartにはAza Raskinによる記事があります。「元に戻すことを意味するときに警告を使用しないでください」。

http://www.alistapart.com/articles/neveruseawarning/

ユーザーは「警告」ポップアップを無視または嫌う傾向がありますが、「元に戻す」機会をユーザーに提供する方がはるかにユーザーフレンドリーです。

7
mg1075

キャプチャ

最近は非常に人気がありますが、特に、知らない単語を認識できない場合(またはキーボードにýáěíčなどの特殊文字さえない場合)は、アクセシビリティの問題と見なされます。

個人的には、この機能を提供するために単純な合理的な質問を使用しています

例:番号11に続く次の整数を記述してください

6
user3409

CPUとメモリを多く使用するサイト

私は通常、さまざまなメーリングリストからのプログラミングの質問/回答を表示する多数のタブを開いており、これらのサイトの多くは重いJavaScriptを実行しています(adblockのインストールは役立ちましたが、それでも重いサイトがあります)。 Chromeを使用すると、原因となっているタブを最終的に確認できます。

新しく改善されたGoogle画像検索は私のCPUに大きな負荷をかけ、数百メガバイトを消費します。多くのリソースが不足しています。

5
neoneye

マウスカーソルを置くと色が変わるが、クリックしても何もしない静的要素があること。同じリーグ内:クリック可能な領域がテキストに制限されているハイパーリンクまたはボタン。

4
Tommy Carlier

ルートURIからサブディレクトリまたはサブドメインへのリダイレクト(wwwを削除/追加しない)。

0
Gelatin