Professional Documents
Culture Documents
net/publication/327239237
CITATIONS READS
8 1,374
3 authors:
Jon Fauske
Oslo School of Architecture and Design (AHO)
2 PUBLICATIONS 8 CITATIONS
SEE PROFILE
All content following this page was uploaded by Kjetil Nordby on 02 October 2018.
SUMMARY
Maritime workplaces in digitally integrated multivendor ship’s bridges often offer inconsistent user interfaces and
suboptimal workflows for navigators. We propose that design consistency in such bridges can be achieved by applying
methods and technologies from the web and mobile industries. We present ongoing design work directed towards
defining a maritime design system enabling design consistency across multi-vendor ship’s bridge systems. The system
has been developed through an experimental process involving analysis of 10 user interfaces from existing ship’s
bridges to understand their functional structure. We further apply design strategies from the web industries, such as
responsive design, style theming and standard user interface components. We present a design proposal and discuss the
results in terms of consistency and the implications for industry of having a maritime design system. We argue that there
are compelling advantages for the maritime industry in systematically transferring methods, processes and tools from the
web industry.
aspects of interaction design, such as structure of content, and is in continuous development to respond to new
user interface patterns, terms and interaction needs [11]. The thinking behind design systems is not
mechanisms. Consistency can also be applied within a new [4]; however, it has gained traction in recent years as
single application (e.g. Electronic chart display and a way of reducing development costs and improving user
information system (ECDIS)), across multiple experience (UX) for companies with large portfolios of
applications working within a single system (e.g. an IBS) applications. UX, which is often used as a qualitative
or across multiple systems each with multiple measurement of success [12], refers to a user’s dynamic,
applications (e.g. across several IBS). Consistency context-dependent and subjective experience of the
cannot cross all aspects of an application, and system [13].
consistency can in some cases result in suboptimal user
interfaces [5]. Design for consistency must therefore Although building a design system requires extensive
consider users’ activity. and comprehensive work, it will ultimately save both
time and money as the design system is applied to
The lack of design consistency in the maritime industry increasingly more applications and services. This is
has been well known for many years, and International because a design system includes reusable components
Maritime Organization (IMO) initiatives such as S-mode that simplify implementation and design processes.
are trying to move the industry towards improved Because consistency and cost are important challenges in
consistency across maritime user interfaces [6]. S-mode the maritime industry, we suggest that applying the
seeks to introduce a switch that would enable a standard thinking behind design systems might be beneficial in
user interface for navigation systems. Despite such this domain.
efforts, current regulations and laws have not led to clear
premises for consistent design across the many vendors 2. DESIGN CONSISTENCY IN MARITIME
delivering equipment for MBS. A consistent MBS USER INTERFACES
requires consistency across a number of applications, and
this is challenging from an organisational perspective In reviewing current design regulation and guidelines in
since multiple vendors needs to agree on design the maritime sector, we found no information about how
guidelines specific enough to achieve design consistency. to realise consistent design across different vendors [14].
This is also problematic from a commercial perspective Although maritime regulations and guidelines offer
because user interfaces are part of both system important support of screen based user interface design,
integrators’ and equipment vendors’ unique value they do not provide user interface guidelines with the
offerings. specificity that is necessary to achieve design
consistency. In addition, we found no support for
1.2 CONSISTENCY IN WEB INDUSTRIES achieving more cost-effective design of new user
interfaces.
In web and mobile-oriented industries (web industries),
there is a long tradition of addressing design consistency We argue that there is a gap between state-of-the-art
through the development of design guidelines [7-9]. web-based design support and design support specific to
Developers of operating systems (such as Android, the maritime industry. To bridge the gap, we argue that it
Windows and iOS) have tackled the problem by would be beneficial for the maritime industry to develop
producing and distributing comprehensive design a design system based on approaches from the web
guidelines connected to software development resources industry to help achieve design consistency across
that make it convenient for application developers to maritime applications.
follow their design philosophy [7-10]. For operating
system vendors, this move promotes consistent design To do so, it is important to distinguish between an
that improves the usability of the applications built for integration platform and applications. An integration
their platforms. For system developers and designers, platform includes the workstation and the software that
these guidelines contribute to improving their design manages how applications are mediated in the
delivery and ensure that the applications are consistent workplace. Applications are software programs (such as
with the general platform on which they operate. This Dynamic positioning system (DP), ECDIS and wiper
results in applications that are easier to learn at launch control systems) installed within the integration platform.
since users are already familiar with central aspects of A full maritime design system would cover both areas.
their user interface based on previous experience with However, this article addresses only consistency among
other applications. applications. We will explore consistency across multiple
complete MBS in forthcoming articles.
Current generations of web-based design guidelines often
take the form of a design system. By design system, we In order to develop a design system proposal, we have
refer to a modular user interface methodology built on compared the user interfaces of 10 maritime applications:
web technology that merges traditional design guidelines
with development tools. A design system should be an Compass system
adaptive system that supports a portfolio of applications
The selected applications represent a wide range of 2.3 USER INTERFACE STYLE
digital user interface types found in ship’s bridges. We
have evaluated design consistency across these 10 User interface style addresses visual formatting, such as
interfaces and identified the components used to build typography, colour, spacing, iconography and the
them. Our analysis is divided into three categories: user appearance of shapes and lines. Visual formatting is
interface components, user interface layout and user important in maritime applications because it is
interface style. These represent common categories for connected to readability and the design of day and night
organising web-centric user interface guidelines. palettes. In addition, it conveys the visual identity of
companies that make equipment and bridge systems.
2.1 USER INTERFACE COMPONENTS
Overall, we found no consistency across components,
User interfaces are constructed using a set of components layout or style in the 10 applications we examined. We
for input control, such as buttons and toggles, navigation, consider this lack of consistency problematic and
such as search field and sliders, and information, such as contend that it most likely would lead to usability
icons and notifications. In order to achieve consistency, problems if the applications were installed in the same
the appearance and use of such components should be MBS.
similar across all applications.
3. TOWARDS A MARITIME DESIGN
None of the interfaces we analysed used user interface SYSTEM
components from a shared library; all opted for
individual design. This resulted in much variation even in We propose to develop a design system for the maritime
very simple interaction components, such as buttons. The domain able to support consistent design and efficient
variations extend to graphical icons and maritime user implementation of user interfaces for maritime
interface components, such as representations of applications, especially targeting MBS. Our maritime
thrusters. We found no functional reason for the design system will include design guidelines aligned with
variations in user interface component design. maritime regulations, maritime-specific content, online
support material and online development libraries
2.2 USER INTERFACE LAYOUT supporting user interface implementation.
We refer to the overall structure of a user interface as the This article reports on processes aimed at the
user interface layout. This includes the division of screen development of such a maritime design system, focusing
space into functional areas as well as rules for the on our collaboration with industry partners to develop an
position of important function categories, such as early concept for design guidelines to support application
function and navigation menus. design for MBS. Our current proposal is not a full design
system but a substantial step on the way towards this
We found significant variation in the user interface goal. The main purpose of our proposal is to demonstrate
layouts of the 10 applications we analysed. The whether technologies and methods from web industries
variations were related both to the separation of functions can be applied to maritime applications to realise
and to the positioning of function categories. Some of consistency.
this variation can be attributed to many applications
targeting different modes of operation and having The proposal has been developed using an iterative
different types and quantities of information and design process where we redesigned existing user
functionality. For instance, the user interface for the echo interfaces using concepts from web-based design
sounder represents a much narrower scope of information guidelines. We especially draw on Google material
than that of the conning application. However, even in design [6] due to its comprehensive connected support
such cases, we do not see any reasons for the difference material and its familiarity as one of the best-known
in layout with regard to the positioning of navigation design systems. By iteratively designing multiple
menus and alert components, for example. applications in parallel, we are able to identify common
user interface elements and synchronise the design across
applications. This process is repeated in a continuous
loop as we try to achieve meaningful consistency in the navigation menu to swiftly switch applications and to
components, layout and style of the user interface. change the palette and dimming options (Figure 2d).
Central icons in the navigation menu can be placed to the
We have reviewed our design proposal through two right of the navigation menu button if necessary. Within
industry workshops with partner companies and through the hamburger menu, the top area is reserved for
expert evaluation by designers and human factor navigation within the current application (Figure 3a) and
specialists working in the maritime domain. settings (Figure 3b). The lower area allows access to
company-specific information and the help system
The designs have been developed using common tools (Figure 3c). We have standardised the placement of
for user interface design, such as paper sketches, graphic important generic functions, such as dimming
design software and web development tools. We have (Figure 2d), palette control (Figure 2d), help (Figure 3c),
developed a global style guide in parallel to the design of company messages (Figure 3c) and alerts (Figure 2c).
individual applications. In addition, we have
implemented a few of the user interfaces as responsive
HTML demonstrators to test scaling in practice. These
have been installed in an MBS made by one of the
project partners for compatibility testing. The current
proposal is an early iteration of a design system and is
not ready for industrial implementation. We consider it a
framework for further design of a functional maritime
design system.
Figure 4 shows an example of an actual application modern user interfaces for ship’s bridges. Second,
design and the same application converted to the new implications of fatigue and a moving environment may
template. The new template adds new functionality, such potentially affect a person’s ability to identify and trigger
as free scaling and optional hiding of menus. The design a button, so we assume that larger hit areas are a benefit
also allows comprehensive changes in visual style. The in maritime systems in general. This choice needs further
palette in figure 4 is drawn from some of the partner evaluation in formal user tests. Future iterations of the
companies’ application implementations. We are in the concept may differentiate between components for touch
process of designing a new palette that conforms to interaction and components for screens operated through
maritime regulations. indirect interaction, such as by mouse.
Our design proposal makes use of several approaches In addition to user interface components borrowed from
found in web-based user interface design: theming, web industries, we have defined an additional category of
responsive design, common user interface component maritime-specific user interface components. There are a
design and a user interface component library. What number of interaction components that represent specific
follows is a description of each of these strategies and a types of data, such as visualisations of heading and
walkthrough of how we have implemented it in our thrusters. We have identified these as maritime user
design. interface components connected to specific maritime
content. Also within this group are components that
3.1 (a) User Interface Components mediate specific generic functions in the user interface,
such as the alarm component and the dimming
Although we found significant variation in the design of component.
user interface components in our analysis of current
systems, we also saw that the number of component 3.1 (b) Theming
types was quite small, dominated by buttons, toggle
buttons and menus. Our design proposal makes use of the It is common in web development to separate definitions
component types we found in our analysis and proposes of application styles from other code and to use
new common components inspired primarily by material cascading style sheets (CSS) and similar technologies to
design (Figure 5). format the visual style of an application. This method
makes it possible to change user interface attributes, such
as spacing, fonts, colours and geometry, for any number
of user interfaces by simply editing a global CSS file.
Figure 6 show an example of a toggle button formatted
by two palettes. Theming across an MBS would enable
uniform day and night palettes and a custom style guide
to accommodate individual users and would also allow
adaptation of the visual style of any application to an
integrator’s design scheme. This approach would make it
possible for an equipment manufacturer to deliver a
single application that could automatically be adapted to
different style guides on different MBS.
as allowing ship owners to implement their own style Maritime theming will differ somewhat from current
guide on an MBS. web-based templates. First, the design must facilitate
multiple palettes related to operational conditions, such
as night, dusk and dawn palettes. Second, maritime
requirements and user needs warrant the connection of
some colours to specific functionality, such as alerts.
Third, the system must facilitate text scaling based on
viewing distance in addition to screen size.
threshold where the user interface is rearranged to better who may not know how the main integration system
facilitate a new range of display area sizes. In our design, organizes menus or switches between applications. Our
the thresholds rearrange the menu structure in the design system handles this by providing for the
interface. The first collapses the right action menu, while consistent placement of global navigation in each
the second removes all remaining menus and effectively application. However, if an integration system design
transforms the application to a widget-type app. conflicted with our approach, a change would need to be
made either to the integration system or to our design
Our trials show that we can replicate most of our system. Examples of such conflicts could be a global top
applications with responsive design to allow them to bar in the integration system that obscures the application
scale freely from very small form factors to large top bar or flyout menus for navigation in the integration
screens. Adjusting to smaller form factors requires the system that overlap application menus. To avoid such
hiding of parts of the interface, and many of the conflicts, we argue that a successful maritime design
applications will need a defined minimum screen area to system must include specifications for how integration
ensure that they can safely show essential content for systems should facilitate the integration of applications.
maritime operations. We will extend our design work to encompass
requirements for integration systems as we further
There are multiple reasons for adopting responsive develop the concept.
design in maritime applications. The modern ship’s
bridge already has multiple screen types and sizes. Many of our partner companies use interface design to
Moving forward, we expect there will be additional differentiate their products. This is a barrier to
formats made available, including higher screen introducing a uniform maritime design system. Many of
resolutions, larger screens and portable formats. Further, the industry actors we collaborate with are worried that a
as systems are accessible over a network, it is likely that strong design system would reduce their ability to stand
users will access maritime applications in many places. out in the market. We have made efforts to relieve such
Finally, these applications are installed on multiple ships, concerns by opening up the possibility of differentiating
and as available screen formats increase, it is likely that user interfaces through styling (facilitated by CSS) while
the same application will be shown on different screen maintaining consistency across MBS through the layout
formats on different ships. and components. This would make it possible for
individual applications or entire bridges to be presented
4. DISCUSSION in company-specific styles. However, our design system
will still strongly regulate individual actors’ ability to
The presented concept is a work in progress and not a freely design large portions of their user interface.
finished design system. However, based on our
experience so far, we argue that the work shows that it is We have found no equivalent system openly available for
possible to create a maritime design system based on web maritime application development. The only systems we
technology that can achieve consistent user interfaces have found are companies’ internal design systems that
across a wide variety of applications. The cannot be used by outside companies. There are also
implementation of a maritime design system may realise significant differences between our design and the
the goal of design consistency across applications, current dominant web-based design systems. First, the
leading to improved usability when compared with the maritime design system must be very rigid in accordance
current MBS implementations we have observed. with our strong emphasis on consistency. Second, use of
colours must adapt to maritime needs, providing for day
Although the main contribution of the concept is to offer and night palettes and the restriction of specific colours
a pathway for inter-MBS consistency (consistency across to particular functions. Third, a range of maritime-
several systems) and intra-MBS consistency (consistency specific user interface components is required. Fourth,
within a single multivendor ship’s bridge system), we the system must be able to support multiscreen
believe the system can also improve individual environments; and fifth, the system needs to integrate
applications. Such a design system would go much maritime regulations that affect user interface design.
further than current maritime regulations in specifying
how to design applications for maritime use. This would Because of differences between maritime needs and the
be especially beneficial for smaller companies with objectives of current web-oriented design systems, we
limited resources for user interface design. Many of our cannot directly apply these existing systems to the
partners report that clearer guidelines would improve the maritime domain. Instead, we need to adapt these
design quality of their current offerings as well as reduce systems to maritime-specific needs. However, by using
design and implementation costs. web-based systems as a basis for new design, we may
build on the tremendous progress already made in a very
The applications we have designed are self-contained large global industry in order to improve maritime
individual applications that will sometimes exist within a systems.
larger integration system, much like apps on
smartphones. This represents a challenge for the designer
Our current work focuses on graphical user interfaces. 7. APPLE, ‘iOS Design Themes’ [cited 2018
However, maritime user interfaces exist in in shifting and April]; available from:
demanding conditions that affect users’ ability to make https://developer.apple.com/design/human-
use of equipment [16]. Because of this, we argue that interface-guidelines/ios/overview/themes/
maritime design systems will need to include multimodal
and in particular tangible user interfaces [2,16]. We will 8. GOOGLE, ‘Material Design’ [cited 2018 April];
explore such options in future research. available from: https://material.io/guidelines/
Thank you to the Openbridge consortium for contributing 13. LAW, E.L.-C., et al., ‘Understanding, Scoping
to this article. The project is funded by the Openbridge and Defining User Experience: A Survey
Consortium and the Norwegian Research Council. Approach’, Proceedings of the SIGCHI
Conference on Human Factors in Computing
7. REFERENCES Systems, 2009: ACM.
1. MIŠKOVIĆ, D., T. BIELIĆ, and J. ČULIN, 14. MALLAM, S.C. and K. NORDBY,
‘Impact of Technology on Safety as Viewed by ‘Assessment of Current Maritime Bridge Design
Ship Operators’, Transactions on Maritime Regulations and Guidance’, 2018, The Oslo
Science, 2018, 7(01): pp. 51–58. School of Architecture and Design: Oslo,
Norway.
2. NORDBY, K. and A.D. MORRISON,
‘Designing Calm Technology and Peripheral 15. GARDNER, B.S., ‘Responsive Web Design:
Interaction for Offshore Service Vessels’, Enriching the User Experience’, Sigma Journal:
Personal and Ubiquitous Computing, 2016, Inside the Digital Ecosystem, 2011, 11(1):
20(4): pp. 601–613. pp. 13–19.