Saturday, December 10, 2022

Basic User Interface Design for Electronics Engineers

S.A. Srinivasa Moorthy is director, D4X Technologies Pvt Ltd, Chennai

- Advertisement -
Fig. 8: Before change
Fig. 8: Before change
Fig. 9: After change
Fig. 9: After change

Warning devices.

Warning displays call for attention and require action. For example, a red traffic light means that you must stop your vehicle.

Indicators. These displays have no graduated scales, but display text or numeric information, to show the state of a system. A good example is a digital panel meter, which shows the reading but never tells the maximum or minimum, unless explicitly mentioned.

- Advertisement -

Counters. Counters show the information directly as numbers.

Based on their functionality, displays can be grouped into three major categories:
Quantitative displays.
1. These display exact information. Digital quantitative displays present information directly as numbers. An example is a digital clock.
2. Analogue quantitative displays can also be used where the length or angle represents the information. For example, a thermometer where the column of mercury or alcohol represents temperature.
3. Use of a particular quantitative display depends on the kind of information that is required. If you need a precise reading, then digital indicators are most easily read.

Qualitative displays.
1. These displays give information about particular states, for example, hot or cold, alarm or no alarm, etc. These can provide information about the rate of change or direction of deviation from a desired value.
2. These displays may include indicators and warning devices, and can be used in circumstances where you only need to know whether a certain condition exists. For example, when temperature of a steam iron becomes too high, it switches off, which is indicated by a small red light (bulb) that goes off.

Representative displays.
1. These displays can portray either working models or simplified diagrams of a complex process, system or machine. These enable the perception of the functioning of each part of the system or machine in correct relation to the whole system. Most underground rails (metros) and ordnance survey maps, railway signal panels and plant mimic diagrams are examples of these displays.

Now, let us see the factors that impact displays when these are used in products. When displays are combined with input devices, the challenges are many. Some key elements are:

Viewing distance. This is the distance from where users can read the display and operate controls. Typically, distances vary from 300mm to 750mm. Any distance beyond this will strain the user.

Illumination of displays. LED based devices have built-in light emission and, hence, illumination is easy to control. However, when the product uses liquid crystal displays (LCDs), the design becomes complex. While some LCDs are reflective and need external lights to work, other LCDs work with backlights, the intensity of which is key for display illumination. Designers need to choose the right illumination, depending on external light availability where the product will be used.

Viewing angle. This is a critical parameter, which most designers miss. The best view is possible when the user is at 90° to the display plane (right in front of the display).

Viewing angle of the display can be defined as the angle at which the display will be legible from the 90° position. LCDs have a restricted viewing angle (typically about 20° to 30°). Higher the viewing angle, better the viewing, but greater the cost.

Also, when the LCD is mounted in a slanted position, the viewing angle should be with respect to the slant. This angle of slant is important when keys are mounted along with the display. Table IV gives the illumination needed for different displays and other work-related areas.

Combining displays and inputs. Displays and their associated controls should be designed and located such that the user can select the correct control and operate it effectively, without errors.

Combining multiple displays. When multiple displays provide information to the user, he or she will invariably have to divide the attention between a number of tasks, as well as displays. Any inconsistencies in the manner of information representation among displays will be confusing. This will reduce the speed of reaction to change, indicated by displays. This can even cause reading or decision errors. If a number of displays look alike, the user may interpret data incorrectly. Each display should be easily distinguishable from, and its information should not be easily confused with, any other display.

Designing the keyboard and display together (UI)
Now that we have seen the design of input devices and displays separately, let us now see, when we design a system, how these two have to be put together in a balanced way. When a product is designed, there are three primary aspects that need to be addressed, which are:

Aesthetics. Deals with how the product looks

Ergonomics. Sees how easy it is to operate the product and that the product does not impact the user adversely

Engineering. Checks how easy it is to manufacture the product, without increasing the manufacturing cost

A UI is guided by the following three principles from an ergonomics perspective:

Operation sequence. Determines how the product is operated using keys (input) and displays (output)

Frequency of use. Checks how frequently the UI will be used

Centre of attention. Check which elements in the UI need higher attention

Let us see how a user can use this concept, with the following example. Refer to Fig. 8, where a front panel with a display, switch and knobs are shown, and where arrow marks show how the user uses the interface.

Fig. 10: Designing of a push button
Fig. 10: Designing of a push button
Fig. 11: Designing of a membrane key
Fig. 11: Designing of a membrane key

You can see how the key sequences go across the product face. This could have been due to the functional grouping of keys, knobs and displays. However, when the user will use this, he or she must remember the sequence of travels across the face of the product every time he or she uses the product.

Instead, if keys are arranged in the use sequence order shown in Fig. 9, the user can remember the sequence of use easily and use the product with ease. This effectively demonstrates how an ergonomic UI can be designed.

Next is the frequency of use. To help users use the product quickly and easily, following rules will help in designing an effective UI:
1. Controls and displays associated with each other should be placed in a compatible way
2. There should be a very clear demarcation between visual display elements and controls
3. Horizontal hand movements are better than vertical
4. Movement of hands towards the body is better than away from it
5. Horizontal orientation of keys is often preferred
6. Square keys are preferable as compared to other shapes
7. The maximum number of keys in a row should not be more than four
8. Most frequently used buttons should be on the right side of the system

Finally, let us see the engineering aspect of the UI. This essentially ensures that the UID is easily manufacturable and does not need a complex assembly process. This is also important from the product-service point of view.

Figs 10 and 11, respectively, show how a push button and a membrane key, both LCD UIs, can be designed for ease in manufacture.

These two designs are representative designs as engineering depends on the components and the manufacturing process used. Higher the automation, more the precision needed for the design.



What's New @

Truly Innovative Tech

MOst Popular Videos

Electronics Components

Tech Contests