OpenBridge Design System: Improving efficiency and safety in the maritime sector through UX design

The OpenBridge Design System is a toolbox of design guidelines aimed at improving the user experience on ships, ultimately creating a safer operation at sea. These guidelines are based on ongoing research from multiple academic partners and are designed to minimize human error and improve operational efficiency.

OpenBridge Design System explained

Efficient user interface design is crucial for all applications, particularly for safety-critical ones in the maritime sector. However, advanced workplaces present additional challenges related to user interface integration that must also be considered. Many maritime workplaces consist of multiple systems that are integrated into a single workplace. These systems are often independently designed by each manufacturer, resulting in a situation where users must learn different user interface philosophies to operate the workplace, even if each system is well-designed.Inconsistent design is a well-known challenge in user interface design and can increase the chances of user error, reduce efficiency, and result in slower learning of systems. Therefore, it is essential to establish consistent design principles and standards to ensure seamless integration of multiple systems in the workplace.

How UX design can improve efficiency 

To address this issue, the OpenBridge Design guidelines has been developed to support all workplaces on ships, as well as land-based workplaces for maritime operations. The project is led by Professor Kjetil Nordby at the Oslo School of Architecture and Design (www.openbridge.no). The guidelines provide tools and approaches to simplify the implementation, design, and approval of maritime workplaces and equipment.
The OpenBridge Design System and its associated guidelines provide a valuable framework for achieving this objective in the maritime industry. By adhering to the OpenBridge standard, designers can minimize user error, enhance efficiency, and simplify the learning process for operators. Ultimately, a well-designed and integrated user interface will contribute to increased safety and productivity in the maritime sector.

“What the OpenBridge Design Guideline aim to achieve is a consistent user experience, that will help the operator to immediately understand the information they are looking at and thereby be able to better identify errors, easier navigate between systems, minimize the risk of misunderstandings, and simplify decision making. The design elements are based on research in a marine context.” says Festim Zuta, UX Designer at Beijer Electronics.

By following the OpenBridge Design Guideline, suppliers can streamline their development processes and reduce costs, while also improving the user experience for operators. This ultimately contributes to increased safety and efficiency in the maritime industry.

OpenBridge template to be used in iX and Beijer HMIs

Beijer Electronics has recently launched a template in SmartStore that adheres to the OpenBridge principles. This resource can serve as a valuable example of how to design marine graphics in iX in accordance with the OpenBridge Design Guideline.

OpenBridge provides a design guide and hundreds of free icons for maritime user interfaces. All these elements are accessible through the Figma design tool.

“The iX OpenBridge template is a guide and example of how our customers can implement OpenBridge’s guidelines in iX and on their HMIs. For example, you will find different menu backgrounds made in four different color styles to adapt to the amount of daylight when operating at sea: night, dusk, day and bright day.” says Festim.

iX OpenBridge template is perfect if you want to design a modern and user-friendly HMI application not only applicable for the marine industry. 

“We see that a simple feature like dark mode is getting more and more popular. With the template, you don’t need to spend time designing buttons, icons or where the menu should be, it is already available and configured with the OpenBridge design!” says Festim.

Using OpenBridge With WebIQ 

WebIQ with its web-based technology allows you to create your own widgets utilizing JavaScript, HTML and CSS. WebIQ utilizes a modern package system allowing package dependencies and easy updates. For more information how to use a third-party library such as OpenBridge follow this documentation which describes how to create a custom library package in WebIQ.

“During the recent pandemic, Figma design tool became a rising star within the UX design world. Figma is a free web-based tool with a lot of collaborative features making it easier for teams to collaborate remotely. It has now become the leading platform for designing digital user interfaces and mock-ups, and this is also where OpenBridge have built their library.” says Festim Zuta. 

For more information about OpenBridge, visit their webpage at www.openbridge.no

Download the free iX OpenBridge template today >> 

Learn how to use OpenBridge UI components in WebIQ here >>