Сортировка и группировка

Сортировка

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

Сортировка по размеру налога подойдет, например, для статьи о налогах в Италии. Так намного проще заметить, что в Болонье, Риме и Флоренции самый высокий налог, а в Альберобелло — самый низкий:

Обратите внимание, что с изменением сортировки изменился и заголовок таблицы: теперь он начинается со слов Размер налога, а не Города Италии. Колонки также поменялись местами: первой встала та, по которой отсортированы данные.

* * *

Еще один пример про порядок колонок. В таблице на сайте Банка России сортировка сделана по столбцу Валюта, но этот столбец стоит четвертым по счету:

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

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

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

По такому же принципу Москву и Санкт-Петербург нередко выносят из списка крупных городов России и ставят первыми:

Интерактивная сортировка. У разных пользователей одной таблицы могут быть разные задачи. В следующем примере одни люди будут искать конкретный фильм по названию, другие — новые фильмы, а третьи — фильмы с самым высоким рейтингом. Каждому станет удобнее, если он сможет менять сортировку под себя:

Группировка

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

Возьмем пример с фильмами. Если они отсортированы по названию и идут по алфавиту, то и сгруппировать можно по алфавиту:

Теперь отсортируем и сгруппируем по годам. Поставим столбец с годом первым и уберем повторы. Получились заголовки групп:

Заголовки можно разместить над данными. Этот прием уменьшает таблицу в ширину и увеличивает в высоту. Так с помощью расположения заголовков верстка адаптируется под разные форматы:

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

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

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

Множественная сортировка-группировка. В сложных таблицах может быть недостаточно сортировки и группировки по одному параметру. Вот пример про газовые баллончики. Здесь мы уже сделали сортировку по объему баллончика и собрали три группы: Маленькие, Средние и Большие.

Чтобы читатель смог упорядочить данные уже внутри нужной группы, введем второй уровень сортировки. Так будет проще найти, например, самые жгучие баллончики среднего объема:

Или быстрее понять, какие более устойчивы к ветру:

* * *

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

Рассмотрим конкретный случай. У вас сломалась стиральная машина, и вы хотите понять, во сколько примерно обойдется ее ремонт. Находите сайт сервисного центра — а там длинный список услуг. Чтобы он стал удобней, его стоит разделить на группы. Вопрос: по какому признаку это лучше сделать?

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

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

Еще один сомнительный вариант — группировка по виду услуги. В ней тоже есть смысл для профессионалов, но нам она снова не поможет в поиске:

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

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

Выводы

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