Drag-and-drop UX: Signifiers, zpětná vazba a dostupné alternativy
Jak navrhnout přetahování, které mohou lidé objevovat a používat: uchopit signifiers, zvedat a zobrazit náhled zpětné vazby, zóny přetažení, fyziku a alternativu bez přetažení vyžaduje WCAG 2.2.
Core Takeaway
Zviditelněte přetahovatelné položky pomocí uchopovací rukojeti nebo změny kurzoru, potvrďte uchop pomocí zvednutí a stínu, zobrazte náhled výsledku při přetahování zvýrazněním oblastí přetažení a položku při upuštění jasně usaďte pomocí funkce Zpět. Vždy poskytněte nepřetahovací způsob, jak udělat totéž; WCAG 2.2 to vyžaduje na úrovni AA.
Zpětná vazba v každé fázi
Pokyny Nielsen Norman Group jsou takové, že jasné významy a jasná zpětná vazba v každé fázi činí přetahování zjistitelné a snadno použitelné. Jakmile je předmět uchopen, lidé potřebují vědět, že byl uchopen, a aby viděli, co se stane, než jej upustí.
- Signifier: ikona uchopovací rukojeti, uchopovací kurzor při umístění kurzoru nebo obojí.
- Uchopeno: zvedněte předmět pomocí stínu a mírného měřítka, aby vypadal zadržený.
- Náhled: zvýrazněte platné zóny shození a ukažte, kam předmět přistane.
- Upuštěno: animujte položku na místo a nabídněte vrácení.
Dostupnost: vždy nabídněte jinou cestu
Kritérium úspěšnosti WCAG 2.2 2.5.7, Pohyby tažením (úroveň AA), vyžaduje, aby vše, co se provádí tažením, bylo možné provést jedním ukazatelem bez tažení, pokud není tažení nezbytné. Běžnými alternativami jsou tlačítka pro pohyb nahoru a dolů, nabídka „Přesunout do“ nebo podpora klávesnice se šipkami. NN/g také poznamenává, že přesná alternativa často pomáhá všem, například hrubé přetažení na místo a šťouchnutí pomocí kláves se šipkami.
Fyzika umožňuje tažení cítit přímo
Přetažené položky by měly sledovat ukazatel bez zpoždění. Když se uvolní, pružina, která přenáší rychlost uvolňování do usazení, způsobí, že pokles bude fyzický, a ostatní předměty pohybující se stranou hladce ukazují, kde je mezera. Udržujte tyto pohyby krátké a snižte je, když je zapnutý omezený pohyb.
Dotkněte se podrobností
Na dotykových obrazovkách rozlišujte tažení od posouvání, často dlouhým stisknutím pro zvednutí. Udělejte úchyty dostatečně velké, abyste je mohli zasáhnout, automaticky posouvali seznamy při přetahování blízko okraje a poskytněte hmatovou zpětnou vazbu při vyzvednutí a vložení tam, kde je platforma podporuje.
Klíč Principle k zapamatování
- Ukažte, co lze přetáhnout pomocí úchytů nebo změn kurzoru
- Potvrďte uchopení a zobrazte náhled pádu
- Usaďte se jasným pohybem a nabídněte zrušení
- WCAG 2.5.7 (AA): poskytuje alternativu bez přetažení
- Použijte pružiny pro přirozené uvolnění; snížit pro snížený pohyb
Často kladené otázky
Zdroje
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI