Прорисовка интерфейсов или как можно использовать UX/UI при проектировании в 1С

Любой аналитик или разработчик, работающий с 1С, сталкивался так или иначе с таким сказочным персонажем, как разработка интерфейсов 1С. Систему прототипирования в 1С можно сравнить с популярным мемом из кинофильма «ДМБ»:

-Видишь суслика?

-Нет.

-Вот и я не вижу. А он есть.

Так и с прорисовкой интерфейса в 1С, она тоже есть, но на нее никто не обращает внимание.

Разработчики обычно «рисуют» напрямую в конфигураторе или 1C:EDT. А что насчет бизнес-аналитиков, консультантов и руководителей проектов? Какие инструменты чаще всего используются для того, чтобы показать заказчику наглядный вариант будущей системы (формы документов, справочников и рабочих мест), и какие инструменты можно использовать для оптимизации процесса прототипирования мы рассмотрим в данной статье.

Что такое дизайн интерфейса?

Начать хотелось бы с основ, а именно с того, что такое дизайн интерфейса. Как ни крути, но разработка интерфейсов 1С непосредственно относится к дизайну и прототипированию систем. Пора перейти от стадии «депрессии» к стадии «принятия» и начать использовать практики из других областей разработки.

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

В рамках данной статьи – это процесс рисования или прототипирования форм будущих объектов в 1С (примечание: прототипирование, прорисовка интерфейса, разработка интерфейса, создание макета – это синонимы).

Во всем ИТ мире дизайн интерфейсов имеет две специализации: UI и UX-дизайн.

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

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

В среде 1С никакой подобной закрепленной специализации разработки интерфейса нет, технологии UX/UI используются аналитиками крайне редко. Это является проблемой, так как возможности для прототипирования интерфейса есть, и они могут сделать работу аналитика и пользователя удобнее и быстрее. Вопрос: как? Ответ очевиден: понятный интерфейс делает процесс согласования новых форм объекта быстрее. Пользователь принимает непосредственное участие в проектировании, снижает уровень недопонимания, уменьшается вероятность переделок и не нужно тратить много времени на обучение.

Типичные требования к качественному UX/UI-дизайну:

• Ясность – понятный интерфейс без двусмысленностей;

• Лаконичность – интерфейс не перегружен составными элементами;

• Узнаваемость – элементы дизайна легко распознать, даже если пользователь видит ваш макет впервые;

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

• Постоянство – соблюдение постоянства для всего документа или макета;

• Эстетика – интерфейс должен быть визуально привлекательным, чтобы пользователю было приятно работать;

• Эффективность – качественный интерфейс экономит время пользователя и доставляет его в нужную точку с минимальными усилиями;

• Снисходительность –даже при самом продуманном интерфейсе ни один пользователь не застрахован от ошибки, не стоит забывать об этом.

Этап создания макетов интерфейсов давно используется в других областях разработки. Например, в web, где есть полноценная методология ведения проектов и соответствующий инструментарий.

Методология основывается на предоставлении пользователю возможности взаимодействовать с прототипом еще до начала разработки первой версии. На этом этапе можно выявить до 80% всех неудобных мест будущего решения. На этом этапе пользователь может сам лично пощупать интерфейс, что неминуемо ускоряет сдачу результата заказчику.

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

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

Как сейчас рисуется интерфейс на проектах?

За свой опыт я не видел, чтобы кто-то из аналитиков или консультантов использовал для рисования прототипов, макетов, версий документов какой-то специальный софт. Обычно это делается в «Пейнт» путем составления аппликаций из различных скриншотов. Занятие веселое ровно в первые 5 минут и ровно до первой демонстрации заказчику, после чего нужно все переделать, сделать новые скриншоты и составить новый макет. Такое творчество не для слабонервных. Некоторые из нас используют для этих целей Excel, либо обычное рисование от руки на клочках бумаги. В 21 веке, Карл!

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

• это не сделаешь быстро, и сам заказчик уже не сможет протестировать макет;

• потребуется установка, лицензии 1С и хорошие ресурсы компьютера.

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

Сама фирма 1С не предоставляет стандартов использования инструментов формализации бизнес-процессов и уж тем более правил рисования макетов и прототипов.

Как это должно и может работать. Обзор инструментов проектирования.

Опыт показывает, что для комфортной и качественной разработки интерфейсов на базе 1С не хватает:

1. Инструмента, в котором необходимый вариант будущей формы можно сделать быстро и вместе с заказчиком;

2. Регламентации по созданию интерфейсных форм с учётом особенностей платформы 1С;

3. Соответствующих учебных материалов.

Ниже представлены сервисы, которые можно использовать для прототипирования интерфейсов на базе 1С.

1С-Maker - 1cmaker.com

Сервис создан одинесниками для одинесников.

Возможности:

В сервисе:

• Не нужно уметь программировать;

• Заказчик и исполнитель видит результат в реальном времени (упрощение согласования). Тут же формируются требования в реальном времени. Даже не зарегистрированный пользователь может посмотреть макет;

• Есть возможность комментировать и описывать элементы, их назначения и возможности, это поможет точнее составить ТЗ, сэкономить своё время и время программиста;

• Создатели посчитали, что в среднем, на корректировку до желаемого состояния уходит 3-3,5 итерации, 1CMaker помогает это время сократить в 2 раза;

• В бесплатном режиме вполне удобно работать. Есть встроенные элементы для составления макета, их немного, но они есть.

Эскиз - https://t.me/sketch1c

Проект в стадии разработки. Есть телеграм канал, где автор выкладывает прогресс по инструменту. Есть «сырая» версия продукта, которую можно попробовать.

Как выглядит:

Сервис позволяет сделать прототип внутри 1С, на борту довольно большой инструментарий и возможности.

Скачать и ознакомиться можно по ссылке.

Сервисы, зарекомендовавшие себя в web-разработке

Все сервисы, представленные ниже могут использоваться для создания макетов. Можно загружать шаблоны, макеты библиотек и строить по ним интерфейс, формы и все, что душе угодно. Да, эти инструменты заточены больше под web-разработку, но это не отменяет возможность их адаптации под интерфейсные нужды при работе с 1С. Рассмотрим на примере несколько сервисов. На самом деле их гораздо больше и функционал у них схож. В web-среде есть «золотая» тройка: Figma, Adobe XD и Sketch. О первых двух поговорим, последний работает только на MacOS

Figma

• Доступна версия для Windows;

• Работа прямо из браузера - в ней доступны все инструменты и возможности;

• Наличие бесплатного тарифа, но для полноценной работы нужна подписка;

• Есть командный режим работы, несколько человек могут онлайн работать с одним документом (например, заказчик и консультант), тут же можно общаться внутри проекта. Есть инструменты коммуникации, которые позволяют, не прерывая работы, обсуждать все текущие вопросы в Figma. Наличие отдельного канала связи позволяет не отвлекаться на сторонние коммуникации вроде телефона или скайпа;

• Собственное облачное хранилище (в бесплатной версии история хранится 30 дней);

• Режим презентации макета;

• Нет русского языка;

• Легко экспортировать в самые разные форматы.

AdobeXD

• Большая экосистема взаимосвязанных продуктов от Adobe;

• Возможность работы с рабочего стола или браузера;

• Есть русский язык;

• Совместная работа в реальном времени;

• Простота в использовании, если вы знакомы с другими продуктами Adobe;

• Девиз Adobe «Плати или умри».

Отдельная номинация:

Draw IO – легкий сервис, в котором можно нарисовать какую угодно диаграмму и не только:

• Настолько дешево, что аж бесплатно;

• Небольшой набор инструментов;

• Есть возможность совместной работы;

• Есть как браузерная, так и десктопная версия;

• Есть русская версия.

Другие популярные сервисы:

• Proto.io;

• Axure RP;

• Framer;

• И многие другие.

• С каждым годом проблема разработки интерфейса в среде 1С становится актуальнее;

• Софт, который подходит для проектирования дизайна форм 1С, преимущественно платный, но все же он есть;

• Есть возможность адаптировать софт из других областей разработки. Не нужно заново придумывать велосипед;

• Фирма 1С пока не хочет заниматься вопросами дизайна форм, текущие справочные материалы бесполезны;

• Уже прямо сейчас каждый может выбрать для себя сервис и использовать его;

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