Думал-думал, как написать вводную про важность таблиц, про то, что ни одна бизнесовая система без таблиц не обходится, про то, что речь не о табличном представлении контента, а о таблицах для управления данными.
И такая «вода» получалась, что решил написать так:
работа с таблицами для управления данными должна быть удобной.
Я пишу именно «работа должна быть удобной», так как уже много статей есть на тему создания удобных таблиц. Самая наглядная и популярная — https://uxdesign.cc/design-better-data-tables-4ecc99d23356
Да и авторы стандартных табличных движков постоянно работают над их улучшением. Но можно взять самый клёвый табличный движок или учесть у себя в таблице все рекомендации по эргономике таблиц, но процесс работы с таблицей будет при этом не на высоте. Статья не про дизайн, а про UX в самом прямом понимании.
Почему я позволяю себе писать об этом
Когда я сам читаю статьи, то часто задаюсь вопросом — почему я могу доверять этому автору, какой у него опыт по предмету, о котором пишет. Я не дизайнер, я продакт менеджер, а ранее проджект менеджер.
Свой профессиональный путь в ИТ я начал в январе 2007 года и бОльшая часть моего пути связана с системами автоматизации и учёта. С системами, в которых одна запись в таблице может содержать более 200 свойств. Я отвечал за автоматизацию деятельности торговых представителей и центра приёма заказов огромного колбасного завода, деятельности градостроительных органов, которые ведут учёт земельных участков, логистических центров, госорганов, … В общем, насмотрелся на таблицы и на ту боль, которую пользователи могут испытывать от работы с ними.
Как работают с таблицами
Чтобы понять, какая такая работа с таблицами должна быть удобной, для начала сформулирую, что именно пользователи делают с таблицами:
- просматривают данные,
- вносят данные,
- ищут данные,
- управляют данными,
- забирают данные.
Каждый пункт — это отдельный процесс, требующий внимания.
Часть 1: Работа — Просмотр данных
Почему круты Excel’еподобные таблицы?
Таблица в Excel компактная и гибкая. Данные в Excel-таблице обозримы — больше информации можно увидеть с первого взгляда. Видеть больше информации для пользователей, которые 8 часов в день работают с таблицей — важно.
Вообще, при внедрении рабочей системы (системы, с которой будут работать) надо помнить, что процесс работы с таблицами в системе будут сравнивать с процессом работы с таблицами в Excel.
Конечно, это не значит, что надо повторить Excel (да и кто повторит!?). Это значит, что надо не утерять те преимущества, которые есть у Excel, дополнив их преимуществами, ради которых система и была создана. Например, CRM система — это не только таблица с клиентами, это куча процессов и связности, которые никакой Excel не повторит, а если и повторит, то это будет монстр.
Все последующие рекомендации основаны на реальных событиях и запросах, с которыми я сталкивался на практике.
Больше места для таблицы
Начну с того, что рабочая таблица должна занимать максимум места на экране. Если у вас ограниченная ширина интерфейса, широченное меню слева, вечный футер, перед таблицей огромная форма поиска, то под саму таблицу может остаться слишком мало места.
Конечно, может помочь опция «на весь экран» (или что-то подобное), но если всякий раз для комфортной работы с таблицей надо нажимать куда-то, то лучше сделать, чтобы комфортно было сразу.
Компоновка
Многие представляют данные в таблице только так: каждому свойству записи свой столбец. Но это правило не всегда верно — самый простой пример, если есть данные о фамилии, имени и отчестве, то их целесообразно вывести в один столбец ФИО (объединение данных). Сортировка не ухудшится — сортировать важно только по фамилии. Но можно и сложнее: вывести в одной ячейке логически разные свойства. Например, вывести ФИО и должность или роль в системе, или контактные данные.
Прикомпоновать можно не все данные:
- Данные должны быть полезны в контексте основной информации: например, телефон бесполезен без ФИО.
- Данные не нуждаются в подписи. Например, возле e-mail не надо ставить подпись (аналогично для должности, телефона)
- Разумное количество в рамках одной компоновки.
Постраничка для работы
Если пользователь просматривает информацию, то многим удобно иметь большИе информационные порции. А когда тебе дают 10 или 20 записей на страницу, то часто это как издевательство. Дайте возможность выбрать 50, 100, а то и 500 записей.
Попробуйте поставить для таблицы 50 строк по умолчанию — попросит ли кто-то из пользователей сделать обратно 20? Сомневаюсь.
Не вечный скролл и не ещёкалка
Отмечу, что в случае с таблицами для работы вечный скролл и ещёкалка не подходят. Ещёкалка — это кнопка «Показать ещё», а вечный скролл — таблица сама подгружается пока не достигнет финала.
Например, пользователь сделал поиск клиентов, которым давно не звонили маркетологи. С найденным списком он планирует планомерно работать — обзванивать. До обеда он обзвонил страницу 1, после обеда — 2, а завтра планирует прозвонить странице 3 и 4. Когда это страницы, то всё просто: перешёл на нужную и действуй. Когда это вечный скролл или ещёкалка — всякий раз крутить надо к месту, где ты закончил. Нет простых маркеров.
Другой пример: «Маша, ты две страницы с конца обнови, а я с начала. За день справимся.» (это очень частый кейс). С постраничкой удобнее работать коллективно.
Цвета вместо слов
Стоит помнить, что какие-то ячейки можно покрасить, чтобы по цвету пользователь понимал состояние информации. Если все записи таблицы имеют общую характеристику, которую можно выразить через цвет, то выражайте:
- можно красить знаковую ячейку (например, Дату заказа красить Статусом)
- а можно добавлять цветной индикатор к строчкам (цветной круг, например) и не выводить эту характеристику в отдельный столбец.
Можно красить и всю строчку, но при такой покраске таблица выглядит и действует как «вырви глаз».
Всю строчку важно красить, когда красятся отклонения от нормы. Например, выделить ошибочную транзакцию в таблице с платежами.
Если цветов больше 5-ти, то воспринимать корректно покраску уже сложно — не всегда сразу вспомнишь, что значит тот или иной цвет. Особенно сложно запомнить редкие цветовые индикаторы (которыми редко маркируют).
При наличии цветовых индикаторов полезно отображать легенду цветов.
Запоминать вид
Я видел много таблиц, которые возвращаются к умолчательному состоянию после выхода из системы и повторного логина. Да что уж там, я видел как все настройки слетали, стоило пользователю зайти в другой раздел и вернуться обратно.
Вообще, полезно настройки вида хранить вечно, чтобы:
- после отпуска пользователь залогинился в систему и продолжил работать с тем видом, который он ранее настроил.
- чтобы пользователь мог на домашнем ноутбуке войти в систему и доделать что-то с тем видом, который он ранее настроил.
Связность информации
Объёмность — это то, что качественно отличает таблицы в бизнесовой системе от плоских Excel-таблиц. Не часто делают Excel-таблицы, которые ссылаются на другие таблицы — чаще это одна большая таблица.
В бизнесовых же системах связывание разных данных — обычная история. Например, мы добавляем заказ:
- клиента мы выбираем из таблицы клиентов,
- товары — из товаров,
- склад — из складов,
- адрес — из Федеральной информационной адресной системы (ФИАС) или «тыкаем» на карте,
- и т.д.
Полезно, когда при показе таблицы данные из связанных таблиц представлены в виде ссылки, которая открывает связанную запись. Например, в столбце «Заказчик» выводится в виде ссылки наименование организации, на которую оформлен заказ. Клик, и в новой вкладке открылась информация по этой организации.
Но показывать ссылки на связанные записи не всегда полезно — если связанных сущностей очень много, то таблица может выглядеть как минное поле. Куда ни кликни, что-то откроется. Выделите те сущности, которые полезны в работе.
Активная строка
Если вы наблюдали, как реально работают с информацией в напечатанной таблице, то могли видеть картину: человек берёт в руки линейку и, прикусив немного нижнюю губу, прикладывает её к той строчке таблицы, с которой сейчас работает. Линейка помогает ему не теряться.
Если вы наблюдали, как реально работают с информацией в Excel таблице, то могли видеть картину: человек выделяет строчку в таблице, с которой сейчас работает. Выделение помогает ему не теряться.
Как выделять строчку: ошибочно полагать, что если строчка меняет свой вид при наведении на неё мышкой, то вопрос выделения закрыт. Это только необходимый минимум (и тот не работает в случае с тачскрином).
Достаточное же условие выделения: строчку можно выделить активной, и она такой остаётся, куда бы мышка не убежала. Например, клик по строчке переводит строчку в режим «активна».
Выделить строчку можно разными способами:
- фон и маркер за таблицей;
- контур;
- тень и эффект приподнятости/вдавленности.
Горизонтальный (простите) скролл
Нет ничего страшного, если при большой таблице появляется горизонтальный скролл — это привычный для большинства пользователей опыт (посмотрите на Excel). Плохо, когда при добавлении столбцов в таблицу они становятся невероятно узкими, зато без скролла.
Горизонтальный скролл должен быть доступен на экране всегда. Не тогда, когда пользователь докрутит страницу до низа, а всегда.
Просмотренные строки
В некоторых случаях бывает полезно маркировать просмотренные записи (например, подсветка другим тоном или ещё как).
Опция полезна в связке с поиском — если таблица в режиме итогов поиска, то можно маркировать просмотренные строки. Так проще понимать куда ты уже зашёл и поправил/проверил данные, а куда ещё надо зайти.
Системные свойства
Практически каждая запись в таблице имеет некие системные свойства, например:
- ID,
- дата создания,
- автор,
- дата последнего изменения.
Некоторые таблицы настолько любят системные свойства, что их нельзя убрать: когда управляешь столбцами, которые надо/не надо показывать, то системных свойств там нет. И наоборот, в некоторых таблицах системных свойств нет и добавить нельзя.
Надо, чтобы системные свойства можно было показывать/скрывать так же, как и остальные.
Просмотр записи
Строка в таблице часто является прелюдией к просмотру полной информации по записи.
Как именно показывать полную информацию по записи: модально или отдельная страница?
Прежде чем дать мою версию ответа на вопрос, обозначу что важно при показе полной информации:
- можно открыть несколько записей одновременно;
- можно дать ссылку на страницу с записью.
На моей практике в 99% случаев рабочих таблиц модальный режим просмотра уступал просмотру записи в отдельной странице. Даже если сделать так, что ссылку на запись можно скопировать и в модальном окне, то такое окно грузится дольше, так как оно дочернее по отношению к таблице. Можно сделать и мультимодальность, но когда у каждой записи полно характеристик, то толку от мультимодальности будет мало.
В целом, правило примерно такое: чем больше характеристик у записи в таблице, тем меньше шансов, что модальный режим просмотра будет удобен.
Модальный режим однозначно полезен для таблиц-справочников: например, добавить новую запись в справочник категорий одежды. Но это не рабочая таблица, а вспомогательная, с которой работают время от времени.
Переход к просмотру записи — удобно сделать это по двойному клику, а по «ctrl+ двойной клик» открывать в отдельной вкладке.
В некоторых случаях удобно сделать режим предпросмотра: когда по какому-то действию (часто по клику) открывается не вся запись, а сводка по записи. Например, как это сделано в Jira или Гугл-Диске:
Для режима предпросмотра можно применять вариации модальности: когда данные выезжают справа, поджимая таблицу. Это ближе к модальности, чем к просмотру на отдельной странице.
За предпросмотром необходимо внимательно последить: если предпросмотр всякий раз заканчивается переходом к просмотру полной информации, то режим в вашем случае оказался бесполезным.
И классические опции
Без деталей, так как уже классика и много по этой теме написано (см. ссылку в начале статьи):
- Выбор столбцов и управление их порядком.
- Управление шириной столбцов.
- Фиксация строки с заголовками.
- Фиксация первого/выбранного столбца при горизонтальном скролле.
- Зебра (хотя мнения расходятся).
Работа 2 — внесение данных
Работа в части внесения данных может быть двух типов:
- Скоростная: колл-центр, МФЦ, Почта РФ, операционистки в банках и т.д.
- Размеренная: CRM, Task-трекеры и любые другие системы, в которых скорость внесения данных не влияет на объём данных, которые будут внесены за день. Например, даже если таблица не оптимизирована для скоростного ввода, я успею внести в неё 10 записей, а больше мне и не требовалось никогда.
Если таблица автоматизирует скоростную работу, то необходимо по-настоящему “заморочиться” с эргономикой ввода, включая адаптацию таблицы и форм к условиям ввода.
Если предполагается размеренная работа, то можно “сэкономить” и не делать скоростные функции — никто за них спасибо не скажет и вау-эффекта они не вызовут.
В 2009 году я руководил проектом по автоматизации операторов колл-центра крупного колбасного завода. Операторы принимали заказы от торговых точек: кому, сколько и какой продукции привезти, чтобы она поступила в розничную торговлю. Точка звонит, диктует заказ, а оператору надо его быстро-быстро зафиксировать.
Оказалось, что если адаптировать таблицу для ввода данных на 100% с клавиатуры, то вносить данные можно гораздо быстрее, чем с использованием мышки. В итоге, мы сделали таблицу и форму ввода заказа, с которыми можно работать без мышки: табуляция и горячие клавиши были нашими основными помощниками.
Итак, как же можно помочь пользователю добавлять данные быстрее:
Горячие клавиши
Пожалуй, самый простой способ помочь пользователям быстрее вносить данные — дать им нужные горячие клавиши.
Сами горячие клавиши зависят от среды, в которой работает продукт — они не должны перебивать привычные горячие клавиши среды (windows, браузер).
Например, создание новой заметки в Evernote Desktop — это “ctrl+N”, но в Google Crome эти клавиши открывают новое окно. Поэтому для браузерного приложения Evernote комбинация”ctrl+N” уже не работает.
Хорошо, если получится сделать горячие клавиши, которые будут совпадать с горячими клавишами в тех приложениях, которыми ещё пользуются пользователи.
Создать копию
Если данные в таблице достаточно однородны, то скорость и удобство добавления новых записей можно повысить, используя опцию “Создать копию” или “Создать на основе”.
Создать копию — добавляется запись-копия в таблицу (возможно, при этом в ключевое поле добавляется текст “копия”)
Создать на основе — показывается форма добавления, которая предзаполнена данными из той записи, на основе которой создана.
Новые записи без перезагрузки
Если для добавления новых записей используется Модальное окно, то после завершения добавления и закрытия окна, необходимо без перезагрузки страницы показывать добавленную запись в таблице.
В противном случае у пользователя происходит конфуз и он перезагружает страницу с таблицей, чтобы убедиться, что всё добавлено.
Многопоточность
Я не раз видел как системы автоматизации проигрывали блокноту и ручке, потому что не имели режима многопоточности.
О чём речь:
Добавляет оператор Ирина новую заявку, а в это время ей звонит другой клиент и его заявку тоже надо зафиксировать. Что делает обычно Ирина: берёт листочек и записывает на нём параметры второго заказа. Битва Автоматизация vs Бумага проиграна.
Но если для оператора Ирины сделать кнопку “Добавить ещё”, которая открывает вторую форму добавления, не закрывая при этом первую, то Ирина добавит новую заявку сразу в электронном виде без всякой бумажки. Например, “Добавить ещё” открывает новую вкладку браузера с формой добавления.
Одна за другой
Когда пользователю необходимо внести сразу несколько записей, то удобно делать это без возврата к таблице. То есть в классическом варианте работает так:
- Нажал “Добавить”,
- Открылась страница/форма добавления,
- Сохранил,
- Страница закрылась,
- Открылась таблица.
- Нажал снова “Добавить”.
Но когда есть кнопка “Сохранить и добавить” (или чек-бокс “Добавлять после закрытия”), то можно избежать постоянного возврата к таблице. После нажатия такой кнопки сразу открывается страница/форма добавления следующей записи.
Добавление под поиск
В некоторых системах бывает удобно добавлять новые записи, учитывая поисковый фильтр. Например, в системе управления задачами найти задачи по проекту “Сайт города Н”, для исполнителя “Иванов И.” и нажать “Добавить”. В форму добавления будет сразу вписан проект “Сайт города Н” и исполнитель “Иванов И.” — удобно.
Такой кейс работает, например, в Jira.
Импорт новых записей из файла
Заполняешь файл (например, Excel) определённого шаблона и грузишь его в систему. Файл разбирается, записи создаются.
Такая экзотика может быть удобна для работы с внешними источниками информации. Например, если кому-то можно доверить заполнение файла, а доступ к самой системе доверить нельзя: собиратель информации. Или при первоначальном наполнении системы загружаются былые Excel-реестры.
Добавление записей из файла актуально для систем, автоматизирующих те области, которые ранее автоматизировали с помощью Excel. Например, удобно если в CRM можно из Excel загрузить список контрагентов.
При импорте важно визуализировать итоги импорта: загружено столько из стольки. Не загружены такие-то строки по таким-то причинам.
Работа 3 — Поиск данных
Какой бывает поиск
Начну с того, что можно выделить следующие виды поиска:
- Поиск по ключевому слову.
- Поиск по наиболее популярным параметрам.
- Поиск по столбцу таблицы.
- Расширенный поиск.
- Сохранённые поисковые запросы.
Какие виды поиска использовать — зависит от проекта.
Я бы рекомендовал в бизнесовых системах использовать как некий умолчательный базис: поиск + расширенный поиск. Это привычный паттерн для активных пользователей почтовых веб-сервисов (Гугл, Яндекс).
Немного детализирую каждый вид поиска.
Поиск по ключевому слову или фразу
Это невероятно мощный и достаточно сложный инструмент.
Сложный он, потому что может потребоваться:
Учитывать морфологию, исправлять опечатки
Какое-то время назад пользователи не были избалованы морфологией и исправлением опечаток, но сейчас некоторые системы одинаково хорошо ищут и по слову “контрАгент” и по слову “контрОгент”. Во втором случае оплошность пользователя просто будет исправлена.
Искать везде, где пользователь ожидает
Пользователь ожидает, что поиск осуществляется и в связанных таблицах/справочниках. Например, есть контрагент “Ивушка”, у которого есть сотрудники “Петров” и “Васечкин”. Сотрудники — справочник сотрудников, Контрагент — справочник контрагентов. Заходя в Контрагенты и вводя в поиск “Петров” пользователь ожидает, что найдутся и компания “Петровский причал” и компания “Ивушка”, в которой работает Петров.
Предлагать итоги на лету
Поиск можно обогатить вариантами, предлагаемыми на лету.
Пользователь вводит слово “Петр”, а ему ниже поля поиска уже показаны возможные варианты. Это классный инструмент, который экономит время на поиск.
Только делать такой инструмент необходимо разумно: например, подбирать варианты не сразу, а после 3-х символов и паузы при вводе.
Выделять искомый фрагмент
Удобно, когда показано, где конкретно найден искомый фрагмент. Если делать выделение, то важно его делать и в таблице, и на странице записи, так как искомый фрагмент может отсутствовать в свойствах, которые выводятся в столбцах таблицы.
Ещё важно — поиск по ключевому слову/фразе должен срабатывать по нажатию Enter.
Поиск по наиболее популярным параметрам
В таблицах, с которыми регулярно работают, порой удобно дать пользователю возможность определить для себя популярные поисковые поля или дать ему такие поля.
Например, я пользователь, который принимает звонок от торговой точки и должен предоставить ей информацию о заказах. И такие звонки ко мне — это основной кейс. Мне будет удобно иметь поиск, который позволяет указать наименование и адрес торговой точки, чтобы найти нужную точку, указать период заказов, указать статусы заказов. Всё! Этой мой основной поиск — остальные 20 полей расширенного поиска мне не нужны.
Поиск по столбцу таблицы
Порой полезен, но реальных кейсов у меня не много, чтобы рассказать о прикладной пользе. На моей практике такой поиск был полезен только тогда, когда основного поиска не было.
Основной плюс — многие табличные движки его поддерживают “из коробки” и можно сэкономить на предоставлении функций поиска.
Минусы наблюдаются при поиске по числовым полям и датам: ищет по совпадению, а для дат и чисел важнее поиск по интервалу (от … до …).
Расширенный поиск
Расширенный поиск не всем нужен. Некоторые пользователи вместо того, чтобы сузить область поиска, готовы искать по ключевому слову, а потом полчаса листать итоги.
Но есть порой группы пользователей, которым нужен расширенные поиск: руководители и те, кто ищет информацию по запросу из вне (call-centre, секретари и так далее).
Расширенный поиск хорош в связке с сохранёнными поисковыми запросами.
Сохранённые поисковые запросы
Если пользователь часто ищет одно и тоже, то ему порой удобно сохранить запрос. Если вы делаете сохранение запросов, то важно, чтобы доступ к ним был таким же простым, как и к форме расширенного поиска. В противном случае пользователь будет забывать, что что-то сохранял и будет всякий раз генерить новый запрос.
Количество в сохранённых запросах
Обогащение сохранённых поисковых запросов информацией о количестве записей, которые в настоящее время удовлетворяют запросу может быть очень полезным. Например, руководитель делает себе сохранённые запросы по таблице Задачи: Со срывом, Важное, От шефа. Ему будет удобнее видеть их в режиме: Со срывом (0), Важное (4), От шефа(5).
Как с почтовиком, который показывает количество непрочитанных в папках.
Количество найденных
Часто важны не итоги поиска, а количество записей, удовлетворяющих поисковому запросу. Например, руководителю сперва важно количество задач со срывом, а потому уже сами задачи.
Показывать количество после поиска — это обязательно.
Показывать количество ДО поиска — порой удобно.
Например форма поиска интерактивно отражает количество записей, удовлетворяющих поисковому запросу. Вся суть интерактивного показа не только в том, что показывается количество, но в том, что показывается, как критерии поиска влияют на количество.
Ранний показ количества найденных позволяет сэкономить пользовательское время: например, пользователь хочет поставить 5 критериев и найти итог. Но уже после второго критерия видит “Найдено: 0” — тратить время дальше нет смысла, если только он не создаёт поисковый шаблон.
Вечный поиск
Очень многие пользователи начинают свой день (или придя с обеда) с вопроса: “Так, а на чём же я тут закончил!?”.
Для большинства рабочих систем актуально, чтобы система не сбрасывала поисковые настройки. Иными словами — выполненный поиск является вечным. Конечно, итоги поиска не вечные, а только параметры поиска.
Но если сброс поиска при выходе/входе в систему — это дело для пользователя в целом терпимое, то сброс поиска при каждом уходе со страницы поиска — это раздражение. Перешёл к записи из итогов поиска, вернулся, а поиск сбросился — раздражение. Ушёл в другой раздел системы, вернулся, а поиск сбросился — раздражение.
Если вы научились не сбрасывать поиск, то важно, чтобы пользователь понимал, что включены критерии поиска. Можно вывести надпись, добавить значки в зону поиска и так далее (это уже детали).
Например, в Excel фильтр является “вечным” — фильтруешь записи и они остаются с фильтром даже после закрытия/открытия файла. Но видно крайне плохо, что записи отфильтрованы и часто пользователи начинают суетиться и искать пропавшие записи. Я так тоже искал в Excel частенько потерянные записи, не заметив, что поиск включен.
Легко сбросить
Должно быть легко сбросить поисковый фильтр. Не нужен фильтр — отключай его одним нажатием, а не очищай каждый параметр.
Поиск по свойствам из списка
Частая боль поиска — поиск по свойству из списка. Например, у записи есть свойство: Цвет, который выбирается из списка: Красный, Белый, Синий, Жёлтый, Фиолетовый.
Как правило, на форму поиска вынесут такое же поле как и при задании свойства для записи — выпадающий список, в котором можно выбрать только одно значение.
Это чертовски неудобно — невозможно, например, найти записи, цвет которых не жёлтый. Для таких полей на форме поиска удобнее делать множественный выбор свойств и с возможностью выбрать/снять все.
Работа 4 — Управление данными
Львиная доля работы с таблицей — управление данными. Данные редактируют, удаляют, перемешивают — все эти процессы заслуживают того, чтобы быть удобными.
Переход к действию над записью
В зависимости от системы, роли пользователя и таблицы над каждой строчкой в таблице можно сделать разное количество действий: просмотр, редактирование, удаление, копирование, выгрузка документа и так далее.
Классика представления возможных действий: колонка “Действия” с иконками.
Эту колонку чаще всего располагают в конце таблицы.
В современных реалиях классика имеет минусы:
- Иконки не всегда информативны.
- Если действий много, то колонка широкая и может забирать полезное пространство.
- Если таблица широкая и у неё есть горизонтальный скролл, то Действия не видно.
- Иконка удаления рядом с другими и по ней легко случайно попасть.
К счастью, есть альтернативы, которые могут улучшить классические Действия.
Правая кнопка мыши (ПКМ)
Не все любят задействовать ПКМ для вызова контекстного меню и, возможно, зря. Например, Гугл-Диск в веб-версии вынес список действий в ПКМ, а для основного действия (открыть) применил двойной клик. ПКМ и двойной клик — это очень понятные инструменты для пользователей виндовс.
Минус ПКМ — если экран поддерживает тыкание пальцем, то пользователям с ходу не ясно, что является аналогом ПКМ.
Основное действие + кебаб
Кебаб меню — три вертикальных точки.
Это мой любимый паттерн: выносится основное действие, рядом с которым выводится кебаб-меню для вызова всех остальных действий. Такой подход к представлению действий экономит место и одинаково используется, как с помощью мышки, так и с помощью пальца.
Если “действие + кебаб” вынести в начало таблицы, то горизонтальный скролл ему не будет страшен.
Этот способ хорош ещё тем, что действие “Удалить” можно отнести дальше от остальных и минимизировать количество случайных удалений:
Действия при наведении
Действия могут появляться при наведении мышкой.
Это весьма распространённый подход — у Gmail, например, так. Основной плюс подхода: не задействовано дополнительное пространство.
Есть несколько минусов:
- не годится в прямом виде для мониторов с поддержкой пальцевого ввода.
- при изучении таблицы постоянно мигают кнопки.
- кнопки закрывают часть информации — если навёл на нужную строку таблицы для её изучения, то всплывают кнопки и, собственно, изучению мешают. Если для всплывания кнопок выделили отдельное место, то основной плюс сведён на нет.
Действия над множеством записей
В системах, где таблица — один из главных интерфейсов для работы, часто полезна возможность управлять ни одной, а множеством записей в таблице: сделать что-то с выделенными. Есть несколько способов перейти к действиям над выделенными записями:
Доступные действия показаны над таблицей
Над таблицей показывается панель действий всегда или после того, как выбраны записи.
Доступные действия видны по правому клику мыши
Плюс этого способа в том, что он “в кликовой доступности” от процесса выделения строк. А основной минус — ему надо научиться, так как с ходу не ясно, что что-то можно делать по ПКМ.
Выделенные записи можно перетащить на нужные действия
Это классный способ, но, к сожалению, для рабочих систем он слишком экзотический. Например, когда кнопки действий находятся вне зоны видимости, то не все догадываются, что экран будет скроллиться, если вверх тянуть выделенные записи.
Да и в целом, не все догадываются, что можно тянуть.
Способы можно комбинировать, как это сделала Яндекс.Почта: у неё есть и действия над таблицей с письмами, и действия по ПКМ и возможность перенести выделенные письма на действия.
Смена свойств для множества записей
Часто в рабочих таблицах важно не только предоставлять возможность делать какие-то действия над множеством записей, но и менять массово свойства. Если таблица предполагает однородные свойства у записей, то работать с ней гораздо удобнее, когда есть экспресс смена свойств.
Например (из личного опыта): тасктрекер Redmine позволяет поменять приоритет выделенным задачам, или перекинуть их в другой трэк, или поменять статус. Это очень удобно: можно выделить 10 задач и всем сразу сделать первый приоритет.
Механика выделения множества записей
Недостаточно сделать просто столбец с чек-боксами. Необходимо, поддержать популярные пользовательские сценарии:
- Выделить интервал: выбрать первую запись в интервале, зажать shift, выбрать последнюю в интервале.
- Выбрать все. Вот здесь часто зарыт подводный камень: выбираются все на странице или выбираются все найденные записи. Оба решения могут иметь право на жизнь: зависит от задач, которые решает таблица. Главное — сделать так, чтобы пользователь однозначно понимал, сколько записей было выбрано.
Инлайн редактирование
Инлайн редактирование — это возможность корректировать данные непосредственно в таблице. Инструмент крут, но не всегда оправдан.
Прежде чем кидаться делать инлайн редактирование необходимо понять: является ли инлайн редактирование самодостаточным инструментом. Например, в некоторых системах каждое изменение данных связано с вводом причины изменения. Если делать инлайн редактирование, то важно сделать и ввод причины изменения, а как его сделать — это новый вызов, который надо будет поддерживать.
Инлайн редактирование полезно, когда в таблице выводятся часто сменяемые свойства: приоритет, статус, ответственный менеджер, телефон и т.п.
Если решили делать инлайн редактирование, то необходимо сделать понятным:
- процесс перехода в режим редактирования: пользователю должно быть однозначно ясно, что данные в принципе можно отредактировать непосредственно в таблице , и должно быть ясно, как это сделать.
- процесс сохранения: пользователю должно быть однозначно ясно, что необходимо сделать, чтобы сохранить изменения.
Самый однозначный вариант, который я видел: карандашик для редактирования, галка для сохранения, крестик для отмены.
Работа 5 — Экспорт данных
Основной тезис по поводу экспорта данных из таблицы:
выгружать готовое, а не сырое.
Пользователи выгружают данные из таблицы с какой-то целью — необходимо понять эту цель и сделать удобный путь её удовлетворения.
Глобально целей, как правило две:
- Технический экспорт, чтобы загрузить в другую систему.
- Пользовательский экспорт, чтобы продолжить работать с данными в другой программе или отправить человеку.
Если с техническим экспортом всё более-менее ясно, то с пользовательским есть нюансы. Далее речь в основном про экспорт в Excel.
Не подсовывать технический экспорт в качестве пользовательского
Есть формат данных CSV (данные, разделённые запятыми) — Excel может открывать такой формат в виде таблицы и создаётся иллюзия, что это пользовательский экспорт. Но нет — csv для машин, а не для людей. Вот почему:
- ширина столбцов не адаптируется под размер данных;
- дробные числа, в которых разделитель точка (а должна быть точка, так как запятая — это часть формата), воспринимаются некоторыми версиями Excel как даты. Например, 23.4 прекрасно выведется как 23 апреля текущего года;
- нет разметки у документа — нельзя взять и отправить на печать, надо шаманить.
Выгружать готовый файл
При экспорте данных для работы с ними в Excel важно позаботиться о том, чтобы пользователю как можно меньше пришлось “возиться” с выгруженным файлом. Вот, что можно для этого сделать:
- Оптимизировать для печати. Выгруженные данные должны помещаться по ширине на один лист, чтобы можно было отправить на печать.
- Давать файлу осмысленное название c указанием даты и времени экспорта. table.xlsx → 2019-04-10-13-44-56-контрагенты.xlsx.Дата и время в названии файла имеют важную функцию:
1. Во-первых, через время понятна “старость” файла.
2. Во-вторых, название становится уникальным и все Excel его откроют. У прежних версий Excel была особенность — нельзя было открывать файлы с одинаковым названием. - Соблюдать форматы данных. Даты должна быть датами, а числа числами.
- Делать приличное оформление таблицы. Необходимо выгружать данные в таблицу с разметкой, с выделением шапки, с шириной столбцов и высотой строк, которые соответствуют данным.
- Желательно в самом файле перед таблицей вывести дату и время формирования (экспорта) таблицы. Если файл отправят на печать, то всегда будет ясно, когда он был получен.
В качестве вывода — проверяем скорость и качество работы с таблицей
Цикл статей про UX-таблиц, с которыми работают закончился. И самое время подвести итог — как понять, что с таблицей удобно работать?
Необходимо оценить скорость работы с таблицей. От скорости выполнения рабочих операций порой зависит общее впечатление пользователя от таблицы или даже продукта.
Чтобы почувствовать скорость работы с таблицей необходимо полностью погрузить себя на место пользователя: например, взять у продавца материалы, которые он должен внести в таблицу за день и внести.
Главное: попытаться выполнить реальный объём работы, в реальных условиях, за реальное временное ограничение.
Понятно, что не только таблица должна быть удобной, но и сами формы добавления данных. В работе статья про UX форм, с которыми работают — не переключайтесь!
Чек-лист создания таблиц, с которыми работают
Поскольку, я верю в силу чек-листов — сделал “Чек-лист создания таблиц, с которыми работают”. Доступно для всех.
Формат чек-листа: Гугл-Таблицы (Эксель от Гугл). Кому будет полезно — берите за основу.
В чек-листе 65 требований и ссылки на теоретическую базу. Требования касаются как дизайна, так и разработки/тестирования.
Ссылка на чек-лист:Чек-лист создания таблиц, с которыми работают
Надеюсь, что материал и чек-лист будут вам полезен.
Чтобы ничего не пропустить, подписывайтесь на мой Telegram-канал @proudobstvo — про UX, продуктовую разработку и саморазвитие.