Мобильный UX: 25 рекомендаций Google

Мобильный пользовательский опыт
Статьи
Автор: Юлия Федотова
«Шеф-редактор блога GetGoodRank, веб-аналитик, блоггер.
Качественный мобильный UX по меркам Google. Эти простые рекомендации помогут вам устранить минимальные конверсионные трения и получить больше транзакций через приложение»

Почему мобильный UX (user experience — пользовательский опыт) настолько важен? Компания IDC опубликовала прогноз роста количества мобильных пользователей в мире.

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

Поисковые системы учитывают мобильность сайта в качестве фактора ранжирования. В апреле 2015 года Google ввел mobile-friendly алгоритм, в феврале 2016 года Яндекс ввел мобильность в формулу ранжирования.

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

Проект Think with Google опубликовал 25 рекомендаций по оптимизации мобильных приложений для пользователей. Проанализировав рекомендации, команда GetGoodRank пришла к выводу, что советы Google применимы и к десктопным сайтам, и к мобильным версиям.

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

Мобильный UX: 25 рекомендаций Google

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

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

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

1. Покажите ценность на первом экране

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

мобильный UX ценность предложения

мобильный UX ошибки — CTA-кнопка «Try it now» (Попробуйте сейчас) не предлагает пользователю никакой выгоды.

мобильный UX правила — второй вариант сразу показывает пользователю доступные опции «Rent» — аренда жилья, «Buy» — покупка недвижимости, «Sell» — продажа недвижимости.

2. Правильное меню

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

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

мобильный UX названия категорий

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

мобильный UX правила— в данном варианте меню товары организованы по видам активного отдыха.

3. Кнопка «Назад»— очень важная кнопка

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

Кнопка назад выводит пользователя в самое начало пути:

Мобильный UX кнопка назад ошибка

Кнопка назад возвращает пользователя ровно на шаг назад:

Мобильный UX кнопка назад ошибка

4. Редактирование данных о местоположении в ручном режиме

Автоматическое определение местоположения существенно экономит время пользователя и позволяет магазину сделать более конкретное предложение. Что если пользователь хочет найти представительства (точки продажи, самовывоза, офисы компании) в другом регионе? Именно поэтому важно реализовать возможность изменения текущего местоположения в ручном режиме.

Мобтльный UX определение местоположения

мобильный UX ошибки — интерфейс не предлагает очевидных способов отредактировать местоположение.

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

5. Простой и понятный переход из мобильного приложения на мобильный сайт

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

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

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

Мобильный UX интерфейсы сайта и приложения

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

Мобильный UX дизайн сайта и приложения похожи

6. Правильное расположение окна поиска

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

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

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

Мобильный UX окно поиска

мобильный UX ошибки — окно поиска скрыто за меню.

мобильный UX правила — окно поиска сразу доступно пользователю.

7. Простой и эффективный поиск

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

  • исправление ошибок
  • распознание основы слова
  • подсказки при вводе текста в выпадающем списке

Это ускорит и упростит достижение цели.

Мобильный UX качество поиска

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

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

8. Фильтры и сортировка

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

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

Фильтры и сортировка отсутствуют. Пользователь вынужден просматривать слишком много результатов:

Мобильный UX фильтры и сортировка отсутствуют

Фильтры и сортировка существенно упрощают поиск нужного товара:

Мобильный UX фильтры и сортировка

9. История поиска и предыдущих покупок/заказов доступна пользователю

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

Мобильный UX трек заказов

мобильный UX ошибки — пользователь вынужден каждый раз искать товар/услугу заново.

мобильный UX правила — установка курсора в окно поиска открывает выпадающий список предыдущих запросов.

10. Возможность оценки и сортировки пользовательских отзывов

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

Мобильный UX отзывы

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

мобильный UX правила — сортировка отзывов помогает быстрее найти интересующие отзывы.

11. Сравнение товаров

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

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

Пользователь вынужден запоминать варианты для сравнения:

Мобильный UX сравнения товаров отсутствуют

Пользователь может добавлять варианты к сравнению и получать данные в удобном формате:

Мобильный UX сравнения товаров

12. Способы оплаты

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

Надежные платежные системы становятся своего рода гарантией безопасности для пользователя.

Мобильный UX способы оплаты

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

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

13. Редактирование способов оплаты

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

Мобильный UX редактирование платежной информации

мобильный UX ошибки — пользователь не может добавлять/редактировать платежные инструменты.

Мобильный UX редактирование платежной информации

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

14. Четко объясняйте, зачем пользователю регистрироваться

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

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

Мобильный UX регистрация

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

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

15. Кнопки авторизации и регистрации должны отличаться

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

Возможные решения:

  • кнопки авторизации и регистрации должны визуально отличаться
  • кнопки авторизации и регистрации должны находится в разных частях экрана

Мобильный UX регистрация и авторизация

мобильный UX ошибки — СТА кнопки визуально похожи, что провоцирует типичные ошибки пользователей.

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

16. Введение и проверка пароля

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

Мобильный UX проверка пароля

мобильный UX ошибки — авторизация при помощи введения логина/пароля более всего чувствительна к ошибкам и опечаткам. Большое количество паролей и логинов у пользователя создает дополнительные преграды.

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

17. Удобные формы для заполнения

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

Мобильный UX форма

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

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

18. Мгновенные сообщения об ошибках при заполнении формы

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

Мобильный UX сообщение об ошибке

мобильный UX ошибки — поля проверяются только после завершения заполнения всей формы и клика по СТА-кнопке.

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

19. Клавиатура соответствует типу вводимых данных

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

Мобильный UX клавиатура

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

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

20. Вспомогательная информация при заполнении формы

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

Мобильный UX заполнение формы

мобильный UX ошибки — пользователь вынужден вводить даты самостоятельно.

мобильный UX правила — пользователь выбирает даты из календаря.

21. Говорите просто, и вас поймут

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

Пользовательский опыт теминология и простота речи

мобильный UX ошибки — приложение использует непонятную терминологию, которую сложно понять вне контекста на СТА-кнопках.

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

22. Описания графики и иконок

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

Мобильный пользовательский опыт иконки

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

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

23. Визуальное подтверждение действий

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

Отсутствие подтверждения добавления товара в корзину приводит пользователя в замешательство:

Мобильный пользоваельский опыт без подтверждения действия

Пользователь получает подтверждение, что товар в корзине:

Подтвеждение пользовательского действия в приложении

24. Пользователь может увеличить изображение

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

Приложение позволяет увеличить только определенную часть картинки и только в заданном масштабе:

Увеличение изображения в приложении

Пользователь сам решает, что увеличить на картинке и насколько увеличить:

Увеличение изображения в приложении

25. Разрешение на использование данных в контексте

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

У пользователя запрашивают разрешение на использование персональных данных без каких-либо объяснений цели:

Запрос персональный данных в приложении

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

Запрос персональных данных

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

Войти с помощью: 

Статьи по теме

доверие пользователей
Статьи
Доверие пользователей: 5 уровней формирования
Сайт должен завоевать доверие пользователей прежде, чем запросить любые данные. Существ...
поисковая оптимизация лендинга
Статьи
Поисковая оптимизация лендинга: как выйти в ТОП?
Владельцы сайтов и оптимизаторы ошибочно полагают, что поисковая оптимизация лендинга (...