Лого vc.ru

Разбор полётов: Удачные решения и ошибки в интерфейсах популярных приложений

Разбор полётов: Удачные решения и ошибки в интерфейсах популярных приложений

Пространство для запуска стартапов #tceh подготовило перевод блога UX-дизайнера Кристал Хиггинс First Time User Experiences, в котором она подробно разбирает удачные и ошибочные решения при разработке приложений, а также предлагает способы улучшения интерфейса.

Поделиться

Игра TwoDots

Начинаем с успешной и хорошо выполненной игры TwoDots.

Удачные решения:

  • Разработчики TwoDots сразу погружают новых игроков в геймплей: после выбора первого уровня нужно пройти быстрое обучение непосредственно во время игрового процесса. Первые уровни заменяют скучную инструкцию, моментально обучая при помощи касаний объединять две или более точек с одним и тем же цветом по диагонали.
  • Разработчики не активируют дополнительную механику, пока пользователь не перейдёт на соответствующий уровень сложности. Постепенное вовлечение позволяет избежать лишнего потока информации для начинающих. Так, при достижении третьего уровня и ознакомлении с основами добавляется механика с квадратами. Теперь пользователи могут соединять точки при помощи выделения квадратом.
  • Доступ ко всем тренировочным уровням можно получить из внутриигрового меню. Более того, начинающий игрок может убежать вперед и попробовать приёмы, с которыми он ещё не знаком.
  • Экраны загрузки используются в качестве элементов обучения. Например, на одном из экранов пользователь узнает о восстановлении жизней каждые 20 минут.
  • Вместо традиционных механик с бонусами на главном экране, когда пользователю предлагают различные «плюшки» в игре за авторизацию или шаринг информации в социальных сетях, TwoDots напоминает о такой возможности после победы или потери жизни. Этот метод оказывается эффективнее за счет эмоциональной вовлечённости.
  • Вместо традиционных способов с монетизации по Freemium-модели TwoDots предлагает пользователю способ пополнить жизни через систему встроенных покупок.

Что стоит улучшить:

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

Сайт и приложение Zoosk

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

Удачные решения:

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

Что стоит улучшить:

  • Сайт и приложение: в обоих случаях пользователя вынуждают при регистрации принимать различные соглашения. Это вызывает негативные эмоции от использования сервиса уже после демонстрации возможностей Zoosk.
  • Сайт и приложение: разработчики используют избитые рекламные фразы: «позволь лучшему приложению для знакомств найти тебе пару», «найди того, с кем можно поговорить» и другие. Основная фишка Zoosk — специальный инструмент для знакомств на основе различных факторов — оказывается погребена под этими рекламными сообщениями. Разработчикам стоит сконцентрироваться именно на этой функции.
  • Приложение: пользователям не предлагают бесплатный аккаунт для ознакомления в отличие от сайта.
  • Приложение: после установки Zoosk требует предоставить доступ к «Центру уведомлений» и отслеживанию местоположения перед тем как объяснить, зачем приложение использует это.
  • Сайт и приложение: новый пользователь вынужден пройти пошаговую регистрацию, состоящую из 7 пунктов. Отсутствует функция пропуска или варианты без ответов. Конечно, Zoosk — приложение для знакомств, но некоторые вопросы в пунктах могут оказаться слишком личными для пользователей. Разработчикам стоило наглядно продемонстрировать, как именно ответы на такие вопросы могут помочь в поиске второй половинки.
  • Сайт и приложение: новым пользователям принудительно демонстрируется туториал. Если в большинстве хороших приложений такой метод, наоборот, увлекает, то тут он ощущается больше как угождение желаниям разработчиков.
  • Сайт и приложение: если пользователь прошёл обучение на одной платформе, то это никак не сохраняется. При установке Zoosk на Android или, наоборот, iOS придётся вновь проходить обучение. Такой прогресс должен синхронизироваться через сервера, чтобы исключить прохождение туториала повторно.

Приложение Human

Тренд фитнес-трекеров и помощников в отслеживании физической активности не позволил нам пройти мимо приложения Human. Концепция проста: после установки пользователям напоминают о необходимости 30 активных минут в день.

Удачные решения:

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

  • Human отображает запросы на доступ к уведомлениям и другим системным службам после объяснения, для чего это нужно. В одном списке объясняется, зачем пользователям давать приложению доступ к ним.

Нужно доработать:

  • В нескольких случаях Human использует абстрактные формулировки, не конкретизируя, сколько именно осталось до конца настройки. Например, экран «The Daily 30» без объяснения о прогрессе регистрации нового пользователя сменяется сообщением «Like Magic».
  • Список с отображением запросов на разрешение доступа к определенным функциям удачен, но испорчен плохой реализацией. Иногда, даже если не выбрать ни одного варианта, Human продолжает требовать доступ к уведомлениям или местоположению.

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

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

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

Удачные решения:

  • Мобильная версия сайта отображает подборку вещей, которые пользователь может посмотреть без регистрации. Предложение создать аккаунт появляется в тот момент, когда пользователь хочет отследить скидку на какую-то вещь или при скроллинге в самый низ страницы.
  • Сайт использует простую систему уведомлений для демонстрации возможностей интерфейса: всплывающие надписи появляются при навигации по разным страницам и связаны только с ключевыми функциями.
  • Во время отображения окна регистрации сайт запоминает страницу, на которой находится пользователь.
  • Пользователям открыт доступ к внутренним разделам сайта без регистрации. Это очень важно, так как многие наборы аксессуаров и одежды из Polyvore связаны с Pinterest.

Нужно доработать:

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

Портал Handy.com

Сервис Handy.com позволяет найти исполнителей для уборки дома. Разработчики не предусмотрели возможность использования мобильной версии, поэтому мы рассматриваем только дизайн веб-версии.

Удачные решения:

  • Первая страница хорошо фокусирует взгляд посетителя на двух ключевых предложениях: «Заказать уборку дома» и «Посмотреть все услуги». Для нового пользователя такой подход очень удобен и избавляет от выбора среди большого числа услуг. Если пользователю интересны другие варианты, то он может самостоятельно выбрать такую опцию.
  • Большая часть домашней страницы поддерживает эти посылы рекламными формулировками: «проверенные профессионалы», «заказ на завтра», «100% возврат денег» и другими. Вся домашняя страница разработана последовательно для повышения доверия у пользователей;
  • Пользователи сервиса Handy получают доступ к бронированию и оформлению услуг без регистрации. Это выгодно отличает Handy от конкурентов.
  • При заполнении информации для оформления первой уборки или другой услуги на Handy автоматически отображается скидка к этой услуге и доступное для бронирования время. Это удачный способ удержания пользователей.
  • Процесс оформления заказа разбит на два шага: нужно предоставить информацию о помещении для уборки, после чего пользователь получает стоимость уборки. Впоследствии новым пользователям предлагают указать свою почту для уведомлений о возможных скидках, а это увеличивает вероятность осознанной регистрации. Такая регистрация оказывается намного выгоднее принудительной.

Что стоит улучшить:

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

Чайник Breville

Оформлению технологичных аксессуаров сейчас уделяют не так много времени. Однако именно в оформлении упаковок берут начало многие приёмы UX-дизайна.

Инструкция по быстрой настройке и использованию:

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

Встроенные подсказки

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

Приложение SmartThings для iOS

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

Удачные решения:

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

Что стоит улучшить:

  • Разработчики SmartThings подразумевают, что все пользователи, скачавшие приложение, уже приобрели консоль SmartThings для управления умным домом. Но некоторые пользователи могли скачать приложение из-за из первых позиций в App Store или рекламы на каком-либо сайте. Поэтому стоило предусмотреть возможность заказа консоли SmartThings непосредственно из приложения или хотя бы отобразить ближайшие точки продаж на карте.
  • Незарегистрированные пользователи не получают доступ к экрану «Hello, Home», на котором происходит большинство действий. Разработчикам стоило рассмотреть возможность предоставления тестового доступа к этому разделу из режима «Explore».
  • Нужно объяснить пользователям SmartThings необходимость регистрации. Попытка использовать некоторые возможности приложения заканчивается сообщением об обязательной регистрации, не предоставляющем информации о тех бонусах, которые получают авторизованные пользователи.
  • При первой авторизации разработчики SmartThings буквально закидывают пользователей десятками сообщений и уведомлений. Такой хаос после первого запуска только отпугивает, поэтому нужно отображать информацию структурированно и в отдельных разделах.

Веб-сервис Wantable

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

Удачные решения:

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

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

Что стоит улучшить:

  • Текст для первого экрана незаметен из-за красочных фоновых фотографий.
  • Для получения первой подборки советов потребуется внести плату. Куда более логичным шагом было бы предоставить первую подборку с набором аксессуаров и вещей бесплатно, а для заказа последующих запросить регистрацию и стандартную оплату.
  • При первом подборе вещей нужно заполнить много параметров, а это увеличивает порог входа в сервис. Только представьте: пользователю нужно разом вспомнить размеры всех типов одежды, а без этого продолжить подбирать вещи в Wantable невозможно. Иногда на этом шаге пользователи могут отказаться от оформления подписки именно из-за количества требуемой информации. Было бы куда лучше, если бы сервис Wantable требовал размеры только непосредственно при выборе вещей и запоминал их самостоятельно.
  • Информация на странице не кэшируется, и при случайном обновлении страницы или нажатии кнопки «Назад» вся информация сбрасывается. В итоге пользователь отбрасывается к первому шагу, а повторять путь с вводом всех данных станут только единицы.
  • В некоторых случаях вёрстка на странице ввода своих размеров отображается некорректно: картинки наезжают на текст. А в случае с оплатой такого сервиса у пользователей не должно появляться сомнений в компетенции разработчиков технической составляющей проекта.

Приложение HBO Now для iOS

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

Удачные решения:

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

Что стоит улучшить:

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

Приложение и веб-сайт Twitch

Сервис Twitch предназначен для проведения прямых трансляций из видеоигр или других приложений.

Удачные решения:

  • Сразу после запуска Twitch предоставляет доступ к контенту даже новым пользователям. Разработчики не стали задерживать пользователей различными инструкциями, обязательной регистрацией и другими способами. Мотиватором для регистрации становится сам контент;
  • На сайте и в приложении пользователи сразу получают доступ к контенту без принудительной регистрации. Это позволяет сразу просматривать весь сгенерированный пользователями контент на Twitch и мотивирует к покупке платного аккаунта для разблокировки новых функций.

Что стоит улучшить:

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

Приложение TaskRabbit

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

Удачные решения:

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

Что стоит улучшить:

  • Ссылка для просмотра запросов из трендов на начальном экране слишком маленькая, её легко пропустить. Разработчикам TaskRabbit стоит подумать о переоформление экрана и выделить под эту функцию больше места.
  • Приложение должно автоматически узнавать почтовый индекс, а не спрашивать его у пользователя.
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Вроде и статься хорошая, но как-то так сделано очень непонятно.

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

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

Сейчас обсуждают
Антон Адамов

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

Компания «Альянс» показала на бутылках своего сидра героев знаменитых картин в состоянии опьянения
0
Yus Teryukalov

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

«В кризис банк никто не купил, пришлось развивать самому»
0
Philip Salnikov

Суммы инвестиций и заработков тоже удивляют. Кому нужны любительские фото в таких количествах?

«Я потратил $10 млн и два года на то, что мог выяснить за 4 недели»: основатель Twenty20 об ошибках проекта
0
Sakari Sauso

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

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Sakari Sauso

но драйв этот сомнительный, в идеале, ты сам должен выбирать продукты с одной стороны, а с другой, это для тех кто не совсем готовить умеет, т.к. речь о конкретном рецепте, а если у меня в холодильнике половина продуктов для блюда есть? Сразу вспоминается Никита Лихачёв))) Хотя вот пишу это и сам понимаю, что лишний раз мотивировать людей готовить дома для себя и семьи всё таки благое дело)))

«Азбука вкуса» и бывшая «Афиша-Еда» запустили сервис для доставки ингредиентов по рецептам журнала
0
Показать еще