Показатели здоровья и повседневные дела конкурируют за внимание на одном экране. В HealthHub я собрал личный обзор, в котором числа сохраняют контекст, а мобильная версия меняет порядок блоков под задачи дня.
Посмотреть экраныЛичный кабинет соединяет два вопроса: что происходит с показателями и что запланировано на день. Четыре карточки здоровья показывают значения и тенденции, недельная активность добавляет временной контекст, календарь выделяет дату. Лекарства и консультации представлены разными карточками.
Задача дизайна — установить приоритеты чтения при смене экрана. На компьютере активность и календарь соседствуют. На телефоне вертикальная последовательность определяет, к какому вопросу пользователь обратится раньше. Приоритет календаря здесь — проектная гипотеза, которую предстоит проверить.
Порядок чтения на телефоне: четыре показателя
Выбранная дата и календарный контекст
Карточки лекарств и консультаций
Недельная активность для сопоставления
Отдельное крупное значение не даёт понять единицу измерения или направление изменения; пользователю приходится восстанавливать смысл по памяти.
Четыре показателя собраны в карточки со значением, единицей и трендом. График недельной активности дополнен линией среднего, чтобы у отдельных дней был видимый ориентир.
Тренд и среднее поддерживают чтение данных, но не объясняют причины изменений. Визуальный обзор не даёт основания для медицинского заключения.
Последовательное сжатие настольной сетки отодвинуло бы календарь за график активности и изменило доступность задач выбранного дня.
На большом экране после показателей расположены активность и календарь рядом. На мобильном карточки образуют сетку 2 × 2, а календарь предшествует активности; снизу размещена навигация.
Недельный обзор оказывается ниже по странице. Пользователям, приходящим прежде всего ради активности, может потребоваться дополнительная прокрутка; это предмет будущего теста.
Лекарство и консультация требуют разной интерпретации: одинаковое оформление событий затруднило бы определение типа предстоящего дела.
Для лекарств и консультаций используются разные карточки. Выбранная дата получает собственное состояние в календаре, сохраняя видимый ориентир при просмотре страницы.
В демо выбор даты меняет только выделение: события не обновляются. Связь календаря с содержимым и состояния дней без событий ещё нужно реализовать.
Палитра и принципы, представленные в прототипе. Полная спецификация компонентов пока не входит в кейс.
Розовый #F5C9F3, зелёный #179A55, жёлтый #FFE985 и синий #416DE2 формируют характер HealthHub. Цветовое разнообразие поддерживает различимость блоков; медицинский смысл показателей остаётся в подписях.
#F5C9F3#179A55#FFE985#416DE2Название, значение, единица и тренд сохраняют роль при изменении сетки. Адаптация перестраивает расположение карточек, сохраняя необходимые для чтения чисел элементы внутри них.
Настольная и мобильная композиции используют одинаковые смысловые блоки с разным порядком. Так дизайн явно задаёт приоритет календаря на телефоне без отказа от недельного контекста.
HTML-превью исходных русскоязычных прототипов, только для просмотра. Демонстрационные данные; персональные идентификаторы заменены.
Четыре показателя находятся над активностью и календарём. Недельный график с линией среднего можно рассматривать рядом с планом дня.
На узком экране сохраняются четыре карточки с единицами и трендами. Календарь расположен перед активностью, нижняя навигация обозначает разделы.
Подготовлен адаптивный личный дашборд: четыре показателя, недельная активность со средним, календарь и разные карточки событий. В мобильной композиции реализован другой порядок календаря и активности.
В будущем тесте определить значение, единицу и направление тренда одного показателя.
Фиксировать ошибки единиц, неверное чтение тренда и случаи восприятия среднего как персональной нормы.
Найти лекарство и консультацию на мобильном дашборде, затем открыть недельный обзор.
Наблюдать порядок поиска, прокрутку, возвраты и ошибки определения типа события.
После подключения событий сменить дату и объяснить, какие дела относятся к ней.
Проверять соответствие выбранного дня карточкам и понимание пустого дня без подсказки модератора.
Сначала текущая аренда