Психологическая составляющая скорости взаимодействия в мобильных интерфейсах

в 13:19, , рубрики: mobile development, usability, Дизайн в IT

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

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

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

image

Instagram показывает сообщение «Завершено» к тому моменту когда я закончу публикацию своей картинки.

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

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

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

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

Обмен сообщениями это другой пользовательский опыт где скорость определяет саму сущность приложения. Давайте попробуем сравнить подходы в работе Whatsapp и iMessage в том как они информируют своих пользователей об отправке и доставке их сообщений.

image

Две галочки Whatsapp для подтверждения отправки и доставки сообщения.

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

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

image

Прогресс-бар iMessage отображает процесс отправки сообщения

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

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

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

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

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

image

Facebook Paper app показывает структуру блоков

Это приложение (смотрите FB Paper) показывает «структуру» контента ", еще до того как контент полностью загрузится и появится на экране, пользователь может видеть расположение и формат блоков контента. И вы ждете рассматривая что-то вроде плана или прототипа. В итоге, когда контент появится, у пользователя складывается ощущения плавности и естественности всего процесса загрузки.

image

Цветовая структура блоков в Pinterest

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

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

Больше мыслей о дизайне продуктов и пользовательском опыте в моем твиттере @ozlubling.

Автор: Relver

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js