Our new product family, Infinity ECUs deliver state-of-the-art electronic fuel injection (EFI) control capabilities.
However, the hardware vendor only provides a very plain software and it’s not easy to use.
When you see more than 20 UI controls in one screen, you have a problem.
We have experience building a good software for our customers and we’d like to use what we have, what we have learned to deliver the best user experience to our customers.
The end result is a plugin for the vendor software, it’s called Infinity Wizard.
The setup Wizard included with the InfinityTuner user interface software dramatically simplifies initial tuning configuration to help ensure successful initial startup for Supported applications.
The process is as below:
I use Pencil (on Windows) for prototyping and Google Slide for presentation.
The good thing about using Google Slide is it could be also used as a documentation tool. Once the feature is implemented, you have a document too. It’s really helpful in case you need to revisit the feature.
Use of Visual Elements (chart, diagram, product photos, etc)
“Human Beings are Visual Creatures.”
We found out using chart, diagram, and real product photos is a good way to present an intuitive interface:
No one likes waiting. As this article mentioned:
A non-blocking interface should feel fast, responsive and continuous.
In wizard, it immeditally displays the window frame and loads the content asynchronously:
Always Provide Preview and Convenient Links
i18n Support in UI Script
Store JSON Data in Local Database (SQLite3)
Fuzzy Value Support in DSL
Model developers want to express this: I want it to set to 10, but at the same time I want any value from 8 to 12 to be valid.
So we created this syntax and use regular expression to parse it.
Scope Support in DSL
Model developers want to hide some scripts based on a model id.
Inspired by Rails Routing syntax, we created a similar syntax (by using “only” and “except” keywords):
Method Chaining Style
This is inspired by jQuery:
Usage of SVG in Desktop Program
We used SVG instead of image for two reasons:
- We can assign id to a single path so it’s much easier to dynamically highlight part of the image
- The format is easy to scale and rotate
We use CEFSharp to host the SVG image.
It turns out Github Desktop uses the same technique.
I designed, architected and implemented most of the code (90%). I had an engineer worked with me for a short amount of time.
As you can see on my code commits heat map, it is started in 2011 and constantly updates.
Use Cache to Make Program Fast
I was really happy to commit this:
One More Thing
InfinityTuner Wizard talks to hardware and our model developers build the hardware. I’ve created other tools to ease the “model developer experience”: