Key Takeaways

• Extra navigation keys, such as Page-up, Page-down, Home, and End, significantly improve usability by providing more control and enabling fast navigation over large groups of data. These keys can be particularly effective in slider controls, where they can be used to increment or decrement values by larger proportions or set the slider to its minimum and maximum.
• The interpretation of keystrokes is context-dependent and should be carefully considered when scripting. In general, Home means minimum, start or first; End means maximum, end or last; Page-up means increment by a chunk or move to the next division or group; Page-down means decrement by a chunk or move to the previous division or group.
• Extra navigation keys enhance user experience and accessibility, potentially leading to increased user engagement, reduced bounce rates, and improved conversion rates. However, they should be implemented intuitively and without overwhelming the user to avoid detracting from the user experience.

When handling keyboard events in JavaScript, most scripts and applications tend to stick to the basic range of keys that provide core accessibility — the Tab key for serial navigation, the Arrow keys for drilling-down or for two-dimensional navigation, and the Enter and Space keys for clicking and selecting things.

This is all good, but there are some other common keys you might consider as well, that can significantly improve usability by providing more control — the Page-up and Page-down keys can be used for fast navigation over large groups of data, while the Home and End keys can be used as shortcuts to the first and last value.

Most Windows keyboards have dedicated keys for these, but they also work on the Mac via modifier combinations. For example, on my Macbook there’s an extra fn (function) key, and this is used in combination with the four Arrow keys (e.g. fn up for Page-up, and fn left for Home).

Slider controls

Slider controls are a perfect example of where these keys can be used to good effect. The Arrow keys are typically used to increment and decrement a slider by a single value, but we can also use the Page-up and Page-down keys to change the value by a larger proportion, as well as the Home and End keys to set the slider to its minimum and maximum.

The following code is an excerpt from a video player’s seek slider:

<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>

The switch statement adjusts the slider’s value (and consequently, the video’s seeking position) according to the event keyCode — by a single step for the Arrow keys, by 10% for the Page-up and Page-down keys, or to the start or end of the video for the Home and End keys, respectively. Where applicable, the value changes are constrained so they don’t exceed their limits (e.g. so you can’t seek past the end).

In this case, the slider was written from scratch to include these extra keys, but this is the kind scripting enhancement that’s easy to retrofit, because all it requires is additional conditions for key-handling code which the script must already contain.

Handling the key events

For reference, here are all the event keyCode values used in the previous example:

• 33 = Page-up
• 34 = Page-down
• 35 = End
• 36 = Home
• 37 = Left-arrow
• 38 = Up-arrow
• 39 = Right-arrow
• 40 = Down-arrow

Handling these keys is no different than handling any other navigation keys; if you’d like more information about that, check out my earlier article: Practical JavaScript Accessibility.

The only thing I would pause to mention explicitly here, is that navigational keys can only be handled with keydown and keyup events, and not with keypress events (which are only used for keys that actually insert a character, such as letters and numbers). The keydown events can also be used to block default actions, which is often necessary when scripting with navigational keys, but make sure you only do this when the focus is inside your widget, so you don’t end up blocking them all the time.

Interpreting key behaviours

When using these extra keys — or any keys for that matter — it’s important to stop and consider what the keystrokes will mean in the context of your script. Although we have a clear idea of what, for example, the Home key means in the context of a text-editor or word-processor, it may not be quite so obvious in a different behavioural context.

The slider is a good example because it’s obvious what they should be used for, and I think we can take that specific example to derive a more general set of principles:

• Home means minimum, start or first
• End means maximum, end or last
• Page-up means increment by a chunk, or move to the next division or group
• Page-down means decrement by a chunk, or move to the previous division or group

So maybe, for example, in the context of a mail application’s message view, the Home key might jump to the top of the list, and the End key to the end. Or in the context of a music player’s volume control, Page-up might increase the volume by a quarter or a half, while Page-down does the opposite.

You’ll have the best idea of how such keys relate to your own application. There are no hard and fast rules for this, and no absolute conventions, it’s just a case of thinking about what existing keyboard actions achieve, and how these extra keystrokes might be used to make that easier or quicker.

Frequently Asked Questions on Improving Usability with Extra Navigation Keys

What are the benefits of using extra navigation keys on a website?

Extra navigation keys can significantly enhance the user experience on a website. They provide users with more control over their browsing experience, allowing them to navigate through the site more efficiently. This can lead to increased user engagement, reduced bounce rates, and improved conversion rates. Additionally, extra navigation keys can make a website more accessible to users with disabilities, further expanding its reach and usability.

How can I implement extra navigation keys on my website?

Implementing extra navigation keys on your website involves a combination of web design and coding. You can use HTML, CSS, and JavaScript to create and style the navigation keys. It’s also important to ensure that these keys are intuitive and easy to use, and that they enhance the overall user experience rather than complicating it.

What are some examples of extra navigation keys?

Extra navigation keys can include features like ‘Back to Top’ buttons, ‘Skip to Content’ links, and keyboard shortcuts. These features can help users navigate your site more efficiently, especially on long or complex pages.

How can extra navigation keys improve website accessibility?

Extra navigation keys can make your website more accessible by providing alternative ways to navigate the site. For example, keyboard shortcuts can be particularly useful for users with mobility impairments who may struggle to use a mouse. Similarly, ‘Skip to Content’ links can help users with screen readers bypass navigation menus and other repetitive content.

Can extra navigation keys improve SEO?

While extra navigation keys themselves may not directly impact SEO, they can indirectly contribute to improved search engine rankings by enhancing the user experience. Search engines like Google consider user engagement metrics, such as bounce rate and time spent on site, when ranking websites. By improving the user experience, extra navigation keys can help improve these metrics, potentially leading to higher search engine rankings.

Are there any downsides to using extra navigation keys?

While extra navigation keys can greatly enhance the user experience, they need to be implemented carefully to avoid confusing or overwhelming users. Too many navigation options can make a website feel cluttered and difficult to navigate, potentially detracting from the user experience.

How can I test the effectiveness of my extra navigation keys?

You can use various user testing methods to evaluate the effectiveness of your extra navigation keys. This could include usability testing, where you observe users interacting with your website, or A/B testing, where you compare different versions of your website to see which performs better.

What is the role of extra navigation keys in mobile usability?

Extra navigation keys can be particularly beneficial for mobile usability. On smaller screens, navigation can be more challenging, and extra navigation keys can help users navigate your site more easily. However, it’s important to ensure that these keys are designed and implemented in a way that works well on mobile devices.

How can I make my extra navigation keys more intuitive?

To make your extra navigation keys more intuitive, consider the expectations and habits of your users. Use familiar symbols and placements for your keys, and ensure they’re clearly labeled. User testing can also be a valuable tool for understanding how users interact with your navigation keys and making necessary adjustments.

Can extra navigation keys help with website conversions?

Yes, by improving the user experience and making your website easier to navigate, extra navigation keys can potentially lead to higher conversion rates. When users can find what they’re looking for more easily, they’re more likely to complete desired actions, such as making a purchase or signing up for a newsletter.

The above is the detailed content of Improving Usability With Extra Navigation Keys. For more information, please follow other related articles on the PHP Chinese website!