2 заметки с тегом

Дизайн

10 правил для совершенного дизайна дашборда

Время чтения текста – 24 минуты

Данная статья — перевод оригинала

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

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

Работая над корпоративными проектами в течение многих лет, я разработал бесчисленное количество дашбордов, и каждый новый становится для меня вызовом. Хороший дизайн дашборда может быть сложной задачей. Основываясь на своем опыте, я составил список полезных советов, которые помогут вам в будущем. Неважно, начинающий вы или уже опытный дизайнер,я уверен, что вы найдете здесь что-то интересное.

1. Определите назначение дашборда

Как и любое другое представление в вашем продукте, дашборд предназначен для определенной цели. Ошибка в понимании его предназначения делает ваши дальнейшие усилия бессмысленными. Существует несколько популярных способов категоризации дашбордов в зависимости от их назначения (аналитические, стратегические, оперативные, тактические и т. д.). Для простоты я разделю их на 2 более общие формы:

Оперативные дашборды

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

Ключевые особенности оперативного дашборда

Аналитические дашборды

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

Ключевые особенности аналитического дашборда

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

2. Выбирайте представление данных правильно

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

Типы графиков, которые помогут вам увидеть взаимосвязь в данных

Точечные диаграммы в основном используются для анализа корреляции и распределения. Кружковая диаграмма помогает ввести в диаграмму третью величину. Сетевая диаграмма удобна, когда очень важно даже самое незначительное соединение между точками данных.

Типы графиков, которые помогают сравнивать значения

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

  1. Время всегда всегда должно быть осью X, поскольку оно на диаграммах идет слева направо.
  2. При использовании горизонтальной или вертикальной гистограммы старайтесь отсортировать столбцы по наибольшему значению, а не случайным образом.
  3. При использовании линейного графика диаграммы не должны отображать более 5 значений, а с гистограммами не рекомендуется отображать более 7 значений.
Типы графиков, которые помогут вам увидеть варианты построения

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

Типы графиков, помогающих проследить распределение

Диаграммы распределения помогут вам проиллюстрировать выделяющиеся значения, естественную тенденцию и диапазон информации в ваших значениях.

Типы графиков, которых следует избегать

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

Когда использовать различные типы графиков

Чтобы правильно выбрать тип представления данных для диаграммы, задайте себе следующие вопросы:

  1. Сколько переменных вы хотите отобразить на одной диаграмме?
  2. Будете ли вы отображать значения за определенный период времени или среди элементов / групп?
  3. Сколько точек данных необходимо отображать для каждой переменной?

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

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

4. Определитесь с внешним видом потока информации. Расставляйте приоритеты.

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

Сетка и модули

Принимая решение о том, какая информация должна быть, имейте в виду следующее:

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

5. Используйте составные элементы с последовательной структурой.

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

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

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

6. Удвойте свою прибыль.

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

Визуальная разница между полями 12 пикселей и 24 пикселей

7. Не скрывайте информацию и не слишком полагайтесь на взаимодействия с другими элементами панели.

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

Empire State Dashboard

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

Не слишком полагайтесь на большое количество взаимодействий при раскрытии информации

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

Пример дашборда с перегруженными данными

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

8. Персонализируйте, а не настраивайте.

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

Настраиваемый дашборд

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

9. При интеграции таблиц или списков данных убедитесь, что они интерактивны и данные выровнены правильно.

Таблица данных — отличное решение, когда вам нужно показать много информации для большого количества элементов. Например, список клиентов с их идентификаторами, статусом, контактами, последней активностью и т.д. лучше всего отображать в виде таблицы данных. Есть много других преимуществ — это эффективное использование пространства, легкая масштабируемость, простота разработки, и пользователям, как правило, комфортно работать с сетками, поскольку многим людям уже привыкли работать с Microsoft Excel. Это простой способ что-то найти и изменить. Вы можете узнать больше о таблицах данных в этой статье.

10. Проектируйте дашборд в последнюю очередь.

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

Полное руководство по созданию таблиц

Время чтения текста – 23 минуты

Перевод статьи «The Ultimate Guide to Designing Data Tables»

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

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

Разработка стиля таблицы

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

Выберите лучшее оформление строк

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

Сетка: Включение как горизонтальных, так и вертикальных разделителей обеспечивает максимальное разграничение ячеек данных, но избыточные визуальные помехи могут отвлекать. Такой стиль рекомендуется для таблиц с большим объемом данных.

Пример сетки (таблица из UI Prep)

Горизонтальные линии: Отображение только горизонтальных линий снижает визуальные помехи сетки. Этот стиль содержит много пустого пространства, тем самым, помогая пользователю не отвлекаться от чтения. Этот стиль является наиболее распространенным и подходит для любых размеров набора данных.

Пример горизонтальной линии (таблица из UI Prep)

Зебра: Чередование разного цвета фона для каждой строки — ещё один хороший способ помочь пользователям сосредоточиться на чтении. Этот стиль рекомендуется для больших наборов данных, где чередование будет четким и не вызовет путаницы из-за выделения определенной строки.

Пример зебры (таблица из UI Prep)

Свободная форма: Удаление всех разделителей создает минималистичный вид за счет максимального уменьшения визуальных помех. Этот стиль рекомендуется для небольших наборов данных, где пользователям не нужна помощь при чтении.

Пример произвольной формы (таблица из UI Prep)

Используйте заметный контраст

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

Контраст заголовка: Отделите заголовок от текста столбца, изменив его жирность и цвет. Применение разных цветов фона заголовка может обеспечить дополнительный контраст, если это необходимо.

Наверху: контраст текста заголовка, Внизу: контраст фона заголовка (таблица из UI Prep)

Выделение столбцов: Столбцы также могут быть разных цветов и жирности для выделения определенных данных, таких как идентификатор строки (первый столбец) или главных данных в одной ячейке (например, данные ячейки: 1,234 34%).

Наверху: контраст первой строки, Внизу: Контраст данных (таблица из UI Prep)

Добавляйте визуальные подсказки

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

Фон строки: Поменяйте цвет всей строки, чтобы подчеркнуть разницу в типе данных (т. е. переключение между отдельными значениями и суммами или средними значениями).

Пример фона строки (таблица из UI Prep)

Фон ячейки: Измените цвет ячейки, чтобы выделить элемент данных (например, уменьшение и повышение значения элемента данных).

Пример фона ячейки (таблица из UI Prep)

Правильно выравнивайте столбцы

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

Правила, которым необходимо следовать:

  1. Выравнивайте текстовые данные по левому краю (например, имя)
  2. Выравнивайте числовые данные, не связанные с размером (например, дату, почтовый индекс, номер телефона)
  3. Выравнивайте числовые данные, относящиеся к размеру (например, количество, процент)
  4. Выравнивайте заголовки в соответствии с данными столбца
Пример выравнивания (таблица из  UI Prep)

Используйте табличные числа

При отображении чисел используйте табличный (или моноширинный) шрифт. Это означает, что вместо пропорционального интервала (т. е. символ «W» шире, символа «I»), каждая фигура имеет одинаковую ширину. Это упрощает просмотр столбцов с числовыми данными.
Для своей таблицы вы можете использовать моноширинный шрифт (например, Courier, Courier New, Lucida Console, Monaco и т. д.) Или моноширинный числовой набор, иногда включаемый в пропорциональные шрифты.

Пример пропорционального и табличного шрифта

Выберите подходящую высоту для строки

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

Высота рядов:

  1. Сжатая: 40px
  2. Стандартная: 48px
  3. Свободная: 56px
Примеры высоты строки (таблица из UI Prep)

Создавайте достаточно отступов

Сохраняйте отступ не менее 16 пикселей справа и слева от каждого столбца. Это означает, что расстояние между столбцами должно составлять не менее 32 пикселей.

Пример отступа (таблица из UI Prep)

Используйте подтекст

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

Пример подтекста (таблица из UI Prep)

Функциональность таблицы

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

Сохранение контекста при прокрутке

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

Фиксированный заголовок: Закрепите заголовок вверху таблицы, когда пользователь ее прокручивает. Это обеспечивает контекст, постоянно сохраняя метки столбцов в поле зрения.

Пример фиксированного заголовка (таблица из UI Prep)

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

Пример фиксированного столбца (таблица из UI Prep)

Ставьте в приоритет стандартные действия

Разрешите пользователям выполнять стандартные действия быстро и без необходимости переходить на новую страницу. Это сэкономит время и избавит пользователей от необходимости выполнять простые повторяющиеся задачи.

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

Пример действия при наведении курсора (таблица из UI Prep)

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

Пример массового действия (таблица из UI Prep)

Управляйте данными с помощью фильтров

Позвольте пользователям управлять данными, представленными в таблице. Фильтрация данных помогает пользователям находить то, что они ищут, получать различную информацию и проводить сравнения.

Базовые фильтры: Разрешите пользователям применять предустановленные параметры к некоторым наборам данных. Эта функция универсальна и подходит для большинства таблиц данных.

Пример базового фильтра (таблица из UI Prep)

Комплексные фильтры: Позвольте пользователям применять специальные параметры к определенным столбцам. Это расширение функциональности позволяет анализировать и сравнивать конкретные результаты таблиц со сложными числовыми данными. Кроме того, данная функция дает возможность сохранять «набор фильтров» для экономии времени и усилий пользователей, если возможно повторное использование.

Пример комплексного фильтра (таблица из UI Prep)

Включайте нумерацию страниц

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

Пример нумерации страниц в таблице (таблица из UI Prep)

Сделайте данные столбца настраиваемыми

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

Пример настраиваемого столбца (таблица из UI Prep)

Сделайте параметры отображения страницы настраиваемыми

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

Сортировка столбцов: Позвольте пользователям организовывать строки по определенной категории. Любой столбец можно упорядочить в алфавитном или числовом порядке, щелкнув значок сортировки рядом с меткой столбца.

Пример сортировки столбца (таблица из UI Prep)

Столбцы с изменяемым размером: Разрешите пользователям расширять и сжимать ширину любого столбца, чтобы полностью отобразить скрытые данные.

Столбец с изменяемым размером (таблица из UI Prep)

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

Пример плотности отображения (таблица из UI Prep)

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