Всем привет! Эту неделю с вами будет Валерий Яцко @viatsko. Работаю в Booking.com, живу в Хаарлеме в Нидерландах. :)

В Booking.com у нас очень-очень много команд на каждую часть сайта, конкретно я работаю в команде, занимающейся страницей отеля

На этой неделе мы поговорим об экспериментах и A/B тестировании. О том, как идея рождается в дизайне, верстается, тестируется

И, наконец, становится постоянной частью сайта

.@talgautb @viatsko будет, не все же время про работу :)

До Букинга проработал 5 лет в Студии Лебедева в основном занимаясь внутренними проектами, включая сам artlebedev.ru

А до Студии я фрилансерил. Помню, что начал заниматься вебом со статьи о PHP в ПЛ Special с полуголой девушкой на розовом фоне на обложке

@cssunderhood кем сейчас себя считаешь: верстальщиком или фронтенд разработчиком?

@cssunderhood ты дизайнер+фронтенд?

.@WasilisaFish думаю, что пришло время рассказать о процессе работы команды над фичами и из кого она состоит :)

Итак, в каждой команде у нас есть Product Owner, UX Designer, Client Side Dev, Copywriter, Backend Dev

Придумыванием идей занимается вся команда, mockup’ы рисуют все

Потом mockup’ы обсуждаются - нужно уметь рассказать какая гипотеза стоит за изменением и какой результат ожидается

Далее определяется, кто нужен для реализации задачи. UX Designer занимается растром, вектором, css и html, но не пишет js

Также дизайнер может нарисовать скетч уже в Photoshop/Sketch и передать его Client Side Dev или сверстать

Все зависит от сложности фичи. Clientside = это дизайнер, но не рисует, Designer = это clientside, но не пишет js. Тут примерно так

@cssunderhood как попал в букинг, как в студию? Было что-то интересное на собеседованиях? Или обычное тестовое, обычное интервью и велкам?

.@WasilisaFish совершенно разный рекрутинг, в Студию нужно портфолио, далее будет 1-2 собеседования + испытательный срок

В Букинге после подачи резюме сначала будет разговор с HR, зададут вопросы о понимании человеком нашего бизнеса и процесса тестирования

Потом будет тестовое задание, в случае его успешного решения - skype-интервью с парой людей этой же должности

Если они одобряют тебя как кандидата, то на следующей неделе звонит HR и приглашает в Амстердам

В Амстердаме уже проводится 2 пары собеседований, ведут их по 2 человека, просят написать код на листике

Ну и опять же вопросы о понимании бизнеса, так как в своей работе ты будешь иметь прямое на него влияние

Если проходишь 2 пары собеседований - попадаешь на финальное с Senior Team Lead или Senior Product Owner

Эти люди не пишут код, но занимаются стратегией развития бизнеса

Если тебя одобрили на всех этапах собеседования, то в тот же день вручают оффер и начинается процесс получения визы :)

@cssunderhood вот где пригодится "программирование на бумажке", которому учили в универе :)

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

Обычно требуется написать что-то простое, а потом задаются вопросы про улучшение. Смотрят просто логику написания и мыслительный процесс :)

@cssunderhood "что-то простое" это например что?)

.@_sashashakun для разработчика это тултип или простая валидация формы

Зависит от тех, кто проводит собеседование. Но сложность примерно на этом уровне.

@cssunderhood пользуетесь своим юзабилити гайдлайном или не практикуете?

.@WasilisaFish практикуем, со временем обновляем

Но тут стоит рассказать о процессе имплементирования новых идей.

Многие думают, что A/B тестирование - это сравнить, кто больше покупает - пользователи с красной кнопкой или с синей.

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

Куда они стали кликать больше, когда увидели эксперимент, на что больше обращать внимание, что искать.

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

После каждого эксперимента обсуждается, можем сделать еще удобнее для пользователя? Была ли верна наша теория? Как ведут себя пользователи?

Некоторые результаты заставляют отказываться от каких-то взглядов на UX и принимать новые.

@cssunderhood расскажешь о ваших исследованиях в этом плане? Напримре, какая все же продает-то?))

.@WasilisaFish меня пустили писать в этот твиттер на условиях, что результатами конкретными делиться не буду :)

.@WasilisaFish но попозже обязательно приведу примеры

Кстати если вам стало интересно попробовать устроиться в Букинг - подавайте резюме через меня :) Это быстрее и нам за это бонусы дают :)

@cssunderhood букинг скоро высосет из РФ всех вплоть до тех кто вчера прикрутил jquery слайдер : D

@cssunderhood но я подпишусь на тебя, ведь я то уже много слайдеров прикрутил)

.@_sashashakun те, кто только вчера прикрутил jquery, на первом же собеседовании говорят, что Букинг зарабатывает на баннерах

Важно не только быть хорошим разработчиком/дизайнером, но и иметь представление о бизнесе. Еще раз это повторю :)

@cssunderhood а что конкретно нужно знать о таком бизнесе?

.@PollyGlot если бы бизнес жил на рекламе, то твоя работа бы заключалась в максимизации показов рекламы, а не конверсии

@cssunderhood @_sashashakun на английском в тимках общаетесь или большинство снг и нет необходимости?

.@WasilisaFish официальный язык в компании - английский, насколько мне известно чисто русско-говорящих команд нет, везде микс

.@WasilisaFish за два месяца английский вполне подтягивается до свободного уровня

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

Я бы посоветовал эти же сериалы - Dr. Who и Dexter - актеры не мямлят и сюжет интересный

Кстати в Нидерландах в кинотеатрах вас ждут фильмы на английском, но с голландскими субтитрами :)

@cssunderhood да уж, особенно следить в Dexter стоит за Jennifer Carpenter - Fuck, fucking, fuck you, oh fuck…etc :D

@cssunderhood британский и полицейский английский. Friends в свое время заложили - много разговорного и уже смотрел ни раз

.@gunlinux верно, но в плане британского английского - неожиданно легкий, кстати в Букинге британцев очень много

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

К чему бы это? :) RT @iSnifer: @jsunderhood @cssunderhood а сделайте RT. Разработчики сайта РЖД, если видите это - напишите мне реплай!

А у вас в компании дизайнеры вовлечены в верстку, как у нас? Или только говорят как переделать?

@cssunderhood та же просьба, разработчик pochta.ru найдись :D

.@gunlinux ведущим в твиттер пригласить желаете? :)

@cssunderhood сегодня маленько в твиттере поспорил по поводу их решения 504 ошибки. Мы не падаем - мы обновляемся pic.twitter.com/5SLLzgfCnx

Надо будет и нам такое затестировать :)

@cssunderhood плохой дизайн – обманывать пользователя : (

Кстати об этике экспериментов. Вспомнилось что фейсбук экспериментировал с настроением пользователей

Грустным показывал грустные сообщения, счастливым - счастливые

И выяснили, что грустные/счастливые новости лишь усиливают ту или иную эмоцию пользователя

Этично ли проводить такие эксперименты? Плохо ли поступил фейсбук?

@cssunderhood хочешь сам контролировать своё настроение, не давай его контролировать другим - не читай газет, фейсбук, новости, ТВ до обеда.

@cssunderhood утром прочитал заголовки: узнал что погибло тьма народу, нашли вирус в курице, деньги снова пролюбили и вообще всё плохо.

@cssunderhood Хорошие новости не цепляют - нужна драма, шок, сенсация, чтобы оправдать ожидания всех, кто живёт по принципу «всё плохо».

.@dshster ну тут не только про плохие новости, и, насколько я знаю, эксперимент не привел к тому,что они перестали показывать плохие новости

@cssunderhood заодно ещё можно спросить, этично ли показывать по ТВ новости про убийства, не проведя перед этим исследования о их влиянии

@cssunderhood я выпилил Медузу из своей ленты и еще несколько новостных порталов (почти все) - жить стало гораздо легче, чем не эксперимент?

@cssunderhood почему не проводят эксперимент где показывают исключительно хорошие новости (не только котиков; успехи, достижения, открытия)?

@cssunderhood с английскими субтитрами?

.@WasilisaFish да, сериалы на английском с английскими субтитрами, ведь если не сможешь разобрать слово - не сможешь и найти что значит :)

@cssunderhood аларма! Если вы юзали text-align-last чтоб выровнять блоки по ширине в IE,то теперь хром его тоже поддерживает и там всё плохо

.@andreyvolokitin cool! спасибо за информацию

Еще хотелось бы отметить, что у нас дизайнеры занимаются не только рисованием/проектированием и css, но и разворачивают шаблоны на сервера

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

Продакшн обновляется 1-3 раза в день (по сути это релизы), это время когда готовая верстка и скрипты попадают на живой сайт.

@cssunderhood нихерасе у вас дизайнеры могут

@denishus @cssunderhood когда говорят, что дизайнеры где-то верстают—я представляю код,от которого хочется повеситься либо что-то совсем изи

.@WasilisaFish @denishus если дизайнер не верстает, то любой refine верстки - просто ад для верстальщика

Хочешь играться с border-radius? Поиграйся сам, 10 раз менять, показывать и спрашивать - трата времени, которое могло пойти на лучшие дела

@cssunderhood все эти манипуляции с размерами, цветом, радиусами и пр. я отношу к "изи" и не засчитываю как скил.Есть что-то правда сложное?

@WasilisaFish @cssunderhood Да нифига это не легко. Это как поиграйте со шрифтами для дизайнера

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

.@WasilisaFish @denishus а дизайнер использовать его и улучшать на свое усмотрение

@denishus @cssunderhood но суть не в том,если верстальщик поменяет цвет кнопки в фш,то он чо,дизайнер уже что ли?

.@WasilisaFish @denishus нет, но я не умею рисовать даже несмотря на наличие чувства прекрасного

.@WasilisaFish @denishus а ты - писать сложный js, но умение обоим писать и править css освобождает больше времени

.@WasilisaFish @denishus на, собственно, js либо дизайн, и позволяет помогать друг другу и не тормозить на проекте

Нужно ценить плюсы друг друга. В этом командная работа. Я считаю что умение писать css помогает обоим справляться эффективнее

Конечно, есть те, кто жалуются, что все не на Реакте и не на Ноде, но думаю, что такие есть везде.

Кроме того, последние четверг и пятницу месяца проводятся Хакатоны, где для Букинга можно мутить что хочешь и на чем хочешь

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

Закончу день интересной статьей дизайнера фейсбук про A/B тестирование и эксперименты medium.com/facebook-desig…

А завтра мы с вами подробнее поговорим про них применительно к дизайну верстке, как я и обещал :)

@operatino @cssunderhood так это про лонгриды. Гитхаб показывает, делится компания или нет, если не делится, не значит, что нет инноваций.

@korochinskiy Если не делиться, тоже плохо, кому это делать как не большим компаниям? Да и чаще просто показать нечего. @cssunderhood

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

.@operatino но я согласен, что opensource - это win-win для всех сторон, вопрос в основном - в желании и ресурсах инженеров

Кстати мы вчера обсуждали эксперимент Facebook над настроением пользователей. Такой был ответ на него в NY Times nytimes.com/2015/06/21/opi…

Про эту статью кстати рассказывают на многих семинарах по A/B тестированию и экспериментах. :)

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

..то что бы это было и где? Небольшое изменение, не глобальное.

Пока набираются идеи, расскажу немного о железе и рабочем месте.

Рабочая машина - это топовый MacBook на выбор: Air, Pro или ноутбук от Dell. Два комплекта зарядок, мышь, клавиатура и чехол для путешествий

Монитор - как правило 2x23”, но если есть предпочтения - они будут выполнены. То же касается и лицензий на софт.

Но мое самое любимое - стол с регулируемой высотой :) Я был доволен как слон, позволяет не тухнуть в течение рабочего дня от болей в спине

Кстати, в работе использую Atom. Недавно пересел с Sublime.

Это позволило сразу нафаршировать редактор фирменными фишками-подсветка синтаксиса наших шаблонов, линтер шаблонов, интеграция с виртуалками

Да, у каждого сотрудника есть столько собственных версий различных частей Букинга, сколько он хочет, на виртуальных серверах удаленно

Да,у Sublime частично что-то есть, но реализовывать плагины так, как задумывалось, не получалось-все же Sublime обновляется медленнее в разы

Мне нравится подход, который пропагандирует, например React - по сути разработчик делает компоненты. А дизайнер использует готовое.

Мы так в Студии на одном сайте сделали (мой последний проект в компании), на этой неделе будет анонс.

Мы использовали связку React+Redux и сделали для каждого компонента свой api, сделав их независимыми.

Дизайнер после этого мог как угодно двигать их по страницам и менять стили - ничего не ломалось и не требовало фронт/бек-девелопера.

Если снова найду презентацию Facebook, где они говорят про то, насколько выигрывают дизайнеры - обязательно пошарю :)

Nuclide вдохновил сделать нечто подобное и внутри компании и показал, что Atom может работать корпоративной IDE.

.@myjsalterego вот если бы у нас был компилятор @flowtype в C и он бы давал значительный выигрыш - я бы задумался

.@myjsalterego а переписывать весь код на @flowtype просто чтобы получить более четкие подсказки и линтер не всегда оправдано

Это вот такое окошко, позволяющее подключать разного типа провайдеры. Я сделал для себя git-grep провайдер, например pic.twitter.com/nYdJGnL8kC

.@myjsalterego дополню лишь, что есть стейджинг все же есть, но перед накатом релиза

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

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

Грубо говоря, берется снапшот репозитория - тестируется на ошибки на стейджинге - потом выкатывается в продакшн

Любой этап является откатываемым, конечно же.

Кстати, если все же заинтересовала работа в Букинге, то мы ищем UX-дизайнера grnh.se/8a1k32 и разработчика grnh.se/a7g4xv

Пришло время для еженедельного планирования, вот вам еще статья про разработку через A/B тестирование в AirBnB nerds.airbnb.com/experiments-at…

Также много статей есть в блоге blog.booking.com, надеюсь, что когда у @zastavnitskiy появится время, появится больше статей по A/B:)

Со стороны разработчиков

Вот вам неплохой стартовый комплект для Atom pastebin.com/j1xgb3iV, а дальше пичкаете плагинами под конкретную роль :)

Тут некоторые говорят, что git-blame может не собраться - смело используйте blame пакет вместо него

К концу недели обязательно пошарю свои наработки :)

Открыт приём докладов на конференцию о React в Амстердаме, 16 апреля — goo.gl/forms/WBd5Yr9M…

Жмём RT! pic.twitter.com/i48oPEAEzZ

А вот еще вопрос - пользуетесь ли вы активно webp или mozjpeg при разработке проектов?

Собрал git-grep-provider к nuclide-quick-open, который мы используем atom.io/packages/git-g…, нечто отдаленно похожее на BigGrep от Facebook

А вообще, расскажите, чего лично вам не хватает в редакторе при верстке? Какие фичи вы хотите видеть в IDE?

@cssunderhood чтобы он за меня верстал

@denishus @cssunderhood @WasilisaFish мама училась на "дизайнера одежды". Первые два года учились шить, а только потом картинки рисовать.

@denishus @cssunderhood @WasilisaFish потому что дизайнер, который не может сделать то, что он нарисовал, нахуй никому не нужен.

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

Чем нарисовать в редакторе макет о том, как эти две строки css выглядят и где какой радиус

@evlogii @cssunderhood @denishus @WasilisaFish А у вас в компаниях действительно есть дизайнеры, которые и рисуют, и кодят сами?

.@SetAGE @evlogii @denishus @WasilisaFish думаю в России это не частая практика, тут в EU - наоборот, могу ошибаться в суждении

В январе поддержка jsx хоть и была, но крайне фиговая. Если по работе только на es5 пишешь, то выбор хороший все же.

А сейчас даже react-native boilerplate светит красным. :( Может и не критично, но и не особо приятно.

@SetAGE @evlogii @cssunderhood @WasilisaFish яндекс, иннова (это точно знаю), я так или иначе использую код.

Особенно сейчас, когда поддержка старых браузеров сводится на нет.

@cssunderhood Даже необязательно transform3d :: twitter.com/lazy_frontend/…

@cssunderhood вспомнил, уже писал здесь - в WebStorm нужен переход из HTML по классу в исходник Less (Scss). Sourc eMaps IDE не видит.

Надеюсь, что разработчики @WebStormIDE услышат наши мольбы в твиттере :)

Давайте еще обсудим такую провокационную вещь, как Scrum :) pic.twitter.com/MZpXWrUk1u

Используете ли вы подобные методологии в работе своей команды? Нравится ли это вам?

@cssunderhood абсолютно все проекты либо по scrum, либо по kanban

@victoria_veles то же самое, вполне нормально, лучше чем ничего, как сделанное у студентов на коленке @cssunderhood

Мне больше интересны не достоинства Scrum, а практические недостатки - мнение противников и почему они против @cssunderhood

@dshster @cssunderhood Главный недостаток в том что многие не делают тру скрам или аджайл. Например ставят процессы выше людей.

@dshster @cssunderhood или другой пример - нет коммуникации, спринты есть, получается скрамно

Разгорелась дискуссия, что методология хорошая, но многие не умеют ее готовить :)

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

В нашей команде стендап в 10:30, задачи трекаются в Jira и дублируются стикерами на белой доске

В течение дня любой тим-мембер может подойти к доске и наглядно посмотреть статус задачи по дисциплинам UX/FE/BE/CopyWrite

На стендапе доска доактуализируется, если не была, и тим-мемберы рассказывают о ходе работ и изменениях статуса задач, обсуждаются трудности

Если какие-то элементы в работе команды не нравятся - раз в две недели есть ретроспективы,на которых можно предложить попробовать что-то еще

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

@GrawlCore @cssunderhood ишью есть, но, если честно, не знаем, когда сделаем: youtrack.jetbrains.com/issue/WEB-6737

@cssunderhood Это все карго культы для энтерпрайз программистов.

@freiksenet_ru аминь! Методологии это не знания, но опыт. У нас скрам это это ритуал - совещайтесь каждое утро и всё будет Ок @cssunderhood

Дизайнер должен верстать и писать на js. @cssunderhood @WasilisaFish

Это был опрос. А не утверждение

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

.@denishus @WasilisaFish похоже, что, судя по твоему опросу насчет "Дизайнер должен верстать и писать на js.", js - это перебор :)

Еще одна добрая традиция в Букинге - каждый квартал команда выбирает ресторан и день и проводит совместный ужин :) Всем приятного аппетита!

@cssunderhood у нас в aviasales так каждую неделю после ретро — обсудить спринт в нерабочей обстановке, поговорить за технологии :)

Ну и пропиарю под конец дня, что Букинг все еще ищет UX дизайнеров grnh.se/lq6jot и Front End разработчиков grnh.se/pe3ntf

До завтра!

Свежее интервью с нашими UX-дизайнерами (которые в основном и занимаются версткой Букинга) uxtraining.com/blog/ux-design…

Веб меняется каждые полгода, сколько фреймворков умерло? Точно гарантировать какую-то технологию на будущее глупо

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

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

Прикол React Native в том, что если умеешь верстать и знаешь JSX, то запросто "сверстаешь" и нативное приложение привычным способом. :)

В конце декабря буду вести @cssunderhood — какие темы вы бы хотели, чтобы я поднял? Что не нравилось в предыдущих?

@_sashashakun @cssunderhood в нативности приемущество. Там не браузерная тормозящая обертка.

@cssunderhood xamarin для шарпистов хорошо. RN из другой оперы, он для веб. девелоперов

@cssunderhood и тут есть Titanium, NativeScript и Cordova

Ну вот и Студия сделала проект на Реакте artlebedev.ru/everything/sok…

@iamspacegray Привет, смешная статья про главный вопрос прошлой недели "должен ли дизайнер писать код". medium.com/@SethCoelen/sh…

Кстати, если вы готовитесь к работе за рубежом - советую хотя бы раз в 1-2 недели проходить интервью для тренировки на английском

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

Обновил страничку illinifellow.com. А так-же завтра на недельку веду @cssunderhood.

А вот лучший способ пройти потом интервью по технологии - это начать проходить интервью и знакомиться с вопросами

Для кодеров есть супер-книга amazon.com/Cracking-Codin…, для дизайнеров и верстальщиков подобной не видел

Также советую amazon.co.uk/Influence-Psyc… и The Lean Startup - помогут работать в крупных компаниях и с командой

Про A/B тестирование советую книгу get.unbounce.com/the-ultimate-g…

По изучению JavaScript хорошая коллекция уже была выложена на Хабре: habrahabr.ru/post/117838/

По верстке считаю неплохими уроки у Sorax'а: youtube.com/user/ArtSorax/… (листайте коллекцию)

Также супер-клевые книжки есть у @smashingmag smashingmagazine.com/ebooks/, за деньги, но очень советую

Еще на github можно найти очень много сборников ресурсов в репозиториях "awesome-" github.com/sotayamashita/… github.com/sorrycc/awesom…

Остается 4 часа до следующего ведущего. О чем бы вы еще хотели узнать? Про веб? Про Амстердам? Про переезд? Про жизнь за границей?

Наверное, буду закругляться :) Напоследок хочу сказать, что переезд в Европу - это лучший опыт в моей жизни

Здесь у меня 1000 коллег, каждый со своим взглядом на веб-разработку и технологии, легко найти поддержку

Большая компания с огромным количеством клиентов, на которых можно учиться и проверять идеи в UI/UX

Ну и до конференций по всей Европе теперь явно ближе :)

Если будете в Амстердаме - приглашайте на кружку пива поговорить о жизни и о технологиях :)

Спасибо за прекрасную компанию на этой неделе! С вами был Валерий Яцко @viatsko из компании Booking.com. Подписывайтесь :)