検索

ホームページ >ウェブフロントエンド >jsチュートリアル >追加のナビゲーションキーで使いやすさを向上させます

追加のナビゲーションキーで使いやすさを向上させます

Jennifer Aniston
Jennifer Anistonオリジナル
2025-02-23 11:16:12177ブラウズ

Improving Usability With Extra Navigation Keys

追加のナビゲーションキーで使いやすさを向上させます

キーテイクアウト

    ページアップ、ページダウン、ホーム、エンドなどの追加のナビゲーションキーは、より多くのコントロールを提供し、大規模なデータグループで迅速なナビゲーションを可能にすることにより、使いやすさを大幅に向上させます。これらのキーは、スライダーコントロールで特に効果的です。ここでは、より大きな割合で値を増分または減少させるために使用するか、スライダーを最小限と最大値に設定できます。
  • キーストロークの解釈はコンテキスト依存であり、スクリプト時に慎重に検討する必要があります。一般に、家は最小、開始、または最初のことを意味します。終了とは、最大、終了、または最後です。ページアップとは、チャンクによるインクリメントを意味するか、次の部門またはグループに移動します。ページダウンとは、チャンクによる減少を意味するか、前の部門またはグループに移動します。
    • 追加のナビゲーションキーは、ユーザーエクスペリエンスとアクセシビリティを向上させ、ユーザーエンゲージメントの増加、直帰率の低下、変換率の向上につながる可能性があります。ただし、ユーザーエクスペリエンスを損なうことを避けるために、ユーザーを圧倒することなく、直感的に実装する必要があります。
    • JavaScriptでキーボードイベントを処理する場合、ほとんどのスクリプトとアプリケーションは、コアアクセシビリティを提供するキーの基本範囲に固執する傾向があります。エントリとスペースキーをクリックして選択するためのスペースキー。
    • これはすべて良いことですが、より多くのコントロールを提供することで使いやすさを大幅に向上させることができる他の一般的なキーもあります。データ。一方、ホームキーとエンドキーは、最初と最後の値の近道として使用できます。
ほとんどのWindowsキーボードには、これらの専用キーがありますが、修飾子の組み合わせを介してMacでも動作します。たとえば、私のMacBookには追加のFN（関数）キーがあり、これは4つの矢印キー（たとえば、ページアップのFNアップ、FNは家に残っています）と組み合わせて使用​​されています。

スライダーコントロール

スライダーコントロールは、これらのキーを使用して良好な効果を使用できる場所の完璧な例です。矢印キーは通常、スライダーを単一の値だけで増やして減らすために使用されますが、ページアップキーとページダウンキーを使用して、値をより大きな割合で変更することもできます。スライダーは最小値と最大値まで。

次のコードは、ビデオプレーヤーのシークスライダーからの抜粋です。

<span>switch(true)
</span><span>{
</span>  <span>case (e.keyCode == 38 || e.keyCode == 39) : 
</span>    
    <span>if(++value > max) 
</span>    <span>{ 
</span>      value <span>= max; 
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 37 || e.keyCode == 40) : 
</span>    
    <span>if(--value < 0) 
</span>    <span>{ 
</span>      value <span>= 0; 
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 33) : 
</span>    
    <span>if((value = value + Math.round(max / 10)) > max)
</span>    <span>{
</span>      value <span>= max;
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 34) : 
</span>    
    <span>if((value = value - Math.round(max / 10)) < 0)
</span>    <span>{
</span>      value <span>= 0;
</span>    <span>}
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 36) : 
</span>    
    value <span>= 0;
</span>    <span>break;
</span>    
  <span>case (e.keyCode == 35) : 
</span>    
    value <span>= (max - 1);
</span>    <span>break;
</span><span>}</span>

スイッチステートメントは、イベントキーコードに従ってスライダーの値（およびその結果、ビデオのシーク位置）を調整します - 矢印キーの単一のステップ、ページアップキーとページダウンキーの10％、またはそれぞれホームキーとエンドキーのビデオの開始または終了。該当する場合、値の変更は制限されているため、制限を超えないようにします（たとえば、終わりを過ぎて探すことはできません）。 この場合、スライダーはこれらの余分なキーを含めるためにゼロから書かれていましたが、これは、スクリプトに既に含まれている必要があるキー処理コードの追加条件だけが必要なため、簡単に改造しやすい種類のスクリプト拡張機能です。

キーイベントの処理

参照のために、前の例で使用されているすべてのイベントキーコード値を次に示します：

33 = Page-up
  • 34 =ページダウン
  • 35 = end
  • 36 = home
  • 37 = left-arrow
  • 38 = up-arrow
  • 39 =右arrow
  • 40 = down-arrow
  • これらのキーの処理は、他のナビゲーションキーの処理と違いはありません。 それについての詳細については、以前の記事：実用的なJavaScriptアクセシビリティをご覧ください。 ここで明示的に言及するために一時停止する唯一のことは、ナビゲーションキーはキーダウンイベントとキーアップイベントでのみ処理できることです。文字や数字などのキャラクター）。キーダウンイベントを使用してデフォルトのアクションをブロックすることもできます。これは、ナビゲーションキーでスクリプトするときに必要な場合が多いことがよくありますが、フォーカスがウィジェット内にあるときにのみこれを行うことを確認してください。
重要な動作の解釈

これらの余分なキーを使用する場合、または任意のキーを使用する場合、スクリプトのコンテキストでキーストロークが何を意味するかを停止して検討することが重要です。たとえば、テキスト編集者やワードプロセッサのコンテキストでホームキーが何を意味するのかについては明確な考えがありますが、異なる行動の文脈ではそれほど明白ではないかもしれません。

スライダーは、それらが何を使うべきかが明らかであるため、良い例です。そして、より一般的な一連の原則を導き出すためにその具体的な例を挙げることができると思います。 ホームとは、最小、開始、または最初の

を意味します

終了とは、最大、終了、または最後の

を意味します

ページアップとは、チャンクによる増分を意味するか、次の部門またはグループに移動します ページダウンとは、チャンクによる減少を意味します。または、前の部門またはグループに移動

たとえば、たとえば、メールアプリケーションのメッセージビューのコンテキストでは、ホームキーがリストの一番上にジャンプし、最後のキーがエンドキーがジャンプする可能性があります。または、音楽プレーヤーのボリュームコントロールのコンテキストでは、ページアップはボリュームを4分の1または半分に増やす可能性がありますが、ページダウンは反対です。

そのようなキーがあなた自身のアプリケーションとどのように関係しているかについて、あなたは最高のアイデアを持っています。これには厳しいルールがあり、絶対的な規則はありません。既存のキーボードアクションが何を達成するか、これらの余分なキーストロークを使用してそれをより簡単または迅速にする方法について考えるだけの場合です。

追加のナビゲーションキーを使用して使いやすさを改善することに関するよくある質問ウェブサイトで追加のナビゲーションキーを使用することの利点は何ですか？ ​​

追加のナビゲーションキーは、ウェブサイトでのユーザーエクスペリエンスを大幅に向上させることができます。ユーザーは閲覧体験をよりコントロールできるようにし、サイトをより効率的にナビゲートできるようにします。これにより、ユーザーエンゲージメントの増加、直帰率の低下、変換率が向上する可能性があります。さらに、追加のナビゲーションキーは、障害のあるユーザーがウェブサイトをよりアクセスしやすくし、そのリーチと使いやすさをさらに拡大することができます。あなたのウェブサイトには、Webデザインとコーディングの組み合わせが含まれます。 HTML、CSS、およびJavaScriptを使用して、ナビゲーションキーを作成およびスタイルできます。また、これらのキーが直感的で使いやすいこと、そしてそれを複雑にするのではなく、全体的なユーザーエクスペリエンスを強化することを保証することも重要です。ナビゲーションキーには、「バックツートップ」ボタン、「コンテンツ」リンク、キーボードショートカットなどの機能を含めることができます。これらの機能は、特に長いまたは複雑なページで、ユーザーがサイトをより効率的にナビゲートするのに役立ちます。

追加ナビゲーションキーはどのようにしてWebサイトのアクセシビリティを改善できますか？サイトをナビゲートする別の方法。たとえば、キーボードショートカットは、マウスの使用に苦労する可能性のあるモビリティ障害のあるユーザーにとって特に役立ちます。同様に、「コンテンツへのスキップ」リンクは、スクリーンリーダーを持つユーザーがナビゲーションメニューやその他の繰り返しコンテンツをバイパスするのに役立ちます。 SEOは、ユーザーエクスペリエンスを向上させることで、検索エンジンのランキングの改善に間接的に貢献できます。 Googleのような検索エンジンは、Webサイトをランキングする際に、電源レートやサイトで費やされる時間など、ユーザーエンゲージメントメトリックを検討します。ユーザーエクスペリエンスを改善することにより、追加のナビゲーションキーはこれらのメトリックを改善し、検索エンジンのランキングが高くなる可能性があります。ユーザーエクスペリエンスを大幅に向上させると、混乱や圧倒的なユーザーを避けるために、慎重に実装する必要があります。ナビゲーションオプションが多すぎると、ウェブサイトが乱雑でナビゲートするのが難しくなり、ユーザーエクスペリエンスを損なう可能性があります。

追加のナビゲーションキーの有効性をテストするにはどうすればよいですか？

さまざまなユーザーテスト方法を使用して、追加のナビゲーションキーの有効性を評価できます。これには、ユーザーがWebサイトと対話するユーザーやA/Bテストを観察するユーザビリティテストが含まれます。ウェブサイトのさまざまなバージョンを比較して、どのパフォーマンスが優れているかを確認します。モバイルユーザビリティ？

​​

追加のナビゲーションキーは、モバイルの使いやすさに特に有益です。小さな画面では、ナビゲーションがより困難になる可能性があり、追加のナビゲーションキーはユーザーがサイトをより簡単にナビゲートできるようになります。ただし、これらのキーがモバイルデバイスでうまく機能する方法で設計および実装されるようにすることが重要です。ナビゲーションキーはより直感的に、ユーザーの期待と習慣を考慮してください。鍵に馴染みのあるシンボルと配置を使用し、それらが明確にラベル付けされていることを確認してください。ユーザーテストは、ユーザーがナビゲーションキーとの対話方法を理解し、必要な調整を行うための貴重なツールになります。また、ウェブサイトをナビゲートしやすくするため、追加のナビゲーションキーは、より高い変換率につながる可能性があります。ユーザーが探しているものをより簡単に見つけることができる場合、購入したり、ニュースレターにサインアップしたりするなど、望ましいアクションを完了する可能性が高くなります。

以上が追加のナビゲーションキーで使いやすさを向上させますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html if switch for while include mail using Event function default this position windows idea kind retrofit SEO word Newsletter Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQueryオンスクリーンキーボード次の記事：jQueryオンスクリーンキーボード

関連記事

続きを見る