Designing Cross-Platform Desktop Applications with Web Technologies and Electron
0 min read
Steve Krueger
Earlier this summer a client of ours, Scanse, came to us with a problem: they needed a slick and user-friendly desktop application to provide complex data visualizations to their customers who were using their new product they’d just successfully funded through a Kickstarter campaign.
The product, Sweep, is a light imaging detection and ranging sensor (LiDAR) used for measuring distance to a target by illuminating it with laser light. Common applications for LiDAR include creating topographical mapping for agriculture, providing autonomous vehicles with obstacle detection and avoidance, and atmospheric remote sensing and meteorology.
Sweep, Scanse' LiDAR product, is one of the first low-cost solutions targeted at OEM and DIYers. It provides 360 degree sensing capabilities with an optic range of 40 metres. Scanse wanted to provide their customers with the ability to use data collected by their Sweep to be visually displayed and manipulated on their desktop or laptop.
So our web development agency went to work on what it does best: creating exceptional user interfaces and experiences. Scanse had already built a solid functioning application on Electron. To complete the project, we acted as an extension of the Scanse team and worked on the design patterns, usability, and experience.
What is Electron?
Electron is a development framework that allows developers to build amazing cross-platform desktop applications while using web technologies like Javascript, HTML, and CSS. Developed and maintained by GitHub, Electron has been used to build native desktop applications and widgets for organizations like Basecamp, Wordpress, Slack, and GitHub's own Atom editor.
Electron is an open source software project with a robust community of contributors and developers. It has built in native integrations like automatic updates, notification systems, app crash reporting, profiling, and both Mac and Windows installers. In addition to this, developers gain access to the entire Bower registry and NPM modules repositories, which is pretty powerful stuff.
Installing Electron is super quick. They even provide a Quick Start project to help get started.
http://electron.atom.io/docs/tutorial/quick-start/
Building an Intuitive User Experience
As functionality was already built within the prototype app, our biggest task was to understand how a user would interact with each piece of functionality and make sure it was decoupled into a more logical flow.
There are multiple ways for a user to interact with the data - through a visualizer, data table, or by changing playback options - or by manipulating the boundary detection radius and threshold, clustering settings, or colouring of each data point. There’s also a considerable number of UI elements like toggle buttons, input fields, dropdowns, and conditional settings which impact how data is displayed within the 3D visualizer or data tables.
We followed the Atomic Design System, originally drafted by Brad F7 rost, to develop the UI elements which would be used for the final drafted application design. The Atomic Design System is a methodology used to boil down an entire website from templates (block arrangement on a page), organisms (navigation, footer, header), molecules (search block, rotator), to its single atomic structure (a text input field, form label).
We defined our Atoms, Molecules, Organisms, and Templates while we drafted visual prototypes, tested with our beta users, and continued iterating until it all fit together.
Once designs were finalized, we moved onto implementation within Electron; it was a breeze. The API is very efficient to work with and allows developers to extend functionality to external libraries. We followed the BEM methodology for our front-end to create consistency between elements which made updating or introducing design patterns a simple task.
The results turned out great and everyone was happy to work with the new platform.
Need help building an app? Let’s talk. Get in touch with The Jibe to learn more.
,