Как сделать удобную таблицу
Figma не подходит для проектирования таблиц. Сначала придется нарисовать от руки, смоделировать в любом табличном редакторе на реальных данных и только потом отрисовать. Таблицы требуют плотного дизайна, умеренности в функциональности и тестирования на пользователях.
Три главных предмета в фокусе внимания
-
Закон Фиттса
Кликнуть в мелкий элемент не просто трудно, а очень трудно.
-
Привычки пользователей
Ваши пользователи уже привыкли к определенным паттернам работы с таблицами.
-
Реальные данные
Будет проще понять, как их лучше отображать.
5 советов,
как делать хорошо
- Меньше пустого пространства
Дизайнеры вас возненавидят, но вы делаете не для дизайнеров.
- Меньше функций
Убирайте ненужное и добавляй функции только тогда, когда проявляется реальная необходимость. Лучше всего, чтобы необходимость появлялась по результатам тестирования на реальных пользователях и с реальными данными.
- Смотрите на гигантов
Сложные системы постоянно обновляют свою подачу таблиц. Смотрите, как делает Airtable, Outbox, Gmail, Notion.
- Не надейтесь на Figma
Она плоха для этой задачи. Поэтому сначала нарисуйте от руки, смоделируйте в таблицах Google или в Airtable.
- Сначала сделайте без таблиц
Лучше попытаться вообще обойтись без таблицы в интерфейсе и вернуться к ней только если не получается. Таблица — сложный инструмент.
Например
Для отображения большого количества данных таблица оказалась самым привычным паттерном.
Телемедицинские Информационные Системы
Таблица перестраивается в зависимости от того, какую типовую задачу решает пользователь.
Хороший образец
Все ключевые пользовательские сценарии реализованы через таблицы. Мы проектировали их итеративно, корректируя набор функций по результатам тестирования.
Так делать не надо
Маленькая симпатичная воздушная таблица на небольших идеальных данных. Две колонки, три столбца.
Инструменты
Google Sheet
Для прототипирования таблиц с данными
Ручка и бумага, доска и маркеры
Для проектирования от руки
Запись видео с экрана
Все нюансы при тестировании не увидеть, нужно пересматривать записи
Бухгалтер
Или другой специалист, который постоянно работает с таблицами
Дизайнер — главный враг таблиц. Привычка окружать информацию большими полями противоречит задаче впихнуть невпихуемое в компактный и сложный инструмент для работы с данными.
Ольга Павлова, директор по развитию «Собаки Павловой»
Другие шпаргалки
Ищете подрядчика или команду?
Давайте обсудим вашу задачу.
Хотите у нас научиться?
1000+ упражнений по дизайну интерфейсов.
eduhund.com
Собака Павлова
На сайте есть упоминания социальных сетей, признанных на территории РФ экстремистскими организациями
Кое-что показываем и рассказываем на весь интернет
, интересное в 
, полезное на 
Санкт-Петербург • Подгорица • Хайфа
Адрес для почтовых отправлений: 194291, Санкт-Петербург, ул Руднева, д. 9 к. 3 литера А, кв. 169