Обсудить в партнёрской конференции
Однажды в конференции нам задали такой вопрос: "Очень хотелось бы посмотреть на форму "Подготовка сведений для ПФР" в интерфейсе ТАКСИ помещающуюся в 1366х786 разрешении... ну или в 1280х800". Мы решили посмотреть, о какой форме идёт речь, и в текущей версии 2.5 конфигурации "Зарплата и управление персоналом" увидели следующее (размер картинки 1024х856):
После беседы с разработчиками выяснилось, что эта форма им самим тоже не нравится. И при подготовке следующей версии 3.0 они решили переделать эту форму. Сделать её более простой и понятной.
Поэтому для примера, показывающего адаптацию старой формы к интерфейсу Такси, мы решили взять не исходную форму, о которой шла речь в конференции, а улучшенную форму, которую разработчики подготовили для версии 3.0.
Её рабочий вариант в старом интерфейсе выглядел следующим образом:
Отсюда можно сделать первый важный вывод. Прежде чем пытаться адаптировать форму к интерфейсу Такси нужно посмотреть, а хороша ли эта форма сама по себе?
Потому что проблема может быть не в том, что в старом интерфейсе форма выглядит хорошо, а в новом - плохо. Проблема может быть глубже. В том, что и в старом интерфейсе форма выглядит плохо.
А значит, при адаптации её к новому интерфейсу придётся сначала "привести форму в чувство". Чтобы с ней просто было удобно работать. И это не имеет никакого отношения к интерфейсу Такси или какому-либо другому интерфейсу. И уже после этого нужно смотреть, какие изменения внести в форму, чтобы она хорошо выглядела в интерфейсе Такси.
В нашем случае первую часть этой работы, "приведение формы в чувство", уже выполнили разработчики конфигурации "Зарплата и управление персоналом 3.0". Поэтому мы просто перечислим основные идеи, которыми они руководствовались. А затем уже подробно опишем соображения, которых придерживались мы, когда адаптировали улучшенную форму к интерфейсу Такси.
Чтобы понять суть улучшений, нужно немного рассказать о том, что представляют собой данные, отображаемые в этой форме. Это отчетность, передаваемая в Пенсионный фонд РФ.
Она формируется автоматически и содержит общий отчёт (РСВ) и индивидуальные сведения: несколько пачек СЗВ и объединяющий их все документ опись АДВ.
В общем случае документов АДВ может быть несколько (например, если организация имела задолженность по уплате взносов):
Документы АДВ и СЗВ имеют некоторый набор собственных реквизитов, и кроме этого существует набор действий, которые можно выполнить с комплектом документов: проверить, напечатать и так далее:
Документы СЗВ содержат список застрахованных лиц с данными, относящимися к каждому застрахованному лицу:
Все эти данные отображаются в форме одновременно, что делает её очень громоздкой и сложной для восприятия.
Поэтому разработчики решили упростить форму и собрать все документы (РСВ, АДВ, СЗВ) в один список:
В этом же списке выводятся основные итоговые значения по каждому документу.
Кроме этого для РСВ и АДВ в нижней части формы выводятся подробные итоговые сведения, а для документов СЗВ там выводятся списки застрахованных лиц:
По щелчку на фамилии сотрудника открывается отдельная форма, в которой содержатся подробные сведения по этому сотруднику:
В результате этих изменений форма стала легче и понятнее. Но это совсем не означает, что она будет хорошо выглядеть в интерфейсе Такси.
Мы попытались запустить её в новом интерфейсе и увидели, что она, мягко говоря, "далека от совершенства":
Итак, что мы видим? Мы видим четыре блока информации:
Какие проблемы сразу же бросаются в глаза:
1. Неправильные размеры таблиц. Отображается недостаточное количество строк. Ширины колонок не соответствуют данным;
2. Пустая верхняя командная панель с одинокой кнопкой Еще;
3. Пустая строка в блоке управления пока не выбрана организация;
4. Слишком большой блок итоговой информации;
5. Неправильный шрифт у кнопки Обновить.
Первые шаги, которые можно сделать практически всегда и безболезненно, это:
1. Отключить пустую командную панель формы;
2. Включить вертикальную прокрутку у формы;
3. Исправить шрифт у кнопки Обновить. Вместо Шрифт диалогов и меню установить Авто;
Кроме этого будет полезно сразу же настроить отображение панелей интерфейса. Поскольку мы предполагаем, что с формой будут работать при малом разрешении экрана (1024х768), имеет смысл настроить панели следующим образом:
А после запуска для панели разделов включить показ в виде текста. Это поможет высвободить дополнительное место по-вертикали. Посмотрим на то, что получилось:
Стало немного лучше с высотами таблиц, но почти все остальные проблемы остались.
Теперь, чтобы понять, с какой стороны приступить к дальнейшему улучшению формы, нужно найти самые важные элементы этой формы. То есть те элементы, которые участвуют в большинстве сценариев её использования.
Для этого нужны сценарии. Это самый важный момент в нашей работе. Сценарии нельзя выдумывать из головы, потому что есть вероятность, что мы ошибёмся. Сценарии нужно выяснить с максимальной степенью достоверности. У пользователей. Или у разработчиков.
В нашем случае существуют три типовых сценария работы с этой формой.
Сценарий 1:
Сценарий 2:
Сценарий 3:
Исходя из этих сценариев понимаем, что один из главных элементов формы, это документы. И операции с документами. Поэтому в первую очередь займёмся ими.
Количество документов (пачек) может быть различным. От 3-7 в небольших организациях, до 50 в крупных. При этом вторая табличная часть всегда оказывается внизу, что сокращает высоту таблицы документов.
Поэтому попробуем расположить таблицы не вертикально, а горизонтально, рядом друг с другом.
Такое решение уменьшит ширину первой таблицы. Но если посмотреть на неё внимательно, но можно заметить, что та информация, которая содержится в колонках первой таблицы, для некоторых видов документов дублируется в подвале. Это суммы начисленных и уплаченных взносов.
Поэтому оставим в таблице документов только самые важные колонки: документ, номер, тип сведений, корректируемый период, категорию застрахованных лиц и тип договора. Чтобы эти сведения хорошо читались в узкой таблице, расположим их в две строки:
Кроме этого для всей таблицы установим РежимВыделенияСтроки = Строка.
Итак, смотрим на то, что получилось:
Левая таблица стала гораздо лучше, но её командная панель выглядит плохо.
Во-первых, командная панель не масштабируется вместе с формой. Это сделано специально, так как справа от командной панели программно выводятся некоторая информация, сигнализирующая о том или ином состоянии документов. Это решение нельзя признать хорошим, да и сами разработчики планируют выводить эту информацию в другом месте.
Поэтому мы не обращаем внимания на эту деталь, и командную панель делаем растягиваемой по-горизонтали.
Во-вторых, в командной панели присутствуют два отдельных подменю, содержащие наборы команд для формирования исходных документов и для формирования корректирующих документов. Поскольку форма не предназначена для массового ввода данных, два эти подменю можно объединить в одно - Добавить. И у первого подменю оставить отображение только в виде текста.
В-третьих, кнопка Удалить попала в подменю Еще, а это некрасиво. Поэтому мы принудительно разместим её на командной панели (ТолькоВоВсехДействиях = Нет), но не как надпись, а как картинку (Отображение = Картинка). Во-первых, для экономии места, а во-вторых потому, что картинка у кнопки Удалить достаточно наглядная, и у пользователя не будет сомнений в том, что это за команда.
В результате этих действий командная панель примет такой вид:
Итак, левая таблица выглядит достаточно хорошо.
Займёмся теперь верхней частью формы, которую мы определили раньше как Управление. А конкретно - её командной панелью.
Кнопок на ней очень много, выглядит она очень тяжело.
Вдобавок, особенность этой командной панели заключается в том, что состав команд меняется в зависимости от состояния комплекта документов. Например, если он Не сформирован, то в командной панели будет всего две команды:
А если он Сформирован но не отправлен, то количество команд будет совсем другим:
Причём существует три различных набора команд, которые расположены каждый на отдельной панели. В зависимости от состояния документов отображается одна из этих панелей. Однако примечательным является тот факт, что данная форма не подразумевает массового ввода данных, и все эти команды нужны разово. Нет смысла всё время держать их "под рукой".
Для исправления ситуации в каждой из этих панелей мы создадим командную панель, а в ней - подменю Комплект. И перенесем в это подменю все команды панели. С точки зрения удобства пользования от этого не должно стать хуже:
Итак, мы заменили командную панель одним подменю. Теперь возникает естественное желание разместить его где-нибудь в шапке, а не отдельно. Потому что отдельно - некрасиво. Оно занимает целую строку. И потому, что логически эти команды относятся ко всему набору документов.
Но для этого нужно сначала "привести в чувство" шапку.
Что плохого в шапке?
1. Гиперссылка Все комплекты. Она просто открывает список документов. Меняем её на кнопку Список. Кажется, что с таким названием она будет более понятна;
2. Надпись Отчетный период кажется лишней, т.к. отчетный период всегда заполнен и назначение этого поля понятно из его значения. Поэтому надпись убираем;
3. Поле, отображающее состояние комплекта документов, меняем на гиперссылку, которая при нажатии предлагает выбрать из списка. Для реализации этого нам придётся дописать небольшой фрагмент кода - обработчик события "Нажатие":
Текст обработчика события и вспомогательной процедуры будет выглядеть следующим образом:
&НаКлиенте
Процедура КомплектОбъектСостояниеКомплектаНажатие(Элемент, СтандартнаяОбработка)
СтандартнаяОбработка = Ложь;
ВЗ = ВыбратьИзМеню(СписокСостоянийКомплекта(), Элемент);
Если ВЗ <> Неопределено ТогдаСостояниеКомплекта = ВЗ.Значение; КомплектОбъектСостояниеКомплектаПриИзменении(Элемент);
КонецЕсли;
КонецПроцедуры
Функцию СписокСостоянийКомплекта(), которая формирует на сервере список возможных состояний комплекта, следует разместить в общем модуле с повторным использованием возвращаемых значений. Для того чтобы минимизировать количество серверных вызовов:
&НаСервереБезКонтекста
Функция СписокСостоянийКомплекта()
СЗ = Новый СписокЗначений();
Для Каждого ЗП Из Перечисления.СостояниеКомплектаОтчетностиПерсучета ЦиклСЗ.Добавить(ЗП, Строка(ЗП));
КонецЦикла;
Возврат СЗ;
КонецФункции
Тут нужно оговориться, что мы не можем рекомендовать это (п. 3) как стандартное решение, которое можно применять в любом случае. Правильнее сказать, что это довольно нестандартное решение. Но иногда, если конкретная ситуация позволяет, так можно поступить.
В результате шапка примет такой вид:
Теперь в конец шапки мы можем добавить наше подменю Комплект, содержащее команды работы с комплектом документов. Чтобы подменю не прокручивалось по горизонтали, зададим фиксированную ширину (12) для его панели страниц и отключим растягивание по горизонтали. В результате шапка примет следующий вид:
И чтобы визуально выделить группу управляющих команд добавим для группы Шапка обычное выделение. В результате увеличится интервал между шапкой и командными панелями таблиц.
Теперь займемся правой таблицей. Особенность формы заключается в том, что "правая" часть представляет собой три разные страницы, из которых показывается одна, соответствующая типу документа, выбранного в левой таблице.
Для РСВ картину портит заголовок таблицы Итоги по тарифам.
Отключим этот заголовок.
Но таблицы всё равно оказались не на одном уровне. Так происходит потому, что левая командная панель - это действительно командная панель, а правая - это обычная группа, в которой размещены кнопки.
Поэтому разместим "правые" команды так же в командной панели.
Теперь посмотрим на АДВ. У её правой части нет команд, и есть заголовок. В результате таблицы так же находятся на разных уровнях:
Поскольку справа совсем нет команд, мы не будем опускать правую таблицу вниз, на один уровень с левой таблицей. Вместо этого мы уберем заголовок и тем самым наоборот, поднимем таблицу вверх:
Теперь посмотрим на правую часть для документа СЗВ.
Здесь мы только поправим кнопки на командной панели. Вынесем их из Еще, и некоторые из них отобразим только в виде картинки. Кнопку Редактировать сразу удалим, так как в дальнейшем мы немного изменим эту таблицу, и необходимость в этой кнопке исчезнет.
Теперь займемся подвалом правой таблицы.
Как и командная панель, подвал свой для каждого вида документов. Например, для документа РСВ подвал выглядит так:
Оформим подвал. Поля ввода заменим на надписи, выделим группы данных, расположим их вертикально. Для отображения важных данных используем увеличенный масштаб шрифта (120%) и для всех чисел укажем формат пустого значения (ЧН = -----).
Аналогичным образом оформим подвал для документа АДВ:
И в заключение для документов СЗВ также добавим подвал Взносы:
В конце установим для правых таблиц растягивание по вертикали, чтобы убрать ненужные полосы прокрутки:
Также, поскольку правые таблицы стали уже, зафиксируем у них первые столбцы, чтобы они не исчезали с экрана при прокрутке таблицы:
Ну и для пущего удобства в таблице документа СЗВ тип колонки Сотрудник изменим на надпись. И покажем её гиперссылкой (ГиперссылкаЯчейки = Истина), чтобы открытие формы с дополнительными сведениями по сотруднику происходило не по двойному, а по одинарному щелчку на фамилии сотрудника.
В принципе получившийся вариант можно считать вполне приемлемым для работы в интерфейсе Такси.
Конечно, и в нём есть моменты, которые можно улучшать дальше, но они уже не носят принципиального значения, а больше относятся к "гармонизации" внешнего вида формы. Например, надпись с гиперссылкой в шапке документа можно заменить на кнопку.
И, конечно же, любые решения нужно проверять тестированием на пользователях. На наш взгляд получилось неплохо, но тестирование может выявить неудачные или неработающие решения и оставшиеся проблемы.
Например, спорным решением может быть "сжатие" правой таблицы. В исходном варианте она занимала всю ширину формы и всё равно имела прокрутку. Напомним:
Мы сжали её ещё больше.
С одной стороны можно сказать: "Она и раньше прокручивалась, теперь она тоже прокручивается". С другой стороны преобладающим сценарием работы с документом может быть проверка и корректировка данных, которые получаются в результате автоматического заполнения документа. Тогда, конечно, хорошо бы видеть как можно большее количество колонок этой таблицы на экране.
Для этого можно изменить компоновку формы с "горизонтальная" на "вертикальная", когда таблицы расположены одна под другой. И чтобы не перегружать форму двумя таблицами, поместить вторую таблицу в скрытую группу:
Тогда, при необходимости анализа индивидуальных данных таблица будет раскрываться вниз, и в форме появится вертикальная прокрутка:
Ну и для того, чтобы окончательно "облагородить" второй вариант формы, в верхней таблице можно расположить данные не в две строки, а в одну. Командную панель сделать более подробной, поместив скрытые группы команд на первый уровень. А панель инструментов приложения разместить не наверху, а слева, так как места по-горизонтали теперь вполне достаточно:
В результате мы получили второй возможный вариант той же формы.
Чтобы было легче оценить результаты, посмотрим ещё раз на все четыре формы. Первоначальный, "действующий" вариант формы (1024х856):
Рабочий вариант формы, "приведённой в чувство" (1121x768):
Адаптированный вариант 1 (1024х768):
Адаптированный вариант 2 (1024х768):
В заключение хочется сказать, что представленные формы ни в коем случае не являются эталоном, к которому нужно стремиться абсолютно и всегда. Они являются одним из возможных вариантов адаптации форм к новому интерфейсу. Они иллюстрируют основные подходы, которых нужно придерживаться при переработке старых форм.
Обсудить в партнёрской конференции
