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

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

Задача

Написать статью о веб-интерфейсе контроллера Wiren Board для потенциальных покупателей.

Процесс

Первым порывом было набросать снимки экранов, расставить заголовки и разбавить немного текстом. Но в процессе выяснилось, что некоторые вещи скриншотами не показать.

Например, функции и назначение виджета — элемента текстовой панели. Основная и единственная функция виджета — группировка каналов разных устройств в одной карточке.

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

Анимация, в которой показана суть виджета

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

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

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

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

Структура статьи, первый вариант — длинная портянка из картинок и второй — часть изображений свернуто в галерею

Рабочий стол в Figma: компоненты, экраны веб-интерфейса, кадры анимации и визуализация внешнего вида статьи

Кадры анимации

Виртуальные экраны веб-интерфейса

Компоненты веб-интерфейса

Верстка и публикация

Итак, формат статьи определен, иллюстрации сделаны, текст написан. На компьютере выглядит хорошо, а вот на мобильном устройстве галерея разъехалась:

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

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

Галерея на мобильном устройстве смотрится плохо

В мобильной версии мы развернули галерею — стало лучше

Итог

Это был интересный и неоднозначный проект, но результат получился хорошим. Спасибо команде Wiren Board за ценные замечания и возможность написать для них статью. Надеюсь она принесет пользу.

Текст и иллюстрации: Александр Дегтярев
Копия статьи: png / zip, 1579кб
Публикация: Читать статью на сайте Wiren Board

Отредактировал текст маркетолога: рассказал про конкурс и сообщил, что будут новые.

Было → Стало

Публикация на сайте

Читать новость на сайте Wiren Board

Наша компания разрабатывает продукты для автоматизации мобильной торговли. Часть продуктов — обработки для платформы «1С: Предприятие» с поддержкой популярных типовых конфигураций.

Решили мы разместить обработку для «1C: Управление нашей фирмой» в облачном сервисе «42CLOUDS», но условием размещения оказалось наличие описания продукта в формате PDF. 

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

Как могло быть

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

Написанная разработчиком инструкция — интерфейс разложен по полочкам, каждый элемент подробно описан.

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

Как стало

Сценарий и функции

Сперва я рассмотрел продукт повнимательнее и выписал, что он может:

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

У меня получилось — обработка для обмена справочниками и документами между учетной системой и мобильным устройством с поддержкой планирования посещений и контроля торговых агентов.

Есть разные варианты этого сценария: необязательные посещения, один план на несколько агентов и т. п. Но популярный и логичный сценарий — планирование, прием заказов, контроль.

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

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

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

Структура документа

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

PDF документ позволяет создать закладки для каждого заголовка, поэтому читателю достаточно просканировать взглядом список закладок и сразу перейти к нужному разделу — это удобно и экономит время.

Перечень закладок, каждая закладка указывает на заголовок. Это еще один инструмент для навигации по документу.

Статьи

Статьи в документе сверстаны по схеме: заголовок + текстовое описание + примеры. Заголовок говорит читателю о чем статья, текстовое описание дополняет заголовок и описывает инструмент, который реализует функцию, а примеры содержат снимки экранов с реальными данными и подробным описанием.

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

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

А как изобразить то, что происходит «под капотом»? Есть действенный способ — нарисовать схему. Этот подход я выбрал для описания обмена учетной системы с мобильным устройством.

Схема обмена данными. Краткое описание возможностей и иллюстрация процесса

Заключение

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

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

Автор: Александр Дегтярев
Инструменты: Google Docs, Adobe Acrobat DC, GIMP, Figma
Загрузить полную версию документа (pdf / zip, 450кб)