Диспетчеризация моек самообслуживания

У меня есть друг программист, который ведет отличные курсы обучения программированию для инженеров вот тут , он обратился ко мне с вопросом. “Гог, я тут делаю программу для моек самообслуживания. Заказчик хочет, чтобы все выглядело профессионально и круто. Можешь нам помочь в этом?” Конечно могу, ведь это весьма не тривиальная задача, что я очень люблю. Обсудили разные технические тонкости проекта, и я приступил к работе.

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

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

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

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

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

Тут хочется отдельно рассказать о том, как Фигма облегчает жизнь. Первый свой интерфейс вентиляции я рисовал в Иллюстраторе. Мне приходилось нарезать в ПНГ сотни элементов и их состояний, сохранять множество папок. Делать попиксельную разметку положения элементов на экране. К счастью, сегодня это все не нужно. Добавляем программиста в рабочий файл Фигмы и он уже на стадии прототипа может смотреть, какие механики будут применяться и давать свою оценку возможности применения этих механик. С готовым макетом тоже все просто: Фигма показывает стили элементов, их координаты и код. Благодаря этим инструментам время на разработку сократилось примерно вдвое.

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