Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>11 мар 2022</li>

3 <li>0</li>

4 </ul>Показываем, как сделать сайт удобнее на 146%.

5 Иллюстрация: Polina Vari для Skillbox Media

6 UX/UI- и веб-дизайнер. Делает сложные вещи простыми и пишет об этом.

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

8 В нашем гайде:

9 <ul><li><a>как улучшить навигацию</a>;</li>

10 <li><a>как правильно расположить плавающие элементы</a>;</li>

11 <li><a>зачем использовать стрелки</a>;</li>

12 <li><a>что можно поправить в меню</a>;</li>

13 <li><a>о важном свойстве форм</a>и <a>как помочь при заполнении форм</a>;</li>

14 <li><a>какие использовать иконки</a>;</li>

15 <li><a>как сделать кнопки правильно</a>;</li>

16 <li><a>что мешает пользователю сделать правильный выбор</a>;</li>

17 <li><a>какие возможности скрывают служебные страницы</a>;</li>

18 <li><a>как сделать удобнее страницы с большим объёмом текста</a>;</li>

19 <li><a>почему контактам нужно уделить особое внимание</a>.</li>

20 </ul>Дизайн любого сайта или приложения можно описать через термины UX/UI. UI‑дизайн - это создание, собственно, оформления интерфейса, с которым будет взаимодействовать пользователь. И с этим у большинства современных сайтов нет проблем.

21 UX, или User Experience, - это одна из самых важных составляющих современного сайта: UX определяет удобство интерфейса при использовании. Другими словами, каким бы красивым и уникальным ни был сайт, как бы ни были расписаны преимущества товара или услуги, если сайт неудобен - пользователи закроют его и уйдут к конкурентам.

22 Гонясь за уникальностью, многие стремятся сделать сайт максимально необычным, но при этом UX приносится в жертву. Поэтому в первую очередь нужно продумать юзабилити сайта, а уже потом - разрабатывать визуальную концепцию.

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

24 Немного статистики:

25 <ul><li>Компания Anthropologie, занимающаяся продажей одежды, подредактировала каталог по принципам UX и увеличила продажи на 24%.</li>

26 <li>Консалтинговая фирма GFK сделала более удобной кнопку "Купить" и получила дополнительно 500 млн прибыли в год.</li>

27 <li>Bank of America изменил форму регистрации и увеличил количество зарегистрированных пользователей на 45%.</li>

28 </ul>Опыт этих мировых компаний показывает, как даже незначительные изменения в UX уже готового сайта влияют на эффективность взаимодействия с ним.

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

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

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

32 На сайте Burger King в меню цветом подсвечен тот раздел каталога, в котором находится пользовательСкриншот:<a>burgerking.ru</a>Добавьте "хлебные крошки" - элемент интерфейса, показывающий порядок разделов, по которым пользователь дошёл до конечной страницы. Каждый элемент "хлебных крошек" должен быть кликабельным - то есть пользователь может по клику перейти на любой уровень цепочки. В мобильной версии или приложении для экономии места обычно указывают только название предшествующей страницы, через которое пользователь может попасть в каталог уровнем выше.

33 В магазине "Яндекс.Маркет" по "хлебным крошкам" пользователь может вернуться в каталог марки, раздел фотокамер или же в общий каталог аудио- и видеотехникиСкриншот:<a>market.yandex.ru</a>На экране смартфона показывается только предыдущая локация в каталоге, откуда пользователь также может подняться на уровень вышеСкриншот: приложение "Яндекс.Маркет"Плавающие элементы - удобный инструмент навигации: меню, кнопки соцсетей, окно диалога с оператором всегда перед глазами пользователя - остаётся только кликнуть по ним.

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

35 Здесь не бывает "немного неудобно" или "если подвинуть, то всё видно": такое отношение - прямой путь к потере пользователя. Если отказаться от плавающего элемента невозможно - лучше его зафиксировать. И проверьте конверсию из всплывающих форм и чатов. Может, они не нужны вообще?

36 На этом сайте юридической фирмы окно чата с консультантом перекрывает важную часть контента. При переходе по разделам его приходится сворачивать каждый разСкриншот:<a>pravovik24.ru</a>Магазин IKEA расположил вызов окна общения с консультантом в левой части экрана, где оно не перегораживает контент, а разворачивается только если на него нажатьСкриншот:<a>ikea.com</a>Многих сильно раздражает, когда в момент неспешного сёрфинга по сайту вдруг появляется окно с предложением пообщаться с оператором или, чаще всего, с чат-ботом - не разворачивайте диалог без соответствующего действия со стороны пользователя.

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

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

39 Третьяковская галерея публикует очень подробные описания к выставкам. Вверх страницы можно вернуться, просто нажав на стрелочку в правом нижнем углу экранаСкриншот:<a>tretyakovgallery.ru</a>Telegram также использует стрелочку: она позволяет спуститься вниз к непрочитанным сообщениям в одно нажатиеСкриншот: Skillbox MediaДля последовательных страниц или для страниц с несколькими уровнями вложенности удобны стрелки "Назад" и "Вперёд". Они не занимают много места, их очень просто внедрить, но они значительно упрощают навигацию по сайту.

40 На сайте JAMI Group стрелочки вправо и влево помогают быстро листать обширный список клиентов дизайн-студииСкрин:<a>jami.ru</a>Меню - один из важнейших элементов сайта. Иногда сайт растёт, но структура меню на нём не меняется - просто добавляются новые пункты. В длинных меню пользователь может просто потеряться и, бросив искать нужное, уйти с сайта. Взгляните на меню глазами человека, не знакомого с вашим сайтом и продуктом. Действительно ли оно удобно?

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

42 В интернет-магазине немецкого производителя Braun в верхнем меню расположена информация о работе магазина, а в нижнем - каталог товаровСкриншот:<a>braun-russia.ru</a>Альтернативный вариант: используйте многоуровневые списки, если ваш сайт имеет сложную структуру. Для этого подумайте, как вы можете разделить все пункты меню по категориям. Кстати, наименее важные пункты вы можете переместить в подвал сайта.

43 Сайт Sneakerhead использует многоуровневое меню в верхней части - так, например, при наведении мыши на пункт "Бренды" показываются сразу все бренды, представленные в магазине. В нижней части сайта продублированы основные пункты и добавлены те, которые имеют меньшую значимость для продажСкриншот:<a>sneakerhead.ru</a>Сайт Sneakerhead использует многоуровневое меню в верхней части - так, например, при наведении мыши на пункт "Бренды" показываются сразу все бренды, представленные в магазине. В нижней части сайта продублированы основные пункты и добавлены те, которые имеют меньшую значимость для продажСкриншот:<a>sneakerhead.ru</a>Позаботьтесь о том, чтобы при работе с сайтом пользователю не пришлось повторять те действия, которые он уже однажды совершал.

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

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

46 Удобство заполнения форм - ещё один плюсик в карму вашей компании.

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

48 При оформлении карты на сайте Сбербанка в форме сразу показано, как верно заполнить поляСкриншот:<a>sberbank.ru</a>Оставьте сложность и вычурность форм для конкурсных сайтов. Обычные пользователи ценят простоту.Ко многим сценариям и обозначениям пользователи уже привыкли, и если вы, например, разместите вместо значка корзины коробку или бантик - то они просто не поймут, что к чему. Недоумение при использовании сайта - прямой путь к вашим конкурентам.

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

50 Если бы это не был магазин для фанатов "Гарри Поттера", то догадаться о том, что сундук в правом углу - корзина, получилось бы не сразуСкриншот:<a>harrypottershop.co.uk</a>Важно помнить, что общепринятая символика тоже устаревает. Например, популярная иконка дискеты, которая обозначает сохранение, всё чаще уступает место другим символам. С этим даже была связана забавная история - один из пользователей Twitter однажды задал вопрос, почему иконка "Сохранить" в Word - это вендинговый автомат? Кстати, Microsoft довольно консервативен, и эта иконка до сих пор не поменялась.

51 В верхней строке Microsoft Word находится розовая иконка сохранения файла в форме дискеты. Дискеты перестали использовать ещё в начале двухтысячных, и многим даже не знаком этот предметИзображение: Wikimedia CommonsК таким же отмирающим значкам можно отнести иконки с телефонным аппаратом с трубкой, с "пузатым" монитором или с фотоплёнкой, перфорированной по краям.

52 Проверьте, что кнопки имеют чётко различимое состояние:

53 <ul><li>нормальное состояние;</li>

54 <li>изменение при наведении мыши;</li>

55 <li>нажатое состояние;</li>

56 <li>неактивная кнопка;</li>

57 <li>кнопка в фокусе (используется при навигации с помощью клавиатуры).</li>

58 </ul>Как правило, это показывается цветом, подложкой или обводкой. Разница должна быть заметной. Если активную кнопку обозначить синим цветом, а неактивную - таким же, но лишь на толику светлее, пользователь может не заметить разницы. Современная вёрстка позволяет экспериментировать не только с цветом, но и прозрачностью кнопки, делать свечение или отбрасывать тень.

59 Три состояния кнопки на сайте adidas.ru: нормальное состояние (верхнее), при наведении мыши (среднее) и нажатое (нижнее)Скриншот:<a>adidas.ru</a>Популярная механика взаимодействия с кнопкой при заполнении формы - оставлять её неактивной, пока все поля не заполнены. Как только пользователь вносит данные в последнее поле, кнопка меняет цвет на яркий - теперь она кликабельна. Остальные состояния кнопки привязаны только к положению курсора и реакции на клик.

60 Если форма не заполнена, кнопка "Продолжить" в кинотеатре ivi.ru неактивна и полупрозрачнаСкриншот:<a>ivi.ru</a>Как делать разные состояния кнопок в Figma, читайте<a>в нашем гайде</a>.

61 Неоднозначные формулировки или значки при непродуманном UX сбивают с толку и делают работу с сайтом неэффективной.

62 Важна не только графика, но и UX-тексты - они не терпят путаницы. Например, если пользователю нужно что-то удалить или отменить, то подтверждение действия отмены не должно быть созвучно с закрытием диалогового окна. Беспроигрышный вариант - задавать в диалоговом окне вопрос и давать выбор "Да" или "Нет".

63 Неудачный UX-текст в прошлой версий iOSСкриншот: AppleЕсли вы используете кнопки-свитчеры, показывайте дополнительно цветом или прозрачностью, включён свитчер или нет.

64 На сайте admitad.ru при предложении сохранить куки возникает путаница: ползунок находится слева, что чаще всего означает положение "выключено", а цвет ползунка - зелёный, что соответствует положению "включено".Скриншот:<a>admitad.com</a>Служебные страницы указывают на возникающие при работе с сайтом непредвиденные ситуации: неполадки на сайте, несуществующие страницы или отсутствие результатов поиска. Вы можете не просто сообщать пользователям об ошибке, а использовать эти страницы с пользой, например, чтобы завоевать доверие, продать что-нибудь или помочь пользователю сделать выбор. Например:

65 <ul><li>ошибка 404 (страница не найдена): сообщите, что такой страницы не существует и предложите пользователю перейти по ссылке на главную или в какой-то интересный раздел;</li>

66 <li>ошибка 503 (сервис недоступен): выразите сожаление, что на сервисе ведутся работы и напишите, когда примерно они закончатся;</li>

67 <li>ошибка 403 (доступ запрещён): посоветуйте зайти в другие разделы сайта или зарегистрироваться;</li>

68 <li>а если желаемый товар не найден - предложите пользователю просмотреть похожие или популярные, добавив ссылку на них.</li>

69 </ul>Понятно, что сообщение об ошибке вызывает у пользователя негативные эмоции. Поэтому можно попробовать сгладить впечатление, использовав юмор.

70 Рекламное агентство "Восход" предлагает не волноваться понапрасну и автоматически перебрасывает на главную страницуСкриншот:<a>voskhod.agency</a>У "Яндекса" решение практичное - он предлагает воспользоваться одним из своих сервисовСкриншот:<a>yandex.ru</a>Дизайнер Эль Хаким из Швеции подошёл к решению страницы 404 творческиСкриншот:<a>hakim.se</a>Как известно из психологии зрительного восприятия, наш мозг плохо справляется с большими объёмами текста на экране монитора. Если сократить количество информации никак нельзя - используйте дропдауны.

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

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

73 Дизайнер Стефан Загмайстер использует дропдауны для раздела "Вопросы и ответы"Скриншот:<a>sagmeister.com</a>Если вы решили использовать дропдауны лишь для части текста, вынесите в начало самую важную или интересную информацию, чтобы у пользователя было желание развернуть и прочитать дальше.

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

75 В случае с дропдаунами этому принципу нужно уделить особое внимание, выверив каждое слово в начале.

76 Указание способов связи - это не только удобство для пользователя, но и доверие. Поэтому ваши контактные данные должно быть легко найти.

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

78 <ul><li>Email - повышает доверие к вам, да и пользователи электронной почты ещё остались.</li>

79 <li>Мессенджеры - будет достаточно Telegram и WhatsApp.</li>

80 <li>Социальные сети - не забудьте, что они должны быть действующими.</li>

81 <li>Форма ввода номера телефона для тех, кто предпочитает, чтобы звонили ему.</li>

82 </ul>Контактная информация в шапке сайта интернет-магазина "Лисапед" сразу повышает доверие к магазину - продавцы готовы проконсультировать по любому из каналов связиСкриншот:<a>lisaped.ru</a>Пользователи реже связываются с компанией через социальные сети, нежели мессенджеры, но ссылки на странице в соцсетях хорошо работают как имиджевый элемент. Если контент постоянно обновляется, это означает, что компания "живая".

83 Если пользователь так и не смог найти ваши контакты, он просто может решить отказаться от услуг и отправиться к конкуренту.

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

85 А о более сложных приёмах UX, которые закладываются ещё на этапе проектирования, мы расскажем в следующих статьях.

86 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>