Visit us at NXP Connects Santa Clara

Crank Software is proud to be a sponsor at NXP Connects Santa Clara, June 13-14. With a wide range of technical sessions, hands-on labs, and networking opportunities, NXP Connects provides a great opportunity to learn about the latest innovations in IoT solutions, automotive technologies, and more.

See intelligent HMI demos in the NXP Connects Technology Lab

If you are planning to be at NXP Connects, visit Nik in the Technology Lab to see HMI demos that span home appliance, consumer electronics, and automotive applications on a range of NXP i.MX processors, including the following:

  • i.MX 8M – automotive digital cluster, IoT 3D smart home, and movie kiosk
  • i.MX 7ULP – fitness tracker
  • i.MX RT1050 – coffee machine

We would be happy to chat with you at the show to give you an impromptu Storyboard Suite demo. Nik Schultz, our talented field applications guru, will be on-hand to walk you through UI creation, from Adobe Photoshop to simulation.

Meet Nik

 

Creating innovative user experiences for VxWorks platforms

Crank Software Storyboard Suite support for Wind River VxWorks

Powering billions of intelligent products, Wind River VxWorks has long been a trusted real-time operating system (RTOS) for deploying embedded products and systems. With wide processor support, broad connectivity, and proven real-time performance and reliability, we are excited that VxWorks is a supported platform for bringing world-class Storyboard Suite applications to market.

At Embedded World 2018, we showcased an innovative programmable full-color dashboard display, built by Bosch Motorsport and running on VxWorks. The DDU 10 user interface was developed using Storyboard Suite and has configurable pages for customizing motorsport applications. Check out the video from Embedded World to see it in action.

 

Why bad UIs happen to good people

Today’s guest blog post is by one of our UI designers, Ahren. Ahren recently experienced a world of frustration trying to use a self-checkout kiosk. What should be a simple interaction turned out to be unnecessarily frustrating due to some small, but major, problems. So I asked him to write about it.

Good design is intuitive and gets out of our way. Bad design makes simple tasks overly complicated, frustrating and wastes valuable time. I experienced this recently and wanted to write about it, to discuss what happens when systems are engineered without a solid focus on simple design best practices.

Single Serve UIs have a unique mission

Everything has a screen now, so UIs are everywhere. We’ve likely all interacted with bad UIs, which leads to a frustrating experience as we try to finish up the task we have set out to do. I’d argue that buying groceries shouldn’t be a complicated task.

Recently, I was using a self-service checkout and I noticed that the design had been updated. Sadly, the update was a design regression. I used to know exactly how to use the kiosk I was now staring at and trying to figure out, which generally hadn’t been a problem until now.

On this screen, while they do use a green button for a continue action, the trend does not continue through the UI. As well, a simple press to start would help a lot.

Red never means forward

I noted two major problems immediately:

  1. They had tried to replace every label with an icon. While that can sometimes work, on a UI that must be identified and understood quickly, this was a huge issue of form over function. The kiosk had functionality that could not be explained through an icon and I was left bumbling, pressing things just to see what they did.
  2. When I navigated to the main screen, which is likely the most-utilized screen, I noticed that not all of the colors follow standard design principles. A button to navigate out of a menu was green, whereas a button to continue on with the purchase was red. Most people wouldn’t see red and think, “there’s my path forward”. Red usually means stop, not go forward.

Here they use a red ‘$’ for checkout, and also trigger you back to the main screen after the first press, making it seem like it isn’t the way to go to a checkout.

The UI should not need a legend

Note in the photos that they added a paper legend to the bottom of the kiosks to help users out. A well-designed UI doesn’t need a legend.

As a UI designer, I get frustrated that problems like these exist, especially in systems from large corporations with resources. And definitely at a kiosk whose main objective is to make checkout efficient. A designer would have easily been able to point out these fundamental problems and carry out some UI/UX research, therefore never allowing these problems to end up in a live deployment.

An embedded team with a designer on board would pull from a number of knowledge resources to ensure that the UI is easy-to-use, intuitive, and following well-researched design best practices. For example, Google has Material Design, Microsoft user Fluent (Metro), and Apple has what they call Human Interface Guidelines. While utilizing resources like these might not fix all of the problems, it is a good place to start when designing these single-serve UIs. I quickly mocked up a simple UI below in response to some of my frustrations over the design deficiencies. While it isn’t an exciting overhaul, it took very little time and it works, because it follows common design practices. In a future post, I’ll delve further into the design process for single-serve UIs.

This is a quick example of just using Material design guidelines. It is a boring and generic however it will work and a person will have an easier time understanding it. As well it took very little time. We will go through the process behind this in part 2.

Tutorial: Defining and Testing UI Communication

One of the most exciting new features from the Storyboard 5.2 release is Storyboard Connector. Storyboard Connector makes it easy for teams to define the events that are passed back and forth between the UI and the backend system processes. Once a team defines their events in Storyboard Connector’s event editor, the UI and system teams are able to develop and iterate faster while working in parallel.

Tutorial: Define and test UI communication

Let’s see it in action! In the video below, Nik will give a quick tutorial on the following capabilities in Storyboard Connector.

  • Define an event
  • Test the event during simulation
  • Export a C/C++ header of the events for the development team

Test drive Storyboard 5.2 for yourself. We provide a full-featured 30-day evaluation for you to try it out first hand.

 

Crank Software earns John Deere Supplier Innovation award

Crank Software wins John Deere Innovation Award

We were proud and honored to receive the 2017 John Deere Supplier Innovation Award last month at a ceremony in Bettendorf, Iowa. The award, in recognition of innovation in the Electronic Controls division, is part of John Deere’s Achieving Excellence program.

Innovation isn’t just something we talk about here at Crank. It’s something we strive to deliver every time we build a product roadmap and plan a feature list for a release. The embedded industry is evolving at a rapid pace, and the high expectations driven by the adoption of modern smartphone technology don’t allow for complacency in design. With Storyboard Suite, we make it easier for our customers to bring innovative, high-performance HMI experiences to market.

Test drive Storyboard for yourself. We provide a full-featured 30-day evaluation for you to try it out first hand. The evaluation contains our latest release, Storyboard 5.2.