Как стратегически планировать UX-дизайн с большим объемом данных

Опубликовано: 2023-02-12

Большие данные раздуваются. Тем не менее, согласование сложных потребностей в данных с простым, понятным и полезным пользовательским интерфейсом сегодня является испытанием для любого UX-дизайнера. Часто дизайн (инструмент для передачи сообщения) мешает общению (сообщение или смысл, спрятанный в горах необработанных данных).

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

Однако сохранение всех возможных контекстных данных приводит к неработоспособному приложению.

Итак, как же найти правильный баланс?

То, как приложение представляет данные, играет огромную роль, и именно здесь в дело вступают дизайнеры UX.

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

Однако пока я не буду обсуждать лучшие языки для разработки приложений для работы с большими данными.

Вот как спроектировать UX с большим объемом данных:

Оглавление
1. Как разработать потрясающие приложения для работы с большими данными, которые понравятся клиентам
1.1. 1. Используйте образы пользователей для разработки полезных информационных панелей на основе данных
1.2. 2. Юзабилити превыше стиля: простота, ясность и изящность
1.3. 3. Комбинируйте материал и плоский дизайн — функциональность превыше формы
1.4. 4. Доступность важнее эстетики
1.5. 5. Оставьте место для улучшений
2. Основные выводы

Как разработать потрясающие приложения для работы с большими данными, которые понравятся клиентам

Возможно, лучше всего начать с вопроса о том, кто ваш клиент.

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

Может быть, вы создали потрясающую великолепную приборную панель и вовремя доставили ее клиенту только для того, чтобы он спросил: «Итак, где я могу сделать X, Y и Z?»

Ой! Должно быть, это было больно.


1. Используйте образы пользователей для разработки полезных информационных панелей на основе данных

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

А лучшие UX-дизайнеры создают продукты, которые помогут решить проблему людей, которые будут использовать приложения, управляемые данными.

Как они это делают?

Эрик Климч, старший руководитель отдела дизайна в Uber и Advanced Technologies Group, поделился несколькими практическими советами на Medium. Он предлагает UX-дизайнерам сначала определить, а затем определить пользователей или персонажей для каждого проекта.

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

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

Вот иллюстрация:

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

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

Кроме того, вы можете определить, какой тип инструментов визуализации данных использовать для каждого клиента, ответив на такие важные вопросы, как:

  • Кто будет иметь дело с данными (персонажами пользователей)? Предназначен ли он, например, для клиентов или внутренних анализаторов данных?
  • Что этим пользователям нужны данные, чтобы помочь им делать дальше?

Например:

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

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

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

Вы можете найти этот тип интерактивного инструмента визуализации данных в действии на сайте Mahfix for You vs John Paulson. Он позволяет вам вводить число, а затем сообщает информацию на основе вашего ввода. Это довольно гладко!


2. Юзабилити превыше стиля: простота, ясность и изящность

Мужчина и женщина планируют ясность пользователя перед стеной, полной разноцветных заметок

Легко увлечься разработкой привлекательного UX, который зацепит вас, но, честно говоря, непрактичный для вашего клиента.

Чтобы быть удобным, интерфейс должен быть понятным. «Ясность — это работа № 1», по словам плодовитого UX-дизайнера Джошуа Портера.

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

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

Это будет зависеть от вашего клиента/пользователя.

Постоянно появляются новые настраиваемые инструменты визуализации данных: инфографика (как статическая, так и интерактивная), блоки с цветовой кодировкой, анимация, 3D-визуализация и так далее.

Однако на самом деле есть только четыре инструмента представления данных, которые вам когда-либо понадобятся:

  • Линейные диаграммы для иллюстрации непрерывных данных, например, как что-то изменилось с течением времени.
  • Таблицы для отображения сводной информации
  • Гистограммы для отображения распределения переменных и построения количественных данных в интервалах
  • Гистограммы для отображения дискретных данных, сравнения переменных и построения категориальных данных.

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

Вот один из способов сделать это:

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

Более того, проектирование интерфейсов с большим объемом данных может быть проще:

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

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


3. Комбинируйте материал и плоский дизайн — функциональность превыше формы

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

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

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


4. Доступность важнее эстетики

Дело не только в том, чтобы сделать объемные контекстные данные плавными и привлекательными (хотя это очень помогает). Вы также хотите разработать презентации данных, которые облегчат конечному пользователю:

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

Как насчет того, чтобы разбить каждый из этих элементов?

Пользователи должны знать, какие данные являются наиболее важными

Один из жизненно важных принципов UX-дизайна — соблюдать и реализовывать иерархию информации — в данном случае визуальную иерархию.

Другими словами, дизайн, который отдает приоритет правильным показателям.

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

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

Пользователи должны быть в состоянии понять логический поток данных

Простота играет важную роль, помогая пользователю связать данные с определенным результатом.

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

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

вид сверху на людей, работающих за столом с ноутбуком и заметками

Вот два способа помочь с потоком:

Скрыть дополнительную информацию

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

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

Опять же, вы увидите, как качественное исследование личности в дизайне UX может помочь вам определить, что для какого пользователя важнее всего и когда.

Используйте анимацию при наведении

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

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

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

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

Пользователи должны понимать, что означают данные

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

Это может подойти как для небольших, так и для сложных проектов по разработке приложений с большим объемом данных, хотя это может занять больше времени и потребовать больше работы на серверной части.

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

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

Часто клиент будет запрашивать этот тип панели инструментов, но вам лучше знать.

gif примера панели событий av
Одним из отличных решений для перегруженных панелей мониторинга является возможность настройки и дизайна, как в этом примере панели управления AV-событиями.

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

Пользователи должны понимать, что делать дальше

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


5. Оставьте место для улучшений

И последнее, но не менее важное: вы захотите сделать свой дизайн гибким.

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

Основные выводы

Цель UX-дизайна — передать сообщение четким и действенным способом. Это особенно важно для разработки приложений с большим объемом данных. В этом случае задача хорошего дизайна — помочь аналитикам, менеджерам или конечным пользователям принять обоснованное решение.

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

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

У вас есть какие-нибудь советы, которым вы следуете, чтобы создавать потрясающие пользовательские интерфейсы для визуализации данных, и которыми вы хотели бы поделиться?

Дайте нам знать в комментариях ниже.