+7 (499) 322 88 70
ok@systems.education
Алексей Копылов

Эргономические критерии

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

Во второй статье я постарался наглядно показать последствия плохого проектирования пользовательских интерфейсов.

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

Области создания пользовательских интерфейсов
User Experience
В прошлых статьях мы с вами говорили о той части дизайна интерфейсов, которая относится к области пользовательского опыта (UX, User Experience). Внутри области знаний UX можно выделить несколько других: промышленный дизайн, проектирование взаимодействия, юзабилити, Information Architecture.

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

1. Промышленный дизайн

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

2. Проектирование взаимодействия (Interaction Design, IxD)
В отличие от остальных дисциплин дизайна, проектирование взаимодействия сосредотачивает внимание на том, как пользователь будет взаимодействовать с продуктом, чтобы достигать своей цели, выполнить свою задачу.

3. Юзабилити

Эта дисциплина дизайна на слуху у ИТ-шников больше прочих. Usability означает удобство и простоту использования, степень удобства использования. Эта область знания посвящена измерению качества интерфейсов: тому, как посчитать, что один интерфейс лучше другого.

4. Информационная архитектура (Information Architecture)
Информационная архитектура отвечает за упаковку информация таким образом, чтобы её было легко искать, чтобы было удобно просматривать каталоги и понимать логику, на которой построен этот каталог так. Эта дисциплина дизайна сосредотачивает свое внимание на том, чтобы доступ к информации был максимально простым.

На рисунке область информационной архитектуры выходит за пределы UX, потому что она касается не только ИТ, а, например, ещё и библиотечного дела: бумажные каталоги хранятся в библиотеках по принципам Information Architecture.
Customer experience
Вторая обширная область, графически отражённая на рисунке выше — клиентский опыт (CX, customer experience). СХ изучает опыт взаимодействия человека с целым брендом, в противовес UX как взаимодействие пользователя с системой.

Здесь рассматривается ожидание клиента от бренда в целом, а также анализируется весь путь клиента от возникновения потребности до действий после получения результата, то есть учитывается поддержка продукта. Такой путь называется CJM (customer journey map).

Рассматриваются вопросы ожидания от бренда, CJM (customer journey map) (но не внутри одного продукта)

Отдельная область деятельности, входящая в CX — это проектирование услуг или, другими словами, организационный дизайн. Она подразумевает, что сами программные продукты встроены в услугу как часть услуги.
Другие области знаний
Можно выделить множество других подобластей деятельности дизайна, но все они будут относится к двум основным областям — UX (user experience) и CX (customer experience).

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

Сейчас сфера дизайна — это такой бушующий океан всяких смыслов, методик, идей. Область знаний активно развивается, в неё приходят всё новые и новые люди, и начинается специализация — разделение специалистов по разным направлениям.
Например, есть информационные архитекторы, есть люди в области юзабилити, есть дизайнеры-проектировщики, промышленные дизайнеры, сейчас уже появились UX-копирайтеры (люди, которые придумывают тексты для интерфейсов). Есть те, кто делает контент. Как видите, становится всё больше и больше разных специалистов. И эта специализация, это развитие областей, несомненно, будут продолжаться и дальше.

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

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

Существует стандарт серии ISO на юзабилити, содержащий официальный перевод определения юзабилити на русский язык, но мне больше нравится перевод Влада Головача:
“
Юзабилити — это степень эффективности, трудоёмкости и удовлетворенности, с которыми продукт может быть использован определёнными пользователями при определённом контексте использования для достижения определённых целей.
Определение довольно тяжело для понимания целиком, поэтому предлагаю разбить его на две части и разобрать каждую часть отдельно:

1. Во-первых, степень эффективности, трудоёмкости и удовлетворённости — это те самые характеристики, по которым мы можем улучшать интерфейс. Мы можем повышать эффективность, снижать трудоёмкость и повышать удовлетворённость пользователей. Ниже мы будем подробнее рассматривать эти и другие характеристики интерфейса.

2. В следующей части определения «с которыми продукт может быть использован определёнными пользователями», формулировка «определёнными пользователями» подразумевается, что продукт может быть использован не любыми пользователями, а только теми, для которых мы делаем интерфейс для конкретно этого продукта.
3. И заключительная, третья часть определения «при определённом контексте использования для достижения определённых целей» расшифровывается следующим образом: хороший интерфейс с заданными эффективностью, трудоёмкостью и удовлетворённостью может быть создан только при определённом контексте использования и достигает определённой цели.
“
Это значит, что не бывает идеальных интерфейсов для всех — любой интерфейс будет работать только для своей целевой аудитории, причём только если эта аудитория находится в определённом контексте
Например, для интерфейса пульта атомной электростанции, фрагмент которой изображен на рисунке ниже, важна эффективность операторов и отсутствие ошибок в их работе, ведь любая ошибка может быть фатальна.

Фрагмент пульта Калининской АЭС
В случае какой-то критической ситуации операторы должны максимально корректным образом исправить эту ошибку.

При этом здесь совершенно не важна скорость освоения этого интерфейса. Мы будем учить оператора столько времени, сколько понадобится: 5, 10 и даже 15 лет. Потому что цена ошибки в этом конкретном случае слишком высока. Можно сравнить этот пример с обучением военных лётчиков, поскольку пульты управления самолётом равноценно сложны и при их проектировании важно учитывать именно такие характеристики, как эффективность самой работы и отсутствие ошибок в ней.

Часто говорят, что «юзабельные интерфейсы» или хорошие интерфейсы — это простые интерфейсы, однако приведённый выше антипример показывает, что это не всегда так.
“
Хороший интерфейс — это не простой интерфейс, а тот, который максимально решает задачу в нужном контексте для нужных пользователей.
Рассмотрим банкомат. Тут важны совершенно другие характеристики. Для интерфейса банкомата важна скорость освоения и степень запоминаемости действий. Нужно, чтобы человек с первого раза сумел выполнить задачу, с которой он пришёл к банкомату. Чтобы любая бабушка, любой дедушка смогли разобраться с интерфейсом банкомата и самостоятельно выполнить необходимую ему операцию.

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

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

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

Рассмотрим типичные эргономические критерии.

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

Безошибочность показывает, насколько толерантен сам интерфейс к ошибкам и не провоцирует ли он сам по себе ошибки, что бывает достаточно часто.

Я думаю, со всеми случалось, что вы нажали не ту кнопку, потому что она выглядела не так, как вы ожидали. Вместо того, чтобы нажать на левую кнопку, вы нажимали на правую, поскольку вам второпях показалось, что это та самая, нужная кнопка.
Эффективность — это способы, которые позволяют ускорить работу. Например, «горячие клавиши», или возможность скопировать текст из интерфейса к себе в другую программу. Речь идёт не о прямой скорости работы, а именно о методах и лайфхаках, которые позволяют гораздо быстрее выполнить действие.

Моральная удовлетворённость. Здесь можно рассмотреть пример с домашним инструментом, скажем, с шуруповёртом. Если шуруповёрт сделан качественно, то с ним приятно работать. Пользуясь им, вы чувствуете, что люди, которые делали этот инструмент, всё продумали. Эти люди так подумали о вас как о пользователе шуруповёрта, что вы пользуетесь им чисто интуитивно. С плохо продуманным инструментом все будет как раз наоборот.
Скорость обучения бывает очень важна в некоторых интерфейсах. Рассмотрим такой пример со службой поддержки. Как правило, средний период работы сотрудников в компании около года, то есть сотрудники в таких компаниях часто увольняются. Логично, что для интерфейсов, с которыми люди работают внутри компании, очень важна скорость обучения. Чтобы новые сотрудники в течении одного дня полноценно освоили внутренний программный продукт и потом могли помогать тем пользователям, которые обращаются в службу поддержки.
Эргономические критерии на примере реального проекта
Однажды мы работали с компанией, являющейся лидером брокерских услуг. Передо мной стояла задача определить, какие из рассмотренных выше эргономических критериев можно улучшить и в какой степени. Мы делали интерфейс для сотрудников компании, то есть для брокеров.

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

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

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

Затем мы выявили все те микроскопические потери времени, удаление которых могло бы сделать интерфейс быстрее до 10% и предложили реализовать следующие решения:
  • Установить прямые ссылки на конкретные объекты в конкретных системах. Например, если из карточки клиента в одной программе пользователь может открыть карточку этого клиента в другой программе, мы экономим затраты времени на поиск этого клиента в других системах. Брокер сразу переходит в нужную ему карточку по прямой ссылке, ничего не нужно искать отдельно. По факту мы предложили реализовать интеграцию между всеми этими продуктами
  • Сэкономить время на просмотр основных данных по клиенту за счёт сведения основных данных в одну программу, в одно окно.
  • Предоставить возможность позвонить клиенту не со своего телефона, а со стационарного, используя функции дозвона и автодозвона.

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

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

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

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

Главный источник ошибок в брокерской деятельности неисправим ни интерфейсом, ни автоматизацией — это проведение неверной сделки (или верной сделки с неверными параметрами). Тем не менее при работе с критерием «безошибочность» есть резервы улучшения. В таблице ниже вы можете увидеть наши предложения по влиянию на этот эргономический критерий.
Эффективность

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

Для повышения эффективности были приняты следующие меры:

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

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

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

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

Начинать создавать интерфейс нужно с самого начала проекта. Иногда интерфейс отдаётся в работу ещё до написания первой строчки кода. Это идеальный вариант. Но в мире не бывает ничего идеального, поэтому дизайнеру часто приходится подключаться к созданию интерфейса, когда уже что-то работает, часть кода уже написана.
В этом случае я всегда предлагаю сначала отложить front-end (часть, связанную с интерфейсами), и пока делать back-end (часть, связанную с серверами), подбирать какие-нибудь фреймворки и выполнять другие работы, пока я проектирую интерфейс. Иногда лучше приостановить команду программистов и платить им за это деньги, нежели они уже начнут писать код, который потом это будет сложно изменить или вообще придётся выкинуть. На переделку может быть потрачено ещё больше времени и денег, чем на написание с нуля, поэтому с точки зрения бизнеса иногда выкинуть написанный код хорош даже выгоднее.

Так каков же он — идеальный цикл дизайна интерфейсов?

Цикл дизайна интерфейса

Посмотрите на цикл дизайна интерфейса. Он состоит из трёх частей:

  1. Исследование потребностей. На этом этапе нужно понять, что мы хотим делать, в том числе выявить и описать эргономические критерии, о которых мы говорили выше.
  2. Синтез решения. После исследования необходимо дизайнерски синтезировать решение: создать интерфейсы и затем внедрить их, то есть сделать так, чтобы всё запустилось и заработало именно так, как мы задумали.
  3. Внедрение интерфейсов. Если мы работаем по Agile, то можем повторять эти три этапа цикла дизайна. Например, раз в две недели провести маленькое исследование, синтез и внедрение, а на следующие две недели опять запустить такой же цикл. Когда мы создаём интерфейсы, то можем сразу же их тестировать: не просто нарисовать графический дизайн, а сделать ещё и кликабельный прототип, нанять пользователей, показать им его, и тут же получить обратную связь. Таким образом мы определяем качество наших решений ещё до внедрения системы и даже до её разработки.
Зачастую цепочки из указанных выше трёх этапов накладываются друг на друга, потому что многие вещи можно распараллелить. Исследование тоже может быть итеративным.
Выводы
Повторим ещё раз самые основные моменты, которые были освещены в этой статье.

1. Пользовательский интерфейс (UI) обеспечивает передачу информации между пользователем-человеком и программно-аппаратными компонентами компьютерной системы.

При этом UI использует лучшие черты обеих сторон и нивелирует недостатки. Например, при создании интерфейса, толерантного к человеческим ошибкам, мы добавим в интерфейс кнопку с функцией отмены (Undo). Внесение этой функции позволит сохранять версии и предоставит возможность вернуться назад к последней сохраненной версии без ошибок пользователя. Таким образом мы компенсируем возможность каких-то ошибок пользователей.
2. Дизайн интерфейсов — это специальный вид деятельности, в котором определяются целевые эргономические требования и создаётся интерфейс, соответствующий этим требованиям.

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

3. Не бывает идеальных интерфейсов для всех.

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

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

Если вы хотите научится создавать хорошие интерфейсы на практике, советую приходить на мой курс Дизайн интерфейсов для недизайнеров.

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

На курсе я на практике научу вас оценивать качество пользовательского интерфейса, а также создавать качественный интерфейс с нуля.

Дизайн интерфейсов для недизайнеров


Хотите научиться:
  • Правильно ставить задачу на дизайн интерфейсов
  • Проектировать взаимодействие человека с интерфейсом
  • Проектировать информационную архитектуру интерфейса
  • Понимать и применять принципы эффективного графического дизайна
  • Организовывать тестирование интерфейсов
  • Оценивать трудозатраты и планировать создание интерфейсов
Посмотреть программу курса
Алексей Копылов
Эксперт в сервисном дизайне
  • Более 20 лет опыта в проектировании пользовательских интерфейсов
  • Сооснователь компании UIDesign Group
  • Руководил дизайном интерфейсов в компаниях Flexis, Kaspersky Lab, Wargaming
  • Консультирует на темы картирования услуг, проектирования и анализа пользовательских интерфейсов (UX, CX)
  • Автор статей и тренингов по CJM