A design decision answered with statistics instead of opinion. I built two live, fully instrumented HTML prototype stores, ran a pilot → power analysis → three main experiments with 342+ respondents, and tested hypotheses with Fisher's exact test, Mann-Whitney U and Spearman correlation. Result: matrix navigation wins, heavy imagery inside menus hurts, and search queries follow a predictable grammar. The work was published in the ITMO Young Scientists' Congress proceedings and presented at two conferences.
Eine Designentscheidung, beantwortet mit Statistik statt Meinung. Ich habe zwei live geschaltete, vollständig instrumentierte HTML-Prototyp-Shops gebaut, Pilot → Poweranalyse → drei Hauptexperimente mit 342+ Teilnehmenden durchgeführt und Hypothesen mit exaktem Fisher-Test, Mann-Whitney-U und Spearman-Korrelation geprüft. Ergebnis: Matrix-Navigation gewinnt, viel Bildmaterial in Menüs schadet, und Suchanfragen folgen einer vorhersagbaren Grammatik. Die Arbeit wurde im Tagungsband des ITMO Young Scientists' Congress publiziert und auf zwei Konferenzen vorgestellt.
01The questionDie Frage
Every mobile store has to answer the same question on day one: how do users find products? Two dominant patterns compete. Categorical navigation walks the user through screens sequentially — tap a section, get the next list. Matrix navigation places sections along the side and top of the screen at once, so the user picks an item at the intersection of two categories.
Jeder mobile Shop muss am ersten Tag dieselbe Frage beantworten: Wie finden Nutzer Produkte? Zwei dominante Muster konkurrieren. Kategoriale Navigation führt sequenziell durch Screens — Bereich antippen, nächste Liste erhalten. Matrix-Navigation zeigt Bereiche gleichzeitig seitlich und oben, sodass Nutzer ein Element am Schnittpunkt zweier Kategorien wählen.
The industry picks between them by convention and taste. My research question was sharper: which pattern measurably performs better — with and without visual content inside the menu — and how does search interact with navigation?
Die Branche entscheidet nach Konvention und Geschmack. Meine Forschungsfrage war schärfer: Welches Muster performt messbar besser — mit und ohne visuellen Content im Menü — und wie interagiert die Suche mit der Navigation?
02Method — instrumented prototypes & metricsMethode — instrumentierte Prototypen & Metriken
Click-dummies can't answer a quantitative question, so I built two live HTML prototype stores (HTML, CSS, JavaScript, PHP) hosted on a public URL and tested unmoderated, from both desktop and phone. Every tap on screen was logged: a custom JS event layer plus web analytics recorded interface version, per-task time in milliseconds, error count and task completion, streamed into a server-side file and exported to CSV. After each session, respondents filled in a SUS satisfaction questionnaire.
Click-Dummys können keine quantitative Frage beantworten, also habe ich zwei live geschaltete HTML-Prototyp-Shops gebaut (HTML, CSS, JavaScript, PHP), öffentlich gehostet und unmoderiert getestet — am Desktop und am Smartphone. Jeder Tap wurde protokolliert: ein eigener JS-Event-Layer plus Web-Analytics erfassten Interface-Version, Zeit pro Aufgabe in Millisekunden, Fehlerzahl und Task-Abschluss, gesammelt in einer Server-Datei und als CSV exportiert. Nach jeder Session füllten die Teilnehmenden einen SUS-Fragebogen aus.
The statistical design came before the data: a pilot study, then a power analysis with Bonferroni correction (family-wise error rate 4%, per-hypothesis alpha, planned sample sizes) — and only then the main experiments. Hypotheses were tested with Fisher's exact test (task success), Mann-Whitney U (time, errors), Spearman correlation (behavior ↔ satisfaction) and confidence intervals.
Das statistische Design stand vor den Daten: Pilotstudie, dann Poweranalyse mit Bonferroni-Korrektur (Family-Wise Error Rate 4%, Alpha pro Hypothese, geplante Stichprobengrößen) — und erst danach die Hauptexperimente. Geprüft wurde mit exaktem Fisher-Test (Task-Erfolg), Mann-Whitney-U (Zeit, Fehler), Spearman-Korrelation (Verhalten ↔ Zufriedenheit) und Konfidenzintervallen.
Metrics & task designMetriken & Aufgabendesign
Logged per respondent: interface version (randomly assigned) · time per task, ms, from task start to the target screen · error count (taps off the optimal path) · task completion · SUS score. Tasks were realistic shopping goals of graded difficulty — e.g. "find a blue men's shirt", "find the cheapest white women's boots", "find a children's backpack" — identical across interface versions.
Pro Teilnehmer erfasst: Interface-Version (zufällig zugewiesen) · Zeit pro Aufgabe in ms, vom Start bis zum Zielscreen · Fehlerzahl (Taps abseits des optimalen Pfads) · Task-Abschluss · SUS-Score. Aufgaben waren realistische Shopping-Ziele mit gestaffelter Schwierigkeit — z. B. „ein blaues Herrenhemd finden", „die günstigsten weißen Damenstiefel finden", „einen Kinderrucksack finden" — identisch über alle Interface-Versionen.
Why Bonferroni: with several hypotheses per experiment, an uncorrected 5% alpha would inflate false positives. Fixing the family-wise error rate at 4% and dividing alpha across hypotheses kept every "significant" in this study meaning significant.
Warum Bonferroni: Bei mehreren Hypothesen pro Experiment würde ein unkorrigiertes 5%-Alpha falsch-positive Ergebnisse aufblähen. Die Family-Wise Error Rate auf 4% zu fixieren und Alpha auf die Hypothesen zu verteilen hielt jedes „signifikant" in dieser Studie wirklich signifikant.
03Experiment 1 — menus without contentExperiment 1 — Menüs ohne Content
163 respondents, randomly split between a categorical and a matrix interface, both with text-only menus. Matrix navigation won on the two metrics that matter most in commerce — whether people find the product, and how much they stumble on the way.
163 Teilnehmende, zufällig auf ein kategoriales und ein Matrix-Interface verteilt, beide mit reinen Text-Menüs. Die Matrix-Navigation gewann bei den zwei Metriken, die im Commerce am meisten zählen — ob Menschen das Produkt finden und wie oft sie unterwegs stolpern.
| HypothesisHypothese | Matrix | CategoricalKategorial | VerdictBefund |
|---|---|---|---|
| Higher task successHöherer Task-Erfolg | 82.46% | 63.32% | Confirmed — Fisher's exact, significantBestätigt — exakter Fisher-Test, signifikant |
| Fewer errorsWeniger Fehler | median 4Median 4 | median 7Median 7 | Confirmed — Mann-Whitney, p=0.16%Bestätigt — Mann-Whitney, p=0,16% |
| Less time per taskWeniger Zeit pro Aufgabe | difference not significantUnterschied nicht signifikant | Not confirmedNicht bestätigt | |
| Errors correlate with SUS satisfactionFehler korrelieren mit SUS-Zufriedenheit | rs = 0.58 · CI [0.41; 0.70] | Confirmed — strong correlationBestätigt — starke Korrelation | |
The error↔satisfaction correlation is the quiet headline: every wrong tap a navigation system provokes is directly, measurably paid for in how much users like the product.Die Fehler↔Zufriedenheits-Korrelation ist die stille Schlagzeile: Jeder falsche Tap, den ein Navigationssystem provoziert, wird direkt und messbar damit bezahlt, wie sehr Nutzer das Produkt mögen.
04Experiment 2 — menus with visual contentExperiment 2 — Menüs mit visuellem Content
Real stores rarely ship text-only menus — they fill navigation with product imagery. So the second experiment (179 respondents) repeated the comparison with images inside both menu types. Matrix navigation still won where it matters: task success 72.22% vs 47.37% (Fisher's exact, significant) and fewer errors — median 7 vs 11. The errors↔SUS correlation held here too (Spearman, r = 0.5).
Echte Shops liefern selten reine Text-Menüs — sie füllen die Navigation mit Produktbildern. Das zweite Experiment (179 Teilnehmende) wiederholte deshalb den Vergleich mit Bildern in beiden Menütypen. Die Matrix-Navigation gewann weiterhin dort, wo es zählt: Task-Erfolg 72,22% vs. 47,37% (exakter Fisher-Test, signifikant) und weniger Fehler — Median 7 vs. 11. Auch die Fehler↔SUS-Korrelation hielt (Spearman, r = 0,5).
The honest part: the time hypothesis was not confirmed — with content in the menus, matrix navigation was no faster than categorical (median 63 vs 66). I reported it as a negative result rather than burying it. A pattern that produces fewer dead ends but no speed advantage is a different design argument than "matrix is better at everything" — and the more useful one.
Der ehrliche Teil: Die Zeit-Hypothese wurde nicht bestätigt — mit Content in den Menüs war die Matrix-Navigation nicht schneller als die kategoriale (Median 63 vs. 66). Ich habe das als negatives Ergebnis berichtet statt es zu verstecken. Ein Muster, das weniger Sackgassen erzeugt, aber keinen Tempo-Vorteil bringt, ist ein anderes Design-Argument als „Matrix ist in allem besser" — und das nützlichere.
05Experiment 3 — does content help at all? Plus: how people actually searchExperiment 3 — hilft Content überhaupt? Und: wie Menschen wirklich suchen
The third experiment held the navigation pattern constant and varied only one thing: visual content in the menu — present or absent. The result cut against industry habit: interfaces without imagery in navigation were both faster (median 50 vs 64 time units) and more successful. Detailed pictures inside menus added visual noise where users needed scanning speed. A positive time↔SUS correlation (r = 0.31) tied the speed loss directly to satisfaction.
Das dritte Experiment hielt das Navigationsmuster konstant und variierte nur eines: visuellen Content im Menü — vorhanden oder nicht. Das Ergebnis widersprach der Branchengewohnheit: Interfaces ohne Bilder in der Navigation waren schneller (Median 50 vs. 64 Zeiteinheiten) und erfolgreicher. Detaillierte Bilder in Menüs erzeugten visuelles Rauschen, wo Nutzer Scan-Geschwindigkeit brauchten. Eine positive Zeit↔SUS-Korrelation (r = 0,31) verknüpfte den Tempoverlust direkt mit der Zufriedenheit.
The same cohort also produced a search-query study: respondents solved the same shopping tasks once through the structured menu and once by typing a free-text query. The queries turned out to follow a predictable grammar — users start with a noun ("shirt"), extend it with ownership ("men's shirt"), then a filtering adjective ("blue men's shirt"). And they bring the mess of real language: the verb "buy" and its variants, price words and synonyms, commas, plurals, typos.
Dieselbe Kohorte lieferte auch eine Suchanfragen-Studie: Die Teilnehmenden lösten dieselben Shopping-Aufgaben einmal über das strukturierte Menü und einmal per Freitext-Anfrage. Die Anfragen folgten einer vorhersagbaren Grammatik — Nutzer beginnen mit einem Substantiv („Hemd"), erweitern um Zugehörigkeit („Herrenhemd"), dann um ein filterndes Adjektiv („blaues Herrenhemd"). Und sie bringen das Chaos echter Sprache mit: das Verb „kaufen" und Varianten, Preiswörter und Synonyme, Kommas, Plurale, Tippfehler.
Why this became concrete search requirementsWarum daraus konkrete Such-Anforderungen wurden
A query like "find a men's shirt" contains three machine-readable slots: item (shirt), ownership (men's), filter attribute (blue / cheapest / …). A commerce search that only string-matches product titles fails all three. The study converted directly into parser requirements: strip and interpret intent verbs ("buy", "find"), map price words to sort filters, tolerate typos and plurals, and treat ownership + adjective as category and filter signals — not as literal text.
Eine Anfrage wie „Herrenhemd finden" enthält drei maschinenlesbare Slots: Artikel (Hemd), Zugehörigkeit (Herren-), Filterattribut (blau / am günstigsten / …). Eine Commerce-Suche, die nur Produkttitel string-matcht, scheitert an allen dreien. Die Studie übersetzte sich direkt in Parser-Anforderungen: Intent-Verben („kaufen", „finden") erkennen und entfernen, Preiswörter auf Sortier-Filter mappen, Tippfehler und Plurale tolerieren und Zugehörigkeit + Adjektiv als Kategorie- und Filtersignale behandeln — nicht als wörtlichen Text.
06Findings → design requirementsBefunde → Designanforderungen
The thesis deliverable wasn't a chart — it was a set of design requirements for mobile e-commerce, each one traceable to an experiment:
Das Ergebnis der Thesis war kein Diagramm, sondern ein Satz Designanforderungen für Mobile E-Commerce — jede rückverfolgbar auf ein Experiment:
| RequirementAnforderung | EvidenceEvidenz |
|---|---|
| Use matrix navigation as the default pattern for mobile e-commerceMatrix-Navigation als Standard-Muster für Mobile E-Commerce verwenden | Exp 1 & 2: higher task success and fewer errors, with and without contentExp. 1 & 2: mehr Task-Erfolg und weniger Fehler, mit und ohne Content |
| Keep menus visually light — minimize detailed imagery inside navigation itselfMenüs visuell leicht halten — detailliertes Bildmaterial in der Navigation minimieren | Exp 3: no-content menus faster (median 50 vs 64) and more successfulExp. 3: Menüs ohne Content schneller (Median 50 vs. 64) und erfolgreicher |
| Make products findable via several semantically related categories — a school backpack must appear under "boys", "girls" and "school"Produkte über mehrere semantisch verwandte Kategorien auffindbar machen — ein Schulrucksack muss unter „Jungen", „Mädchen" und „Schule" erscheinen | Task behavior: respondents entered different, equally reasonable category paths for the same productAufgabenverhalten: Teilnehmende wählten unterschiedliche, gleich plausible Kategoriepfade zum selben Produkt |
| Avoid over-long category lists and don't cram subcategories into compact patterns that hide optionsÜberlange Kategorielisten vermeiden und Unterkategorien nicht in kompakte Muster quetschen, die Optionen verstecken | Error logs + respondent feedback: long lists increased search time and missed targetsFehler-Logs + Feedback: lange Listen erhöhten Suchzeit und Fehlversuche |
| Zero tolerance for grammar errors in interface copy — they measurably damage trustNull Toleranz für Grammatikfehler im Interface-Text — sie beschädigen messbar das Vertrauen | Respondent feedback across experimentsTeilnehmenden-Feedback über alle Experimente |
| Search must parse intent parameters — item, ownership, filter attribute; handle "buy"-verbs, price synonyms, typos, pluralsDie Suche muss Intent-Parameter parsen — Artikel, Zugehörigkeit, Filterattribut; „kaufen"-Verben, Preis-Synonyme, Tippfehler, Plurale verarbeiten | Exp 3 search-query grammar studyExp. 3, Suchanfragen-Grammatik-Studie |
07The app designed on the evidenceDie App, entworfen auf der Evidenz
The requirements then drove the design of the Online Shop app — the screens at the top of this page. The research is visible in every layer:
Die Anforderungen prägten anschließend das Design der Online-Shop-App — die Screens oben auf dieser Seite. Die Research ist in jeder Ebene sichtbar:
Matrix catalog, kept light. Categories sit on two axes for one-tap intersection picks, and the menu itself stays visually quiet — imagery sells on product cards, not inside navigation.
Matrix-Katalog, leicht gehalten. Kategorien liegen auf zwei Achsen für Ein-Tap-Schnittpunkt-Auswahl, und das Menü selbst bleibt visuell ruhig — Bilder verkaufen auf Produktkarten, nicht in der Navigation.
Redundant category paths. Products are attached to every semantically plausible category, so "boys", "girls" and "school" all lead to the same backpack — the exact behavior respondents showed in the tasks.
Redundante Kategoriepfade. Produkte hängen an jeder semantisch plausiblen Kategorie — „Jungen", „Mädchen" und „Schule" führen zum selben Rucksack; genau das Verhalten, das die Teilnehmenden in den Aufgaben zeigten.
Search built for real queries. The search accepts what people actually type — intent verbs, price words, typos, plurals — and maps them onto item, ownership and filter parameters instead of string-matching titles.
Suche für echte Anfragen. Die Suche akzeptiert, was Menschen wirklich tippen — Intent-Verben, Preiswörter, Tippfehler, Plurale — und mappt sie auf Artikel-, Zugehörigkeits- und Filterparameter statt Titel zu string-matchen.
Clean product cards and a short checkout. Each card carries exactly what a comparison needs — image, name, price, one signal — and the checkout reads as a confirmation, not a questionnaire. Every stumble the logs could count was a stumble to design away.
Klare Produktkarten und ein kurzer Checkout. Jede Karte trägt genau das, was ein Vergleich braucht — Bild, Name, Preis, ein Signal — und der Checkout liest sich wie eine Bestätigung, nicht wie ein Fragebogen. Jeder Stolperer, den die Logs zählen konnten, war ein Stolperer, den es wegzudesignen galt.
08OutcomeErgebnis
The work was published in the proceedings of the ITMO Young Scientists' Congress and presented at two conferences — the all-university LII scientific conference and the XII Young Scientists' Congress (2023).
Die Arbeit wurde im Tagungsband des ITMO Young Scientists' Congress publiziert und auf zwei Konferenzen vorgestellt — der universitätsweiten LII-Konferenz und dem XII Young Scientists' Congress (2023).