Лучший способ указать & ldquo; draggability & rdquo; в веб-приложении (или вообще)? [закрыто]

Когда перетаскиваемость не очевидна (пример 1 в вашем вопросе), я обычно ищу «ручки» на объектах, которые выглядят как места, где можно что-то захватить. Например, в нижней части окна ответа «Переполнение стека» есть один, чтобы изменить размер ввода текста.

Я думаю, что лучшая подсказка - это визуальный дескриптор, то есть графический элемент, который предполагает, что вы можете что-то там захватить. Часто я вижу это в виде ребристой поверхности. Как на ручке под окном ответа или в FF ребристый элемент на ручке полосы прокрутки.

Переупорядочение элементов списка с помощью интерфейса перетаскивания, используемого большим количеством людей (популярное приложение для пар), Avocado, использует вариант меню гамбургера (четыре строки вместо трех):

Демо

Если ваш элемент пользовательского интерфейса может свободно перемещаться, имеет смысл придать ему «уменьшающийся» край и тень. Таким образом, элемент пользовательского интерфейса выглядит менее стационарным, так как он выглядит отключенным от остального пользовательского интерфейса. Вроде как окно.

В том случае, если ваш элемент пользовательского интерфейса может перемещаться только вдоль одной оси, «рифленая» поверхность имеет для меня смысл.

Мне не нравится ни один из 3, но у меня нет лучшего лучшего решения. Из трех второй лучше, но в элементах должно быть что-то визуально различимое (строка заголовка, цвет или «дескриптор»), указывающее, что их можно перемещать.

Мне тоже не нравится ни один из вариантов, но, вероятно, вариант №2 является наиболее понятным из представленных вами.

Хорошо, это веб-приложение. поэтому он не должен оставлять никаких вопросов. Это зависит от того, насколько важен интерфейс перетаскивания для вашего приложения. Как правило, 2-й вариант почти достаточно хорош - однако человек может

• КОГДА-либо не навести указатель на перетаскиваемый элемент - рассмотрите возможность использования сенсорного экрана.

• не заметят, что форма курсора изменилась, потому что он был чем-то отвлечен else.

• видят, как курсор меняет форму, но выглядят озадаченными и все еще не рассматривают попытку перетаскивания. Удивительно, но многим людям, особенно пожилым и неопытным в работе с компьютерами, совсем не понравится эта концепция управления. и даже у тех, кто переживает, может быть плохой день, и они не могут его понять.

В худшем случае человек проводит около 10 секунд, не понимая, что делать, бросает ваше приложение и уходит в elswehere.

Если можно использовать для более или менее полной функциональности без него, а перетаскивание - это удобная функция, тогда вариант 2/3 может быть как раз подходящим.

Однако он может окупиться, если сделает его полностью надежным!

• Значок очистки, обозначающий перетаскиваемые элементы управления - вам придется поэкспериментировать, что лучше всего выглядит в вашем конкретном макете - может быть простая стрелка или рука, или может быть изображение 2 или 3 прямоугольников и стрелка, показывающая, что вы ожидаете от людей. Лично я считаю, что значок с 3 линиями слишком стилизован и подходит только для людей, которые хотят глубоко ознакомиться с интерфейсом, поэтому он работает на iPhone, но это может быть плохо для вашего веб-приложения.

• поместите этот значок непосредственно на или непосредственно рядом с элементами управления, которые можно перетаскивать. Отличие от ваших решений 2, 3 в основном состоит в том, что они остаются видимыми все время.

• на той же странице предоставьте поле, которое выделяется цветом и имеет этот значок и текстовое объяснение. Если вы подозреваете, что такой ящик может повредить удобству использования, предоставьте пользователю возможность скрыть его навсегда или на день. Пользователь может случайно щелкнуть предупреждение - многие люди просто не читают то, что они нажимают, поэтому, хотя это может быть излишним, подумайте о том, чтобы заставить пользователя перетащить это уведомление в определенную область (например, всплывающую корзину ), чтобы скрыть это, чтобы убедиться, что он действительно понял, что такое перетаскивание. .oO (возможно, я должен запатентовать это ... ой, слишком поздно! :)

Если вы не Не хотите давать текстовое объяснение, спроектируйте свой интерфейс так, чтобы его можно было использовать без перетаскивания. Учтите также, что перетаскивание не работает с каждым устройством ввода одинаково хорошо, особенно пользователи тачпада, вероятно, возненавидят вас, если вы заставите их.

Изменить: сейчас 6 утра, тот, кто обнаружит опечатки, должен их сохранить.

Второй - лучший. Кроме того, когда кто-то нажимает на что-то перетаскиваемое, сделайте его границу пунктирной / пунктирной, чтобы указать, что это можно перемещать.