В этой статье
Scott
Мобильный дашборд должен помочь быстро понять ситуацию и выбрать следующее действие. Он не обязан повторять все виджеты настольной версии: на небольшом экране важнее порядок показателей, понятные сравнения и переход к деталям. Начните с решения, которое пользователь принимает в дороге или между задачами, а не с уменьшения готовой сетки.
В редакторе интерфейсов Pixso можно расположить рядом настольный и мобильный варианты, сохраняя одинаковые данные. Ниже — принципы мобильной панели, три визуальных примера и разбор сводки заказов для руководителя смены.
Это настольная панель с несколькими колонками. Если просто уменьшить её до ширины телефона, подписи и элементы управления станут слишком мелкими. Для мобильной версии нужно заново расставить приоритеты и предусмотреть переходы к деталям.
Часть 1. Эволюция пользовательского интерфейса мобильной панели мониторинга
Пользовательский интерфейс мобильной панели мониторинга был востребован различными компаниями, работающими с бизнес-аналитикой (BI). Предприятиям требуются хорошо продуманные мобильные информационные панели, которые оценивают все ключевые показатели эффективности, связанные с бизнесом, и обеспечивают пользователю простоту получения важных данных, таких как продажи, маркетинг, финансовые портфели, управление расходами, электронная коммерция, отслеживание статуса заказа и многие другие потребности.
Эта тенденция сохраняется, и пользователи хотят, чтобы информационные панели были быстрыми, обеспечивали оперативный анализ и улучшали работу с приложением. В конце концов, пользователи хотят, чтобы при выполнении личных и рабочих задач не возникало помех.
Следовательно, такой же минималистичный подход к дизайну должен быть реализован и в интерфейсе мобильной панели мониторинга. Давайте углубимся в дизайн и узнаем, как можно создать эффективную мобильную панель мониторинга.
Часть 2. Советы по дизайну для создания эффективного интерфейса мобильной панели мониторинга.
Определите своих пользователей и узнайте их болевые точки
Первый и самый важный совет - понять, кто ваши пользователи. Когда вы знаете, кто ваши потенциальные пользователи, это помогает вам понять их болевые точки и определить цель вашего дизайна мобильной панели мониторинга.
Поймите, какие ключевые показатели эффективности, отчеты, статистику, диаграммы и т.д. они ищут, и это может быть включено в ваш план разработки на раннем этапе.
Внедрите удобный дизайн для всех пользователей
Определите, какое решение должен принять пользователь и какая информация ему для этого нужна. Показывайте расшифровки сокращений, единицы измерения и доступные действия. Проверьте панель при увеличенном тексте и без возможности различать значения только по цвету.
Сделайте интерфейс панели мониторинга адаптивным
Мобильные панели должны быть адаптивными и подходить для экранов разного размера. Вы не только делаете мобильную панель мониторинга такой же удобной для пользователя, как на настольном компьютере, но и адаптируете ее к экранам мобильных устройств разного размера.
Используйте методы проектирования, чтобы обеспечить соответствие компонентов дизайна на мобильной панели мониторинга различным размерам экрана.
Используйте знакомые пользователям решения
Знакомые способы взаимодействия снижают необходимость заново изучать каждый экран. Например, период отчёта лучше показывать рядом с показателями, а переход к подробностям — делать заметным действием. Но привычная форма сама по себе не гарантирует удобства: значения и названия должны соответствовать задаче ваших пользователей.
Используйте привычные способы размещения кнопок и других элементов: так пользователям будет проще ориентироваться в панели мониторинга.
Добавьте контраста в пользовательский интерфейс мобильной панели мониторинга
Мобильные панели ограничены размерами мобильных экранов, но их дизайн должен компенсировать этот недостаток. Поэтому вам необходимо выделить важные компоненты вашего дизайна.
Контрастом выделяйте действительно важное: показатель, который требует внимания, и действие рядом с ним. Не кодируйте смысл только красным или зелёным цветом. Добавьте подпись и знак изменения, чтобы рост расходов не выглядел положительным результатом лишь потому, что он показан зелёной стрелкой вверх.
Показывайте контекст показателей
Указывайте, к какому периоду, подразделению или группе заказов относится показатель. Фильтры должны объяснять, какие данные сейчас показаны. Не добавляйте все доступные метрики на первый экран только потому, что они есть в отчёте.
Поддерживайте согласованность дизайна
Сохраняйте согласованные названия, единицы измерения, шкалы и роли цветов. Одинаковые показатели должны обозначаться одинаково на всех экранах. Декоративная пропорция цветов 60/30/10 не заменяет этих правил: для панели важнее отличать текущие значения, сравнение и предупреждения.
Мобильные панели должны придерживаться той же цветовой гаммы на всех экранах приложения для согласованности дизайна.
Пример: сводка заказов для руководителя смены
Руководитель открывает панель на телефоне, чтобы понять, какие заказы требуют вмешательства. В настольной версии есть продажи, выручка, источники, средний чек и длительная история. На мобильном первом экране начните с незавершённых заказов и отклонений, а финансовую детализацию оставьте доступной по переходу.
| Данные примера | Решение пользователя | Место в мобильной панели |
|---|---|---|
| 6 заказов задерживаются | Открыть задержанные и назначить ответственного | Первый блок с прямым переходом к этим заказам |
| 24 заказа в работе | Оценить текущую нагрузку | Краткая сводка рядом с периодом |
| Загрузка по часам | Понять, когда накапливается очередь | Компактный график с доступными значениями |
| Выручка за квартал | Разобрать финансовую динамику | Отдельный подробный отчёт |
Период «сегодня» должен иметь понятные границы, особенно если смены или филиалы работают в разных часовых поясах. Сравнивать неполный сегодняшний день с полным вчерашним днём без объяснения опасно: подпись должна показывать, за какие интервалы рассчитаны значения.
Не уменьшайте график до нечитаемого размера
Оставьте на небольшом графике один основной вопрос: где возникла очередь или как меняется нагрузка. Если подписи каждой категории не помещаются, уменьшите число категорий, измените форму представления или вынесите подробности на отдельный экран. Всплывающая подсказка, доступная только при наведении, не может быть единственным способом получить число на сенсорном устройстве. Предусмотрите выбор точки касанием и текстовый доступ к важным значениям.
Сохраняйте одинаковую шкалу, когда пользователь должен сравнить несколько мини-графиков. Если шкалы различаются, подпишите это явно: две одинаково высокие линии иначе могут означать совершенно разную величину. Для рейтинга из нескольких категорий обычные горизонтальные полосы часто понятнее сложной круговой композиции.
Обновление данных — часть дизайна
| Состояние | Что сообщить | Что оставить доступным |
|---|---|---|
| Данные загружаются впервые | Идёт получение сводки | Период и контекст панели без вымышленных нулей |
| Идёт обновление | Показаны предыдущие данные | Последние известные значения с отметкой времени |
| Нет данных за период | Данных нет, а не «всё равно нулю» | Смена периода или проверка условий |
| Не удалось обновить | Когда сводка обновлялась в последний раз | Повтор запроса и ранее полученные значения, если они есть |
В Pixso создайте рядом первый экран с обычной нагрузкой, экран с задержанными заказами и экран с устаревшей сводкой. Свяжите показатель «6 задерживаются» с соответствующим списком. Это поможет команде проверить, что тревожный показатель приводит к действию, а не только украшает панель.
Часть 3. Примеры дизайна мобильного пользовательского интерфейса
Мобильные панели, такие как банковские приложения или системы бронирования, могут вдохновить вас при создании собственной панели мониторинга:
1. Панель управления банковским приложением
В банковском примере сравните, как разделены общий баланс, отдельные счета и операции. Для своей панели определите, какое значение пользователь читает первым и какое действие следует за ним. Цвет карточки не должен быть единственным признаком выбранного счёта.
2. Панель управления приложением для бронирования авиабилетов
В таком интерфейсе дата, маршрут и статус поездки важнее количества виджетов. Если данные требуют обновления, пользователь должен понимать, какие сведения уже подтверждены, а какие ещё загружаются. Для будущей поездки предусмотрите переход от сводки к конкретному бронированию.
3. Панель управления приложением «Умный дом»
Здесь наблюдение за состоянием и управление устройством находятся рядом. Различайте текущую температуру и заданную, состояние устройства и отправленную команду. Касание переключателя ещё не доказывает, что физическое устройство выполнило действие.
Свяжите показатель с понятным действием
Начните с одного решения пользователя и оставьте на первом экране данные, которые нужны для этого решения. Затем добавьте путь к деталям, сравнение за понятный период и состояния загрузки. Мобильная панель становится полезнее не от большего числа показателей, а от того, что по ним можно действовать.
В Pixso соберите первый экран и связанные с ним подробные списки. Покажите команде, как пользователь переходит от показателя к конкретному заказу, счёту или устройству, и согласуйте содержание каждого состояния.
