Close
Enter your
text here

HTML5 User Interface for AV Systems

As discussed in Uncovering the Why Behind HMTL5 in AV Control, there are many reasons why the world of AV control is turning to HTML5 web technologies for user interface design.  While there are significant upsides to this shift, the transition is not going to be easy for traditional AV programmers that are not actively embracing software development and modern programming languages. So, what goes into building HTML5 user interface for AV Systems?

To review, HTML5 is made up of three kinds of code:  HTML, which provides the structure; CSS (Cascading Style Sheets), which handles the presentation; and JavaScript, which makes things happen.  Working together, these three components deliver an interactive user interface.

Since HTML, CSS, and JavaScript represent independent languages or skills that need to be adopted, it should not be surprising that the feat of being proficient in HTML5 requires programming know-how and/or a significant investment in learning.  Additionally, a real trade off to the versatility of an HMTL5 user interface (UI) is that it can be tedious and time consuming to create.

An effective WYSIWYG (What You See Is What You Get) editor would need to convert custom visual elements to complex HTML, CSS, and JavaScript code, while overcoming the inherent challenge of variations in rendering by different browsers thus making it an impractical solution.  Unlike with manufacturer-based, proprietary solutions that use software to graphically design a user interface, an HTML5 WYSIWYG editor presents limitations and challenges that add to what can already be a daunting effort.  This represents the most significant shift in mindset and approach that needs to occur for AV user interface design.

Rather than thinking about designing visual elements on canvas, HMTL5 involves writing code to create the graphical look and user experience.  For webpages or frontend applications that follow a stock design and flow, the impact of using code to generate a user interface design may not be significant.  However, developing a user interface for an integrated AV system is different.  An AV user interface is comprised of a collection of dynamic elements intended to interact with the user to stimulate selection, request input, provide feedback, update status, and guide an experience.  Specific elements like buttons of various types, bar graphs, meters, keypads, text displays, timers, and messages that are common to an AV user interface and less often found on a traditional webpage.

While over the years, there has been a shift in demand from fully-programmed AV control systems to configuration-based approaches, and, client expectations have been reigned in from completely customizable, “anything is possible” solutions to more constrained, boundary-limited options, the functionality requirements of an AV control system can be still be fairly varied and custom.  A good example can be found in solutions geared toward accommodating users of varying needs or skill levels, matching a standard look and feel specific to an organization, or providing a fully custom design.  A shift to HTML5 will require considerably more time, effort, and investment to satisfy these specific requests. On the flip side, when stricter budgets and schedules need to be maintained (more typical for the average project), restrictions will need to be imposed to manage expectations for customization options.

As HTML5 grows to be the norm, it will be imperative to shift from the traditional mindset and approach to AV user interface design to more of a software development style structured process.  The days of touchpanel layouts being designed ad hoc, with limited foresight and planning, and relying on the luxury of making modifications on the fly, will become extinct.  A user interface design must now be thought of as a product of complex code where requirements are identified, the scope work is well-defined, and the deliverable is provided as specified.  Modifications or feature requests will need to be treated as updates and scheduled for future revision releases.

Understanding implications like these involved in the adoption of HTML5 for AV user interface design will be critical in helping to minimize the challenges and smooth the transition from legacy solutions.  Here are some additional guidelines and tips that should also be considered:

  • Extra effort and care is required in planning and approving user interface designs.  Changes will be difficult and costly after the fact.
  • Field modifications, no matter how small, will require someone who knows HTML, CSS, and/or JavaScript to complete.  While text changes may not be extensive, changing a button size or position will be involved, and changing the look or flow of a design are major.
  • Although HTML5 designs are responsive, allowing them to adapt to various size requirements and environments, it is important that a design is optimized for one or two variations.  Differences in look or functionality will exist with different parameters.

As we continue the journey toward a new norm for AV user interface design, adjustments in both skill set and thought process will need to be made along the way.  The result will be a fresh, modern look built on a universally adopted technology.

In subsequent posts the following areas will be covered with regard to HTML5 solutions for AV user interface design:

  • What HTML5 solutions are available to consider for AV control systems
  • How to proceed with making the switch to HTML5

For questions or additional information on specific needs, contact projects@controlconcepts.net.  We’d be glad to see how we can help!