#3. UX таблиц, с которыми работают. Ч3: управление данными и экспорт
Меня зовут Михаил Греков. Я работаю менеджером продукта Velvica (velvica.com — платформа для создания магазина облачных сервисов). А до этого 11 лет руководил разработкой проектов и продуктов в компании «Интернет-Фрегат». Работал в основном с системами для бизнеса и госсектора (b2b, b2g). Пишу на medium @grekov, веду канал в Telegram @proudobstvo — про UX, продуктоводство и саморазвитие.
Это третья статья из серии про UX таблиц, с которыми работают.
Если вы не читали первую и вторую часть, то милости прошу:
Предисловие
Девиз серии статей про UX таблиц, с которыми работают, сформулирован так:
работа с таблицами для управления данными должна быть удобной.
В статьях не про дизайн, а про UX и создание условий, в которых пользователи смогут комфортно и эффективно работать с таблицами на протяжении рабочего дня. Все макеты в статье представлены лишь для демонстрации идей, а не как варианты конкретного UI.
Существуют 5 крупных видов работы с таблицами:
- просмотр данных — было в части 1,
- внесение данных — было в части 2,
- поиск данных — было в части 2,
- управление данными — в этой части,
- экспорт данных — в этой части.
Третья часть получилась больше про аналитическую сторону UX, чем про дизайнерскую. Но без неё картина была бы не полной.
Работа 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 форм, с которыми работают — не переключайтесь!
Чтобы ничего не пропустить, подписывайтесь на мой Telegram-канал @proudobstvo — про UX, продуктовую разработку и саморазвитие.
