How Designers and Programmers Can Work Together to Deliver Successful GUIs for Embedded Systems Beyond the Code: How Designers and Programmers Can Work Together to Deliver Successful GUIs for Embedded Systems
Tuukka Turunen, Director of R&D, The Qt Company, looks
at the requirements for user interface design in embedded systems, provides suggestions for anyone tasked with developing advanced GUIs, and explains how building bridges between designers and programmers is one of the keys to successful implementation.
From industrial automation to medical devices, and add-in requirements such as touch-screen navigation, from home appliances to automotive infotainment, dynamic content and web access and it is clear that well-designed and functioning embedded systems proper user interface design) is now a critical element play a critical role to the performance and functionality in a creation of an embedded system. of a growing number of modern products. Meanwhile, As we have all grown accustomed to the ease use in a world where expectations are drastically getting of mobile phones and tablets, even the most basic higher and almost every company is looking for a non-consumer design is expected to offer a GUI that flashy and ‘cool-looking’ UI, embedded systems is intuitive, unambiguous, informative, responsive and designers are under pressure to meet ever-growing reliable. This puts pressure on the project development usability requirements consistently while delivering team, not only because GUI development can become stunning user experience. Although coding is clearly more complex at the coding level – suitable ‘building a critical element to building the interface for an blocks’ are not readily available for many embedded embedded design, good coding alone is no longer operating systems and, while attractive graphics can satisfactory – one needs to understand the user and be displayed by any system with a good display and choose the right development tools first. enough processing power, creating interactive and dynamic GUIs can be very demanding without the right tools. However, even with the right tools developing Evolution of User Interfaces for the best GUIs may require additional design skills that aren’t always readily available in a software Embedded Systems engineering team.
In the past, many embedded systems were just
While functionality is, of course, essential, what that: requiring little or no direct link to the end user, distinguishes the best GUI designs from simply therefore, only basic UI requirements were attained adequate implementations is good usability. Software (if any at all). Also, many users of such systems were engineers will always be able to implement a user trained professionals of those systems, and it was interface that meets the functional specification, but acceptable for a system to be non-intuitive or even the best user experience will only come from a higher impossible to use by others. However, as embedded level consideration and understanding of how that devices become more capable and are found at the interface should help the user do their job better, or heart of almost every electronic system, their features achieve a desired outcome in the simplest or quickest need to be more accessible. Paradoxically, as increased or most intuitive manner. It’s not only about the looks features add complexity more work must be done to of the application but the intuitive interaction with the abstract this complexity away from the user. Finally,
end user. This is why there is a distinction between Once they understand what functionality the user coding an interface and designing an interface – and needs, the designer can move onto the look-and- why, in a world where users will no longer put up with feel of the interface and the underlying workflow. devices and systems that are hard to learn or difficult Storyboards and prototype visuals should be created to use there is much work to do before coding can be and discussed with the users and new iterations started. created based on their feedback. Modern tools can assist here, not only enabling fast prototype development but also allowing this work to be utilised Pre-Coding Considerations in the final product rather the developers having to begin again from scratch, trying to imitate the The first stage of any good user interface design designed prototype. Throughout, the designer should should be to define the user requirements and analyse be looking to create an interface that is intuitive, how the user will perform the necessary tasks. With consistent in form and function and ‘clutter-free’. this in mind there is no substitute for understanding what the users need to accomplish and how they Beyond the user requirements and task analysis, other will approach key tasks in order of priority. Naturally factors that will impact the design can range from this is true of all designs but becomes especially the operating environment – high levels of ambient important in mission- and safety-critical applications light or, as is the case for many medical or industrial such as medical or aerospace systems where how automation applications, the need to use gloved hands good the interface is can, literally, make the difference on a touchscreen may, for example, have an impact between life and death. With this in mind it can be on icon size, colour and position – to the need for valuable observing or recording the users as they go portability across hardware and software platform. about similar tasks and it is always worth considering Global deployment may necessitate several language what problems and frustrations they might have with versions or the need to integrate web functionality existing systems. will also need to be considered at this stage. Pure hardware requirements may also set limitations to the UI design.
Once the designer has established the ‘big picture’
requirements for the embedded user interface, it is the task of the software engineer to make that interface a reality. The choice of design environment and associated tools can make a dramatic difference here – not only to the finished product but also in terms of the cost and speed of the project development.
For GUI design, the environment is necessarily
divergent; graphical on one hand, source code on the other. Bringing the two together can successfully bridge the design and development aspects of GUI functionality is used. And in the case of modern creation that begin with the pre-coding issues outlined frameworks, such as Qt, that offer true cross-platform above. A GUI design environment that supports support this process is simplified even further. Such a graphical approach to design (aesthetics) and portability can minimise the development overhead development (coding) is particularly advantageous of new designs and make it easier to migrate existing in this respect. In such an environment user controls designs while providing a route for embedded represented graphically will ideally also contain, developers to target different silicon price points. For inherently, all of the code needed to invoke them on example, Qt can be used to create an interface for a the target platform. In engineering terms, this implies portable medical device built around a low-power, an object-oriented approach to design; by selecting an cost-effective processor and the same code can be element, all of its features are inherently invoked and, leveraged on a significantly larger machine such as through this ‘inherency’, anything built using these a CAT or MRI scanner that uses a more powerful elements will implicitly have access to the individual processor. elements’ features and functionality. Superficially such an approach is not restricted to visual elements; One of the leading object-oriented programming any ‘component’ developed using an object-oriented languages in use today is C++. Based on the methodology implicitly inherits the features of its ubiquitous C language, C++ is a natural progression for component parts and passes on its features to any many engineers looking to adopt an object-oriented other components using it in a hierarchical fashion. methodology. By using an object-oriented approach it is possible to create a development ‘framework’ This underpins the structure of object-oriented where modular libraries contain ‘components’ (or programming languages such as C++, and is rather ‘classes’) for GUI widgets such as buttons, conceptually extended to graphical design sliders, windows or dials, as well as other functional environments that support object-oriented elements needed in embedded devices, including programming. Significantly, object-oriented software networking, support for multimedia (codecs) and is inherently portable because ‘components’ embody internationalisation (languages). This advantage (through inheritance) all of the features needed to over interpreted languages, such as Java, can be define their functionality, making object-oriented the difference between a great and a mediocre user code less hardware dependent. In most cases, experience. porting object-oriented software is a simple case of re-compiling for a different architecture – at least as long as no hardware or operating system specific
Framework Functionality Because of object-oriented design, the components can also be extended effortlessly to create new UI
Of particular benefit to both designer and engineer components.
is if the environment chosen offers a wide variety
of pre-fabricated and customisable user interface The Qt design environment enables the rapid
components along with classes and modules that creation of graphical elements, for example, drag-
abstract common functionality in operating systems, and-drop UI creation in addition to writing the code.
ideally, beyond just GUI creation. For example, by High performance text rendering as well as pre-
also providing classes for XML, networking, inter- rendered fonts help to reduce processing overhead
process communication (IPC), 2D and 3D graphics while, beyond the graphics, special web tools meet
with hardware acceleration, threading, data bases, connectivity requirements by allowing designers
internationalization and multimedia the engineer to build advanced user interfaces that incorporate
effectively has access to a whole application real-time web content and services. For global
framework. This advances implementation of key deployments a dedicated linguist tool enables
functionality while allowing developers to focus on engineers to translate and adjust applications to
core competencies that add competitive advantage to different world languages, including support for Asian
the final product. characters and right-to-left script.
Take, for example, the Qt application and UI
framework, which is well-established in the desktop Portability environments and has also been well adapted to embedded and mobile systems. Consisting of One of the significant advantages of Qt is the way both development tools and class libraries, the Qt in which the framework has been built to provide a framework allows designers and programmers top-level, cross-platform application programming to work together to produce a GUI using pre-built interface (API), which enables deployment of GUI components that are easily customised to match the designs and applications across multiple software desired look-and-feel and behaviour of the application. environments with minimal additional work. For
instance, source code from one device target, such in everyday objects. For most developers though, the as a desktop PC environment, can be deployed to Internet of Things is just a newer, more fashionable an embedded operating system or a mobile device term for the old industry workhorse: the connected without any requirement for re-writing. This not embedded system. After all, haven’t we been building only allows multiple deployments from a single IoT-like devices for decades? Yes and no. development project but also future-proofs the code against next-generation challenges in the platform Central to most definitions of IoT devices is the fact itself—a significant benefit in a world where operating that they are embedded systems that are often (but systems themselves are subject to continual revisions not always) mobile and use M2M – in other words, and where product lifetimes can sometimes be wandering gadgets communicating machine-to- measured in months rather than years. machine. Of course, these attributes already apply to a large number of embedded devices. However, the IoT promise is that always-on communication will Building the Internet of Things and give these devices the information they need to act smarter. This step of imbuing every-day objects with How Qt Can Help rudimentary intelligence and communication skills gives us a wide array of technological aides: sensor- The term, Internet of Things (or IoT), is everywhere. studded biometric clothing, self-scheduling shipping For people wanting to impress others, it’s the latest drones, auto-monitoring homes, freshness-reporting buzzword to include in a conversation in order to be groceries, automatic parking meters, self-diagnosing seen as relevant. For science fiction romantics, it’s an agricultural crops — the list goes on. image of dust-sized computers implanted everywhere
Realizing this vision of IoT requires computers to continue becoming smaller, smarter, and more connected. While everyone seems to understand this requires a hardware transformation, few people are talking about the significant change that’s required in software. Adding intelligence to everyday objects while ensuring both human-to-machine (H2M) and M2M conversations are more intuitive and natural requires complex software, and lots of it. This in turn, places a number of requirements on how to develop IoT software.
Used by over 1,000,000 developers worldwide, Qt is a full framework that enables the development of powerful, interactive and platform-independent applications. Qt applications run native on desktop, embedded and mobile host systems, enabling them to deliver performance that is far superior to other cross-platform application development frameworks. Qt’s support for multiple platforms and operating systems allows developers to save significant time related to porting to other devices. Qt is created by developers for developers where making developers’ lives easier is top priority. It provides an incomparable developer experience with the tools necessary to create amazing user experiences. Qt is platform agnostic and believes in making sure that all developers are able to target multiple platforms with one framework by simply reusing code. Qt gives freedom to the developer. Code less. Create more. Deploy everywhere.
About The Qt Company
The Qt Company is responsible for all Qt activities including product development, commercial and open source licensing together with the Qt Project under the open governance model. Together with our licensing, support and services capabilities, we operate with the mission to work closely with developers to ensure that their Qt projects are deployed on time, within budget and with a competitive advantage. The Qt Company’s goal is to provide desktop, embedded, and mobile developers and companies with the most powerful cross- platform UI and application framework. Together with its licensing, support and services capabilities, The Qt Company operates with the mission to work closely with developers to ensure that the projects are deployed on time, within budget and with a competitive advantage.
www.qt.io Office locations: China | Finland | Germany | Norway | Russia South Korea | Taiwan | United States
(Cognition and Poetics) Burke, Michael - Troscianko, Emily - Cognitive Literary Science - Dialogues Between Literature and Cognition-Oxford University Press (2017) PDF
(Cognition and Poetics) Burke, Michael - Troscianko, Emily - Cognitive Literary Science - Dialogues Between Literature and Cognition-Oxford University Press (2017) PDF
