While I have been rather neg­li­gent with my blog updates I have been kick­ing goals with progress on the Grid-Eye ther­mal sen­sor, BananaPi screens and the user inter­face. Of these it is user inter­face that I am going to blath­er about here.

My pri­ma­ry goal of this project is to improve the microwave user inter­face, shift­ing away from four char­ac­ter sev­en seg­ment dis­plays to a more inter­ac­tive ful­ly fea­tured dis­play.

Every­thing 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­al­ly look like.

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

Then I did a pro­to­type imple­men­ta­tion in HTML to iter­ate the bet­ter ideas. This pro­to­type is below, it is a ful­ly inter­ac­tive web­page — some bits pre­tend to work, oth­er bits are stubbed out.

I would real­ly appre­ci­ate it if peo­ple would play and give feed­back. It is designed for a fixed screen size of 480x800 pix­els, the pri­ma­ry user inter­face will be fin­ger on a touch­screen, there will also be gen­er­al web brows­er access for PCs and portable devices.

View in new tab/window

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

My cur­rent design guide­lines are:
  • Intu­itive to use
    • No instruc­tion man­u­al or help pages
    • No advanced touch inter­faces (slid­ing, mul­ti­touch etc.)
    • Large, obvi­ous, touch tar­gets
    • Acces­si­ble colour scheme and aria sup­port
  • For­giv­ing of mis­takes
  • Not too hideous­ly ugly