Выводы
Основываясь на всех данных, я пришел к следующим выводам:
капитану нужны все устройства перед глазами;
необходимо сократить количество тапов по экрану для достижения цели и убрать переход на второй экран;
таблица будет рябить и смешиваться при скролле;
главные действия капитана — вкл/выкл устройства и изменение его яркости;
нужна возможность выключить или включить все устройства на корабле;
нужна возможность перемещения устройств на главном экране;
нужно отображать устройства в виде карточек, где есть возможность активации и регуляции устройства;
нужно сделать возможность редактирования не переходя на второй экран;
нужно соглосовать схожие состояния и ошибки, чтобы пользователь не путался;
нужно убрать состояния, которые не влияют на оценку работоспособности устройства.
Light controller
О продукте и пользователе
Андройд-приложение для планшета, которое контроллирует все световые устройства на корабле.
Приложение разработано для капитана корабля. Помимо управления кораблем, его задача следить за светом, контролировать освещение и экономить энергию.
Приложение разработано для капитана корабля. Помимо управления кораблем, его задача следить за светом, контролировать освещение
и экономить энергию.
Проблема и задача
Текущий дизайн приложения имеет много смысловых и модальных ошибок. Некоторые кнопки выполняют свои задачи только через зажатие, другие вообще не являются кнопками. Информация о лампах на корабле плохо структурирована.
Нужно сделать редизайн панели управления. Структурировать информацию, переделать дизайн экрана настроек лампы, облегчить восприятие интерфейса капитаном.
Конкурентный анализ
Прямых конкурентов нет, так как софт родной
и к сторонним программам обращаться запрещено. В косвенных конкурентах-программах по управлению светом в умных домах, на сценах
и в других помещениях используются таблицы для отображения устройств и ползунки для регулировки яркости.
Прямых конкурентов нет, так как софт родной и к сторонним программам обращаться запрещено. В косвенных конкурентах-программах по управлению светом в умных домах, на сценах и в других помещениях используются таблицы для отображения устройств и ползунки для регулировки яркости.
Прямых конкурентов нет, так как софт родной и к сторонним программам обращаться запрещено. В косвенных конкурентах-программах по управлению светом в умных домах, на сценах и в других помещениях используются таблицы для отображения устройств и ползунки для регулировки яркости.
Сначала я хотел испольовать эти приемы в текущем редизайне, но потом узнал, что для капитана важнее быстрое взаимодействие с устройствами, нежели упорядоченный список всех ламп, поэтому надо дать капитану возможность взаимодействия и настройки лампы еще на главном экране, а если у капитана будет время, то он сможет углубиться в настройки устройства и выставить необходимые параметры.
Сначала я хотел испольовать эти приемы в текущем редизайне, но потом узнал, что для капитана важнее быстрое взаимодействие с устройствами, нежели упорядоченный список всех ламп, поэтому надо дать капитану возможность взаимодействия и настройки лампы еще на главном экране, а если у капитана будет время, то он сможет углубиться
в настройки устройства и выставить необходимые параметры.
JTBD
Чтобы понять боли и потребности, я поговорил с целевой аудиорией и сформировал таблицу.
Job story
Когда я
Что я хочу
Боли
Пользуюсь программой
Знать состояние устройств, чтобы понимать ситуацию с освещением на судне
В работе устройства есть ошибка, нужно обращаться к тех. персоналу
Перемещать устройства, чтобы мне было удобно за ними следить и я мог выстроить их по своему предпочтению
Устройств на корабле много, можно запутаться
Иметь доступ сразу ко всем устройствам, чтобы не потерять контроль над освещением
Боюсь потерять важное устройство, после чешго корабль будет плыть без освещения
Иметь возможность моментального отключения или включения света, чтобы не терять времени при выгрузке и погрузке
Потерять время при разборке того, какие лампы нужно включать а какие выключать
Настраиваю устройство
Настроить устройство для себя, чтобы обеспечить оптимальное освещение
Настроить слабое освещение, из-за чего команда может получить травмы при работе
Видеть настройки перед собой, чтобы не путаться в программе
Запутаться в программе, выставить неправильные настройки из-за незнания состояния устройства
Видеть работу устройства без ошибок, чтобы не обращаться к тех. специалистам
Лишний раз обращаться к специалистам, тормозив при этом их остальную работу
Моментальное сохранение изменений устройства, чтобы не делать лишних действий
Настройки не сохранятся, придется настраивать заново
User story
Как капитан корабля, я хочу видеть подключенные лампы, чтобы понимать состояние света на корабле.
Как капитан корабля, я хочу редактировать подключенные устройства, чтобы экономить электричество на корабле.
Как капитан корабля, я хочу быстро настраивать устройства, чтобы больше времени уделять остальному пути плавания.
Как капитан корабля, я хочу видеть подключенные лампы, чтобы понимать состояние света на корабле.
Как капитан корабля, я хочу редактировать подключенные устройства, чтобы экономить электричество на корабле.
Как капитан корабля, я хочу быстро настраивать устройства, чтобы больше времени уделять остальному пути плавания.
JTBD
Чтобы понять боли и потребности, я поговорил с целевой аудиорией и сформировал таблицу.
Job story
Когда я
Что я хочу
Боли
Пользуюсь программой
Знать состояние устройств,
чтобы понимать ситуацию
с освещением на судне
В работе устройства есть ошибка, нужно обращаться к тех. персоналу
Перемещать устройства, чтобы мне было удобно за ними следить и я мог выстроить их по своему предпочтению
Устройств на корабле много, можно запутаться
Иметь доступ сразу ко всем устройствам, чтобы не потерять контроль над освещением
Боюсь потерять важное устройство, после чешго корабль будет плыть без освещения
Иметь возможность моментального отключения или включения света, чтобы не терять времени при выгрузке и погрузке
Потерять время при разборке того, какие лампы нужно включать а какие выключать
Настраиваю устройство
Настроить устройство для себя, чтобы обеспечить оптимальное освещение
Настроить слабое освещение, из-за чего команда может получить травмы при работе
Видеть настройки перед собой, чтобы не путаться в программе
Запутаться
в программе, выставить неправильные настройки из-за незнания состояния устройства
Видеть работу устройства без ошибок, чтобы не обращаться к тех. специалистам
Лишний раз обращаться
к специалистам, тормозив при этом их остальную работу
Моментальное сохранение изменений устройства, чтобы не делать лишних действий
Сотрудник Настройки не сохранятся, придется настраивать заново
User story
Как капитан корабля, я хочу видеть подключенные лампы, чтобы понимать состояние света на корабле
Как капитан корабля, я хочу редактировать подключенные устройства, чтобы экономить электричество на корабле
Как капитан корабля, я хочу быстро настраивать устройства, чтобы больше времени уделять остальному пути плавания
Job story
Когда я
Что я хочу
Боли
Пользуюсь программой
Знать состояние устройств, чтобы понимать ситуацию с освещением на судне
В работе устройства есть ошибка, нужно обращаться к тех. персоналу
Перемещать устройства, чтобы мне было удобно за ними следить и я мог выстроить их по своему предпочтению
Устройств на корабле много, можно запутаться
Иметь доступ сразу ко всем устройствам, чтобы не потерять контроль над освещением
Боюсь потерять важное устройство, после чешго корабль будет плыть без освещения
Иметь возможность моментального отключения или включения света, чтобы не терять времени при выгрузке и погрузке
Потерять время при разборке того, какие лампы нужно включать а какие выключать
Настраиваю устройство
Настроить устройство для себя, чтобы обеспечить оптимальное освещение
Настроить слабое освещение, из-за чего команда может получить травмы при работе
Видеть настройки перед собой, чтобы не путаться в программе
Запутаться в программе, выставить неправильные настройки из-за незнания состояния устройства
Видеть работу устройства без ошибок, чтобы не обращаться к тех. специалистам
Лишний раз обращаться к специалистам, тормозив при этом их остальную работу
Моментальное сохранение изменений устройства, чтобы не делать лишних действий
Настройки не сохранятся, придется настраивать заново
JTBD
Чтобы понять боли и потребности, я поговорил с целевой аудиорией и сформировал таблицу.
Job story
Когда я пользуюсь программой, я хочу:
Знать состояние устройств,
чтобы понимать ситуацию
с освещением на судне
Перемещать устройства, чтобы мне было удобно за ними следить
и я мог выстроить их по своему предпочтению
Иметь доступ сразу ко всем устройствам, чтобы не потерять контроль над освещением
Иметь возможность моментального отключения или включения света, чтобы не терять времени при выгрузке и погрузке
Когда я пользуюсь программой, мои боли:
В работе устройства есть ошибка, нужно обращаться к тех. персоналу
Устройств на корабле много, можно запутаться
Боюсь потерять важное устройство, после чешго корабль будет плыть без освещения
Пропустить сотрудника, не записать
Потерять время при разборке того, какие лампы нужно включать
а какие выключать
Когда я настраиваю устройство, я хочу:
Настроить устройство для себя, чтобы обеспечить оптимальное освещение
Видеть настройки перед собой, чтобы не путаться в программе
Видеть работу устройства без ошибок, чтобы не обращаться к тех. специалистам
Моментальное сохранение изменений устройства, чтобы не делать лишних действий
Когда я настраиваю устройство, мои боли:
Настроить слабое освещение, из-за чего команда может получить травмы при работе
Запутаться
в программе, выставить неправильные настройки из-за незнания состояния устройства
Лишний раз обращаться
к специалистам, тормозив при этом их остальную работу
Сотрудник Настройки не сохранятся, придется настраивать заново
User story
Как AppSec специалист, я хочу видеть результаты тестов сотрудников, чтобы понимать их экспертизу
Как AppSec специалист, я хочу знать уровнь экспертизы сотрудников, чтобы выполнять свой KPI
Как AppSec специалист, я хочу знать уровень экспертизы по отделам, чтобы понимать, с каким профилем нужно провести лекцию или мотивационную беседу
Light controller
О продукте и пользователе
Андройд-приложение для планшета, которое контроллирует все световые устройства на корабле.
Приложение разработано для капитана корабля. Помимо управления кораблем, его задача следить за светом, контролировать освещение и экономить энергию.
Пользователь и проблема
Текущий дизайн приложения имеет много смысловых
и модальных ошибок. Некоторые кнопки выполняют свои задачи только через зажатие, другие вообще не являются кнопками. Информация о лампах на корабле плохо структурирована.
Нужно сделать редизайн панели управления. Структурировать информацию, переделать дизайн экрана настроек лампы, облегчить восприятие интерфейса капитаном.
Конкурентный анализ
Прямых конкурентов нет, так как софт родной и к сторонним программам обращаться запрещено. В косвенных конкурентах-программах по управлению светом в умных домах, на сценах и в других помещениях используются таблицы для отображения устройств и ползунки для регулировки яркости.
Сначала я хотел испольовать эти приемы в текущем редизайне, но потом понял, что для капитана важнее быстрое взаимодействие
с устройствами, нежели упорядо-ченный список всех ламп, поэтому надо дать капитану возможность взаимодействия и настройки лампы еще на главном экране,
а если у капитана будет время, то он сможет углубиться в настройки устройства и выставить необходимые параметры.
Решение
Для облегчения восприятия,
я начал группировать схожие функции, удалять все то, что усложняет процесс взаимодей-ствия с интерфейсом и выносить
за скобки повторяющуюся инфор-мацию.
Под нож пошли плашки, контейнеры и заголовки. Так как капитану важно видеть все подключенные устройства,
я переделал табличную систему отображения и задизайнил устройства в виде карточек.
Смотреть сравнение
Что изменилось
В карточках есть базовый функционал, из-за чего не нужно открывать устройство каждый раз для его включения или настройки яркости. Карточки компанктны, раньше на экране помещалось до 9 устройств, сейчас до 16. Кнопки разделены и окрашены в контекс-туальный цвет, поиск переехал вниз и обзавелся словом «поиск»
с иконкой лупы для быстрого восприятия функционала кнопки.
Если у устройства нет порядкового номера, оно добавляется следующим по горизонтали после устройства с порядковым номером. Карточки можно зажимать
и двигать, если передвинуть карточку через зажатие левее карточки с порядковым номером,
у зажатой карточки появится номер, а предыдщая получит +1 к своему порядковому номеру, тоже самое произойдет с остальными номерными карточками.
Экран с устройством
Я убрал переход на отдельный экран для редактирования устройства и сделал раскрытие карточки в 3/4 экрана.
Это решение позволяет не терять
из вида остальные устройства и не заставляет капитана думать, в каком режиме он сейчас находится, потому что все настройки существуют на одном экране.
В раскрытой карточке я также убрал все плашки, кнопки и псевдо-кнопки. Включить и выключить устройство теперь можно с помощью переключалки, которая стоит рядом с заголовком.
Изменить название устройства можно после тапа на само название. Ниже располагается информация
с адресом, порядковым номером и порогом нагрузки, которые также можно отредактировать.
Смотреть сравнение
Что изменилось
Кнопка «применить» отпала за ненадобностью, потому что информация, которую вводит капитан должна применяться сразу. с иконкой лупы для быстрого восприятия функционала кнопки.
Если капитан ошибся и хочет вернуть все как было, он может нажать кнопку «отменить». Кнопку «перезагрузить» я тоже убрал, потому что перезагрузка — это выключение и включение устройства, а это можно сделать нажатием на переключалку сверху.
Кнопки «записать», «отменить»
и «удалить» я расположил в самом низу так, чтобы они рифмовались
с нижним баром в основном состоянии экрана.
Так как капитану важно знать состояние и ошибки, я сгруппиро-вал заголовок и слоты и сделал 2 колонки, куда сможет помещаться вся возможная информация, адрес и редактируемую информацию
я вынес в третью колонку.
Пользовательский
сценарий
Сценарий 1
>
>
Капитан хочет проверить
и настроить новую лампу,
которую только что подключили.
Смотреть сценарий
Расскажу подробнее про кейс на собеседовании
Написать
Решение
Для облегчения восприятия, я начал группировать схожие функции, удалять все то, что усложняет процесс взаимодействия с интерфейсом и выносить за скобки повторяющуюся информацию.
Для облегчения восприятия, я начал группировать схожие функции, удалять все то, что усложняет процесс взаимодействия с интерфейсом
и выносить за скобки повторяющуюся информацию.
Под нож пошли плашки, контейнеры и заголовки. Так как капитану важно видеть все подключенные устройства, я переделал табличную систему отображения и задизайнил устройства в виде карточек.
Под нож пошли плашки, контейнеры и заголовки. Так как капитану важно видеть все подключенные устройства,
я переделал табличную систему отображения и задизайнил устройства в виде карточек.
Было
Стало
Что изменилось
В карточках есть базовый функционал, из-за чего не нужно открывать устройство каждый раз для его включения или настройки яркости. Карточки компанктны, раньше на экране помещалось до 9 устройств, сейчас до 16. Кнопки разделены и окрашены в контекстуальный цвет, поиск переехал вниз и обзавелся словом «поиск» с иконкой лупы для быстрого восприятия функционала кнопки.
В карточках есть базовый функционал, из-за чего не нужно открывать устройство каждый раз для его включения или настройки яркости. Карточки компанктны, раньше на экране помещалось
до 9 устройств, сейчас до 16. Кнопки разделены
и окрашены в контекстуальный цвет, поиск переехал вниз и обзавелся словом «поиск» с иконкой лупы для быстрого восприятия функционала кнопки.
Если у устройства нет порядкового номера, оно добавляется следующим по горизонтали после устройства с порядковым номером. Карточки можно зажимать и двигать, если передвинуть карточку через зажатие левее карточки с порядковым номером, у зажатой карточки появится номер, а предыдщая получит +1 к своему порядковому номеру, тоже самое произойдет с остальными номерными карточками.
Структура карточки и области нажатия
Экран с устройством
Я убрал переход на отдельный экран для редактирования устройства и сделал раскрытие карточки в 3/4 экрана. Это решение позволяет не терять из вида остальные устройства и не заставляет капитана думать, в каком режиме он сейчас находится, потому что все настройки существуют на одном экране.
В раскрытой карточке я также убрал все плашки, кнопки и псевдо-кнопки. Включить и выключить устройство теперь можно с помощью переключалки, которая стоит рядом с заголовком. Изменить название устройства можно после тапа на само название. Ниже располагается информация с адресом, порядковым номером и порогом нагрузки, которые также можно отредактировать.
Было
Стало
Что изменилось
Кнопка «применить» отпала за ненадобностью, потому что информация, которую вводит капитан должна применяться сразу. Если капитан ошибся
и хочет вернуть все как было, он может нажать кнопку «отменить». Кнопку «перезагрузить» я тоже убрал, потому что перезагрузка — это выключение и включение устройства, а это можно сделать нажатием на переключалку сверху.
Кнопка «применить» отпала за ненадобностью, потому что информация, которую вводит капитан должна применяться сразу. Если капитан ошибся
и хочет вернуть все как было, он может нажать кнопку «отменить». Кнопку «перезагрузить» я тоже убрал, потому что перезагрузка — это выключение
и включение устройства, а это можно сделать нажатием на переключалку сверху.
Кнопки «записать», «отменить» и «удалить» я расположил в самом низу так, чтобы они рифмовались с нижним баром в основном состоянии экрана. Так как капитану важно знать состояние и ошибки, я сгруппировал заголовок и слоты и сделал 2 колонки, куда сможет помещаться вся возможная информация, адрес и редактируемую информацию я вынес в третью колонку.
Кнопки «записать», «отменить» и «удалить» я расположил в самом низу так, чтобы они рифмовались с нижним баром в основном состоянии экрана. Так как капитану важно знать состояние и ошибки, я сгруппировал заголовок
и слоты и сделал 2 колонки, куда сможет помещаться вся возможная информация, адрес и редактируемую информацию я вынес в третью колонку.
Кнопки «записать», «отменить» и «удалить» я расположил в самом низу так, чтобы они рифмовались с нижним баром в основном состоянии экрана. Так как капитану важно знать состояние
и ошибки, я сгруппировал заголовок и слоты и сделал 2 колонки, куда сможет помещаться вся возможная информация, адрес
и редактируемую информацию я вынес в третью колонку.
Области нажатия редактируемого устройства
Информационная архитектура приложения
Чтобы не запутаться в логике приложения, я спроектировал информационную архитектуру — сделал описание страниц и элементов, выписал функции и связал между собой экраны.
Чтобы не запутаться в логике приложения, я спроектировал информационную архитектуру — сделал описание страниц и элементов, выписал функции и связал между собой экраны.
Пользовательский сценарий
Сценарий
>
>
Капитан хочет проверить и настроить новую лампу, которую только что подключили.
Главный экран, новое устройство добавляется
в самом конце, капитан тапает по устройству
Карточка развернута, устройство выключено, ошибок нет, цвет не определен
Капитан переименовал устройство, включил его, выбрал цвет и настроил порог нагрузки
Капитан переименовал устройство, включил его, выбрал цвет
и настроил порог нагрузки
Теперь устройство корректно отображается на основном экране
Итог
После редизайна на экране помещается больше устройств, пользоваться интерфесом стало легче, нет возможности случайно удалить или отключить устройство.
Все элементы с взаимодействием расположены на большом расстоянии друг от друга, кнопки выполняют свои функции сразу, данные сохраняются сразу после редактирования без дополнительного подтверждения.
Расскажу подробнее о кейсе на собеседовании
Написать
Выводы
Основываясь на всех данных,
я пришел к следующим выводам:
капитану нужны все устройства перед глазами;
необходимо сократить количество тапов по экрану для достижения цели и убрать переход на второй экран;
таблица будет рябить
и смешиваться при скролле;
главные действия капитана — вкл/выкл устройства
и изменение его яркости;
нужна возможность выключить или включить все устройства на корабле;
нужна возможность перемещения устройств на главном экране;
нужно отображать устройства
в виде карточек, где есть возможность активации
и регуляции устройства;
нужно сделать возможность редактирования не переходя
на второй экран;
нужно соглосовать схожие состояния и ошибки, чтобы пользователь не путался;
нужно убрать состояния, которые не влияют на оценку работоспособности устройства.
Информационная
архитектура приложения
Чтобы не запутаться в логике приложения, я спроектировал информационную архитектуру — сделал описание страниц и элементов, выписал функции и связал между собой экраны.
Смотреть архитектуру