Usability spotter #5- HP laptop touch pads with scroll zones- absence of tactile cue

Summary
The issue with HP laptops that have a touch pad with a scroll zone contained it (as shown in image A) is that they do not provide a tactile cue for the user to help interpret what section of the touch pad the finger is positioned at. In the absence of a tactile cue, it is difficult for the user to determine whether the finger is on touch pad or the scroll zone without looking at it, resulting in the accidental scrolling on the screen when actually the user simply wants to move the cursor. The issue and multiple solutions are discussed ahead.

The issue with HP laptop touchpads with scoll zones- Absence of a tactile cue

HP laptop touch pad with scroll zone
(Image A)

To be more precise, the issue described in this post refers to HP laptops and all other laptops that have touch pads with ’scroll zones’ similar to the image (of the HP 6510B model) above.

Illustrating the usability issue with HP laptop touch pad with scroll zone

In the above illustration of the touch pad, you can see that the top view provides the user a visual cue to differentiate the mouse area and scroll zone. The side view however, illustrates the absence of relief to translate the visual cue to a tactile cue.

The users will receive the same consistent tactile feedback whether the finger is on the mouse area or the scroll zone. It is this absence of a tactile cue that reduces chances of error free operation of the touch pad without the aid of visual feedback (the user looking at the touch pad).

While the user can estimate the position of their finger in the touch pad’s horizontal space by either orienting through visual feedback or by tactile feedback alone (by feeling the edges of the sunken touch pad to get an idea of the width of the entire touch pad), relying upon the user to do so correctly in all situations is a design compromise. Especially when the user is working in a hurry or busy, there is not much attention the user can allocate to such a task when concentrating on accomplishing an important goal. Error in touch pad operation at this time will understandably be more frustrating for the user.

Error criticality in this case might not be significant but frequency of the issue definitely is. Considering that Image A is a picture of an HP business laptop (6510B), and the fact that business laptops are all about increasing productivity, this should be a valid case for HP to work upon the stated touch pad usability issue.

Solution- Introduction of a tactile cue in the touch pad

A logical solution to the issue is to providing a tactile cue will allow the user to operate the touch pad in an error free manner with the tactile cue acting as an effective indicator of the different sections contained in the touch pad. This will allow the user to only rely on their finger to determine accurately where the finger is on the touch pad without having to resort to utilizing to their sense of sight which should be focussed towards the monitor.

What would be an effective tactile cue? The solutions described below describe two different concepts to building a tactile cue in with the common goal of helping the user effectively determine which section is the finger placed upon. through tactile feedback alone.

1. Using a tactile cue to notifying the user of zone boundaries

Illustrating solution three of the usability issue with HP laptop touch pad with scroll zone

The above illustration elevated the surface along a line to create a ridge to serve as a demarcation. This ridge acts as an effective tactile cue for the user to interpret whether the finger is upon the mouse area or scroll zone.

2. Tactile differentiation

Tactile patterns can be used to provide differentiated tactile feedback for the different touch pad sections.

2.1 Tactile differentiation through utilization of a horizontal line tactile pattern

Illustrating solution one of the usability issue with HP laptop touch pad with scroll zone

This solution uses the visual marking (see Image A) to form a tactile cue. The visual cue (horizontal lines) is converted to a tactile cue, that is- the horizontal lines are converted to low relief. This might be done by using an ink that creates a low relief when printing the horizontal lines. It is important that the relief be extremely low and just enough for the user to sense differentiation in texture from the smooth mouse area.

2.2 Tactile differentiation through application of a solid-rough tactile pattern

Illustrating solution three of the usability issue with HP laptop touch pad with scroll zone

A solid-rough tactile pattern or otherwise may be used to create extremely low relief on the existing touch pad surface that will allow the user to differentiate the scroll zone from the mouse area’s smooth surface.

Your thoughts?

What are your thoughts on such touch pads without tactile cues? Have you used a laptop with such a touch pad? Was it easy to use, tough or frustrating? I would like to know.

Axure widgets for the user interface pattern- Clear input field value on focus

Summary
If you’ve been looking for them, here they are: Two Axure widgets (clear text on focus of text field & clear text on focus of text area) for the Input Prompt design pattern are available for download in Axure project file (.rp) and widget library (.rplib) format.

The following two Axure widgets are for the Input Prompt user interface pattern:

  • Clear text value on focus of Input Field
  • Clear text value on focus of Text Area

What is the Input Prompt UI pattern?

The Input Prompt UI pattern refers to using the input field text for communicating to the user what the label or hint text otherwise would. On focus of the input field (with the exception of a dropdown list), the text contained in the input field disappears.

When to use

The Input Prompt pattern is used to address the problem of space constraints where:

  1. The label for an input field can not be provided due to space limitations.
  2. The label for an input field is provided but hint text required to help with user entering information can not be provided for the input field due to space limitations.

Advantages

  1. Makes use of input field space to communicate label or hint text.
  2. Higher probability of text being noticed by the user in comparison to label or hint text since it is placed within the input field itself rather than around it.

Disadvantages

Text disappears upon focusing on the input field (solution- don’t clear text upon focus of input field). This isn’t a substantial issue when used in a text field since the text that can be used is only a few words. It is a considerable issue if the text consists of a few lines or more to be used as an example of what is to be filled into a text area. In this case, making hint text available is a good idea.

Demo the Clear Input Field Value on Focus Axure widgets

Demo (opens in new window, 105 kb)

Watch an example video


(File size:330 kb)

Download options

  1. You can download it as a widget library (.rplib) (downloaded 9591 times)
  2. You can download it as a project file (.rp) (downloaded 3966 times)
Creative Commons License
Axure Widgets for the User Interface Pattern: Clear Input Field Value onFocus/ Input Prompt by Abhay Rautela is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 India License.

Jing- a video capture tool for time based UI bugs (or when screenshots won’t do)

Summary
All UI bugs cannot be captured through images. Some UI issues are not only state based, but time based as well- where the bug might occur in transition of states or the time taken to change states (transitions and states are explained at the end for the unaware).

For example, you might want to illustrate the usability problem of a pull-down menu which has a zero time delay, thus making the selection of items down and up the hierarchy difficult for the user as the slightest overshooting of the target results in disappearance of the desired item.

In this case, it is not possible for an image to describe the issue. For such scenarios, video is effective method of capturing the issue, and there is a tool that makes it as easy and fast to execute as is capturing a screenshot.

Read More »

Web Accessibility- our responsibility as Web Industry Professionals

This post is also published at NCDAE, Access Tech News and the The Blind Access Tech Channel.

Summary
This is a straight forward message to those working in the web industry to understand that accessibility is our responsibility, and not something that should conveniently be ignored.

Read More »

Usability Spotter #4: A Usability issue- Google Chrome Tab selection through the mouse

Summary
In the Google Chrome browser, once the default width of open tabs exceeds the width of the tab bar, tab width continually reduces with every further tab opened.

This makes it tougher for the user to select an inactive tab using the mouse without accidentally clicking on the close button instead (which resides within the tab of continually reducing width).

This usability issue that comes into play with an increase in browser tabs can be eliminated through a simple solution.

Read More »

Solution to query_posts(’orderby=rand’) not working in WordPress

I had been wondering for a few months by now; why was it that I was able to display random posts in my downloads widget on my local server but not on the live site?

I was using <?php query_posts('orderby=rand'); ?> to do the job. The downloads widget on my website was supposed to display one random post from the download section and did so fine on the local server. But on my live site, instead of displaying a random post, it’d simply default to displaying the most recent post.

I did all I could and tried everything people suggested until I finally discovered, quite by accident, that it was the WP Sticky plugin that was causing the problem . I disabled the plugin and &rand began to work just fine on my live site! I was able to display random download posts just as I wanted to.

So, if you’ve tried everything possible under the sun to randomize your posts using <?php query_posts('orderby=rand'); ?>, and you use WP Sticky, then try disabling the plugin and check whether it makes your randomize post issue disappear.

Let me know if this this help you out too.

jQuery Masked Input Plugin- Increase usability, input masks for text fields

Summary
The jQuery masked input plugin lets you improve the form filling experience by providing an elegant solution to inputting data for fields such as date and telephone number, etc. Use a single text box with built in formatting cues and achieve effective error prevention instead of using the usual combination of dropdowns or a calendar date picker.

Read More »

Bar Camp Delhi 6 at MDI Institute, Gurgaon- 28 Feb, 1 March

What
Bar Camp Delhi 6 will be held during

When
28 February to 1 March 2009 from 9 am to 5 pm

Where
Management Development Institute
Mehrauli Road, Sukhrali
Gurgaon - 122007

Contact
Tel: +91.124.2349831-36, 4013050-59

I will hopefully be giving a presentation on Tips for Effective Usability Testing in India.

I gave the presentation on

Solution to the Camtasia Studio flickering cursor issue

Summary
To prevent the cursor from flickering during recording, open Camtasia Recorder, go to Tools > Options and deselect the ‘Capture layered windows’ checkbox.

Read More »

How does Adobe benefit from the free user feedback at DearAdobe.com?

Summary
Adobe can use some free user feedback at Dearadobe.com without spending a penny. They might have to trudge through some ambiguous feedback, but none the less:
1) It’s a great place in addition to their own communities to get interesting feature requests.
2) It’s a good place to pick up ideas and feedback. They can then validate the case or concern within their own strong user community.

Read More »