Отмена

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

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

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

Выводы
Делайте кнопку «Отмена» темно-серой, чтобы пользователь воспринимал ее как возврат в безопасную зону, а не призыв к действию. 

Решительность и находчивость

Какое-то время назад я пообещал рассказать про мягкие навыки (soft skills), которые важны при работе в продуктовых командах.
В интернете полно информации про развитие soft skills и куча коучей, которые говорят, что помогут с развитием этих навыков. Я же поделюсь своими наблюдениями о том, что бывает, когда навык недоразвит.

Сегодня про решительность.

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

Получается, что решительный человек в состоянии самостоятельно принимать решения, реализовывать их и нести за них ответственность.
Боязнь принять ответственность за решение может снижать скорость, с которой двигается продукт или проект вперёд. Отсутствие решительности выглядит примерно так:

👎 Я проверил, но ты тоже посмотри, чтобы наверняка.

👎 Никто не говорил, что так можно делать.

👎 Я сделаю, но под твою ответственность.

👎 Я написал в поддержку, если не ответят за два дня, тогда позвоню.

👎 Обычно это делает Володя, поэтому я и не стал делать.

👎 Давайте соберёмся и обсудим.
...

Нерешительные коллеги могут порождать лишние итерации в работе: кто-то лишний раз смотрит, перепроверяет, ждёт. Создаётся дисбаланс и лишние трудозатраты. Если вы когда-либо сдавали дизайн или иную работу внешнему заказчику, то могли видеть, как нерешительность растягивает время. Если есть ЛПР, который решает — сдаётся быстро, а если есть коллективная ответственность — адская возня.

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

Я какое-то время писал статьи и публиковал их только в личный блог. Понятно, что мало прочтений (почти ноль), мотивация писать новое близка к нулю. Я не знал хорошо ли пишу или нет, но я знал, что есть только один способ это узнать — опубликовать статью в тематическом паблике. И вот в конце 2018 года я написал статью про способы onboarding пользователей и решился пригласить коллег из отрасли её почитать — запостил ссылку в UX club на Facebook.

Я переживал. Но пошли лайки и положительные комментарии, которые мотивировали меня писать ещё и звать коллег почитать. Теперь приглашать читателей в мои статьи стало для меня комфортным занятием — зона комфорта расширилась, пришла уверенность.
Конечно, обратная связь могла бы быть негативной. Но это тоже хорошо — я бы раньше понял, что незачем тратить время.

Прокачивали свою решительность и многие известные (теперь уже известные) люди. Например, знаменитый физик Лев Ландау был очень стеснительным. Но решил бороться с этим: в юном возрасте он привязывал к своей шляпе воздушный шарик и гулял так по Невскому проспекту в Ленинграде. Это было в начале 20-го века. Возможно, не решись он на такую прокачку он бы и не стал учёным, который мог сформулировать и реализовать самые смелые идеи.

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

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

Искусство задавать вопросы

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

История
В середине 60-х в США в маркетинговую компанию обратился магазин мебели с целью повысить свои продажи.
Маркетологи начали свою работу с того, что стали задавать вопросы:
Как происходит процесс продажи?
Продажа происходит по каталогам.
Как вы доставляете эти каталоги?
Их кладут в почтовые ящики
Что с ними происходит дальше?
Люди забирают рекламные каталоги и хранят их дома.
Чем ваша продукция отличается от конкурентов?
Особо ничем не отличается — у конкурентов представлен схожий ассортимент.
Тогда как покупатели выбирают, где сделать покупку?
Чаще всего люди просто берут первый попавшийся буклет и делают заказ.

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

Искусство задавать вопросы от Жени:
• Спрашивать только про опыт — как человек занимался чем-либо. Например, вместо вопроса — что вы думаете об этой функции, лучше спросить — когда вы в последний раз пользовались этой функцией?
• Если респондент обобщает — значит он врет. Маркерами могут являться такие фразы как: «в целом мне все нравится», «если разобраться, то ничего сложного нет» и т.д.
• Если человек не пытается решить проблему — значит её нет.
• Задать 5 почему подряд

Чем отличается результативность, продуктивность и эффективность друг от друга?

Если привести пример на человеке, которые изготавливает какую-либо продукцию, то получится следующая картина:

Результативность — это когда 100 гаек за 8 часов.

Продуктивность — это когда те же 100 гаек, но за 6 часов.

Эффективность — когда мастер, прежде чем браться за работу, анализирует и говорит — а зачем вам 100 гаек? — давайте лучше использовать сварку.

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

Как рассчитать время прочтения статьи

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

Время на чтение статьи рассчитываем так:
Средняя скорость чтения взрослого человека — 1500 знаков в минуту. Если взять количество знаков в статье и поделить на 1500, получим количество минут. Каждая картинка прибавляет к общему времени +0,2 минуты. Округляем до большего целого числа уже после 0,3 включительно. Запас взят, чтобы не сильно обманывать ожидания людей, что читают медленнее среднего.

Например у нас есть статья на 4315 знаков с двумя картинками.

4315/1500 =2,87
2,87+0,2×2 картинки = 3,27

Округляем до 3 минут чтения.

Если бы знаков было 4 350, то мы бы получили 4 минуты чтения, округлив 3,3 до 4.

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

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

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

Как генерировать идеи для продукта

Внешние источники:

1. Тренды в вашей индустрии: что происходит на рынке
2. Что делают конкуренты
3. Какие фичи просят пользователи конкурентов
4. Что делают похожие бизнесы на других рынках (например, Amazon vs InstaMart in India)
5. Что обсуждают на конференциях/форумах/спец ресурсах в вашей индустрии
6. Какие фичи просят ваши пользователи

Внутренние источники

7. Что пользователи делают в продукте (или не могут сделать); как выглядит user journey
8. Что говорят пользователи, которые перестали пользоваться продуктом
9. Что говорят другие отделы, которые общаются с пользователями (саппорт, сейлзы, маркетинг)
10. Что говорит руководство компании/топ менеджеры/лидеры
11. Что делают другие команды в вашей компании, есть ли возможность для коллаборации или заимствования
12. Догфудинг (интенсивное использование продукта самой командой)
13. Небольшие сфокусированные дискуссии с командой
14. Работа в "обратную сторону" от видения: если вы хотите достичь X, какие проблемы должны быть решены

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