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

23.01.2020

Как и зачем мы поменяли пользовательский интерфейс в версии 8.3.15

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

Нас критиковали (особенно пользователи, только начинающие работать с нашими продуктами) за перегруженность интерфейса главного окна.

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

Немного истории

Когда у компьютерных программ появилась возможность рисовать не только 16-ю цветами в разрешении 640*480, многие программисты стали использовать возможности графики «по полной». Те из нас, кто постарше, помнят трехмерные кнопки с тенями и иконками в True Color (а иногда еще и с анимацией!).

Но постепенно индустрия стала мигрировать в сторону более аскетичных интерфейсов, не утомляющих восприятие пользователя (который подчас проводит в программе бОльшую часть своего рабочего дня). Как следствие интерфейсы стали выглядеть более скромно, трехмерность и цветовая насыщенность элементов интерфейса постепенно отошла в прошлое. Уменьшилось также и количество управляющих элементов интерфейса (кнопок, пунктов меню и т.п.), одновременно отображаемых на экране. "Батареи" кнопок на все случаи жизни теперь "не носят" – не модно.

Мы также старались двигаться в одном направлении с индустрией. Несколько иллюстраций ниже.

Версия 8.1. Полноцветные иконки, много кнопок вытащено на панель, причем более половины из них недоступны в данный момент для нажатия (серенькие, disabled), т.к. контекст для них сейчас неподходящий:

img-01.png

Версия 8.2. Кнопки стали скромнее в цветовом оформлении, их размер и количество уменьшились, часть из них переехала в заголовок главного окна, чтобы сэкономить экранное место:

img-02.png

Версия 8.3, интерфейс «Такси» - дальнейшая миграция в сторону облегчения интерфейса:

img-03.png

Что мы сделали в 8.3.15

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

Вспомним, как выглядел интерфейс в версии 8.3.14:

img-04.png

  • В левой верхней части заголовка главного окна находилось направленная вниз стрелка, вызывающая главное меню, содержащее команды, общие для всех приложений (команды работы с файлами, команды правки и т.д.). Кстати, по нашим наблюдениям, пользователи часто не находили главное меню (возможно, из-за того, что иконка «направленная вниз стрелка» была малозаметна или не воспринималась как нажимаемая кнопка).

  • Правее главного меню на заголовке располагалась настраиваемая пользователем системная командная панель, которая могла содержать команды из главного меню и ряд других команд («Прибавить число к буферу обмена» и т.д.). Как видите, здесь имелось дублирование команд из главного меню (хоть и сокращающее пользователю путь к этим командам на один клик мыши).
  • В главном окне также находилась панель инструментов, содержащая кнопку вызова меню функций приложения (конфигурации), а также кнопки «Избранное», «История», «Поиск» и «Оповещения».

Вот как выглядит главное окно приложения в версии 8.3.16 (самой свежей на момент публикации статьи):

img-05.png

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

Наличие кнопок "на все случаи жизни всегда на экране" не соответствует современным тенденциям и плохо воспринимается пользователями – их пугает обилие команд (часть из которых им, возможно, будет нужна очень редко или вообще никогда).

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

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

За ним следуют три, на наш взгляд, важных платформенных способа навигации по приложению – «Оповещения», «История» и «Избранное».

Мы считаем, что остальные команды используются намного реже, и пользуются ими далеко не все, поэтому мы поместили их в меню «Сервис и настройки» («мини-гамбургер-со-стрелочкой-вниз»), следующее за именем текущего пользователя.

В меню «Сервис и настройки» мы поместили команды, относящиеся к приложению в целом. Команды в этом меню – это практически все команды из убранных главного меню и системной командной панели. Убрав системную командную панель, мы визуально «разгрузили» заголовок главного окна, сделали его выглядящим изящнее и современнее.

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

  • «Открыть файл» (сочетание клавиш Ctrl + О); очень небольшое количество пользователей наших продуктов часто открывают внешние файлы непосредственно из приложений 1С. Например, у большинства пользователей возможность открытия внешних обработок как правило отключена по соображениям безопасности.
  • «Окна» (переключение между окнами). Между окнами также можно переключаться с помощью стрелок «Вперед» и «Назад» в заголовке формы или через панель открытых.
  • «Справка» (вызывается также по клавише F1). Если есть справка по конкретной форме – она вызывается кнопкой «Справка» непосредственно с формы и нет нужды вызывать ее из меню. Общую же справку по системе вызывают, как правило, нечасто.
  • Команды печати. Если текущая форма – форма отчета, то у нее, как правило, есть кнопки печати и сохранения в файл. Если их нет – значит, разработчик посчитал, что ими будут пользоваться редко и не стоит тратить на них экранное место. Мы тоже решили не тратить на них место в заголовке приложения и поместить их в меню формы.

При этом стоит помнить, что сочетания клавиш сохранения, печати, копирования и т.д. (Ctrl + S, Ctrl + P, …) продолжают работать.

Чуть подробнее о печати

Хорошим тоном для разработчика является помещение большой и удобной кнопки печати на видное место в тех формах, где она часто востребована (документы, отчеты и т.п.)

Пара примеров таких форм из нашей «Бухгалтерии предприятия» ниже.

img-06.png

img-07.png

Работаем «по месту»

В соответствии с современными тенденциями кнопки/пункты меню по возможности должны быть контекстными – располагаться ближе к предмету, над которым выполняется операция. Поэтому команды, имеющие отношение к текущему контексту (текущей форме, текущему элементу) мы перенесли из общего меню в саму форму (меню троеточие «…» в верхнем правом углу формы). Там находятся команды «Изменить масштаб», команды работы с окнами, «Печать» и «Предварительный просмотр» (если они определены для формы), «Сохранить» и «Сохранить как» (если они определены для формы), команды правки («Выделить все», «Копировать» и другие) и др.

Слева от меню формы содержится команда «Получить ссылку».
img-08.png

В заключение

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

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

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

Теги: UI  Такси 

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