Как команда сало собирала

2014 год ознаменовался выходом Material Design от Google. Все кинулись изучать гайды, смотреть примеры, представлять как они переделали бы свои старые приложения под новый лад. Дизайнеры стали постить свои анимашки и редизайны на профильных сайтах, разработчики пилить коды анимаций, верстальщики рвать волосы на голове. Конечно же, эта мода не обошла стороной и Aviasales.ru.

Рассказ пойдёт о том, как создавалась Мобильная версия сайта Aviasales. Постараюсь всё это рассказать простым языком.

С чего всё началось

Мобильная версия сайта существовала очень давно. Её дизайн разрабатывался в те времена когда всем известный Стив Джобс выпустил iOS 4. Да, вероятно сейчас вы скажете “Фу! Как это могло ваще приносить деньги?”. Вы знаете, приносило и достаточно хорошо приносило. Ведь львиная доля трафика в 21 веке — это мобильник и планшет. В компании всегда знали, что мобильная версия должна быть подстать полной версии, но руки всё никак не доходили. К тому же, у Aviasales есть нативные приложения для самых популярных устройств:

Apple Store
Google Play
Windows Store

Мобильная версия (образца 2011 года) работала достаточно долгое время. За её редизайн в разное время брались 4 дизайнера. Сроки дедлайна постоянно переносились и это связанно не только с решабельностью задачи, но и с загруженность дизайнеров. В результате финал наступил в декабре 2014 года. Материал-дизайн, приглянулся техническому директору (наверно потому что он пользуется HTC), и команда погрузилась в изучение гайдов и разработку.

Проектирование нового интерфейса в общей сложности заняло около 1,5 недель. Всего то 5 экранов, но тем не менее, на каждый было от 3 до 10 итераций.

Как принимается дизайн

Дизайнер — это связующее звено между пользователем и сайтом. Он понимает как может вести себя пользователь, но не всегда может понять, что его решение будет очень труднореализуемое в жизни. Поэтому каждый раз при внесении изменений в логику экрана, дизайнер показывает проделанную работу коллегам. Также при выборе решений и реализации их для A/B тестирования, команда опирается на статистику, пользовательский и свой личный опыт. Сейчас вы можете сказать “Ой, всё. Дизайнер — слабак! Не может даже интерфейс проектировать” и вероятно будете правы, если смотреть с вашей колокольни. Но только в том случае, если работаете в коллективе который не ценит командную работу. Бывает так, что визуальные решения работают против бизнеса. С этим приходится мириться и находить “золотую середину”. Именно в такие моменты взгляд со стороны “не дизайнера” очень полезен проекту.

Командой обсуждается макет в среднем от пары фраз до 40 минут. Сразу же находятся плюсы и минусы, а также новые идеи. Никто не садится и не делает проект дальше, пока остаются вопросы или замечания к макетам. Это не значит, что все, просто “бла-бла-бла”, аж целых 40 минут. За это время, где-то в мире умирает 3 проекта, идеи которых могли бы реализоваться в Aviasales, но не прошли жесткий check командой на логичность и надобность.

Именно благодаря командной работе, любое решение является взвешенным и обдуманным, что позволяет уйти от “предвзятости” и “мне так нравится”. Мы самостоятельно находим решение и коллективно рассматриваем. Так что дизайнер без разработчиков — то же самое, что водитель без руля, вроде как и едет, но поворачивать в нужное направление не может. Если вы хотите качественно, быстро и правильно создавать продукт, сажайте дизайнера с разработчиками в одном месте. Так вы сократите кол-во переписок в скайпе/почте/бейскампе.

С дизайнера начинается порядок

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

Для того чтобы любой коллега мой найти правильный файл, дизайнер разбивает всё по папочкам, присваивая им понятные, адекватные имена. Как видите, всегда присутствуют папки “шлак”, “тест”, “в проде”.

В проде — в эту папку попадают только финальные файлы (png, jpg, psd, svg) пришедшие папку “тест”. Это все идеи которые были добавлены в процессе, обдуманные, нарисованные и утвержденные.

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

Шлак — то, что было в процессе, идеи, гон, реализации и неудачные варианты. Они остаются всегда для истории, и, возможно, доработки в будущем.

В результате после передачи всех макетов в разработку, папка хранится в течении 3 месяцев и далее архивируется и переносится в папку с лаконичным названием, например “2015” внутри которой хранятся папки начиная с “январь” и заканчивая “декабрь”. Это помогает дизайнеру и разработчикам в дальнейшем находить актуальные макеты. Вот такая она “магия” порядка.

Вёрстка и программирование

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

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

  • iPhone (вся линейка за исключением 2G, 3G, 3GS)
  • HTC M8
  • Lumia 920
  • Lenovo (хоть убейте не помню какая)
  • OPPO
  • Ipad (вся линейка за исключением 1 поколения)
  • Парочка Samsung
  • Пара непонятных планшетов с Android на борту
  • Веб эмуляторы разных телефонов

Изначально мы пошли по не правильному пути, о чём не пожалели, но потеряли немного времени. Мы думали только о больших устройствах, как это делает Google. Но изучив статистику, было принято решение реализовывать интерфейс под 4 разрешения. Да, мы не забыли о том, что пользователям старых телефонов, хочется чувствовать себя комфортно. Мы постарались максимально удобо адаптировать дизайн под эти разрешения и вывели необходимые для работы дизайнера размеры, разумеется в формате @2x. В результате, мы смогли быстро “примерять” все новые идеи на макетах и оценивать их будущее, еще на этапе проектирования.

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

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

На рынке существует множество устройств с различным разрешением и пропорциями экрана. Например Meizu, ныне набирающий популярность в России имеет соотношение строн 16:10, против стандартных 16:9. Мы решили эксперементальными способами создать валидную и адаптивную верстку. Проблема состояла больше в том, что при выравнивании элементов нельзя задать им одинаковые значения как по вертикали, так и по горизонтали. Пришлось “творить магию”, чтобы одна и таже кнопка была у разных устройств на своём месте. Как уже выше говорилось, мы сделали свой маленький, тестовый парк гаджетов и начали тестировать все свои решения. Ввели для себя специальную величину измерений, благодаря которой команда всегда понимала, что и куда двинуть в вёрстке.

Изучив гайды гугла, мы начали штудировать интернет на наличие сервисов, которые могут предоставить уже готовые решения анимации “в стиле material design”. Увы, множетсво решений пригодны только для десктопный сайтов и никак не хотели работать в мобильниках. Тогда мы решили разработать свои решения и мы сделали это!. Потратили время и получили то, что требовалось. Так же мы отказались от  части анимаций, мы отказались в пользу скорости работы мобильной версии.

Дальше, можно долго рассказывать как мы писали код, но поймут это только программисты. Команда работала в режиме “или один, или все”. Были задачи, которые брал один человек и делал от начала и до конца. Что это значит? Всё просто:

  • он изучает задачу
  • он её решает
  • он её тестирует
  • она деплоится в рабочую ветку

Только так. Порой, когда простая на первый взгляд задача, становилась непростой, подключались все. Это и есть прелести Скрам. В процессе работы было проведено порядка 9 A/B тестирований одного только главного экрана. И вот, именно о нём, сейчас хочу рассказать подробнее.

Красота против статистики

Изучив множество страниц гугловский гайдов, полистав дриблы и подобные сайты, мы создали свой первый вариант главной.

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

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

Как же так! Это же не красиво и не привычно! Низ переполнен всякой хренью! АаАААаааАа! Опасность! Я буду бухать!!!”

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

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

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

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

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

Поделиться
Отправить
Запинить
Ваш комментарий
адрес не будет опубликован

ХТМЛ не работает

Ctrl + Enter
Популярное