В предыдущей статье мы рассказали о первых дизайн-концептах, landing page и логотипе для нашего проекта Learzing, в этой расскажем о создании первого приложения.
После прохождения курса Technology Enterpreneurship от Стэнфордского университета (чуть подробнее о нем — в первой статье) в нашей команде оказалась учительница английского языка. Почему бы не сделать первое приложение для изучения английского? К тому же это одна из самых популярных тем в онлайн-образовании.
Для того, чтобы сделать по-настоящему нужное приложение, начинать нужно не с собственных представлений, а с потребностей пользователей. То есть можно сделать то, что будет интересно пользователям, исходя из вашего мнения и мнения вашей команды, а можно сделать то, что удовлетворит конкретную потребность или решит конкретную проблему. Между представлениями разработчиков и потребностями клиентов, как правило, лежит пропасть. Именно это и является частой причиной неудач.
Зная это, мы решили спросить у учительницы о том, что нужно студентам при изучении английского языка. Перебрав несколько тем, мы остановились на изучении идиом и сленга. Часто, смотря фильм, читая книгу или слушая песню на английском (уже не говоря об англоязычных форумах и блогах), мы сталкиваемся не просто с отдельными неизвестными словами, а с целыми выражениями, значения которых не понимаем. Зачастую эти выражения неформальные, поэтому с многими из них при классическом изучении английского можно и не столкнуться. При этом идиомы и сленг занимают значительную часть языка и их знание позволяет приблизиться к тому английскому, на котором говорят в реальности.
Вот так мы получили идею для первого приложения. Как же обычно изучают идиомы? В виде тестовых вопросов. Например:
I went scuba-diving for the first time last summer. I thought it was going to be a ..., but I soon realized that it was a lot more difficult than I'd expected.
- cup of tea.
- piece of cake.
- can of Coke.
- mug of beer.
Нужно выбрать правильный вариант ответа в ситуации, в которой используется идиома. Для тех, кто играл в английскую версию Duke Nukem 3D (или Duke Nukem Forever), выбрать правильный ответ не составит труда :) Кстати, попробуйте угадать правильные ответы на этот и другие вопросы ниже без использования поисковых систем, словарей и прочего. В конце статьи — правильные ответы, с русскими аналогами.
Обычно образовательные методики довольно скучные. Что можно добавить, чтобы сделать интереснее? Интерактив, игровую составляющую и социальность — таков рецепт интересного приложения из наших предыдущих рассуждений.
Одна из идей с игровой и социальной составляющей от нашей учительницы английского — игровая методика для тестовых вопросов, которая применяется в классе. У студентов есть игровые фишки, каждый ставит фишку на правильный, по его мнению, вариант ответа. Студент, угадавший правильный вариант, забирает фишки тех, кто не угадал. Если переложить эту механику на онлайн-игру, получаем мультиплеер, который делает игру еще интереснее.
Вопрос с 4 вариантами ответов напоминает игру «Кто хочет стать миллионером?», поэтому мы решили сделать нечто подобное для изучения идиом. И получили следующую первую концепцию для мобильного приложения:
Вопрос, 4 варианта ответа, ограничение времени на ответ и панель с результатами внизу. Можно сделать интереснее и добавить к тексту картинки. Если идиомы будут еще и нарисованы, пользователь сможет лучше запомнить правильную идиому. Помимо слов будет еще и визуальная ассоциация, плюс картинки повысят привлекательность приложения.
Иллюстрации для идиом
К сожалению, на тот момент в нашей команде не было иллюстратора, мы решили воспользоваться сервисом Fiverr (биржа услуг за $5), чтобы попробовать найти иллюстратора и подходящий стиль для отрисовки идиом.
Мы получили несколько иллюстраций. Например, вот так бы мог выглядеть человек, всегда задающий глупые вопросы:
Это иллюстрация для четвертого варианта ответа на вопрос (кстати, этот вариант неправильный):
An eager beaver
- is someone who is hungry
- is someone who works hard, busily and with enthusiasm
- is an animal with dark fur
- is someone who is always asking stupid questions
А вот это отец, который никогда не забывает по праздникам купить конфет своим детям:
Как можно догадаться, иллюстратор из Индии :) Сам вопрос:
A sugar daddy
- is a father who never forgets to buy some sweets for his kids on red letter days
- is a rich, elderly man who favours a young woman financially in return for special attentions
- is a person who suffers from diabetes
- is anyone who has unhealthy eating habits and favours all kinds of pastry and sweets
А вот так выглядит человек, который ненавидит шопинг:
Вопрос:
An awkward customer
- is someone who is always dropping things when he's shopping
- is a customer who fails to pay his bills on time
- is an unpleasant, difficult or dangerous person to deal with
- is a person who hates shopping
И последний пример — плотник, специализирующийся на изготовлении кресел:
An armchair expert
- is a person who offers advice on something he knows little about
- works in a furniture shop
- is a carpenter who specializes in making armchairs
- is someone who knows a lot about armchairs
Первый прототип
После экспериментов с иллюстрациями мы решили поучаствовать в хакатоне и результатом двухдневной работы стал прототип приложения для изучения идиом, который вписывался в концепцию нашей платформы.
Пользователь по ходу изучения получает очки, достижения и награды от партнеров.
Короткое видео с работой прототипа:
Чуть подробнее о «кухне» разработки на хакатоне с точки зрения участников нашей команды.
Разработка прототипа на хакатоне: опыт программиста
Разработка на хакатоне с нуля — это отдельное искусство. Результатом хакатона является проверенная идея. Идея проверяется и во время создания прототипа, и после, при его тестировании. По мере работы вы начинаете лучше понимать свою идею, уточняете, делаете ее ближе к реальности или отказываетесь от нее. Все, что вам нужно сделать на хакатоне, — это увидеть вашу идею в действии, понять ее намного лучше.
Так как есть высокая вероятность, что текущий вариант идеи будет отброшен, а время для работы крайне ограничено (как правило, 36-48 часов), то в ход идут всевозможные хаки. Вот примеры хаков из нашей практики:
- Картинка вместо целой страницы сайта. Вся динамическая составляющая страницы представлена HTML-элементами, размещенными по абсолютным координатам поверх фона-картинки.
- HTML-страницы, автосгенерированные из Adobe Muse, от кода которых течет кровь из глаз :)
- Бэкенд, реализованный на фронтенде. Это когда мы создаем тестовую «базу данных» прямо в браузере, используем ее и не пишем серверный код.
- Вместо разбиения визуальных объектов на элементарные переиспользуемые спрайты, лепим объекты большими, плохо переиспользуемыми спрайтами, сильно расходующими память.
В результате практически весь код, сделанный на хакатоне, можно выбрасывать. Еще одна особенность прототипа в том, что он обычно технически прост, и у команды может не хватить технических (впрочем, как и многих других) умений, чтобы реализовать окончательный продукт. Но в выбрасывании кода нет ничего плохого. Как известно, писать код с нуля, имея опыт разработки похожего решения и гораздо более конкретные требования к продукту, намного проще.
Здесь же нас подстерегает классическая проблема. Люди видят ваш протип с хакатона и думают, что вот, еще немного доделать и можно будет выпускать релиз. И если вы продолжаете разрабатывать продукт на базе прототипа, то… ну вы наверное сами знаете ;) Так мы и выбросили код нашего первого приложения. От него остались только коммиты в репозитории.
Разработка прототипа на хакатоне: советы дизайнера-иллюстратора
Я пришел на хакатон с подготовленным материалом: с базовыми элементами интерфейса, набором иконок и с блок-схемами собственного приложения в Adobe Muse.
В течение 30 часов в стрессовом состоянии очень трудно увидеть недостатки. Поэтому всегда проектируйте прототип приложения в векторном редакторе. Кривые можно всегда в дальнейшем дорабатывать и применить к финальной версии. Всегда используйте доступное для понимания решение — это означает, что не нужно придумывать велосипед в user experience, оставьте эту работу на потом. Беритесь за решения, которые очевидно показывают полный функционал вашего прототипа.
Воспользуйтесь готовым набором иконок: http://fortawesome.github.io/Font-Awesome/icons/. В процессе проектирования для расстановки объектов интерфейса рекомендуется использовать классическую шестиколонную верстку — это поможет структурированно распределять элементы веб-приложения. Для таких целей лучше всего подойдет фреймворк Bootstrap. Если нет времени разбираться с Bootstrap, создавайте прототип на одном из самых удобных инструментов — Adobe Muse.
«Пивот»
После хакатона мы бы, наверное, продолжили работать в этом направлении, но такой подход нам все еще казался недостаточно интересным. Это все еще было сильно похоже на обычные обучающие методики. А однажды мы узнали о новом (на тот момент) приложении QuizUp, в котором подобный подход был отлично реализован. Вопрос, 4 варианта ответа, играешь против онлайн-соперника — это было очень похоже на нашу идею.
Уже сейчас в QuizUp есть образовательные темы: математика, грамматика, орфография и т. д., в том числе уже сейчас есть тема Finish the Saying, которую можно считать обучением расхожим выражениям, что уже очень близко к идиомам.
Посмотрите на стремительную историю успеха QuizUp. Приложение было запущено 7 ноября 2013 года. Уже через пару недель приложение набрало 1,5 миллиона пользователей и компания-разработчик Plain Vanilla Games получила 2 миллиона долларов инвестиций. Через месяц уже 5 миллионов пользователей и еще 22 миллиона долларов инвестиций. После достижения планки в 10 миллионов пользователей на iPhone была запущена версия под iPad, а после запуска версии под Android приложение набрало 1 миллион пользователей всего за неделю. Вдохновляюще, правда? И как часто бывает, идея совсем несложная.
Чуть позже в App Store появилось приложение Idiom Stories, которое было не просто похоже на нашу задумку, а почти полностью ее реализовывало, именно для изучения английских идиом. А казалось бы — не самая очевидная идея. Скриншот из приложения — вопрос и 3 варианта ответа.
Что ж, если говорить в терминах lean startup (подробнее об этой методике — в нашей второй статье), можно считать, что мы проверили нашу идею, и исходя из полученных данных, решили двигаться в другом направлении. Модное слово — пивот, обычная ситуация для стартапа. Ну а если попроще и по-русски, то первый блин комом (тоже идиома, кстати).
В каком именно направлении мы решили дальше двигаться с нашим приложением? Читайте в нашей следующей статье.
Опрос
Приглашаем всех читателей помочь нам в создании приложения для изучения английских идиом — потратить несколько минут и заполнить небольшой опрос, который повлияет на нашу разработку.
Как мы упоминали выше, мы бы хотели прежде всего отталкиваться от пожеланий и потребностей пользователей (то есть вас), а уже потом от собственных идей. Все заполнившие опрос получат ранний доступ к нашему приложению.
Правильные ответы
- I went scuba-diving for the first time last summer. I thought it was going to be a piece of cake, but I soon realized that it was a lot more difficult than I'd expected.
Русский аналог — проще простого, проще пареной репы, как два пальца об асфальт :) - An eager beaver is someone who works hard, busily and with enthusiasm.
Русский аналог — трудоголик, работяга, энтузиаст. Еще вариант — «работать как папа Карло». - A sugar daddy is a rich, elderly man who favours a young woman financially in return for special attentions.
Русский аналог — «папик». - An awkward customer is an unpleasant, difficult or dangerous person to deal with.
Трудный или опасный человек (также: сложный, неприятный, вздорный, скверный). - An armchair expert is a person who offers advice on something he knows little about.
Русский аналог — диванный аналитик/теоретик. - An awkward customer is an unpleasant, difficult or dangerous person to deal with.
Трудный или опасный человек (также: сложный, неприятный, вздорный, скверный). - Идиома со скриншота прототипа: Most of my colleagues go for a drink after work on Fridays but I don't normally go. Going on a pub crawl is not my cup of tea.
«Not my cup of tea» по-русски — это не моё, это не для меня, не в моем вкусе. - Поговорка со скриншота QuizUp: It is the first step that is difficult.
По-русски можно сказать: первый шаг — самый трудный. - Идиома со скриншота Idiom Stories: He's feeling better but it was "touch and go" for awhile because he was unsure if he would ever get better.
Touch and go — критическая/опасная ситуация.
Автор: learzing
