While I have been rather neg­li­gent with my blog updates I have been kick­ing goals with pro­gress on the Grid-Eye thermal sensor, BananaPi screens and the user inter­face. Of these it is user inter­face that I am going to blather about here.

My primary goal of this pro­ject is to improve the microwave user inter­face, shift­ing away from four char­ac­ter seven seg­ment dis­plays to a more inter­act­ive fully fea­tured display.

Everything else, most of the work, is to sup­port and imple­ment this improve­ment. As I am now up to play­ing with the screens, select­ing screen sizes and touch inter­faces it seemed worth­while to spend a bit of time con­sid­er­ing what the GUI will actu­ally look like.

I did a few pages of pen­cil sketches, use­ful to work through a wide vari­ety of ideas.

Then I did a pro­to­type imple­ment­a­tion in HTML to iter­ate the bet­ter ideas. This pro­to­type is below, it is a fully inter­act­ive webpage — some bits pre­tend to work, other bits are stubbed out.

I would really appre­ci­ate it if people would play and give feed­back. It is designed for a fixed screen size of 480×800 pixels, the primary user inter­face will be fin­ger on a touch­screen, there will also be gen­eral web browser access for PCs and port­able devices.

View in new tab/window

The source code is avail­able on git­hub, it is pro­to­type code so there are more than few short­cuts and lots of poor practices.

My cur­rent design guidelines are:

  • Intu­it­ive to use
    • No instruc­tion manual or help pages
    • No advanced touch inter­faces (slid­ing, mul­ti­t­ouch etc.)
    • Large, obvi­ous, touch targets
    • Access­ible col­our scheme and aria support
  • For­giv­ing of mistakes
  • Not too hideously ugly