Пример использования UX: Duolingo

В блогосфере, полной статей, посвященных единым, часто гранулированным компонентам дизайна пользовательского опыта, пример от Codal's UX нацелен на изучение UX с комплексной точки зрения, чтобы изучить, как опыт функционирует в целом.

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

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

Все это делает Duolingo идеальным кандидатом для исследования.

Иконография

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

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

Начальный экран

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

Их мэссэдж: «Учите язык бесплатно. Всегда.” подитоживает цель приложения и акцентирует свои две основные плюсы:

1. Это бесплатно и

2. Это работает

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

С более эстетической точки зрения дизайн начального экрана (и самого приложения) похож на школу флэт-дизайна, с намеками на язык материального дизайна Google.

Наконец, никакой экран не будет завершен без выделения CTA (call to action) в нижней части страницы. Мы видим две простые, неукрашенные кнопки - ничего яркого или особо модного в Duolingo нет - читаем «Начать работу» и «У меня уже есть учетная запись». Я нажимаю на первое и мы идем дальше!

Поехали?

Теперь будет интереснее.

Когда я нажал «Начать работу», я ожидал экрана, который заставил бы меня создать учетную запись или профиль Duolingo. Большинство приложений запросили бы мое имя, электронную почту или пароль. Не Дуолинго.

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

Моя единственная жалоба - это отсутствие панели поиска. Не хочется искать язык, который я хочу изучать, бесконечно. Для простоты я выбираю первый вариант - испанский.

Приложение выводит меня на экран, который немедленно прерывается нашим старым врагом - всплывающим окном «Мы хотим отправлять вам уведомления». Ключ к хорошо спроектированному уведомлению - это объяснениее пользователю:

1. Почему вы его запрашиваете и

2. Почему нажатие «да» будет ему полезным

По большей части в Duolingo есть оба эти пункта.

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

Обучение

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

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

Когда я выбираю свой вариант, голос, предоставляющий испанское произношение, воспроизводится.

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

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

Я заканчиваю свой первый урок, и появляется экран «Урок завершен». Оставаясь верным стратегии игры, я зарабатываю «XP» и наблюдаю, как круг заполняется оранжевым цветом, означая, что я выполнил половину своей ежедневной цели.

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

И теперь, наконец, меня просят создать профиль. Это немного противоречиво, но я думаю, что эта стратегия « первым делом - игра, а профиль - потом» UX является одним из самых умных шагов Duolingo. Они сделали невероятно сильный аргумент в пользу того, почему я должен это сделать: я уже закончил урок, заработал XP, и узнал, как легко можно обрести 10% fluency - всего за пятнадцать минут. Я сделал это много за короткий промежуток времени, почему бы мне не создать профиль и не продолжить свой успех?

Профиль

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

Окончательный вердикт

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

Во-первых, о хорошем. UX Duolingo последователен и идеально согласовывается с их образовательной стратегией геймификации. Начиная с логотипа App Store и заканчивая фактическими экранами курсов, все приложение заполнено забавным и простым дизайном. “All-business” части, такие как создание профиля, минимизируются и де-подчеркиваются.

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

Но в целом, я думаю, что пользовательский опыт Duolingo демонстрирует согласованную, хорошо выполненную стратегию проектирования, которая является интуитивно понятной и достаточно user-friendly для любого, кто ее использует.