Как сделать мобильный интерфейс, который не бесит
Digital-агентство «Атвинта» рассказывает о том, что учитывать при создании мобильного интерфейса — на примере визуально простого приложения «Датчик спокойствия».
При разработке мобильного интерфейса важно не переборщить с функциями. У пользователя есть задача, и приложение должно помогать в ее решении.
Задача
«Датчик спокойствия» — одна из услуг оператора связи Кузбасса Good Line для частных клиентов. Это камера в квартире, которая реагирует на движение, изменение картинки, громкие звуки, идентифицирует зарегистрированных пользователей и передает информацию о происходящем хозяевам дома. «Датчик спокойствия» помогает удаленно мониторить ситуацию дома в отсутствии хозяина.
Чтобы система функционировала, пользователь должен быть вовремя уведомлен о критических событиях. Для этого функции камеры интегрированы с мобильным приложением, в котором отображаются изменения, зафиксированные камерой. При помощи приложения можно следить за порядком из любой точки мира, достаточно мобильного телефона и выхода в интернет.
В итерфейсе пользователю нужен доступ к информации сразу, без лишних действий. В критических ситуациях от этого зависит оперативность реагирования. Например, если в дом попал посторонний.
Проектирование и дизайн
В приложении два основных экрана: «Камера» и «События». При проектировании встал вопрос о том, что должен видеть человек в первую очередь: трансляцию с камеры или список событий, которые произошли. Выделили 2 пользовательских сценария:
Сценарий 1
Человек получил уведомление об опасном событии. Тогда нужно сразу показать, что происходит дома и попасть на экран «Камеры».
На экране «Камеры» пользователь:
- видит, что происходит в квартире прямо сейчас
- включает или отключает видеонаблюдение
- устанавливает таймер включения на нужное время (ночной режим)
- просматривает список зарегистрированных членов семьи и их статус: дома или нет.
По нажатию на аватар пользователя открывается история его статусов: когда вернулся домой, в какое время уходит.
Одна из аудиторий приложения — родители с детьми. Такое решение позволяет родителям убедиться, что все в порядке, и не надоедать ребенку звонками.
Сценарий 2
Человек зашел в приложение, чтобы узнать, как обстоят дела дома. Тогда он попадает на экран «События».
Экран «События» показывает, что зафиксировал датчик за определенный промежуток времени.
События выделяются при помощи иконок и цветовой дифференциации:
- красные — опасность: громкий звук или движение. Дополнительно к этому событию прикрепляется скриншот происходящего с камеры.
- зеленые — важное событие: включен режим охраны, пользователь вернулся домой
- серые — рядовые события: пользователь покинул дом
При проектировании этого экрана, мы тестировали дизайн скриншотами с реальных камер видеонаблюдения. Изображения таких камер обычно менее четкие и детализированные по сравнению с профессиональными фотографиями. Важно было убедится, что картинка любого качества будет отображаться достаточно крупно, чтобы пользователь увидел все важные детали. При этом сделать так, чтобы в экране «События» этот элемент не занимал полностью все пространство.
Вот так выглядит процесс работы пошагово:
Результат — интерфейс, выполняющий свою задачу и неперегруженный лишними функциями. При разработке опирались на гайдлайны опрационных систем iOS и Android, чтобы пользователям было привычнее пользоваться приложением.
Перекрытие скриншота камеры примерно на 25% плашкой слева не является проблемой? В разных сценариях именно в том месте может быть объект движения. Кстати, а почему только скриншот? Видео на n-секунд камера может писать?
Скриншот перекрыт плашкой в экране с "Историей". На этот экран пользователь попадает, когда смотрит отчет о всех событиях. При желании оттуда можно перейти в экран камеры.
Когда произошло что-то опасное, пользователь сразу увидит экран с камерой во весь интерфейс. Это сценарий 1.
Как минимум видео тяжелее. Не все устройства и не всякий интернет смогут принять этот медиаформат.
Есть большой вопрос про аватары - если это дом, квартира, офис, зачем они нужны? При этом дублируется имя - Константин, Татьяна пришли - ушли. Минимально - Иконка ухода крупнее - текст - Костя пришел. Татьяна ушла. Сейчас же у вас и в том и в другом варианте происходит ненужный дубль информации. По поводу плашки с текстом на скрине комнаты, согласен с Русланом, спрятана полезная инфа. Эта фотка мелкая то по сути нужна не только для того, чтобы понять в какой комнате нарушен покой или зафиксировано движение и во сколько, а чтобы быстро определить, не кликая во внутрь, что является причиной - кот, сквозняк или ворюга. Это даст экономии времени и избавит от лишних кликов на просмотр всей фотки.
В момент, когда нужно увидеть причину, открывается экран, где причину видно в life-трансляции.
В остальное время все события сгруппированы в формате превью в экране с историей.
Мне одному показалось что статья не отвечает на вопрос в заголовке? Тупо рекламная статья
Как и статья с заголовком как заработать миллион... Если в ней будет написано про личный опыт – сможет только мотивировать вас или натолкнёт на нужные мысли.