close

Заказать адаптацию

+ подарок аудит Вашего сайта на адаптивность
совершенно бесплатно!

Блог команды Адаптист.ру

Принципы мобильного дизайна от Google: Как впечатлить пользователей и увеличить конверсию

google-rank

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

Вступление

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

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

Методика исследования

Исследование проводилось в Чикаго и Сан-Фрациско, путем проведения 119 сессий, продолжительностью 1 час, во время которых участники тестировали удобство пользования сайтами. Участников просили выполнять различные задания на своих телефонах. В исследовании приняли участие как пользователи Андроид, так и iОS. На каждом сайте, участникам необходимо было выполнять задачи направленные на конверсию, такие как совершение покупок, бронирование мест или изучение тарифов/цен. Участники громко озвучивали свои мысли во время выполнения задания, а затем оценивали удобство пользования каждым сайтом. Исследователи также просили поставить оценку, основанную на удобстве пользования сайтом и успешности выполнения задачи, а также вели учет ошибок или проблем с сайтом, по степени их тяжести. На основании результатов исследования, были сформированы 25 принципов проектирования сайтов, которые мы объединили в 5 групп:

• Домашняя страница и навигация
• Поиск по сайту
• Торговля и конверсия
• Заполнение форм
• Удобство в использовании и форм-фактор

 

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

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

Домашняя страница и навигация

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

1. «Призывы к действию»

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

 

Основной совет: размещайте «призывы к действию» в наиболее заметном месте сайта.

2. Меню должны быть короткими и привлекательными

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

 

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

3. На главную страницу должно быть легко вернуться

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

 

Основной совет: используйте ваш логотип, как кнопку, кликнув на которую пользователь вернется на главную страницу.

4. Не позволяйте рекламе быть в центре внимания

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

 

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

Поиск по сайту

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

5. Строка поиска должна быть хорошо видна

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

 

Основной совет: помещайте строку поиска где-нибудь вверху страницы, и делайте ее в виде пустого поля для ввода текста.

6. Результаты поиска должны быть достоверны и относиться к теме запроса

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

 

Основной совет: первые результаты поиска должны максимально соответствовать запросу пользователя. Используйте элементы Умного поиска типа автозаполнения и исправления ошибок.

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

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

 

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

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

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

 

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

Торговля и конверсия

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

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

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

10. Позвольте пользователям осуществлять покупки в качестве гостя

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

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

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

 

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

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

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

 

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

13. Позвольте пользователю завершить конверсию на другом устройстве

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

 

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

Заполнение форм

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

14. Упрощенный ввод информации

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

 

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

15. Выбирайте самый простой метод ввода для каждой задачи

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

 

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

16. Используйте визуализированный календарь для выбора даты

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

 

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

17. Минимизируйте ошибки при заполнении, разместив обозначения и осуществляя проверку данных в реальном времени

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

 

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

18. Формы должны быть эффективны

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

 

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

Удобство в использовании и форм-фактор

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

19. Сайт должен быть полностью оптимизирован под мобильные устройства

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

 

Основной совет: Пользоваться сайтом проще, если все страницы оптимизированы под мобильные устройства.

20. Не заставляйте пользователей приближать картинку

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

 

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

21. Фотографии товаров должны увеличиваться

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

 

Основной совет: Размещайте на сайте качественные увеличенные фотографии важных изображений, таких как фото товаров.

22. Указывайте, какая ориентация экрана оптимальна для просмотра

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

 

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

23. Пользователь не должен использовать более одного окна браузера

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

 

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

24. Избегайте названия «полная версия сайта»

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

 

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

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

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

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

Список технических контрольных вопросов

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

 

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

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

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

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

— внедрите аналитику и отслеживание конверсии на своем сайте. Конверсия на мобильном сайте должна отслеживаться параллельно с конверсией на настольном.

 

Если бы вы хотели проверить свой сайт на соответствие готовности к работе с мобильными устройствами, напишите нам и мы проконсультируем вас совершенно бесплатно.

 

Один ответ на “Принципы мобильного дизайна от Google: Как впечатлить пользователей и увеличить конверсию”

  1. Я:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *