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.

Embrace design change and simplify embedded UI resizing and rebranding

The following is a post from Fancy Dan, one of our creative and talented in-house designers. Dan uses Storyboard Suite on a daily basis to create awesome user experiences for embedded applications. He’s also the dulcet voice behind our Storyboard videos.

There are a lot of moving parts involved in building embedded applications. Every step in the product development process can influence the UI and contribute to changes, which is why it’s essential to be able to manage design iteration. Some products are turnkey applications that are delivered to companies with custom branding and a unique look. Other applications require a reskin to be modernized, use different modes, or introduce new features. The best product experience is a result of design iteration, but development can’t always wait for the design process to be completed before starting. A change in the supply chain could result in having to use a new display with dimensions that don’t match the original design.

Support UI rebranding and resizing and build better products

Storyboard Suite uses workflows to keep the design process flexible while preserving the application’s functionality. Changing the design of the UI is a reality, but it can’t come at the expense of development progress, which is why we built and continue to refine the re-import feature. Storyboard takes advantage of the comparator that looks at a new design from a Photoshop file and compares it an existing application.

The new re-import view provides the user with a view of their Photoshop file in the context of the application model, a preview of the different screens from their application, and a side-by-side comparison of existing project content and items that have been redesigned. With this new view, users can preview how their re-design is being applied to their project and with more control.

Individual attributes like positioning and size can be applied. Incorporating new fonts with different colors, replacing old images with new ones, and adding content are all options that are provided to users. In addition, variables and actions associated with the original content are maintained, so that animations, Lua functions, and other functionality is carried forward with the new content look.

In an ideal workflow, refining the UI shouldn’t interrupt or halt development work that’s in progress, and ongoing development shouldn’t exist in a vacuum or keep the design team out of the loop. Products with a solid design come from teams that can accommodate changes that were never planned for without putting the brakes on all aspects of the workflow. UI solutions that rely on a rigid development process introduce design limitations and lead to products with compromised usability.

Bad design will always result in frustrated users which means that everyone loses. Users care about the usability and look and feel of the final product, so a design that functions optimally matters. Being able to manage UI change helps teams deliver applications that don’t compromise on design or development, which results in products that are more likely succeed than those with poorly executed product design.

As always, we provide a full-featured 30-day evaluation for you to try out Storyboard Suite first hand. The evaluation contains our latest release, Storyboard 5.2.

Innovation in voice-controlled HMI experience at Embedded World

Voice controlled Storyboard GUI with Snips AI

Sometimes I yell at my oven in hopes that it will sense my desperation and cook dinner faster. Sadly, my oven doesn’t listen to me. Perhaps it needs a technology upgrade. Like our new Crank smart oven.

We debuted a couple of new Storyboard multimodal HMI demos at Embedded World last week that incorporate voice as an input option, including the Crank smart oven. Snips voice technology runs completely on-device which keeps data private and allows for offline functionality. Combining Storyboard’s scalable, beautiful GUIs with Snips innovative voice platform on the high-performing NXP i.MX 8M is a recipe (that’s kind of punny) for a successful HMI experience. Check out the following video from Embedded World to see this demo in action.

As always, we provide a full-featured 30-day evaluation for you to try out Storyboard Suite first hand. The evaluation contains our latest release, Storyboard 5.2.

StoryboardTrialBtn