Displays

Adding Value and Engagement to IoT Products

Displays offer an intuitive and engaging way for users to interact with your products. Including a display in your IoT products significantly increases their value to the customer. Whether it's conveying information, guiding users through tasks, or enabling customization, a display elevates the user experience, making your IoT products more valuable and desirable. Discover the transformative power of displays to unlock new levels of customer satisfaction and engagement in your IoT products.

Benefits of Displays

A display allows your product to deliver a truly limitless user experience, free from the constraints of traditional physical buttons, dials, and lights. The unparalleled flexibility of an on-screen interface allows you to include many more capabilities in your product. This empowers you to maximize the potential of the underlying hardware. Unlike a traditional physical interface, an on-screen interface can continue to improve even after your product leaves the factory.

Customers value products that they can understand. The goal is to deliver IoT products with a simple user experience that gives your customers access to unexpectedly powerful capabilities. A display is essential to achieving this goal.

Here are just three of the ways that a display simplifies the user experience:

  • Displays enable your products to operate standalone, eliminating the need to pair with a computer, phone, or tablet. This ability to interact directly with an IoT product directly eliminates many common sources of complexity and confusion.
  • Just by glancing at the display, the user is immediately aware of the product’s status and any alerts that require their attention. From network connectivity issues to hardware maintenance issues, a display is a clear and efficient way for an IoT product to deliver critical information to the user.
  • Staying up-to-date with the latest software ensures that customers have the latest product features and optimizations along with essential security updates. A display alerts the customer when updates are available and makes it easy for them to apply updates promptly.

A display can also expand the market reach of your IoT product. A single product SKU can include support for a dozen languages or more, allowing it to be used by customers around the world. Having a single SKU streamlines development, reduces costs, and simplifies logistics.

Users like to customize their products – adjusting how they look and behave to match their personal preferences. Displays empower your customers to personalize their user experience by customizing colors, themes, backgrounds, and more. You can even empower your users to install third-party software that delivers new features, customizes existing behaviors, and connects to different cloud providers, giving them unparalleled control over their IoT experience.

Consider displays as an alternative to traditional interfaces. While physical buttons and lights have their place, displays offer a direct and efficient way for customers to interact with your products without the need for additional components.

Eliminating external interfaces, streamlines your user experience, providing a hassle-free interaction that caters to the preferences of your customers.

Embrace the power of displays and unlock a world of possibilities for your IoT products. Elevate your brand, simplify the user experience, expand your market reach, and deliver a highly customizable interaction that captivates your customers.


  • Get Moddable Development boards with integrated displays

Choosing a Display Technology

To deliver the optimal customer experience, it is important to select the best display technology for your IoT product. There are many different choices, each with their own strengths and weaknesses.

IPS displays have emerged as the most popular choice thanks to its excellent price, superior color quality, and excellent viewing angles. They are available in sizes as small as a thumbnail and as big as a smartphone, in a variety of different shapes – even as a round display. IPS displays can redraw the display very quickly, delivering perfectly smooth animations at 60 FPS. IPS displays usually have a backlight that can be adjusted for different view environments. It is common to pair an IPS display with a capacitive touch sensor to provide an interactive experience similar to a smartphone.

ePaper, sometimes referred to as eInk, is another popular display technology. ePaper displays excel in products where the display is updated infrequently and low energy use is important. With no backlight, ePaper displays blend elegantly into their surroundings. ePaper displays are slower to redraw. While early generations of ePaper technology redrew the screen too slowly for interactive use, newer generations redraw much faster. As a result, many products combine an ePaper display with a touch sensor to deliver an excellent interactive user experience.

Reflective memory displays are a more specialized display technology that also boasts exceptionally low power consumption. Unlike ePaper, however, they have a very fast screen redraw time allowing for the same responsive interactions and smooth animations found on IPS displays. Reflective displays are not typically used with a touch sensor, so a jog wheel, 5-way control, or other input control is used instead.

Ultimately, the choice of display technology is yours to make based on the specific requirements of your IoT product. A standout feature of the Moddable SDK is that it supports all of these display technologies with the same software APIs, accelerating the exploration of different displays during the prototyping phase. It also makes it practical to support a product line that includes multiple display technologies across different models, delivering adaptability and scalability.

Rendering a Modern User Experience

Making compelling use of the display on your IoT product requires robust graphics software capable of rendering the many different elements that make up a modern user experience. One hallmark of a modern user experience is sophisticated, responsive animations. Not only does animation contribute to the look and feel of the IoT product, it also makes the experience easier for the user to follow by providing a smooth visual transition of elements. Rendering these animations requires a graphics engine that handles updates quickly, integrates with a timeline API to synchronize and sequence animations of multiple elements, and that supports easing equations so movements have a realistic feel.

Text is an essential element of the user experience, responsible for much of the information conveyed by the IoT product to the user. The graphics engine needs to render anti-aliased text efficiently and support compressed fonts to minimize the storage space needed. For a professional look and to make optimal use of a small display, kerning in the layout is helpful. Support for Unicode is essential to be able to render text in any language, as well as special symbols.. A modern interface typically incorporates several fonts to reflect the manufacturer’s brand and optimize text for different purposes. Most fonts are available in either OpenType or TrueType formats, so a graphics solution must either be able to import these fonts or render them directly.

IoT products may not have the power to render common graphic file formats like PNG, JPEG, and BMP formats. However, the designers creating the user interface of the IoT product will deliver their assets in these formats. A graphics solution needs to automatically import these formats and optimize them for use on the IoT product. This makes updating visual assets quick and hassle-free so teams can rapidly iterate on the design.

Many IoT products have unique rendering needs whether that is to achieve branding goals, to deliver a particular kind of user experience, or to support an essential hardware feature. A one-size-fits-all graphics engine can’t support all of these different needs. A graphics solution should support extensions to integrate specialized rendering capabilities that render with the same speed and memory efficiency as built-in graphics operations. Specialized graphics extensions can include:

Card image cap

SVG

Scalable Vector Graphics (SVG) for infinitely resizable shapes

Card image cap

QR Code

QR Code to link from the IoT product to the Web

Card image cap

Animated GIF

GIF to play animations rendered on a computer

Card image cap

Live Preview

Live Preview for IoT products with an integrated camera

Card image cap

Scalable Text

OpenType fonts for crisp, stylish text at any size

A standout feature of the Moddable SDK is its display technology independence. The SDK's foundation graphics APIs and tools seamlessly integrate with any display solution, offering unparalleled flexibility. This feature simplifies the exploration of different displays during the prototyping phase, enabling developers to experiment with various options. Moreover, it facilitates the support of product lines that employ multiple display solutions, providing adaptability and scalability.

Building your User Experience

Great graphics software is necessary for building the user experience, but it isn’t enough. To manage the many diverse features of an IoT product, a user interface framework is essential to organize the different screens in the experience, navigate between them, and to render them efficiently.

JavaScript is an extremely popular language for building user interfaces for computers, phones, and tablets, and there are many different JavaScript frameworks available. To build user interfaces in Embedded JavaScript, Moddable provides the Piu framework. It brings together familiar ideas like cascading styles, declarative layout, and templates in a framework that is easy to work with and extremely efficient on modest embedded microcontrollers.


Cost is no longer an issue

Cost has historically prevented the designers of IoT products from choosing to include a display. The expenses associated with a large screen, a microcontroller with sufficient memory to drive it, and potentially additional hardware graphics acceleration or a GPU could easily add $20 to $30 to the BOM cost, and much more to the retail price. Thanks to advances in software and design, this is no longer the case. A small display now costs just a few dollars. It can be efficiently driven by a general-purpose microcontroller (MCU) using only a few thousand bytes of memory eliminating the need for specialized graphics hardware and excessive memory. Notably, the same MCU can also be used for communication with BLE, Wi-Fi, or Matter, maximizing the value of the MCU's cost.

The idea that “bigger is better” has long driven the selection of displays for IoT products. New approaches to UX design, such as gestures, allows smaller displays to deliver tremendous functionality and better ergonomics at a fraction of the cost of a larger display. To achieve optimal display performance on low-cost hardware, a well-integrated and optimized implementation designed specifically for these types of systems is essential.

Text input

While no one is going to compose email on an IoT product, many user experience challenges can be solved by being able to enter a small amount of text. Users of a product may need to enter a password, account names, the names of rooms in their home, or configurations. Using clever UX design, even a small display can be used to enter short text strings quickly and accurately.

One approach is Moddable's innovative expanding keyboard that is familiar but automatically grows and shrinks the keys as the user types. Other approaches are possible depending on the display and input capabilities, for example integrating speech recognition that uses the display for feedback.


Summary

A display increases the value of your IoT product by making it easier to use and more powerful. The Moddable SDK provides an innovative solution for incorporating displays into IoT products cost-effectively. With its optimized implementation, developers are empowered to deliver a modern user experience on low-cost hardware . Gone are the days of expensive screens and specialized graphics hardware, as the Moddable SDK enables the use of small, affordable displays driven by a general-purpose microcontroller. By building with Moddable SDK, developers can create visually stunning user interfaces, capitalize on the cost efficiency of MCUs, and maximize the value of their IoT products. Experience the power of the Moddable SDK and elevate your IoT products with captivating displays that deliver an exceptional user experience.