it-swarm-eu.dev

Návrh uživatelského rozhraní pro řazení položek v seznamu

Jaký design komponent/uživatelského rozhraní byste použili pro řazení položek v seznamu (tabulka s tlačítky nahoru/dolů)?

6
padis

Drag & drop položek je pravděpodobně nejlepší pro většinu uživatelských rozhraní. Bohužel je obtížné zajistit, aby byla tato funkce zjistitelná. Pomáhá oblast „grabber“ poblíž každé položky. Vizuální zpětná vazba při přetahování a automatické posouvání při přetahování položky na hranu jsou nezbytné v dobrém uživatelském rozhraní pro třídění drag & drop.

Je dobré poskytnout move up a move down tlačítka, kromě přetažení. Neexistuje žádná všeobecně a okamžitě rozpoznaná „grabberová“ ikona/styl. U zřídka používaných rozhraní může být čas strávený používáním poněkud nemotorných tlačítek kratší než doba, po kterou může uživatel objevit účinnější funkce drag & drop.

Navíc s drag & drop existuje mnoho jemných detailů, které jsou pro uživatele frustrující, pokud nejsou provedeny správně (např. Autoscroll). Tlačítka jsou při častém používání neefektivní, ale zřejmá, snadno použitelná a mnohem snadněji kódovatelná.

5
dbkk

Přetažení lze považovat za „přímou manipulaci“, kdy kliknutí přímo na seznam mají účinek, oproti „nepřímé manipulaci“, kde máte samostatné tlačítko nebo jinou akci, která se v seznamu projeví.

V závislosti na tom, co je ve vašem seznamu, mohou být vhodné oba.

Ať už děláte cokoli, mějte na paměti radu mudrců Nejlepších 10 chyb při návrhu Jakoba Nielsena :

Drag-and-drop návrhy jsou často nejhoršími pachateli, když není zřejmé, že něco lze přetáhnout nebo kde lze něco upustit. (Nebo co se stane, když přetáhnete nebo pustíte.) Naproti tomu jednoduché zaškrtávací políčka a příkazová tlačítka obvykle bolestivě ukazují, na co můžete kliknout.

Pokud tedy na seznamu poskytujete možnost přímé manipulace, uveďte vizuální podněty, jako například:

  1. vizuální „grabber“ oblast (řada teček nebo čar) naznačující „grabbabilitu“
  2. změna kurzoru
  3. zpětná vazba při pohybu. Viz toto demo ačkoli si všimněte, jak můj bod (1) není podporován, a tak není zřejmé, že tyto seznamy jsou prázdné.
4
Julian H

Souhlasím s tím, že nyní je pravděpodobně upřednostněna přímá manipulace s prvky.

Bez ohledu na obvinění, že 37 signálů je trochu na arogantní straně, jejich Basecamp je nesmírně použitelná aplikace. Téměř libovolný seznam v této aplikaci umožňuje přeskupování prvků přetažením.

Nejprve musíte kliknout a přejít do reorganizace pomocí textového odkazu v horním rohu. Pak je tu malý obrázek, který jasně naznačuje „pochopitelnost“, na kterou kliknete a podržíte a poté manipulujete s pohybem položky. Viz příloha.

alt text

2
jameswanless

Tlačítka nahoru/dolů jsou v pořádku, ale trend směřuje k přímému ovládání dat, tj. K možnosti kliknout (nebo klepnout) na položku a poté ji přesunout. Významným příkladem je fronta Netflix. To může fungovat i při výběru více položek v seznamu.

0
Hisham

Mé preference je použít drag and drop s jasnými drag selektory, které se zobrazí při přechodu myší. V naší aplikaci používáme dvojitou šipku nahoru/dolů, která ukazuje, že položka může být změněna.

Jednoduše změna kurzoru je dost dobrá pro technicky zdatný dav, ale pro aplikace pro všeobecné účely chcete něco více zřejmého.

0
Sam