Колонки

5 шагов к идеальному мобильному сайту

Колонки
Евгений Кудрявченко
Евгений Кудрявченко

Основатель Vintage

Евгений Кудрявченко

За последние несколько лет парадигма использования мобильного телефона кардинально изменилась. Раньше с его помощью мы просто звонили и принимали звонки — сейчас же с этой целью смартфон используется максимум 1-2 раза в день, а все остальное время мы проводим в приложениях и мобильном браузере. Условно говоря, сегодня из 100 действий в смартфоне за день всего 2 приходится на звонки и 98 на интернет. По последним данным, в день среднестатистический пользователь снимает телефон с блокировки 148 раз. 

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

5 шагов к идеальному мобильному сайту
Присоединиться

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

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

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




Мобилизируйся — или исчезнешь

По статистике, в России 30-35% посетителей сайта заходят на него через мобильные устройства, и эта цифра растет. В США показатель еще выше — 56%.

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

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

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

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




UX мобильного сайта — как ДНК человека

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

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

Кто ваш покупатель? Чего он ждет от вас? Как вы можете сделать его счастливее? Важно чувствовать и понимать потребности своего клиента.

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

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

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




Мобильный сайт для «ускоренной» жизни

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

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

В связи с этим необходимо обеспечить:


1. Высокую скорость работы с мобильным сайтом

Не должно быть никаких лишних переходов и новых окон, которые перегружают сайт и увеличивают время загрузки. Скорость мобильного интернета у нас и не всегда радует и сайты зачастую грузятся медленно — юзер из вежливости будет ждать загрузки сайта максимум 15-20 секунд, а если страница не успела отобразиться, гарантированно ее закроет. Зная качество нашего интернета, старайтесь максимально «облегчить» страницу.


2. Грамотное планирование

Текст на основных страницах нужно жестко структурировать и разделить на короткие абзацы по 2-3 предложения. Контент должен объяснять, а не запутывать — нужно четко выделять преимущества, без длинных объяснений и воды. Сделайте текст простым и легко читаемым как со смысловой, так и с визуальной точки зрения.

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


3. Минималистический и логичный дизайн

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


4. Пользовательскую логику

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


5. Простое заполнение формы

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




На практике

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

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

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

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

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

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

Процесс непростой, но результат того стоит. 

Фото на обложке: Pixabay


Материалы по теме:

Креатив без стратегии ничего не стоит

Пять возможностей для мобильных инноваций в новостных медиа

16 тезисов о мобайле

Что произошло, что происходит сейчас и что будет дальше в мире технологий

Герман Греф: Эволюционируй – или вымрешь

Нашли опечатку? Выделите текст и нажмите Ctrl + Enter

Материалы по теме

  1. 1 Добро и бизнес: как универсальный дизайн помогает завоевывать клиентов и делает комфортной жизнь людей с ОВЗ
  2. 2 Как управлять клиентским опытом в ритейле: разбираемся на примере «Дикси» и «Магнит у дома»
  3. 3 Какой корпоративный дизайн выбрать, чтобы подчеркнуть достижения компании: сквиркл-, гласс- или неоморфизм
  4. 4 Советы бизнесу: как сформулировать задачу для дизайнера, чтобы получить качественный результат
  5. 5 Как создать удобный и красивый интерфейс технологического продукта
ArtTech — карта разработчиков арт-технологий
Все игроки российского рынка технологий для искусства
Перейти