Archive | User Interface RSS feed for this section

Connecting People and Products – The User Interface Part IV : Keys and Controls

19 Mar


Part IV (Final) : Keys and Controls

Crux of it…

Thoughts on keys, controls and related designs.


Displays and indicators provide vital information on a process or application. Most applications demand user intervention often. If the display screen real estate is limited, then several screen pages are required to display volume of data  and different parameters. There needs to be a way to intervene as and when needed or when required to view different screens and set process parameters.Keys and controls play vital role in user interaction.

Let us discuss the key points to be considered while designing keypads and providing for controls.





Normal human psychology would be to look toadjacent displays for any of their actions.

Keys and controls related to a display must be grouped and placed adjacent to the same. This also helps the user to access the right keys even during emergencies.




When we change TV channels through remote, we need instant response. While running on the treadmill, we require the speed to change as quickly as possible and comfortable , as soon as we press the key. A key press if not responded by the system within about 200 msecs, the user becomes aware of the same and experiences discomfort on continuous usage.

Immediate feedback such as a clicking beep would instantly make the user understand that his key action has been recognized by the system. For a rotary control, the clicking noise of engagement automatically informs the user that the control has moved to the next position.


Suitable Precision

                                                                                                                                  Low Precision

Low Precision

Precision of adjustment for a control must be suitable for the application. When we use a normal table fan, it may be sufficient to have a control which has only four positions – OFF, LOW, MEDIUM AND HIGH. Fan does not require a control which sets RPM from 0 to 1000.

                                  High Precision


High Precision


A hair dryer can have only three control settings – OFF, LOW, HIGH, whereas a refrigerating system used in a clinical laboratory may need settings in Centigrades starting from -50 Degrees.

Providing a high precision control for a lower application requirement can be inconvenient while vice-versa can be catastrophic.





Identification & Shapes



Clear labeling of the controls and keys will prevent improper operation. Keys used for incrementing and decrementing can be triangular in shape. Buttons used in emergency situations can be of larger sizes and of colors that easily stand out.

Embossing of key pads will provide the tactile satisfaction to the user and gives a nice operating experience.



User Interface has grown leaps and bounds with touch screens and high resolution graphic displays. New operating systems like Android facilitate easy and seamless interface making the user experience unforgettable.


I have chronicled my thoughts so far in these four parts in the sincere hope that it could prove useful to those who need it.



Connecting People and Products – The User Interface ( Part III )

15 Mar
Georg Wiora (Dr. Schorsch) made this SVG-drawing (wikimedia)



In the previous part, thoughts were on components that make a UI

Part III : Screen Real Estate – Information Display

Crux of it…

Displaying numbers and other information..

Now that we have so many types of displays, focused thinking on the way of putting information onto the displays is order of the day.

The screen real estate is very cramped most of the times and , as designers, we face hardships in judiciously utilizing the space.

Before going further, these questions lingered in my mind.


Who needs this display information?

What do they intend to do with it?

Do they have the necessary skills and necessary experience, or, if framed the other way around,  are we going to design to suit the skills of  the user?

Do we really know the user’s needs?

If we have the answers for the above, I guess we have succeeded in completing the design in question.

When we know the user’s needs, goals and aspirations, we get most of the work done. However, there are certain fundamental design attributes one may look at. Few thoughts about these fundamental requirements are necessary at this stage.

Mask Leading Zeros

The benefits are Power Saving and user comfort. I, personally never liked displays showing 123 as 00123. It may look good for bank account numbers and not in a display.


Always use one leading zero to show a decimal number which is less than 1.0. This means we should display .8 as 0.8

Incrementing/Decrementing Numbers

While changing set values in a product one must be able to set them easily and swiftly. For each key press the response must be swift which is normally less than 200 milliseconds. To change a value from 10 to 100, if the display takes a long time, the user gets uncomfortable. This can be avoided by measuring the time during which key is being pressed and incrementing the values in almost an exponential manner. This is best described as below.

Upto increment of first 5 seconds  : Increment value every half a second

Upto next 5 seconds                      : Increment value every 200 milliseconds

From there on                                 : Increment value every 50 milliseconds

Same applies for decrementing values.

Seven Segment Displays

These displays are used in multiplexed mode, meaning, each display will be on for a certain period and switched off while the next one switches on.

Units Display ON –> Units Display Off –> Tens Display On –> Tens Display Off and so on.

Since, the frequency of this switching is normally in milliseconds, human eye does not detect the changes and feels that the displays are on continuously. Multiplexing is used primarily used to reduce hardware and power consumption.

If sufficient time is not provided to switch off the previous display, then we will have ghost display of the next digit on the previous digit. This is quite annoying and looks cumbersome. It would pay to write the necessary code like this.

Units Display ON –> Delay  –> Units Display Off  –>  Delay  –> Tens Display On –>  Delay  –> Tens Display Off  –> and so on.

Note : We mean Units Digit by Units Display and so on.

Character LCD Modules

When using LCD Modules, in-built cursor can be disabled, as it does not provide a neat look in such a small screen.

Special Character space in LCD modules can be used to make big digits in Character LCD Modules.


Creating big digits with standard charater LCDs is easily done as provided in Bascom website – AN #07. (

The above requirements, if met, the User Interface makes a lot of difference to the user.

Coming Up…  

Part IV : Keys and Controls

Thoughts on keys, controls and related designs.

Designspark – 05/05/11

Connecting People and Products – The User Interface Part II : Components of a UI

14 Mar





In the previous part, we were pondering if User Interface Design is Art or Engineering and concluded that , it is both.

Part II : Components of an UI


Crux of it…

Components and Modules that form part of the UI


Now that I felt strongly that, to make an optimal UI design one needs to be an engineer, no doubt, but also have the flair to be an artist, I proceeded to direct my thoughts towards the essential components that make an UI.


What are the essential functions of an UI?


TO SEE – It helps us to see what is going on.


TO HEAR – Event notifications and alarms.


TO MANIPULATE – It allows us to control itself as well as the process in question.


Components useful TO make us SEE are


  • Displays such as Seven Segment LED , Alpha-numeric LED, Dot Matrix LED, Bargraph LED, Character and Graphic LCD , etc.

Seven Segment



Dot Matrix Display



  • Modules like Character LCD Module and Graphic LCD Module





  • LED Indicators


Components that help us TO HEAR


  • Buzzers, Speakers,etc


Components aiding us TO MANIPULATE a process are


  • Membrane Keypads
  • Rotary Switch encoders
  • Rotary Encoder Switch
  • Touch Screen
  • Potentiometers



These UI Components are used in every project from a simple TV remote to an advanced medical equipment such as MRI.


Without these components, a product or technology , even if state-of-the-art, is of no use to a common man.


UI design has grown leaps and bounds from simple potentiometers to adjustable potentiometer images on touch-screens.


This made me wonder, how come UI has undergone so much of a transformation? Is it due to the customer’s demands?


How does a customer / user decide what kind of a UI suits her application? In essence, how does a user evaluate a UI and decide whether it is satisfactory or not?


It appeared to me for certain that any typical user would look for the following minimum benefits.

  • Ease of learning – in fact , no need for learning, just plug and play.
  • Efficiency of Use – Navigation at its best.
  • Suitability for the application intended – Can’t use a touch screen to turn on a hand-dryer.
  • Optimum information – Not a detail more and not a detail less


Coming Up…

Part III : Screen Real Estate – Information Display

Thoughts on what would be the best way of displaying numbers, alphabets and other information..

DesignSpark – 22/04/11

Connecting People and Products (The User Interface) Part I – Art or Engineering?

14 Mar
%d bloggers like this: