По данным исследователей, которым мы склонны верить, к концу текущего года ¼ всех жителей Земли будут пользоваться смартфонами. Бойкое шествие мобильных устройств по планете подталкивает производителей технологий к переносу своих веб-продуктов на портативные гаджеты. Вопрос в том, как грамотно перенести фичу на мобильный? Руководитель мобильной команды LinguaLeo Константин Дегтярев Rirus рассказал, как выстроить этот процесс, и какие возможны подводные камни.

У нас в LinguaLeo мобильные приложение существуют уже 2 года: iPhone-приложение вышло в январе 2012, WinPhone — в мае, а Android — в октябре того же года. С момента релиза до 2014 года в приложениях развивалось только одно направление — тренировки слов. По факту, приложение было не самостоятельным продуктом, а лишь вспомогательным инструментом для пользователей сайта. Несколько месяцев назад мы начали уходить от концепции «дополнение к сервису» к концепции «Mobile First». Цель, которую мы решили реализовать — это наполнение приложения необходимым минимумом для изучения иностранного языка по методике LinguaLeo.

Прежде всего был определен список функций, которые реализовать нужно было 100%: тренировка слов «Брейншторм», видео с интерактивными субтитрами, «Грамматические курсы» и «Грамматический тест».

Тренировка «Брейншторм»

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

В первую очередь, мы посмотрели на юзкейсы тренировки на вебе. Когда пользователь сидит перед компьютером на сайте, он может потратить больше времени на занятие. Но мобильным он будет пользоваться в перерывах между основной деятельностью, например, стоя в пробке или в очереди. Поэтому логика «отвечай, пока не дашь правильный ответ» была бы губительной для тренировки на смартфонах. Вначале мы решили ограничить до 3-х раз число неправильных ответов при работе с одним словом на одной из частей тренировки (перевод, написание, аудирование). В итоге на «Брейншторм» попадало 6 слов, которые нужно было сначала посмотреть, а потом потренировать на 3-х внутренних мини-тренировках при возможности ошибиться до 3-х раз.

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

Помним, что на каждую из тренировок требуется время. Вот средние показатели по каждому процессу:
Демонстрация карточки слова — 2 сек.
Слово-перевод — 4 сек.
Конструктор слова — 7 сек.
Аудирование — 10 сек.

Итого получаем 6,5 минут в среднем на одну тренировку 6 слов. Для мобильного пользователя это много. Мы сами убедились в этом, когда тестировали «Брейншторм» в офисе. Эксперименты подвели нас к такой схеме:

На тренировку попадает 5 слов.
Ошибиться можно только 2 раза.

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

Грамматические курсы и тест

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

Для нас было важно, чтобы пользователи могли проходить грамматические курсы на мобильных устройствах. Этот раздел содержит очень большое количество теории, заданий и упражнений. Оценив пласт работы, который предстояло сделать, мы поняли, что можем потратить на разработку в несколько раз больше времени, чем планировали. Но понять, будут ли курсы пользоваться популярностью на мобильных или нет, очень хотелось. Поэтому мы пошли на следующий трюк: список грамматических курсов мы получаем через внутреннее API, и отображаем их на клиенте. Но вот сам курс мы уже открываем в WebView. Верстку мы адаптировали, и в результате — не всегда понимаешь, где WebView, а где приложение.


Минус такого подхода – проходить курсы можно только при подключении устройства к сети. Но плюс очевиден – мы за короткое время создали раздел для изучения грамматики на мобильных. Удивительно, но просьб «добавить офлайн курсы» мы получили не так много, как ожидали

Тест и курсы доступны во всех приложениях LinguaLeo.

TED Talks на мобильных

Наши пользователи просили реализовать просмотр видео на мобильных устройствах. Наконец, эта возможность есть у владельцев WinPhone и iOS: теперь они смотрят ролики TED Talks на своих устройствах. Мы адаптировали под мобильные версии специально разработанный нашей командой плеер с интерактивными субтитрами. Сам плеер был создан на нативных компонентах, без привлечения сторонних библиотек.

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

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

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

Занимайтесь каждый день с LinguaLeo, получайте удовольствие и результат! Следите за нашими новостями в Twitter, Facebook, vkontakte и Instagram.