8 принципов эффективного веб-дизайна

Написать эту статью меня подтолкнуло общение с клиентами, которые заказывали у нас создание сайта.

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

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

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

Как пользователи думают?

В принципе, привычки пользователей в интернете ничем не отличаются от привычек покупателей в магазине.

1. Взгляд читателя на каждой новой странице сканирует часть текста и нажимает на первую ссылку, которая покажется им интересной. И часто дальше этой ссылки они даже не идут.
2. Большинство пользователей ищут нужную информацию мышкой, и как только они решат, что нашли то, искали, они жмут на клавишу.
3. Если новая страница не соответствует ожиданию пользователей, используется кнопка «Назад», и процесс поиска продолжается.

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

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

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

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

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

Пользователи хотят иметь контроль. Они предпочитают иметь возможность контролировать свой браузер и полагаться на последовательное представление данных на сайте. Например, они не хотят, чтобы неожиданно перед их глазами появлялись новые окна, предпочитая иметь возможность вернуться с кнопкой «Назад» на сайт, где они были раньше, поэтому совет: никогда не отрывайте ссылки в новых окнах браузера.

Не заставляйте пользователя думать

По первому закону Круга о юзабилити интернет-страница должна быть простой и понятной. Когда вы создаете сайт, ваша задача сделать так, чтобы у пользователей не возникало вопросов: «Где я нахожусь, о чем этот сайт, это то, что мне нужно?»

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

Сайт должен иметь четкую чёткую структуру и визуальные подсказки (в меру!), которые могут помочь пользователям найти свой путь к цели.

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

Люди уйдут с сайта, на котором сложная навигация и слишком много информации, которую они не в состоянии воспринять.

Когнитивная нагрузка — это количество логических связей и переходов, необходимых нашему мозгу для осознания и понимания объекта, на который мы смотрим.

Дэвид Либ

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

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

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

Для коммерческого сайта это чревато потерей клиентов, а значит, и дохода.

Не испытывайте терпение пользователей

В каждом проекте, когда Вы собираетесь предложить Вашим посетителям услуги, старайтесь свести к минимуму требования к ним.

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

Не старайтесь сразу заполучить адрес электронной почты пользователя.

Особенно сильно раздражают всплывающие по-пап окна, которые обрушиваются на посетителя, как только он зашел на сайт.

Многие пользователи уходят сразу с такого сайта.

Управляйте вниманием пользователей

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

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

Человеческий глаз так устроен, что может мгновенно распознать кромки, узоры и движение.

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

Хорошо срабатывает принцип фокусировки на слове «бесплатно». Сразу привлекает внимание и в то же время оно само по себе ненавязчивое и носит чисто информативный характер.

Тонкий намек предоставляет пользователям достаточно информации о том, как можно узнать больше о продукте.

Акцентирование внимания пользователей на определенных областях сайта с помощью каких-то визуальных элементов поможет им добраться из пункта А в пункт Б.

Стремитесь к художественному воздействию

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

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

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

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

Используйте эффективную письменную форму

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

Рекламные письма читать не будут.

Длинные текстовые блоки без картинок и разделения на абзацы, без применения курсива или выделения жирным шрифтом подзаголовков также будут проигнорированы.

Не сюсюкайте. Говорите языком бизнеса. Однажды я нечаянно забрела на сайт веб мастерской, и мне сразу бросилось в глаза меню сайта.

Вместо привычного названия «Главная» стояло странное слово «Начальная».

Далее шло название «Направления». Следовало понимать, что речь шла о том, чем занимается мастерская, каковы направления ее работы. Но понять суть этого слова я смогла лишь после того, как перешла по ссылке.

Ну, и наконец, просто умилило название страницы: «Ёмкие ответы» (в просторечье FAQ).

Но больше всего меня привела в восторг страница контактов, где крупным шрифтом на самом видном месте было написано: «Я к вам пишу – чего же боле?»!

Друзья мои, не пытайтесь изобрести велосипед! Еще и с квадратными колесами.

Избегайте «умностей» и каких-то милых названий. Используйте терминологию, свойственную бизнес-проектам, не вводящую в заблуждение или в ступор пользователей.

Что касается текстов статей, то оптимальным решением для их эффективного написания является:

Использование коротких и лаконичных фраз (подлежащее, сказуемое, два второстепенных члена предложения).

Использование классификации информации:

• несколько уровней заголовков
• визуальные элементы
• маркированные списки.

Все это нарушает поток однородных текстовых блоков.

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

Стремитесь к простоте

«Чем проще-тем лучше» — этот принцип должен стать основной целью дизайна сайта.

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

Стремитесь к простоте, а не к сложности.

С точки зрения посетителей лучший дизайн сайта – это обычный текст без какой-либо рекламы или дополнительных контентных блоков. Такой текст, который максимально отвечает пользовательскому запросу. Контент, который они так долго искали.

Не бойтесь пустого пространства

И впрямь, важность пробелов трудно переоценить.

Они не только помогут уменьшить когнитивную нагрузку для посетителей, но и позволят с легкостью воспринимать информацию, представленную на сайте.

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

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

Иерархическая структура снизит сложность восприятия текста.

Визуальная иерархия поможет более легкому восприятию контента (закон Саймона).

Не бойтесь показаться скучными

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

Напротив, привычное расположение (а в некоторых случаях и оформление) элементов весьма полезно, поскольку сокращает время обучения тому, как в принципе работает веб-сайт.

Например, кошмаром для юзабилити стало бы разное представление лент rss.

Если вдуматься, такой подход не так уж отличается от нашей повседневной жизни, т.к., мы уже привыкли к основным принципам организации своего пространства (использование папок, привычное расположение вещей в шкафу или на полках и т.д.).

Заключение

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

Источник: http://shkolabloggera.ru/8-printsipov-effektivnogo-veb-dizayna/