Статьи для успешных,
предприимчивых и современных

Блог посвящен темам бизнеса, маркетинга, создания и продвижения сайтов

Процесс разработки логотипа Масспит
Бизнес
10 января 2017 в 16:16

Не мало времени потратили на логотип для интернет-магазина спортивного питания

12 проблем веб-дизайна и как с ними справиться
Бизнес
21 ноября 2016 в 20:04
12 проблем веб-дизайна и как с ними справиться

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

Любители сложных админок как пилоты самолетов
Бизнес
5 ноября 2016 в 14:38
Любители сложных админок как пилоты самолетов

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

Цифровое развитие России отстаёт от мирового в среднем на 5–8 лет
Бизнес
18 августа 2016 в 17:01

Такие данные следуют из исследования международной консалтинговой компании The Boston Consulting Group «Россия онлайн? Догнать нельзя отстать»

Как выглядит правильная структура сайта?
Бизнес
18 августа 2016 в 17:05

Сайт может иметь невероятно стильный дизайн, но какой в этом толк, если структура нарушена?

Как сделать сайт удобным
Бизнес
6 марта 2016 в 17:09

Говорим о том, как сделать сайт удобным и какие факторы влияют на степень удовлетворенности посетителя вашим ресурсом

Оптимизация изображений для сайта
Бизнес
5 марта 2016 в 11:45
Оптимизация изображений для сайта

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

Составляющие успешной СМС-рассылки
Бизнес
4 марта 2016 в 15:31
Составляющие успешной СМС-рассылки

Читайте нашу новую статью о том, как делать коммерчески выгодные СМС-рассылки, не получая при этом санкций и негатива от получателей

Как писать SEO-тексты
Бизнес
4 марта 2016 в 15:30

Что такое «хороший» SEO-текст? Как его написать и проверить?

Landing page. Из чего состоит. Виды. Процесс работы
Бизнес
4 марта 2016 в 15:29

В свое время при начале работы с CRM-системами, мне пришлось косвенно и напрямую разбираться с Landing Page: что это такое; какие бывают Landing Page; почему их используют; какую пользу они приносят, какой вред; в чем отличие их от сайта? Эти и многие другие вопросы стояли передо мной. Думаю, с ними сталкиваются многие, кто услышал что-то про Landing Page и решил сделать его для себя или своей компании.

Убеждающий веб-дизайн
Бизнес
4 марта 2016 в 15:29
Убеждающий веб-дизайн

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

Домен и хостинг простыми словами
Бизнес
14 декабря 2015 в 18:34

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

Правильное ТЗ — залог успеха!
Бизнес
14 декабря 2015 в 18:35

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

Показать ещё
Вернуться к списку

Убеждающий веб-дизайн

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

Возьмем простой пример с WC амстердамского аэропорта Схипхол. Появление мухи в писсуаре чудным образом изменило поведение мужчин. Судя по результатам этого неожиданного и странного эксперимента, мужской пол имеет склонность к прицеливанию в таких вот местах. Благодаря мухе аэропорт Амстердама уменьшил расходы на уборку на 80% (и лучше не знать, как они это проверяли).

Image title

 


Ясность — основа всего


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


Image title


Сайт должен отвечать на три вопроса пользователя: «Что это?», «Что я могу здесь сделать?» и «Почему мне нужно это делать?».
Проверим, ответит ли эта страница на них.


Image title


Что это? «Я сегодня же начну принимать кредитные карты» – ясный ответ и подходящая смыслу иллюстрация.
Что я могу здесь сделать? — Я могу получить кардридер для банковских карт.
Почему мне нужно это делать? — Потому что это бесплатно и здесь предлагают самые низкие комиссионные за транзакцию (2,75%).

Другой пример, показывающий визуальный способ контакта с посетителем.
Image title

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

Многие веб-маркетологи до сих пор используют эпитеты в превосходной степени («наилучший», «скорейший», «простейший» и т. д.). Однако без подтверждения, такие утверждения не убедительны и скорее будут раздражать посетителей сайта. Например, объявление из серии «Лучшая пицца в городе» вряд ли убедит человека пойти в эту пиццерию. А вот уточнение «Домашняя паста» — более конкретное утверждение, не содержащее прилагательных в превосходной степени. Так же можно описать краткие преимущества («Мы доставим вам вашу пиццу за 20 минут» и т.д.). 


Визуальная привлекательность


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

Люди часто делают поспешные выводы. Пользователю достаточно нескольких секунд, чтобы составить мнение о целевой странице/сайте. И вот такое поспешное впечатление будет руководить посетителем в его решении оставаться или уходить с сайта. Первые впечатления влияют на повышение удовлетворенности пользователя, они могут длиться годами. 
Image title


Наглядный пример – Tesla Model S. Многие скажут, что автомобиль хорош, хотя самолично не проводили тест-драйвов и возможно даже не видели машину в живую. Мнение основывается исключительно на внешнем виде.

Но что делает дизайн хорошим? Кому-то нравится зеленый цвет, кому-то синий, кто-то любит минимализм, а кто-то восхищается изобилием элементов на странице. Google попытался выяснить этот вопрос, в ходе широкомасштабного опроса определилось 2 фактора привлекательности сайтов для среднестатистического пользователя:

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

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


Image title



Строгая иерархия визуализации


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


Image title


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

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


Image title


Желательно располагать элементы на странице в определенной иерархии, созданной в соответствии с концепцией сайта.


Вот пример сайта Williams Sonoma, продающего посуду. Главной приманкой для глаз пользователей является сочный кусок мяса, возбуждающий аппетит. За ним следует заголовок и кнопка призыва к действию. Четвертое место занимает абзац с текстом под заголовком, а на пятом — обещание бесплатной доставки. Баннер, расположенный в верхней части окна последним привлекает к себе внимание.  


Image title


В интернете до сих пор ведутся споры о том, какой цвет конвертирует лучше – красный или оранжевый. Есть даже распространенный А/Б-тест цветов CTA-кнопки с зеленым и красным.

Image title


Кажется, что красный конвертирует лучше, чем зеленый, на 21%. Но если разобраться… Большинство пользователей нажало на красную кнопку не потому из-за особенностей цвета, а потому что она больше выделяется из общего окружения. Красный сам по себе агрессивный и доминирующий, а на контрасте с зеленым, его влияние усиливается. Красная кнопка еще более заметна. Если сайт преимущественно красный, то конвертировать наилучшим образом будет синяя или зеленая кнопки. Главное – контраст CTA-элемента и основного цвета страницы.


Пустое пространство вокруг объекта подчеркивает его важность и добавляет «воздуха».

 




Удержать внимание любой ценой


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

 

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



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



Еще один способ привлечения внимания – это «сюрприз». Когда пользователь замечает нечто неожиданное или непривычное, что вызывает у него любопытство.



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


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


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



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

 


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

 



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


Вот еще пример начального варианта товарной страницы с 4 фотографиями товаров в строке:



Уменьшаем число фотографий до 3, но увеличиваем их размер:



Результат: увеличение продаж на 25%


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


источник: http://habrahabr.ru/company/ua-hosting/blog/272969/

Сделать заказ
Отправить
либо напишите на info@febox.ru
Ваш вопрос отправлен нам на обсуждение.

Мы рады вашей заинтересованности и постараемся оперативно ответить вам.

Если вы остались обделены нашим вниманием или недовольны обслуживанием, обязательно свяжитесь с Алимом Муминовым и сообщите ему о любых ошибках или недочетах.