Таблицы на веб-сайтах

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

Почему?

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

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

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

О чем стоит помнить при создании таблиц на веб-сайтах?

1. Используйте разные цвета

Давайте начнем с примера. Посмотрите на скриншот ниже:

Надо сказать, что представленная таблица визуально приятна.

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

Цвета играют здесь важную роль, выделяя определенные типы данных.

Их использование позволяет легко отличить более важную информацию от менее важной.

2. Поддержите себя иконами

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

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

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

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

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

3. Выделите опцию

Опять же, давайте воспользуемся примером:

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

Средний вариант выделен не просто так - и цветом, и размером.

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

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

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

4. Не комбинируйте, не делайте это странным.

Таблица - это очень простая, почти шаблонная форма представления данных.

Она сводится к сетке - ячейки X на X.

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

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

5. Не переусердствуйте с количеством информации

Посмотрите на скриншот ниже:

Спросите себя - читаема ли эта таблица?

Его можно улучшить, по крайней мере, несколькими способами:

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

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

6. Рассмотрите вариант сортировки

Таблицы на веб-сайтах могут быть максимально отсортированы.

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

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

7. Рассмотрим поисковую систему

Хорошим вариантом может быть также поисковая система, которая ссылается на данные, содержащиеся в таблице.

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

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

8. Используйте соответствующие интервалы в ячейках

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

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

Такая "передышка" очень полезна по нескольким причинам.

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

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

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

А как насчет отзывчивости?

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

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

Остаются ли таблицы на веб-сайтах актуальными?

Конечно же, да.

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

Все потому, что это очень простая и понятная форма представления информации.

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

Надеюсь, вы найдете вышеизложенную информацию полезной.