User Interface Design for Small Devices

Keeping up with Embedded Development—The New User Interface

With the ubiquity of touch screens, user interfaces have become much more than just a control panel for an embedded device—they are a new way of interacting with technology, and even more, a defining element of a company’s brand experience.


  • Page 1 of 1
    Bookmark and Share

Article Media

From medical devices to in-car infotainment touch screens, consumers now rely on and expect the ease and convenience of intelligent embedded systems. As a result, embedded designers must transform embedded technology by incorporating new, cutting-edge user interfaces to compete and win in the marketplace. The next wave of successful electronics demands streamlined, intuitive and easy-to-operate user interfaces that leverage the latest touch technology and hardware interfaces—without slowing the development process or increasing costs of goods.

To develop appealing and functional interfaces that will get their products recognized quickly, organizations must shift their current thinking and typical practices. First, embedded developers have to understand and define the user interface that will appeal to their audience and allow the user to experience the fullness of the product, technology and brand. Second, and perhaps most critical, companies have to change their internal processes and tools, integrating graphic designers into the product development process to create and refine the user interface as embedded software developers focus on the system. Lastly, graphic designers must be able to quickly deploy and test a user interface during the development process in order to easily evaluate the interface and make changes to it before the product is complete.

This embedded design evolution highlights the need for a new approach that puts user interface development as a priority alongside system functionality. Engineers and graphic designers need new tools to develop user interfaces for their embedded devices and ultimately help organizations to understand the new user interface and to adapt teams and processes to be integrated and efficient. They must also be able to quickly prototype and test user interfaces that will steer an end product’s marketability.

Understanding the New User Interface

Consumer devices like Apple’s iPhone are driving customer expectations to new heights, and the demand for an intuitive, aesthetically pleasing, easy-to-use interface for embedded devices will only continue to increase as more consumers adopt devices like smartphones into their daily lives. In a report last February, Forrester predicted there would be 1 billion smartphones in the hands of consumers by 2016.

Pervasive consumer smartphones lead to a strong desire for rich interactive displays, and the ever-decreasing price of LCD and touch screens allows this desire to become reality. Adding an LCD and new user interface to an embedded device is an effective technique to re-brand older product lines or differentiate a new product when it enters an existing market.

A product’s user interface is more than just a set of assorted images on a screen. A product has an operational flow associated with it that is the sum of the graphical interface, the presentation of the data, and the methods by which the user interacts with the system. The heart of the user experience is not just the technology inside the embedded device, but the way it is graphically presented to the user (Figure 1).

Figure 1
Traditionally, a user interface was required only to be functional. Products that previously had only rudimentary user interfaces like this household thermostat now require screens similar to smartphones just to be accepted in the market.

While it must be intuitive, the user interface is not a single piece of software that an engineer can easily write a specification for and implement. The user interface has a look, and more importantly a feel that creates the entire user experience. It takes time to be tested and iterated. Embedded device developers need a system that ties graphic designers directly into the tools that the engineers are using, so that graphic designers are no longer left out of the product development process. 

Adapting Teams and Processes to Integrate the User Interface

Internal graphic design and engineering teams must be streamlined and efficient in order to get quality products to market quickly. Product development can slow as different groups face unique challenges with the user interface. For example, graphic designers may have concerns about usability, interface consistency, graphics quality and overall user experience while the embedded developer’s concerns tend to focus on processor usage, memory footprint, code architecture, maintainability and reuse. Disparate teams and the lack of an integrated process thwart the development process and compromise the product’s ultimate appeal.

Embedded system developers and user interface designers are often disconnected, working in parallel silos. With a traditional handoff process, graphic designers draw screens, hand them off to engineers, and don’t see the screens they designed until the final product is ready to be released. Often, the engineer encounters challenges and solves them by changing the user interface, compromising its look and feel. At this point, the user interface designer makes changes to remedy the problems. Though necessary for the product to ultimately succeed, the results are extremely costly and involve time-consuming, back-and-forth changes.

In a process with an equally negative result, user interface designers use desktop solutions that the designers are familiar with to design their user interface, and try to force-fit the solution into a resource-constrained device. This approach offers an appealing workflow for the designers, but embedded device developers lose the user experience when the resource-intensive solution requires more power than what’s offered by the embedded target created by the embedded developer. The result is a slow, frustrating user interface for the consumer.

Ideally, graphic designers could use the tools they are familiar with, such as Photoshop and Blender, and have a process that integrates easily into the embedded development cycle. Designers could create static content with familiar tools, easily add animations to tie content together, simulate the final product, and involve the embedded developers in the whole process. In this case, designers could use a set of tools that not only expose the changes of user interface-specific elements in a visual manner, but also integrate with the main collaboration hub of the embedded development life cycle, the source code repository (Figure 2). Using tools that can expose each change of the user interface at a level that is easily understandable to any stakeholder allows graphic designers and embedded developers to work in parallel.

Figure 2
In a better solution, graphic designers would be part of the engineering process, able to seamlessly integrate design files into user interface development.

Stakeholders that fully collaborate achieve early discovery of issues in user interface behavior, shorten product development times and improve user experience in the final product. Constant communication with open platforms and full collaboration turns a traditionally long feedback cycle into an interactive and on-the-fly one, without slowing or hindering product development.

Embedded developers and graphic designers must seek an approach where each can work in an environment that they find familiar, use the tools that they are comfortable with (like Photoshop or a model-view-controller paradigm) and make them most effective. Organizations should foster a collaborative development process so that graphic designers create the user interface in parallel with the embedded device. The ability to merge content, display changes and resolve conflicts is a key aspect of successful distributed software development teams.

Prototyping and Testing the User Interface

Quickly deploying and testing is at the core of a successful user interface. However, because of the traditionally fragmented processes described earlier, designers often wait until the embedded device is complete to begin working on and testing their interface, because earlier testing reveals incompatibilities as engineers modify and enhance the device during development.

To get products to market quickly, graphic designers need a reasonable, quick way to test their user interfaces during the development process. They need to develop and test the prototype product before final hardware and OS have been created. To facilitate this process, designers need new functionality like the ability to prototype transitions between Photoshop screens and see how they would look on a deployed embedded target without waiting months for new code.

Using common embedded targets, graphic designers can get an accurate idea of the look and feel of their user interface (Figure 3). They also can experience the amount of time it takes to load screens or have icons respond to touch. Designers often overlook these variants when interfaces are only deployed to desktop CPUs, with enough RAM that interfaces run deceptively smoothly during the testing phase, and then extremely slowly on the final embedded target. Issues such as incorrect image color depth or the use of extraneous alpha channels can have a significant performance effect on systems where computing resources are already being stretched. With the ability to prototype easily, graphic designers can troubleshoot almost all challenges immediately, even before the embedded device they’re working on is complete.

Figure 3
New technology now allows designers to prototype devices and deploy them onto common handheld embedded targets like smartphones to see how the interface actually looks and feels in the hands of a consumer.

Graphic designers and embedded developers must seek a system that will prototype easily. They need the ability to highlight design errors specific to the performance and operation of the user interface in the embedded environment early in the design cycle to adjust the design accordingly. In addition to generating warnings about performance-impacting design decisions, the system should allow rapid and scriptable deployment of a user interface design to a particular embedded target configuration. Similar in nature to the compilation phase for source code, this will provide a platform-optimized (CPU, OS, render and display configuration) solution using the same input design elements.

Finding a System to Create Your New User Interface

By understanding the importance of the new user interface, aligning teams and communicating properly, and integrating accurate and useful user interface prototypes into the design process, embedded device developers can create industry-leading user interfaces and still get their products to market first.

Embedded developers and graphic designers must seek one platform for the entire user interface process—from prototype through development to deployment. Designers should be able to create a true user experience. They need to move quickly, by importing assets directly from Photoshop and creating complete application user interfaces without having to develop the code behind them, and prototype to common handheld devices to check for accuracy at any time.

One of these tools, Crank Storyboard Suite, provides a user interface environment that empowers graphic designers to create innovative user interfaces and participate actively in product development. The software helps graphic designers align their involvement with the rest of a product’s software development team. Designers can use the software to easily prototype and deploy their interfaces to the Android platform, allowing them to immediately see the way their designs will look and feel to an end user, and quickly make adaptations, resulting in products that have a refined, effective, appealing user interface that enhances a product. 

Crank Software
Ottawa, Ont.
(613) 595-1999