Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Witget - это сервис для повышения конверсии и продаж сайта.
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
31
Эбиа

Эбиа

www.ebia.ru

16
Enlite

Enlite

enlited.ru

16
Amarket

Amarket

amarket.io

13
likearea

likearea

smm.li

12
RockinRobin

RockinRobin

www.rockinrobin.co

11
Perezvoni.com

Perezvoni.com

perezvoni.com

10
Cookiezz

Cookiezz

cookiezz.com.ua

10
Битрикс24

Битрикс24

www.bitrix24.ru

10
MuWID

MuWID

muwid.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Чек-лист по юзабилити сайта

2 162 8 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Бесконечны две вещи: вселенная и скроллинг на твоем с***м лендинге. Хотя насчет вселенной я не уверен (с)))

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

Внеш­ний вид сайтаb_57a084134c086.jpg

  • Про­верь­те, со­от­вет­ству­ет ли струк­ту­ра сайта цели, ко­то­рую вы ста­ви­те перед ним.
  • Упо­ря­дочь­те эле­мен­ты стра­ниц.Ис­поль­зуй­те свет­лый фон.
  • Не пе­ре­бор­щи­те с гра­фи­кой.
  • Рас­по­ла­гай­те кон­такт­ную ин­фор­ма­цию в пра­вом верх­нем углу стра­ни­цы.
  • Раз­бав­ляй­те текст изоб­ра­же­ни­я­ми.
  • Не по­ме­щай­те в на­ча­ле ста­тьи ссыл­ку, ве­ду­щую на дру­гой ре­сурс.
  • От­кры­вай­те новую ссыл­ку в новой вклад­ке.
  • Пра­виль­но на­строй­те время и место по­ка­за плагинов ви­дже­тов на сайте.
  • Не за­кры­вай­те гра­фи­кой зна­чи­мые эле­мен­ты сайта при скро­ле.
  • Четко вы­де­ляй­те ги­перс­сыл­ки.
  • До­бавь­те поле по­мо­щи поль­зо­ва­те­лю сайта.
  • До­бавь­те от­зы­вы поль­зо­ва­те­лей на сайт. Ста­тья про от­зы­вы тут.
  • Рас­по­ла­гай­те лого сайта в верх­ней части каж­дой стра­ни­цы.
  • Вы­рав­ни­вай­те со­дер­жи­мое стра­ни­цы.
  • Про­те­сти­руй­те, какое рас­по­ло­же­ние меню — го­ри­зон­таль­ное или вер­ти­каль­ное -по­дой­дет для ва­ше­го сайта.
  • Рас­по­ла­гай­те поле ре­ги­стра­ции в пра­вой верх­ней части экра­на.

b_57a082b30e08c.jpgНавигация сайта

  • Располагайте меню сайта в верхней части страницы.
  • Используйте привычные названия пунктов меню и разделов сайта.
  • Фиксируйте выпадающее меню при наведении курсора мыши.
  • Оптимизируйте количество пунктов меню:4-6 достаточно.
  • Поместите поле поиска на каждой странице.
  • Сделайте выпадающие блоки меню контрастными.
  • Проверьте скорость загрузки страниц, идеально 2-5 секунд.
  • Поместите поле возврата на главную страницу в верхней части экрана.
  • Добавьте стрелку «вверх» при долгой прокрутке страницы вниз.
  • Логотип — ссылка на главную страницу.

Контентb_57a082e2cea87.jpg

  • Используйте не только тексты, но и видеоконтент и изображения.
  • Разделяйте текст абзацами.
  • Используйте подзаголовки.
  • Используйте цитаты, добавляйте списки.
  • Используйте ключевые слова.
  • Используйте ясный призыв к действию. Про CTA написано здесь.
  • Сделайте важную информацию легко доступной на каждой странице сайта.
  • Располагайте связанные элементы рядом друг с другом, например, пункты «Доставка» и «Корзина».
  • Используйте единый шрифт на всех страницах.
  • Не используйте цвет ссылок для выделения текста. Лучше выделяйте жирным.
  • Округляйте цифры до читабельных, если точная цифра не принципиальна.
  • Упрощайте текст Call to Action.
  • Прописывайте атрибуты Alt для изображений.
  • Используйте подводки к статьям, если это блог.
  • Пишите описания к товарам понятным языком.

Альбина Акбарова, редактор Witget.com

+6
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Андрей Волков
Никакой воды. И хотя многие вещи уже обговаривались, это идеальная памятка, спасибо! :)
Ответить
Witget
Witget - это сервис для повышения конверсии и продаж сайта.
Svetlana Smaglii
Андрей, спасибо! В следующих статьях будем писать и на другие темы полезности))
Ответить
aveCRM
Легкая CRM-система
Максим Медведев
Странно, пишите чек-лист и сами же допускаете в статье ошибку из него:

"Не по­ме­щай­те в на­ча­ле ста­тьи ссыл­ку, ве­ду­щую на дру­гой ре­сурс."
и
"....совместно с коллегами из MaybeCat (ссылка) ...."
Ответить
Witget
Witget - это сервис для повышения конверсии и продаж сайта.
Svetlana Smaglii
Максим, отчасти вы правы. Но MaybeCat-это ещё 1 наш проект, т.ч.все норм))
Ответить
Oleg Kholodov
ну статья то на самом деле высосана из пальца
всем понятные и известные вещи
ничего нового
написали ради того чтобы написать!
не надо так..
Ответить
Surgebook
Платформа для создания и публикации онлайн книг
Андрей Ивашкевич
причет тот кто совершенно в этом не шарит, не поймет как правильно надо делать. Так как элементарно нет примеров что плохо, а что хорошо.

Если уже углубляться в мат. часть. То, для страницы, надо в первую очередь прописывать единые стили: h1,h2,h3,h4,h5,h6,p,label,.btn,a (как минимум) - и юзать их, тогда страница будет ровная и аккуратная. Дизайнеров это тоже касается. А то потом двадцать видов кнопок, двадцать видов текста. Везде разные отступы и размеры.
Ответить
Witget
Witget - это сервис для повышения конверсии и продаж сайта.
Svetlana Smaglii
Олег, возможно и ничего нового для вас. Но мы прошли все контрольные пункты, а многие проходят по одним и тем же граблям, то что касается сайта. Вот так, действительно, не надо))
Ответить
Иван Петрович
Вы, конечно извините, но написанное в статье либо не обосновано на настоящий момент, либо устарело.
1) "Ис­поль­зуй­те свет­лый фон" - что, в любом случае и всегда?
2) "Рас­по­ла­гай­те кон­такт­ную ин­фор­ма­цию в пра­вом верх­нем углу стра­ни­цы." - Серьезно? Везде и всегда? Без этого никак? Как современные сайты обходятся без этого?
3) "От­кры­вай­те новую ссыл­ку в новой вклад­ке." - вообще загадочный текст. Любую ссылку открывать в новом окне? Да это вредные советы какие-то пошли.
4) "До­бавь­те поле по­мо­щи поль­зо­ва­те­лю сайта." - я не знаю что такое поле помощи.
5) "Вы­рав­ни­вай­те со­дер­жи­мое стра­ни­цы." - конкретнее, что и куда выравнивать? Все выравнивать?
6) "Рас­по­ла­гай­те поле ре­ги­стра­ции в пра­вой верх­ней части экра­на." - я не знаю что такое поле регистрации, ознакомьтесь пожалуйста с терминами в сайтостроении.
7) "Про­те­сти­руй­те, какое рас­по­ло­же­ние меню — го­ри­зон­таль­ное или вер­ти­каль­ное -по­дой­дет для ва­ше­го сайта." - Ммм, а как это сделать? A/B тестирование или что?
8) "Располагайте меню сайта в верхней части страницы." как-то с предыдущим советом не соотносится.
9) "Сделайте выпадающие блоки меню контрастными." - честно, не понял о чем это, но похоже на вредный совет или на вкусовщину.
10) "Проверьте скорость загрузки страниц, идеально 2-5 секунд." - это не идеально, это терпимо для тяжелый страниц, в противном случае это много.
11) "Поместите поле возврата на главную страницу в верхней части экрана." - это о чем? О ссылке на логотипе? и у вас уже был выше совет на эту тему.
12) "Логотип — ссылка на главную страницу." Опять? Иил вы предполагаете несколько ссылок вверху на главную страницу?
13) "Разделяйте текст абзацами." не разделяйте текст абзацами, а разделяйте текст на абзацы, а то смысл то разный.
14) "Располагайте связанные элементы рядом друг с другом, например, пункты «Доставка» и «Корзина»." Доставка вообще крайне редко с корзиной, поэтому совет сомнительный.
15) "Используйте единый шрифт на всех страницах." - вот прям один, если 2 или 3 то хуже будет?
16) "Используйте подводки к статьям, если это блог." - можете считать меня неграмотным, но после 10 лет в IT я не в курсе, что такое подводка.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать