User Interface Experiments

When a user picks up and interacts with your gadget, the physical interface will give that user a sense of the quality of the device.  Touch screens are becoming common, but may not be appropriate for all devices.  Many devices rely on electromechanical switches or buttons.  If the buttons are hard to press, feel flimsy, or if the functions are not intuitive, the user will have a bad impression.  You can fix all of those things with good physical product design, but just as important is how the device reacts to the user input.  If the interface is slow or if a single press results in multiple presses intermittently, that will leave a bad impression.

Button Input Reaction Time

How fast does your code need to react to user input to be considered a snappy interface?  I wrote some code that you can run on the Starter Kit to find out for yourself.  The following code will illuminate TEST LED1 on the Starter Kit when the button PB1 is pressed, after a DELAY_VALUE in milliseconds is elapsed.  Note that the utilities.h file is described in previous lessons and is available on the blog website.

#include "em_device.h"
#include "em_chip.h"
#include "em_cmu.h"
#include "em_gpio.h"
#include "utilities.h"        // Source available on the blog webpage
 
#define DELAY_VALUE           100 // ms
 
/**************************************************************************//**
 * @brief  Main function
 *****************************************************************************/
int main(void)
{
      // Chip errata
      CHIP_Init();
 
      setup_utilities();
 
      CMU_ClockEnable(cmuClock_GPIO, true);
 
      // Set up the user interface buttons
      GPIO_PinModeSet(BUTTON_PORT, SET_BUTTON_PIN, gpioModeInput,  0);
 
      while (1)
      {
            if (get_button())
            {
                  delay(DELAY_VALUE);
                  set_led(1, 1);
            }
            else
            {
                  set_led(1, 0);
            }
      }
}

In my tests, I found that delays of 100ms or so were fast enough to be considered responsive, but 150ms started to seem like a slow response, and 200ms seemed like an eternity.  We humans expect the interfaces to respond within 1/10th of a second. 

Reaction tests at Human Benchmark measures both the recognition of an event and the reaction to the event.   The average reaction time is around 250ms.  Interestingly enough, the site mentions that your own computer can introduce a lag of 30ms to the test, and that it is getting longer as technology moves forward, due to operating system overhead.  My reaction times on my computer were around 400ms.  I switched to my smartphone and found that it dropped to an average of 280ms.  I have a wireless mouse for my computer, which could be contributing to the lag, likely due to power-saving sleep states in the mouse hardware: if it can sleep for 100ms and then wake up to check for an event, the batteries will last longer.  These are all things that you will need to consider as you develop your gadget.

To make things more interesting, I changed the program to illuminate TEST LED0 immediately, followed by the original TEST LED1:

      while (1)
      {
            if (get_button())
            {
                  set_led(0, 1);
                  delay(DELAY_VALUE);
                  set_led(1, 1);
            }
            else
            {
                  set_led(0, 0);
                  set_led(1, 0);
            }
      }

Now when I run the code and press PB0, I see an immediate response in TEST LED0, followed by 100ms and then TEST LED1 illuminates.  It is now very clear to me that TEST LED1 is showing a lag that would be unacceptable if both lights are intended to illuminate at the same time.  By adjusting the value of DELAY_VALUE, I found that 27ms was an acceptable delay where both lights would illuminate simultaneously, at least to me.  Therefore, if you have code that needs to read the environment (like an indicator light, for example) and act on it immediately, you have about 27 ms for your code to react to the event if you are hoping to provide a simultaneous response.

This 27ms translates to 37Hz if the illumination was in the frequency domain, like in a moving video.  I am able see display flicker at up to 75Hz.  Those old monitors that had a 60Hz refresh rate drove me crazy with flicker!  We now have LED HDTV’s that interpolate 24 to 60Hz video feeds and “upconvert” to 120Hz, which is about 8ms between screen updates.  That adds a hyper-realistic quality to video content and seems to be near the lower limit of human perception.

Note: The eye can distinguish colors or frequencies of light in the 450 to 700 GHz range.  However, we can’t tell if two colors such as red and blue are blended to create purple by alternating them faster than 30 Hz, or if the color is truly purple.  Likewise, the ear can distinguish frequencies between 30 and 20kHz, but the sound needs to hang around for a while to be detected by the brain.  The eyes and ears are fantastic sensors, but the brain still needs time to make sense of the data.

Run this program on your Starter Kit and see what YOU think of these delays?  This will help you determine the best response time for your gadget.

PREVIOUS | NEXT