PAPER | UX design
TBA Group, The Netherlands
Bay view is a long-adopted design pattern that shows vessel discharge and load plan in spatial visualisation view. However, this paper-originated pattern results in missed opportunities for better usability in the digital context. Paper-based thinking creates information overloading and doesn’t allow interactivity, which is useful to reduce the amount of information and to configurate different visual indicators depending on the case. Web accessibility was not a concern for paper-based vessel planning as it did not exist at the time.
The vessel planning module in TOS supports one of the most information-dense activities on the container terminal. The vessel planner needs to specify optimal container placement on the vessel and operation instructions for rapid and systematic discharging and loading. Attributes such as weight, size, POD (port of discharge), special characteristics (hazardous, refrigerator, etc), and current position in the yard must be taken into consideration to maximise the use of the available capacity and crane moves per hour while ensuring safety. The software module should assist the user to achieve these goals effectively and efficiently.
It is common in applications to use the same bay view module for multiple purposes from data entry, discharge plan, load plan and so on. However, it makes the view information-overloaded because the user needs different information for different workflows. TBA Group’s approach adapts the use of the same bay view framework while configuring the information overlay for different workflow(s). The most relevant workflow-focused approach for discharge planning regarding colour coding is according to move type rather than POD. Most of the containers will be discharged from the current port, so showing the POD as default colour coding doesn’t provide additional value to the user (see Figure 1). In this case, one example of a workflow-focused approach is distinguishing the discharge containers and the remain-on-board containers using different colours. This reduces visual noise (Figure 2). Making use of appropriate colours accordingly will in turn help the user stay focused without visual distractions.
Figure 1: Bay view with POD colour coding.
Another example of a workflow-focused approach is the sequence line visualisation for displaying discharge sequence (Figure 2). The traditional solution for communicating sequences through a sequence number is rather complicated ̶ the need to locate and read the connections between numbers require an abundance of cognitive efforts. It gets even harder when the sequence of discharging is non-standard, such as for some of the OOG (out of gauge) containers. While complimenting the use of the sequence number, the sequence line takes on an intuitive way of displaying the relevant information. While making it easier to spot errors, it enables users to turn on or off the sequence line according to workflows.
Figure 2: TBA’s Bay view (discharge) with sequence line.
The traditional solution for communicating sequences is through the sequence number(s). Locating, reading, and connecting the relationships of numbers require more cognitive efforts than recognizing shapes. It gets even harder when the sequence is non-standard around some OOG (out of gauge) containers. A sequence line is an intuitive way to display sequence complementing the use of sequence numbers. It also makes spotting errors easier. In addition, the users can turn on or off the sequence line based on their workflows.
The paper-originated bay plan visualisation forces more layers of information in a limited space.
Different visual indicators are used to communicate different pieces of information such as a container’s dimensions, and ISO code . Not only are they clustering the view, but also often required to decode the meaning. An example is an indicator for a reefer (refrigerator) container (Figure 3), which is often depicted with a cut-corner in the vessel plan. It would require training for the user to grasp the relationship between the symbol/icon and the meaning of the symbol. This is because there’s no connection between the concept and its visualised representation.
At TBA, we see the benefit of applying meaningful symbols in our software design approach, which is the intuitiveness in usage. For instance, reefer containers always need to be plugged into a power source for temperature control. Using a plug icon to indicate the requirement of a reefer container is easily understandable without extra training, hence using a meaningful symbol enhances the user’s experience. The direction of the plug icon is used to indicate the direction of the plug location of the container slot, and this enables another layer of information without requiring additional space within the icon.
Figure 3: Reefer indicators.
Accessibility seems like a truism for every software but has been overlooked until recent years. An obvious example is text accessibility which consists of two parts: font size and text background contrast. Colour-coded background is commonly used in bay view with text overlay. Therefore, text accessibility is important for the information’s readability. The colour palettes and font combinations are carefully selected to meet the WCAG 2.0 AA standard in TBA’s software development (Figure 4) [2,3].
Figure 4: Text background contrast comparison.
Bay view’s long presence makes room for more innovative and contemporary usability to improve the user’s experience, which is what TBA Group’s software embodies. This paper proposes the adaptation of same bay view framework while configuring the information overly for different workflow(s). This paper also sheds light on workflow-based approaches, such as using colours accordingly to reduce visual clutter and using sequence line visualisation to avoid needless cognitive efforts for the user. TBA sees the benefit of applying intuitive strategies to exemplify the functionalities of the usage of software to achieve maximal output in productivity and to reach optimal results.
This paper showcases the benefits of using indicators through intuitive measures with the aim of tackling visual overload. TBA’s innovative software targets what makes processes simple for the user, and through the workflow-based approach TBA encompasses, the goal is to streamline what could be a complex procedure. Rather than learning new software implications, the user is then able to shift focus elsewhere to enhance productivity and reach a desired endpoint.
TBA developed a workflow-based approach to utilise modern interaction design techniques and accessibility standard. To retain the user’s attention on the task and reduce information overload, TBA’s aim is to boost efficiency and usability while minimizing the risks of human error.
 International Organization for Standardization. ISO. (2020, January 9).
 Web Accessibility Initiative. (2008, December 11). Web Content Accessibility Guidelines (WCAG) Overview. Web Accessibility Initiative (WAI).
 WCAG 2.0 AA standard requires text to have 4.5:1 contrast ratio with the background when the text is at least 18 point (if not bold) or at least 14 point (if bold).
Suyu is Senior UX Designer at TBA Group working on the company’s new terminal operating system (TOS). She thrives to make her mark with purposeful data visualisations for complex workflows as well as balance user needs and business goals into accessible, intuitive, and delightful experiences. Suyu holds a BSc in Interaction Design from ArtCenter College of Design and is pursuing an MSc in Information Systems from University of Amsterdam part-time alongside her job.