Как мы решаем проблему отсутствия UI\UX дизайна в 1С с помощью Java Script и React.js

    image

    Ранее уже писал о том, что в 1С UI\UX дизайна нет. Эта статья про то, как мы с помощью таких технологий, как Java Script, React.js и Google Firebase решили сделать web-сервис, который позволит с наименьшими трудозатратами, в сравнении с 1С: Конфигуратором и уже тем более 1C:EDT, прорабатывать UI и UX дизайн будущего приложения на 1С, корректировать его на лету и передавать в работу программисту уже согласованный прототип будущего бизнес-приложения.

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

    Часть 1 – проблематика. Решаемые задачи


    1.Инструменты бизнес-аналитиков, руководителей проектов, менеджеров по продажам.

    Несмотря на развитие технических инструментов экосистемы 1С (выше писал про 1C:EDT и т.д.), остается крайне скудным инструментарий для тех специалистов, которые находятся на передовой в проектах разработки и внедрения: бизнес-аналитиков, консультантов, руководителей проектов, именно они, одними из первых встречаются с Заказчиком, собирают требования, интерпретируют услышанное, формализуют в виде ТЗ и иных проектных документов. Более того, столько продвинутых инструментов для формирования ТЗ, прототипирования, дизайна, как у программистов, “front-office” не имеет.

    Чтобы показать Клиенту то, что его ожидает в результате проекта (программирования) консультанты рисуют формы в Paint, MS Excel и других, не далеких от удобства инструментах. До сих пор нет и единого мнения, стандарта в инструментах формализации бизнес-процессов, кто-то применяет Business Studio, кто-то Visio, сам вендор — 1С: СППР и т.д., не говоря уже про стандартную нотацию (IDF0, ARIS и т.д.).

    2. Многократные итерации сдачи работ

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

    3.Коммуникации и сложность восприятия. Online внедрения 1С

    Классика: Заказчик говорит одно, подразумевает — другое, аналитик – третье, а программист – четвертое. В текущих реалиях на это дополнительно накладываются карантинные ограничения очных встреч, начинаются внедрения по удаленке.

    4.UI и UX дизайн, проработка интерфейсов решений на 1С

    Уже не первый год в сообществе 1С произносятся и обсуждаются такие термины, как UI, UX, сейчас мы о них поговорим, а ещё поговорим и про CX.

    • User Experience (UX) – пользовательский опыт. Цель UX-дизайнера — сделать так, чтобы пользователь быстро и легко получил от программы то, зачем он её использует.
    • User Interface (UI) – пользовательский интерфейс. Цель UI-дизайнера — создать эстетичный дизайн интерфейса продукта.

    Наиболее яркий пример UI и UX в быту (это не только ИТ-ые термины :-), когда UI – хорошо, а вот UX – нет:

    image

    Исправляем ситуацию и подтягиваем до высокого уровня UX:

    image

    Грань между UI и UX очень тонкая и порой её сложно отличить, но она есть.

    А знаете ли Вы, что UI и UX напрямую влияют на CX?

    • CX (customer experience) — клиентский опыт. Ваш продукт – это лицо Вашей компании или личного бренда (репутации). Хорошо спроектированное, продуманное программное решение с красивым дизайном повышает лояльность (NPS) клиентов к Вашему бренду и компании.

    В итоге, корреляция этих трех составляющих следующая:

    image

    5.Кадровый голод

    Так было, так есть и так будет всегда и не только в ИТ индустрии. Победить эту проблему мы не сможем, но минимизировать – однозначно. При этом сообщество 1С нуждается не только в программистах, как ещё говорят — технарях, но и бизнес-аналитиках, РП-ах, администраторах – гуманитариях. Выше я сказал, что в смежных отраслях, таких как разработка сайтов и мобильных приложений есть такие специалисты (профессии), как UI\UX (не редко их совмещают в одном лице) дизайнеры, а в 1С отрасли UI\UX дизайнер – это программист. Нужно привлечь в отрасль UI и UX дизайнеров, начать их выращивать, это даст тройной эффект:

    1. Высвободит время программистов, переложит часть предварительной работы на дизайнеров.
    2. Повысит качество конечного продукта, через более глубокую проработку удобства и эстетики интерфейса.
    3. Расширит рынок специалистов, позволит привлечь в отрасль больше гуманитариев (дизайнеров, маркетологов, переводчиков и т.д.).

    Итак, коротко перечислим решаемые проблемы:

    1. Отсутствие простых и удобных инструментов для бизнес-аналитиков, консультантов, руководителей проектов. Более того, каждый в своей практике встречал таких менеджеров со стороны Заказчика, которые программировать не умели, но объяснить, нарисовать, что именно хотят, более чем могли, был бы адекватный для этого инструмент.
    2. Увеличение сроков проекта, бюджета, снижение лояльности в результате многократных итераций сдачи работ, вызванных порой недопониманием, которое может быть снято на ранних стадиях проекта.
    3. Коммуникации и сложность восприятия, усиливающиеся удаленной работой и все большего перехода в режим online работы и внедрений проектов на 1СВнешний вид и дизайн – есть доклады
    4. Удобство и качество интерфейсов, ежедневно повышающиеся требования заказчиков в более глубокой проработке UI\UX дизайна решений. Конкуренция со стороны «Web продуктов». Сложности в коммуникациях и понимании друг друга
    5. Кадровый голод.

    Часть 2 – применение web-технологий для популяризации 1С-технологий 1С. Решение обозначенных проблем


    В ходе осмысления и поиска решений обозначенных проблем были сформулированы требования к будущему продукту:

    1. Инструмент должен быть простым, интуитивно понятным, позволяющим начинающим бизнес-аналитикам и консультантам в кратчайшие сроки освоить механизм прототипирования решений на 1С.
    2. Online, не требующий установки и лицензий 1С предприятия, доступный широкой аудитории.
    3. Простота и удобство работы над UI и UX дизайном, которое позволит спроектировать оптимальный интерфейс без привлечения программиста, на этапе сбора требований.
    4. Возможность совместной работы исполнителя (бизнес-аналитика) и заказчика в online режиме с целью повышения качества коммуникации и снижения негативных факторов перехода на online режим работы и взаимодействия.
    5. Еще по ходу добавилось требование — мультиязычного интерфейса и возможность простого, автоматического перевода интерфейс на наиболее востребованные языки.

    Обзор технологий

    Frontend


    Backend

    • На первом этапе достаточно использовать serverless подход и взять Google Firebase за основу.
    • В дальнейшем начнем разработку собственного backend-приложения на Node.js.

    Архитектура:

    image

    Что получилось в итоге, разберем по порядку функционал:

    1. Online сервис, не требующий развертывания платформы, лицензий 1С, доступный всегда и везде.

    image

    2. Простой и понятный конструктор прототипирования форм 1С.

    image

    3. Возможность поделиться ссылкой даже с теми, у кого нет аккаунта.

    ПРИМЕР

    4. Online отображение изменений при редактировании форм: исполнитель вносит корректировки, заказчик по ссылке видит изменения online (страницу браузера обновлять не нужно).

    image

    5. Создание проектной документации (ТЗ, ТП) становится на много проще, а главное они выглядят более реалистично имеют деловой стиль и стандарт.

    6. Приятной неожиданностью стало то, что web-технологии открыли новые возможности, которые не планировались, а именно — автоматический online перевод текстов на любой язык.

    image

    Часть 3 – заключение


    Мы надеемся, что 1CMaker позволит решить обозначенные проблемы, снизит порог вхождения в отрасль, позволит привлечь новые кадры и даже создаст новую компетенцию в 1С сообществе – UI\UX дизайнер (1С: Дизайнер). Начало положено, но это — только начало и мы планируем ещё много вкусного реализовать:

    1. Выгрузка формы в XML формате.
    2. Адаптировать интерфейс под мобильную платформу.
    3. Выгрузка спроектированных форм с описанием в формате MS Word — шаблон технического задания.
    4. Задач на разработку и оценка трудозатрат.
    5. Связи между объектами и т.д. и т.п.

    Спасибо, что дочитали до конца, удачных Вам проектов и помните: красота спасет мир (Ф.М.Достоевский)!

    Средняя зарплата в IT

    113 000 ₽/мес.
    Средняя зарплата по всем IT-специализациям на основании 5 314 анкет, за 2-ое пол. 2020 года Узнать свою зарплату
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 26

      0

      А рынок разработки на 1С с нуля действительно большой?

        0
        О масштабах судить сложно но когда я был 1сником я на таком и работал. Коллеги с прошлой работы которые разбрелись кто куда — тоже по большому счету не доработками типовых занимаются а какими то внутренними разработками с нуля (ну, когда пришли на проект уже что то было, но сама конфа с нуля или на основе бсп). Не говоря уж о том что разработка новой подсистемы в любой конфигурации — по сути такая же разработка с нуля, а это вообще частый случай.
          0
          Но ведь новую подсистему логично по дизайну делать аналогичной общему дизайну конфигурации. Или нет?
            0
            Но дизайнить новые формы то нужно. Особенно если подсистема не вариация чего то существующего в системе а что то новое.
              0
              Прочитайте внимательно статью:
              а) «дизайну делать аналогичной общему дизайну конфигурации» — это Вы говорить про UI дизайна
              б) UX -дизайн (удобство) либо качественный, либо никакой :-)
                0
                Интересный вопрос — если в основной конфигурации UX типовой (многоуровневые меню, несколько кнопок Ещё, и т.п), а в одной подсистеме совсем другой — это нормально?
                  0
                  И да и нет.
                  Заказчики хотят большего чем просто типовой интерфейс, который не всегда самый лучший вариант для удобства работы. Если в другой подсистеме будет интерфейс под задачу с рядом преимуществ для пользователей, то почему бы и не делать такое. А ещё крупные заказчики любят свой корпоративный стиль цвета/иконки/стили и т.д. Если это будет в отдельной подсистеме, то тоже приятно.
                    0
                    UX типовой — это платформа, Вы абсолютно правы, но есть UX который создается в рамках новых объектов. Даже в отчете есть много UX и UI, который реализуется именно разработчиком, а не платформой.
              0
              Для мобильных решений однозначно большой. Кто разрабатывает приложения на мобильной платформе, интерфейс полностью делают с нуля под задачу, потому что на типовых формах работать нереально в полевых условиях.
                0
                Угу. Одна из причин почему свалил по итогу в натив — настолько меня задолбало с мобильной платформой бодаться в попытках сделать хоть немного удобные и нормально выглядящие UI/UX.
              0

              Проблема коммуникаций заказчика-аналитика-разработчика характерна для ИТ в целом и 1С тут сама по себе не при чем. Вы на ui/ux от SAP или Oracle посмотрите. Там 1999 год на дворе, а продается сейлзами, как спасение мира.

                0

                Вы сильно ошибаетесь. Лет так на 6. Обновите данные. Начните с https://experience.sap.com/fiori-design/
                Адаптив, атомарность, консистентность, нативная поддержка, голосовой помощник и много всего прочего уже часть SAP

                  0
                  Согласен, я тоже видел такое в SAP на конференциях еще в 2017 году, но давайте откровенно, сколько предприятий РФ уже используют эти новшества, на сколько они обкатаны и применимы? Недавно был на одном из ТОП-ых заводов СИБУРа, там SAP, то что я там увидел, меня не впечатлило, а когда узнал бюджет — расстроило. При этом разделаю понятия: технологии и внедрение на конкретном предприятии, безусловно — это разные вещи. Но говоря прямо, то что сейчас за копейки доступно в 1С, еще долго будет не доступно в SAP.
                0

                Сервис огонь, автор красавчик. Целое приложение это конечно сильно… я бы всё-таки для этих целей сделал бы набор компонентов к figma или axure. Но попробуем использовать… Кстати, автор — как насчёт набора компонентов если уж заморочился? Ux/Ui просто привыкли к figma и Axure — не всех получится пересадить на сервис. А компоненты тоже можно платными делать...

                  0
                  Добрый день, спасибо за Вашу оценку.
                  сделал бы набор компонентов к figma или axure

                  Планы далеко идущие, сервис будет заточен именно под 1С. Планируем выгрузку в XML, расширение для мобилки и и.д. Все это не сделаешь ни на figma ни на axure.

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

                  можно подробнее о чем речь?
                    0
                    Ну речь о том же…
                    Главное чтобы если экспорт запланируете сделать сама суть не стала более сложной… чтобы справился дизайнер.
                    Ну и дизайнеры они очень привязаны к фигме, скетчу, акшуру… если бы просто были компоненты мы бы их уже бы купили и в работу пустили. А так пошёл «продавать» ваш инстурмент дизайнерам…
                      0
                      Будем стараться минимизировать сложные настройки
                  0
                  Нужно демо без регистрации, возможно с существованием проекта только в пределах сессии.
                    0
                    Почему без регистрации? Не сложно зарегистрироваться, как мне кажется, зато новые плюшки, все сохраняется, шаринг и т.д.
                      0
                      Необходимость и уникальность инструмента из «гифки для привлечения внимания» неочевидна. А вот если повозюкать и понравится, то для сохранения вполне себе можно и зарегистрироваться. Также цена несколько завышена, даже относительно того же «moqups».
                    0
                    Понял. Подумаем, наверное Вы правы, сделаем такую возможность.
                      –1
                      >Java Script
                      :| ясненько
                        0
                        Спасибо за отзывы.
                        1. Будем обсуждать с разработчиками платформы, ибо дальше их нужно выгружать.
                        2. Ширину колонок можно увеличить сейчас просто добавив в наименовании пробел.
                        3. Да, записано, будем делать эту функцию.
                          0
                          Какая замечательная штука!
                          А то сейчас бедные аналитики рисуют формы 1С в поверпоинте и их реально жалко.
                          Но, помимо очевидного и заявленного направления мобильных приложений, хочется еще пару вещей:
                          1. Поддержка стилей
                          2. Работа с таблицами — настройка ширины колонок/рисование примеров заполнения (особенно актуально для деревьев)
                          3. Свои наборы иконок тоже бы не помешали.
                            0
                            Эм, что-то на подобии Adobe XD + пакет элементов на подобии 1с'очных собрать…
                              0
                              >Ранее уже писал о том, что в 1С UI\UX дизайна нет.
                              Теперь понятно, почему пользоваться 1с очень сложно

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                              Самое читаемое