Простой интерфейс

Ещё до того, как пользователь в первый раз запустил программу, у него в голове уже сложилось представление, как она работает.

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

А вот как не обмануть:
https://antonz.ru/simple-ui/

Иногда нужно обойти дерево узлов

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

Для этого есть набор методов:

let el = document.querySelector(".someClass")
el.childNodes // дочерние элементы
el.nextSibling // сосед справа
el.parentNode // родительский элемент

Подробнее в видео: https://youtu.be/MoEWUWIDFDs

И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO


✨Домашнее задание ✨

Взять пример из урока: https://codepen.io/detepr/pen/rQYYbx
1. Посчитать сумму цен всех подарков и вывести её в консоль
2. Отсортировать подарки по цене

3 совета для собеседующихся на позицию продакта

Вопрос от читателей сегодня такой: «Расскажи, какие ошибки ты видишь чаще всего, когда собеседуешь продактов».

С удовольствием отвечаю - обожаю и ходить на собеседования, и собеседовать сама.

1. Готовьтесь
Это может показаться прописной истиной, и все же большинство интервьюируемых этого не делает. Совершенно не важно, какого вы уровня: за последний год я собеседовала и CPO модных стартапов, и ребят из компаний-мастодонтов, - ничего из этого не играло роли, если кандидат не подготовился. Почему?

У каждой компании своя шкала измерения. Нет одного определения, кто такой «хороший продакт». Это значит, что вполне вероятно у вас будут вопросы, о которых вы раньше не думали, или думали с другой точки зрения. Пример: у Гугла и Амазона абсолютно разный фреймворк определения ключевой метрики, - в теории оба работают, но применять подход Амазона на собеседовании в Гугле не приведёт к хорошему результату.

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

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

2. Контролируйте время

В какой-то степени это зависит от пункта 1: чем меньше вы готовы, тем больше вы льете воды и болтаете. Но есть еще пара вещей:

- не бойтесь брать время на размышление. Вместо того, чтобы сразу бросаться в рассуждения, возьмите 30 секунд, чтобы сначала продумать структуру ответа, ключевые моменты, которые вам надо охватить. Если этого не сделать, можно легко потеряться в собственном ответе или забыть про какие-то ключевые детали. Это так же облегчает работу интервьюера: структурированный ответ легче парсить и, соответственно, понимать, что же хотел сказать автор;

- пользуйтесь бумагой/вайтбордом. Запишите вопрос, затем запишите три, максимум пять, основных опорных точек для ответа. Например, если вас спрашивают определить основную метрику для продукта, опорные точки могут быть: Миссия компании - Миссия продукта - Текущее состояние - Проблемы, которые мы пытаемся решить. Не надо отвечать на них сразу, но сам факт их наличия перед глазами задаст структуру вашего ответа;

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

3. Думайте вслух

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

Кароч, ответственность переоценена

Многие говорят, что лидер – это тот, кто готов брать на себя ответственность. Серьезная, уважаемая роль. Но немногие знают, что ответственность брать так же легко, как пирожок с полки.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Меня тут спрашивают, зачем нужны шпаргалки, о которых я написал постом выше

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

Например, вы знаете основы JS, но всё чаще встречаете в примерах непонятный новый синтаксис — ES6. Вы можете прочитать про него длинную статью (например: http://babeljs.io/learn-es2015/), но, скорее всего, сразу всё забудете. Тут вам и придёт на помощь шпаргалка https://devhints.io/es6

Или вы установили себе модный редактор кода Visual Studio Code, но не знаете ни одного хоткея в нём. Вот шпаргалка с ними: https://devhints.io/vscode

Или вы решили научиться верстать флексбоксами, но постоянно забываете синтаксис. Шпаргалка вам его быстро напомнит: https://devhints.io/css-flexbox