Build better embedded UIs. Meet Storyboard Suite 5.1.

Earlier this year we introduced Storyboard Suite 5.0, which gave UI designers more control than ever over the aesthetic and user experience of embedded application projects. The release included a lot of new functionality and features for both designers and engineers, especially in Storyboard Designer.

We’ve recently made enhancements and updates to Storyboard with our latest release, Storyboard Suite 5.1. Don’t worry, these updates won’t trip you up much from a functionality perspective. We haven’t moved around the elements in the UI or introduced anything to the workflow that will require you to invest too much time to get up to speed. We’ve tweaked some things behind the scenes to make UI development work a little smoother and faster. More importantly, we’ve extended the reach of embedded application development by introducing support for new platforms and technologies, making it easier to deliver Storyboard applications across markets and hardware.

Storyboard Designer 5.1 updates and enhancements

Here’s what’s new in Storyboard Designer:

  • Eclipse – Storyboard Designer is now based on the Eclipse Framework NEON 4.6.
  • x64 – Storyboard Designer has been switched from a 32-bit application to 64-bit on all hosted platforms.
  • Cloning – When cloning an object, we now check to see if a control with the new name already exists, so that you don’t have to.
  • Keyboard Shortcuts to group and ungroup – We’ ve introduced the concept of grouping and un-grouping through a new action bound to Control/Command + G and Control/Command + SHIFT + G.
  • SCP – The SCP command execution now has the ability to write output to the console.
  • Lua Debugger – Storyboard Designer now queries the Lua debug port number in use and passes it into the runtime.

Increased platform support

With each release, we continue to increase the reach of Storyboard Suite across platforms, making it easier for our customers to work with a wide range of target hardware. Here’s what’s new in Storyboard 5.1:

  • NXP i.MX8 – Take advantage of the powerful combination of Storyboard Suite and the NXP i.MX8.
  • QNX 7.0 SDP swrender and OpenGL runtime – Develop high-performance, innovative, and secure applications for the new QNX 7.0 SDP.
  • ST Accordo5 Wayland OpenGL runtime – Deliver cutting edge in-car experiences with Storyboard Suite for the ST Accordo5.
  • Wind River VxWorks – Combine Storyboard Suite with the safety and security of the VxWorks real-time OS to bring world-class applications to market.
  • Renesas RZ/A1 RGA– Storyboard 5.1 fully supports the Renesas Graphics Architecture (RGA) library to deliver impressive application performance for the RZ/A1 platform.

Try Storyboard Suite 5.1 for yourself! Start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production, on more platforms than ever before.

StoryboardTrialBtn

See us at Microchip MASTERs in Phoenix

Microchip MASTERs is just a couple of days away (August 16-19, in Phoenix, AZ), and we’re busy finalizing, flashing, and packing some really cool demos for you to see and interact with. This show provides a great opportunity to learn and share the best in embedded design and development.

We’ll be there to showcase the latest in HMI user interface (UI) development, including the innovative Storyboard Suite platform that lets designers and developers work side-by-side to create amazing user experiences on a wide range of Microchip platforms. Drop by our booth for a chat and a Storyboard demo.

Multi-market demos – whether you’re in the medical, smart home, industrial or consumer/white goods industry, there’s an application of interest in the Crank Software booth. In advance of the show, you can download demo images for different Microchip platforms here to get a preview of what we’ll be showing. We will also be showcasing a brand new medical demo on the Microchip SAMA5D2 that includes blood pressure, heart rate, oxygen, and temperature monitoring, as well as ECG display.

Storyboard Suite demos – want to see us build a UI while you drink your coffee? Nik, our awesome field applications ninja, will walk you through the entire UI creation process, from Adobe Photoshop to deploying and debugging on a real target.

We’re expecting Microchip MASTERs to be very busy, so drop an email to Nik to set up a time to chat and see Storyboard Suite in action.

Meet Nik

Try it now! Storyboard demo image for the Microchip SAMA5D4

Want to be able to quickly and easily interact with Storyboard Suite applications on your hardware? Our pre-built and packaged demos make it easy for you to test drive multi-market applications designed for specific hardware platforms, letting you experience the powerful controls and smooth animations that create beautiful UIs and rich user experiences.

Microchip SAMA5D4 demo for white goods, home automation, and even the fitness industry!

This image includes everything you need to get up and running on a Microchip SAMA5D4 platform in minutes, offering the following demos:

  • Smart washing machine – drill down into operational settings and track progress through cycles
  • Treadmill – play with speed & incline controls, browse through pre-programmed courses, and immerse yourself in the run with engaging terrain video
  • Home automation – play with temperature controls, check out local weather, and customize lighting throughout the floor plan

Also included are the instructions you need to easily and quickly get the demo running on your own Microchip SAMA5D4 platform.

Download the Storyboard Microchip SAMA5D4 demo image

To try Storyboard Suite for yourself, start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production.

StoryboardTrialBtn

Try it now: BeagleBone Black demo image

Curious to see Storyboard Suite in action on your hardware? Our pre-built and packaged demos make it easy for you to test drive different types of applications designed for specific hardware platforms, letting you experience the powerful controls and smooth animations that create beautiful UIs and rich user experiences.

BeagleBone Black demo for medical, white goods, and home automation

The BeagleBone Black, powered by a Texas Instruments AM335x processor, is a popular platform with a rich development community and is small, easy-to-use, and powerful for creating innovative applications.

This demo image includes the following applications:

  • Smart washing machine – drill down into operational settings and track progress through cycles
  • Medical – browse through typical patient diagnostics, electronic health records (EHR), and security verification
  • Home automation – play with temperature controls, check out local weather, and customize lighting throughout the floor plan

Also included are the instructions you need to easily and quickly get the demo running on your own BeagleBone Black platform.

Download the Storyboard BeagleBone Black demo image

To try Storyboard Suite for yourself, start your free trial now and see how easy it is to create beautiful embedded UIs from concept to production.

StoryboardTrialBtn

The future of UI design for embedded systems

It’s time for embedded user interfaces to catch up to the rest of the world.

We know this already, as you can’t read an article or go to a conference without someone saying “our users want their smartphone experience in their car and on their fridge!” The allure of blending powerful features and beautiful user experiences (UX) comes too easily, and embedded systems are found lacking.

So why are we falling behind and what market forces are driving us to catch up?

With less power comes more responsibility

There’s a common belief in the sliding scale of hardware-to-UI-capability ratio, in the sense that the smaller the platform, the less you can do with the UI. While true in a strictly functional sense—if you don’t have 3D hardware acceleration, you can’t use 3D hardware acceleration—it’s often the case that the application architecture, graphics library limitations, and suboptimal performance result in UIs that look like this:

Example of old UI design

Instead of this:

Example of good UI design

We know this has to do with not having enough development time and resources to squeeze as much out of the hardware as possible but users are left scratching their heads as to why its easier to operate a smartphone that does fifty things than a dishwasher that does only one thing.

It certainly doesn’t have to be this way. Not only are CPU and GPU hardware capabilities increasing, right down to the MPU, UI toolkits are getting better. Check out the recently announced ARM Dynamiq processors and Mali-G72 GPU, or the first MCU with an integrated 2D GPU and integrated DDR2 memory from Microchip Technology Inc. We’re being offered more speed and capability than ever before and with less power consumption and heat.

And it will only get better. Embedded processors have traditionally been slow to adopt cutting-edge components, being more concerned with power, heat, and longer in-service times. But with the Internet of Things, smart homes, connected cars, and a host of other trends that have become reality, the demand for faster, more capable devices by both consumers and industry is just getting started.

So, what can embedded UI teams look forward to in 3 to 5 years? A look at the forces transforming the technology world right now provides the answers.

UI design is equal to code

The 2017 Design in Tech Report, presented at SXSW Interactive, offers an analysis of design trends changing the face of tech. Three points stand out as particularly relevant for embedded systems, by the very fact that users are demanding more out of their UIs and that more customers are on their way. The IoT market alone is expected to grow to 75.4 billion devices by 2025.

Perhaps the biggest change is that designers, or at least the unique skillset of UI design, is becoming a priority for development teams. Developers know how to create, test, and optimize apps, but it’s the lack of a designer’s knowledge that results in so many of the “traditional-looking” UIs that are still being churned out by embedded teams.

Only by making the job of the designer equal to that of the developer can products be made beautiful, useful, engaging, and functional—qualities that drive adoption and brand loyalty. The report points out that not only have Facebook, Amazon, and Google grown their art and design personnel by 65 percent in the past year, two out of every five designers are now involved in code development.

We’re seeing this with embedded software teams as well, as bringing a designer’s mindset into the developer’s machine is the surest way to achieve UX and commercial success.

UI design must be inclusive

“Adopting an inclusive design approach expands a tech product’s total addressable market.”
2017 Design in Tech Report

The report observes that, historically, technology products weren’t designed for a broad range of users, rather they were built to be used by the people who created them. This exclusivity has softened over time, of course, with a whole industry devoted to user research and feedback, but again, smartphones continue to move the UX goalpost for embedded. Why can’t every device operate with just one button, a simplified set of graphics, and be understood by everyone around the world?

Users don’t care that your graphics library doesn’t support pixel shaders or hardware acceleration. Embedded systems are highly technical but cannot survive by serving only a technical audience, especially as they sell into newer consumer-dominated markets all over the world. UIs must be thought out, designed, and built for not only maximum usability but inclusivity as well—whether it’s geographic, cultural, or socioeconomic—to satisfy global user expectations.

Although originally intended for the web, the World Wide Web Consortium’s guidelines for accessibility, usability, and inclusion apply equally to embedded systems because, at the end of the day, all our users are human.

“Inclusive design, universal design, and design for all involves designing products, such as websites, to be usable by everyone to the greatest extent possible, without the need for adaptation. Inclusion addresses a broad range of issues including access to and quality of hardware, software, and Internet connectivity; computer literacy and skills; economic situation; education; geographic location; and language — as well as age and disability.”

One major example of a company tackling this head on is Microsoft, check out their inclusive design toolkit.

The key to inclusivity is designing UI elements that are simple and unambiguous while eliciting an emotional connection. In this way, your UI is less frustrating to use and more likely to be used.

To design embedded UIs that include, rather than alienate, as broad an audience as possible, it’s the designer to the rescue. Unlike developers, they have the specific techniques and experience with distilling diverse personas into a usable design, so your product ends up with better UX/UI that also happens to be easy to use by everyone.

The need for supporting this diversity has found its way into the makeup of design teams, as the Design in Tech Report shows:

UI design unlocks value

“Design tool companies and design community platforms occupy new positions of value for tech.”
2017 Design in Tech Report

Software like Adobe Photoshop, GIMP, and Sketch are just a few of the many examples of design tools that have democratized graphic design, lowering the barrier to UI excellence, and reducing time to release (does anyone do back-of-the-napkin sketches anymore?).

The same applies to embedded UI tools. Our developers have mostly moved away from using graphics primitives to use mid-level libraries, such as OpenGL and Direct3D, with higher-level platforms such as Qt gaining popularity. With these pre-packaged, easier to use toolkits, building UIs has also become democratized. Anyone can take a Qt widget and run with it.

The problem is, to unlock the maximum value out of all that design effort, you need to go one step further and not get locked into how pre-packaged libraries look and behave.

“Every dollar invested in UX brings 100 dollars in return. That’s an ROI of a whopping 9900 percent.”
Good UX is Good Business: How to Reap Its Benefits, Forbes

Going straight from the designer’s tool to deployment, with little to no modification of the design, is the only way to ensure your product offers the best UX/UI. Otherwise, development tradeoffs (software limitations, pre-canned widgets, resource constraints, power, time, etc.) will chip away at your optimal experience.

Storyboard Suite is one such tool, with built-in parallel workflows between the designer and developer to reduce the common frustrations and friction between them. By working side-by-side, the designer can focus on creating the best UX/UI possible, the developer can focus on the back-end, and the whole application is created, tested, and deployed within one single environment. The app also happens to run on a highly-optimized engine tuned for a variety of platforms and architectures.

This video from last year’s Apple WWDC event sums up why smart design matters:

“When you put so much hard work and creativity into an app, you really want it to reach people. But ultimately, everyone will experience your app in their own way and if you think about the millions of people who could use your app, you have to consider how diverse their perspectives are.”

The key statement here is that we all want our products to reach people, in terms of both usability and market share. Using collaborative tools that make design equal to code is just the way to do it.

To see how easy it is to put design into action, try the sample applications included in our free 30-day Storyboard Suite trial: