Является ли «пользователь-select: none» плохой UX?

Сегодня у меня была дискуссия с коллегой. Я показал ей «user-select: none» - свойство CSS, которое не позволяет пользователю выбирать текст.

Для меня это свойство позволило создать более удобный для приложения опыт на странице - чтобы события, такие как двойное нажатие, не вызывали выбор текста в областях, которые не могли быть выбраны в приложении (например, параметры на панель навигации, пользовательские элементы выбора, метки и т. д.).

Мой коллега не согласился с тем, что он добавил какой-либо польский, и предложил, чтобы пользователи могли выбирать и копировать любой текст в веб-приложении.

Каков консенсус по этому вопросу с точки зрения UX. Должны ли мы пытаться сделать сайты более похожими на приложения? Или веб-сайт должен выглядеть как веб - это значит, что мы не изменяем поведение по умолчанию, подобное этому?

94 голоса | спросил Brody McKee 18 AM000000100000003231 2015, 10:59:32

8 ответов


92

Есть простой способ приблизиться к user-select: none, и это задать один вопрос:

Будет ли выбор текста основным /вторичным взаимодействием, которое пользователь намерен прикоснуться к экрану там, или это будет препятствием для задачи, которую они пытались выполнить?

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

Если элемент изображения карусели индивидуально выбирается случайно во время прокрутки, вы можете отменить его, или теперь вам будет представлен выбранный элемент, который может сделать что-то еще, если вы попытаетесь нажать на него, чтобы отменить его (например, навигация по страницам, если элемент img заключен в элемент a)? Или, в зависимости от расположения divs, которые составляют структуру карусели, вы теперь как-то выбрали более высокий уровень, который оставляет выделение выделения на каждом изображении? (Я видел, что все это происходит в плохо кодированных реализациях каруселей)

Вообще говоря, это тот случай, когда вы хотите, чтобы представленный набор объектов работал в качестве навигационного элемента управления (скользящий список изображений), и если браузер интерпретировал касание как команду выбора, это помешало бы этой роли и обеспечило бы взаимодействие с вашим контролем расстраивает.

Цель использования user-select: none всегда должна ограничиваться уменьшением разочарования пользователя из непреднамеренных вариантов, возникающих в результате взаимодействия, которое может легко вызвать их при попытке выполнить основная задача цели управления, на котором он используется.

«Как насчет защиты моего контента от людей, которые его скопируют, выбрав его ??" вы можете быть склонны спрашивать. Ответ на это всегда будет: нет. Это не только плохой UX, но и абсурдно бессмысленно. Любой, кто действительно хочет скопировать ваш контент, все еще имеет к нему доступ; вы просто делали это более неприятным для себя, что сделало бы их менее склонными заботиться о том, что они делают этично: вы по существу способствуете моральному разъединению и позволяете своей схеме оценки сбалансировать свои нормальные схемы этики против их разочарования с вами, уменьшая порог когнитивного диссонанса в себе, оправдывая действие, подобное копированию вашего контента.

пользователь: выберите none никогда не является фактором безопасности. Никогда не используйте его, ожидая достижения более высокого уровня безопасности от нарушения авторских прав /и т. Д. Ваш контент по-прежнему находится прямо в источнике (и по-прежнему достаточно легко сделать скриншоты, что было бы еще труднее найти, если бы вы пытались проследить нарушение).

Вы не должны использовать user-select: none, чтобы предотвратить выбор текста содержимого. Сам браузер отвечает за выбор между прокруткой и выбором в этом случае и должен полагаться на то, чтобы выполнять свою работу должным образом в различном намерении пользователя между двумя потенциальными действиями (выбор или прокрутка). Хотя всегда будут исключения, имейте в виду, что эти два действия являются глобально согласованными ожидаемыми взаимодействиями. Взаимодействие с ними, вероятно, приведет к тому, что ваше приложение не будет вести себя так, как ожидается, что является основным источником разочарования.

Лично я бы сказал, что вы на правильном пути с использованием вашего примера.

Я бы только предупредил, что user-select: none - очень тупой острый инструмент, который будет использоваться только на основе определенной потребности. В то время как он может добавить лак, будьте осторожны, чтобы вы не использовали его где-то, где выбор вашего контекста кажется бессмысленным, но на самом деле это может быть то, что человек, использующий ваше приложение, захочет выбрать по определенной причине и где способный выбрать его, не будет иным образом серьезно влиять на предполагаемое взаимодействие при попытке выполнить основную задачу, которую предоставляет контроль.

Хорошим примером этого являются модальные диалоговые окна ошибок. Может возникнуть соблазн сделать их неизбираемыми, чтобы любое взаимодействие удаляло их или какое-то подобное обоснование для того, что должно было быть упорядоченным опытом, но это может быть очень неприятно, если кто-то сталкивается с ошибкой и хочет посмотреть это или сообщить об этом, чтобы поддержать, но не может легко скопировать его для этого. Всегда ошибайтесь на стороне осторожности и легкого прикосновения при воздействии и особенно при удалении стандартных предоставляемых режимов взаимодействия в заданной среде.

В общем, я бы сказал, что в любое время что-то (или включает) информативный контент - как пример сообщения об ошибке, а не действие управления, которое не содержит новой информации, почти во всех случаях не должно иметь user-select: none. Это особенно верно, когда этот контент не представлен в выбранной форме в другом местетот же или тесно связанный экран. Всегда будут исключения, но я бы предостерег, что, как правило, лучше переоценить, как вы что-то реализуете, и находить другой метод управления, чем применять user-select: none, где контент вместо простых слов действия /общих терминов /и т. д.

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

В частности, когда мы представляем приложение через другого агента (например, веб-браузер), важно, чтобы пользовательский агент максимально использовал свои собственные методы взаимодействия с содержимым. Это не только повышает согласованность и согласованность в работе пользователя, но также повышает совместимость между платформами и агентами и даже помогает обеспечить будущую проверку и функциональность в случаях использования или средах, которые вы, возможно, лично не предвидели.

ответил taswyn 19 AM00000020000005131 2015, 02:13:51
66

В общем, вы не должны использовать его глобально.

Часто пользователи выбирают текст, возможно, выделяют что-то, чтобы показать часть текста другу, скопировать текст или пометить текст, чтобы он мог лучше его читать (что я делаю, когда текст довольно широко и трудно следить за переносом текста в предложении).

Однако, есть действительно хорошие примеры, где это хороший вариант.

  • Кнопка

    Если вы разрешаете пользователю выбирать текст на кнопке, они могут подумать, что нажали кнопку, поэтому отключите эффект выделения выделения на кнопке.
    правило CSS для отключения выделения текста для лучшего UX

  • Страница с кодом на нем

    Вы хотите скопировать код, но не номера строк, поэтому отключите выделение только по номерам строк.

  • Сайт, на котором вы можете перетаскивать страницы по горизонтали для навигации.

    Если вы разрешаете пользователю выбирать текст, тогда навигация становится очень сложной.

    Однако, если у вас есть такой сайт, не помещайте его на него. Потому что контент с богатым текстом должен быть выбран.

Хорошим решением здесь будет создание титульного сайта, который можно перетаскивать горизонтально на следующую титульную страницу. Чтобы отобразить содержимое, вам нужно нажать кнопку и перейти на страницу содержимого.

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

Вам нужно решить, хотите ли вы отключить выделение. Если подсветка текста не наносит вреда юзабилити (например, горизонтальное перетаскивание), я бы не отключил ее, особенно, поскольку пользователи рабочего стола могут копировать текст.

Лучше: улучшите впечатление выделения текста.

Medium.com предоставляет вам несколько опций, что вы можете сделать с выделенным текстом:

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

Однако вы также можете сделать это хуже, например, Google Fonts:

ответил Michael Schmidt 18 PM00000020000005531 2015, 14:47:55
29

Есть такие люди, как «читатели выбора». Я являюсь одним из них. Я (по какой-то причине сознательно неизвестный мне) имеет тенденцию выбирать текст, пока я его читаю. Сайты, которые мешают мне сделать это, делают меня очень грустным и запутывают мой пользовательский интерфейс.

Я также полностью не согласен с тем, что в настоящее время является лучшим ответом. Те вещи, которые появляются, когда вы выбираете что-то, также серьезно раздражают читателей от выбора.

Прекратите пытаться сделать что-то вроде приложения! Мой компьютер не телефон! Я не хочу ограничиваться только действиями, которые я могу выполнять на телефоне при использовании вашего сайта!

Дополнительная литература: http://blogs.msdn.com/b/oldnewthing /Архив /2015/05/28 /10617693.aspx

ответил Muzer 19 PM00000010000004731 2015, 13:15:47
15

Невозможность выбора текста - это самый раздражающий анти-удобный CSS-ресурс, который сейчас находится на современных веб-сайтах.

Причины:

  • Давайте не будем пытаться действовать так, как будто наш сайт - это то, чем он не является. Это не мобильное приложение, и причина, по которой вы не можете выбрать текст в приложении, заключается в том, что он не находится внутри текстового поля и поэтому не должен быть выбран по какой-либо причине.
  • Мобильная экосистема полностью отличается от системы ПК с «мощным пользователем». Большинство людей, которые используют веб-сайты на своем компьютере, хотят получить работу - или делают практически все, что они не могут сделать на своем мобильном устройстве, из-за FREEDOM , которую дают мышь и клавиатура.
  • Я не вижу никакой причины, почему кто-то ограничивал бы кого-то копированием какого-либо текста. Если вы будете раздражать и ограничить меня от этого на уровне пользователя, я просто немного погружусь в HTML-код, скопирую то, что мне нужно, и НИКОГДА НЕ ИСПОЛЬЗУЙТЕ ВАШ ВЕБ-САЙТ НИКОГДА СНОВА .

Я знаю, что это немного чрезмерно драматизировано , но, пожалуйста, не делайте этого.

edit: Это не означает, что наличие кнопок или ярлыков с текстом, который не имеет фактической причины для копирования с этим свойством, является ложным, это действительно желательно .

ответил downrep_nation 18 AM000000110000002731 2015, 11:56:27
9

Есть много контекстов, в которых он хороший UX , и многие, где он плохой UX , не отвечают на все вопросы.

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

Однако тела текста не должны быть отключены - если есть взаимодействие, которое вызывает выделение текста, то его, возможно, придется пересмотреть, поскольку он явно не подходит для среды.

И как указано в другом месте, вы никогда не должны отключать выделение текста all . Если вы собираетесь это сделать, это должно быть очень избирательным (кнопки, в основном).

ответил Nathan Hornby 18 PM00000030000004531 2015, 15:09:45
5

Беседа со стандартными функциями приложения (например, выбор текста в браузере) - плохая идея почти в каждом экземпляре ... пользователь ожидает выполнения любых действий, которые они сделали. Они не могут, потому что вы сломали его - эрго, вы не оправдали ожиданий пользователей. Просто как это.

Личные правила:

  • Во всех случаях отключение выделения текста невероятно глупо. Даже если вы думаете, что никто никогда не захочет выделить его, вы никогда не узнаете. Вы будете удивлены, что люди получают.
  • Отключение выделения, когда выделение каким-то образом нарушает пользовательский интерфейс, - это хорошо. Редкий, но это может произойти. «Нарушение пользовательского интерфейса» может быть
    • позволяет прокручивать, когда вы не можете
    • дает пользователю ложное впечатление (например, что они могут делать что-то невозможное)
ответил Algy Taylor 19 PM000000120000004031 2015, 12:34:40
1

Есть только один контекст, где я нашел эту полезную функцию, и это было в контексте игры .

У меня была игровая площадка, с которой игрок взаимодействовал с помощью мыши. На этой игровой площадке были объекты с текстовыми надписями. Иногда игрок хотел щелкнуть объект, но вместо этого пометил текст на этикетке. Это было плохо, потому что это не то, что пользователь хотел сделать. Установка user-select: none на текстовых ярлыках исправила проблему. Это была хорошая идея.

ответил Philipp 21 AM000000100000005831 2015, 10:55:58
0

Если я работаю один, мне нравится отключать его по умолчанию и активировать его выборочно.

Я думаю, что выбор текста элемента меню или названия кнопки не придает большого значения конечному продукту, и иногда пользовательские взаимодействия могут повредить дизайн, добавив странные фоны в текстовые узлы. (Может быть, есть сторона юзабилити, о которой я не знаю?)

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

Однако, работая над командой, я думаю, что это не нормально, поскольку она отменяет способ по умолчанию, когда браузер предоставляет страницу, а новые члены команды должны заранее знать ненужную информацию, которая может вызвать ошибки? (Я не могу сейчас думать об ошибках, которые могут быть причиной этого свойства).

Как каждая функция, если вы позаботились об этом, и вы знаете, что делаете, не должно быть неразрешимых и критических проблем.

ответил Ernesto Hegi 24 PM00000010000000031 2016, 13:38:00

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132