Ответ
Как принципы дизайна увеличивают переходы Опции темы
Старый 25.02.2013, 23:46
  #1
Матрос
 
Аватар для Матрос
Регистрация: 26.03.2011
Сообщений: 1,395

Как принципы дизайна увеличивают переходы
Правила дизайна. Правила ДИЗАЙНА! Разница небольшая, но на какой вариант вы обратили внимание быстрее? Я думаю на второй, так как он был обработан (хотя и не сильно), чтобы быть более убедительным.




Это изображение включает в себя все правила дизайна:

Направление движения: показывает движение бабочки, путем следа из звезд и пузырей.
Белое пространство: символизирует отсутствие беспорядка вокруг объекта.
Цвет и контраст: используются, чтобы выделить бабочку из доминирующего цвета фото.

И, наконец, использование золотой спирали (спираль Фибоначчи) где выводится взаимодействия между объектом и его назначением, расположенная непосредственно на динамическом координационном центре.

Имея это, разобьем задачу на два подпункта

Убедительный дизайн для концентрации внимания
Убедительный дизайн для призыва к действию (ПкД)

Часть 1. Убедительный дизайн для концентрации внимания

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

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

Шаг 1: Использование инкапсуляции увеличит количество переходов




Арка заставляет вас обратить внимание на расположенный внутри нее объект.

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

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





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

Шаг 2: Используйте цвет и контрастность, чтобы увеличить количество переходов





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

Цвет может быть использован для создания эмоционального отклика от ваших посетителей. Оранжевый, например, используют, для получения положительных эмоций и как таковой является отличным выбором для цвета вашего ПкД. (Вы можете также рассмотреть положительное влияние зеленого для Go, или голубой, как click-me - классический цвет ссылки).

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

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

В чем суть: Использование одного цвета (с различными тонами) для всей вашей целевой страницы - это полное исключение ПкД. Значит пора на этой странице что-то менять





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

Шаг 3: Использование направления для увеличения количества переходов





Стрелки направления такие же сильные на странице как удар в лицо - и именно поэтому они так хорошо работают. Так что очень разумным будет направлять посетителей, не тратя время выполнять запланированное ВАМИ действие.

Стрелки позволяют сказать, "игнорировать все остальное, и обращать внимание ТОЛЬКО на это".

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

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





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

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

Часть 2. Убедительный дизайн для ПкД

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

Во втором сегменте я сосредоточусь только на двух этапах: дизайн вашего ПкД, используя белое пространство и компоновку

Шаг 1: Использование белого пространства чтоб увеличить количество переходов





В этом примере, пространство на лугу переводит глаз на животное в углу. Белое пространство (хотя правильно говорить ПУСТОЕ пространство) является областью в которой почти ничего нету, окружающей объект назначения. Поэтому цвет этого пространства неважен.

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

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





Обратите внимание, как в примере справа (стрелок на самом деле не существует - они только для иллюстрации), ПкД имеет гораздо больше места для "дышания" и, таким образом больше выделяется чем в более тесной версии слева.

Шаг 2: Используйте дизайн ПкД чтоб увеличить переходы

Наконец, я хочу остановиться на технике, которая использует различные подходы к виду ПкД.

Необходимо чтобы ваш ПкД охватил два понятия. 1) Чтобы быть коротким и емким и 2) Описать точно, что произойдет при нажатии. Давайте посмотрим на некоторые примеры:





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

Идеальная техника здесь, чтобы разбить дизайн на первичные и вторичные значения, с вторичным значением в поддержку первичного. Примеры два и три показывают разные подходы к этому: один внутри кнопки и один снаружи. Выбор за вами, но они являются более эффективными, чем первый пример.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 26.02.2013, 00:07
  #2
Bilrel
 
Регистрация: 10.05.2011
Сообщений: 317

спасибо, интересная статья
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 26.02.2013, 01:27
  #3
miraida
 
Аватар для miraida
Регистрация: 11.02.2012
Сообщений: 2,241

Четко, понятно, полезно.
Однозначно - плюс!
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Тенденции дизайна: что популярно в веб-типографике 0pium Хостинг 7 23.02.2013 03:38

Метки
cta, дизайн, мануал, призыв к действию, разработка дизайна


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 21:04. Часовой пояс GMT +3.