Дизайн сайтовЮзабилитиВерстка сайтовВходящий маркетингКонверсия сайтовПоисковые системыКонтекстная рекламаИнформационные технологииНовости E-Planet
18 августа 2015

Как создать мобильный сайт, обеспечивающий конверсию

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

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

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

И вот почему:

Значение конверсии в веб-дизайне

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

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

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

Сложности мобильного дизайна

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

  • Размер экрана;
    • Цели посетителей/спешка.

Довольно легко обмануться спецификациями некоторых популярных устройств.Например, iPhone 6 Plus может отображать графику до 1920×1080 пикселей (это также называется Full HD). По сути, это означает, что с технической точки зрения все, что вы хотели бы отобразить на таком устройстве, будет отображаться без заминки. Но что мы тут упускаем, так это то, что экран сам по себе всего 5,5 дюймов по диагонали. По сравнению со среднестатистическим десктопным устройством, скажем, 24-27 дюймов, тут у нас остается очень небольшое визуальное пространство для работы.

То есть, это проблема номер 1. Теперь проблема 2: цели посетителей или их спешка.

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

Им нужны определенные вещи, и они нужны им сейчас.Если вы не дадите им эти вещи, они уйдут (помните про 61% из статистики в начале статьи?).

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

Так как самостоятельно обойти эти проблемы и найти подходящее решение?

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

Заметьте, я не сказал цели.Когда речь идет о целях мобильного дизайна это как судьба бессмертных воинов в Горце должен остаться только один. (Извините, если вы не поняли этого сравнения. Я рос в 80-е и 90-е). В любом случае, когда речь идет о мобильном дизайне, сайту просто недостаточно времени (проблема 2) и пространства (проблема 1), чтобы он мог достичь более одной цели.

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

Мобильный и десктопный в чем разница

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

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

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

Разберитесь в мобильной аудитории

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

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

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

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

Убедите посетителя

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

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

  • Сценарий a): Если сайт предлагает именно то, что нужно посетителю, тогда вы сможете через хороший дизайн и текст убедить посетителя, что он в правильном месте. Это принесет некоторое облегчение, так как пользователь теперь знает, что он не теряет времени на сайте, на котором нет нужных ему ответов.
    • Сценарий b): Если сайт это не то, чего ищет посетитель, тогда он довольно быстро это поймет. Да, он уйдет, так как это не то, что ему нужно в данный момент, но в его голове отложится, что теперь он знает отличный сайт о Х.

Сделайте элементы легко нажимаемыми

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

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

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

Вместо этого:

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

Сократите количество ссылок

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

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

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

Сделайте дизайн отзывчивым

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

В качестве примера, O Neill (компания, известная одеждой для серфинга) представила отзывчивый дизайн их интернет-магазина совсем недавно, а влияние на конверсию уже поразительное. Только по трафику с iPhone/iPod конверсия увеличилась на 65,71%, операции на 112,50%, а общая прибыль на 101,25%.

1.jpg

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

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

Оставьте акцентные цвета для призыва к действию

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

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

Поместите путь к конверсии прямо перед посетителем

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

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

1.jpg

Будьте осторожны с интеграцией социальных сетей

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

Теперь Facebook мобильная компания. 62% своей прибыли она получает от рекламы на мобильных


The Verge

Поэтому кажется, что наличие элементов социальных сетей на мобильном сайте это довольно интуитивная вещь. Но всегда ли это так?Главное, что следует понять что если вы размещаете ссылки на социальные сети на своем сайте, это повлияет на коэффициент конверсии. Это неизбежно, так как люди, которые нажимают на ссылку на одну из социальных сетей, уже не будут иметь возможности нажать на главный призыв к действию. Является ли это желательным сценарием для цели сайта? Вам решать (в зависимости от проекта, над которым вы работаете).

Оставьте место для заголовков и подзаголовков

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

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

Здесь двойная трудность:

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

Заключение

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

По материалам blogs.adobe.com