Черная пятница в UPROCK! 2 дня до конца распродажи!

Состояние мобильного UX 2023

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

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

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

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

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

В этой статье мы расскажем вам о самых важных выводах, к которым мы пришли в ходе исследования.

Исследование пользователей

Для подготовки пятого отчета об удобстве использования мобильных устройств мы провели несколько удаленных и личных юзабилити-исследований с 19 участниками из США, которые протестировали 60 сайтов и приложений. Также мы использовали результаты и наблюдения из исследования, посвященного юзабилити дополненной реальности.

Единообразие

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

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

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

Один из примеров — отсутствие видимой кнопки “Назад” и использование вместо нее горизонтального свайпа для возврата на предыдущую страницу как в последних iPhone, так и в телефонах Pixel, выпущенных Google. Другой пример — замена Apple 3D Touch на длительное нажатие — жест, который теперь используется как на Android, так и на iOS. Конечно, все осложняется тем, что Android может быть по-разному настроен производителем устройства.

Длительное нажатие на иконку приложения как в iOS (слева), так и в Android (справа) раскрывает список доступных действий для конкретного приложения.

Равенство контента и отказ от “полной” версии сайта на мобильных устройствах

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

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

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

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

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

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

Во-первых, Интернет стал еще ближе к миру нативных приложений. С появлением прогрессивных веб-приложений (PWA) некоторые мобильные сайты стали очень похожими на нативные приложения. У них может быть специальная иконка на главном экране и отдельный слот в списке запущенных приложений. Они могут хранить информацию на телефоне, работать в фоновом режиме и (по крайней мере, на Android) получать доступ к функциям телефона, таким как push-уведомления, которые долгое время были недоступны в вебе.

BMW.com — это прогрессивное веб-приложение. Элементы управления и пользовательский интерфейс браузера (например, строка URL) не видны или не доступны в PWA (слева). Более того, как и родное приложение BMW, PWA отображается в списке запущенных приложений отдельно (справа).

Но мир нативных приложений также предпринял определенные шаги, чтобы приблизиться к Интернету. Одним из недостатков нативных приложений является то, что их нужно устанавливать в магазине приложений — пользователь должен потратить время (и память на своем телефоне), чтобы загрузить приложение. Однако с появлением функций “app clips” (на iOS) и “instant apps” (на Android) пользователям не обязательно устанавливать приложение на телефон для выполнения простых задач, таких как заказ еды или оплата парковки.

С помощью Panera Bread clip для iOS пользователи могут заказывать еду, не устанавливая приложение на телефон (и не посещая веб-сайт). О такой возможности сигнализирует большой оранжевый круг в приложении Apple Maps. К сожалению, большинство пользователей еще не знакомы с этим паттерном (как и в целом, с app clips или instant apps).

Упрощенный вход и регистрация

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

За последние годы появилось множество решений, которые упростили процесс входа в систему и регистрации. Это и биометрические методы аутентификации (Face ID, отпечаток пальца), и способы оплаты (Apple Pay, Google Pay, PayPal и т.д), и встроенные менеджеры паролей в браузере и на телефоне. Причина в том, что дизайнеры наконец осознали — на мобильных устройствах следует свести энергозатратные действия к минимуму.

Последний тренд — регистрация без пароля — создание учетной записи при помощи одноразового пароля (OTP) или волшебной ссылки. Под одноразовым паролем подразумевается проверочный код, который отправляется в формате сообщения на номер телефона (или адрес электронной почты, в случае с волшебной ссылкой), привязанный к аккаунту.

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

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

Приложение Kayak для iOS также предлагает пользователям возможность установить ключ доступа для своей учетной записи.

Маленький экран

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

Тем не менее, урок усвоен не полностью — мы по-прежнему встречаем слишком длинные веб-страницы с избыточной декоративной графикой. Иногда это оправдывают тем, что “мобильные пользователи умеют и привыкли скроллить”. 

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

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

Слишком много оверлеев

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

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

Встроенные браузеры

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

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

Приложение FlyDelta для iOS: панель вкладок содержит гамбургер, который открывает несколько ссылок (слева). Участники исследования выбрали опцию “Изучить наши пункты назначения”, которая открыла страницу Delta.com во встроенном браузере с еще одним гамбургером в верхнем левом углу (справа). Два гамбургера открывали разные списки опций. Участники случайно выбрали верхний гамбургер вместо нижнего, чтобы перейти на другую страницу.
Espn.go: элементы управления встроенного браузера загораживали кнопку оформления заказа в нижней части экрана (видна справа). У одного из участников нашего исследования возникли проблемы с ее поиском, поскольку кнопка расположена поверх прокручиваемого содержимого, но под панелью инструментов браузера (слева).

Заключение

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

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

Источник
и
:
arrow