Разработать понятный, удобный и красивый сайт — это намного сложнее, чем кажется. Давайте рассмотрим, что такое Юзабилити, и посмотрим, как применяются эти методы на современных сайтах. В этой статье речь пойдет не о создании понятных интерфейсов, а просто о соблюдении основных правил грамотного сайтостроения.
Почему это важно
Люди дольше взаимодействуют с сайтом и его интерфейсом, когда знают, как им пользоваться. И наоборот, люди покидают сайты, дизайн которых просто выглядят ужасно или запутанными. Всем важно задержать читателя на сайте, потому правила юзабилити стоит применять активно. Цель состоит в том, чтобы помочь посетителю быстро понять и освоить интерфейс, для легкой навигации и серфинга по страницам. Таким образом, вы получаете больше постоянных посетителей, и сайт имеет более низкий показатель отказов — становится эффективным.
Дизайн сайта должен быть узнаваемым или, по крайней мере, качественно персонализировать ресурс, отделяя его от конкурентов.
Например, каждый знает сайт интернет магазина Розетка. Он полон тысяч категорий и миллионов продуктов. С таким количеством контента вы ожидаете, что это будет хаос. Тем не менее, просмотр и поиск на Розетке действительно не слишком сложный. Как это достигнуто? Большое внимание уделено на меню навигации, которое помогает быстро отыскать и найти нужную рубрику.
С более сложными элементами страницы не всегда нужно полагаться на здравый смысл посетителя. Например, Twitter использует небольшие подсказки подсказок, когда вы наводите мышкой на некоторые элементы страницы.
Их цель — стимулировать активность посетителей и помогать людям использовать Twitter. Это гарантированный способ увеличить общую базу пользователей и повысить уровень удержания на странице. Понимая эти основы, давайте немного углубимся в несколько методов для построения удобного веб-сайта.
Практичность меню
Некоторые элементы сайта должны оставаться на одном и том же месте на каждой странице. Ваша навигация, логотип и основная область содержимого должны легко находиться.
Приемственность дизайна
Но более сложные приложения должны идти дальше, чем просто оптимизировать контент. Возьмем, к примеру, сайт Dropbox, который выглядел практически так же ещё в то время, когда они только запускались. Как только пользователь узнает интерфейс Dropbox, ему уже не нужно ничего изучать — всё интуитивно понятно. Когда он снова вернется в Dropbox, он уже будет знаком с ним. Когда люди используют сайт некоторое время, они знакомятся с пользовательским интерфейсом и рассчитывают, что он сайт будет вести себя таким же образом и в дальнейшем.
Анимации на сайте
Чтобы привлечь внимание посетителя к активным элементам страницы. ссылкам, баннерам — можно выделить их небольшой анимацией. Такой подход сделает сайт интересным и задержит посетителя. Разработчики мобильных приложений часто говорят о микро-взаимодействиях и о том, как они влияют на поведение пользователя. Эти взаимодействия, как правило, представляют собой анимации или ответы пользовательского интерфейса на поведение пользователей, и они имеют решающее значение для удобного интерфейса. Пользователи нуждаются в доказательствах того, что их действие (нажатие, скролл, удержание), действительно повлияло на страницу. Вы можете сделать это с помощью простых эффектов анимации.
Одним из замечательных примеров микроразметки может быть форма регистрации на странице. Когда вы вводите пароль для своей учетной записи, пользовательский интерфейс автоматически указывает требования к полям ввода, когда вы нажимаете на них. Например, пароли должны иметь длину не менее 8 символов.
Другим замечательным примером является корзина на сайте магазина B-Sport. Всякий раз, когда вы нажимаете «добавить в корзину», страница прокручивается вверх, где вы увидите всплывающую подсказку с обзором вашей корзины покупок. Этот ответ от интерфейса позволяет вам узнать, что вы только что добавили что-то в свою корзину.
Соблюдайте основные правила
Если вы разрабатываете веб-сайт, предназначенный для повседневного использования, вам необходимо придерживаться общепринятых стандартов:
- Посетители хотят видеть навигационные меню прямо вверху.
- Ссылки должны выделяться путем подчеркивания при наведении.
- Если есть раскрывающийся список, он должен появиться сразу при наведении.
- По-возможности замените ввод цифровых значений на кнопки «+» и «-«, это актуально для интернет-магазинов.
- Все заголовки должны быть четко выделены, используйте легко читаемые шрифты.
- Старайтесь придерживаться общей стилистики подачи контента.
