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

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

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

Несколько недель назад мы рассказали о 10 принципах эффективного веб-дизайна — это исчерпывающая статья об эффективном веб-дизайн.

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

Вам могут быть интересны следующие статьи о юзабилити:
10 юзабилити кошмаров и 30 юзабилити вопросов.

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

AIDA - это эффективная маркетинговая модель, которая описывает общий список событий, которым подвергается человек, когда покупает продукт или сервис.:

A - Attention (Внимание): Привлекаем внимание клиента.

I - Interest (Интерес): Повышаем интерес клиента, демонстрируя характеристики, преимущества и возможную пользу.

D - Desire (Желание): Убеждаем клиента, который хочет данный продукт или сервис, что ваш продукт удовлетворит его потребности.

A - Action (Действие): Вести клиент к принятию действия к покупке.

В настоящее время некоторые добавляют еще одну букву к AIDA(S): S - Satisfaction (Удовлетворение) - удовлетворять клиента, так чтобы становились постоянными клиентами и приглашали дополнительных клиентов.

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

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



Рассмотрим пример приведенный выше. traffik следует AIDA принципам. Если посетители ожидают некоторую информацию о CMS, то их ожидания немедленно подтверждаются кратким введением в верхней части сайта.

Таким образом, потенциальный клиент заинтересовывается, и остается на сайте (Внимание, a). Интерес был вызван демонстрацией особенностей и преимуществ продукта (Интерес, i).

Основные потребности пользователя описаны в коричневом блоке, который находится в правой, нижней части страницы (Желание, d). В конце посетитель направляется на “Take the tour” и “Free 30 day trial” кнопки, которые наталкивают клиента на покупку товара или более подробный обзор сервиса. (Действие, a).

Существует много других моделей для продаж, например BOSCH-формула (автор Peter Hubert):

Будьте любознательны, задавайте открытые вопросы.

Предлагайте решение, говорите о конечном результате для клиента.

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

Думайте обо всех необходимых аксессуарах для товара.

Делайте заключительный удар, когда клиент готов купить.

2. Экспериментируйте с несколькими цветами.
Черный текст на белом фоне или светлый текст на черном фоне - это пассивные цвета. Энергичные цвета могут помочь заострить внимание на некоторых конкретных элементах сайта, на которые вы бы хотели, чтобы посетитель обратил внимание.

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



Sidebarecreative.com использует только один доминирующий энергичный цвет - это синий. Белым цветом в одном предложение рассказывается, о чем данный сайт. Отличный, скромный и выразительный в использовании цветов сайт. Это эффективно.



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

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



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

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



Signalfeuer.info использует асимметричный баланс, который позволяет более динамично использовать белое пространство (и это, пожалуй, главное преимущество асимметричного баланса). Левый блок меньше чем правый, тем не менее, сайт предлагает очень сильный баланс с помощью сбалансированной сетки. Кроме того, выбор цветов очень впечатляющий.

Согласное статье Principles of Design, “Асимметричный баланс может быть в неравной позиции и интенсивности. Чтобы создать асимметричный баланс, необходимо увеличить интенсивность, чтобы компенсировать изменение в позиции.

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



Это именно то, что было сделано на Avalonstar.com.

Grid-based approach может быть полезен для достижения сбалансированных слоев.

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

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



Hovie.com показывает очень необычное, ясное, понятное дизайнерское решение. Сайт состоит из 5 блоков; Первый обозначает главное меню, которое появляется когда сайт загружается. Подменю появляется, когда выбран один из пунктов меню.

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



Другой пример: Astheria.com сосредоточен на белом фоне и имеет сбалансированную сетку. Хотя дизайн довольно тонкий и использован только один привлекающий цвет, вы можете увидеть немедленно, где вы сейчас и какие варианты имеются. Мощь типографии в лучшем виде.

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

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

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

Согласно 8 золотым правилам дизайна от Ben Shneiderman важно дать пользователям возможность использовать горячие клавиши.



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

Предлагая полезные инструменты вы предлагаете своим пользователем более простой способ использовать ваш сервис и у них не будет никакой необходимости искать альтернативные варианты.

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

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


SSM - Автор перевода