Введение
Создание хорошо спроектированных интерфейсов требует понимания принципов, которые определяют взаимодействие пользователей с цифровыми продуктами. Одним из таких фундаментальных принципов стал Закон Якоба.
«Пользователи проводят больше времени на других сайтах, чем на вашем. Поэтому они предпочитают, чтобы ваш сайт работал так же, как и все другие сайты, которые они уже знают».
Закон подчеркивает, что при создании интерфейсов нужно ориентироваться на соответствующие ожидания пользователей, которые основаны на их предыдущем опыте. Ниже мы расскажем историю автора, дадим советы по применению этого закона, а также рассмотрим знакомые паттерны, которые помогут проектировать удобные и интуитивные интерфейсы.
Якоб Нильсен — Отец UX
Якоб Нильсен — исследователь, доктор наук и консультант по юзабилити, широко известен и признан как один из ведущих экспертов в области пользовательского опыта.
Родился 05.10.1957 года в Дании, г. Копенгагене. Нильсен получил докторскую степень в области взаимодействия человека с компьютером (HCI) в Техническом университете Дании, где он начал свои исследования в области юзабилити и интерфейсов.
Сотрудничал с такими компаниями, как IBM, Bellcore (теперь известная как Telcordia Technologies) и Sun Microsystems. В 1998 году он основал Nielsen Norman Group вместе с Дональдом Норманом, бывшим вице-президентом Apple Computer.
Сегодня Nielsen Norman Group — исследовательская консалтинговая компания, занимает лидирующую позицию в UX.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666be5a62d2be05c6459b57e_Frame1321318096-ezgif.com-jpg-to-webp-converter.webp)
Вклад в UX-дизайн и его влияние на современный дизайн
Якоб Нильсен сформировал основы современных методов и принципов юзабилити. Его исследования и работы оказали огромное влияние на развитие всей области и привели нас к более глубокому пониманию того, как современные пользователи взаимодействуют с цифровыми продуктами.
1. Эвристики Нильсена
«Десять эвристик юзабилити» были разработаны Нильсеном для оценки интерфейсов, а также их улучшения. Сейчас эти эвристики стали стандартом в области юзабилити, с их помощью дизайнеры создают более доступные и эффективные интерфейсы.
2. Тестирование юзабилити
Именно Нильсен популяризировал методики тестирования юзабилити, например «Тестирование с пятью пользователями». Так он продемонстрировал, что даже небольшая фокус-группа поможет выявить большинство проблем в интерфейсе.
3. Аналитика и метрики юзабилити
Нильсен развивает и продвигает методы измерения юзабилити. Например, анализ данных об использовании или метрики производительности, которые могут помочь дизайнерам оценить эффективность и удобство проектируемых интерфейсов.
4. Образование и публикации
Якобу Нильсену принадлежит большое количество книг и статей, по которым обучаются UX-дизайнеры. А книги стали классикой в области UX.
5. Закон Якоба
Один из самых популярных и известных принципов. Эта выявленная закономерность стала основой для разработки последовательных и предсказуемых пользовательских интерфейсов. Об этом законе мы и поговорим далее.
Закон Якоба
Якоб Нильсен сформулировал этот закон в 2000-х годах на основе своих многолетних наблюдений и исследований в области юзабилити и пользовательского опыта.
Формулировка и принцип закона
Формулировка: «Пользователи проводят больше времени на других сайтах, чем на вашем. Поэтому они предпочитают, чтобы ваш сайт работал так же, как и все другие сайты, которые они уже знают».
Принцип: Дизайн должен соответствовать ожиданиям пользователей, основанным на их предыдущем опыте.
Закон Якоба гласит, что пользователи при посещении вашего ресурса, будь то сайт или приложение, уже имеют определенные ожидания и устоявшиеся привычки, которые сформировались на основе их опыта взаимодействия с другими сайтами и приложениями. Пользователи не хотят учиться использовать новый интерфейс; они предпочитают, чтобы он был похож на то, что они уже знают и умеют использовать.
Вывод: Соблюдение дизайнером общепринятых стандартов и паттернов становится ключевым фактором для создания удобного и интуитивного интерфейса.
Преимущества соблюдения закона
Закон Якоба играет ключевую роль в работе UX/UI-дизайнеров, особенно начинающих, он помогает им создавать максимально доступные интерфейсы. Рассмотрим эти плюсы чуть подробнее.
1. Соответствие ожиданиям пользователей
Пользователи уже привыкли к определенным паттернам, их они и ожидают увидеть на новом ресурсе. И если эти ожидания совпадают с реальностью, то аудитории намного проще освоить интерфейс и начать выполнять нужные им задачи. Это повышает лояльность, доверие и удовлетворенность пользователей.
2. Уменьшение когнитивной нагрузки
Знакомые паттерны снижают когнитивную нагрузку на пользователей. То есть им не нужно тратить время и силы на изучение нового интерфейса, они могут сразу сконцентрироваться на выполнении своих задач. Чем проще освоить ваш продукт, тем быстрее аудитория может начать эффективно его использовать.
3. Повышение юзабилити
Данный закон способствует созданию интерфейсов с высоким уровнем юзабилити. Предсказуемые элементы дают возможность пользователям легко ориентироваться и взаимодействовать с продуктом. А это, в свою очередь, снижает количество ошибок и повышает общую эффективность интерфейса.
4. Экономия времени и ресурсов
Начинающим дизайнерам Закон Якоба помогает избежать частых ошибок и неэффективных решений. Использование проверенных устоявшихся шаблонов экономит как время, так и ресурсы.
5. Улучшение пользовательского опыта
Соблюдение Закона Якоба позволяет создавать интерфейсы, которые обеспечивают положительный пользовательский опыт. Ведь именно удовлетворенные пользователи будут возвращаться к вашему продукту, использовать его сами и рекомендовать другим.
Как применять Закон Якоба
Рассмотрим стандартные решения в дизайне, которые уже стали настолько привычны для пользователей, чтобы любые дизай-новшества вызовут недоумение и желание покинуть ресурс.
Знакомые паттерны
Примеры паттернов, которые встречаются пользователям чаще всего:
- Навигационные меню. Горизонтальные меню чаще всего располагают в верхней части страницы, а вертикальные — в левой боковой панели.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bea445774726fb8d22e9b_Frame1321318205-ezgif.com-jpg-to-webp-converter.webp)
- Фиксированные навигационные панели. Фиксированные навигационные панели или «липкое меню» остаются на месте, когда пользователь прокручивает страницу вверх или вниз, они обеспечивают постоянный доступ к основным навигационным элементам.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666beadd062d41a912b15de4_Frame1321318206-ezgif.com-jpg-to-webp-converter.webp)
- Формы входа. Поля для ввода имени пользователя и пароля с кнопками «Войти», «Регистрация» и «Забыли пароль?».
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666beb7b6743e2678b37332a_Frame1321318207-ezgif.com-jpg-to-webp-converter.webp)
- Корзины покупок. Иконка корзины привычно находится в верхнем правом углу сайта, по клику можно увидеть и отредактировать содержимое.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bec3612c813f00b497eb6_Frame1321318208-ezgif.com-jpg-to-webp-converter.webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bec6412c813f00b49c1b1_Frame1321318212-ezgif.com-jpg-to-webp-converter.webp)
- Кнопки «Поделиться», обозначение лайков и комментариев. Стандартные иконки для социальных сетей (ВК, Одноклассники, ТГ и др.) для быстрого обмена контентом.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bece9e726c7ced368014e_Frame1321318209-ezgif.com-jpg-to-webp-converter.webp)
- Поисковые поля. Строки поиска с иконкой лупы чаще всего располагают в верхней части страницы.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bed5528ba16fb751f9dac_Frame1321318210-ezgif.com-jpg-to-webp-converter.webp)
- Хлебные крошки. Хлебные крошки (breadcrumb navigation) — это навигационный элемент, который отображает путь пользователя от главной страницы до той, на которой он находится прямо сейчас. Данный паттерн помогает пользователям понять текущее местоположение и легко вернуться к предыдущему разделу.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bedae4479148e0e5f8093_Frame1321318213-ezgif.com-jpg-to-webp-converter.webp)
Интернет-магазин использует хлебные крошки для отображения категорий и подкатегорий товаров. Можно легко вернуться к листингу, чтобы продолжить поиск нужного товара. Такой паттерн может облегчить навигацию, если пользователь перешел в на страницу продукта не через листинг.
Когда пользователи видят знакомые элементы, они чувствуют себя уверенно и могут легко выполнять задачи, не обучаясь чему-то новому. Это снижает когнитивную нагрузку и повышает удовлетворенность пользователей.
Общепринятые стандарты в веб-дизайне
- Логотип в верхнем левом углу. На большинстве сайтов логотип размещен в верхнем левом углу, обычно он ведет на главную страницу.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bee5f16d3dc51303df1c7_Frame1321318211-ezgif.com-jpg-to-webp-converter.webp)
- Иконка поиска. Лупа, как правило, размещается в верхней части страницы.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bef14226c45c3360c5bfa_Frame13213182121-ezgif.com-jpg-to-webp-converter.webp)
- Бургер-меню. Значок с тремя горизонтальными линиями, под которым прячется навигационное меню. Этот паттерн очень популярен на мобильных устройствах, где пространство экрана ограничено.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bef7b200bc6a1f55d9d3c_Frame13213182131-ezgif.com-jpg-to-webp-converter.webp)
В данном примере за иконкой гамбургера прячется полный каталог.
- Стандартные иконки и кнопки. Иконка «корзина» для покупок, иконка «письмо» для почты, иконка «домик» для главной страницы и т.д.
Иконка для «корзины» может быть оформлена по-разному, но она должна выглядеть как корзина для покупок, чтобы пользователь мог ее сразу же распознать.
- Цвета и стили ссылок. Синие и (или) подчеркнутые ссылки применяются для обозначения кликабельных элементов.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bf0c10820c7d0f1c07d2d_Frame1321318215-ezgif.com-jpg-to-webp-converter.webp)
- Кнопки подтверждения. Кнопки подтверждения используются для подтверждения действий пользователя, таких как отправка формы или завершение покупки.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bf14fd208f474fdada6af_Frame1321318216-ezgif.com-jpg-to-webp-converter.webp)
- Выпадающие списки. Выпадающие списки (dropdown menus) позволяют пользователям выбирать один вариант из множества или несколько вариантов.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bf1cc1e3f0352e47bbbef_Frame1321318217-ezgif.com-jpg-to-webp-converter.webp)
Соблюдение этих шаблонов помогает создавать предсказуемые для пользователей интерфейсы, что делает использование сайта максимально удобным и комфортным.
Сбор обратной связи от пользователей
- Опросы и анкеты. Проведите опросы среди своих пользователей для получения их мнения о дизайне и функциональности интерфейса.
- Анализ поведения пользователей. Использование инструментов аналитики, чтобы отслеживать поведение пользователей на ресурсе, например, Google Analytics.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/666bf2a4fb52d2e1e2711b3f_Frame1321318218-ezgif.com-jpg-to-webp-converter.webp)
- Фидбэк через поддержку. Собирайте комментарии и жалобы, которые поступают через службу поддержки.
Проанализируйте полученные данные и выявите общие проблемы и предложения пользователей. На основе результатов вносите изменения в дизайн и функциональность сайта, чтобы улучшить его юзабилити и соответствовать ожиданиям пользователей. Постоянные обновления, которые основаны на реальной обратной связи, помогают поддерживать его актуальность и удобство.
Тестирование юзабилити
Примеры тестов и как они могут помочь улучшить соответствие ожиданиям пользователей:
- Тестирование с пятью пользователями. Этот метод Нильсена помогает выявить основные проблемы юзабилити с самыми минимальными затратами времени и ресурсов. По мнению автора даже пять пользователей могут обнаружить большинство проблем интерфейса.
- Карточные сортировки. Их используют, чтобы понять, как пользователи логически структурируют информацию. Это понимание полезно при разработке навигации и информационной архитектуры.
- Тестирование прототипов. Помогает проверить и улучшить дизайн в самом начале разработки, когда изменения вносятся с минимальными затратами.
Эти методы помогают выявлять проблемы и улучшать интерфейс, делая его более интуитивным и удобным для пользователей.
Заключение
Для UX/UI-дизайнеров Закон Якоба является важным инструментом, который помогает создавать удобные и понятные интерфейсы. Следование данному закону позволяет дизайнерам соответствовать ожиданиям пользователей, снижать когнитивную нагрузку, повышать юзабилити, экономить время и ресурсы, а также улучшать общий пользовательский опыт. Эти принципы и подходы играют ключевую роль в успешной карьере любого дизайнера, помогая им создавать продукты, которые пользователи любят и ценят.