Comments 12
Мышь и контакт областей — всё верно! Насчёт подсветки: используйте прозрачность или жирность для подсказки target-объекта (цвета, действительно, пусть останутся для образовательной части)
Тут есть один момент. Хочется подсвечивать объекты-target и в случае коллизии. Например, цвета — оставим для подсветки ответов, а «потенциальный объект-target» в процессе drag-а будем оформлять, например, рисуя обводку. Жирную слошную у одного, если нет «коллизии», жирную пунктирную — у всех, с которыми «коллизия».
Собственно, разные стили — да, хорошо. Но поскольку я так и не встретил нигде решения, которое при drag-and-drop использует контакт областей, подумалось — не фигню ли городим?
Собственно, разные стили — да, хорошо. Но поскольку я так и не встретил нигде решения, которое при drag-and-drop использует контакт областей, подумалось — не фигню ли городим?
1. Эм, а разве полупрозрачный draggable объект не помогает? Под ним можно разглядеть таргет.
2. А UI никак не позволяет иметь таргет зоны больше, чем они визуально отрисованы?
2. А UI никак не позволяет иметь таргет зоны больше, чем они визуально отрисованы?
1. В ряде случаев есть требование избегать прозрачности по максимуму. Кроме того, объекты-target небольшие даже в сравнении с пальцем
2. В некоторых случаях они так близко натыканы, что — нет. Например, мы ориентируемся на рисунок-схему из печатного издания, должны его повторить. Мы либо выбрасываем какие-то объекты-target, либо используем подход, который я описал.
Скажу больше — если неправильно расположить объекты-draggable, то визуально может получится каша. Объекты-draggable — блоки с текстом. После их drop'а оформление блока скрывается и остаётся только текст, который центрируется по центру объекта-target. Поэтому, если правильно расположить — будет копия того, что в печатном издании. А если неверно — то тексты могут пересекаться, заползать на рисунок и т.п.
В общем, это тот случай, когда мы вынуждены «плясать» от имеющегося оформления.
Если делаем подобное с нуля — конечно закладываем большие области, с оформлением или как вы указали.
2. В некоторых случаях они так близко натыканы, что — нет. Например, мы ориентируемся на рисунок-схему из печатного издания, должны его повторить. Мы либо выбрасываем какие-то объекты-target, либо используем подход, который я описал.
Скажу больше — если неправильно расположить объекты-draggable, то визуально может получится каша. Объекты-draggable — блоки с текстом. После их drop'а оформление блока скрывается и остаётся только текст, который центрируется по центру объекта-target. Поэтому, если правильно расположить — будет копия того, что в печатном издании. А если неверно — то тексты могут пересекаться, заползать на рисунок и т.п.
В общем, это тот случай, когда мы вынуждены «плясать» от имеющегося оформления.
Если делаем подобное с нуля — конечно закладываем большие области, с оформлением или как вы указали.
Драг-энд-дроп весьма сложное действие для UX.
Если у вас UI тесное и мелкое, то явно надо додумывать альтернативные таргет зоны (которые конечно не видно в zero-state).
Если у вас UI тесное и мелкое, то явно надо додумывать альтернативные таргет зоны (которые конечно не видно в zero-state).
Да, альтренативные зоны — возможно. С их визуализацией при контакте?
Кстати! Я упустил еще один важный момент. Если мы пускаем интерактивн на доске — то это чертова куча дюймов, которые надо тащить объект. Поэтому изначально идея об использовании пересечений по областям пришла оттуда — чтобы меньше тянуться и метаться у интерактивной доски.
Кстати! Я упустил еще один важный момент. Если мы пускаем интерактивн на доске — то это чертова куча дюймов, которые надо тащить объект. Поэтому изначально идея об использовании пересечений по областям пришла оттуда — чтобы меньше тянуться и метаться у интерактивной доски.
При начале drag-движения можно сместить drag-объект относительно курсора таким образом, чтобы его левый верхний угол совпадал с левым верхним углом курсора.
И вообще, почему этот топик здесь, а не в QA?
И вообще, почему этот топик здесь, а не в QA?
Привет коллеге по e-learning! :)
Если руководствоваться Jquery UI как best practice, то есть 4 варианта:
«fit»: полное совпадение элемента с таргетом
«intersect»: пересечение на 50%
«touch»: любое пересечение
«pointer»: попадание мышкой
Решение «спорных» кейсов — хорошее, мы тоже так делали.
Рекомендую рассмотреть альтернативы dnd-упражнениям, особенно в сложных случаях (много элементов, мелкие или близко расположенные таргеты и проч). Например:
а) драгается не элемент, а его «репрезентация», например, иконка, или его номер, или уменьшенный тамбнейл. Это позволяет уменьшить размер перетаскиваемого объекта и решить вашу проблему. Пример (даже два) «от больших мальчиков»: перетаскивание 20+ файлов в Win 7 или OS X
б) вместо перетаскивания элемента, рисуем прямую линию от него до таргета. При наведении курсора с линией на таргет и отпускании, элемент перелетает или перепрыгивает на выбранный таргет. Опять-таки, позволяет все хорошо рассмотреть и попасть.
в) отказаться от перетаскивания вообще и заменить его на любой из сотен видов интерактивностей. Instructional value от этого не пострадает, поверьте, оно не в драг-н-дропах кроется.
Если руководствоваться Jquery UI как best practice, то есть 4 варианта:
«fit»: полное совпадение элемента с таргетом
«intersect»: пересечение на 50%
«touch»: любое пересечение
«pointer»: попадание мышкой
Решение «спорных» кейсов — хорошее, мы тоже так делали.
Рекомендую рассмотреть альтернативы dnd-упражнениям, особенно в сложных случаях (много элементов, мелкие или близко расположенные таргеты и проч). Например:
а) драгается не элемент, а его «репрезентация», например, иконка, или его номер, или уменьшенный тамбнейл. Это позволяет уменьшить размер перетаскиваемого объекта и решить вашу проблему. Пример (даже два) «от больших мальчиков»: перетаскивание 20+ файлов в Win 7 или OS X
б) вместо перетаскивания элемента, рисуем прямую линию от него до таргета. При наведении курсора с линией на таргет и отпускании, элемент перелетает или перепрыгивает на выбранный таргет. Опять-таки, позволяет все хорошо рассмотреть и попасть.
в) отказаться от перетаскивания вообще и заменить его на любой из сотен видов интерактивностей. Instructional value от этого не пострадает, поверьте, оно не в драг-н-дропах кроется.
Большое спасибо за ценный опыт и готовность им делиться!
Подумаю насчет «intersect». Вариант с перетаскиванием «репрезентации» — тоже очень интересен. Согласен с примерами.
С рисованием линий — 50/50. Тут конечно линии временные, но, все-таки будет перекликаться с типом заданий на установление соответствий, где линии как раз и рисуются (но не временные, конечно). Хотя, смотря как обыграть анимацию по завершению действия.
Но есть еще момент — подложки в таких задания часто сами содержат линии — линии выносок подписей от рисунков, линии на схемах… Но, всё же, дверюсь вашему опыту — попробуем.
Отказаться от перетаскивания вообще — не можем. Есть задача разнообразить интерактивы именно с точки зрения UX. А не было бы — свели бы всё к спискам, чекбоксам и полям ввода с клавиатуры. Можем конечно в некоторых случаях. Но обычно сложные случаи мы трансформируем в серию заданий на одной подложке.
Кроме того, наша целевая аудитория — школа. А в начальной всё усугубляется :)
Не уловил смысл «Instructional value». Имеется ввиду суть задания?
Подумаю насчет «intersect». Вариант с перетаскиванием «репрезентации» — тоже очень интересен. Согласен с примерами.
С рисованием линий — 50/50. Тут конечно линии временные, но, все-таки будет перекликаться с типом заданий на установление соответствий, где линии как раз и рисуются (но не временные, конечно). Хотя, смотря как обыграть анимацию по завершению действия.
Но есть еще момент — подложки в таких задания часто сами содержат линии — линии выносок подписей от рисунков, линии на схемах… Но, всё же, дверюсь вашему опыту — попробуем.
Отказаться от перетаскивания вообще — не можем. Есть задача разнообразить интерактивы именно с точки зрения UX. А не было бы — свели бы всё к спискам, чекбоксам и полям ввода с клавиатуры. Можем конечно в некоторых случаях. Но обычно сложные случаи мы трансформируем в серию заданий на одной подложке.
Кроме того, наша целевая аудитория — школа. А в начальной всё усугубляется :)
Не уловил смысл «Instructional value». Имеется ввиду суть задания?
Хм. В начальной школе вы хотите чтобы ученики перетаскивали объекты достаточно точно? Не слишком много от них требуете?
Если у вас заранее известно, куда должен попасть объект (эдакий пазл) — проверяйте расстояние с требуемой позицией, если оно меньше — ставьте туда.
Если нужно, например, разложить объекты по карзинкам — делайте карзинки большими.
В конце концов можно просто искать площадь пересечения BB и относить объект к тому, где это пересечение максимально (а если у вас может влезать несколько под перетаскиваемый объект — то к ближайшему к мышке. Но если такая ситуация не избежна — стоит уменьшать или делать полупрозрачным или искать принципиально другие пути).
Еще есть способ один — просто проверять по верхнему левому углу и подсвечивать «тень», куда станет перетаскиваемый объект при отпускании.
Если у вас заранее известно, куда должен попасть объект (эдакий пазл) — проверяйте расстояние с требуемой позицией, если оно меньше — ставьте туда.
Если нужно, например, разложить объекты по карзинкам — делайте карзинки большими.
В конце концов можно просто искать площадь пересечения BB и относить объект к тому, где это пересечение максимально (а если у вас может влезать несколько под перетаскиваемый объект — то к ближайшему к мышке. Но если такая ситуация не избежна — стоит уменьшать или делать полупрозрачным или искать принципиально другие пути).
Еще есть способ один — просто проверять по верхнему левому углу и подсвечивать «тень», куда станет перетаскиваемый объект при отпускании.
Нет, как раз в начальной школе мы этого и не требуем. И вообще — не требуем, что подразумевается в статье. Мы хотим соблюсти иногда противоречивые требования: сделать раскладку элементов как в печатном издании и сделать UX понятным и удобным.
Насчёт «пересечение максимально» — согласен, как вариант. Расстояние до позиции — уже спорно, неоднозначности могут быть.
Иногда неоднозначность только визуально определяется пользователем. Поэтому мы обязательно делаем подсветку. Но… в общем, в тексте статьи я описал вариации.
Насчёт «пересечение максимально» — согласен, как вариант. Расстояние до позиции — уже спорно, неоднозначности могут быть.
Иногда неоднозначность только визуально определяется пользователем. Поэтому мы обязательно делаем подсветку. Но… в общем, в тексте статьи я описал вариации.
Sign up to leave a comment.
Интерфейс с drag-and-drop: как не запутать пользователя?