• úvod
  • témata
  • události
  • tržiště
  • diskuze
  • nástěnka
  • přihlásit
    registrace
    ztracené heslo?
    KULHYUI design, design systémy, interakční design, ♥ Figma
    KULHY
    KULHY --- ---
    Z tohohle jsem si sednul na záď. Figma-like kolaborativní 3D design tool na modely, interaktivní scény/hry, 3D interface prototypy apod.
    Spline - 3D Design tool in the browser with real-time collaboration
    https://spline.design/
    KULHY
    KULHY --- ---
    To je docela sranda jak se to tady schazi ty ruzny pohledy. Fakt by me tesilo, vsechny ty vstupy sesbirat a udelat testovani. Bohuzel se nic takovyho nestane.

    Jeste par detailu a zajimavosti:
    - neni to muj design (mam trochu potrebu se od takoveho vysledku jako designer distancovat)
    - jedna se o filtr tabulkovyho vypisu ruzhnejch financinich zaznamu
    - je to desktop only
    - je tam modry podbarveni radku na hover
    - subsekce se rozeviraji na hover
    - pres to, ze to je subpar design, tak s tim uspesne pracuje tisice uzivatelu denne

    DSTEPZ: Validni uvahay, tezko ti dam ted odpovedi, ale vim ze levy panel s filtry nehrozi — ta apliakce ma tak preloadovanej interface, ze kdyz jsem to videl poprvy, tak jsem jen chvili ziral a nemel slov. Ale to je realita nekterejch odvetvi a fintech tam asi taky spada spolu s health, sience apod. (btw na tohle tema ma Vitaly Friedman ze Smashing Magazine fajn prednasku https://www.youtube.com/watch?v=2hlQqMigGZg%29

    ESTEN: Chapu tu pointu, ale toggle je proste pro me switch on/off nejake feature. Ja bych pouzil checkbox (nebo ten muj kontroverzni checkmark — ale chapu tu preferenci checkboxu, to uz jsem uznal). To litani ocima je imho jen domneka — podle me ta pevna pozice prvku znacici aktivni stav nalevo a prvku zancici dalsi uroven napravo naopak pomaha. Bud hledam nejakou polozku a nebo sekundarne koukam jestli je aktivni stav, takze se do sebe ty use cases nemichaji tim, ze by meli stejnou pozici a stridali se.

    HAVANA: Kazdopadne se muselo stat co popisujes. Samostanej modal s filtrama bych asi taky pri redesignovani prozkoumal, ale obecne se s tim patternem snzim setrit, preci jen te trochu hazi pryc z kontextu.

    Na konci dne by to stejne chtelo hlavne lepsi poradi, wording a grouping (proste obsahu a strukturu).
    HAVANA
    HAVANA --- ---
    Já bych teda asi podobně slozitej filtr řešil úplně vlastním popup oknem, a nesnažil bych se to nacpat všechno do podobnýho menu.
    Tohle trošku vypadá, že tam na začátku bylo pár položek, ale jak systém bobtnal přestali se tam vejít a začalo to bejt čím dál víc nepřehledný
    ESTEN
    ESTEN --- ---
    KULHY: Ok. Protoze je to nastaveni filtru, myslim si, ze je potreba, aby byl nejakej prvek videt i kdyz nebude zaskrtla zadna polozka. Problem tvyho reseni je, ze bez zaskrtlych polozek nepochopim na co se koukam a co ty polozky znamenaj; kdyz uvidim prazdny checkboxy, je mi hned jasny o co jde.

    Jenze jak jsou tam smichany submenu s filtrama, tak je problem s rychlym rozpoznanim toho co je submenu a co je filtr. Submenu poznam podle caretu vpravo (a/nebo chybejiciho checkboxu), filtr podle checkboxu vlevo, takze musim litat ocima, abych pochopil co je co. Tomu v ty stavajici variante paradoxne pomaha to ruzny odsazeni, ale to zase naznacuje nejakej hierarchickej vztah, kterej tam ve skutecnosti neni.

    Muj navrh (toggle slider vpravo) podle me resi oba problemy -- na prvni pohled poznam, ze ty polozky jsou zapnutelny filtry, a zaroven je bez namahy odlisim od submenu (protoze odlisovaci prvek je na stejny strane).
    DSTEPZ
    DSTEPZ --- ---
    KULHY: Z hlediska pristupnosti jsou ty checkboxy lepsi (vetsi kontrast), ale jak pises, chtelo by to mnohem vetsi kontext. Kolik je kategorii v tech submenu? To je nakej dashboard nebo zakaznicka zona? Nebylo by lepsi mit filtry jako listu vlevo a neresit to takhle desivym dropdownem? Neslo by zjenodusit copy a celkove strukturu?

    Napr. mit kategorii Sales, podkategorii Representative a k tomu volby Assigned / Assigned Invoice Level / Unassigned
    atd.

    Kolik vysledku to vrati kdyz tam zaskrtas 5+ voleb? Pocita se s takhle komplexni filtraci na mobilni verzi?

    Jako filtry jsou obecne hodne slozita disciplina.
    KULHY
    KULHY --- ---
    ESTEN: Proc? Nemam nic proti jinym pohledum na vec, jen zkuste trochu rozvest proc by jste volili takovy a makovy reseni, at to ma uroven. Mozna ti unikl kontext toho menu. Mrkni jak diskuze zacala. Treba toggle vnimam vic jako prvek pro settings, options, configuration.
    ESTEN
    ESTEN --- ---
    KULHY: ja bych tam nacpal toggle slidery na pravou stranu, odsazeni zrusil uplne
    KULHY
    KULHY --- ---
    DSTEPZ: Hele chapu — a asi mas pravdu, ale i tak mi to prijde jako zdrava light alternativa, mozna i diky tomu ze to neni uniformni list, ale jsou tam i ty potvory s podurovni. Muzeme si samozrejme rict, ze ty taky meli mit indikaci zatrhnutyho child filtru, ale to by vedlo k dalsimu zeslozitovani UI a na kontrolu mas pak prehled aktivnich filtru mimo list. tady rychlej check. Problem vidim spis v tom odsazeni,

    DSTEPZ
    DSTEPZ --- ---
    KULHY: S tim rozdilem ze ty priklady, co ukazujes, jsou klasicky menu dropdowny, ale ty tam mas filtr u kteryho se standardne checkboxy pouzivaj, pze tam je ten use case trosku jinej :-)
    KULHY
    KULHY --- ---
    DSTEPZ: To byl celkem rozumnej zaver. :) Ano — neptam se na UI. Diky za poznatky jak chapes zarazeni filtru.

    Ale tak kdyz jsme v tematickym auditku — tak pro zabavu. Je tam toho hromada spatne, ja bych to taky takhle nedelal. Je to teda multi-select, ale treba zasmogovat to menu checkboxy mi prijde fail. Podivejte se na podobny typy menu. Ten nahatej check funguje skvele. Odsazeni samozrejme spatne — souhlas a melo by byt jako na tehlech prikladech.

    DSTEPZ
    DSTEPZ --- ---
    A asi se smazu, pze vlastne neresis vubec jak to vypada :))

    Jinak obecne filtry jsou komponenta, coz je nadstavba design systemu. Templaty jsou jsou zase nadstavba komponent. Zaroven bych se asi poradil s devs jak tohle resit, pze oni by tu strukturu meli srozumitelnou v nejakym storybooku nebo co pouzivaj
    DSTEPZ
    DSTEPZ --- ---
    A kdyz uz tam mas checkboxy/radio whatever, tak aby to odsazeni tak neplavalo, tak bych tam pred tim textem udelal uplne klasickej checkbox (outline a fajfka uvnitr) po selectu anebo fajfku dat k pravymu okraji a text normalne zarovnat. Ale jak rikam, neni z toho jasny jestli je to mutiselect nebo radio
    DSTEPZ
    DSTEPZ --- ---
    KULHY: Fajfku (checkbox) se defaultne pouziva pri potvrzovani legal, multiselectu atd ,ale tady bych asi spis pouzil radio button (pokud tam teda user nemuze vybrat vic veci). Co si spis rikam je, ze je to produktove blbe. Takhle silenej filtr bych ja asi hodne rychle zavrel. Pro inspiraci mrkni na e-commerce filtrace, kde mas treba dva i tri druhy filtru podle parametru/typu a navic pak nejaky razeni.
    KULHY
    KULHY --- ---
    JARDABEREZA: Jo projdu.

    Dik za feedback, zacal jsem delat na produktu kde je takovyhlech preslapu tuna. Nicmene redesign neni na poradu dne.
    JARDABEREZA
    JARDABEREZA --- ---
    KULHY: Třeba tady říkají, že ikona a popisek může být ReacNode. Tzn. jako property můžeš dovnitř strčit libovolnou jinou komponentu. https://ant.design/components/menu
    JARDABEREZA
    JARDABEREZA --- ---
    KULHY: K tomu menu... Já bych si udělal rešerši jak to řeší jiné design systémy a z každého si vybral to nejlepší. Jinak z pohledu UI... ty checkboxy bych udělal jinak... to odsazení se tam nehodí, vypadá to pak, že to je nějaký podúroveň.
    KULHY
    KULHY --- ---
    Kdyby někdo měl názor jak naložit s tím menu specificky a podle čeho se tak rozhodl, tak klidně ještě pište. Může mi to pomoci se lépe utřídit myšlenky.
    KULHY
    KULHY --- ---
    DSTEPZ: Jasně, to jo, ale pořád se to trochu vymyká — poučky atomicu jsou většinou popisovaný nad webem, ale ty webový apps jsou svou komplexitou trochu záludný.

    Já si to vydefinuji, zkoušel jsem rešerši. Ale děkuji za příspěvky, asi to bude něco s těma šablonama a tím co popisuje JARDABEREZA.
    DSTEPZ
    DSTEPZ --- ---
    KULHY: Nevim, jestli to chapu dobre, ale tohle resi princip atomic designu

    KULHY
    KULHY --- ---
    Třeba tady filtr v produktu teď někdo navrhoval, že by to komplexní dropdown menu (které je samo o sobe instance kompoenenty menu) mělo být součástí té komponenty včetně konkrétního obsahu. Já tvrdím, že to tam už nepatří. A že se to dá dát někam do nějaký nadstavby typu templates to chápu, ale jde mi hlavně o tu definici pravidel — co ještě patří do design systému a co už jsou právě nějaký templates. Podle čeho by jsme se při dalším rozvoji mohli řídit.

    Kliknutím sem můžete změnit nastavení reklam