3 Принципа оптимизации web-дизайна

Posted on by riasevastopol

Источник изображения

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

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

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

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

Итак, современный online ресурс должен быть:

  • эстетичным;
  • оптимизированным под запросы пользователей и персонализированным;
  • оптимизированным под мобильные устройства.

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

  • Эволюция веб-дизайна — 20 лет за 5 мин.!

Глава 1. Эстетика

Первое чувство

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

Длительность концентрации пользователей всемирной сети сокращается . По последним данным, у вас имеется около 50 миллисекунд, дабы произвести первое чувство. Применяйте это время с умом.

  • Первое чувство имеет значение, либо Из-за чего ответствен качественный дизайн

Дизайн для пользователя

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

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

Как же добиться этого? Посредством правил эстетики и дизайна:

  • сделайте упор на цель и значение бренда;
  • выразите индивидуальность бренда.

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

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

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

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

Убедитесь, что ваша страница — «слуга народа», несложнее говоря, ресурс обязан трудиться на клиентов и нравиться обязан прежде всего им.

  • 25 примеров прекрасного дизайна вебмагазинов

Сделайте бренд эстетичным

Если вы когда-нибудь видели оригиналы Моне либо Ван Гога, то не понаслышке привычны с возможностями прекрасного дизайна. К сожалению, в сети мало сайтов, каковые возможно с полным правом назвать произведениями искусства. Одаренные дизайнеры вкладывают в собственную работу душу, опыт и талант, пробуя вызвать у визитёров незабываемые чувства.

Само собой разумеется, никто не требует от вас превзойти мастерство Ван Гога либо Кандинского. Но наладить эмоциональный контакт с визитёром нужно. Дабы вдохновить его на великие свершения либо хотя бы на конверсию.

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

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

Любой цвет приводит к определённой эмоции. К примеру, оранжевый ассоциируется с приятными моментами, молодостью, эйфорией. Красный, наоборот, вызывает ассоциации с знаком «стоп», опасностью, болью.

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

  • 8 факторов, каждый день воздействующих на отечественные решения

Примеры — ниже.

Обратите внимание на Jacqui s Journey to the Perfect Cake. Любой элемент поддерживает воздух сказки. Пастельные тона прекрасно дополняют неспециализированный стиль.

Страница удивляет и воодушевляет.

Пример от REI практически противоположен. Ресурс делает упор на деятельный образ судьбы, любовь к приключениям и чувство свободы.

  • Теория цвета — как руководить вниманием пользователя?

Правила дизайна. Управление для начинающих

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

А это — первый ход к сильной странице, успеху и счастливым клиентам.

  • 25 примеров «сочного» дизайна

Глава 2: Юзабилити

Сайт создается для визитёра

Не забывайте ветхую поговорку? У каждого диалога имеется три стороны. Первая — то, что вы думаете о собственной речи.

Вторая — то, что осознаёт слушатель. Третья — истина, которая посередине.

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

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

Неверный дизайн побуждает к неверным целям

Многие сайты и лендинги страдают особенной формой шизофрении — конфликтом между желаниями пользователей и представлениями маркетологов. Создавая хаос в элементах страницы, вы рискуете утратить читателей. Согласно данным eConsultancy, 74% опрощеных вычисляют коррекцию пользовательского опыта главным причиной увеличения конверсии, лояльности и продаж.

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

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

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

Но все же — любой обязан заниматься собственной работой.

  • Как доказать сокровище оптимизации конверсии собственному боссу

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

Вторых вариантов нет.

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

6 ключей к оптимизации дизайна

Около 50% специалистов бизнеса подтверждают тот факт, что дизайн — основной критерий формирования доверия к бренду. Соответственно, 70% маркетологов вычисляют уроки и ресурсы по оптимизации дизайна очень востребованными Сейчас. Для удовлетворения данной потребности в последнее десятилетие было создано множество тематических материалов.

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

1. Обоснование сокровища либо оффера

Что сделать при знакомстве с визитёром? Как не потерять его? А вот как: основное — сходу растолковать, чем занимается компания, и что выделяет ее из моря соперников.

Это объяснение именуется «value proposition» либо «ценностное предложение».

От вас требуется всего пара строчков, четко отвечающих на вопрос «Из-за чего клиент обязан приобрести у меня, а не у соперников?» Либо еще легче — каков ваш оффер? Четко и ясно…

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

Одно перемещение. Красный либо светло синий провод?

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

  • Как создать реализовывающий оффер?

Согласно данным Website Optimization Report от MarketingSherpa, у компаний, каковые без шуток отнеслись к созданию ценностного предложения, индекс ROI выше на 15%. Как вычисляете, 15% — это основание, дабы поменять несколько предложений на странице?

На примере представлены 3 value proposition, созданных под различную целевую аудиторию.

2. Будьте конкретны

Убедитесь в следующем: любой визитёр обязан за 3-4 секунды осознать, чем занимается компания, и что вы ожидаете от клиента на странице. В случае если это занимает больше времени, начните заново, выделив самое основное.

Как вы увидели на примере, Austin BeerWorks делает упор на продвижении продукта компании. Текста мало, но читатель сходу осознаёт, куда попал, и что от него требуется. Успешный контент, выпадающее меню и интерактивные изображения пивных банок говорят людям о продукте.

А белый фон эффектно оттеняет заголовок: «Пиво!».

  • Как дизайн СТА-кнопки может расширить конверсию?

3. Запустите мыслительный процесс

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

Как будто бы заклинатель змей, ни на секунду не отпуская их внимание.

К примеру, целевая страница новой книги Content Verve, продемонстрированная ниже, иллюстрирует, как направлять читателей, применяя процесс принятия ответов. К слову, это хороший метод повысить доверие. Вы даете пользователям интересующую их данные, и лишь затем просите дать контактные эти.

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

Следующий раздел развивает идея, показывая отзывы экспертов. В этом случае весьма грамотно использован психотерапевтический принцип социального доказательства. Согласно данным Search Engine Journal, около 63% потребителей склоняются к ресурсам, на которых представлены рейтинги и обзоры продукции.

Отзывы признанных специалистов усиливают вес eBook в опытном сообществе и повышают коэффициент конверсии.

По окончании того как вы заметили отзывы экспертов и ценностное предложение, вас «добивают» призывом к действию в нижней части.

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

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

4. Создайте конверсионные дороги

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

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

Единственная адекватная цель маркетинговой стратегии в сети — это предоставление пользователю информации по первому клику. В случае если пользователь применяет в Яндекс поисковой запрос «приобрести в Москве очки как у Хантера Томпсона», он обязан попасть сходу на товарную целевую страницу вебмагазина, а не на основную сайта либо вашу SEO-статью об очках-«авиаторах».

5. ясность и Чёткость

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

Для чего так поступать со собственными клиентами?

По данным MarketingSherpa, ясность — основной козырь при написании текстов для веб-страниц. На примере смешного рассказа данную обстановку растолковывает Dr. Flint McGloughlin, управляющий директор Marketing Experiments:

«Обычный мужчина ни при каких обстоятельствах не подойдет к даме в баре со словами: “Эй, подруга — посмотри на мужчину собственной грезы! Годы одиночества закончились!”, но мы систематично видим подобный подход в сети». Не тратьте драгоценного времени.

Применяйте краткий и четкий контент.

  • Заголовки: власть, действие, влияние

6. Устраните помехи

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

Главные помехи на странице:

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

К примеру, многие маркетологи без меры применяют изображения, считая, что это идет на благо странице, «оживляет» ее. Да, кое-какие примеры выглядят как сказочные иллюстрации, но простое А/Б-тестирование говорит о том, что много изображений вредит конверсии. Это вправду так.

Обычно увлекательные картины отвлекают пользователя от цели, не усиливая ни вовлечение, ни конверсию.

Идем дальше. Графика, непременно, замечательно смотрятся, но она может без шуток повысить скорость загрузки страницы. Вы знали, что любая лишняя секунда загрузки снижает просмотры на 11%, удовлетворение клиентов на 16%, а конверсию — на 7%? Убедитесь, что элементы сайта не отвлекают пользователя от конверсии, а контент так лаконичен, как это вероятно.

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

  • 5 правил плоского дизайна, сделавших его самым горячим трендом сезона

Глава 3: Оптимизация под мобильные

Современная аудитория капризна и сложна. Рядовой пользователь в течение дня может зайти на ваш сайт с ПК, iPhone и планшета поочередно. Последний опрос исследовательского центра InternetAmerican Life Project говорит о том, что практически 60% пользователей выходят в интернет через смартфон, планшет либо ноутбук.

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

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

Верно, не имеете возможность.

Мало статистики:

  • 65% взрослого населения США ложатся дремать, имея смартфон на расстоянии вытянутой руки;
  • в 2012 году 74% опрошенных объявили, что скорее возвратятся на сайт, оптимизированный под мобильные;
  • у 62% компаний, создавших сайт под мобильные, выросли продажи.

Как говорилось ранее, время от времени одно фото стоит тысячи слов. Фотография выше — хороший пример. Посмотрите, как очень сильно изменилось общество за относительно маленькое время.

Адаптивный дизайн

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

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

В диаграмме дано сравнение адаптивного дизайна с сайтом, оптимизированным под мобильные:

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

Эта неприятность достаточно распространена в оптимизации под мобильные. Но вы не столкнетесь с ней, применяя адаптивный дизайн.

  • Адаптивный дизайн — новая эра мобильного маркетинга

5 правил мобильного дизайна

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

1. Сделайте дизайн адаптивным

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

2. Будьте лаконичны. Еще лаконичнее

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

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

3. Большой призыв к действию

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

4. У пользователя всего две руки

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

Люди имеют свойство промахиваться, исходя из этого не размещайте рядом с call to action никаких вторых ссылок.

5. Ориентируйтесь на местность

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

Больше креатива!

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

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

  • 5 секретов успешной оптимизации мобильных целевых страниц

Выдающиеся ресурсы требуют стратегического видения

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

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

Помните про сплит-тестирование как проверки и оптимизации основной метод конверсии ваших маркетинговых догадок.

Дабы заказать неповторимый дизайн лендинга у команды LPgenerator, заполните эту форму.

Высоких вам конверсий!

По данным cdn2.hubspot.net

Случайные статьи:

Баланс. Центр масс. Основные принципы дизайна. Веб-дизайн


Подборка похожих статей:

riasevastopol

More Posts