Пользователь
0,0
рейтинг
2 апреля 2014 в 17:19

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

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

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

Когда вы размещаете фото в 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.

Перевод: Oz Lubling
Andrew @Relver
карма
23,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (12)

  • +2
    кому интересна тема, вот моя статья на основе своего опыта создания приложения:
    «Три правила проектирования интерфейсов с высокоскоростным пользовательским взаимодействием»
  • +6
    Кажется вас преследуют единицы

    • +4
      надеюсь они ограничатся только преследованием )
  • +2
    Как раз вчера, загрузив Minion Rush подумалось о «психологии скорости взаимодействия». С аппстора грузиться основной модуль — 30 мб. Затем, сразу после запуска, еще столько же. И потом после заставки еще «чуть чуть»… При этом загрузка сопровождается шуточными комментами типа «ой, вот тут еще немного кода осталось подгрузить», «ржем над фотками на вашем устройстве… т.е. загружаем доп. ресурсы» и т.п.
  • +4
    В Whatsapp сделали блестящий ход, приложение показывает первую галочку сразу же.

    Не знаю, как на iPhone, но на Android и Windows Phone, пока сообщение не отправлено, показывается иконка часов и только после отправки одна галка.
    • +1
      Подтверждаю. «В самолёте» галочка никогда не появится. Да и при любом сбое связи галочка «отослано на сервер» не включается методом «заранее гарантирую».
      • +2
        Да, достоверность статьи хромает :(
        • +1
          Думаю причина в том, что разработчики успешных приложений быстрее всех выпускают новые версии. В наше время информация к сожалению слишком быстро устаревает. Однако надеюсь что этот факт не помешает донести до разработчиков основную идею, а также те подходы, которые изложил автор статьи.
    • +2
      И слава богу! Когда UI начинает лгать, чтобы притвориться лучше, чем он есть, это раздражает.
  • –3
    Безграмотность перевода зашкаливает. Жаль, что это становится нормой.
    • +1
      Мне всегда казалось что критиковать в комментариях на хабре нужно или конструктивно или никак. Если вам правда жаль, и вы хотите что-то изменить, то с удовольствием приму вашу помощь в корректировке перевода.
  • +1
    Уже много лет Ubuntu фактически начинает установку сразу же после того, как пользователь указывает, куда нужно установить ОС (а это, в свою очередь, делается сразу же после выбора языка). И, пока пользователь отвечает на остальные запросы установщика, уже идёт форматирование и копирование файлов. Вместе с возможностью одновременно с установкой открыть браузер (или что угодно ещё), а также всего одной перезагрузкой (в уже готовую, установленную систему) и необходимостью отвечать на какие-либо вопросы всего один раз (в самом начале) это очень сильно выделяло процесс установки Ubuntu, и впечатления (по сравнению с Windows XP или Windows 7) у пользователей оставались намного лучше.

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