Improving the Whisky Fringe Tasting Tracker UI

I’ve got a few modest goals for this year’s Whisky Fringe Tasting Tracker that almost all stem from lessons learned last year and feedback received.

Reducing busyness of the UI

The Tasting Tracker is a single, long list of all of the drams available for sampling – tapping a dram line-item expands out your tasting notes and scoring information for the dram. Finding your dram in the list can be tricky, though, as we show both dram name and distillery/bottler with the same level of UI precedence).

The old dram list (left) showed distillery name at the same scale as the dram name

The old dram list (left) showed distillery name at the same scale as the dram name

This has been changed so that the distillery name is a small, grey subtitle under the dram name making the dram names stand out much more and lightening the UI.

Page size and rendering speed

Expanding the scoring and note controls is a slow operation for a number of reasons:

  • We’re generating HTML for editing controls for each of the 250+ drams to be sampled, even though you’ll only ever see one at a time
  • Tapping expands out the section, causing a reflow of the document – slow anyway, but even slower on mobile devices
  • The sheer volume of HTML being sent to the device makes the DOM very large, slow to manipulate and style

To improve this, I’ve moved the expanding scoring section to instead be a modal popup:

Scoring and tasting notes now appear as a modal dialog, reducing the amount of reflow and simplifying the DOM

Scoring and tasting notes now appear as a modal dialog, reducing the amount of reflow and simplifying the DOM

Not only does it let us show the scoring and note sections without being quite so cramped, it also means that the editing controls are only output in the markup once, simplifying the DOM and the volume of HTML sent to the browser. In fact – just this reduces the volume of markup on the main dram-list for logged in users to just 35% of what it was before.

  • Before: 386KB, 19.7KB compressed
  • After: 134KB, 12.2KB compressed (34.7% of previous uncompressed volume)

While this has negligible impact on the actual number of bytes sent to the device (as compression is employed), it has a noticeable on-device impact in terms of responsiveness which I hope to quantify shortly.

Next steps

There’re a few big-ticket items left on my list:

  • Simplifying account creation and sign-in
  • Supporting some manner of offline mode + sync in case data drops-out during the event
  • Introducing live sampling heatmaps

There’s also more work to be done on making the site much quicker to navigate and manipulate – hopefully making it as quick to use as pen-and-paper.

Leave a Reply

Your email address will not be published. Required fields are marked *