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?
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.
- 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 firstname.lastname@example.org. We’d be glad to see how we can help!