6 added
110 removed
Original
2026-01-01
Modified
2026-02-28
1
-
<p><p>Дизайн • 14 июля 2022 • 5 мин чтения</p>
1
+
<h2>Подтвердите, что запросы отправляли вы, а не робот</h2>
2
-
<h2>Что такое юзабилити и как его улучшить</h2>
2
+
<p>Нам очень жаль, но запросы с вашего устройства похожи на автоматические. <a>Почему это могло произойти?</a></p>
3
-
<p>Если на сайте запутанная навигация и нет кнопки "В корзину", посетитель закроет страницу, а компания потеряет покупателя. Чтобы привлекать пользователей на сайт и превращать их в клиентов, нужно знать принципы и основы юзабилити. В статье расскажем, что это такое, как анализировать интерфейс и кто этим занимается.</p>
3
+
<p>Я не робот Нажмите, чтобы продолжить</p>
4
-
<ul><li><a>Что такое юзабилити</a></li>
4
+
<p><a>SmartCaptcha by Yandex Cloud</a></p>
5
-
<li><a>Основные правила и принципы юзабилити</a></li>
5
+
<p>Если у вас возникли проблемы, пожалуйста, воспользуйтесь <a>формой обратной связи</a></p>
6
-
<li><a>На что влияет юзабилити сайта</a></li>
6
+
<p>8255862728122322999:1772289383</p>
7
-
<li><a>Как анализировать юзабилити</a></li>
8
-
<li><a>Как улучшить юзабилити сайта</a></li>
9
-
<li><a>Главное о юзабилити</a></li>
10
-
</ul><h2>Что такое юзабилити</h2>
11
-
<p>Юзабилити - это показатель того, насколько легко и удобно пользователю взаимодействовать с интерфейсом сайта. С английского usability так и переводится - удобство использования.</p>
12
-
<p>Когда человек попадает на сайт, он должен легко сориентироваться, быстро найти нужную информацию и сделать то, чего ждёт владелец страницы: купить товар, оставить заявку на расчёт, подписаться на рассылку или прочитать статью.</p>
13
-
<p>На сайте слева краткое описание товара доступно сразу после поиска. Тут же есть информация о доставке и наличии в магазинах</p>
14
-
<p>А на этом сайте после поиска открываются название, цена и кнопка "Купить". Чтобы узнать подробности о товаре, придётся открыть карточку, а информация о доставке есть только в верхнем меню</p>
15
-
<p>Чем больше кнопок нужно нажать пользователю, тем выше вероятность, что он уйдёт на другой сайт, где проще купить соковыжималку или зарегистрироваться на вебинар.</p>
16
-
<p>Здесь от выбора до покупки буквально три шага: ввести телефон, выбрать способ получения и вариант оплаты</p>
17
-
<p>На этом сайте сначала нужно зайти в "Корзину" и кликнуть "Оформить заказ", а затем заполнить поля в четырёх разделах</p>
18
-
<p>Кто такой дизайнер интерфейсов и как им стать, чтобы менять мир</p>
19
-
<a></a><h2>Основные правила и принципы юзабилити</h2>
20
-
<p>Чтобы сайт был удобным и приводил, а не уводил клиентов, дизайнеры интерфейсов следуют правилам юзабилити сайта. Их сформулировал в 1994 году Якоб Нильсен - всемирно известный консультант по UX. Получилось 10 принципов, которые применяют дизайнеры, когда разрабатывают сайты и мобильные приложения. Принципы юзабилити Якоба Нильсена - базовое руководство для всех, кто создаёт или совершенствует продукт.</p>
21
-
<p>Главная цель этих правил - сделать так, чтобы пользователю на сайте было удобно, понятно, спокойно. В этом случае он купит товар здесь и вернётся сюда же в следующий раз. Поэтому интерфейс с хорошим юзабилити должен:</p>
22
-
<p>1. Информировать пользователя о состоянии системы.</p>
23
-
<p>Посетитель сайта всегда должен понимать, что происходит на странице сейчас и что будет потом. Это правило часто нарушают интернет-магазины, когда не сообщают клиенту о событиях. А заказ точно приняли? Прошёл ли платёж? Когда будет доставка?</p>
24
-
<p>Покупатель, особенно если он на сайте впервые, переживает - точно ли он всё правильно сделал и не потерял ли деньги. При грамотном юзабилити интерфейса каждый шаг клиента отображается на экране.</p>
25
-
<p>Заказ оформлен, но есть ли товар в наличии, сколько ждать звонка и когда хотя бы примерно будет доставка - непонятно</p>
26
-
<p>2. Говорить на языке пользователя.</p>
27
-
<p>Вместо терминов стоит использовать простые слова, понятные любому посетителю сайта. А ещё надо рассказывать не о функциях продукта или услуги, а о преимуществах их использования. Например, в описании стелек перечислены их "возможности", но нет ничего о том, чем они хороши для покупателя.</p>
28
-
<p>Из этого описания непонятно, что такое "зональная поддержка свода стопы и пятки" и какие преимущества у сетчатой подкладки</p>
29
-
<p>А вот в описании ботинок уже есть преимущества, например: "Язычок с сильфоном предотвращает попадание мусора"</p>
30
-
<p>3. Предоставлять свободу и контролировать.</p>
31
-
<p>Пользователи на сайте часто вводят неверные данные или нажимают не ту кнопку. Хорошо, если в системе при разработке юзабилити был предусмотрен "аварийный выход", когда человек может вернуться на шаг назад и исправить ошибку.</p>
32
-
<p>Если пользователь ошибся и выбрал не тот пункт выдачи, он может вернуться на предыдущую страницу со списком. Без этой кнопки, через "Назад" в браузере, сайт переводит в "Корзину", и приходится оформлять заказ сначала</p>
33
-
<p>4. Следовать стандартам</p>
34
-
<p>Пользователи уже привыкли к тому, что происходит на сайте в зависимости от их действий, и к расположению элементов навигации. Например, когда человек заходит на сайт, он ожидает увидеть строку поиска вверху, каталог товаров слева или вверху, а "Корзину" - в правом верхнем углу. Если эти элементы вопреки юзабилити расположить в других местах, пользователь не будет тратить время на поиск и уйдёт со страницы.</p>
35
-
<p>На сайте известного онлайн-гипермаркета "Корзина" на привычном месте: вверху справа</p>
36
-
<p>В этом интернет-магазине "Корзину" разместили нестандартно: слева</p>
37
-
<p>А здесь "Корзины" нет вообще</p>
38
-
<p>Обычно пользователи ошибаются из-за невнимательности или непонимания того, что нужно делать. Чтобы избежать такой ситуации, дизайнер при разработке юзабилити облегчает задачу посетителю сайта, например, настраивает автоматическое отображение правильного формата телефона.</p>
39
-
<p>Покупателю надо ввести только цифры и не задумываться о том, нужны между ними пробелы или дефисы</p>
40
-
<p>6. Давать возможность распознавать, а не запоминать.</p>
41
-
<p>Чем больше данных о товаре или услуге видит пользователь в один момент, тем выше шанс, что он останется на сайте. Например, интернет-магазины с хорошим юзабилити размещают рядом с фото товара его описание, краткие характеристики, цену, условия доставки и оплаты.</p>
42
-
<p>Рядом с фото и названием товара есть информация о вариантах, сроках и стоимости доставки, условиях рассрочки</p>
43
-
<p>7. Быть гибким и эффективным.</p>
44
-
<p>Любой интерфейс должен быть удобен и начинающему, и опытному пользователю. Простой пример - непрерывный набор на клавиатуре смартфона. Опытный пользователь может использовать эту функцию, и в то же время она не мешает начинающему: можно набирать буквы по одной.</p>
45
-
<p>8. Использовать простой и понятный дизайн.</p>
46
-
<p>Минималистичный интерфейс не отвлекает от главного - поиска информации, оформления заказа или другого целевого действия. Минималистичный не значит примитивный. Главное - избавиться от лишних элементов, множества баннеров, всплывающих окон и других деталей, которые перегружают интерфейс и раздражают пользователя.</p>
47
-
<p>Минималистичный дизайн сайта агентства контент-маркетинга</p>
48
-
<p>На этой странице компании по разработке сайтов непонятно, куда смотреть, где здесь важное, а где - второстепенное</p>
49
-
<p>9. Помогать пользователям находить и исправлять ошибки.</p>
50
-
<p>Если что-то пошло не так, посетитель сайта должен об этом узнать. С точки зрения юзабилити, хорошо, если сообщение об ошибке будет понятным и наглядным. Простой пример: если в форме не заполнить обязательные поля, они подсвечиваются красным.</p>
51
-
<p>Попытались отправить форму с незаполненными полями, но ничего не вышло: система предупредила об обязательных разделах</p>
52
-
<p>10. Подсказывать и направлять.</p>
53
-
<p>Сайт с хорошим юзабилити не должен оставлять нового пользователя один на один с интерфейсом. Справочная информация и подсказки должны быть короткими и содержать точные руководства к действию.</p>
54
-
<p>Когда впервые заходишь на сайт-тренажёр по изучению иностранных языков, появляются подсказки, которые рассказывают о возможностях сервиса и помогают пользователю ориентироваться</p>
55
-
<h2>На что влияет юзабилити сайта</h2>
56
-
<p>Цель любого бизнеса - получать прибыль. Если в юзабилити много ошибок, на сайт будет приходить мало клиентов, поэтому и прибыль будет невысокой. С коммерческой точки зрения юзабилити сайта влияет на доход бизнеса и узнаваемость бренда, вовлечение, лояльность пользователей и их органический рост. Разберём на примерах.</p>
57
-
<ol><li>Ранжирование сайта.</li>
58
-
</ol><p>Когда пользователи заходят на сайт, не находят нужного и сразу покидают страницу, это влияет на поведенческие факторы, или показатели того, что посетители делают на сайте: какие разделы открывают, сколько времени проводят на странице.</p>
59
-
<p>Для примера ввели запрос "купить кроссовки конверс" и открыли два сайта: самый первый в выдаче и с четвёртой страницы. На первом сразу оказались в нужном разделе с удобным фильтром, чтобы быстро найти нужные модели.</p>
60
-
<p>На другом сайте - только список категорий и полотно с рекомендуемыми моделями. На обеих страницах - минималистичный дизайн, но на второй нет фильтров, поэтому велика вероятность, что пользователь не будет тратить время на поиски и закроет страницу.</p>
61
-
<p>Если таких "отказов" будет много, поисковые системы поймут, что сайт не интересен, и будут понижать его место в результатах выдачи: показывать не в первой десятке, а на 3-5-й странице. Чем ниже страница в выдаче, тем меньше шансов, что на неё попадёт следующий посетитель, а значит, снижаются и шансы на продажу. Поэтому всегда важно проводить анализ юзабилити своего сайта.</p>
62
-
<ol><li>Продажи.</li>
63
-
</ol><p>Если посетителю на сайте некомфортно, сложно найти нужную информацию или сделать заказ, он закроет страницу и уйдёт на более понятный сайт, а бизнес потеряет клиента.</p>
64
-
<p>Пробуем заказать кеды. На первом сайте можно сразу найти нужный размер и перейти на страницу товара. Быстрый заказ не подводит: в магазине его можно забрать уже сегодня.</p>
65
-
<p>На втором сайте предлагают добавить модель в "Корзину" или купить в один клик. Выбираем второй вариант. На следующей странице выбираем нужный размер и нажимаем "Заказать в один клик". Затем снова приходится выбирать размер, вводить номер телефона и ждать звонка оператора - это долго, неудобно для пользователя и снижает шансы на покупку.</p>
66
-
<p>Впечатления пользователя о процессе покупки влияют на то, что он расскажет о сайте или магазине другим. Скорее всего, первый сайт из примера вызовет больше положительных эмоций и отзывов, а о втором останутся нейтральные или негативные впечатления.</p>
67
-
<p>Если соблюдать правила и требования юзабилити, заработает "сарафанное радио" - о бизнесе узнает больше людей. Это подтверждает<a>статистика</a>: 23% клиентов, у которых был положительный опыт взаимодействия с сайтом, расскажут о нём 10 и более людям. При этом 62% клиентов отмечают, что делятся негативным опытом использования сайта с другими людьми.</p>
68
-
<p>Получается, чтобы привлекать и удерживать клиентов, бизнесу нужно не только вкладываться в рекламу и продвижение, но и постоянно проводить анализ юзабилити сайта и тестировать разные варианты.</p>
69
-
<p>Обычно это делает дизайнер интерфейсов. На<a>курсе дизайнера интерфейсов</a>в Яндекс Практикуме мы учим студентов изучать целевую аудиторию, создавать визуальную часть сайтов, продумывать пользовательские сценарии, делать интерфейс понятным, а ещё тестировать свои гипотезы и решения по юзабилити сайта.</p>
70
-
<p>Станьте дизайнером интерфейсов с нуля</p>
71
-
<p>Освойте профессию с нуля за 9 месяцев. Будет много практики на реальных проектах, чтобы вы могли сразу стартовать в IT.</p>
72
-
<p>● 8+ проектов для портфолио; ● помощь с поиском работы до 7 месяцев после выпуска; ● приглашения на собеседования чаще на 38% и зарплата выше на 9%*</p>
73
-
<h2>Как анализировать юзабилити</h2>
74
-
<p>Для анализа юзабилити сайта дизайнеры интерфейсов используют несколько способов. Обычно сначала оценивают сайт на соответствие правилам Нильсена: как расположены элементы, легко ли их найти, можно ли исправить ошибки.</p>
75
-
<p>На следующем этапе подключают различные сервисы. Например, Вебвизор в Яндекс Метрике нужен для проверки юзабилити сайта целиком или его отдельных страниц. Сервис находит ошибки в дизайне интерфейса и отслеживает поведение пользователей: движения мыши, клики на кнопки, прокрутку страниц.</p>
76
-
<p>Красная зона на карте скроллинга показывает, где посетители сайта находятся дольше всего</p>
77
-
<p>Затем проводят качественное и количественное исследование юзабилити с пользователями.</p>
78
-
<p>Качественное исследование</p>
79
-
<p>Помогает выявить потребности пользователей, узнать, понятны ли интерфейс и навигация сайта.<a>По мнению Нильсена</a>, чтобы выявить основные проблемы в юзабилити, достаточно пообщаться с пятью пользователями. Качественным тестированием руководит модератор: он напрямую общается с респондентами, следит за их действиями и реакциями. Исследование юзабилити проводят по такому алгоритму:</p>
80
-
<ol><li>Создают легенду, чтобы объяснить пользователю суть тестирования. Например: "Вы на сайте нового магазина фермерских продуктов. Здесь большой ассортимент, цены ниже, чем у других продавцов, а доставить могут на следующий день. Вы заинтересовались и решили сделать заказ".</li>
81
-
<li>Прописывают сценарий тестирования, чтобы пользователь "вошёл в роль" и выполнил задания. Например: "Вам нужно купить мясо, молоко, овощи и фрукты. Как вы будете это делать? Сделайте и прокомментируйте каждый шаг".</li>
82
-
<li>Задают уточняющие вопросы, чтобы узнать, какие впечатления оставил процесс. Например: "С какими заданиями было сложно справиться, а какие не вызвали затруднений?".</li>
83
-
</ol><p>Количественное исследование</p>
84
-
<p>Нужно, чтобы понять, чего в целом ожидают пользователи от продукта, с какими проблемами сталкиваются чаще всего. Чтобы получить объективную информацию, количественное тестирование проводят с большим количеством респондентов. Здесь не нужен модератор, а пользователь заранее получает легенду и сценарий. Он вслух комментирует свои действия и записывает их на видео. Затем специалисты анализируют каждое видео и обрабатывают результаты.</p>
85
-
<p>Тестирование и оценка юзабилити помогают выявить три важных момента:</p>
86
-
<ol><li>Определить барьеры, которые мешают пользователям достичь конкретной цели, например купить на сайте стиральную машину.</li>
87
-
<li>Понять, что нужно сделать, чтобы улучшить юзабилити, например отказаться от всплывающих окон или сократить форму обратной связи.</li>
88
-
<li>Проанализировать поведение и предпочтения пользователей, например выяснить, что посетителям больше нравятся синие, а не красные кнопки "Купить".</li>
89
-
</ol><p>Информацию, которую получают во время тестирования, анализируют и переходят к следующему этапу - вносят изменения в интерфейс.</p>
90
-
<p>Освойте UX-исследования для дизайнеров за 4 месяца</p>
91
-
<p>Научитесь понимать сценарии поведения пользователей, работать с гипотезами и исследованиями. Сможете практиковаться на своём проекте.</p>
92
-
<h2>Как улучшить юзабилити сайта</h2>
93
-
<p>После того как дизайнер нашёл проблемы в интерфейсе, он создаёт прототип нового сайта с учётом изменений. Затем разработчики вносят правки и запускают сервис. Через какое-то время ещё раз проводят улучшение юзабилити сайта и снова вносят изменения. Так происходит потому, что со временем совершенствуется продукт, появляются новые пользователи и новые конкуренты, а значит, интерфейс нужно адаптировать с учётом этих изменений.</p>
94
-
<p>Тестирование и анализ юзабилити помогают понять, что нужно исправить в интерфейсе и работе сайта, чтобы удерживать пользователей и превращать их в клиентов. Чаще всего требуется:</p>
95
-
<p><b>Уменьшить время загрузки страниц.</b>В идеале страница должна открываться за полсекунды, оптимально - за 2-3 секунды. Если пользователь тратит больше времени, велика вероятность, что он вообще закроет сайт.</p>
96
-
<p><b>Изменить дизайн.</b>Лаконичное оформление не раздражает и не отвлекает пользователя от покупки или другого целевого действия.</p>
97
-
<p><b>Адаптировать дизайн для мобильных устройств.</b>67% пользователей заходят в интернет с мобильных устройств. Сайт, не адаптированный под смартфоны, быстро закроют. Проверять, как выглядят страницы на мобильных устройствах, удобно на сервисе Google Mobile Friendly.</p>
98
-
<p><b>Изменить навигацию.</b>Чем быстрее пользователь находит нужную информацию, тем выше вероятность, что он останется на сайте. Если в ходе тестирования юзабилити выявили проблемы с навигацией, их устраняют.</p>
99
-
<p><b>Упростить процесс покупки.</b>Заполнение длинной формы регистрации, подтверждение по почте или СМС повышают риски того, что пользователь не захочет оставлять свои данные и закроет сайт, чтобы найти простое и быстрое решение.</p>
100
-
<h2>Главное о юзабилити</h2>
101
-
<p>● Юзабилити - показатель того, насколько удобно посетителям пользоваться сайтом: находить информацию, регистрироваться или делать заказ.</p>
102
-
<p>● Сайты с высоким показателем хорошо ранжируются, приносят больше продаж, влияют на репутацию бизнеса.</p>
103
-
<p>● Чтобы проанализировать юзабилити сайта, руководствуются принципами Нильсена, проводят качественные и количественные тестирования с участием пользователей.</p>
104
-
<p>● Анализировать и улучшать удобство использования сайта можно на разных этапах: чтобы оценить поведение и предпочтения пользователей, когда дизайнер разрабатывает интерфейс, появляется новый продукт или целевая аудитория.</p>
105
-
<p>Наставник на факультете дизайна интерфейсов, старший продуктовый дизайнер в StudyFree</p>
106
-
<h2>Подпишитесь на наш ежемесячный дайджест статей - а мы подарим вам полезную книгу про обучение!</h2>
107
-
<p>Как сделать логотип: основные правила</p>
108
-
<p>Зачем дизайнеру нужен мудборд и как его составить</p>
109
-
<p>Дарим 1500 баллов Плюса за покупку курса и новогоднее обещание себе - до 15 января.</p>
110
-
</p>