13.11.2013

Интерфейс "Такси". Концепция и назначение

Почему мы вообще взялись за это, и почему мы сделали его именно таким

Обычно, когда разговор заходит об интерфейсе "Такси", всё так или иначе сводится к двум основным вопросам: "зачем вообще нужно было делать новый интерфейс" и "почему его сделали именно таким, а не другим".

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

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

Дело в том, что с появлением веб-интерфейса, с выходом 1С:Предприятия "в Интернет" (в том числе и через 1cfresh), вообще, с развитием Интернета, аудитория пользователей начала расширяться.

Раньше прикладные решения были ориентированы только на подготовленных пользователей, которые прошли предварительное обучение и знали предметную область. Или они могли быть не очень подготовленными, но "рядом" с ними всегда была поддержка в виде собственной IT-службы.

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

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

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

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

Что нам удалось выяснить

Мы провели многочисленные юзабилити-тестирования и наблюдения за тем, как пользователи работают с нашими типовыми прикладными решениями. В результате анализа мы смогли выделить большое количество проблем, часть из которых и постарались решить с помощью Такси. Основные проблемы, которые мы наблюдали, заключались в следующем:

В результате борьбы с этими проблемами и "появился на свет" новый интерфейс платформы - Такси. Таким образом, Такси – это не только (и не столько) новый внешний вид. Такси – это:

Навигация по приложению

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

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

Мы повысили роль истории, как инструмента поиска данных:

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

Мы предложили больше и чаще использовать механизм полнотекстового поиска данных:

Кроме этого мы:

Рабочее пространство пользователя

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

Понимая, что сделать одно решение, которое подойдет всем, у нас не получится, мы решили дать возможность "конструировать" рабочее место.

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

При этом все возможности навигации по приложению остаются доступны из панели инструментов.

При работе мышью некоторые из них станут "дальше" из-за лишних "кликов", но это разумная плата за увеличение рабочей области.

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

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

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

Юзабилити поля ввода

Мы существенно улучшили юзабилити поля ввода при выборе значения. Тут существовало несколько проблем.

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

Во-вторых, не все пользователи понимают, в каких полях возможен ввод для выбора.

И, в-третьих, ситуация, когда у поля есть кнопка выбора и кнопка выбора из выпадающего списка, часто ставит пользователя в тупик. Какую кнопку надо нажимать?

Проанализировав эти проблемы, мы решили изменить поведение поля ввода. Теперь основной механизм для выбора значения – это новый выпадающий список. Этот список объединяет в себе несколько сущностей:

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

Начинающие пользователи, а зачастую, и не только начинающие, в основном пользуются мышью. "Встав" мышью на поле ввода они увидят теперь выпадающий список, который призван:

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

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

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

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

Такое поведение теперь является стандартным. Но если конкретная ситуация требует иного, кнопку выбора можно вернуть на прежнее место.

В качестве представлений значений подбора и списка выбора в выпадающем списке можно использовать форматированные строки. Это дает возможность при помощи цвета текста или шрифта визуально выделить некоторые строки или части строк.

Новый дизайн

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

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

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

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

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

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

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

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

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

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

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

Адаптация старых форм

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

Так происходит и с интерфейсом Такси. С простыми формами не возникает проблем при включении интерфейса Такси. Но сложные формы, спроектированные в "старой" идеологии и под старый интерфейс, не будут автоматически выглядеть хорошо в интерфейсе Такси. В первую очередь из-за того, что увеличились шрифты и отступы. А "мелких" мониторов еще много. Например, у формы, приведённой ниже, оказывается полностью скрыта табличная часть:

Такие формы потребуют доработки и переделки. Где-то не очень сложной, где-то более значительной. Мы понимаем эту проблему, и предприняли определённые шаги для того, чтобы она не стала камнем преткновения при переходе на версию 8.3. Поэтому у управляемой формы мы реализовали новое свойство Вариант масштаба. Если в конфигураторе установить это свойство в значение Компактный, форма автоматически будет выглядеть так:

На "техническом языке" это означает, что:

Такой вариант работы формы не является основным. "Компактные" формы диссонируют с остальным интерфейсом, и это лишь вспомогательное решение на переходный период. Однако оно позволяет с минимальными затратами перевести всё прикладное решение на новую платформу. Рано или поздно такие формы все равно нужно перерабатывать, но делать это можно, во-первых, постепенно, а во-вторых, уже тогда, когда всё прикладное решение работает на новой платформе 8.3.

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