In this blog post, I’m going to tell you about our design for an electric bicycle user interface, implemented using Qt Company’s software development kit. I’m going to go through the case with you and share some insights that we gained from the experience, especially in terms of how to design user interfaces with the very low performance (some might say cost effective) hardware in mind.
You can also watch a video of the presentation I gave about the subject at the Design Jyväskylä Meetup on January 17th (below).
The Case
For CES 2018, the Qt company wanted to demonstrate that an independent design and development team could effectively create an electric bicycle user interface that would be user friendly and also visually good looking, on entry level touch screen hardware. All of the UI had to run at 60 frames per second, on hardware that doesn’t have a dedicated GPU.
The Team
We took this demanding project as a creative challenge and put together a team of 2 UX-designers, 1 visual designer, and 1 developer, with skillsets complementing each other. The span of the project was only 8 to 10 weeks, which meant that we needed to work very efficiently and in a lean manner to achieve a great result.
The Hardware
The target hardware used was a very entry level resistive 5,7 inch touch screen, and a very low performance Toradex board with an integrated graphics controller. The development board in question had only a low amount of memory, which in addition to lacking a dedicated GPU made things tricky.
At this point someone might say: ”60 frames per second, on a device that doesn’t have a dedicated GPU?! Is that even possible?”
It turns out that, with the right technology, people and knowhow; yes it is.
How the project went?
Initially we created 2 separate concepts with the target hardware in mind, in only a couple of days. After a review by Qt Company, we ended up picking the best parts of both concepts. We decided to go forward with a concept that incorporates a large main dial that sums up the most important indicators an e-bike user needs to have while riding and also a menu interface that the user uses by pushing the different quarters of the screen. The focus of the design was on ease of use and clarity of interaction on a not-so-sensitive resistive touch screen.
Each week, we would refine and further develop the initial concept. We would do development tests and visual designs straight away and then try to implement them on the target hardware and see, would it match our standards and would it run at 60fps. We also did some user interviews and testing on actual e-bike users during to project, in order to make sure that the final product would cater to their needs.
The final product can be seen in more detail on this short demonstration clip:
Insights for designing for low end hardware
The design methods or overall process doesn’t differ that much from normal when designing for low end hardware, but in our opinion a couple of things are more emphasised. Here are a couple of things that we learned:
Prototype and test early on the target hardware – Fail fast!
- Even though you can run your build on a desktop environment and get some sense of your design in action, the true insights on how your design works only come when you play around with it on the actual hardware.
- The look and feel is totally different (and is dependant on the hardware) and it reveals certain things that aren’t apparent in desktop mode. For example, colour presentation, contrast, usability with touching etc.
Prefer using images of UI-elements rather than drawing elements with the hardware.
- Qt can draw circles and squares to some extent, but more complex UI elements should be done with images to achieve a visually good looking UI that isn’t overly demanding for the hardware that doesn’t have a dedicated GPU and a low amount of memory.
Forget about dynamic transparency, fades etc for the most part
- For example, On/off type transparency is mostly ok, but dynamically changing effects, other than moving static UI elements around with anchors, is not recommended in terms of performance.
- Avoid changing the whole view at once, prefer changing only smaller parts at once for smooth transitions.
If you take away only one thing from this blog post, I think it should be the first point. One can not stress enough the importance of constant testing and prototyping on the actual target hardware, in realistic use contexts. The “Fail fast” principle applies to many different disciplines ranging from business to software design, and in our opinion, it applies strongly to designing for low performance hardware as well. So test a lot and prototype early in order to fail fast – it will make your design better.
