#⟶ Дизайн конспект

Таблицы — отличный элемент. Они везде: на сайтах, в книгах, в газетах и в экселе, черт.

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

Если вы в танке — вот примеры таблиц: все разные.

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

Вот еще несколько примеров таблиц: всмотритесь, найдите общие элементы, возможности и фичи.

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

Нумерация страниц

Заранее предусмотрите тот факт, что страниц в таблиц может быть две, а может и 894. Как быть в такой случае? Как отображать данные, как перейти на страницу 5, а как на 276, и что при этом должен видеть пользователь? Сколько результатов будет видно на одной странице? Продумайте как можно больше реальных и, как вам кажется, нереальных путей развития ситуации. Скорее всего такая нереальная ситуация может оказаться вполне обычной для пользователя.

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

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

Режимы редактирования

Таблицы могут не только отображаться, но и редактироваться. Редактироваться пользователями. Вот так поворот. Если вы, как администратор, редактировали эту таблицу 100 раз, то действие» редактировать», спрятанное внизу таблицы, окрашенное в нейтральный серый цвет и имеющее пиктограмму веселого воздушного шарика  — отличное решение. А вот если вы пользователь, то решение — говно. Ой, ну без обид.

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

Полей в таблице много: как это редактировать, как сохранять? Автоматически?

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

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

Дорабатываем, делаем карандаш синим всегда — редактирование таблицы становится более понятным.

Отображение действий

Чтобы не путать пользователя — все кнопки действий должны быть в одном месте. Главное, чтобы человек не искал подходящую кнопку листая всю таблицу.
С кнопками такая же логика как и со всем. Предусмотрите максимальное количество вариантов: сколько действий несет кнопка, а что если надо 5 кнопок? Кнопки будут текстом или иконками и так далее.

Вот вариант, где действие всегда располагается в конце строки — иконка мусорного ведра и подпись «delete» .

А вот вариант, где два текстовых поля. Каждое выполняет свое действие: «save««cancel»

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

Так как мы все равно собираемся прятать несколько действий в выпадающее меню — то действия можем обозначить текстом.

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

Настройки таблицы

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

Ограничение ячейки

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

via GIPHY

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

Можно сделать так: при наведении на строку с длинным описанием — выделять это в всплывающую подсказку со всем текстом.

Предупреждения

Не забудьте оповестить пользователя о ошибке. Разместите ошибку рядом с тем полем, где эта ошибка появилась.

Индикаторы

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

Поэтому, можно сделать иначе. Вертикальная полоска на всю высоту строчку — подходит лучше. Так точно понятно, что речь идет о всей строке, а также такой вариант не занимает места от слова «совсем».

—
Оригинал — тут.
Копайте глубже, етпа.