6. Design Guidelines
HCI design principles are about user interaction with the system. As a quick introduction to HCI design, we recommend to read about “Shneiderman 8 Golden Rules” in [RD10]. A more complete book is available in [RD9].
HCI is about efficiency of interaction. One way to put it is that HCI strives to optimise the protocol between two data processing systems and draws its results from investigating the capabilities and weaknesses of the human “hardware”:
What format should the machine’s output have, so a human can easily consume it?
What format should the machine’s input have, so a human can easily produce it?
In this guideline, we will include most common situation, and solutions proposed by the UI toolkit. As a developer, please make sure your GUI application follows the behaviour and characteristics described in this chapter. The ELT GUI Infrastructure supports you in doing this.
6.1. Icon selection
Problem: I want to introduce icons from the icon theme. How do I make a reference to them?
Solution 1: Using Qt Creator’s Designer:
You can find in the properties docking tab, under QAbstractButton > icon > Theme. The string is expected to be one the icon names standardized in [RD3].
Solution 2: Using direct code manipulation:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
this->ui->setupUi(this);
this->ui->toolButton->setIcon(Qicon::fromTheme("audio-speakers"));
}
Solution 3: Introduce a new icon
When creating new icons, please follow the guidelines in [RD6]. This allows for a consistent look through ELT application, but also allows maintainability of the icon set for future versions. Guidelines for icons include simple design, line art based. It was chosen due to its low-entry level for people who are not illustrators.
The inclusion of additional icons is foreseen for two circumstances:
Icon to identify the application: This kind of icons should be provided in SVG format, in 256x256 pixels, and stored during installation of the application under /usr/share/icons/hicolor/256x256/apps/.
Custom icons to be used for menu, button, should use the Qt qrc facility, as indicated in [RD7]. Remember to include a normal version, and a @2 version for higher DPI displays.
6.2. Progress and Feedback – Presentation to the user
Situation: The User has initiated a procedure that takes a long time to complete, or a remote call in the system that also will take an undetermined amount of time. The user is not informed, nor progress is presented which can lead to the user repeating the operation, of become distrustful of the system.
Solution: The system should, when a long running operation is initiate by the user, present a progress or status report. How to implement this is a matter of design of the application. The interface between the UI and the System needs to have a manner to include feedback. This can be done adding AMI (Asynchronous Method Invocation) to the methods in the ICD XML file, that can set multiple replies, and a final reply. The intermediate replies can be used to inform the user of the progress.
See: ELT CII – MAL API – User’s Manual CSL-MAN-17-150198, page 27.
The UI still needs to present this. Progress bars are the most informative ones. This provide full feedback of the operation. Second options are Loading Animations. These only indicate that an activity is happening, and normally they replace the section of the UI while the data or result is still loading. Finally, Status Indicators are very useful to operations that changes the state of a system in pre-set configuration. For certain operations the user only cares that the system reaches the desired state.
From left to right: Progress Dialog, Loading Animation, Status indicator.
See: https://doc.qt.io/qt-5/qprogressdialog.html, https://doc.qt.io/qt-5/qtwidgets-dialogs-findfiles-example.html, https://doc.qt.io/qt-5/qtwidgets-itemviews-pixelator-example.html
6.3. Data loss operations
Situation: A certain condition (like closing the application), can lead to data loss. The work of hours can be loss just because of a wrong click.
Solution: Operations that conduct to data loss should include a clear and modal dialog indicating the consequences of the action and offering immediately possible solutions.
Closing an application can lead to data loss. Remember of this to the user, and offer immediate and clear alternatives.
See: https://doc.qt.io/archives/qt-4.8/qwidget.html#closeEvent
6.5. Operations that involves risks
Situation: The system is about to initiate an operation that can be risky. This operation may involve (as example) the movement of a heavy machinery, or the evacuation of a gas.
Solution: Include a safety mechanism in the design of the system. A second confirmation (Delay button, Slide and Lock widget), or a Stop button that clearly indicates its purpose.
The STOP button is a common pattern in mounts axis.
Solution: In your application add a switch widget to enable (or present) risky operations. This is because we expect that engineering GUIs will be used by operators as long as the real operator GUIs have not been written, and in this situation, it will be good to use the switch.
6.6. Lists, Tables, and too much data
Situation: A table that initially contained under 50 entries, is expected grow to 100 or more entries. This will make finding the particular data next to impossible.
Solution: If the table data is not in a model representation, refactor it to inherit from QAbstractTableModel. Then use QSortFilterProxyModel to implement filtering functionality on the different columns.
See: http://imaginativethinking.ca/use-qt-qsortfilterproxymodel/
Solution 2: Re-think your interaction design. Is it necessary to present all this data? Will the user ever act on it? In some cases, a resume of the 10 best or worst alternatives is what is needed instead of the whole set.
6.7. The system is too complex to present it on a UI
Situation: In astronomy, many of the applications need to represent the state of a complex system. Usually, this system is something newly created for the observatory, and is complex in nature.
Solution 1: Help your user acquire a “Mental Map” of the system. Visualise the context of an item (like a displayed value or an offered command) and its relation to other items. This does not need to be graphical, but a graphical view is often a good choice. See Figure figure-design-guidelines-map.
Solution 2: Reduce the “Cognitive Load” by offering information in a way human can perceive it best. The two figures below show the same information, the graphical view is much preferable, but involves the creation of a new widget.
Same data, two representations
Solution 3: Use a synoptic view of the system. Do not try to represent everything in this synoptic, just what is necessary to understand its condition. Compression of information may be necessary to reduce complexity. Examples: Instead of representing the stroke status for each actuator of a segmented mirror, just present a color indicating how close to limits it is. Instead to representing every temperature in the system, presents the ones control loops are based on.
Left – VLTI Synoptic; Right – MATISSE Synoptic
6.8. Response from a remote procedure is expensive to process
Situation: The return value or the result available from a remote procedure call is expensive to process. Handling it in the main thread causes the UI to freeze for a brief moment.
Solution 1: In case this is a repetitive task, and happens often, then the design of the application should consider the situation as a consumer/producer problem. Introducing a buffer where the producer quickly saves its incoming response, and moving the consumer to a separate thread is a good pattern.
Solution 2: The UI toolkit provides classes that allows to transfer the remote call procedure to a separate thread. When the reply comes back, then the process of the image can be done in a separate thread.
6.9. What fonts and colors should I use?
Situation: The application under development includes elements that indicate alarms and warnings. It also has text that needs to be presented in a different font. Which ones should I use.
Solution: The UI toolkit for ELT uses a preset list of default values (see chapter 3.7). The developer should not specify colors nor fonts to make its application look like the color schema. The color schema also includes additional colors to convey positive, negative values, information, errors, and warnings. Please refer for the documentation of the UI toolkit for a complete list. In the case of the fonts, normal text in UI widgets should not have any font specified. In this way the defaults are applied, and in case of future changes, the application will automatically comply.
See: CCS UI toolkit user guide.
6.10. The design of the application includes 3D graphics. How can these be included and what considerations I should take?
Situation: Understanding the volume of an object is essential, or a visualization needs to include a third dimension to express the whole set of data.
Solution 1: Try to come up first with a simplified 2D representation. 3D environment are not good to convey quick information and the available devices in the control room or Nasmyth platforms are intended for 2D interaction (mouse, 2D screen, keyboard). Distortion of geometry or flattening maybe needed.
Solution 2: The CCS UI toolkit will include a Synoptics 3D packages, that is based on Qt and FBX models. These models are created in specialized 3D design tools, such as Autodesk 3D Studio and AutoCAD. The Synoptics packages offers the capability to alter geometry of objects, and materials, binding them to variables, datapoints or other control system constructs.
See: CCS UI toolkit user manual, https://www.nngroup.com/articles/2d-is-better-than-3d/
6.11. I need to create a new widget. How can I?
Situation: A piece of data is complex or specialized enough that needs a special graphical or numerical representation (for example, the mount dartboard). But this cannot be achieved with the current available widgets.
Solution 1: Take a look first at Qt included widget library, and then at ELT included widgets library.
Solution 2: The Analog Clock example is a good starting point to understand how to program new widgets. All widgets in ELT also need to be provided as plugins for Qt Designer. Follow the Custom Widget Example tutorial to do so. This will allow any developer to re-use the widget.
See: Control UI Toolkit Widgets, ICS Widgets, https://doc.qt.io/qt-5/qtwidgets-widgets-analogclock-example.html, https://doc.qt.io/qt-5/qtdesigner-customwidgetplugin-example.html
6.12. What graphical design should I follow for an application?
Situation: A new application is developed, and a visual design is needed for it. There are three recommended UI designs to follow in ELT applications
Solution: Be consistent in your design. Consistency is one of the golden rules of design, and allows users to quickly translate their knowledge of other UIs, to the one under development. Take a look at other ELT application, and imitate the design.
Microsoft Office takes advantage on consistent design.
The most common application is the Single Window. This includes a menu bar, toolbar, central widgets, and a status bar. This will satisfy most developers need.
Single Window application
An extension to the case above is the Single Window with Dock Widgets. This is used when the application can be configured and many extra functions are added and removed as the user needs.
Single Window with dock widgets application
A third case is the dialog. In some cases, just the presentation of a single widget is needed. Usually the status of a single device, or it may be a composite widget, but at the end, a single widget.
6.13. When the application is resized, all elements are fixed to coordinates.
Situation: Though many UI libraries allows to drag and drop widgets to quickly create a UI, this is not a good practice. Good UIs make use extensively of Layouts, which are invisible elements that determines dynamically the height and width of widgets.
Solution: Learn how to use Layouts. The Layouts Examples, and Designer Layouts Qt tutorials is a good starting point. Once you understand how to use them, consider using a tool such as Figma to create a basic layout for your application. Using these kind tools, you can quickly layout a sketch of your application. Once you are happy, try to reproduce as best as possible in Qt Designer.
See: https://doc.qt.io/qt-5/examples-layouts.html, https://doc.qt.io/qt-5/designer-layouts.html, Figma template for ELT UI toolkit.
6.14. Users keep making mistakes using the application. What can I do?
Situation: Users are complaining about the UI. It is difficult to use, it is slow, complicated, but there is not proper feedback to act on:
Solution 1: Add to the UI the feedback widget. This Button allows the user to submit feedback on the UI itself to a centralized database. You can later search the provided entries, and elaborate a solution on it.
Solution 2: Meet your users. Developing a UI is not a simple task, and every person has a different perspective on what a system or application should do. First determine some common domain concepts and processes that need clarification, and then start gathering feedback from the users. Propose a solution, and check as soon as possible if this is something useful or not. Rinse and repeat. UI development requires a strong feedback loop.
Solution 3: Redesign the interface. This can be cumbersome and will certainly involve time. Use the feedback from the users to improve the UI. Most users will come up with different ideas, as they have a different mindset than the developer. Use those to drive the new UI design.
6.15. Keyboard shortcuts
Situation: Several features of the application are used one after the other. The user needs shortcuts to execute them quickly, o jump from one position of the GUI to another without resorting to the mouse.
Solution 1: Use shortcuts for every action. Actions are a reusable Qt concept, that allows to program the action once, and reuse it in the menu, toolbar, and other widgets. Actions may have shortcuts that triggers them.
Background - Qt Creator action panel; Foreground - Example application with shortcut
See: https://doc.qt.io/qt-5/designer-creating-mainwindows.html#actions
Solution 2: Shortcuts can also be set in Labels that have a “buddy” assigned. The Labels that have an ampersand (“&”) sign in the Name property, and have a “buddy” assigned, will have the indicated letter treated as a shortcut, and redirect the focus to the “buddy” widget.
Edition of Buddies.
Solution 3: Use tabbing order. Qt offers to customize the next widget that gets focus when the “tab” key is pressed. This is essential for forms and dialogs, as the user commonly inputs the data using keyboard, and presses “tab” to jump to the next editable entry.
Qt Creator tabbing order edition
6.16. User Manual or documentation for the application
Situation: All application for ELT shall come with a user manual.
Solution: Use Qt Help Framework to develop the user manual and documentation. This allows to search, and even reference from the application to the documentation:
Solution 2: Set tooltips for every Widget. Use then the provided UI Search functionality. This will also present any matching coincidence in the documentation.
6.17. Expert users
Situation: The intended audience has ample experience in the System, or they are expert PC users.
Solution 1: Provide shortcuts. GUIs are commonly navigated using the mouse. But expert users will look for and use shortcuts. Shortcuts can be either application wide, or just for specific dialogs:
Application wide shortcuts: commonly in the form of Control-KEY combination, or one of F1-12, there are defined in Action, using the Designer. See QAction.setShortcut documentation.
Menu navigation shortcuts: Using the ‘&’ character in the label of a menu indicates to the application and the user that this is a shortcut: “&File” indicates that pressing Alt+F will open that menu; “V&iew” sets the shortcut to Alt+I. See QMenuBar documentation
Buddies: in dialogs that uses a form like presentation –a label on the left, and an input widget on the right – buddies allows this relation. If the label uses the same notation of the menu navigation shortcuts, then the user can put focus directly on widgets by pressing the combinations.
Dialog Buttons: When a dialog is opened, Button names can also have in their specification the same shortcuts as the menu navigation shortcuts. This allows to select Ok, or Cancel quickly. Standard dialogs already include this in their programming. If you are creating new dialogs, then look into the QDialogButtonBox, to add a set of button that conforms the standards.
Solution 2: Consider programming additionally a command line interface along with the GUI. When properly refactored, the same Models and domain classes can be reused to conduct operations in a CLI.
taurus form is a convenience access to the TaurusForm class. In the same vein, Taurus includes several commands to access quickly different classes, such as TaurusPlot, TaurusTrend, TaurusImage.
Check the click and entrypoint documentation of python, to see how you can extend functionality of a python executable.
Or you can simple create small python applications that parse arguments and create small programs based on your classes.