learn-data-heuristics-with-phoebe / Session 7 of 9
Learn Data Heuristics with Phoebe · Session 7 of 9

The interaction

A screen can pass every truth check in session 6 and still fail the moment someone touches it. Tonight puts five interaction traditions to work on the two places analytics tools genuinely differ from ordinary web software - the filter, and the query that takes forty seconds to answer - and closes on a single row of red and green text that roughly one man in twelve cannot read at all.

🔴 Advanced Data and analytics leads Anyone who builds self-serve analytics 45 min
0-3 · Welcome 3-24 · Five sets on one interaction 24-40 · Build-along: the filter and the long query 40-45 · Q&A
Part 0

Where we are

Session 6 asked whether a static screen represents its data honestly. That question has an answer the moment the screen finishes rendering. This session asks a harder one: does the product keep behaving correctly across the seconds and minutes after someone touches it - sets a filter, waits on a query, drills into a panel, exports a file, hits an empty result or an outright error. Interaction quality is not visible in a screenshot, which is exactly why it gets reviewed less often than it should.

★ What you walk out with tonight. Five named traditions run hard against one filter and one long-running query, not recited in the abstract. A state diagram for what a slow query owes its reader at every stage. And a redesigned status row that survives being printed in greyscale, because roughly one reader in twelve is effectively seeing it that way already.

LiveWhy analytics interaction is its own problem3 min▶

Most interaction guidance was written against forms, menus and buttons that respond in under a second. Analytics tools break that assumption constantly: a filter can trigger a query that takes forty seconds, a drill-down can silently reshape what a colleague is looking at on a shared screen, and an export can succeed with zero rows and no explanation why. The five sets tonight were not written for this problem specifically, but applied together they cover it completely - general usability, software-dialogue discipline, the cognitive mechanics of a control, fine-grained interaction craft, and a formal international standard.

Real world

Tideline's status row shows renewal risk in red or green text with nothing else attached. Every reviewer who has looked at it in daylight, on a good monitor, has said it is obviously clear. Nobody had checked what it looks like to a colleague with deuteranomaly, the single most common form of colour vision deficiency, until this session's bench was built.

Self-studyWhy five sets rather than one3 min▶

Session 6 had one list built almost entirely for its job, Few's 13. Interaction quality has no such single list, because the five traditions below were built by people solving different problems: Nielsen and Molich generalised across whatever interface existed in 1990, Shneiderman was writing specifically about software dialogues in 1985, Norman was explaining why physical objects and digital controls succeed or fail at communicating themselves, Tognazzini was compiling decades of hands-on interaction craft at Apple and Sun, and ISO was standardising dialogue principles for international procurement. None of the five is sufficient alone on an analytics UI, which is the reason tonight runs all five against the same two artefacts rather than picking a favourite.

Part 1 · covers the five sets and what each is for

Five sets, five different jobs

8 min live

Each of the five was written to answer a slightly different question. Knowing which question a set answers tells you which finding to expect from it before you even open the tool.

SetSourceWhat it is for
NN/g's 10 usability heuristicsNielsen, 1994, rev. 2020General-purpose first pass on any interface, filters and queries included
Shneiderman's Eight Golden RulesDesigning the User Interface, 1985, 6th ed. 2016Discipline specific to software dialogues - closure, reversal, memory load
Norman's design principlesThe Design of Everyday Things, 1988, rev. 2013Why a single control communicates - or fails to communicate - what it does
Tognazzini's 19 interaction principlesAskTog, 2014 revisionFine-grained craft, especially latency, state and protecting work
ISO 9241-110's 7 dialogue principlesISO, 2020, 2nd editionA formal, internationally standardised bar for any software dialogue
LiveNN/g's ten, worked hard against an analytics UI4 min▶

Session 1 introduced these ten by name. Tonight they get applied specifically to filters, long queries, drill-down, export, and empty or error states - the five moments where analytics interaction genuinely differs from a marketing site.

#HeuristicApplied to analytics interaction
1Visibility of system statusIs a running query visibly running, not silently pending?
2Match between system and the real worldDoes a drill-down use the business's own category names?
3User control and freedomCan a filter be cleared in one action, without a page reload?
4Consistency and standardsDoes export always mean the same file format, everywhere in the tool?
5Error preventionDoes the tool warn before an export with zero matching rows?
6Recognition rather than recallAre active filters shown as chips, or does the reader have to remember them?
7Flexibility and efficiency of useCan a power user skip the wizard and write the filter directly?
8Aesthetic and minimalist designDoes the empty-result state show only what helps, not a blank page?
9Help recognise, diagnose, recover from errorsDoes a failed query say what failed and offer a retry?
10Help and documentationIs the filter's exact logic - and, or, exclusion - one click from confusing?
LiveShneiderman's eight golden rules4 min▶

Ben Shneiderman published these in 1985 and has kept them current through six editions of Designing the User Interface. They speak specifically to software dialogues, which makes them a closer fit to a filter or a query panel than a general usability heuristic.

#Rule
1Strive for consistency
2Seek universal usability
3Offer informative feedback
4Design dialogs to yield closure
5Prevent errors
6Permit easy reversal of actions
7Keep users in control
8Reduce short-term memory load

Two of the eight are the most under-applied on analytics tools specifically. Design dialogs to yield closure means a sequence of actions should have a clear beginning, middle and end - a query that just stops updating its spinner, with no completion state, never yields closure. Reduce short-term memory load means the tool should show what is currently filtered rather than expect the reader to hold five selections in their head while comparing two dashboards in separate tabs.

Real world

Tideline's filter panel lets a reader stack six conditions and then navigate away. On return, the filters are gone and the panel is silent about whether that was intentional or a bug. That single behaviour breaks closure and control at once.

LiveNorman's concepts, applied to one filter control5 min▶

Honesty check. These come from Donald Norman's The Design of Everyday Things (1988, rev. 2013), and Norman never shipped them as a single canonical numbered web list - counts differ between sources that summarise the book. Treat what follows as the working concepts, not a fixed-length canon.

Affordance is what an object's shape allows it to do - a button-shaped rectangle affords pressing. Signifier is the explicit cue that tells you the affordance is there - a chevron icon, an underline, a change in cursor. Mapping is the relationship between a control and its effect - a filter positioned above the chart it changes maps more clearly than one buried in a side panel three scrolls away. Feedback is the signal that an action registered - a chip appearing, a count updating. Constraint is what the control physically prevents - a dropdown cannot hold an invalid value the way a free-text box can. Conceptual model is the reader's mental picture of what the control does, which must match what it actually does or every use becomes a small surprise.

Region: All ▾ the filter control under review Affordance raised edge and fill say this can be pressed Signifier the ▾ chevron makes the affordance explicit Constraint a dropdown cannot hold an invalid region Mapping sits directly above the chart it changes Feedback a chip appears and the chart count updates Conceptual model does this narrow one panel, or the whole screen?
🔍 Click to zoom - the same six concepts on any control, from a light switch to a dashboard filter
Self-studyTognazzini's 19, and the three almost never applied4 min▶

Bruce Tognazzini published these as AskTog's First Principles of Interaction Design, most recently revised in 2014, drawing on his years leading human interface work at Apple and Sun. Nineteen principles by name: aesthetics, anticipation, autonomy, colour, consistency, defaults, discoverability, efficiency of the user, explorable interfaces, Fitts's Law, human-interface objects, latency reduction, learnability, metaphors, protect users' work, readability, simplicity, state, visible navigation.

Three matter enormously for analytics and are almost never applied on purpose:

  • Protect users' work - nothing a reader configures, filters or half-writes should vanish because of a refresh, a crash, or a navigation click. Analytics tools violate this constantly because filter state is treated as disposable.
  • Latency reduction - perceived speed is often more important than actual speed. A progress indicator, a partial result, or an honest estimate of remaining time all reduce felt latency even when the query itself takes exactly as long.
  • State - the system must always be able to communicate what state it is in. A long query with no visible state is not fast or slow, it is simply unknown, and unknown is worse than slow.
Self-studyISO 9241-110's seven dialogue principles3 min▶

Honesty check. The ISO 9241-110:2020 document itself is paywalled, so the wording below travels through a close secondary quotation rather than the standard's own text. The seven principle names are stable across the sources that quote them.

#Principle
1Suitability for the user's tasks
2Self-descriptiveness
3Conformity with user expectations
4Learnability
5Controllability
6Use error robustness
7User engagement

This is the 2020 second edition, which superseded the 2006 first edition. It is the closest thing the interaction canon has to a formally standardised, internationally agreed bar, which is precisely why it belongs alongside four traditions that arrived at similar ground independently.

Part 2 · covers the long-running query

Where analytics interaction genuinely differs from web interaction

7 min live

A button click on most software resolves in under a second. A filter change on an analytics product can trigger a query that takes forty seconds against a warehouse, and that gap is where closure, state, protecting work and latency stop being nice-to-haves and become the entire interaction.

Idle what will run, and against what data Running elapsed time and a way to cancel Complete row count and how fresh the answer is Error what failed, and a concrete retry path Timeout whether a partial result is available What happens when a state is left out No Running state: the reader cannot tell a slow query from a frozen tab, and starts refreshing. No Error message: the reader assumes the query is still running and waits on a query that already died. No Timeout distinction: a genuinely slow-but-working query and a dead one look identical from the outside.
🔍 Click to zoom - five states, and what silence at each one costs the reader
LiveClosure and memory load, applied to the query panel4 min▶

Shneiderman's dialogs-to-yield-closure rule means every query needs a visible, unambiguous end, distinct from its middle. A spinner that simply stops without a completion message does not yield closure - it just stops signalling, and a reader cannot tell "done" from "gave up quietly".

Reduce-short-term-memory-load means the query panel itself should carry the state a reader would otherwise have to hold in their head: which filters are active, how long the current run has taken, what the last successful run returned. None of that should require memory of a click made ninety seconds ago in a different tab.

LiveProtect the work, cut the felt latency, always show a state3 min▶

Tognazzini's three under-applied principles map directly onto the query panel. Protecting users' work means a filter set, in progress or complete, survives a refresh or an accidental navigation. Latency reduction means the forty seconds feels shorter with a progress signal than it does with silence, even when the actual duration is unchanged. And a visible state at every moment means the reader is never staring at a screen that could mean three different things.

Real world

Tideline's long query shows nothing while running - no spinner, no elapsed time, no cancel button. A reader who navigates away loses the query with no warning that anything was lost. That single gap fails closure, state, protection and latency at once, from four different traditions that all happen to be pointing at the same missing element.

Part 3 · covers colour as the only cue

Red and green, alone, fail roughly one man in twelve

6 min live

Tideline's renewal-risk row carries its meaning in exactly one channel: the text is red for at-risk accounts and green for healthy ones, with nothing else attached. Every set tonight converges on the same finding once colour vision is taken out of the picture.

As shipped: colour is the only cue Acme Co · Renewing Bolt Ltd · At risk to a colour-typical reader: obvious Redesigned: colour plus shape and word ● Acme Co · Renewing ▲ Bolt Ltd · At risk shape and word survive colour loss What a deuteranomaly reader sees, as shipped Acme Co · Renewing Bolt Ltd · At risk Same reader, redesigned row ● Acme Co · Renewing ▲ Bolt Ltd · At risk Same near-identical colours both times. The shape and the word are what still tell the two rows apart.
🔍 Click to zoom - the row as shipped and redesigned, seen with and without red-green colour vision
LiveThe stat, and which sets already told you3 min▶

Red-green colour vision deficiency, mostly deuteranomaly, affects roughly one man in twelve and a much smaller share of women. On a row that carries meaning through red-versus-green alone, that reader sees two shades of a similar muddy tone and no way to tell which account is healthy. This is not a rare edge case on a team of any size - it is closer to one seat in most rooms of a dozen.

Nothing here required a sixth principle set to name. NN/g's consistency-and-standards heuristic asks whether a signal means the same thing everywhere, which a colour-only signal cannot guarantee across every reader. ISO's conformity-with-user-expectations principle asks whether the dialogue matches what a reasonable user expects a status indicator to give them - a second cue, not just one. The fix five traditions independently point toward is not a new idea, it is a second channel: shape, an icon, or the word itself, so the colour becomes reinforcement rather than the entire message.

Build-along

The filter and the long query

★ 16 min · everyone builds

Pick one filter control and one genuinely slow query in a tool you use at work - not Tideline, your own. Work through the five sets against both, then fix the status row.

Run NN/g's ten against your filter. Go heuristic by heuristic from the table in Part 1. Note every miss, especially recognition-rather-than-recall - can you tell what is filtered without opening the panel again?

Run Shneiderman's eight against your long query. Focus on closure and memory load specifically. Does the query panel ever clearly say "finished"? Does it hold your filter state so you do not have to?

Name the Norman concepts on the filter control. What signifier tells you it is interactive? What is its constraint? What would happen if its conceptual model - does it filter one panel or the whole screen - turned out to be wrong?

Check the query against Tognazzini's three. Does it protect your work if you navigate away mid-run? Does anything reduce the felt latency of waiting? Is the current state ever ambiguous?

Redesign a red/green row for greyscale. Take any status indicator in your own tool that relies on colour alone. Add one non-colour cue - a shape, an icon, or the status word itself - and check the result in a greyscale screenshot or a colour-blindness simulator. If the two states are still distinguishable in grey, the fix worked.

The greyscale check is worth doing on paper, not just describing. A design that "obviously" still works in your head often collapses the moment you actually desaturate the screenshot - the gap between what you expect and what the image shows is the finding.

Homework

Before session 8

20 min
Check yourself

Three questions

Tideline's renewal-risk row carries meaning through red-versus-green text alone. Roughly what share of readers cannot reliably distinguish that row, and why does the fix not require removing the colour?

Red-green colour vision deficiency, mostly deuteranomaly, affects roughly one man in twelve. Multiple sets converge on the same answer: colour should reinforce a signal, not be the only channel carrying it.

Which pair of Shneiderman's Eight Golden Rules is named as the most under-applied on analytics tools specifically?

A query that never signals a clear end fails closure, and a filter panel that forgets its own state the moment you glance away increases memory load. Both are common on analytics tools built by teams who tested only the fast path.

A long-running query has no visible Running state - no spinner, no elapsed time, no cancel control. What does a reader lose, according to Tognazzini's principle of state?

Tognazzini's state principle holds that a system must always be able to communicate what state it is in. Without it, a reader cannot distinguish "still working" from "silently broken", which is a worse position than knowing it is simply slow.

Sources covered

What this session teaches, and where it came from

✓Nielsen, 10 Usability Heuristics for User Interface Design (1994, rev. 2020)All ten, applied specifically to filters, long queries, drill-down, export and empty/error states
✓Shneiderman, Eight Golden Rules (Designing the User Interface, 1985, 6th ed. 2016)Read from the author's own page at cs.umd.edu; closure and memory load drawn out as most under-applied
◐Norman, The Design of Everyday Things (1988, rev. 2013)Book-only, never a numbered list. Affordance, signifier, mapping, feedback, constraint, conceptual model, applied to a filter
✓Tognazzini, First Principles of Interaction Design (AskTog, 2014 revision)All 19 named; protect users' work, latency reduction and state drawn out for the long query
◐ISO 9241-110, dialogue principles (2020, 2nd edition)Primary standard is paywalled; wording read through a close secondary quotation

Every fact on this page, and its verification tier, is recorded in the course's source map.

Session 7 cheat sheet · pin this

Five jobs, five setsNN/g general, Shneiderman software dialogues, Norman cognitive mechanics, Tognazzini fine craft, ISO the formal standard.
Closure and memory loadShneiderman's two most under-applied rules on analytics tools. A query needs a visible end; a filter panel should remember so you do not have to.
Protect, reduce, communicateTognazzini's three: protect users' work, reduce felt latency, always show a state.
Norman's six on a filterAffordance, signifier, mapping, feedback, constraint, conceptual model - the same six on any control, physical or digital.
Five query statesIdle, running, complete, error, timeout. Silence at any one leaves the reader guessing which state they are in.
One man in twelveRed-green colour vision deficiency's rough share among men. Colour reinforces a signal; it should never be the only channel.