SmartHH
«Умный дом» — приложение для удалённого управления умными устройствами (лампы, розетки, камеры, кондиционеры и тд)
Умное реле для штор — устройство, позволяющее удалённо управлять шторами и жалюзи с помощью мобильного приложения «Умный дом». Через приложение пользователь может регулировать степень открытия штор, а также настраивать сценарии автоматической работы
При добавлении устройства в приложение пользователь должен откалибровать его для обеспечения корректной работы
В ходе калибровки настраиваются два параметра:
«Время хода» и «Инвертация управления»
Время хода — время в секундах, которое требуется для полного открытия/закрытия штор
Этот параметр нужен потому что пользователь может ставить реле на шторы самой разной длины, а само устройство не умеет понимать, когда процесс открытия/закрытия завершается.
Соответственно, если параметр окажется меньше, чем нужно, то шторы не будут полностью закрываться/открываться, а если больше, то мотор будет работать вхолостую ещё какое‑то время после полного закрытия/открытия.
Таким образом, в ходе калибровки мы должны наиболее простым и удобным образом выяснить и установить значения этого параметра.
Инвертация управления — параметр формата «да/нет», который определяет направление открытия/закрытия штор.
Этот параметр нужен потому что реле может быть смонтировано в перевёрнутом положении (ограничения/особенности монтажа)
Соответственно, если параметр задан неверно, то реле будет закрывать шторы при попытке открыть и наоборот.
Таким образом, в ходе калибровки мы должны наиболее простым и удобным образом выяснить и установить значение этого параметра.
После добавления и калибровки реле, пользователь может попасть на главный экран устройства
На главном экране пользователь должен иметь возможность устанавливать степень открытия штор, а также настраивать сценарии автоматической работы.
Нужно спроектировать экраны таким образом, чтобы он был понятным и удобным для пользователя (подумать над типовыми сценариями взаимодействия с устройством)
В результате хотим увидеть готовые макеты для приложения: экран должен быть визуально привлекательным (не ограничиваемся прототипом)
Дизайн-концепция / стилистика на усмотрение дизайнера, тут полная свобода
Сначала разобрался, как работает умное реле: прочитал статьи, посмотрел видеообзоры — важно было понять механику устройства, чтобы проектировать интерфейс с пониманием дела. Провел несколько интервью, чтобы узнать, какие задачи и проблемы есть у пользователей.
На основе этого собрал требования, накидал идеи и сформулировал дизайн-гипотезы. Проанализировал конкурентов, чтобы понять, что у них сделано хорошо, а где есть пробелы. Для свежего взгляда посмотрел приложения из других тематик, чтобы найти интересные подходы. Все это подкрепил референсами.
Результаты оформил в виде персон, карт эмпатии и джобов итп. Также выделил метрики, на которые будем влиять, чтобы работа над интерфейсом была направленной и эффективной.
Начал с того, что выписал все существительные из ТЗ, связанные с заданием, и на их основе построил информационную архитектуру. После этого обычно валидирую все идеи: если чего-то нет в ТЗ, важно понять ключевую бизнес-задачу, чтобы при добавлении новых функций оценивать, помогают ли они её решать. Также выделил ключевые метрики, которые покажут эффективность решений.
Дальше перешел к базовому сценарию: разобрал весь путь пользователя, начиная с первых шагов и заканчивая регулярным взаимодействием с продуктом. На основе этого создал CJM, в которой собрал юзер стори и постарался охватить весь процесс.
Затем составил User Story Map, где разбил большие процессы из CJM на конкретные действия. Взял только те стори, которые напрямую относятся к задаче. После этого прогнал их через «список действий с классом», чтобы понять, как пользователь взаимодействует с каждым экраном и какие функции ему нужны.
Перешел к работе над вайрфреймами. Обычно приступаю к ним, когда уже понятно каждое действие пользователя в рамках каждого процесса. Разделил работу на два этапа: сначала распределил юзер стори по экранам, чтобы определить их структуру, а затем занялся проектированием лейаута. На этом этапе проработал тексты, расположение элементов и продумал логику взаимодействия на каждом экране.
Определил цветовую схему приложения, выбрав синий цвет в качестве акцентного. Проверил контраст и убедился, что акценты расставлены правильно.
Для экрана управления шторами создал несколько концепций дизайна. В итоге собрал финальную версию, объединив лучшие элементы из разных подходов. Затем на основе этой версии задизайнил остальные экраны приложения.
Также разработал версию экрана управления шторами для планшета, исключив процесс калибровки, поскольку большинство пользователей будут выполнять настройку с мобильного устройства. Завершил кликабельным прототипом для тестирования.
Экран начала сценария калибровки
Экраны для разных состояний
Сделал TimePicker вместо ручного ввода времени с помощью клавиатуры
Экран завершения сценария калибровки
Дизайн планшетной версии
Провел тестирования в формате двух немодерируемых юзабилити-тестов. Оба респондента успешно справились с задачей, которая заключалась в достижении экрана управления шторами. Результаты показали, что интерфейс понятен и позволяет пользователям легко выполнить поставленное задание.
Вводная
В приложении умного дома для того, чтобы начать управлять умным устройством его сначала нужно откалибровать.
Задача 1
Ты зарегистрировался в приложении умного дома, добавил в него умное реле для штор. Теперь необходимо пройти калибровку этого устройства
Результат
Было проведено два немодерируемых юзер теста. Оба респондента выполнили задание. Фактом выполнения задания считалось достижение экрана “09 - Управление шторами” . У одного респондента возникли затруднения на экране «07 — Время движения — Ввод», респондент не сразу нашёл инпут для ввода
Также респонденты предпочли бы пропустить калибровку и вернуться к ней позже
Улучшения:
Видоизменить инпут, сделать его заметнее
Все новые компоненты отправил в UI-библиотеку, перевел цвета в токены для удобства разработчиков, также при необходимости пишу спецификации и гайды
Проанализировал задачу, провел интервью, собрал требования, построит информационную архитектуру
Продумал, как пользователь будет взаимодействовать с приложением. Сделал CJM, учел возможные сложности и сценарии возвращения пользователя
Создал вайрфреймы для ключевых экранов - шагов калибровки и управления шторами.
Разработал простую и минималистичную визуальную концепцию, ориентированную на понятность и удобство. Задизайнил 16 экранов мобильного приложения + планшетная версия + адаптация для android
Сделал понятные элементы управления для быстрого ориентирования в приложении
Проработал визуальную иерархию
Провел 2 немодерируемых юзабилити теста
Собрал базовый UIKit, включающий кнопки, поля ввода, токены, стили, типографику
