UX с плъзгане и пускане: Сигнификатори, обратна връзка и достъпни алтернативи
Как да проектирате плъзгане и пускане, хората могат да открият и използват: захващане на знаци, повдигане и преглед на обратна връзка, пускащи зони, физика и алтернативата без плъзгане, изисквана от WCAG 2.2.
Ядро за вкъщи
Направете плъзгащи се елементи очевидни с дръжка за хващане или промяна на курсора, потвърдете хващането с повдигане и сянка, визуализирайте резултата, докато плъзгате, като маркирате зони за пускане и установете елемента ясно, когато го пуснете, с отмяна. Винаги предоставяйте начин без влачене да правите едно и също нещо; WCAG 2.2 го изисква на ниво AA.
Обратна връзка на всеки етап
Насоките на Nielsen Norman Group са, че ясните знаци и ясната обратна връзка на всеки етап правят плъзгането и пускането откриваемо и лесно за използване. След като даден предмет бъде грабнат, хората трябва да знаят, че е грабнат и да видят какво ще се случи, преди да го изпуснат.
- Сигнификатор: икона за дръжка, курсор за хващане при задържане или и двете.
- Хванат: повдигнете предмета със сянка и лек мащаб, така че да изглежда задържан.
- Визуализация: маркирайте валидни зони за падане и покажете къде ще кацне артикулът.
- Изпуснат: анимирайте елемента на място и предложете отмяна.
Достъпност: винаги предлагайте друг начин
WCAG 2.2 критерий за успех 2.5.7, Плъзгащи движения (ниво AA), изисква всичко, направено чрез плъзгане, да може да бъде направено и с един показалец без плъзгане, освен ако плъзгането не е от съществено значение. Често срещани алтернативи са бутони за движение нагоре и движение надолу, меню „Преместване към“ или поддръжка на клавиатура с клавиши със стрелки. NN/g също така отбелязва, че точната алтернатива често помага на всички, например грубо плъзгане на място и побутване с клавишите със стрелки.
Физиката кара плъзгането да се чувства директно
Плъзганите елементи трябва да следват показалеца без забавяне. Когато бъде освободена, пружина, която пренася скоростта на освобождаване в утаяването, прави падането да се усеща физически, а други елементи, които се движат настрани, плавно показват къде е празнината. Дръжте тези движения кратки и ги намалете, когато намаленото движение е включено.
Докоснете детайли
На сензорни екрани разграничете плъзгане от превъртане, често с продължително натискане, за да вземете. Направете дръжките достатъчно големи за удряне, автоматично превъртайте списъци при плъзгане близо до ръба и дайте хаптична обратна връзка при вдигане и пускане, където платформата го поддържа.
Ключове Principle, които трябва да запомните
- Покажете какво може да се плъзга с дръжки или промени на курсора
- Потвърдете грабването и прегледайте падането
- Уреждане с ясно движение и предлагане на отмяна
- WCAG 2.5.7 (AA): предоставя алтернатива без плъзгане
- Използвайте пружини за естествено освобождаване; намали за намалено движение
Често задавани въпроси
Източници
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI