Výběr číselného rozsahu v e-shopu: kletba statistiky

před 4 lety — 11. 12. 2012

Chcete si koupit notebook. Máte něco kolem pětadvaceti tisíc, takže by vysněná mašina měla stát něco mezi dvaceti a třiceti. Tenhle rozsah tedy chcete nějak vyfiltrovat na e-shopu. Jak by měl vypadat ovládací prvek, který umožňuje snadno vybrat číselný rozsah?

Pěkný a funkční příklad takového prvku má na webu Alza.cz:

screen-shot-2012-12-11-at-161755.png

Alzácký ovládací prvek má ale zásadní problém. Problémem je ignorování toho, jak v běžném světě vypadají soubory číselných hodnot. Ano, tohle smrdí statistikou, gaussovkami a podobnými věcmi, ale nic se nebojte – vygooglil jsem si obrázky! A skutečný zásadní problém objevíme společně!

Dobrodružství teorie

Když máme nějaké množství hodnot, například cen notebooků anebo teplot v průběhu roku, mají ve zvyku vypadat nějak takto (graf ukazuje množství prvků s podobnou hodnotou určité vlastnosti, v tomto případě věku):

image038.jpg
(Zdroj: Web o statistice Infinity Stat, výsledek google hledání "distribution dot plot". Ano, vůbec to nesouvisí s notebooky na Alze.)

Nalevo vidíme větší množství teček, napravo jsou tečky spíše osamocené (a smutné). Někdy jsou v podobných grafech osamocené tečky nalevo od té velké hromady, jindy napravo, to už záleží na povaze souboru dat. Ale podstatné je, že většinou se nějaké takové ulítlé (terminus technicus!) tečky najdou.

Co z toho plyne pro náš ovládací prvek? Kde je nějaký problém?

Shodou náhod mají ceny notebooků na Alze velmi podobou strukturu jako tečky v předvedeném grafu. To v důsledku znamená, že nejdražší notebook za 160 litrů je o 80 tisíc dražší než druhý nejdražší. S trochou pohrávání objevíte, že úsek 68–160 tisíc je větší polovina (haha) našeho vybíracího prvku a nachází se v něm – tramtadá: 4 notebooky.

screen-shot-2012-12-11-at-161928.png

Na opačné spektra je situace nahuštěnější, ale protože prvek zaokrouhluje hodnoty, můžeme dosáhnout výběru, který obsahuje – tradá: 0 notebooků.

screen-shot-2012-12-11-at-161814.png

Proč je to ale především problém? Pokud si chceme vybrat notebook za 20–30 tisíc (kterých je v e-shopu 194), musíme myší (nedejbože prstem) popojíždět velmi pečlivě:

screen-shot-2012-12-11-at-163634.pngVyzkoušejte si to na tabletu. (It's a trap!)

Co s tím?

Řešení je velice snadné. Ve statistice se běžně používá (po důkladném zvážení, samozřejmě) ořez ulítlých hodnot. Takové hodnoty totiž zkreslují průměry a statistikům způsobují noční můry.

Stejně to můžeme udělat i my – krajních několik procent hodnot ořízneme a vyčleníme jim speciální políčko, kam je všechny sesypeme. Běžně se ořezává 5 %, ale Alze by v tomto případě pomohlo i bezpečné jedno procento. A pak namísto hodnot "6 tisíc" a "160 tisíc", které jsou nyní krajní, pojmenujeme krajní políčka "minimum" a "maximum" (nejlépe vymyslíme nějaké lidštější názvy, na což teď nemám chuť).

Hodnoty, které nejsou ulítlé se nám tak pěkně rozprostřou po našem ovládacím prvku a vybrat tu správnou hodnotu nebude vyžadovat mikrometrovou přesnost.

Pro srovnání: kdybychom jednotlivé hodnoty rozložili do políček, nebo – pokračujme v infantilizaci tohoto textu – do šuplíčků, v původním užití budou vypadat takto (kresleno od oka):

screen-shot-2012-12-11-at-165434.png

Povšimněte si teček napravo – některé z nich mají šuplíček vlastní, některé jej sdílí jen s jedinou další tečkou. Zato nalevo jsou tečky namačkané jako... prostě moc namačkané.

V novém prostředí se šuplíčky narovnají jinak – všechny ty osamělé tečky napravo jsou v šuplíku "maximum" a basta. Tečky nalevo jsou najednou ve více šuplíčcích. Stále je v něm teček podobné množství jako v některých šuplíčcích na levé straně grafu:

screen-shot-2012-12-11-at-165421.png

Výsledek

Ovládací element by pak při výběru hodnot 20–30 tisíc mohl vypadat takto:

screen-shot-2012-12-11-at-170228.png

Jupí! Malý krok pro designéra, troška škrábání se na hlavě u developerů, ale velký skok pro použitelnost.

Poznámky

← archiv