Безусловная и непонятная директива

Вот работаете вы над новым интерфейсом, и тут от коллеги прилетает просьба, типа «а давай перенесём эту кнопку наверх». И всё: ни объяснения чем кнопке плохо жилось внизу, ни хода мыслей, ничего не понятно.

Это — безусловная и непонятная директива. Такими директивами обычно общаются непродуктивные ребята, когда приходят с решениями вместо проблем (см. Фичреквесты, которые не стоит выполнять (https://t.me/pmdaily/98)).

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

Будьте подробными: рассказывайте о том, почему пришли к тем или иным решениям. Не «давай перенесём кнопку наверх», а «Эта кнопка — ключевой call-to-action на странице, а я боюсь, что новые пользователи сразу её не увидят» Так вы не только уменьшите количество переписки в трекере, но ещё и опытом с коллегами поделитесь.

Визуализация данных

Визуализация данных не самая простая штука. Бывает потеряны часы времени в поиске подходящего формата. "Bubble Chart", "Bar Chart", а может быть "Scatterplot"?

Коллеги собрали большинство примеров вместе и показали правильное использование графиков и диаграмм. Кратко так:

  • столбики (Bar Chart). Используют для сравнения нескольких наборов данных. Горизонтальные столбцы обычно используют, когда нужно сравнить большое количество показателей или визуально выделить явное превосходство одного из них. А вертикальные столбцы хорошо иллюстрируют, как менялись показатели в разные периоды, например, ежегодная прибыль компании за несколько лет
  • точечная диаграмма (Scatterplot). Помогает найти взаимосвязь между двумя показателями. Например, с его помощью можно узнать, как меняется коэффициент конверсии в зависимости от размера скидки на товар.
  • пузырьковая диаграмма (Bubble Chart). Позволяет сравнить два параметра по третьему. Возьмем коэффициент конверсии и размер скидки. Добавим к ним доход (за который отвечает размер круга) и получим примерно такую диаграмму. Глядя на этот график, можно заметить, что самая высокая конверсия у товаров со скидкой 30%, однако больше всего дохода приносят товары без скидки и товары со скидкой 5% (см. пример ниже).

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

Хорошая проектная практика

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

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

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

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

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

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

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

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

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

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

Защита

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

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

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

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

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

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

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

Перед защитой всегда очень волнуешься, так как относишься к этому со всей серьезностью. Особенно сильно переживаешь за то как тебя оценят. Когда мы готовились к защите, то чувствовали себя аутсайдерами из-за того, что долго и сложно работали над UI. Но по мере подготовки презентации я понимал, что у нас получается очень крепкая история. Так и получилось — пятёрку получили только две команды: мы и qlean. И нас обеих оценили в первую очередь за то, что мы нашли боль и осознанно попытались её решить. Вы можете сами оценить наш кейс, который сверстан практически в точности по сценарию рассказа презентации.

HTML-разметка — это просто текст, который делит страницу на смысловые (и не очень) блоки

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

Потом к узлам применяются CSS-стили и получается та страница, которую мы видим в браузере.

К любому из узлов можно обратиться через JS как к объекту, чтобы узнать и изменить их свойства или содержимое, создать новые узлы или удалить старые. Структура этих объектов и называется DOM — Document Object Model. Она нужна для того, чтобы вы могли динамически менять содержимое документа после его загрузки в браузер.

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

Контраст

Хорошего дизайнера отличает способность чувствовать контраст. Другими словами умение отделять суть от фона. Другими словами навык управления вниманием.

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

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

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