Jak ručně uspořádat řádky v mřížce?
Chci svým uživatelům nechat uspořádat prvky v mřížce - neprovádět automatické třídění ve sloupci. Vyberou, který prvek je první, který přichází za druhým atd.
Myslel jsem na a viděl jsem některá řešení, která by mohla fungovat v závislosti na případě:
- Drag and drop: sexy, ale nefunguje pro dlouhé sítě s rolováním nebo stránkováním. Další nevýhodou je, že je neviditelná, možná ani nevíte, že je tato funkce k dispozici. Nakonec je vyžadována určitá obratnost. Lze jej však použít k pohybu více než jednoho prvku najednou.
- Šipky nahoru/dolů: srozumitelné a snadno použitelné pro malé pohyby, ale nudné, když musíte posunout poslední prvek na prvním místě. Také, když pohybujete elementem pár kroků, musíte chytit tuto šipku po každém jednom pohybu. Funguje pouze na jednom prvku najednou.
- Sloupec indexu: uživatel zadá číslo označující polohu prvku. Užitečné, když uživatel zná požadovanou absolutní polohu. Těžko uhodnout, co se stane, pokud bude zadáno již existující číslo. Funguje pouze na jednom prvku najednou.
Jsem v pokušení kombinovat dvě z těchto technik, jako je indexový sloupec + drag & drop, ale obávám se, že kumuluji nevýhody obou, místo toho, abych měl výhody obou.
Jaké jsou postupy pro přeskupování, které se osvědčily?
Netflix ve své frontě kombinuje tři metody. Můžete přetáhnout, ale také určit konkrétní číslo řádku, nebo jej kliknutím přesunout na samý vrchol:
Zajímavé je, že na svém řádku umístili ikonu „Nahoru“ (v kroužku zelenou barvou) přímo do každého řádku, na rozdíl od požadavku, aby uživatel provedl výběr, a poté kliknul někde v horní části stránky, kde většina webových aplikací takové ikony nebo tlačítka vkládá.
Ve vašem případě bych použil drag-and-drop, ale na každý řádek bych umístil ikonu ozubeného kola:
To by umožnilo několik akcí:
Uživatel může přetáhnout jeden nebo více řádků
Uživatel může vybrat více řádků a poté kliknutím na ikonu ozubeného kola nechat rozbalovací nabídku a provést libovolný počet věcí, např. přesunout výběr nahoru nebo dolů, přesunout výběr zadaného počtu řádků nahoru nebo dolů (v tom případě se objeví malý dialog), kopírovat, vyjmout atd. Prakticky žádný limit.
První věc, kterou se musíte zeptat, než se pokusíte zjistit, jak na to, je, jak často to uživatelé dělají.
Pokud se bude používat často, snažil bych se ji vytvořit tak, že použijete drag and drop a jednoduše auto-rolování stránky, jakmile uživatel udeří do určitého prahu.
Je dobrým pravidlem říci, že pokud uživatel potřebuje udělat něco docela často a můžete to usnadnit i zavedením exotického typu interakce, udělejte to. Uživatel je v pořádku s křivkou učení, protože z toho bude mít prospěch později.
Pokud to nebude používáno často, udělal bych šipku nahoru/dolů, možná to nevyjde, ale je to jasné.
Kombinoval jsem šipky nahoru/dolů s drag'n'drop.
Nutnost uhodnout se na nějaké číslo, nebo to musí předem vyřešit, je prostě těžkopádná. A přestože kolize mohou a měly by být řešeny v kódu, například pouhým zvýšením všech čísel, která jsou na nebo nad zadaným číslem, většina uživatelů se pokusí předem určit správné číslo, i když pouze z nejistoty ohledně toho, jak duplikát nebo špatné číslo bude zpracováno.
Šipky nahoru a dolů jsou mnohem pohodlnějším způsobem přeskupování na krátké vzdálenosti.
Pro delší vzdálenosti a více pohybů položek lze přidat drag'n'drop. Pro zajištění použitelnosti drag'n'drop na vzdálenosti více než jedné stránky by mělo být také provedeno automatické rolování mřížky. To znamená, že během operace přetažení se mřížka automaticky posouvá, když přetáhnete myš do určitého okraje horního nebo dolního okraje mřížky. Což je přesně to, co Průzkumník Windows dělá.
Abychom to ještě více rozšířili, rychlost posuvu může začít pomalu a zvyšovat, jakmile je tah stále v oblasti "citlivé na posun". Buďte opatrní s tím, a navíc nastavte maximální rychlost rolování: Byl jsem řízen k zuřivosti automatickým rolováním, které zrychlilo tolik a/nebo tak rychle, že jsem vždy roloval cestu kolem, kde jsem potřeboval být.
Drupal CMS má relativně dobré řešení, které škálovalo seznamy 30-50 položek. Nejste si jisti, jak by se škálovalo výše).
Příkladem je konfigurace „bloků“ webu - viz níže uvedený snímek obrazovky.
- Každá položka má 4cestný popisovač , který lze uchopit pro operace přetažení.
Popisovač poskytuje vizuální „dar“, že položku lze přetáhnout. - Seznam je rozdělen do sekcí.
Přesunutí položky do určité sekce lze provést jejím výběrem z kombinovaného zobrazení zobrazeného pro tuto položku
Přístup „drag and drop“ je mnohem plynulejší než šípy, které pohybují položkami o jeden krok. JIRA to dělá a je opravdu namáhavé dostat věci na správné místo.
Závisí to na tom, jak uživatelé systém používají:
Pokud má číslo řádku smysl (například pozice ve frontě), pravděpodobně jej chcete zobrazit a upravit.
Pokud je „udělejte toto první“ běžnou akcí, možná budete chtít zavést tlačítko „přesunout nahoru“ (nebo přesunout dolů).
Pokud vaši uživatelé, jako jsou klávesové zkratky, přidávají zkratky nahoru a dolů, ujistěte se, že výběr/zaostření sledují řádek, když se pohybuje, takže stisknutí zkratky nahoru třikrát skutečně posune řádek na 3 místa.
Můžete přidat tlačítka nahoru/dolů, uživatelé se mi nelíbí (uživatelé se mohou lišit)
A konečně, Drag & Drop, moji uživatelé oblíbený způsob, jak změnit pořadí řádků - v mé aplikaci neexistují žádné táhla a uživatelé dokážou přetáhnout a pustit v pohodě (vaši uživatelé se mohou lišit)
A ať už děláte cokoli, ujistěte se, že to otestujete u konkrétních uživatelů a uvidíte, jak se jim to líbí.