§2.3. АДАПТИВНЫЙ ДИЗАЙН САЙТА

Без адаптивного дизайна – сайт не полноценный.

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

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

Сможет ли такая женщина у Вас в магазине совершить покупку, или воспользоваться Вашей услугой, если у Вас сайт не адаптирован под её устройство?

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

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

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

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

Отдельную мобильную версию можно рассматривать уже как устаревающий вариант.

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

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

Еще один довод делать 100% адаптивный дизайн – требования поисковых систем. Они уже понижают рейтинг не адаптивных сайтов.

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

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

1. Минимализм.

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

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

(Это не относится к информационным разделам, которые посещают, чтобы почитать.)

Вообще идеальной страницей, на которую попадет пользователь, прочитав Ваше объявление будет содержать только:

– заголовок с заманчивым предложением, 3—5 аргумента (объемом СМС каждый)

– почему покупают этот товар,

– красивая картинка, и конечно же кнопка с призывом к действию. Ниже – другие менее значимые аргументы, например, отзывы.

2. Размещайте все тексты в столбик.

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

Это баннера, рекламные блоки, а боковое меню можно сделать раскрывающемся при нажатии на определенную кнопку.

3. Делайте акцент только на одном.

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

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

4. Ведите пользователя.

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

5. Удобство использования.

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

6. Восторг.

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

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

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