Jste tu poprvé? - Skrýt (musíte být přihlášeni)

25

Použitelnost v praxi 7. - Filtrování v e-shopech

Dělám z komára velblouda, nebo se i obyčejné filtrování v e-shopu dá vyřešit trochu lépe ve prospěch zákazníka?

Kategorie jsou obvykle triviální záležitostí, nad kterou netrávím příliš času. V jednom z posledních e-shopů ale bylo třeba přidat víc funkcí a jednoduchý blok tak trochu nabobtnal. Což by nijak zvlášť nevadilo, ale poté co jsem vše prošel, jsem mohl rozdělit funkce na 2 skupiny. Jedny řadí produkty okamžitě a jiné během dvou kroků (nastavíte hodnotu a stisknete tlačítko).

Shlédl jsem si nějaké jiné e-shopy (na ten mall lezu až příliš často, což není dobře... :) a vyšlo mi z toho, že je to rozhodně dost důležitá věc, aby se tím člověk zaobíral. Takže jsem se rozhodl obojí rozdělit na dvě části, tak logicky jak je to šlo a zároveň příliš neplýtvat místem. Vyšlo mi tohle. Kromě toho už mě napadla akorát estetická úprava, aby oba řádky nevypadaly stejně - například mall.cz to přesně tak má. Tu jsem nezapracoval, protože mi tam nic barevně v ten moment nesedělo, ale zřejmě jsem měl.

Původní návrh filtrování

Nemám k tomu moc co dodat, zajímá mě váš pohled na věc, zda jsem šel správným směrem, případně pokud vás to inspiruje, tak budu víc než spokojený. Jediná věc, se kterou si nejsem příliš jistý, je filtrování výrobce, které je propojené s cenou. Určitě by se dalo vyřešit jedním krokem, ale domnívám se že je vhodnější ponechat člověku možnost volby ceny spolu s tím. Pak ale vyvstává otázka, zda to lidi nesplete a nebudou očekávat, že musí vyplnit i cenu, aby se jim výrobce ukázal.

Aktualizace: Jelikož mě kolegové v komentářích posunuli správným směrem a vypsali lepší řešení než které tu ukazuji, doporučuji si to co napsali rozhodně projít. Očividně jsem se nad svým řešením nezamýšlel dostatečně. Na základě jejich tipů jsem udělal nový prototyp, který by být pochopitelnější a fungovat lépe.

Nový návrh filtrování

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #25
  • Jaa(c)
  • 19. February 2012 | 01:36
  • Skupina: Autoři / Redaktoři

Tak to máte sice pravdu, ale není moc projektů, které si mohou dovolit na každou činnost jednoho specialistu :)
Myslel jsem to spíše v menším měřítku - když budeme mít situaci grafik - kódér a grafik např. špatně vyřeší rozložení prvků, navigaci atd., tak kódér už s tím toho moc nenadělá...

  • #24
  • Tomáš Ledba
  • 18. February 2012 | 20:59
  • Skupina: Registrovaní Uživatelé

Jasne. Je to trochu malichernost. Ale presto... :-)

  • #23
  • Antonín Pospíšil
  • 18. February 2012 | 18:22
  • Skupina: Neregistrovaní

@Jaa(c): Samozřejmě, že by měl grafik řešit použitelnost svého návrhu, ale v ideálním případě jen na úrovni typografie, tvarů, barev, kontrastů apod. Přesně jak píše Tomáš. To, jak logicky a technicky bude postavena filtrace produktů v e-shopu není vůbec jeho práce. Je to práce např. interakčních designerů. I když velmi dobře vím, že zvláště u malých projektů je realita často odlišná a grafik řeší v podstatě vše. Včetně vymýšlení popisků kategorií a sloganů do hlavičky, což je zase práce copywritera nebo klienta :-)

Doporučuji přečíst si http://firemniweb.h1.cz/, kde je srozumitelně popsán profesionální postup při návrhu a tvorbě webu. Když přeskočím, tak tohoto případu se týká nejprve bod 13. a 14. a pak až dlouho za tím je samotný grafický návrh (bod 19. a 20.). Až poté to do rukou dostávají kodéři a programátoři, takže ani ti to nemají ve skutečnosti řešit.

  • #22
  • lefiath
  • 18. February 2012 | 17:38
  • Skupina: Správci

Pak ale mluvíme o ideálním případě. Spousta projektů nemá takový rozpočet, aby na tohle všechno mohla být samostatná osoba. Já sám se považuju víc za designéra než grafika.

  • #21
  • Tomáš Ledba
  • 18. February 2012 | 15:12
  • Skupina: Registrovaní Uživatelé

@Jaa(c): Pouzitelnost grafiky spociva ve spravnem kontrastu, barevnosti, typografii, apod. Ne ve volbe ovladacich prvku.

  • #20
  • Tomáš Ledba
  • 18. February 2012 | 14:10
  • Skupina: Registrovaní Uživatelé

@Jaa(c): a co pak dela UI designer, pripadne interakcni designer? ––> http://www.flickr.com/photos/reloade/3971651881/

  • #19
  • Antonín Pospíšil
  • 18. February 2012 | 11:06
  • Skupina: Neregistrovaní

@Jaa(c): Samozřejmě, že by měl grafik řešit použitelnost svého návrhu, ale v ideálním případě jen na úrovni typografie, tvarů, barev, kontrastů apod. To, jak logicky a technicky bude postavena filtrace produktů v e-shopu není vůbec jeho práce. Je to práce např. interakčních designerů. I když velmi dobře vím, že zvláště u malých projektů je realita často odlišná a grafik řeší v podstatě vše. Včetně vymýšlení popisků kategorií a sloganů do hlavičky, což je zase práce copywritera nebo klienta :-)

Doporučuji přečíst si http://firemniweb.h1.cz/, kde je srozumitelně popsán profesionální postup při návrhu a tvorbě webu. Když přeskočím, tak tohoto případu se týká nejprve bod 13. a 14. a pak až dlouho za tím je samotný grafický návrh (bod 19. a 20.). Až poté to do rukou dostávají kodéři a programátoři, takže ani ti to nemají ve skutečnosti řešit.

  • #18
  • Jaa(c)
  • 17. February 2012 | 17:15
  • Skupina: Autoři / Redaktoři

@Antonín: Naopak, grafik by právě měl řešit použitelnost svého návrhu. To je práce grafika, ne toho, kdo to pak bude kódovat/programovat...

  • #17
  • tellinger
  • 17. February 2012 | 16:53
  • Skupina: Registrovaní Uživatelé

Snaha byla, ale dneska to bludišťák nebude. ;-) Někdy není dobře všechno až příliš zjednodušovat. Lidé z mall.cz nad tím vyhledávačem určitě také strávili spoustu času, jak by co kde mělo fungovat.

  • #16
  • lefiath
  • 17. February 2012 | 15:52
  • Skupina: Správci

Jasně, je maličkost tam prostě přidat konkrétní částky, což se bere z databáze (cenové rozpětí konkrétní kategorie). Tedy jako maličkost to vidím já, možná je to na programování komplikovanější.

I já přidám jednu svojí poznámku. Když hledám nějaké zboží podle značky, tak jsem rád když mám možnost zaškrtnout více značek najednou a teď jenom...aha teď jsem si všiml jak je to na mall.cz, takže mám tomu rozumět tak že po výběru filtrování se objeví další možnosti (výběr více značek apod)?

Taky si myslím že ten posuvník na cenu je nejlepší volba. Zajímalo by mně, jestli je možné udělat ho tak, aby bylo hned vidět jaké je cenové minimum a jaké maximum hledaného zboží. Zákazník by tak měl hned přehled v jakém cenovém rozmezí se pohybuje.

  • #14
  • Antonín Pospíšil
  • 17. February 2012 | 14:58
  • Skupina: Neregistrovaní

Ona to ale, Petře, vlastně není ani tvoje práce. Jako grafik bys tyhle věci vůbec řešit neměl. Ale vím, jak to u malých projektů chodí, takže spíše držím palce při dalším vylepšování tohoto nebo dalších nových projektů ;-)

  • #13
  • Tomáš Ledba
  • 17. February 2012 | 14:17
  • Skupina: Neregistrovaní

2 pripominky z laickeho pohledu :-)

– Misto "Filtrovani" bych pouzil "Zobrazit pouze" nebo kdyz uz, tak alespon "Filtrovat". Davalo by to vetsi smysl.
– Pocet produktu je pekne nazornej, ale az moc vyraznej. Pritom ja kdyz neco shanim, tak ho na eshopech skoro nepouzivam.

T.

  • #12
  • lefiath
  • 17. February 2012 | 14:04
  • Skupina: Správci

Když se někde plácat nedá, tak mi to nevadí. Na trh obvykle chodím s celou kůží, tady jsem ukázal kapsu a je děravá, jak se zdá.

  • #11
  • Jiří Tvrdek
  • 17. February 2012 | 13:56
  • Skupina: Neregistrovaní

No jo no, když jdeš s kůží na trh, nečekej plácání po zádech :)

  • #10
  • lefiath
  • 17. February 2012 | 13:47
  • Skupina: Správci

Ach jo, dali jste mi to sežrat, takže mám o čem přemýšlet. Zatím mi vyšlo že je to z větší části špatně, pravděpodobně tedy zkusím zákazníkovi nabídnout ještě alternativní verzi co přepracuju, i když už je ta zakázka uzavřená. Teď abych šel předělat to filtrování a potom i článek :)

  • #9
  • Jiří Tvrdek
  • 17. February 2012 | 13:44
  • Skupina: Neregistrovaní

No, Lefiathe, je třeba o tom hodně přemýšlet. Vezmu to zeshora:

Řadit podle názvu/ceny. Co znamená větší šipka u názvu? Co ta menší? Která z nich mi udělá co a jak to poznám? Nutíš mě přemýšlet nad tím, která z nich mi vyfiltruje tak jak to chci. Jak pak poznám, podle čeho to mám seřazené, když filtr aplikuji? A proč je to tlačítko tak malé, trefím se na něj vůbec?
Doporučil bych tohle místo vyřešit dropdownem. Řadit od nejlevnějšího/nejdražšího. Řazení podle abecedy bych úplně vyhodil, kdo to použije? Buď kupuju značku, nebo konkrétní produkt, který budu hledat přes searchfield. Nenašla by se funkce, která by byla u tohoto konkrétního e-shopu užitečnější? Nějaká jakou jiný shop nemá?

Filtrování: Výrobce. Hm? Chvíli jsem přemýšlel, jestli se to teď filtruje přes výrobce, jinak by se mi to filtrovalo třeba přes materiál. Tos asi nechtěl, ne? Tady si má člověk vybrat značku, předpokládám. Takže bych namísto Výrobce pole pojmenoval Všichni výrobci nebo Všechny značky.

Je nutné tam cpát slovo Filtrování? Nebylo by pak více místa na cenový rozsah, který by šel vyřešit slidery? Slidery obecně lidi moc nechápou, ale zrovna u tohoto e-shopu bych se jich až tak nebál.

A konečně tlačítko Použít filtr. Proč je ta šipka vlevo od něj? Proč je vůbec tahle část bílá? Vypadá trochu jako textový input. Nehodilo by se tam něco jiného, než šipka? A proč to tlačítko nezvýraznit, aby vypadalo skutečně jako tlačítko?

U příznaků naopak plasticitu používáš, dokonce mají tvar šipky, což by naznačovalo, že se kliknutím na ně člověk někam dostane, ale to se předpokládám nestane.

No, dalo by se nad tím přemýšlet ještě dlouho, je zvláštní, kolik věcí lze dotáhnout mnohem dál, když se nad nimi člověk doopravdy zamyslí.
Držím palce.

  • #8
  • Antonín Pospíšil
  • 17. February 2012 | 13:37
  • Skupina: Neregistrovaní

„Ale tyhle věci na 2 způsoby bývají. Já jsem to akorát vizuálně rozdělil. Nevěříš mi že řada e-shopů to takhle má, že kombinují zvlášť okamžité filtrování (například ty šipky) a zároveň i pokročilější filtrování (jako výběr ceny od do)?“

Jak jsem už psal, rozdělení vizuální, klidně i větší, je naprosto v pořádku! Ale funkční rozdělení na jedno a dvou-krokové filtrování v jednom výpisu už v pořádku není. A to, že to má ten nebo onen e-shop ještě přece vůbec neznamená, že to tak mají správně a nejlepším možným způsobem.

  • #7
  • lefiath
  • 17. February 2012 | 13:36
  • Skupina: Správci

Máš pravdu, je to lepší řešení. Bohužel technické dispozice to v tomto případě nedovolily :-/

  • #6
  • Antonín Pospíšil
  • 17. February 2012 | 13:33
  • Skupina: Neregistrovaní

A) Sloučil bych položku „Řadit podle“ a „Filtrování“ do jedné. Select s výběrem (název, cena) a vedle toho dal šipky pro vzestupný a sestupný výpis.

B) Select pro výběr podle výrobce je lepší udělat například checkboxy, jinak si běžný uživatel nemá možnost vyfiltrovat například tři výrobce najednou. Ano, je tu multiselect přes ctrl, ale to většina lidí nezná a neumí tedy používat.

C) Jediné, kde je nutné potvrzovací tlačítko je tedy položka s rozmezím ceny a tu bych udělal táhly viz http://interface.eyecon.ro/demos/slider_minmax.html

  • #5
  • lefiath
  • 17. February 2012 | 13:29
  • Skupina: Správci

Ale tyhle věci na 2 způsoby bývají. Já jsem to akorát vizuálně rozdělil. Nevěříš mi že řada e-shopů to takhle má, že kombinují zvlášť okamžité filtrování (například ty šipky) a zároveň i pokročilější filtrování (jako výběr ceny od do)? S tím v situaci od situace nic nenadělám, takže jsem aspoň hledal způsob jak to odlišit. Myslíš že je tedy logičtější jinak fungující věci seskupit?

  • #4
  • Antonín Pospíšil
  • 17. February 2012 | 13:21
  • Skupina: Neregistrovaní

Prostě je hloupost a překážka pro uživatele dělat stejnou věc (filtrování zboží) na dva různé způsoby. Nevidím k tomu důvod.

  • #3
  • lefiath
  • 17. February 2012 | 13:11
  • Skupina: Správci

Právě z toho důvodu co píšu, přečti si to :P Vyšlo mi, že něco bude vyžadovat jeden krok (kliknutí) a něco dva kroky (nastavení, kliknutí, tedy vyžaduje tlačítko) a abych lidi nepletl tím, že to propojím, rozhodl jsem se to rozdělit na dvě skupiny.

Samozřejmě, ideální by bylo, kdyby se druhá skupina vůbec nevyskytovala, pak může jít i tlačítko pryč, ale v tomhle případě to bohužel nešlo.

  • #2
  • Antonín Pospíšil
  • 17. February 2012 | 12:59
  • Skupina: Neregistrovaní

Pokud to systém a programátor dovolí, tak je rozhodně lepší tam tlačítko „Použít filtr“ nedávat vůbec, ale generovat změny ve výpisu zboží v reálném čase. Proč to máš zde rozdělené?

  • #1
  • Gynekolog
  • 17. February 2012 | 03:51
  • Skupina: Registrovaní Uživatelé

Líbí se mi to, je to logický, hned jasný. Vzhledově bych tlačítko "použít filtr" lehce zakulatil jako jsou tlačítka šipek pro seřazení podle názvu/ceny, stejně tak "detail".

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi