Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-21

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

2 <ul><li>23 авг 2019</li>

3 <li>0</li>

4 </ul><h2>Юзабилити для менеджера: памятка для быстрой проверки сайтов и прототипов</h2>

5 Рассказываем о правилах, по которым можно провести базовую проверку удобства сайта, макета или прототипа, даже если вы не разбираетесь в юзабилити.

6 vlada_maestro / shutterstock

7 Пишет про управление в Skillbox Media. Работала координатором проектов в Русском музее, писала для блога агентства CRM-маркетинга Out of Cloud.

8 В этой<a>статье</a>мы рассказали самое основное. Почитайте, чтобы лучше ориентироваться в теме.

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

10 Критерии, по которым оценивается юзабилити:

11 <ul><li>простота использования;</li>

12 <li>эффективность;</li>

13 <li>запоминаемость;</li>

14 <li>удовлетворенность;</li>

15 <li>ошибки.</li>

16 </ul>Пользователь открывает начальную страницу сайта - и сразу должен понять, о чём сайт. Что это - интернет-магазин или портфолио компании? Это должно быть очевидно при первом взгляде на главную страницу. Представьте, что вы открываете сайт как пользователь. Все ли вам понятно о его назначении?

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

18 Или так.

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

20 В UX-дизайне есть понятия паттернов F, E и Z, описывающих движения взгляда пользователя. Эти паттерны помогают понять, как пользователь изучает контент.

21 Паттерн Z - взгляд пользователя движется из левого верхнего угла, образуя букву Z. Когда контент расположен так, это сложно для восприятия.

22 Паттерны F и E - его взгляд движется из левого верхнего угла, образуя буквы F или E. Такое расположение контента проще для восприятия.

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

24 Поиск на ОзонеТребования к полю поиска:

25 <ul><li>не нужно искать;</li>

26 <li>расположено в верхней части сайта;</li>

27 <li>понятно называется;</li>

28 <li>не требует от пользователя дополнительных действий: выбора фильтра, например.</li>

29 </ul>Важная информация должна выделяться, так её будет проще воспринимать. Лучше разместить её в начале страницы, а не в конце. Это называется "Правило перевернутой пирамиды".

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

31 Так выглядит визуальная иерархия.<a>Источник</a>Если на сайте есть ссылки, проверьте, что их видно, а также понятно, куда они ведут. Если ссылки сливаются с текстом, то их сложно найти и использовать.

32 Вот пример правильного оформления ссылок.

33 Требования к ссылке:

34 <ul><li>выглядит как ссылка;</li>

35 <li>выделена цветом;</li>

36 <li>кликабельна;</li>

37 <li>названия ссылки и страницы, куда она ведет, совпадают.</li>

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

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

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

41 На нижней панели выделен раздел сайта, он совпадает с названием страницы наверху.<a>Источник</a>Все кнопки на сайте должны смотреться органично. Чтобы ими было удобно пользоваться, они не могут быть слишком маленькими. А очень большие кнопки будут отвлекать от основного контента.

42 Требования к кнопке:

43 <ul><li>выглядит как кнопка;</li>

44 <li>ее легко найти и использовать;</li>

45 <li>выделяется, но не отвлекает внимание.<a></a></li>

46 </ul>Теперь вы знаете, на что обращать внимание, когда принимаете работу у прототиписта или дизайнера. Юзабилити - это не только комплекс правил, но и <a>проведение исследований</a>, проверка гипотез и постоянные обсуждения их с командой. На проекте этим занимается дизайнер или специалист по юзабилити. Но чтобы менеджер тоже понимал, что к чему, на курсе "<a>Руководитель digital-проектов</a>" объясняют все, что нужно знать о положительном опыте пользователя.

47 - <a>Более 80 курсов со скидкой до 60%Курсы по Excel, бухгалтерии, управлению проектами, аналитике для старта карьеры. Подарок - бесплатные уроки по нейросетям. Записаться →</a>

47 + <a>Более 80 курсов со скидкой до 55%Курсы по Excel, бухгалтерии, управлению проектами, аналитике для старта карьеры. Подарок - бесплатные уроки по нейросетям. Записаться →</a>