Юрий Ветров #2 - о дайджесте, конкурсе и продуктовом дизайне.

Директор по дизайну в Mail.Ru Group (продукты под брендом “Mail.Ru”).
jvetrau.com

— Ты ведешь одну из самых популярных групп в фейсбуке про продуктовый дизайн. С какой целью?

Я в любом случае читаю уйму статей, чтобы оставаться в теме и находить новые направления для развития дизайна в Mail.Ru. Это очень здорово ускоряет изменения (и помогает писать талмуды про UX-cтратегию (uxstrategy.co)). Почему бы не поделиться этим с сообществом? :) Я трачу на это не сильно больше времени относительно чтения, зато лучше структурирую собственные мысли.

— Как происходит процесс сбора материалов для дайджеста? Сколько времени у тебя на это уходит?

У меня про это есть отдельная презентация (slideshare.net/jvetrau/wud2014-yvetrov-background-research) :) Где-то полчаса-час в день уходит на чтение. У меня тонна подписок в Feedly, это основной источник — читаю от корки до корки (блоги дизайн-команд и конкретных дизайнеров, специализированные журналы, пара других дайджестов). Есть издания, которые читаю отдельно (Engadget, периодически Fast Co Design), оттуда тоже иногда приходит. После этого сохраняю лучшее в Pinboard (pinboard.in/u:jvetrau), оттуда постепенно публикую в соц.сети, а в конце месяца собираю дайджест в разных форматах (часа 3 в месяц, причём по возможности просто обновляю черновик статьи по ходу каждого поста в соц.сети, так что к концу периода остаётся только вставить картинки).

— Какие темы продуктового дизайна сейчас наиболее актуальны?

Алгоритмический дизайн, голосовые интерфейсы, виртуальная и дополненная реальность, дизайн-системы, дизайн-менеджмент и UX-стратегия — такой себе набор баззвородов :) Есть периодический интерес к разным паттернам и техникам — например, раз в пару лет происходит всплеск слюноотделения к интерфейсным текстам, прям забавно наблюдать цикличность. Огромный темп развития инструментов дизайна и всего что с ними связано, круто что мы можем делать больше меньшими усилиями. Не думаю, что сказал что-то новое, просто подтвердил мысли многих читателей :)

— Вы уже пять лет проводите Russian Design Cup. Почему в этом году так мало участников, по сравнению с предыдущим?

Скорее, количество вернулось к позапрошлому году после взрыва в прошлом :) Мы, конечно, рассчитывали на рост относительно прошлого года, а не возврат назад, но есть две гипотезы — слишком сложная задача на отборочном оттолкнула часть людей (хотели хайпануть по ICO, а в итоге перемудрили), плюс сменилась команда пиар-поддержки (прошлые совершили чудо с трёхкратным ростом). К следующему разу серьёзно поменяем формат, чтобы стало интереснее для участников и проще для нас.

— Вы приглашали к себе на работу участников с хорошими кейсами?

Да, регулярно берём кого-то из лидеров рейтинга. RDC показывает, что дизайнер может решать разные задачи в ограниченное время, что его или её успешные решения — не случайность.

— Бургеры и пиво или вино и стейк?

Оба хороши, но первое чаще и более компанейское :)

— Что произойдет с интерфейсами за следующие 5 лет?

Если говорить про формат работы над продуктами, то можно будет делать гораздо больше меньшими средствами. Это видно по развитию веба и мобильных — если раньше простейшие вещи делались полностью руками и через боль, то сейчас всё собирается из готовых компонентов и можно фокусироваться на продуктовых задачах. Дальше будет ещё лучше — алгоритмический дизайн (algorithms.design) уберёт кучу рутины, более добротная проработка по куче аспектов станет ещё дешевле и быстрее.

Второй момент — это платформы и связанные с ними парадигмы взаимодействия с интерфейсом. Ключевыми вехами были персональные компьютеры и смартфоны, они были действительно массовыми и изменившими рынок. Все, конечно же, ждут следующей такой платформы (тем более, что смартфоны постепенно замедляют рост), но пока безуспешно. Если какая-то из новых платформ всё-таки выстрелит — увидим очередной рывок в профессии :)

Дизайнеры носятся с «эмпатией», но мало где объясняют: как её развивать.

Дизайнеры носятся с «эмпатией», но мало где объясняют: как её развивать.

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

«Голландские психологи показали (http://journals.sagepub.com/doi/full/10.1177/0305735616654216), что профессиональные музыканты не только точнее интерпретируют сочетания визуальных и звуковых стимулов, чем люди без музыкального опыта, но и легче считывают эмоции другого человека по его изображению и звучанию его голоса.

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

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

Оказалось, что музыканты оценивают сочетание звука и изображения точнее, чем немузыканты, даже если их просят ориентироваться не на звук, а на изображение. Музыканты верно определяли, какую эмоцию выражает голос, почти в 95% случаев, если фотография совпадала по настроению, и более чем в 85% случаев, если картинка противоречила звуку. Немузыканты отставали примерно на 10% в обеих ситуациях. Когда требовалось определить эмоцию только по слуховому или визуальному источнику, обе группы показывали примерно одинаковые результаты.

Ученые объясняют способность музыкантов лучше справляться с конкурирующими и дополняющими друг друга стимулами развитым навыком преобразовывать визуальную информацию (ноты) в звуковую, а также навыком улучшенной обработки звуковой информации, который распространяется и на другие каналы восприятия».

Source: https://postnauka.ru/lists/91909

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

let el = document.querySelector(".someClass");
el.innerText // текстовое содержимое
el.innerHTML // HTML-разметка содержимого
el.outerHTML // полная HTML-разметка
el.offsetWidth // ширина, аналогично Height
el.offsetLeft // координата левого угла
// и так далее

Назначенные узлу стили можно узнать через свойство sytle:

el.style.color // цвет текста

Но в нём содержатся только те CSS-свойства, которые назначены непосредственно узлу. Чтобы узнать все свойства, которые получил узел из CSS-стилей, потребуется более сложная конструкция:

getComputedStyle(el).color // цвет текста

Если захотите узнать более сложные свойства, то не забудьте преобразовать их названия в camelCase. Например: background-color → backgroundColor;

Подробнее в видео: https://youtu.be/kM8YAhsaHfE
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO

Спрашивали про точки развития для дизайнера.

Спрашивали про точки развития для дизайнера.

Точек роста для дизайнера четыре:

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

— Творческое развитие. Создание индивидуальной творческой траектории независимости и автономной работы. Частный проект в котором дизайнер один на один со своей личной задачей. Создание личного проекта с осознанными и глубокими мотивами самореализации.

— Postdigital. Отказ от цифровых методов создания вещей в пользу любой натуральной, аналоговой технологии создания объектов. Классические методы производства, длительные, основательные, трудоемкие, но развивающие практическое, прикладное мышление.

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

7 важных факторов PHP-приложения

7 важных факторов PHP-приложения

Инженеры платформы Heroku (https://www.heroku.com/) на основе собственного опыта создали методологию (https://12factor.net/ru/) для разработки SaaS-приложений.

Эта методология учитывает три важных аспекта:
— расширяемость — развитие кодовой базы и функционала;
— сопровождаемость и возможность командной работы над проектом;
— масштабируемость.

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

Кодовая база (https://12factor.net/ru/codebase). Забота о коде начинается с принципов его версионирования и хранения. Используйте Git Flow или его адаптацию с учетом специфики работы ваших команд.

Зависимости (https://12factor.net/ru/dependencies). Используйте менеджер зависимостей Composer (https://getcomposer.org/) и его основные операции install и update для манипуляций c composer.json (https://getcomposer.org/doc/04-schema.md) и composer.lock.

Конфигурация (https://12factor.net/ru/config). Предпочтительным методом обработки конфигурации является использование переменных среды. Для работы с ними мы применяем компонент symfony/dotenv (https://github.com/symfony/dotenv).

Параллелизм (https://12factor.net/ru/concurrency). Выполняйте процессы в фоне, тем самым снижая время отклика при взаимодействии с вашим сервисом. Выделяйте веб-процессы в реальном времени и рабочие процессы. Первые принимают http-запросы от клиента, а вторые — выполняют фоновые задачи, например, с помощью брокера сообщений RabbitMQ (https://github.com/rabbitmq).

Паритет разработки/работы приложения (https://12factor.net/ru/dev-prod-parity). Для того чтобы обеспечить схожесть сред разработки, тестирования и продакшена, мы используем виртуализацию на основе Docker и специально подготовленные образы, содержащие одинаковые наборы и версии библиотек. Промышленные и тестовые среды отличаются лишь степенью масштабирования, на основе технологий K8S и Swarm.

Журналирование (https://12factor.net/ru/logs). Фактор утверждает, что приложение должно просто писать в STDOUT и STDERR, а среда должна отвечать за маршрутизацию этих сообщений в хранилище. Технология PHP-FPM позволяет производить вывод логов в STDOUT, что крайне полезно при работе с Docker-контейнерами. Для организации процесса логирования на уровне приложения мы используем сторонние внешние библиотеки, например Monolog (https://github.com/Seldaek/monolog) или компоненты фреймворков.

Задачи администрирования (https://12factor.net/ru/admin-processes). Реализовать сценарии администрирования приложения можно с помощью внешних библиотек, например Symfony Console (https://github.com/symfony/console). Большинство современных фреймворков имеют встроенные средства для организации запуска консольных команд для служебных целей и миграций. Например, в Yii Framework есть понятие консольного приложения (https://www.yiiframework.com/doc/guide/2.0/en/tutorial-console) и команды.

Производство и потребление

Есть два режима жизнедеятельности — производство и потребление.

Производство — это когда после вас остаются артефакты: код, письма, идеи, макеты. Потребление — все остальное. Написать программу — производство, посмотреть фейсбук — потребление.

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

В увеличении производства в первую очередь заинтересованы вы сами. Чем больше вы делаете (или другие, с вашей помощью) — тем быстрее достигаете целей.

Человечество изобрело кучу инструментов для потребления —телефоны, торговые центры, push-уведомления, шаурма у метро.

Инструментов для производства, вроде скетча, макбука и молескина — наоборот, мало. На самом деле, можно производить больше, чем 95% людей, имея только сильное желание и блокнот, но это тема для отдельного разговора.

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