Screen Interface Prototype

While I have been rather negligent with my blog updates I have been kicking goals with progress on the Grid-Eye thermal sensor, BananaPi screens and the user interface. Of these it is user interface that I am going to blather about here.

My primary goal of this project is to improve the microwave user interface, shifting away from four character seven segment displays to a more interactive fully featured display.

Everything else, most of the work, is to support and implement this improvement. As I am now up to playing with the screens, selecting screen sizes and touch interfaces it seemed worthwhile to spend a bit of time considering what the GUI will actually look like.

I did a few pages of pencil sketches, useful to work through a wide variety of ideas.

Then I did a prototype implementation in HTML to iterate the better ideas. This prototype is below, it is a fully interactive webpage – some bits pretend to work, other bits are stubbed out.

I would really appreciate it if people would play and give feedback. It is designed for a fixed screen size of 480×800 pixels, the primary user interface will be finger on a touchscreen, there will also be general web browser access for PCs and portable devices.

View in new tab/window

The source code is available on github, it is prototype code so there are more than few shortcuts and lots of poor practices.

My current design guidelines are:
  • Intuitive to use
    • No instruction manual or help pages
    • No advanced touch interfaces (sliding, multitouch etc.)
    • Large, obvious, touch targets
    • Accessible colour scheme and aria support
  • Forgiving of mistakes
  • Not too hideously ugly