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

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

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

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

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

Брови заголовков

Исследования (https://www.nngroup.com/articles/first-2-words-a-signal-for-scanning/) показывают, что пользователи не читают заголовок полностью, а лишь первые несколько слов.

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

Как же тогда решать эту проблему? Используйте брови заголовков.

Брови заголовков — это описательное ключевое слово или фраза, расположенная над основным заголовком.

К примеру: у вас на главной странице банка есть слайдер, а в слайдере предложение с пониженной процентной ставкой по кредиту — добавьте к заголовку бровь «Кредиты». Время, которое пользователь потратит на принятие решения о том, интересна ему эта статья или нет, максимально сокращается.

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

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

Брови заголовков
— достаточно короткие для сканирования
— используют понятные ключевые слова
— дают пользователю контекст
— легки для восприятия

Профессии

Что думал в начале 2019:
- Рост и развитие в профессии — важная для меня ценность. Искренне не понимаю, как можно всерьёз заниматься чем-то, если не испытывать постоянное жгучее желание научиться это делать лучше.
- Интересующиеся ребята читают книги и блоги по профессии, ходят на конференции, сами пишут посты и доклады, учатся у старших товарищей и помогают младшим. И каждый год удивляются тому, какими наивными были год назад. Только так и можно работать и жить.
- Хочу становиться более сильным дизайн-лидером.

Что думаю в начале 2020:
- Профессий не существует.
- Мы их придумали, потому что так удобнее категоризировать деятельность. Но это совершенно не означает, что каждому отдельно взятому человеку стоит стремиться соответствовать какому-то стандартному описанию профессии. Разве что при поиске работы, особенно в начале карьеры. Но чем дальше, тем меньше в этом смысла.
- У каждого из нас есть уникальные сильные и слабые стороны. Зачем зажиматься в узкие рамки одной профессии?
- Меня уже тошнит от блогов, книжек и конференций по дизайн-менеджменту. Зато страшно интересно учиться у людей из других индустрий. Например, у спортивных тренеров, дирижёров, полководцев, режиссёров, архитекторов, писателей, учёных, можно ещё долго перечислять.
- Вспомните самых интересных профессионалов, которых вы знаете. Как правило, эти люди работают «собой», и не всегда даже понятно, как именно должна называться их роль. Скажем, роль Кукуца в Яндекса может называться «руководитель сервиса» или «продакт-менеджер», но как бы она ни называлась, он всегда работал и работает Кукуцем. Или вот Даня Ковчий лучше всех в мире работает Даней Ковчим, и это супер-круто и нужно, и совершенно не важно, что именно при этом написано в его трудовой книжке. Антон Шнайдер в любой компании и на любой должности всё равно бы работал Антоном Шнайдером. И так далее.
- Личностям профессии не нужны.
- Становиться более сильным дизайн-лидером — не та цель. Хочу становиться более сильным собой. А в процессе может и с дизайн-лидерством что-то получится.

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

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

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

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

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

Массовый опрос

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

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

После инструктажа и обучения, полевик выходит на точку (кластер). Обычно, в одном исследовании требуется собрать данные с 25 респондентов, число которых, в свою очередь, ограничено квотой — то есть заданным количеством людей определенного возраста. Например, 4 мужчины и 4 женщины возрастом от 18 до 34 лет и т.д.

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

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

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

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

Оплата за опрос происходит только за полностью заполненную квоту (она, напомню, обычно составляет 25 человек), то есть за 24 человека не заплатят ничего. И наоборот — если ты перевыполнил план, то сверх квоты доплачивать не будут.

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

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

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

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. Отсортировать подарки по цене