How long should you stop typing?

Question

Let's say we have a simple example, as shown below.

<input id="filter" type="text" /> <script> function reload() { // get data via ajax } $('#filter').change($.debounce(250,reload)); </script> 

We do a slight delay to reduce the number of calls to reload while the user enters text into the input.

Now I understand that this will depend on each specific case, but is there any accepted wisdom of how long the delay should depend, given the average (or perhaps the minimum common denominator) input / interaction speed. Usually I just play with the value until it "feels" right, but I can’t imagine a typical user. Has anyone done any research on this?

Answer 1

As you hinted, the answer depends on a number of factors - not all of them are subjective.

In the general case, the reason for using the debug operation can be summarized as one of two goals:

• Reducing the cost of providing dynamic interactive elements (where the cost can be computing, IO, network or latency and can be dictated by the client or server).
• Reducing visual "noise" so as not to distract the user from page updates while they are busy.

Reaction time

One important number to keep in mind - 250 ms - this is the (approximately) median response time of a person and, as a rule, is a good upper bound, within which you must fill in all user interface updates to make your site feel responsive . You can view more information on the human reaction time here .

In the first case, the exact debounce interval will depend on how much the operation costs for both parties (client and server). If your AJAX call has a finite response time of 100 ms, then it might make sense to set the deviation to 150 ms within the response threshold of 250 ms.

On the other hand, if your call usually takes 4,000 ms to start, you might be better off setting a longer rollback on the actual call and instead use the first level debut to show the loading indicator (assuming your loading indicator is not working 't block your text entry).

$('#filter').change($.debounce(250, show_loading)); $('#filter').change($.debounce(2000, reload));

Backend performance

It is also important to consider the cost of executing these requests on your server. In this case, a combination of average typing speed (about 44 words per minute or about 200 characters per minute) and knowledge of the size of your user base and backend capabilities can allow you to choose a debber value that keeps the backend manageable.

For example: if you have one backend capable of processing 10 requests per second and a maximum active user base of 30 (using this service), you should choose a debut period to avoid exceeding 10 requests per second (ideally with an error limit). In this case, we have 33.3% of the capacity needed to process one login per user per second, so we will ideally serve no more than one request per user every 3 seconds, providing us with our debug period of 3000ms .

Frontend Performance

The final aspect to consider is the cost of processing on the client side. Depending on the amount of data you are moving and the complexity of your user interface updates, this can be small or significant. One thing you want to try and make sure your user interface is still responsive to user input. This does not necessarily mean that he must always respond, however, while the user interacts with him, he must respond quickly to them (60FPS is usually the goal here).

In this case, your goal should be to debut at a speed that prevents the user interface from becoming sluggish or non-responsive when the user interacts with it. Again, statistics are a good way to get this figure, but keep in mind that different types of input require a different amount of time to complete.

For example, rewriting a sentence of short words usually happens much faster than typing one long and complex word. Similarly, if the user needs to think about what he is typing, he will tend to print more slowly. The same applies to the use of special characters or punctuation marks.

Subjective response

In practice, I have used debug periods that range from 100ms for data that are exceptionally fast to extract and have little effect on performance up to 5000ms for things that were more expensive.

In the latter case, pairing a short, inexpensive debut period to provide feedback to the user and a longer period for actual computing work, as a rule, provides a good balance between user experience and wasted productivity.

One great thing that I try to keep in mind when choosing these values ​​is that, as the person who works with the keyboard every day, I probably gain speed faster than most of my user base. This may mean that things that seem smooth and natural to me are shaking for someone who introduces more slowly, so it's nice to do some user testing or (even better) collect metrics and use them to customize the interface.