Как заставить текст выглядеть * не * clickable

<сильный> Проблема:

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

Разъяснение: Эти фрагменты - это просто текст; они не должны быть нажаты.

Уточнение 2: «Успешные списки» подсчитывают количество книг, которые продавцы /арендаторы обменялись с покупателями. Вы можете взаимодействовать с открытыми списками (в частности, вы можете редактировать свои и делать предложения другим), но статистика там, чтобы продемонстрировать эффективность веб-сайта.

<сильный> Вопрос:

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

 Пример


Использование в дикой природе:

Instagram использует аналогичный список статистических данных, и они не доступны для просмотра. Instagram

79 голосов | спросил JosephSlote 17 AM00000030000004631 2016, 03:34:46

14 ответов


126

tl; dr â † 'использовать знакомые шаблоны

  1. Сделать текстовые объекты менее похожими на элементы управления навигационными вкладками.

  2. Элементы кажутся излишне разделенными: поместите поле поиска в главный заголовок.

  3. Сделайте поиск более похожим на поиск.

 Упрощенное дизайнерское предложение

Значение позиции

Подсознательный фактор, заставляющий ваших испытуемых хотеть использовать эти текстовые объекты, - это позиционирование. Они выглядят как с вкладками. Посмотрите на этот пример из спецификации Material Design, которая так популярна на мобильных устройствах и в других местах.

 введите описание изображения здесь>> </a> </p>

<p> Кто-то, где-то однажды сказал ... </p>

<blockquote>
  <p> <strong> Вы можете сделать это только один раз, но вы можете сделать это лучше столько раз, сколько вам нужно. </strong> </p>
</blockquote>

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

<p> Вам не нужно отвечать на каждое желание пользователя, но когда вы начинаете видеть шаблон, вы можете наткнуться на что-то ценное. </p></div>
					 
						<div class=

ответил plainclothes 17 PM000000100000005831 2016, 22:17:58
125

Ну, так как люди пытаются взаимодействовать с этой информацией, я бы использовал ее в качестве преимущества. Как упоминалось Маттинабибом, это действительно имеет смысл.

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

  

6 перечисленных книг, 12 успешных списков и 2 активных пользователя

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

ответил Devin 17 AM00000050000003031 2016, 05:58:30
40

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

Кроме того, вместо «6 книг в списке» я использовал бы «Books Listed: 6». Двоеточие тонко подразумевает: «вот информация», а не «Я - ссылка».

ответил Big Daddy Dennis 17 PM000000100000005031 2016, 22:12:50
34

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

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

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

Являются ли «успешные списки» релевантными для пользователей сайта? Если это так, пусть снова нажимают на это, чтобы просмотреть все успешные списки.

То же самое касается «пользователей». Пользователи могут просматривать список пользователей? Если да, пусть они нажмут на него.

Если пользователи не могут взаимодействовать с тем, что вы считаете, зачем это показывать?

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

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

  

CHTB: второй по величине обмен книгой в Интернете, используемый 1234 пользователями для публикации 5678 книг (и подсчета!).

ответил 17 PM000000120000001531 2016, 12:21:15
12

Это вопрос относительной «щекотливости». Сделайте непривлекательные элементы менее интерактивными, сделав остальные более доступными для клика. Фраза здесь: «доступность».

  • позиция трех неаккуратных элементов очень заметна: в вашем дизайне она находится в центре страницы, и она фиксирует логотип и выигрыш. Это дает им сильный доступ к клику.
  • седины вам не помогли. В этом дизайне он легко понимается как просто стилистический выбор, чтобы сделать этот текст серым.
  • Ваш запрос на поиск может быть не достаточно ясным. Попытайтесь сделать это более похожим на поиск-ввод: добавьте границу, поисковое стекло и кнопку отправки (например).
  • Вы также можете переключить позицию панели поиска и «статистики без сортировки» и сделать панель поиска частью логотипа -> имитируя страницу по умолчанию Google.
ответил Ideogram 17 PM00000050000003131 2016, 17:47:31
10
  

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

* Вздох *

В прежние времена использовался стандарт, который подчеркивал интерактивный текст (гиперссылка). И еще один, который затушевывал текст, был неактивным. Насколько эти стандарты были нарушены? Посмотрите не дальше, чем сам Stack Exchange:

 Доступные ссылки

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

Как и многие другие, поскольку вы говорите «6 книг, перечисленных», логично перечислить эти 6 книг, если вы нажмете на эти слова. Не бойся.

ответил Nick Gammon 19 PM00000020000001231 2016, 14:38:12
7

с использованием вложенного текста тень дает внешний вид чего-то, установленного в камне: (с и без)

 введите описание изображения здесь>> </a> </p></div>
					 
						<div class=

ответил Sven Writes Code 17 PM00000030000005931 2016, 15:59:59
5

 введите описание изображения здесь>> </a> Поскольку числа «6 книг, перечисленных» «12 успешных вещей», больше похожи на блики. </p>

<p> Я бы попробовал один из них, чтобы сделать его похожим на вид или номер панели инструментов: </p>

<p> Увеличить шрифт - это делает его довольно очевидным, что его заголовок сортировки.
У каждой панели есть панель, в данном случае 3 панели. Когда я говорю панель, это означает, что у вас светлый фон и дополнение к тексту. </p>

<p> Некоторые вещи, как я пытался выше, но вы всегда можете поиграть с цветами и шрифтами, которые соответствуют вашему дизайну. </p></div>
										<div class=ответил Pavithra Olety 17 AM00000040000003731 2016, 04:08:37

5

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

 От StackExchange

ответил glassy 17 PM00000090000005431 2016, 21:13:54
4

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

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

ответил Mattynabib 17 AM00000030000002131 2016, 03:45:21
2

Представить его как таблицу

Ссылки обычно отображаются как кнопки или строки текста. Информация обычно отображается как таблица.

Поэтому показ статистики в чуть более табличном формате не позволит пользователям попробовать щелкнуть по ней.

Пример в дикой природе

На самом деле вы уже можете увидеть в своем собственном примере instagram, как вы могли бы реализовать это досконально.

Instagram в основном представила свою статистику в таблице с тремя столбцами и двумя строками. 1 ряд ключевых фигур (немного большой) и 1 строка с описаниями.

 введите описание изображения здесь>> </a> </p></div>
										<div class=ответил Dennis Jaheruddin 19 PM00000020000001531 2016, 14:04:15

1

Это потому, что:

  1. (возможно, трудно изменить) В содержании возникает вопрос «что?» поэтому люди следуют их желанию узнать.
  2. (возможно, легко изменить). Они имеют шрифт типа body, который предлагает возможный материал ссылки. Выберите презентационную форму - возможно, без засечек, может быть, с тонкой крышкой, возможно, с разными весами и /или размерами между цифрами и буквами и т. Д.
ответил Lucian Davidescu 18 AM00000070000003731 2016, 07:46:37
0

Сделайте его более сложным, чем одна строка текста.

Ваш пример Twitter разбивает каждый стат на две строки с разным шрифтом. Этого должно быть достаточно, чтобы препятствовать людям думать, что они являются ссылками:

 введите описание изображения здесь>> </a> </p>

<p> Вы можете изменить размер шрифта, стиль, цвет или добавить тонкую графику (например, слабое правило между двумя строками), чтобы сделать его более сложным, чем одна строка текста, что обычно является ссылкой выглядит. </p></div>
					 
						<div class=

ответил Tobia 22 PM00000040000005431 2016, 16:42:54
-4

Вы могли бы предшествовать этим текстам с иконкой «info», с Font Awesome http: //fontawesome. io /icon /info-circle / или все, что вам нравится. И убедитесь, что текстовое свойство 'cursor' CSS не является «указателем».

ответил ilya.chepurnoy 17 PM000000120000002631 2016, 12:34:26

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

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

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