UI без боли: как перестать мучить пользователей формами

В этой статье я не буду рассказывать про то, как сделать красиво. Я буду делать акцент на том, как сделать UI эффективным.

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

Я руковожу 1С-разработкой в компании, которая занимается доверительным управлением активами и работой с ценными бумагами.

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

 

Анализ проблемной формы и реакция команды

 

 

Такая у нас получилась форма. Достаточно типичная.

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

Но вместе картина вообще не складывается. В итоге у нас получилась такая стена плача. Форма, где одновременно важно все. И пользователь просто в ней теряется. Как с такой формой работать – непонятно.

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

Наша реакция как типичных IT-специалистов была, конечно же, уходом в отрицание проблемы. Наши аргументы: с пользователями просто надо провести обучение, у нас все так исторически сложилось. И главный аргумент: «Мы же по ТЗ сделали. Что просили, то мы вам и сделали».

Но эти разговоры и отговорки были до поры до времени. Потом пользователи пошли с проблемами уже к более высокому начальству, к руководству. И после разговора с руководством к нам пришло осознание, что все-таки мы в чем-то были неправы.

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

 

Что такое хорошая форма?

 

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

И, как ни странно, в этом нам поможет психология.

Давайте сначала определимся с терминологией. Что такое в целом UI и UX? По сути, это разные уровни одного диалога между пользователем и системой.

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

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

 

 

Мне нравится метафора айсберга. Верхний слой айсберга – это UI: то, что на поверхности, то, что видно. А большая часть UX скрыта под водой, и обычному пользователю она не видна.

Нам важна связка: хороший UI создает кредит доверия, а проработанный UX еще и делает работу в нашей системе достаточно бесшовной.

 

Основные законы UX-дизайна

 

Теперь перейдем к основным законам.

 

 

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

Важно не ломать ожидания пользователей. У нас в практике была проблема: мы сделали на форме одно улучшение, но пользователи стали жаловаться. Почему они стали жаловаться? На самом деле все просто. Мы изменили их привычные ожидания: немного изменили положение кнопки и переименовали ее. Для пользователей это уже стало неожиданностью.

 

 

Принцип Парето. Многие знают этот принцип как «80 на 20»: 80% результата дают 20% действий. Но относительно UX можно сказать, что 80% пользователей используют 20% функций. И при разработке UI нужно делать акцент именно на этих 20% функций. Они важные. Остальные 80% функций менее важные, и их можно убрать немного глубже.

 

 

Закон Фиттса. В прикладном виде он звучит так: чем крупнее и ближе объект, тем легче и быстрее пользователю с ним взаимодействовать. В наших 1С-формах это выражается так: ключевое действие должно быть легко доступно и визуально понятно пользователю. Цели касания должны быть достаточно большими, чтобы пользователь мог уверенно их выбирать.

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

 

 

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

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

Закон Миллера – это закон о том, что человеческая способность обрабатывать объекты ограничена. Среднестатистический человек может хранить в своей рабочей памяти только семь элементов. Есть погрешность плюс-минус два элемента, то есть в целом от пяти до девяти.

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

 

 

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

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

 

 

Закон Теслера – это закон сохранения сложности. Мы не можем просто взять и удалить сложность. Ее можно только перераспределить. По сути, это про выбор: либо сложность живет в логике и коде формы, либо мы просто перекладываем ее на плечи нашего дорогого любимого пользователя.

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

Важно помнить: наша основная задача – не уничтожить сложность полностью, потому что это вообще невозможно, а грамотно ею управлять, чтобы облегчить жизнь пользователю.

 

А что нам скажут стандарты разработки от 1С?

 

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

 

 

Во-первых, поговорим немного про иерархию элементов. Иерархия чтения элементов у нас идет сверху вниз, слева направо. Чем важнее информация, тем раньше она должна располагаться.

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

 

 

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

 

 

Вкладки. Тут, в принципе, все просто. Формируем названия вкладок осмысленно. Они должны обязательно отражать суть того, что расположено на вкладках. Никаких «Группа 1», «Страница 66» – ничего такого не допускается.

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

 

 

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

 

 

Отображение группы. Сильное выделение. Сильное выделение в общем случае использовать не рекомендуется и не поощряется. Его стоит оставить для некоторых особых случаев. Лучше использовать либо слабое выделение, либо обычное, либо вообще от него отказаться.

 

 

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

 

 

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

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

 

Приводим форму в чувства

 

Теперь давайте посмотрим на методику, на практический алгоритм приведения нашей формы в чувство. Какие шаги помогут ее улучшить?

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

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

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

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

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

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

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

 

 

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

 

 

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

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

 

«Запахи» плохой формы

 

 

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

1. Все и сразу вываливается на пользователя. Это миллион элементов на первом экране, и пользователю сразу становится сложно в этом ориентироваться.

2. У всех элементов равная важность.

3. Сценарий ведет пользователя по логике, которая удобна именно разработчику, а не пользователю. То есть пользователь, по сути, подстраивается под разработчика.

4. У нас нет никакого выравнивания на форме, либо большая часть элементов не выравнена.

5. Элементы размещены достаточно хаотично, какой-то логики там нет, смысловые группы могут быть не выделены.

6. И разный стиль форм в рамках одной подсистемы или одного решения тоже не прослеживается.

 

Разборы кейсов

 

Теперь перейдем к разбору конкретных кейсов.

 

Кейс №1: документ «Сделка»

 

Первый кейс – это документ «Сделка». Он фиксирует факт покупки или продажи ценной бумаги.

 

 

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

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

Какие проблемы мы здесь увидели? На самом деле их немало:

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

2. Основной сценарий работы пользователя непонятен. Есть вопросы.

3. Логическое разбиение также непонятно.

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

5. И визуальных акцентов очень мало, а те, которые есть, слишком яркие и слишком сильно оттягивают внимание пользователя на себя.

Что мы делаем?

 

 

Первым делом мы собираем «первый» экран. Для этого выделяем основной пользовательский сценарий и шаги этого пользовательского сценария. Отмечаем поля, которые пользователи используют в первую очередь для реализации этого сценария. И ориентируемся на наш принцип Парето – 20% основных функций.

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

 

 

Дальше – вкладка «Главное». Во-первых, мы добавляем отдельные смысловые вкладки и называем их осмысленно. Делим в явном виде реквизиты на основные и дополнительные поля формы. И добавляем, где нужно, группировки связанных реквизитов.

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

Что мы получаем в результате? Форма начинает читаться именно блоками, и пользователь переходит от полотна реквизитов к упорядоченной структуре.

 

 

Блок «Параметры сделки». Здесь отдельно мы убираем весь визуальный шум. В исходной форме было достаточно много группировок с сильным выделением – это жирная вертикальная зеленая черта.

Почему это плохо? Потому что происходит конкуренция за внимание пользователя между элементами. Мы оставляем акценты только там, где они нужны, где они несут смысл. В частности, мы отделяем паспорт бумаги – это вспомогательная информация по бумаге – от основной информации в блоке «Параметры сделки».

Почему это будет работать? Потому что внимание пользователя ограничено. Опять вспоминаем закон Миллера: пользователь будет держать в голове только важные элементы. И мы как раз помогаем ему с этим, используя такое порционирование данных.

 

 

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

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

 

 

Всю второстепенную информацию мы вынесли на отдельную вкладку. Опять не забываем про стандарты: у нас все начинается по мере убывания важности. Самое важное идет сначала, менее важное – дальше.

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

 

 

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

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

 

Кейс №2: разбор и улучшение формы списка банковских счетов

 

Кейс №2 – это форма списка банковских счетов.

 

 

На нее тоже можно посмотреть: она сложночитаемая, достаточно много колонок. Опять нет какого-то порядка, и форма сама по себе перегружена данными.

Какие проблемы мы увидели?

1. Поля на форме идут вперемешку.

2. Логической последовательности не наблюдается.

3. Форма перегружена колонками.

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

5. И никаких визуальных акцентов тоже нет.

 

 

Что мы изменили? Мы выделили основной сценарий. В данном случае это быстро найти нужный счет. Убрали технические колонки, опять руководствуясь принципом Парето. Связанные поля расположили рядом и добавили цветовые акценты.

 

 

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

 

Оценка эффекта от изменений

 

Оценку эффекта от изменений мы проводили при помощи обратной связи от пользователей:

1. Снизилось число обращений в поддержку по работе с формой.

2. Позитивная обратная связь по работе в новом интерфейсе («удобно, понятно»).

3. Пользователи отметили, что работать с формой стало приятнее.

4. Основные сценарии стали выполняться проще. Не нужно прыгать за элементами по форме.

 

Быстрый чек-лист по работе с формами

 

1. Нужно проверить основной сценарий,

2. Оставить только смысловое ядро,

3. Сгруппировать элементы по смыслу,

4. Спрятать второстепенное,

5. Добавить помощь,

6. Унифицировать заголовки и месторасположение реквизитов,

7. Добавить акценты в тех местах, где это нужно,

8. Проверить форму на разных мониторах и разных разрешениях.

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

 

Что еще почитать по теме

 

1. Дж. Яблонски «Законы UX-дизайна».

2. Дж. Тидвелл, Ч. Брюэр, Эйнн Валенсия «Разработка интерфейсов. Паттерны проектирования».

3. Проектирование интерфейсов для 8.3. Система стандартов и методик разработки конфигураций 1С: Предприятие 8.

 

Благодарность

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

 

*************

Статья написана по итогам доклада (видео), прочитанного на конференции INFOSTART TEAM EVENT.