Найти в Дзене
Чай с кофе

Основы веб-дизайна. Требования к интерфейсу

Специалист по юзабилити, доктор физических наук, основатель компании «Nielsen Norman Group» Якоб Нильсен совместно с другим исследователем, Рольфом Моличем (Rolf Molich), более четверти века назад, сформулировали десять основных принципов проектирования взаимодействия пользователя с интерфейсом, которые остаются актуальными и сегодня. Эти принципы, разработанные на основе многолетнего опыта в области юзабилити - инженерии стали правилами для взаимодействия человека и компьютера. С их помощью команды разработчиков могут сэкономить значительное количество времени на раннем этапе тестирования юзабилити, чтобы они могли направить свое внимание на более сложные задачи дизайна. Эти принципы называются эвристиками потому что они являются общими эмпирическими правилами, определяющими минимальные критерии, которым должен соответствовать интерфейс любого ПО. Первый принцип – «видимость состояния системы» (правило обратной связи). Этот принцип подразумевает информирование программой пользователя

Специалист по юзабилити, доктор физических наук, основатель компании «Nielsen Norman Group» Якоб Нильсен совместно с другим исследователем, Рольфом Моличем (Rolf Molich), более четверти века назад, сформулировали десять основных принципов проектирования взаимодействия пользователя с интерфейсом, которые остаются актуальными и сегодня. Эти принципы, разработанные на основе многолетнего опыта в области юзабилити - инженерии стали правилами для взаимодействия человека и компьютера. С их помощью команды разработчиков могут сэкономить значительное количество времени на раннем этапе тестирования юзабилити, чтобы они могли направить свое внимание на более сложные задачи дизайна.

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

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

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

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

Примеры: Сразу после того, как включается смартфон, на экране появляется информация о заряде батареи, подключении к Wi-Fi, полученных сообщениях, пропущенных звонках и многом другом; сколько времени прошло от начала процесса копирования файлов, когда будет завершено кодирование звуковой дорожки CD-диска в МРЗ-файл и т. п.

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

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

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

Примеры: скевоморфизм дизайна, то есть перенос всех деталей объектов реального мира в программное обеспечение. В самом начале внедрения смартфонов это помогло людям научиться пользоваться своими новыми спутниками через эстетику и процессы, с которыми они были знакомы раньше. Мусорная корзина на Рабочем столе Windows или Macintosh, в которую можно "бросить" ненужный файл или папку – почти хрестоматийный пример построения интерфейса на основе объектов реального мира. Да и сам способ "перетащи и брось" (Drag-and-Drop) – прекрасная иллюстрация этого принципа, абсолютно естественная операция даже для тех пользователей, кто впервые сел за компьютер.

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

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

Примеры: кнопка отмены последнего действия, на которой изображена стрелка в лево; кнопка Cancel (Отмена); нажатие кнопки Esc на клавиатуре.

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

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

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

Так как у большинства пользователей на ПК установлена Windows с её прямыми линиями, спокойными цветами, то и интерфейсные элементы должны придерживаться этой стилистике.

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

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

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

Специалисты выделяют два типа пользовательских ошибок: промахи и просчеты. Промахи – это неосознанные ошибки, вызванные невниманием.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Восьмой принцип – «эстетичный и минималистичный дизайн».

Интерфейсы не должны содержать информацию, которая неактуальна или редко нужна. Каждая лишняя единица информации в интерфейсе конкурирует с релевантными единицами информации и снижает их относительную видимость.

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

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

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

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

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

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

Хорошие сообщения об ошибках – это сообщения, которые объясняют, в чем состоит проблема и, самое главное, как ее исправить. Таким образом, хорошее сообщение об ошибке должно состоять из двух частей: 1) четкое и ясное описание ошибки и 2) подсказка – описание вариантов решения ошибки – кнопка «подробнее».

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

При описании пути решения проблемы, нужно избегать составления слишком объемных текстов, т. к. пользователи будут просто пробегать их глазами, не вникая в смысл написанного. Лучше всего составить что-то наподобие пошаговой инструкции, каждый шаг из которой составляет 1—2 предложения.

Пример: диалоговое окно сообщения об ошибке, в системе управления базами данных Microsoft Access.

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

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

Свои эвристики Якоб Нильсен разработал в 1990 году. В 1994 году он их уточнил с целью наделить их максимальной объяснительной силой.

В 2020 году прошло еще одно уточнение эвристик. Были добавлены дополнительные пояснения, примеры и ссылки.

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