Интерфейс Управления мобильной торговлей
Последний месяц я работал над интерфейсом расширения «Агент Плюс: Управление мобильной торговлей». До завершения осталось два этапа.
Первый — работа над ошибками. После каждого проекта важно задать вопросы: «как всё прошло?» и «что изменить в следующий раз?». Мы ответим на эти вопросы и улучшим процесс создания интерфейса.
Второй — демонстрация того, что вышло хорошо. Процесс создания интерфейса можно сравнить с золотой рудой. Переработав руду, мы получим золото,
из которого можно сделать слитки, украшения или микросхемы. Поработав над демонстрацией создания интерфейса, мы получим материал для обучения и рекламы расширения.
Работа над ошибками
Началось с того, что Володя предложил сделать пошаговую настройку расширения. Это отличная идея, требующая проработки и правильного подхода.
Наброски шагов по первой настройке содержали большое количество настроек, которые не объединены в группы. Из-за отсутствия структуры названия настроек содержали повторяющиеся слова.
Но главный вопрос – почему при первом запуске доступны все настройки? Нужно показывать только важные настройки, и лучше порционно, а не все сразу. Вопрос возник из-за нарушения порядка разработки интерфейса.
Правильный алгоритм разработки интерфейса включает следующие этапы:
- Исследование;
- Пользовательские сценарии;
- Структура интерфейса;
- Прототипирование интерфейса и дизайн-концепция;
- Оформление всех экранов;
- Анимация и переходы;
- Подготовка макетов для разработчиков.
Разрабатывая интерфейс, мы перешли от исследования к оформлению всех экранов, пропустив несколько этапов. Из-за этого постоянно отвлекались разработчики и прерывалась работа — для каждого экрана приходилось изучать пользовательские сценарии, проверять возможность избавления от лишних шагов, делать прототип.
Работая над ошибками, выстроим процесс разработки интерфейса правильно, и доделаем пропущенные шаги, чтобы ориентироваться на этот процесс.
Исследование — первый шаг в процессе разработки интерфейса. Нужно изучить аналогичные решения, узнать ограничения платформы, провести анализ устройств целевой аудитории.
Клиенты используют 1С на маломощных компьютерах, с небольшими экранами. Это означает, что лучше избегать двух таблиц, расположенных рядом — они могут не поместиться на один экран целиком.
Платформа 1С:Предприятие имеет множество ограничений по созданию интерфейсов. Выясняем, какие приёмы мы можем применять, а какие нет.
Пошаговая настройка — распространённое решение для настройки сложных программ или устройств. Смотрим, как устроена пошаговая настройка в программах IBM, Microsoft, Apple и других.
Пользовательские сценарии включают в себя цель интерфейса и список задач, которые можно выполнять с его помощью. Задачи расписываются по шагам.
Цель первого запуска — настроить расширение для совершения обмена данными, чтобы удалённо организовать работу торговых агентов.
Ограничения:
- Первый запуск отличается от быстрого знакомства, обучение это не главная задача.
- Первый запуск появляется только после установки расширения. Для настройки после первого запуска должны создаваться отдельные интерфейсы.
- Первый запуск показывает только необходимые настройки для выполнения цели. Всё, что цели не касается, должно быть скрыто, или второстепенно оформлено.
Список задач:
- Перенос данных из конфигурации или обработки
- Выбор каталога для хранения данных обмена
- Личный кабинет
- Вход
- Регистрация
- Восстановление пароля
- Мобильные устройства
- Загрузка из личного кабинета
- Создание вручную
- Просмотр списка и поиск
- Торговые агенты
- Создание и настройка
- Просмотр списка и поиск
- Канал обмена
- FTP — выбор и настройка
- СОД — выбор и настройка
- Панель управления — запуск, настройка и включение
- Сопоставление идентификаторов в 1С и на устройствах агентов
Структура интерфейса составляется согласно списку задач и шагов, полученных на предыдущем шаге. Определяется количество экранов, и их порядок.
Прототипирование интерфейса и дизайн-концепция
Прототип проектировался на примере первого экрана. Для сложных интерфейсов лучше делать черновые прототипы, чтобы ускорить прототипирование, и разбить его на несколько этапов:
Поскольку у нас немного экранов, сразу прописывается черновой текст, и добавляются примерные иллюстрации:
Во время проектирования интерфейса идет выработка стилистики. Как правило стилистка применяется после того, как готов прототип. В нашем случае можно делать эти этапы параллельно, и сразу накатывать стилистику, так как она определена — акцентные элементы оформляются в фирменном стиле
Агент Плюс, элементы взаимодействия с интерфейсом сохраняют дизайн 1С.
Демонстрация
Иногда люди боятся тратить время на демонстрацию продуктов, потому что не видят пользы от хорошей демонстрации. Но демонстрация — это услуга. Такая же услуга, как оптимальный код, удобный интерфейс, простота настройки и скорость работы программы. Можно сделать лучшую программу в мире, которая не сможет помочь людям, потому что они не узнают о ней без демонстрации и рекламы. В нашем случае демонстрация связывает разработчиков с маркетологами, менеджерами продаж и техническими писателями, помогая им рекламировать, продавать и обучать.
Теперь переходим к демонстрации этапов, для которых не требуется доработок.
Оформление всех экранов
Итоговые экраны получились простыми, с правильными акцентами и заметным целевым действием. За счёт простоты достигается отзывчивость, быстродействие, и предсказуемое расположение элементов на экранах разного размера.
Разместим экраны вместе, и оценим общую согласованность интерфейса:
Интерфейс страхует людей от ошибок и сохраняет пользовательские данные. Подписи полей в формах расположены сверху, или в виде плэйсхолдеров — формы меньше, и читаются быстрее.
Анимация и переходы
Все оформленные экраны собираются в модель, которая создаст максимально приближенный опыт использования интерфейса без участия разработчиков. Кроме наглядного опыта, модель показывает, как разные действия на текущем экране приводят к изменениям на последующих экранах. Создаётся карта интерфейса со всеми развилками.
Пользоваться моделью просто — нажимайте на элементы, на которые хочется нажать. Будут происходить переходы между экранами и формами.
Если возникает вопрос, куда можно нажать — нажмите в любое место в интерфейсе, и кликабельные элементы выделяться синим.
Модель можно использовать для интерактивного обучения, разместив её в статье, в базе знаний.
Подготовка макетов для разработчиков
Выгружаем всю графику интерфейса в отдельные файлы.
Весь текст экранов, форм и ключевых сообщений объединяем в один файл, прописываем цвета, размеры, отступы в удобном для разработчиков формате.
