Блок продукта. Продолжение

Блок продукта продолжился занятиями с Женей Бондаревым, арт-директором Redmadrobot. С Женей мы провели около 4 занятий. Одна из основных целей его занятий — научить нас выходить за рамки привычных паттернов поиска идей.

Дивергентное мышление

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

Далее мы проверили этот подход на себе:

Шаг первый. Женя попросил нас выписать на бумаге 5 проблем, с которыми мы сталкивались последнее время. Всё что угодно от длинной очереди в магазине, до простуды. Потом из 5 проблем мы выбрали одну наиболее интересную для себя.
Шаг второй. Необходимо было открыть Яндекс Дзен, рандомно проскроллить ленту и остановиться на случайной новости.
Шаг третий. Соединить эти истории вместе.

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

Проблема, которую я выписал — цена на Uber от метро до дома неприятно повысилась, а Яндекс Дзен выдал мне статью о том, что власти Москвы хотят создать департамент одиночества.

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

как-то так 🙂

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

Производство и потребление

Есть два режима жизнедеятельности — производство и потребление.

Производство — это когда после вас остаются артефакты: код, письма, идеи, макеты. Потребление — все остальное. Написать программу — производство, посмотреть фейсбук — потребление.

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

В увеличении производства в первую очередь заинтересованы вы сами. Чем больше вы делаете (или другие, с вашей помощью) — тем быстрее достигаете целей.

Человечество изобрело кучу инструментов для потребления —телефоны, торговые центры, push-уведомления, шаурма у метро.

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

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

Эдвард Скотт написал о сравнении товаров в интернет-магазине.

Прежде, чем добавить эту функцию:

1. Проверьте, что у вас есть данные о параметрах товаров и что они структурированы, то есть, например, размеры не указаны то в сантиметрах, то в миллиметрах.

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

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

Если вы уже добавили:

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

2. При наведении курсора на контрол «Сравнить» показывайте подсказку с кратким пояснением: что это за инструмент и как он работает. Так его не примут за функцию сравнения цен с другими магазинами.

3. Дайте легко перейти к сравнению выбранных товаров. Например, отобразите панель с кнопкой «Сравнить выбранные товары» и миниатюрами этих товаров, прикреплённую к нижней или верхней границе окна браузера.

https://ux.pub/ux-rekomendatsii-po-uluchsheniyu-instrumenta-sravnenie-tovarov/

Время собирать фрукты

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

В выступлении Евгения Гурьянова из DocDoc на Product Sense (да, я всё ещё досматриваю то, что не успел послушать вживую в Минске) было про опыт использования этого подхода в масштабах компании и с активным использованием экспериментов. Команда Евгения проводит быстрые A/B проверки гипотез и примерно 2-3 из 10 экспериментов приносят рост конверсии. Причем не на пару процентов, как это обычно бывает, а сразу на 20-30! Вы удивитесь какие простые изменения могут дать заметный прирост в заявках от клиентов и, следовательно, в деньгах для компании!

Формат доклада тоже хорош. Фрукты Евгений классифицировал — будут и ананас, и груша, и даже картошка. Дело было в Минске... ;)

Энтони из UX Movement написал о таком состоянии кнопки как «загрузка».

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

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

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

Чтобы пользователь лучше понимал, что происходит, текст на кнопке можно менять, например: «Отправить» → «Отправка…»

https://ux.pub/v-kakih-sluchayah-neobhodimy-knopki-s-indikatorom-zagruzki/

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

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

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

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

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