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).
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:
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.
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.