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

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

Стакан UX-писателя всегда наполовину полон.

Не «Информация исчезнет через 5 дней», а «Информация будет доступна ещё 5 дней».

Не «Договор расторгнут», а «Нужен новый договор».

Не «Заплатите, иначе услуга будет приостановлена», а «Чтобы продолжать пользоваться, заплатите до 7 марта».

Не «Услуга доступна не чаще 2 раз в год», а «Можно пользоваться 2 раза в год».

В мире и так много негатива и коронавируса, зачем ещё в приложениях нагнетать?

О чем плачет полевик?

В арсенале исследователей имеется три метода (вот тут я начинал про это говорить t.me/bukhtiyar/15 ) проведения полевых исследований (на самом деле их гораздо больше, просто эти методы самые действенные и проверенные). Рассмотрим подробнее каждый из методов на предмет встречающихся проблем и неудобств.

Но сперва взглянем на этапы работы полевика от момента, как он узнает о вакансии, до завершения работ:

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

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

Кто такой полевик?
Мы составили портрет среднестатистического полевика — это девушка 20-23 лет, студентка гуманитарного факультета (социологи, геологи и т.д.), увлечена городом и заинтересована в его развитии, а так же, имеет опыт полевых исследований.

Глоссарий

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

Полевик (или в зависимости от метода — подсчетчик, наблюдатель) — человек работающий непосредственно в поле, собирает и передает информацию по заданной методике.

Розыгрыш брифов!

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

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

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

Итак, посмотрим на то, какие еще проекты были представлены:

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

Revolut
Сервис по выгодному обмену курсов для путешественников. Выросли из этого, хотят быть круче, чем банк. Круто то, что проект международный. Цель проекта — предоставить пользователю различные банковские продукты в нужный момент времени (например, страховку в момент, когда пользователь приезжает в аэропорт)

SkyEng
Стартап, который уже давно не стартап. Цель проекта — удовлетворить запрос пользователей, которые хотят путешествовать.

Profi.ru
С лета 14 года помогают людям найти частных специалистов для решения любых задач. Все началось с доски объявлений на сайте университета по поиску репетиторов, сегодня это огромный сервис по поиску специалистов в любой сфере.
Сервис хорош тем, что с точки зрения специалиста в нем достаточно низкий порог входа, а с точки зрения заказчика огромная база специалистов.
Уникальность сервиса заключается в том, что взаимодействие в нем строится по принципу частник-частник.

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

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

Наталья Стурза, автор канала @UX_sturzaman, рассказала, когда продуктам полезны UX-исследования:

1. Проверить идею, не создавая продукта. Хотели запустить маркетплейс для пенсионеров. Исследование показало, что люди старше 60 лет спокойно пользуются обычными интернет-магазинами.

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

3. Улучшить то, что работает. Клиенты банка заполняли юридически значимое поле «Назначение платежа» всякой белибердой. Юзабилити-тесты показали, что люди считают поле второстепенным и заполняют только затем, чтобы кнопка платежа активировалась. В итоге в плейсхолдере поля показали пример, и таких ситуаций стало на 30% меньше.

4. Сравнить между собой конкурирующие продукты или отдельные фичи.

5. Понять, сколько потенциальные клиенты готовы платить.

6. Найти ошибку в интерфейсе.

Исследования не пригодятся:

1. Сервисам про фан вроде MSQRD и сервисам-витаминкам вроде приложений для медитации. У них сложно выделить пользовательскую потребность или проблему.

2. Любым проектам в ситуации «Мы хотим, чтобы вы пришли и сказали, как решить наши проблемы». В этом случае лучше обратиться к консалтерам.

https://vc.ru/design/86942

В прошлых уроках я показывал как взять данные с сайта и вставить их в Скетч

На основе тех же данных можно быстро собрать прототип.

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

Статья на Медиуме: https://medium.com/p/3153e280cfbf

Пример кода: https://codepen.io/detepr/pen/dmxYyX

Скринкаст: https://www.youtube.com/watch?v=gw-EaA2xAgc&t=25s