Школа
Интерфейс

Как верстать заголовки таблиц с сортировкой?

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

  2. Как выровнять стрелочку по горизонтали? float: right прижимает стрелку к соседней справа колонке и нарушается теория близости. float: left, вроде, более‑менее.

Владимир Варнавский
16 фев 2021
👁 10209   🗩2
Интерфейс

Как верстать заголовки таблиц с сортировкой?

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

  2. Как выровнять стрелочку по горизонтали? float: right прижимает стрелку к соседней справа колонке и нарушается теория близости. float: left, вроде, более‑менее.

Владимир Варнавский
16 фев 2021
👁 10209   🗩2
Илья Бирман
Арт‑директор и соавтор курса «Пользовательский интерфейс и представление информации»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

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

Стрелочка в таблице — это взрыв мозга. У вас написано «Тип удалённого подключения ↑», но на самом деле он не сверху, а снизу. И данные всегда снизу, куда бы не указывала стрелочка. Человеку приходится проделывать очень сложную работу в голове, чтобы понять, что здесь стрелка используется не так, как во всех остальных случаях в мире (не указывает направление), а иначе: является символом роста или падения. Но и после этого тяжело: что такое рост типов удалённого подключения?

Часто сортировать в обе стороны нет никакого смысла: зачем мне по‑алфавиту, но вверх ногами? Так что достаточно просто дать выбрать поле для сортировки, как‑нибудь подсветить его:

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

Если при этом есть сортировка по одному параметру, но в разные стороны, её тоже можно подписать понятными словами:

Прям вот сравните формулировку «Сначала самые нагруженные» с формулировкой «Нагрузка ↑».

Понятно, что бывают очень специфические интерфейсы, где данные могут быть любыми и нужен универсальный способ сортировки по чему угодно как угодно. Тогда я бы просто попытался как‑нибудь встроить стрелочку в линейку, чтобы она не влияла на вёрстку таблицы:

Она нужна только для того, чтобы хоть что‑то менялось при клике на уже выбранное поле, то есть для обратной связи. Реальное понимание того, какая сейчас сортировка, будут давать сами данные. Вижу не то, что хочу увидеть — жму ещё раз.

ТаблицыФормат: таблица
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

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

Рекомендуем другие советы