x
 
Галина
19 марта 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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

Можно ли выносить общую для всех строк часть за пределы таблицы? или нужно просто переносить текст на вторую строку? или есть другие способы по улучшению данной таблицы?


Галина!

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

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

Горизонтальная:

заголовок — группа — боковик таблицы — строка — ячейка

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

Вертикальная:

заголовок — шапка таблицы — колонка — ячейка

Заголовок колонки в шапке относится ко всей колонке.

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

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

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

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


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

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

А вот классический пример дизайна сравнения товаров для Яндекс-Маркета. Я ставил себе задачу упростить чтение сравнительной таблицы при любом количестве товаров и их параметров:

Шаблоны сайта «Яндекс-маркет» на сайте Студии Лебедева

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


Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

2 1 7




Недавно всплыло

Как вы проверяете соответствие вёрстки макету 2 2 3 10