|
ページの使いやすさに関してプログラマーが犯す 5 つのよくある間違いとその修正方法:
私は気難しい Web ユーザーですが、これも私を優れた Web 開発者にするのに役立ったと思います。ウェブサイトで不快なデザインを見ると、なぜ非常に単純なことがうまくできないのでしょう。ここでは、ユーザビリティに関するよくある 5 つの間違いとその修正方法を紹介します。自分にとっても他人にとっても都合の良いようにして、そのような間違いを犯さないように注意してください。
クリック イベントの代わりにエクスプレス送信イベントを使用してください。フォーム タグ フォームを使用してください。
フォームを送信するために Enter キー (または矢印/) を使用するときに、何度この問題に遭遇したかわかりません。携帯電話の Enter キー)、しかし何も起こりませんでした。もう一度マウスで送信ボタンをクリックする必要があり、ようやくフォームが応答しました。これは私が最も嫌いなユーザビリティの問題の 1 つです。素人がやったようです。マウスで送信ボタンをクリックしたり、携帯電話のキーボードをオフにしてページの一番下までスクロールして送信ボタンを見つけたりすることは、まったく実行する必要のない煩わしい余分なアクションです。 submit イベントを使用するだけで、Web ページがより使いやすくなります:
document.getElementById("myForm").addEventListener("submit",function(e) {
e.preventDefault();
.. ここで処理を行ってください。「Enter」キーの送信は完了です!
return false;
});
どこかでそのような間違いを犯した場合は、すぐに修正してください。
[CONTROL] キーまたは [META] キーが押されたときにクリック イベントをブロックしないでください
私はブラウザの新しいタブで Web ページを開くのが大好きな人間で、最近新しい家を探しています。同時に実行します。 多くの Web サイトのページを開いて、中の写真をクリックして表示しますが、残念なことに、これらの開いたページはすべて同じタブに入ります。とてもうるさい。リンクでPreventDefault メソッドを使用する前に、ユーザーが [CONTROL] キーまたは [META] キーを押したかどうかを確認してください:
document.getElementById("myLink").addEventListener("click",function(e) { });
私は自分のウェブサイトでこれを行っていますが、ユーザーが新しいタブを開いたときに同様の問題は発生しません。ユーザーに Web サイトの「戻る」ボタンを押し続けることを強制しないでください。
text-overflow: ellipsis を設定する場合は、Web ページ要素に title 属性を追加してください。
text-overflow: ellipsis など、いくつかの新しい CSS プロパティまたは属性値が非常に便利です。この効果を達成するためにプログラマーはどのような方法をよく使用してきましたか?私は text-overflow: ellipsis に同意しますが、この要素の上にカーソルを置くときは、title 属性を使用して完全な情報を表示することをお勧めします:
私は、省略される予定の非常に長いテキストです
同じ内容を 2 回出力したくない場合は、Js を動的に使用できます。タイトルを設定します。どのように実装する場合でも、ユーザーのことを考慮してください。
:focus と :active を忘れないでください!
多くの人は、ページ要素のスタイルをデザインするときにステータスを無視し、ユーザーのマウス操作のみを考慮し、ユーザーがキーボードを使用して操作する可能性があることを忘れています。使用してください: Focus と: Active はステータスを示します:
a: ホバー、A: アクティブ、a: フォーカス { /* スタイルを変更* /
color: #900; 良い点: 次回 Web サイトを開発するときは、 Tab キーを使用してページ上のすべての要素を移動してください。Tab キーを押してもページのフォーカスが変わらない場合は、スタイル シートをチェックして忘れていないか確認してください。ステータス スタイルを追加してみましょう。
検索/メール テキスト ボックス タイプを使用してください
携帯電話やタブレットなどのモバイル デバイスでフォーム情報を入力するとき、「@」文字を見つけるためにキーボード モードを切り替える必要があるため、非常に面倒な問題に遭遇しました。 Web 開発者が成熟して、正しいテキスト ボックス タイプの使い方を学ぶことを願っています:
少し変更するだけで、携帯電話ユーザーに大きな利便性をもたらすことができます。
私たちプログラマーが犯しやすい間違いはたくさんあります。これについては今後さらに記事を書きますが、確かなことは、これらの間違いのほとんどは、気づいていれば簡単に修正できるということです。
LAMP BrothersオリジナルのPHPビデオチュートリアルCD/「PHPの詳しい話」を無料でプレゼント 詳しくは公式サイトカスタマーサービス http://www.lampbrother.net までお問い合わせください
ご購読いただけます。メールでお知らせください。IT 関連のチュートリアルや書籍については、随時メールをお送りします。
http://list.qq.com/cgi-bin/qf_invite?id=ea7d919ad263169bce2be53a3e16da0f0ec55ac36513c68e
|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
