The challenge of realizing great UI experiences on embedded devices.

A rich UI prototype can be an amazing thing. It can bring an existing product back to life and give it a competitive advantage, or it can be so transformative that it creates a brand new cutting-edge category.

It's easy to capture this UI potential with rich graphics and a storyboard that walks a user through an exciting experience full of animation and life. With this potential comes the power to sell a product, however, the challenge of moving from prototype through development and to product deployment is not to be underestimated. The price that you pay for a rich UI experience is measured in terms of increased product software complexity, hardware requirements, and time.

... with the traditional model including a design team building the script of a user experience, without the commitment to be engaged throughout the rest of the application design.

Storyboard allows a different approach to the development of rich, interactive user interfaces and helps address the challenges of making those experiences a successful reality in cost-effective embedded products.

Engaging the designers with UI graphics creation. 

The first thing that Storyboard does differently is to engage the user experience and design team at the prototyping and ideation phase. Photoshop, Illustrator, Sketch, and other graphic design tools are geared towards graphics creation and simple workflows.

By coupling these tools with Storyboard, a UI design team can:

• Add realistic workflows and interaction to their prototypes;
• Multiple screens and sophisticated animations; 
• And non-linear workflows with simulated real-time data.  

Storyboard embraces change at this stage of development, allowing rapid visual and layout changes and quick assembly of alternative presentations or iterations. Content created can be put in front of real users on mobile, table or commodity hardware without significant engineering investment. That way, teams can gain powerful insights on how the users interact with the prototyped product well before committing other engineering resources.

Moving from prototype to product.

Moving from prototype to product development is easy with Storyboard. The engineering team can be engaged using the same tool as the user experience and design team did. Additional plumbing and specific business logic can be added and workflows can be refined all in parallel with hardware and operating system selection. In a typical UI design and development workflow, one of the greatest challenges is aligning the intent of the UI prototype with the reality of what the product hardware/software configuration is capable of providing. With Storyboard's broad target hardware and operating system support, early prototypes can be used as a reference for the basis of hardware selection... or as an early tuning guide for the user interface itself.

Optimizing the user interface.

Optimizing the user interface. The meaning of this statement depends very much on your role. 

As a UX designer, optimizing the UI design is about experience. How, in the final product context, things look and, more importantly, if they feel right. A bad decision around the quality of a GUI display or touchscreen can have a devastating impact on user experience.

As a software developer, optimizing the UI is about resources. How close does the final product run to the limits of CPU, memory and storage capacities? Can performance be optimized by trading off one resource for another? If the UI is not performing as expected, what visual or runtime changes can be made to make it more responsive?

Regardless of your role, the changes required to the user interface need compromises in one area to enhance another. However, to make compromises, you need to be able to measure value and benefit, and measuring such metrics in a user interface can be... awkward. These compromises can't be made by just one individual team, they require involvement from all aspects of the product development team. And to bring meaning to that conversation you need data.

Storyboard gives you that insight for this optimization.

Considerations for optimizing your user interface:

1. Look at easy metrics like memory consumption and storage costs.
2. Understand your application runtime behavior.
3. Work with UI design and engineering team on informed compromise.
   
   

Start with the easy metrics - memory consumption (RAM) and storage costs (Flash).  From within Storyboard, you can see how the fonts and images that you are using within your user interface design are affecting the consumption of these two resources. The Metrics View provides immediate design time feedback and with a per-screen breakdown, you can identify what high watermark you should expect even before you deploy to your target. Informed compromises can be made regarding size, quality, and composition of images and fonts to be able to fit system constraints.

Runtime behavior is measured using Storyboard Engine's performance logging tools. The performance log takes over from the Metrics View by providing insight around the dynamic execution of the user interface. This tool allows CPU and memory consumption to be overlaid along with visual performance metrics such as redraw rates and resource load times. The GUI design and engineering teams can then work together with this profile information to identify UI hotspots which behavior may need adjusting. It could be a matter of bringing down an animation rate or reducing the total number of discreet visual components by merging them together at runtime. Whatever it may be, informed compromise is based on value measurements that are inline with the user experience intent.

Choosing the UI development framework.

The user experience and rich visual presentation can be a massive product differentiator and can even create a new market category in some cases. Teams need a UI development framework, like Storyboard, that allow them to adjust and compromise their user interface designs in a way that not only satisfies the engineering constraints around CPU, memory and storage, but also maintains a high quality user experience.  

Compromise is a reality that most embedded product teams will face, so make sure your trade-offs balance all aspects of the user experience by using a tool that gives you full insight.

To learn more about Storyboard, watch our demo walkthrough with our Storyboard Field Sales Engineer, Nik, right here.