{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог об аналитике, визуализации данных, data science и BI, заметки с тегом: ux",
    "home_page_url": "http:\/\/test.leftjoin.ru\/tags\/ux\/",
    "feed_url": "http:\/\/test.leftjoin.ru\/tags\/ux\/json\/",
    "icon": "http:\/\/test.leftjoin.ru\/user\/userpic@2x.jpg",
    "author": {
        "name": "Николай Валиотти",
        "url": "http:\/\/test.leftjoin.ru\/",
        "avatar": "http:\/\/test.leftjoin.ru\/user\/userpic@2x.jpg"
    },
    "items": [
        {
            "id": "147",
            "url": "http:\/\/test.leftjoin.ru\/all\/kak-pereverstka-pomogaet-prevratit-horoshiy-dashbord-v-otlichny\/",
            "title": "Как переверстка помогает превратить хороший дашборд в отличный",
            "content_html": "<p><img src=http:\/\/test.leftjoin.ru\/pictures\/0oblogka.png  border=“0” width=100% height=100%><\/p>\n<p>В кастомных системах сквозной аналитики конечный продукт, с которым взаимодействует пользователь — дашборды. Он не видит хранилище, витрины данных, скрипты, а дашборды видит каждый день, поэтому важно сделать их не только функциональными, но и понятными. Не всегда удается сразу нащупать оптимальный вариант, и полезно вести работу поэтапно.<\/p>\n<p>Дело в том, что в современных BI-тулах, которые мы используем — в частности, в популярном Tableau — возможности кастомизации гораздо шире, чем может себе представить сотрудник, мигрирующий с excel-таблиц. Часто пользователь просто не знает, каким вообще может быть дашборд и как составить ТЗ.<\/p>\n<p>В итоге дашборд содержит огромное количество данных, но возможность их продуктивно использовать спрятана за фильтрами, визуальной сложностью, долгой загрузкой.<\/p>\n<p>Именно такая ситуация сложилась у нас в процессе работы с образовательным стартапом Refocus.<\/p>\n<p>Один из главных их дашбордов — обзор <b>SLA (Service Level Agreement).<\/b> Его пользователи — руководители отдела продаж и сейлз-менеджеры. Именно здесь их интересует прежде всего скорость обработки входящих лидов в зависимости от ряда факторов, от источника лида до региона.<\/p>\n<p>Нормативное значение этого показателя для Refocus — 15 минут, значит, там, где он выше, есть потенциал для оптимизации процессов и роста выручки.<\/p>\n<p>Мы работаем над дашбордами <b>итеративно:<\/b> интервью с пользователем — прототип — фидбэк — следующая версия — фидбэк, и так далее. Но в случае с SLA после утверждения финальной версии остались нерешенные аналитиками функциональные проблемы.<\/p>\n<p>У заказчика было желание оптимизировать дашборды и бюджет на это, так что мы предложили общую переверстку и подключили к проекту датавиз-эксперта.<\/p>\n<h2>Версия 1: с чем мы работаем<\/h2>\n<p>Первая версия SLA-дашборда, которой некоторое время пользовался клиент, выглядела так:<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/1-32.png  border=“0” width=100% height=100%><\/p>\n<p>В фокусе три графика:<\/p>\n<ol start=\"1\">\n<li>Скаттерплот по <b>времени ответа<\/b> с момента получения лида.<\/li>\n<li>Гистограмма по <b>медианному времени ответа.<\/b><\/li>\n<li>Гистограмма по <b>средней длительности первого звонка<\/b> с лидом.<\/li>\n<\/ol>\n<p>Справа — 15 фильтров, от региона и гранулярности до имени сотрудника, работавшего с лидом.<\/p>\n<p>Сверху — много текста, поясняющего тонкости работы с фильтрами по времени.<\/p>\n<h2>Задача<\/h2>\n<p>Представьте, что ваш технический бэкграунд испарился, и вы на месте пользователя: о чем вам говорят эти графики? Сколько кликов вам нужно совершить, чтобы оценить перформанс подчиненных в вашем отделе? Чтобы сравнить SLA для лидов из разных источников? Ясен ли текст-легенда?<\/p>\n<p>А главное — есть ли у вас понимание, как сделать понятнее и что сказать исполнителю проекта?<\/p>\n<p>У аналитиков в этой области может быть слепая зона — нам-то на картине выше все понятно. А в прямые задачи датавиз-спеца входит проинтерпретировать запрос пользователя в контексте существующего функционала и создать визуализацию на стыке предпочтений заказчика и здравого смысла.<\/p>\n<p>Важно определить и причины этих проблем. Иногда ошибки — просто неудачная попытка выполнить запрос заказчика. Конечно, всегда можно отмести «плохой» запрос и сделать, как правильно — но тогда можно потерять важные для заказчика функции.<\/p>\n<p><b>Проблемы этого дашборда:<\/b><\/p>\n<ul>\n<li>Основной график — скаттерплот с SLA для всех лидов — выстроен на логарифмической шкале по оси Y без возможности переключиться на линейную. Есть сомнения, что все сейлз-менеджеры, глядя на дашборд, понимают, как работает логарифмическая шкала.<\/li>\n<li>При выборе гранулярности по неделям масштаб позволяет показать распределение точек на оси X по дням — но они распределены случайно с помощью функции RANDOM().<\/li>\n<li>Ось Y не синхронизирована между графиками, поэтому сложно оценить связь всех трех значений.<\/li>\n<li>Невозможно сравнить медианный SLA по следующим параметрам: курс, источник лида, команда, сейлз-менеджер — все они расположены в фильтрах. Сравнение требует скриншотов разных отображений или нескольких вкладок с одним дашбордом.<\/li>\n<\/ul>\n<p><b>Установленные причины:<\/b><\/p>\n<ul>\n<li>Логарифмическая шкала: заказчик, который являлся только одним из юзеров дашборда, попросил реализовать логарифмическую шкалу, чтобы смотреть на значения SLA, близкие к нулю. Видимо, это было релевантно для целей именно его отдела.<\/li>\n<li>Рандомное распределение по оси X: попытка сделать график проще и красивее, потому что скаттерплот уже перегружен информацией, и оценить распределение значений внутри недели — не приоритет.<\/li>\n<li>Неэффективные фильтры: до ввода дашборда заказчик не знал, какие именно сравнения окажутся ему полезны.<\/li>\n<\/ul>\n<p>Итог — невозможно оценить общую картину SLA в компании в отдельно взятый период, а значит и корректировать процессы и стратегии продаж.<\/p>\n<h2>Решение<\/h2>\n<p>Наш датавиз-специалист рисовал макеты карандашом на бумаге, а после утверждения переносил в Tableau: аналитический функционал и UX-дизайн для готового дашборда можно оптимизировать и без специальных тулов. Здесь хорошо ориентироваться на заказчика: если ему приятнее смотреть на файл в Figma — замечательно. Все понятно и на бумаге — отлично.<\/p>\n<p><b>Предложенные изменения:<\/b><\/p>\n<ul>\n<li>Фильтры справа сделать бар-чартами вместо выпадающих меню, чтобы разбивку по категориям было сразу видно.<\/li>\n<li>Реорганизовать дашборд в соответствии с принципами дизайна, учитывающими движение глаз человека слева-направо, сверху-вниз.<\/li>\n<li>Добавить линейную ось на скаттерплот, сделать именно ее форматом по умолчанию. Оставить возможность переключиться на логарифмическую ось.<\/li>\n<li>Нормализовать шкалу X, убрав рандомное распределение точек.<\/li>\n<\/ul>\n<h2>Версия 2: рабочая версия после переверстки<\/h2>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/2-31.png  border=“0” width=100% height=100%><\/p>\n<p><b>Что поменялось:<\/b><\/p>\n<ul>\n<li>В левой части дашборда появилась таблица-фильтр по командам и сейлз-менеджерам. По ней можно оценить показатели работы отдельных сотрудников и отделов и получить общее представление о том, как обстоят дела с SLA в компании — а именно это изначальное назначение дашборда.<\/li>\n<li>В центральной части дашборда остался скаттерплот с SLA по всем лидам, только теперь формат отображения оси (линейная или логарифмическая) можно переключить.<\/li>\n<li>Фильтры курсов, источников лидов и категорий превратились в кликабельные бар-чарты в правой части экрана. Они позволяют сразу визуально оценить медианный SLA по этим параметрам.<\/li>\n<li>Все глобальные фильтры по категориям, которые нет необходимости сравнивать между собой, оказались в верхней части дашборда, там же — фильтр по дате. Теперь пространство экрана организовано эффективнее.<\/li>\n<\/ul>\n<p><b>Фидбэк:<\/b><\/p>\n<ul>\n<li>Потерялся график по средней длительности первого звонка.<\/li>\n<li>На центральном графике исчезли отсечки с медианным SLA.<\/li>\n<li>Не подписаны столбцы в таблице слева.<\/li>\n<li>Центральный скаттерплот очень долго загружается при первом открытии дашборда, так как Tableau пытается вывести все лиды из датасета — по умолчанию ни один фильтр не применяется и никак не ограничивает количество информации для отображения.<\/li>\n<li>Необходимы мелкие правки по оформлению и тултипам.<\/li>\n<\/ul>\n<h2>Версия 3: доработки и брендирование<\/h2>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/3-27.png  border=“0” width=100% height=100%><\/p>\n<p><b>Что поменялось:<\/b><\/p>\n<ul>\n<li>В таблице слева появились подписи столбцов — теперь половина информации о работе отделов понятна при первом взгляде на дашборд.<\/li>\n<li>Центральный скаттерплот теперь отображается только после выбора фильтра по команде или конкретному сейлзу — это снижает нагрузку на хранилище и сильно ускоряет загрузку графика.<\/li>\n<li>Добавились отсечки с медианным SLA за конкретный период (месяц, неделю или день в зависимости от выбранной гранулярности).<\/li>\n<li>Вернулся график с длительностью первого звонка.<\/li>\n<li>Ось времени всех трех графиков теперь синхронизирована — не нужно сверять единицы измерения, чтобы выявить общие тренды.<\/li>\n<\/ul>\n<p>Когда функционал доработан и утвержден, вводится <b>брендирование<\/b> по корпоративным гайдлайнам. Они у Refocus выглядели так:<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/image-1.png  border=“0” width=100% height=100%><\/p>\n<h2>Обзор функционала<\/h2>\n<p>Итоговый дашборд стал гораздо проще в использовании и настройке, а функционал стал интуитивно понятен.<\/p>\n<p>Так выглядит финальный дашборд при открытии, пока не выбран ни один фильтр:<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/final.png  border=“0” width=100% height=100%><\/p>\n<p>А так, если выбрать сейлз-менеджера из таблицы слева:<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/leads.png  border=“0” width=100% height=100%><\/p>\n<p>Использование фильтров справа (например, отобразить только лидов, пришедших с вебинаров):<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/web.png  border=“0” width=100% height=100%><\/p>\n<p>Тултипы со ссылкой на первоисточник на скаттерплоте с лидами (время в них отображается в минутах при выборе любой шкалы):<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/tip.png  border=“0” width=100% height=100%><\/p>\n<p>Наконец, переключение между линейной и логарифмической шкалами:<\/p>\n<p><img src=http:\/\/test.leftjoin.ru\/pictures\/log.png.jpg  border=“0” width=100% height=100%><\/p>\n<p>Этот кейс отлично демонстрирует важность чуткой работы с заказчиком. Всегда важен баланс между экспертностью и ориентацией на пользователя. Конечно, стоит показывать ему разные возможности и предлагать оптимальные с технической точки зрения решения. Но не менее важно доверять клиенту и разбираться в причинах его запросов, чтобы сделать по-настоящему полезно и красиво. Скажем, вдруг он просит логарифмическую шкалу не потому, что не подумал о других, а потому, что без нее в его отделе не обойтись? Внимание к таким моментам — огромный плюс к компетенциям аналитика.<\/p>\n",
            "date_published": "2024-09-04T15:44:06+03:00",
            "date_modified": "2024-09-04T15:43:37+03:00",
            "image": "http:\/\/test.leftjoin.ru\/pictures\/1-32.png",
            "_date_published_rfc2822": "Wed, 04 Sep 2024 15:44:06 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "147",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "http:\/\/test.leftjoin.ru\/pictures\/1-32.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/2-31.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/3-27.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/image-1.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/0oblogka.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/final.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/leads.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/web.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/tip.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/log.png.jpg"
                ]
            }
        },
        {
            "id": "59",
            "url": "http:\/\/test.leftjoin.ru\/all\/guide-to-designing-tables\/",
            "title": "Полное руководство по созданию таблиц",
            "content_html": "<p><i>Перевод статьи <a href=\"https:\/\/medium.com\/design-with-figma\/the-ultimate-guide-to-designing-data-tables-7db29713a85a\" class=\"nu\">«<u>The Ultimate Guide to Designing Data Tables<\/u>»<\/a><\/i><\/p>\n<p>Таблицы данных различаются по размеру, сложности, содержанию и назначению. Независимо от вариантов использования все хорошо продуманные таблицы данных обеспечивают ясность представленной информации и помогают пользователям получить правильное представление о данных и обработать их.<\/p>\n<p>В данной статье собраны передовые практики, которые помогут вам лучше разрабатывать таблицы данных в ваших проектах. Она состоит из двух частей: разработка стиля таблицы и ее функционала.<\/p>\n<h2>Разработка стиля таблицы<\/h2>\n<p>Решая, как оформить и отформатировать таблицу, сделайте упор на удобстве чтения и поэтому важно избавиться от визуальных помех, которые могут отвлекать.<\/p>\n<h2>Выберите лучшее оформление строк<\/h2>\n<p>Хорошее оформление помогает пользователям читать, изучать и анализировать данные. Выберите лучший стиль в зависимости от типа и количества данных в вашей таблице.<\/p>\n<p><b>Сетка<\/b>: Включение как горизонтальных, так и вертикальных разделителей обеспечивает максимальное разграничение ячеек данных, но избыточные визуальные помехи могут отвлекать. Такой стиль рекомендуется для таблиц с большим объемом данных.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/2-13.png\" width=\"700\" height=\"393\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример сетки (таблица из UI Prep)<\/div>\n<\/div>\n<p><b>Горизонтальные линии<\/b>: Отображение только горизонтальных линий снижает визуальные помехи сетки. Этот стиль содержит много пустого пространства, тем самым, помогая пользователю не отвлекаться от чтения. Этот стиль является наиболее распространенным и подходит для любых размеров набора данных.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/3-12.png\" width=\"700\" height=\"393\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример горизонтальной линии (таблица из UI Prep)<\/div>\n<\/div>\n<p><b>Зебра<\/b>: Чередование разного цвета фона для каждой строки — ещё один хороший способ помочь пользователям сосредоточиться на чтении. Этот стиль рекомендуется для больших наборов данных, где чередование будет четким и не вызовет путаницы из-за выделения определенной строки.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/4-7.png\" width=\"700\" height=\"393\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример зебры (таблица из UI Prep)<\/div>\n<\/div>\n<p><b>Свободная форма<\/b>: Удаление всех разделителей создает минималистичный вид за счет максимального уменьшения визуальных помех. Этот стиль рекомендуется для небольших наборов данных, где пользователям не нужна помощь при чтении.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/5-8.png\" width=\"700\" height=\"393\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример произвольной формы (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Используйте заметный контраст<\/h2>\n<p>Определите иерархию, добавив контраст данных к вашей таблице. Это можно сделать с помощью разных стилей текста и фона.<\/p>\n<p><b>Контраст заголовка<\/b>: Отделите заголовок от текста столбца, изменив его жирность и цвет. Применение разных цветов фона заголовка может обеспечить дополнительный контраст, если это необходимо.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/6-7.png\" width=\"700\" height=\"708\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Наверху: контраст текста заголовка, Внизу: контраст фона заголовка (таблица из UI Prep)<\/div>\n<\/div>\n<p><b>Выделение столбцов<\/b>: Столбцы также могут быть разных цветов и жирности для выделения определенных данных, таких как идентификатор строки (первый столбец) или главных данных в одной ячейке (например, данные ячейки: 1,234 34%).<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/7-3.png\" width=\"700\" height=\"754\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Наверху: контраст первой строки, Внизу: Контраст данных (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Добавляйте визуальные подсказки<\/h2>\n<p>Используйте фоны разных цветов, чтобы организовать пространство вашей таблицы. Эти визуальные подсказки помогают представить данные таким образом, чтобы их было легче изучать и понимать.<\/p>\n<p><b>Фон строки<\/b>: Поменяйте цвет всей строки, чтобы подчеркнуть разницу в типе данных (т. е. переключение между отдельными значениями и суммами или средними значениями).<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/8-4.png\" width=\"700\" height=\"409\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример фона строки (таблица из UI Prep)<\/div>\n<\/div>\n<p><b>Фон ячейки<\/b>: Измените цвет ячейки, чтобы выделить элемент данных (например, уменьшение и повышение значения элемента данных).<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/9-4.png\" width=\"700\" height=\"322\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример фона ячейки (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Правильно выравнивайте столбцы<\/h2>\n<p>По умолчанию большинство данных столбца выравнивается по левому краю. Это помогает сделать информацию читабельной  и сопоставимой. Единственное исключение — числовые данные, связанные с размером типа данных. Эти числа должны быть выровнены по правому краю, чтобы пользователи могли определить размер числа.<\/p>\n<p>Правила, которым необходимо следовать:<\/p>\n<ol start=\"1\">\n<li>Выравнивайте текстовые данные по левому краю (например, имя)<\/li>\n<li>Выравнивайте числовые данные, не связанные с размером (например, дату, почтовый индекс, номер телефона)<\/li>\n<li>Выравнивайте числовые данные, относящиеся к размеру (например, количество, процент)<\/li>\n<li>Выравнивайте заголовки в соответствии с данными столбца<\/li>\n<\/ol>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/10-3.png\" width=\"700\" height=\"298\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример выравнивания (таблица из  UI Prep)<\/div>\n<\/div>\n<h2>Используйте табличные числа<\/h2>\n<p>При отображении чисел используйте табличный (или моноширинный) шрифт. Это означает, что вместо пропорционального интервала (т. е. символ «W» шире, символа «I»), каждая фигура имеет одинаковую ширину. Это упрощает просмотр столбцов с числовыми данными.<br \/>\nДля своей таблицы вы можете использовать моноширинный шрифт (например, Courier, Courier New, Lucida Console, Monaco и т. д.) Или моноширинный числовой набор, иногда включаемый в пропорциональные шрифты.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/11-3.png\" width=\"700\" height=\"306\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример пропорционального и табличного шрифта<\/div>\n<\/div>\n<h2>Выберите подходящую высоту для строки<\/h2>\n<p>Выберите высоту строки, наиболее подходящую для типа и количества данных в вашей таблице. Строки с обычной высотой и высотой, которая обеспечивает больше свободного пространства, более удобны для чтения больших наборов данных. Использование сжатой высоты строки позволит пользователю одновременно просматривать больше данных без необходимости прокрутки, но снижает читаемость таблицы и потенциально вызовет ошибки синтаксического анализа.<\/p>\n<p>Высота рядов:<\/p>\n<ol start=\"1\">\n<li>Сжатая: 40px<\/li>\n<li>Стандартная: 48px<\/li>\n<li>Свободная: 56px<\/li>\n<\/ol>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/12-1.png\" width=\"700\" height=\"902\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Примеры высоты строки (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Создавайте достаточно отступов<\/h2>\n<p>Сохраняйте отступ не менее 16 пикселей справа и слева от каждого столбца. Это означает, что расстояние между столбцами должно составлять не менее 32 пикселей.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/13-1.png\" width=\"700\" height=\"414\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример отступа (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Используйте подтекст<\/h2>\n<p>Подтекст может предоставить актуальный контекст и полезные детали, не занимая места и не загромождая таблицу. Его также можно использовать для объединения столбцов.<br \/>\nНапример, вместо того, чтобы иметь отдельные столбцы для пользователя и электронной почты, электронное письмо можно добавить как подтекст под именем пользователя.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/14-1.png\" width=\"700\" height=\"380\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример подтекста (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Функциональность таблицы<\/h2>\n<p>Таблицы данных должны позволять пользователям изучать, понимать, анализировать, сравнивать и действовать в соответствии с информацией в них.<\/p>\n<h2>Сохранение контекста при прокрутке<\/h2>\n<p>Прикрепите контекстную информацию, чтобы помочь пользователям понять, какие данные они просматривают при прокрутке по таблице. Это функционально важно при создании таблиц с большими наборами данных или на экранах меньшего размера.<\/p>\n<p><b>Фиксированный заголовок<\/b>: Закрепите заголовок вверху таблицы, когда пользователь ее прокручивает. Это обеспечивает контекст, постоянно сохраняя метки столбцов в поле зрения.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/15.gif\" width=\"700\" height=\"357\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример фиксированного заголовка (таблица из UI Prep)<\/div>\n<\/div>\n<p><b>Фиксированный столбец<\/b>: Закрепите первый столбец (с идентифицирующей информацией) сбоку, когда пользователь горизонтально прокручивает таблицу. Это обеспечивает контекст, постоянно сохраняя идентификатор строки в поле зрения.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/16.gif\" width=\"700\" height=\"344\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример фиксированного столбца (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Ставьте в приоритет стандартные действия<\/h2>\n<p>Разрешите пользователям выполнять стандартные действия быстро и без необходимости переходить на новую страницу. Это сэкономит время и избавит пользователей от необходимости выполнять простые повторяющиеся задачи.<\/p>\n<p><b>Действие при наведении<\/b>: Представьте стандартные действия, когда пользователь наводит курсор на строку. Они уменьшают визуальные помехи, но у новых пользователей могут возникнуть проблемы с обнаружением действий.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/17.gif\" width=\"700\" height=\"485\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример действия при наведении курсора (таблица из UI Prep)<\/div>\n<\/div>\n<p><b>Групповое действие<\/b>: Позволяет пользователям выбирать и обновлять несколько элементов одновременно. После выбора строк обобщающие действия становятся доступными в верхней части таблицы. Эта функция может сэкономить пользователям много времени, объединяя повторяющиеся задачи.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/18.gif\" width=\"920\" height=\"679\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример массового действия (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Управляйте данными с помощью фильтров<\/h2>\n<p>Позвольте пользователям управлять данными, представленными в таблице. Фильтрация данных помогает пользователям находить то, что они ищут, получать различную информацию и проводить сравнения.<\/p>\n<p><b>Базовые фильтры<\/b>: Разрешите пользователям применять предустановленные параметры к некоторым наборам данных. Эта функция универсальна и подходит для большинства таблиц данных.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/19-1.png\" width=\"700\" height=\"463\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример базового фильтра (таблица из UI Prep)<\/div>\n<\/div>\n<p><b>Комплексные фильтры<\/b>: Позвольте пользователям применять специальные параметры к определенным столбцам. Это расширение функциональности позволяет анализировать и сравнивать конкретные результаты таблиц со сложными числовыми данными. Кроме того, данная функция дает возможность сохранять «набор фильтров» для экономии времени и усилий пользователей, если возможно повторное использование.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/20-1.png\" width=\"700\" height=\"463\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример комплексного фильтра (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Включайте нумерацию страниц<\/h2>\n<p>Разбивайте длинные таблицы на несколько страниц с заданным количеством строк на каждой странице. Пользователи должны понимать, на какой странице они сейчас находятся, и иметь возможность переходить на другие страницы. Кроме того, можно дать возможность настраивать количество строк, включаемых на каждую страницу.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/21.png\" width=\"700\" height=\"335\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример нумерации страниц в таблице (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Сделайте данные столбца настраиваемыми<\/h2>\n<p>Разрешите пользователям выбирать, какие данные включать в их таблицу. Эта функция позволяет пользователю добавлять, удалять и изменять порядок столбцов в зависимости от сценария использования. Кроме того, эта функция позволяет сохранять настройки столбца, если возможно повторное использование.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/22.png\" width=\"700\" height=\"556\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример настраиваемого столбца (таблица из UI Prep)<\/div>\n<\/div>\n<h2>Сделайте параметры отображения страницы настраиваемыми<\/h2>\n<p>Разрешите пользователям настраивать порядок отображения доступных данных. Эти настройки могут служить различным рабочим процессам, открывать новые возможности для понимания и помогать пользователям, страдающим проблемами со зрением.<\/p>\n<p><b>Сортировка столбцов<\/b>: Позвольте пользователям организовывать строки по определенной категории. Любой столбец можно упорядочить в алфавитном или числовом порядке, щелкнув значок сортировки рядом с меткой столбца.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/23.png\" width=\"700\" height=\"516\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример сортировки столбца (таблица из UI Prep)<\/div>\n<\/div>\n<p><b>Столбцы с изменяемым размером<\/b>: Разрешите пользователям расширять и сжимать ширину любого столбца, чтобы полностью отобразить скрытые данные.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/24.png\" width=\"700\" height=\"516\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Столбец с изменяемым размером (таблица из UI Prep)<\/div>\n<\/div>\n<p><b>Плотность отображения<\/b>: Позволяет пользователям переключаться между высотой строк в зависимости от их варианта использования и визуальной доступности.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"http:\/\/test.leftjoin.ru\/pictures\/25.gif\" width=\"700\" height=\"420\" alt=\"\" \/>\n<div class=\"e2-text-caption\">Пример плотности отображения (таблица из UI Prep)<\/div>\n<\/div>\n<p>Хороший дизайн таблиц данных приносит большую пользу и является ценным инструментом для пользователей. Используйте лучшие практики, которые вы узнали в этой статье, чтобы переосмыслить существующий UX таблицы данных или применить их в своем следующем проекте дизайна приложения.<\/p>\n",
            "date_published": "2020-09-09T16:45:49+03:00",
            "date_modified": "2020-09-02T11:03:09+03:00",
            "image": "http:\/\/test.leftjoin.ru\/pictures\/1-12.png",
            "_date_published_rfc2822": "Wed, 09 Sep 2020 16:45:49 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "59",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "http:\/\/test.leftjoin.ru\/pictures\/1-12.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/2-12.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/3-11.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/4-6.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/2-13.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/3-12.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/4-7.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/5-8.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/6-7.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/7-3.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/8-4.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/9-4.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/10-3.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/11-3.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/12-1.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/13-1.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/14-1.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/15.gif",
                    "http:\/\/test.leftjoin.ru\/pictures\/16.gif",
                    "http:\/\/test.leftjoin.ru\/pictures\/17.gif",
                    "http:\/\/test.leftjoin.ru\/pictures\/18.gif",
                    "http:\/\/test.leftjoin.ru\/pictures\/19-1.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/20-1.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/21.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/22.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/23.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/24.png",
                    "http:\/\/test.leftjoin.ru\/pictures\/25.gif"
                ]
            }
        }
    ],
    "_e2_version": 3365,
    "_e2_ua_string": "E2 (v3365; Aegea)"
}