Заметки из Зазеркалья

01.07.2013

Пример адаптации формы к интерфейсу Такси

Обсудить в партнёрской конференции

Предыстория

Однажды в конференции нам задали такой вопрос: "Очень хотелось бы посмотреть на форму "Подготовка сведений для ПФР" в интерфейсе ТАКСИ помещающуюся в 1366х786 разрешении... ну или в 1280х800". Мы решили посмотреть, о какой форме идёт речь, и в текущей версии 2.5 конфигурации "Зарплата и управление персоналом" увидели следующее (размер картинки 1024х856):

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

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

Её рабочий вариант в старом интерфейсе выглядел следующим образом:

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

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

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

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

Приведение формы "в чувство"

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

Она формируется автоматически и содержит общий отчёт (РСВ) и индивидуальные сведения: несколько пачек СЗВ и объединяющий их все документ опись АДВ.

В общем случае документов АДВ может быть несколько (например, если организация имела задолженность по уплате взносов):

Документы АДВ и СЗВ имеют некоторый набор собственных реквизитов, и кроме этого существует набор действий, которые можно выполнить с комплектом документов: проверить, напечатать и так далее:

Документы СЗВ содержат список застрахованных лиц с данными, относящимися к каждому застрахованному лицу:

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

Поэтому разработчики решили упростить форму и собрать все документы (РСВ, АДВ, СЗВ) в один список:

В этом же списке выводятся основные итоговые значения по каждому документу.

Кроме этого для РСВ и АДВ в нижней части формы выводятся подробные итоговые сведения, а для документов СЗВ там выводятся списки застрахованных лиц:

По щелчку на фамилии сотрудника открывается отдельная форма, в которой содержатся подробные сведения по этому сотруднику:

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

Мы попытались запустить её в новом интерфейсе и увидели, что она, мягко говоря, "далека от совершенства":

Адаптация формы к интерфейсу Такси

Итак, что мы видим? Мы видим четыре блока информации:

  1. "Управление" (поля Организация, Отчетный период, Состояние, кнопки управления);
  2. Список пачек документов (первая таблица);
  3. Информация по пачке, зависит от типа пачки (вторая таблица);
  4. Итоговая информация по пачке. Зависит от типа пачки, есть не для каждого типа пачки.

Какие проблемы сразу же бросаются в глаза:

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):

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

Обсудить в партнёрской конференции

Теги: Такси  разработка 

Рассказать друзьям: