Моя команда создает компонент таблицы Material Design. В рекомендациях по материальному дизайну для таблиц данных указано:

Наведение курсора на строку (для ПК)

Отображать фон в строке таблицы, если пользователь наводит курсор на любую часть этой строки.

Material Design mockup showing a data table. One of the rows is highlighted and has a mouse cursor over it.

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

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

17
User not found 14 Июл 2017 в 23:48
6
Если бы они были выделены при наведении, это заставило бы меня попытаться нажать на них.
 – 
Lee Kowalkowski
15 Июл 2017 в 01:11

6 ответов

Лучший ответ

Да. Просто да.

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

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

Что касается некоторых подвопросов:

  1. Имеет ли это смысл для неинтерактивной таблицы данных?

    а. Да! Я использую эту функцию, чтобы помочь мне даже в таблицах только для чтения.

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

    а. Я не ожидаю этого как такового, так как многие интерфейсы (к сожалению) этого не делают. Но я надеюсь на это и раздражаюсь, когда такой помощи нет.

    б. Если вы имели в виду «Рассчитывают ли пользователи иметь возможность выбирать…» (или иным образом действовать): возможно. Некоторые пользователи могут задаться вопросом, означает ли это, что они кликабельны, но они быстро поймут, что это не так. Если некоторые пользователи думают, что строка требует действия, и случайно теряют несколько секунд и несколько кликов, это раздражение затмевается проблемами с читабельностью таблицы.

  3. Это помогает с читабельностью?

    в. Да! Очень. Как кто-то прокомментировал, я часто выбираю заголовок строки в Excel, даже если не собираюсь редактировать эту строку; Я делаю это, чтобы улучшить читаемость этой строки.

Еще один вариант для удобочитаемости: @Tulains Córdova предложил подход с чередованием цветов. Это тоже хорошая идея, за исключением того, что на представленных изображениях цвета слишком сильно контрастируют. Лучшее из обоих миров: используйте чередующиеся цвета с низкой контрастностью (например, белый и очень светло-серый), и используйте более контрастный цвет подсветки для одной строки, наведенной курсором мыши.

40
Aaron 17 Июл 2017 в 17:17
4
Однако не безоговорочно, но особенно, когда таблица широкая, расположена на большом расстоянии или содержит элементы управления в крайнем правом углу.
 – 
KlaymenDK
15 Июл 2017 в 11:36
4
Я согласен. По этой причине я обычно выделяю строку в Excel — просто для облегчения расшифровки.
 – 
WoJ
15 Июл 2017 в 18:33
4
Чередующиеся цвета строк (белый и светло-зеленый) использовались для этих целей задолго до того, как компьютерные дисплеи позволяли читателю легко следить за строкой текста на странице. Если бы это использовалось, не было бы необходимости в анимации.
 – 
Tulains Córdova
16 Июл 2017 в 02:51
@TulainsCórdova: Да и... нет. Когда ряды «тонкие» (с точки зрения соотношения высоты и длины), даже при чередовании двух цветов они через некоторое время «размываются». Может быть, с более чем двумя цветами, но тогда у вас проблемы с цветовой слепотой, ... С другой стороны, однородно окрашенная таблица, которая выделяет одну интересующую строку, потрясающая.
 – 
Matthieu M.
17 Июл 2017 в 10:29
Хотя я ценю все разнообразные и проницательные ответы, я соглашусь с народным голосованием и приму этот. Приведенные преимущества (удобочитаемость, более легкий анализ и навигация) перевешивают недостатки наличия состояния наведения на неинтерактивных элементах.
 – 
User not found
21 Июл 2017 в 23:05

TL; DR

Нет, вместо этого чередуйте цвета строк.

Длинный ответ:

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

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

enter image description here

Вверху: зеленая полоса сплошной бумаги

enter image description here

Вверху: чередование цветов строк в компьютерном отчете

enter image description here

Вверху: меньше контраста меньше вредит глазам

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

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

9
Tulains Córdova 17 Июл 2017 в 18:54
Остерегайтесь использовать обоснование «это было так в течение долгого времени, поэтому ...». Это не принимает во внимание достижения в пользовательском тестировании и технологиях. Например, используя старый пример отчета, у пользователя не было курсора, на который он мог бы указать при использовании бумажного отчета, так что это не совсем то же самое, что онлайн-отчет. Это также добавляет много визуального беспорядка, который не нужен пользователям. Highlighting on hover can convey the false hint that the row is clickable or actionable = удовлетворительно, хотя курсор-указатель и обычный курсор могут подчеркнуть это различие.
 – 
dKen
16 Июл 2017 в 14:26
Лично я нахожу этот пример трудным для просмотра, обнаружив, что мои глаза фокусируются только на синих или белых рядах. Хотя это n = 1, я бы посоветовал пользователям провести тестирование, чтобы увидеть, смогут ли люди достаточно легко найти свою цель в такой настройке.
 – 
Inca
16 Июл 2017 в 15:18
В бумажном примере курсор там, где их пальцы или линейка. В примере компьютерного отчета (вторая картинка) у них были курсоры.
 – 
Tulains Córdova
16 Июл 2017 в 18:08
1
Альтернативный способ окрашивания рядов — менять цвет каждые два или три ряда. Как ни странно, это намного легче для глаз, чем изменение цвета с каждым рядом. И я готов поспорить, что дислексики согласно кивнут по причинам, схожим с тем, почему они лучше читают с увеличить расстояние между буквами и словами.
 – 
Denis de Bernardy
16 Июл 2017 в 20:03
1
Я помню, как видел это повсюду во 2-м издании AD&D. Понятия не имею, делалось ли это до сих пор в более поздних версиях, не говоря уже о наших днях. Но я помню, что контраст в удобочитаемости между таблицами в последнем и таблицами в других руководствах по РПГ конца 80-х и 90-х годов был очень велик. Возможно, это всегда были таблицы с индексом в крайнем левом или крайнем правом столбце, что практически не оставляло места для путаницы. Но проще для глаз, они, конечно, были ИМО.
 – 
Denis de Bernardy
16 Июл 2017 в 21:48

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

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

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

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

В A List Apart есть статья (сейчас немного старше):

Разметка Zebra: дополнительные данные для дела

Она провела тщательное исследование (даже тестируя типы полос, чтобы увидеть, улучшает ли это разборчивость), и в конце она заявляет:

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

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

8
Community 16 Июн 2020 в 13:51
2
По какой-то причине время от времени я нахожу чередование несколько визуально шумным по сравнению с подсветкой при наведении (хотя недостатком является то, что подсветка при наведении не помогает на устройствах без мыши). Мне кажется, что это больше относится к более широким столам, когда вашим глазам приходится сканировать значительное горизонтальное расстояние, где все еще трудно отследить полосатость по всему экрану.
 – 
Jason C
15 Июл 2017 в 03:45
1
Для полосатости (чередования цветов рядов) следует использовать светлую цветовую палитру.
 – 
Tulains Córdova
16 Июл 2017 в 21:57

Выделение не обязательно предполагает интерактивность, оно также помогает пользователю поддерживать его горизонтальную линию. Таблицы, которые особенно плотны или разрежены по одной или обеим осям, могут затруднить удержание одной строки.

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

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

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

3
Nathan Christie 14 Июл 2017 в 23:37

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

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

enter image description here

Я считаю, что это визуально менее шумно, чем окраска четных/нечетных строк, когда представлено много информации:

enter image description here

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

Однако в вашем случае подсветка не кажется функционально необходимой.

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

2
Jason C 15 Июл 2017 в 03:46

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

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

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

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

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

1
Inca 14 Июл 2017 в 22:35