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

05.09.2013

Зачем мы сделали интерфейс "Такси"

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

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

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

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

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

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

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

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

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

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

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

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

  • Сложно найти необходимое: команду в панели, пункт в меню, строку в списке. Например, чем больше элементов отображалось в панели или списке, тем больше времени пользователи тратили на поиск. Очень часто поиск не приводил к результату, хотя необходимая информация в списке была. Пользователю приходилось прибегать к другим способам поиска, если они были возможны;
  • Сложно найти данные: введенный вчера заказ или накладную конкретного покупателя. Плохо работает поиск в списке. Плохо работает история. Пользователи не используют «Избранное»;
  • Сложно осуществлять выбор в поле ввода. Пользователи мало используют поиск при вводе. Необходимость работать с формой выбора требует повышенного внимания и часто ведет к тому, что пользователь теряет контекст работы. Добавление нового элемента данных из формы выбора практически всегда ведет к потере контекста работы;
  • Сложности работы с формой выбора. Большинство пользователей ищут глазами, не прибегая к поиску, что приводит к проблеме, описанной в пункте 1. У многих пользователей возникают проблемы с иерархическими списками. Особенно у новичков, незнакомых с принятой в учете иерархией данных;
  • Мелкие элементы интерфейса: сложно увидеть, сложно попасть в них мышью. Например, кнопки в командной панели в виде картинок без текста, кнопки навигации в календаре;
  • И многое другое.

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

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

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

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

  • Данные и команды должны быть как можно ближе к пользователю;
  • Пользователь должен быть уверен, что он всегда сможет найти свои данные.

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

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

  • Вместо истории изменений мы реализовали историю открытий;
  • Увеличили количество сохраняемых в истории элементов;
  • Переработали диалог отображения истории. Разделили записи по датам, реализовали удобный поиск;

  • Сделали панель истории, которую можно поместить в основное окно и иметь доступ к недавним записям «под рукой». Панель истории можно, например, использовать и для переключения между открытыми формами.

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

  • Реализовали возможность добавлять в избранное не только данные, но и команды;
  • Дали возможность пользователю добавлять элементы в избранное практически в любом месте программы в «один клик»: из формы, из меню функций, из диалога истории;

  • Переработали диалог отображения избранного и реализовали в нем новый поиск;
  • Реализовали возможность переименовывать элементы избранного;

  • Сделали панель избранного. Дали возможность «фиксировать» элементы избранного. Панель избранного можно использовать и как панель «любимых» команд: добавить в избранное основные команды и «зафиксировать» их;

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

  • Реализовали стандартную форму поиска. Теперь полнотекстовый поиск доступен во всех прикладных решениях;

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

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

  • Реализовали панель инструментов, с помощью которой можно обратиться ко всем основным способам навигации по приложению: меню функций, избранное, история, поиск в данных;

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

  • Убрали связь между разделом «Основное» и начальной страницей. Теперь это две отдельные несвязанные между собой сущности.
  • Закрепили за разделами роль «логической группы команд»:
    • Раздел – это не рабочее место;
    • Раздел – это способ получения доступа к списку команд, объединенных прикладным смыслом.
  • Реализовали быстрый доступ к начальной странице;

  • Реализовали альтернативную навигацию по открытым формам в парадигме Вперед/Назад.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Подобранные значения;
  • История выбора;
  • Список выбора (из соответствующего свойства элемента формы).

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

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

  • Показать, что в этом поле осуществляется выбор значения, а не просто ввод текста;
  • При первом открытии объяснить, что в поле можно вводить текст для поиска;
  • С помощью истории помочь в выборе, если такие значения уже недавно были выбраны;
  • Дать возможность добавить новый элемент, не открывая форму выбора;
  • Ну и наконец, открыть форму выбора, если ничто другое не пригодилось.

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

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

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

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

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

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

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

Новый дизайн

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

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

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

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

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

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

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

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

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

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

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

Немного о планах

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

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

Мы понимаем эту проблему, и предпринимаем определённые шаги для того, чтобы она не стала камнем преткновения при переходе на версию 8.3. В ближайшее время мы хотим предложить решение, которое позволит разработчикам плавно "пересесть на Такси", «растянув» процесс адаптации. Это решение автоматически позволит использовать старые сложные, «насыщенные» формы без переработок.

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

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

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

Теги: Такси