Как сделать мобильный интерфейс, который не бесит

Digital-агентство «Атвинта» рассказывает о том, что учитывать при создании мобильного интерфейса — на примере визуально простого приложения «Датчик спокойствия».

В закладки
Аудио

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

Задача

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

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

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

Проектирование и дизайн

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

Сценарий 1

Человек получил уведомление об опасном событии. Тогда нужно сразу показать, что происходит дома и попасть на экран «Камеры».

На экране «Камеры» пользователь:

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

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

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

Сценарий 2

Человек зашел в приложение, чтобы узнать, как обстоят дела дома. Тогда он попадает на экран «События».

Экран «События» показывает, что зафиксировал датчик за определенный промежуток времени.

События выделяются при помощи иконок и цветовой дифференциации:

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

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

Вот так выглядит процесс работы пошагово:

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

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Digital-агентство Атвинта", "author_type": "self", "tags": [], "comments": 12, "likes": 40, "favorites": 107, "is_advertisement": false, "subsite_label": "design", "id": 58588, "is_wide": false, "is_ugc": true, "date": "Fri, 15 Feb 2019 08:43:57 +0300", "is_special": false }
0
{ "id": 58588, "author_id": 108381, "diff_limit": 1000, "urls": {"diff":"\/comments\/58588\/get","add":"\/comments\/58588\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/58588"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
12 комментариев
Популярные
По порядку
Написать комментарий...
2

Перекрытие скриншота камеры примерно на 25% плашкой слева не является проблемой? В разных сценариях именно в том месте может быть объект движения. Кстати, а почему только скриншот? Видео на n-секунд камера может писать?

Ответить
2

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

Ответить
0

Как минимум видео тяжелее. Не все устройства и не всякий интернет смогут принять этот медиаформат.

Ответить
0

Да ну? Что это за телефон, на который можно поставить вашу аппку, но нельзя смотреть видео? И какой срез по устройствам ЦА продукта?

Ответить
0

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

Ответить
3

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

Ответить
0

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

Ответить
1

Мне одному показалось что статья не отвечает на вопрос в заголовке? Тупо рекламная статья

Ответить
0

Как и статья с заголовком как заработать миллион... Если в ней будет написано про личный опыт – сможет только мотивировать вас или натолкнёт на нужные мысли.

Ответить
0

А как реализован контроль членов семьи? Из статьи показалось, что люли должны жить по какому-то строгому расписанию.

Ответить
0

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

Ответить
0

Вкладки камера - события на скринах некошерные для iOS. Либо Segmented control либо TabBar

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }