How 100 Years of Auto UX Benefits Marine Display GUI Design

The automotive industry has existed for more than 100 years, evolving from a self-propelled horseless carriage to a luxury product heavily integrated with technology to become faster, easier to use and safer than ever before.

The marine industry is undergoing similar changes, in which graphic user interfaces (GUI) have evolved from simple analog gauges to complex digital systems that integrate data from multiple sources and perform complex calculations to provide real-time information to the user.

However, marine users are only sometimes aware of these changes and how they affect their experience on the water. They still expect simple operations where they can easily read and interpret information. Marine display developers can learn much by understanding the history of automotive user experience (UX) design when designing displays for boats. There is room for innovation in this market, and there are many opportunities for companies to take advantage of automotive UX expertise to create cutting-edge products that customers will love.

Key Takeaways from Automotive UX

Why reinvent the wheel? Here are some of the key lessons learned from 100 years of automotive UX design:

User-Centric Design

Automotive manufacturers have been designing cars around drivers’ needs for decades, focusing on functionality and ease of use. As time went on and technology became more advanced, auto manufacturers began investing in user-centric design practices that concentrated on creating an intuitive experience for their customers.

For the marine industry, designers can build user-focused products by investing time in researching how boaters interact with their boats on the water—learning their needs, preferences and frustrations through user feedback—to guide design and functionality. By understanding these factors, they can create products that align with customer needs and expectations to make the UX as simple and easy to use as possible.

Safety Prioritization

Designers must always consider how their products can impact users’ safety. When designing new features or redesigning existing ones, careful consideration of how they fit into a captain’s environment before implementation. Displays should provide easy-to-read relevant information and feedback through audio cues or visual indicators without being a distraction. This way, users can quickly comprehend their vessel’s system status and make any needed adjustments.

User-Friendly GUI With Accessibility in Mind

Keep it simple—because complexity is the enemy of usability. The best GUIs are simple, easy to use and accessible to all users. They should be designed with the user in mind, making them intuitive and eliminating confusion by streamlining systems and separating controls. Additionally, using color-coded visual cues or icons instead of text labels can reduce clutter and make the information they present quickly identifiable so the user can react accordingly.

Technology Integration

One thing we can learn from automotive UX is how to integrate technology. In the past, cars had large, inflexible displays that did not integrate well with other systems on the vehicle. Today, car manufacturers are incorporating infotainment systems into their vehicles to control all functions from one interface for a seamless UX. It allows them to use their favorite apps in their cars without switching between devices or systems.

Owing to the COVID pandemic, the last few years have shown a 40% surge in U.S. boat sales. Additionally, boat ownership is skewing younger, with 31% of boat owners being millennials. Millennials have grown accustomed to and expect integrated technologies. Marine display developers should consider integrating their displays with other onboard systems, such as navigation, depth finders, safety equipment and even audio streaming apps so that users can learn and monitor fewer separate interfaces while operating.

When it comes to integrating advanced telematics systems, there are many capabilities to benefit marine users by embracing the power of connectivity. For example, remote diagnostics can enable users to diagnose issues without physically returning to the boat. Over-the-air updates keep vessels current with the latest technology, software and maps, while real-time data sharing enables users to collect and share information about their boats.

Additionally, voice commands, gesture recognition and natural language processing features can simplify and enhance the interaction between users and vehicles/equipment by reducing manual input requirements.

Responsive Display Performance

The UI should be snappy, avoid lag between input and response and provide clear and reliable feedback to the user so they know that their action was registered. This empowers the user to feel more in control of the interface and the boat and makes the entire UX more enjoyable. Alternatively, with less integrated UIs, users can experience an apparent disconnect between the vessel’s hardware and software, making for a poor UX between disjointed systems.

User Environment Consideration

One of the first things a designer will consider is context—where the product will be used, who will use it and how it will be used. Not to overstate the obvious, but this is especially important when designing systems like marine displays with multiple components that must work together seamlessly in use cases exposed to outdoor environmental conditions. The hardware and UI should be designed to withstand exposure to direct sunlight, water, wind, dust, sand and harsh conditions. Any displays should be readable in all lighting conditions, including direct sunlight.

Touch screen displays warrant special consideration for their intended use. Resistive and capacitive touchscreens have different strengths and require several considerations in the marine environment. For example, will users wear gloves when using the screen? What are the optimal brightness and contrast for the screen? Durability of the screen, possible exposure to the elements and screen cost are also factors for designers to bear in mind when specifying and developing their displays.

Altia’s DeepScreen code generator allows designers to quickly generate code for GUI models and run on production-ready hardware in real-world situations, not only speeding up development but enabling designers to test and tweak their UX on hardware in the wild before they go to production.

User Feedback Loops

Customers are essential. Not only do they bring in revenue through purchasing your products, but they offer extensive insight into your product and how it works in the real world. Their feedback is essential when designing a GUI—learning what they need, what features and functionality work, what could be improved plus any use cases and insights not considered during design and pre-production. Collecting user feedback can guide UI design to mitigate known usability issues and ensure GUIs are user-friendly before releasing them to market.

Cross-Functional Collaboration

In addition to working with users directly, taking advantage of cross-functional collaboration between departments creates a holistic approach to development to produce better products faster. Open communication across disciplines—designers, software engineers, systems engineers, hardware engineers, human factors experts and marketing—provides unique insights, including those from Subject Matter Experts who can give valuable viewpoints on aspects of production that might be overlooked in more rigid production approaches.

Altia’s CloudWare™ platform allows collaboration across production groups to remotely evaluate, test and analyze hardware-software stacks with real-time results.

Design Hardware with Flexibility in Mind

The automobile industry’s widespread hardware supply chain shortage can be similarly felt in the marine industry. Today there is a shift in how OEMs are designing their GUI programs due to new hardware releases or lack of availability of hardware previously used in marine products. These OEMs are leveraging GUI design tools that enable their designers and developers to scale their GUI models to different hardware and even different projects. Making the GUI applicable to various displays allows production to use a variety of hardware depending on availability and cost while also future-proofing the UI and scalability across multiple projects, display screen sizes and products.

Companies like Medallion Instrumentation Systems are using Altia’s industry-leading tools to design, develop and deploy embedded GUIs for marine applications—scaling their designs to suit a variety of projects and use cases.

Why Choosing the Right Industry-Leading Design Tools and Tech Matters

Ultimately, the principles of good UX design are universal. Good design is good design—whether it’s for a dashboard or a touchscreen display. As the marine user base continues to grow and diversify, designers should take a moment to consider how they can improve their products and make them more practical, safer and easier to use for everyone. To keep ahead of the curve, they must explore technologies and resources that can enhance the user experience of their products and allow them to create a more comprehensive product offering.

With industry-leading GUI development tools and engineering services, Altia ensures that designers and developers have what they need to get a custom, high-performance GUI to market.

Visit altia.com/get-started and begin to put your best interface forward.

Collaboration Improves Designer-Supplier Process and Final Product

“I want a blue line between these sections,” says the UX designer. Into the spec doc it goes: “add a blue line between these sections to improve UI.” It seems simple enough until several stakeholders and contributors interact with the little blue line at different times in the product development process.

“Will it be sky blue or royal blue?” asks marketing. “Should we make it dotted, dashed or solid?” The team agrees that a dotted, royal blue line is best.

With the internal back and forth resolved, it’s the supplier’s turn to ask for design clarifications. “The resolution of our hardware makes dotted lines look fuzzy unless they’re at least five pixels thick, and the line gets distorted at the bezel if it extends to the edge of the screen.”

Now it’s back to internal discussions. Marketing lobbies for hardware with better graphics to bring the original vision to life. Procurement wants to know if there are savings to be had by using a solid black line. The supplier offers a friendly reminder that this iteration isn’t accounted for by the original contract, so now might be the time to renegotiate.

When this collaboration nightmare becomes more like a recurring dream, it burns resources, delays time to market and ultimately shows in the quality of the product. A streamlined process for product development must clarify communication between stakeholders.

Designer to Supplier – Where’s the Disconnect?

Collaborative frustrations can yield feelings of tension every time there’s a handoff of information or responsibility: especially from designer to engineer and engineer to supplier. The real problem isn’t the other teams but the gap in collaboration that separates the teams. Written spec docs become like one long game of telephone:

  • The market demands features.
  • The designer ideates.
  • The engineer implements a technical plan.
  • The supplier executes the plan to deliver a product.

Stakeholders work at different physical locations, often sharing information about visual designs in a text-based format. The finer details get lost in translation until something as simple as a blue line can get blown out of proportion.

Model-Based Development, Functional Specs and Clear Collaboration

Model-based development gets product designers and engineers on the same page. Advancing from written spec docs to model-based graphical user interface (GUI) development solutions eliminates ambiguity, clarifies requirements and reduces rounds of back and forth. Functional specs—in the form of GUI models—replace written spec documents, so everyone is looking at the same blue line. It’s right where it belongs: between the two relevant sections on the GUI model.

Everybody benefits from not having to discuss the blue line ad nauseam.

Rapid prototyping of GUI models accelerates iterative design among internal teams. Stakeholders in various physical locations can collaborate with tight feedback loops. Usability testing can start earlier in the design process, which eliminates supplier-side iterations down the line. Innovative processes for software design, requirement development and code generation create a ripple effect throughout the entire product development lifecycle.

Software Requirements and Hardware Selection

Model-based development yields GUI models which become functional specs to show what the design will look like once implemented. When the engineers can see exactly how the blue line is supposed to look, they can determine which hardware is required to get the right look.

If a design will only look good in high definition, the supplier should expect to use premium hardware that will perform as expected. For simple GUIs that don’t require a lot of fine detail, the supplier should know to use the budget chipsets instead of trying to upcharge for anything unnecessarily advanced.

Bringing implementation closer to the design phase prevents unforeseen problems at the deadline. If a high-end human-machine interface (HMI) design is likely to strain the hardware’s memory and bandwidth, it’s better to find a solution earlier. For example, a low-power code solution can help prevent memory and bandwidth constraints from becoming problematic.

Internal vs. External Iterations

Even with streamlined collaboration, occasional conversations about blue lines and related topics might be unavoidable. The good news is that those conversations can be brief and conclusive instead of confusing and ongoing. Internal stakeholders quickly align around a functional spec in their internal meetings. Once everything has been accounted for in a fully functional spec, the design is set and ready to go to the supplier.

With this process, any external iterations will be implementation-specific and unrelated to redesign. Delivering a turnkey design to suppliers saves them time and resources—all they have to do is execute a design that has every detail accounted for in the model. This is how products get to market as designed, on budget, and ahead of schedule.

Next Steps: Improving Collaboration to Build Better Products Faster

Model-based human-machine interface design helps designers express their visions clearly. Engineers can see the design, so they know exactly what is required in the technical implementation. Suppliers receive a functional model instead of written instructions and even have clear guidance about how to select the appropriate hardware to execute the final product.

A truly comprehensive collaboration solution offers a string of tools to cover the entire product development process. For example, a GUI editor combined with a code generator creates one collaboration suite to take a project from beginning to end. Nothing gets lost in translation.

Investing in the collaboration workflow can save a project, but the benefits don’t end with that one project. Hyundai took complete control of its embedded display design to make future innovation more efficient, too. Gaining control of the collaborative process pays off in every product development project, especially when working with new suppliers to advance previous work.

Getting Started with Altia

Altia’s graphical user interface design and development environment is built to function holistically, with the GUI editor and code generator working in concert. The combination of these two functions is what closes communication gaps between stakeholders. To ease the transition, Altia’s service team helps bridge knowledge gaps to get the initial project to market on time and under budget.

If your GUI project is already underway but perhaps headed in the wrong direction, all is not lost. The Altia Design Jumpstart Bundle includes the development tools and support required to give your GUI a lift off the ground. Get started today, and let’s make it to market the right way.

Translate »