Рейчел Бергер написала о влиянии технологических компаний на дизайнерские портфолио.

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

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

Сами дизайнеры не считают это главной проблемой. Чтобы пополнять портфолио, надо делать проекты (1), которые хочется показать (2) в портфолио (3).

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

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

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

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

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

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

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

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

Первое занятие, 16.01.2018. Блок исследования.

Часть первая, знакомство.
Преподаватель блока — Алина Ермакова, эксперт в области исследования пользовательских интерфейсов.
Сейчас Алина руководит отделом исследований пользовательского взаимодействия в Сбербанк-Технологии. Как оказалось, мы с ней пересекались на обучении основам юзабилити, которое она проводила в рамках курса повышения квалификации около года назад (в это время я работал продуктовым дизайнером в сбертехе).

Самое главное, что должно было произойти в первый день учебы — распределение студентов по проектам, с которыми мы будем работать ближайшие 1,5 месяца. По прошествию этого времени будет защита, причем серьезная — с презентацией и жюри.
Но перед тем, как начать распределение проектов Алина рассказала лекцию о том, зачем дизайнеру может понадобиться исследование. Я сжато передам основную мысль.

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

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

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

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

Текстовые поля для Google

Как ребята из команды Material Design пересобрали текстовые поля для Google.
Огромное исследование и куча инсайтов.

Почему поля

Казалось бы, текстовое поле, что думать то? Но не все так просто.

Текстовое поле - один из самых популярных элементов интерфейса. Форма обратной связи, заявки, обязательная информация и т.д. Конверсии, конверсии и еще раз конверсии.

Команда Material Design провели исследование текстовых полей и выяснили, что куча народа, видя поле с чертой и плейсхолдером (серым текстом подсказкой внутри) не понимали, что оно кликабкльное. Как следствие отваливались и не заполняли формы.

Перекладываем на масштаб Google и сразу становятся понятны причины такой дотошности в мелочах. На таком огромном трафике изменение в 1% дает тебе колоссальное бабло.

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

Процесс

Исследование проходило в два этапа:

- сперва участникам оценивали разные варианты дизайна
- потом тюнинг конкретных элементов

Участникам предлагалось взаимодействовать с различными вариантами текстовых полей. Собирались прототипы и задавались уточняющие вопросы. Задействовали 600 человек.

Выводы

Результаты двух исследований показали, что следующие элементы текстовых полей имеют наибольшую ценность:

- Закрытые текстовые поля с прямоугольной формой, лучше, чем те, которые имели подчеркивание в виде линии
- Рамка текстового поля должна быть с полупрозрачной заливкой и нижней линией или без заливки, но с непрозрачной чертой.
- Цветовой контраст линий текстового поля с фоном соответствовал минимальным коэффициентам контрастности 3: 1.
- Текст метки должен быть помещен в пределы рамки текстового поля.
- Текстовые поля должны иметь закругленные углы

После того, как работа была проведена Google обновил у себя все текстовые формы.
Под постом бвдет гифка До и После апдейта.

Вопрос читателя: “Какие образовательные программы и сертификации считаете полезными для продакта?

Не говорю про самообразование и постоянное "затачивание пилы", а именно с целью документального подтверждения навыков (например, при собеседовании) – что было и полезно вам и ценно для работодателей”.

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

Лично мой честный вам ответ – никакие. Ни в одном месте, куда я устраивалась на работу, меня не просили предъявить “корочки”. Я сама ни разу не смотрела на список законченных курсов кандидата, когда принимала решение о найме.

У меня нет ни одной сертификации или диплома (кроме как о получении высшего образования). Когда я устраивалась на работу в Яндекс, одно из собеседований было про статистику – а я в статистике была ни в зуб ногой. Когда я пришла работать в Suitepad, мне надо было проводить пользовательские исследования, что я раньше никогда не делала. В Intercom нужно было уметь работать с SQL, чего я, опять же, не знала.

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

1. По своей природе, профессия продакта похожа на любую руководящую должность. Не могу представить ситуацию, где интервьюер говорит: “Ну да, вы классный менеджер, умеете строить команды с нуля, вести людей за собой и приносить деньги компании, но вот сертификатика про Agile у вас нет. Жаль-жаль, придется вам отказать”. Des Traynor, один из основателей Intercom, успешно переключается между разнообразными C-level должностями: какое-то время был CMO, до этого – CPO, а после - COO. Многие tech компании также практикуют “взаимозаменяемость” топ менеджеров. Все потому, что их ключевые навыки, как и у продактов, в большей степени относятся к soft skills или к независимым от функции hard skills (например, стратегия или приоритезация).
2. Продакт-менеджер – это швейцарский нож; набор “инструментов”, который вам потребуется, будет сильно зависеть от нанимающей компании. Где-то будет нужен уклон в маркетинг, где-то в анализ данных, и так далее. Все знать невозможно, и адекватные работодатели это понимают.
3. Хороший продакт должен уметь быстро во всем разбираться – и иногда курс или сертификация действительно могут в этом помочь. Однако даже в этом случае “корочка” – лишь ненужный артефакт. Ни один диплом не докажет, что вы не просто усвоили знания, но и, что гораздо важнее, научились их применять на практике. Ни одной компании не нужен продакт с сертификатом по Data Science – но нужен продакт, который умеет принимать решения на основе данных. Фокусируйтесь на результате, а не на средствах его достижения. В этом случае часто оказывается, что нам не нужен курс за 20 тысяч рублей; можно прочитать книгу, пару статей, а все остальное осваивать уже в “бою” :)

Сразу также отвечу на популярный вопрос от проджект-менеджеров: нужна ли сертификация PMBOK или Agile, чтобы найти работу. Прежде всего должна сказать, что уже давно не сталкивалась с подобными вакансиями в продуктовой разработке; мне кажется, за границей это все больше и больше становится рудиментом (конечно, не говорю здесь об агентствах). Когда я работала в России, ни у кого из моих знакомых проджектов таких сертификатов не было.

И еще одна важная оговорка: мы не затронули тему MBA, так как это отдельная и очень объемная история. Приходите слушать нашу трансляцию с Юлей Нечаевой, где она будет говорить про свой опыт с MBA в одном из топовых американских университетов и как это повлияло на ее карьеру https://t.me/proproduct/956 (https://t.me/proproduct/956)

Почему мы предпочитаем делать юзабилити-тесты финсервисов вживую?

Почему мы предпочитаем делать юзабилити-тесты финсервисов вживую?

Есть три группы ограничений, которые уводят в общение тет-а-тет.

1. Технические.
– Мы тестируем интерфейсы и важно видеть, как именно люди держат телефоны. Поэтому для удалённых тестов нужны камера и штатив.
– Надо рассылать инструкции, просить пользователя установить необходимое оборудование и подключить наушники. Уходит минут 20 на настройку и технические неполадки.
– Многие респонденты просто технически не продвинуты и не могут всё подготовить.
Эта возня отъедает время общения и терпение респондента.

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

3. Секьюрность.
– Мы работаем с чувствительными данными клиента, тестируя финансовые сервисы иногда на данных пользователя. В онлайне запустить такое сложно. У пользователя меньше доверия — он может опасаться, что лишние люди увидят экран.
– С другой стороны, мы работаем с банками-заказчиками под NDA и должны гарантировать, что новый продукт не утечёт за пределы команды дизайна, разработки и тестов до запуска проекта.

Иногда от этого приходится отходить, например, когда респонденты из Европы или США. Всё это грозит двойной потерей качества — из-за онлайна и языковых барьеров.