Интересная статья о ментальных моделях (ММ) для дизайнеров.

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

В статье речь ведётся скорее о методах мышления, то есть как следует думать и работать. Вот самые интересные из них:

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

2) Инверсия. Мы часто концентрируемся на поиске идеального решения, однако порой это слишком тяжело даётся. Чтобы облегчить себе «роды» решения, можно воспользоваться инверсией: представить не самое хорошее решение, а наоборот, плохое. А после просто спросить, как нам этого избежать? Очень напоминает метод решения задач «от обратного», не правда-ли? Например, все таже проблема становления вас как прекрасного специалиста может впасть в ступор на вопросе «А кто такой этот прекрасный специалист?». Однако стоит вам задать вопрос, как «Кем он не является?», как сразу повалят признаки: звёздная болезнь, отсутствие опыта, теоретический дизайн, затворничество и т.д. Останется только придумать, как этого избежать и вуаля.

3) Лестница абстракции. Этот метод позволяет выйти из тупиковой ситуации, если задача кажется неразрешимой. В таком случае, нам стоит переместиться на уровень выше (построить надсистему по ТРИЗ) и рассмотреть проблему в ней. А делается это при помощи мозгов и качественных вопросов (почему, зачем, как, чем... и т.д.) Например, перед нами стоит задача создать ручку, которая будет писать в условиях невесомости. И это довольно сложная задача. Но если мы выйдем в надсистему «фиксирование информации в условиях невесомости», то на столе появляются и другие опции, типа «цифровой дисплей» или «простой карандаш». Конечно, каждый из них будет иметь свои недостатки, но и положительные моменты можно будет перенять.

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

Идеальный процесс

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

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

Женя Бондарев рассказал нам о типичной структуре разработки цифрового продукта:

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

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

Usability test
Тестирование всего продукта и финальные изменения — Женя советует писать гипотезы в гугл-доке на протяжении всего исследования, чтобы во время тестирования не упустить что-то важное.
По итогу тестирования выявляются критичные и не очень ошибки, после чего нужно решить, с чем можно выходить на рынок, а что требует обязательной доработки. На этом шаге может всплыть много неожиданностей, на эту тему как-то писал Костя Горский — t.me/desprod/239

Финализация
Финальное утверждение, подготовка к разработке, подготовка к публикации (кейс в медиа, либо конкурс и т.д.), авторский надзор.
Круто выпускать MVP как можно раньше, чтобы начать получать реальный фидбэк.

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

1. Погружение

1. Связаться с заказчиком
Сделать:
- интервью с заказчиком
- запросить метрики
Итог:
- утвержденное направление работу
- утвержденные с заказчиком сроки
Срок: 4.03

2. Поиск референсов/конкурентов
Срок: 04.03

3. Интервью с пользователями
Сделать:
-подготовить вопросы
-найти респондентов
На выходе:
- уточненный портрет
- проблемы пользователей
Срок: 13.03

4. Попробовать
Сделать:
- Сделать заказ (понять процесс, опросить мастера)
- Зарегаться как мастер (понят, процесс, взять заказ)
На выходе:
- проблемы
- полное понимание бизнес-процесса
Срок: 11.03

Анализ полученных инсайтов
Артефакты: понять на каких проблемах фокусируемся, список инсайтов, фичерлист
Показываем заказчику — 12.03
— Ретро —


2. UX — проектирование

1. Информационная архитектура — 20.03
2. Структура — 20.03
3. Карта экранов — 31.03
4. Сценарии
5. Прототип
6. Тестирование прототипа (проверка гипотез) - 7.04

Анализ полученных решений
Артефакты: протестированный прототип, карта экранов, структура, информационная архитектура
Показываем заказчику — 9.04

— Ретро —


3. UI — визуальный язык

1. Существующие гайды продукта
2. Мудборд
3. Дизайн концепт 3-5 экранов — 14.04
4. Масштабирование
5. Анимация

Анализ полученных решений
Артефакты: финальный дизайн продукта, анимация
Показываем заказчику — 30.04

— Ретро —


4. Передача в разработку
5 занятий 10.05-19.05

5. Подготовка портфолио
9 занятий 22.05-09.06

6. Презентация
3 занятия

7. Защита
23 июня


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

Принесла вам новый обзор на книжку Blitzscaling от Reid Hoffman, основателя LinkedIn.

Reid очень крутой и умный, у него отличнейший подкаст Masters of Scale, и на книгу у меня были высокие надежды.

Ну что сказать… Начали за здравие, кончили за упокой. Основная мысль довольно интересная – если хочешь стать глобальным стартапом, то в какой-то момент нужно ставить все на карту и инвестировать в взрывной рост: тогда приходят в действие network и virality effects, которые, в свою очередь, еще больше ускоряют рост и выручку.
С идеей можно, конечно, поспорить: например, Harvard Business Review в последнем выпуске восхваляет стартапы, которые фокусируются на постепенном и контролируемом росте https://hbr.org/2020/03/beyond-silicon-valley (https://hbr.org/2020/03/beyond-silicon-valley), – но о подходе, о котором рассказывает Reid, почитать тоже интересно, тем более, что его использует большинство стартапов в Долине. Понравились примеры с AirBnb и Dropbox.

Про это рассказывается на первых 100 страницах, все остальное (еще 200 страниц) – вода водой. Сначала Рид говорит, как успешно задизайнить бизнес-модель: по сути, это все те же старые-добрые постулаты из книжек 80-х годов про размер рынка, дистрибуцию, высокую маржинальность, (не)возможность масштабирования операционки, product market fit + из относительно новенького network effects. Если с network effects вы раньше не особо встречались, то эта часть, возможно, покажется интересной.

Части 3-6 – такие относительно философские рассуждения на тему, с пересказом идей из других книг или предыдущих глав. Мне очень это все напомнило The Hard thing about hard things https://t.me/proproduct/681 (https://t.me/proproduct/681), где автор под конец уже явно выдавливал из себя главы на немного рандомные темы. Знаю, что обе эти книжки многим нравятся: возможно, если вы заценили The hard thing, Blitzscaling вам тоже зайдет. Как говорится, на вкус и цвет :)

Вот здесь лежат отзывы на другие продуктовые книжки (не поверите, там даже есть позитивные))
https://medium.com/@buldakova/the-product-managers-reading-list-2019-fbaa226cb0fe (https://medium.com/@buldakova/the-product-managers-reading-list-2019-fbaa226cb0fe) ^_^

Не начинать с отмазки и нытья

Плохая практика начинать свой рассказ с отмазки, давления на жалость и запроса преференций:

  • Версия пока сырая, не судите строго.
  • Я, конечно, не профессионал в этом, но пара комментариев у меня есть.
  • Возможно, вам совсем не понравится, главное собрать обратную связь.
  • Я понимаю, что уже много есть статей на эту тему, но у меня ещё не было.
  • Я понимаю, что вы устали — постараюсь рассказать побыстрее.
  • Это мой первый проект, надеюсь, что вы не будете меня сильно критиковать.
  • Мне не рассказать так круто, как это сделал прошлый докладчик, но всё равно послушайте.
  • ... и т.д. и т.п.

Зачем ты мне это показываешь, если не хочешь, чтобы я дал честную обратную связь?
Если сам знаешь, что показываешь откровенное Г., то зачем вообще показываешь?
Если у тебя нет опыта, но ты почему-то взялся и написал/сделал — почему я не должен критиковать?

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

Чтобы обратиться к какому-либо узлу, его сначала надо найти

Для этого есть разные методы, но в современном прототипировании чаще всего применяются два метода:

let el = document.querySelector(selector)
и
let elems = document.querySelectorAll(selector)

Оба метода получают на вход CSS-селектор элемента. Например:

let el = document.querySelector(".someClass b");

Отличие их в том, что querySelector вернёт один узел, который попался первым, а querySelectorAll вернёт список всех узлов на странице, соответствующих селектору.

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

Если же вам всё-таки нужен метод map, то вы можете преобразовать список узлов в массив при помощи конструкции [...nodeList]:

let arr = document.querySelecroAll("a");
[...arr].map(el => el.innerText);

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

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

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

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

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

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