Zurück zur Startseite

DK, Zurück zur StartseiteDaniel Kurdoghlian

Schreibe mirSchreibe mir
Zurück zum Portfolio
Leistungen

Frontend-Entwicklung, UX Engineering

Branche

B2B-Marktplatz

Jahr

2024

Ein Preis-Slider, der 500 € und 50 Millionen € erreicht.

Auf dem Preisfilter des Marktplatzes gehörten 99 % der Slider-Spur dem oberen Ende des Bereichs. Die Inserate reichen über fünf Größenordnungen, von wenigen hundert Euro bis 50 Millionen, und die meisten liegen unter 500.000 €. Käufer trafen die Preise nicht, auf die es ankam, und ignorierten den Filter.

DIE HERAUSFORDERUNG

Zehn Pixel für den Großteil des Markts

Der eingebaute Slider bildete seine 1.000 px lange Spur linear auf 0 bis 50 Millionen € ab. Der Bereich von 0 bis 500.000 €, in dem die meisten Inserate liegen, bekam rund 10 Pixel. Wer Büros unter 300.000 € suchte, konnte diesen Wert nicht einmal mit Absicht treffen, und im Support landeten Tickets über den "kaputten Slider". Die üblichen Auswege schloss der Kunde aus: kein zweites Feld zum Eintippen einer Zahl, keine Aufteilung in mehrere Slider. Eine Spur, der ganze Bereich, und an beiden Enden musste es sich natürlich anfühlen.

DIE LÖSUNG

Eine Potenzkurve mit einer einzigen Stellschraube

Die naheliegende Lösung ist eine logarithmische Skala, und die habe ich verworfen: Eine Log-Skala hat genau eine Form. Sie komprimiert den oberen Bereich immer gleich und lässt keine Kontrolle darüber, wie viel Spur das untere Ende bekommt. Eine Potenzkurve erledigt dieselbe Aufgabe mit einem Regler. Die Slider-Position wird auf 0 bis 1 normalisiert und mit einem Steepness-Exponenten potenziert, bevor sie mit dem Maximum multipliziert wird. Bei Steepness 5 deckt die untere Hälfte der Spur rund 3 % des Bereichs ab, die letzten 10 % der Spur rund 40 %. Der Preis dafür sind grobe Schritte oben, wo ein Schritt den Wert um Hunderttausende Euro bewegt. Dort ist Präzision am wenigsten wichtig. Die Rohwerte sahen trotzdem kaputt aus, etwa 387.422 €, deshalb rundet eine zweite Funktion jeden Wert auf einen Schritt, der mit der Größenordnung mitwächst.

Position zu Wert und zurück. Die Umkehrung setzt den Griff an die richtige Stelle, wenn ein Wert aus der URL kommt:

TypeScript
const toLogValue = (position, maxValue, resolution, steepness) => {
  if (position === 0) return 0;
  const normalized = position / resolution;
  return Math.round(Math.pow(normalized, steepness) * maxValue);
};

const toSliderPosition = (value, maxValue, resolution, steepness) => {
  if (value === 0) return 0;
  const normalized = Math.pow(value / maxValue, 1 / steepness);
  return normalized * resolution;
};

// The exponent comes from the element, not from the code
const steepness = Number(slider.dataset.steepness ?? 5);

Kurve ausprobieren

Zieh den Preis-Griff und vergleich den Wert mit dem, was ein linearer Slider an derselben Position anzeigen würde. Dann ändere die Steepness: Bei 1 ist die Kurve die Diagonale, bei 5 die Produktionseinstellung. Die Zahlen darunter zeigen, wie viel Spur der Bereich von 0 bis 500.000 € bekommt.

€ 1.550.000
5

1 ist die Diagonale, also ein linearer Slider. 5 ist die Produktionseinstellung. Ab 7 deckt die untere Hälfte der Spur kaum 1 % des Bereichs ab.

Potenzkurve
€ 1.550.000
Linearer Slider, gleiche Position
€ 25.000.000
Vor der Rundung
€ 1.562.500
40 % / 1 %Spur für 0 bis 500.000 €, Kurve / linear
3,1 %Untere Hälfte der Spur deckt ab
€ 15.688Ein Schritt am Griff
€ 50.000Rundungsschritt hier

Ein Zwanzigstel der Größenordnung als Rundungsschritt, damit aus 387.422 € 385.000 € werden und aus 3.870 € 3.850 €:

TypeScript
const roundToNiceStep = (num) => {
  if (num === 0) return 0;
  const magnitude = Math.floor(Math.log10(num));
  const step = Math.pow(10, magnitude) / 20;
  return Math.round(num / step) * step;
};
DAS ERGEBNIS

Käufer, die den Filter aufgegeben hatten, kamen zurück

Nach der Umstellung griffen Leute, die den Preisfilter bisher übersprungen hatten, wieder darauf zu, und die Filternutzung stieg insgesamt spürbar. Tickets zum Slider kamen keine mehr. Der Kunde bekam das ohne zweites Eingabefeld: Die Spur sieht aus und funktioniert wie jeder andere Slider, nur die Abbildung dahinter ist eine andere. Die gesamte Umsetzung hat unter 30 Zeilen und keine messbaren Performance-Kosten, und das Produktteam kann die Kurve für jeden Slider auf der Seite umformen, ohne ein Release anzufragen.

FÜR DEIN PROJEKT

  • Wann es passt

    Überall dort, wo ein Slider mehr als zwei Größenordnungen abdeckt und die meisten Datensätze am unteren Ende liegen: Preise, Budgets, Flächen, Entfernungen. Eine lineare Spur verschwendet ihre Pixel dort, wo keine Daten sind.

  • Was du prüfen solltest

    Wo deine Inserate auf dem Bereich tatsächlich liegen und wie viele Pixel dieser Abschnitt bekommt. Teilt sich der Großteil deines Bestands ein paar Prozent der Spur, raten deine Nutzer. Dann schau auf die Labels: Ein Filter, der 387.422 € anzeigt, wirkt kaputt, auch wenn er funktioniert.

  • Was es braucht

    Rund 30 Zeilen TypeScript, keine Library und keine Änderung im Backend. Die Kurve ist ein Attribut pro Slider, das Produktteam kann sie ohne Release nachjustieren.

FAQ

TECHNOLOGIE-STACK

TypeScript
Django

Daniel hat bei der Gründung und Umsetzung der Unternehmen Solvster und VIARES einen entscheidenden Beitrag geleistet. Er war verantwortlich für den gesamten technischen Aufbau der Onlinepräsenz, inklusive der Serversetups, der Entwicklung und Optimierung der Website sowie der Sicherstellung der Funktionalität. Besonders beeindruckt hat mich, wie proaktiv und lösungsorientiert er immer an Verbesserungen gearbeitet hat. Daniel war stets sehr responsiv und zuverlässig - es war eine Freude, mit ihm zusammenzuarbeiten. Seine Expertise und sein Engagement haben maßgeblich zum Erfolg beider Projekte beigetragen!

Dietmar Eglhofer - Geschäftsführer, Solvster & VIARES

Tritt in die Fußstapfen von Dietmar und erwecke deine Vision zum Leben.

Schreibe mirSchreibe mir