Урок 123. Работа с юзабилити сайта. Дизайнерские ошибки и методы их устранения

• Отсутствие или неправильная расстановка отступов на странице. В ситуации, когда возможности по форматированию крайне ограничены, использование отступов остается очень важной частью работы с теми или иными материалами. В тексте, к примеру, отступы выполняют важную роль пауз – они позволяют улучшить восприятие и быстро проанализировать сказанное в предыдущем абзаце. Отделенный отступами материал показывает, что в абзаце содержится конечная мысль. И это очень важно отразить и в дизайне сайта! Отступы должны использоваться не только в тексте, но и в меню и в других элементах. К примеру, в тексте на вашем сайте вставлена тематическая фотография или видеоролик – вам обязательно стоит предусмотреть отступ, который бы показывал, что этот материал отделен от основной части контента. Просто используйте отступы там, где подсказывает логика, и не позволяйте контенту сливаться в одно большое полотно и тогда пользователям станет намного приятнее воспринимать ваш сайт.
• Неверное расположение элементов на сайте. Известно, что группировкой элементов занимается именно дизайнер и здесь очень важно не допустить того самого «пагубного» креатива. Прежде всего, вам стоит обратить внимание на традиционные элементы сайта и их расположение. К примеру, на видном месте должен располагаться логотип компании, а также контакты. При этом пользователь должен быстро находить кнопки добавления в корзину или покупки. Сама корзина с товарами также должна быстро находиться при взгляде на сайт – лучше всего, если её отображение будет стандартным и сквозным для всех разделов на сайте. Среди тех, кто работает с юзабилити, принято располагать меню в левой части экрана, а контакты – в правой. Это диктуется правилами, так называемого айтрекинга, которые также стоит изучить при работе с юзабилити. Обратите внимание на то, что для большинства пользователей есть возможность задать определенный паттерн, по которому они просматривают страницу. Это говорит о том, что вам лучше всего воспользоваться такими знаниями. Не стоит менять традиционное расположение стандартных элементов страницы – многие пользователи не будут рады, если не смогут отыскать на привычных местах всех нужных элементов.
• Неправильное расположение контента, большое количество пустых мест. Обратите внимание на то, что на некоторых сайтах контент располагается в неправильных местах. Отдельные участки страницы не используются, на них остаются пустые места. Это приводит к тому, что для получения нужного контента, приходится долго проматывать страницу вниз. Чем больше у пользователя необходимости скроллинга, тем меньше его удовлетворенность. В ряде случаев пустые места, лишние отступы появляются и автоматически при перенесении контента на сайт через систему управления. Этого также стоит избегать. Если на вашем сайте присутствует большое количество пустого места, с этим нужно бороться. Тем более, что у вас наверняка найдутся элементы, которыми можно восполнить пробелы. К примеру, предложите покупателю заказать сопутствующие товары и разместите прямые ссылки на странице – это позволит вам убрать пустоты и добавить удобства в использовании с сайта. Мы также советуем вам продумывать структуру сайта. Одна из самых частых причин возникновения пустот – слишком большое количество пунктов, расположенных в боковых меню. С этим нужно бороться – в компактности один из ключей к повышению юзабилити.
• Дизайн страницы выполнен безвкусно, с большим количеством посторонних элементов. Здесь ситуация аналогична с той, когда на сайте есть большое количество технических элементов, многие из которых не несут какой-либо пользы для заказчиков. Большое количество лишних элементов дизайна, а также различного рода дополнительные баннеры, слайдеры или вкладки, профессионалы называют «визуальным шумом». Многие сайты сознательно стараются привлечь внимание пользователя к некоторым элементам, используя множество переливающихся всеми цветами радуги элементов. От этого нужно уходить и продумывать дизайн сайта таким образом, чтобы он хорошо смотрелся и не вызывал отторжения. Это связано и с компоновкой материала на сайте. Обратите внимание, что на данный момент далеко не все мониторы могут дать возможность отображения сайтов большой ширины. Горизонтальная прокрутка – это зло, которого нужно избегать. Если на вашем сайте так много элементов дизайна и контента, что они просто не влезают в один экран – это может привести к негативной реакции со стороны пользователей. Вы тут же получите неприятный удар по удобству использования ресурса. Сделайте дизайн компактным и это поможет использовать сайт правильно.
• Неподходящий шрифт, влияющий на читабельность. Со стороны может показаться, что проблемы с читаемостью шрифтов давно были решены. Однако на деле это не так. Самые часто встречающиеся проблемы – нечитаемый шрифт, слишком близкая постановка слов, размытые и сливающиеся с фоном буквы. Лучше всего, если в одной строчке будет не более 9 слов – тогда все пользователи смогут прочитать их правильно. Стоит также уходить от слишком вытянутого по горизонтали текста в блоке – это поспособствует тому, что больше пользователей будут дочитывать его до конца. Всегда следите за цветом текста на странице, а также за фоном. Несмотря на годы развития веб-дизайна, на просторах сети по-прежнему встречаются странно выполненные сайты, на которых, к примеру, выводится красный текст на черном фоне. Такое положение дел вызывает у пользователя настоящий, физический дискомфорт и он просто не сможет просматривать ваш сайт.
• Невозможность удалить текст примеров из полей форм обратной связи. Если у пользователя имеется возможность воспользоваться обратной связью, значит в полях такой формы, скорее всего, есть примеры написания. Это могут быть как развёрнутые, так и краткие текстовые сообщения. Нередко встречается ошибка, при которой текст остаётся в поле даже после ввода нужной информации. В этом случае вы можете и не увидеть дополнительный текст, а вот пользователь определённо решит, что делает что-то не так. Кроме того, обязательно позаботьтесь о том, чтобы цвет вводимого текста был темнее, чем цвет текста примера. Это позволит дать пользователю понять, что он действительно вводит нужные данные. В особенно сложных случаях складывается ситуация, при которой цвет текста примера и вводимой информации оказывается идентичным. Это также может отпугнуть пользователя от дальнейшего использования формы обратной связи.
• Неправильная работа с выделением в тексте ссылок. Для того, чтобы пользователям было удобнее переходить по ссылками, сами ссылки нужно обязательно выделять. Стандартный метод – подсвечивание ссылки или подчеркивание. Этими способами выделения рекомендуем пользоваться и мы. Однако обратите внимание на то, что если вы выбираете определенный вариант выделения ссылки в тексте, он не должен перекликаться с другими частями текста. Если вы подсвечиваете ссылку, то нельзя таким же методом подсвечивать стандартный текст без ссылки. В противном случае, вы будете вызывать у пользователя раздражение. Просто поставьте себя на место посетителя сайта – ссылка есть, а вот перейти по ней просто не представляется возможным.
• Отсутствие навыков в работе с размещенными на сайте картинками. Проблема с неправильным отображением изображений на сайте сегодня актуальная как никогда. Главная её причина – появление большого количества устройств, на которых может неправильно отражаться та или иная информация. Постарайтесь сделать так, чтобы изображения хорошо подходили по тематике для конкретной статьи. Не стоит делать изображения в тексте слишком большими – это приведет к тому, что страница будет подгружаться слишком быстро. Не стоит размещать на изображении текст – это сильно ударит по читабельности. Лучше всего сделайте поясняющую сноску после изображения в специальном блоке. Также обратите внимание на то, что каждый рисунок должен быть хорошего качества, не распадаться на пиксели. Если вам очень требуется разместить на сайте большое изображение, лучше всего будет сделать его кликабельным. Таким образом, пользователь сможет нажать на изображение и сделать его крупнее. Для большого числа фотографий лучше всего использовать слайдеры. Однако обратите внимание, что изображение не должно выходить за пределы экрана и требовать горизонтальной прокрутки. Оставьте также возможность закрыть изображение. Нажав на любую область за его пределами, а не только на традиционный «крестик» в правом верхнем углу.

Ошибиться в дизайне сайта – очень просто. Тем более что, что современные сайты получают всё больше и больше информации. Помните что главное в работе с дизайном сайта – простота наполнения, читабельность и удобство для всех без исключения пользователей. Лучше всего, если на вашем сайте будет главенствовать простота дизайна, сочетающаяся с серьезностью подхода к контентному наполнению.