.webp)
The first three blogs in this series illustrate the essential features needed for the creation of iconic experiences on digital devices: the cross-platform development and deployment environment empowering game-engine-like graphics quality with performance optimized for embedded environments.
This blog is about method and how the UI framework’s features and capabilities are devised to play together to ensure the end-to-end delivery of digital products. There can be large variations in the result and how efficiently this is achieved depending on how the various software tools interact and enable teams to collaborate iteratively. In the highly competitive modern market, a fragmented workflow, where tools don’t naturally interface, and teams are confined in silos focusing each on one piece of code at a time is bound to fail due to its inefficiency. When the production process spans from UI/UX design to deployment on a range of targets, through various iterations of testing and updates, the success of the enterprise—in terms of product quality, time to market, and cost—can be significantly enhanced by adopting the right working methodology in addition to the right tools.
An end-to-end solution
The UI app creation process involves multiple stages, encompassing UI/UX design, hardware deployment, and iterative development and testing. Various teams with very different skills and competencies take part in the endeavor, and their interaction is not always easy—let alone efficient. Without adequate tools, for instance, the design and experience ported to the app by the engineers and technical artists may deviate from the one originally devised by the designers. In turn, software testing should be executed at every iteration, at every update, and without integrated testing automation tools, manual execution is time-consuming, error-prone, and limited in scope and accuracy.
Rather than relying on a variety of disparate, fragmented tools to perform one task at a time on a need-by-need basis, the UI framework provides dedicated solutions for each stage of the software development process that build upon the same codebase. While providing a cohesive and consistent environment, in terms of workflow, this breaks down silos, as UI/UX designers, 2D/3D technical artists, software architects, developers, and quality and testing engineers can collaborate iteratively on the same codebase through the UI framework’s unified tooling.
The availability of such tooling enables OEMs to establish an effective software development methodology in which the designs are created in close connection with the software and hardware specifications, and the user experience can be tailored to meet the set requirements at any stage. By sharing a common UI creation tool where the visual component of the app is built side by side with its code, technical artists and engineers can better understand each other’s aims and constraints. UI designs are automatically converted into code, and code changes are immediately reflected on the UI’s appearance and behavior—enabling fast error detection and rapid iterations while leaving no margin for misunderstanding. The possibility to share not only the design concept but the fully working UI application over the web allows all stakeholders to review the appearance, test the functionality, and share feedback on the overall user experience. Compared to a fragmented working practice where various incompatible tools are introduced at every new need, the UI framework's end-to-end tooling enables an integrated working methodology that drastically reduces complexity and efforts, with huge benefits on time to market and cost.
When, in addition to design and development, the UI framework’s tooling includes an automated testing suite, the highest quality standards, up to certification for safety-critical use cases, can be attained with smaller effort and cost. Test automation increases testing coverage and accuracy while decreasing execution time and the risk of manual error. As frequent testing is standard in the current agile software development discipline, the possibility of scheduling extensive parallel tests on multiple platforms quickly pays off the effort of creating automated test scripts.
Standardization and customization
One key factor, when the product offering encompasses various product categories and models, different markets, and even multiple brands (possibly competing on their respective models and markets), is standardization. Creating software for new models cannot be a re-creation from scratch and defining standard reusable components is essential to port core functionalities across the full product portfolio. Product maintenance and updates are also highly dependent upon the compatibility and interoperability of the various software components. In principle, updating part of the software must not cause a regression on another, and adding new functionality should not break the pre-existing ones.
A UI framework offering standardized building blocks for all core components of the UI application and easy integration with the pre-existing software stack eliminates such problems at the root.
The other key factor for multi-product companies is differentiation. It concerns variation of functionality and look-and-feel across models, product lines, markets, regions, and demographic groups.
For a successful end-to-end development on a global scale, it is essential to harmonize these two rather opposite requirements: standardization and reusability on the one side—namely, avoid doing the same thing twice—and differentiation on the other—that is, easily customize the appearance and functionality across models, regions, locales, etc.
Such balance can be reached by decoupling the appearance of the UI from the underlying logic, in line with the model-view-controller software design pattern. While the logic defining the applications’ behavior and functionality remains, to a large extent, invariant, the appearance of the UI elements can be easily customized for the different models. For instance, the connectivity and intercommunication functions of the app can be defined once and for all across all devices. The layout and appearance of buttons and control elements can be easily varied across models, new themes can be added at any point, and so forth.
The UI framework enables the creation of atomic UI primitives that abstract over their context of use and can operate across different logic workflows (and, of course, platforms). Being each atom defined by a specific portion of code, it is simple to compose them into larger molecules, or templates, defining more complex UI elements and functions that can be applied to various use cases and product lines to provide consistent functionality. At the same time, the UI framework includes all the tools to easily customize and differentiate the look-and-feel of the components according to the design patterns and UX requirements of the different product models.
In terms of workflow and productivity, by creating templates where appearance and logic are separated, senior developers can deliver highly optimized ready-made software components, with best coding practices backed in, that ensure robust functionality, portability, and compatibility with other components. This makes it easier even for junior developers to use and customize such templates according to preset requirements and to become more productive with less margin for error.
A UI framework enabling the creation and easy customization of such templates allows hardcore software developers and technical artists/front-end developers to work side-by-side on the same codebase, with major benefits in quality, efficiency, and costs. But there is more to it.
Ownership
As user experience in digital devices is aimed toward a smartphone-like experience, also the technological trend is shifting toward smartphone-like solutions: on the hardware side, technology is migrating toward a single board with multiple processors, while on the software side, toward a single OS covering all use cases. This applies across industries, from consumer electronics and medical, up to the automotive sector—that produces some of the most sophisticated and complex software on the market. This trend is motivated by the opportunity it offers for OEMs to reduce their bill of materials, the amount of code to be maintained, and the dependency on third-party suppliers.
Platform thinking, as we call it at Qt, involves unifying the software and hardware infrastructure and customizing it according to the brand and model. Such sort of "large-scale template strategy" is also at the heart of the recent success of pre-packaged HMI solutions, like the one offered by Android Automotive that can be customized according to the specific brand’s look-and-feel—with the right tools. Aside from the automotive industry, the possibility to use standardized software components and the availability of tools for their easy customization in a single UI framework is a key enabler for succeeding in the modern competitive market.
The key takeaway from this trend toward a platform method is that by increasing ownership, OEMs can simplify their process, reduce costs, and reinforce their brand. The adoption of a unified UI framework whose tools encompass the end-to-end product lifecycle enables OEMs’ emancipation from third-party suppliers, with major potential benefits in terms of optimized productivity, efficiency in delivery, brand differentiation, and quality.
