Владимир Павлов написал об обманчивости метрик.
— Иногда случается (по мнению Владимира, слишком часто), что метрики растут, а продукт становится хуже;
— Нельзя судить о качестве продукта только по метрикам;
— При расчёте Retention важно, зачем пользователь возвращается. Он может вернуться, чтобы отменить подписку на рассылку, так как не нашёл такую ссылку в письме;
— Conversion rate взлетает, если упростить флоу, убрать лишнее. Но часто это «лишнее» — это честность, объяснения, без которых пользователи начинают делать то, чего не планировали. Может вырасти количество жалоб и возвратов, снизиться рейтинг в сторе;
— Пользователь должен идти вперёд, когда понимает и хочет, а не когда не заметил подвоха;
— Проводимое в продукте время не всегда означает вовлечённость. Это может быть и растерянность, когда пользователь потерялся в навигации;
— CTR можно повысить, пообещав больше, чем дашь;
— Задача дизайнера не повысить метрики, а сделать продукт понятнее, честнее, человечнее;
— Сначала поймите, чего хотите добиться, а потом — как это измерить;
— Объединяйте количественные и качественные данные: цифры и интервью, поведение и ощущения;
— Встраивайте обратную связь в продукт. Маленький опрос после действия, кнопка «Оставить обратную связь», быстрые реакции. Они не заменят аналитику, но дадут душу цифрам.
#metrics
— Иногда случается (по мнению Владимира, слишком часто), что метрики растут, а продукт становится хуже;
— Нельзя судить о качестве продукта только по метрикам;
— При расчёте Retention важно, зачем пользователь возвращается. Он может вернуться, чтобы отменить подписку на рассылку, так как не нашёл такую ссылку в письме;
— Conversion rate взлетает, если упростить флоу, убрать лишнее. Но часто это «лишнее» — это честность, объяснения, без которых пользователи начинают делать то, чего не планировали. Может вырасти количество жалоб и возвратов, снизиться рейтинг в сторе;
— Пользователь должен идти вперёд, когда понимает и хочет, а не когда не заметил подвоха;
— Проводимое в продукте время не всегда означает вовлечённость. Это может быть и растерянность, когда пользователь потерялся в навигации;
— CTR можно повысить, пообещав больше, чем дашь;
— Задача дизайнера не повысить метрики, а сделать продукт понятнее, честнее, человечнее;
— Сначала поймите, чего хотите добиться, а потом — как это измерить;
— Объединяйте количественные и качественные данные: цифры и интервью, поведение и ощущения;
— Встраивайте обратную связь в продукт. Маленький опрос после действия, кнопка «Оставить обратную связь», быстрые реакции. Они не заменят аналитику, но дадут душу цифрам.
#metrics
Хабр
Метрики, которые нас обманывают
Почему рост в аналитическом дашборде не всегда означает рост в продукте. Обо мне Привет, меня зовут Владимир Павлов. Я продуктовый дизайнер с опытом более пяти лет, большую часть из которых работаю с...
❤48❤🔥4
Сана Бехнам и Ралука Будию написали о дополненной реальности.
— AR-функции должны добавлять ценности. В приложении Google Arts & Culture известные картины можно повесить в своей гостинной, но нельзя рассмотреть в деталях. Зачем?
— В электронной коммерции важны реалистичность товара и правильный масштаб. Если не можете их обеспечить, лучше отказаться от использования AR;
— Если в каталоге есть карточки товаров с AR-функциями, добавьте соответствующий индикатор в список товаров и параметр фильтрации;
— Отмечать товары с AR-функциями лучше не иконкой, а текстом. Пользователи чаще всего не понимают метафор, которыми дизайнеры обозначают AR;
— Учитывайте контекст: не предлагайте читать текст, если человек должен находиться на расстоянии от устройства. Используйте аудиоинструкции, взаимодействие жестами (взмах или поднятие руки для начала);
— Аудиоинструкции позволяют сосредоточиться на объекте, не перенося взгляд на текстовое описание;
— Подумайте, кому AR-опыт может не подойти, и предупредите таких пользователей. Например, для визуальной примерки теней для век надо снять очки. Некоторые пользователи не могут смотреть в экран без очков;
— Инструкции и варианты взаимодействия лучше давать последовательно, шаг за шагом;
— Убедитесь, что инструкции и элементы управления хорошо видны на разном фоне. Можно использовать плашки со сплошной заливкой;
— Предусмотрите возможность внесения корректировок в объект и получения полезной информации, не выходя из AR-режима. Например, смена цвета, замена на похожий объект, отображение размеров;
— Но всё это должно занимать как можно меньше места на экране, чтобы не мешать изучению объекта и перемещению его по сцене.
In English. #ar
— AR-функции должны добавлять ценности. В приложении Google Arts & Culture известные картины можно повесить в своей гостинной, но нельзя рассмотреть в деталях. Зачем?
— В электронной коммерции важны реалистичность товара и правильный масштаб. Если не можете их обеспечить, лучше отказаться от использования AR;
— Если в каталоге есть карточки товаров с AR-функциями, добавьте соответствующий индикатор в список товаров и параметр фильтрации;
— Отмечать товары с AR-функциями лучше не иконкой, а текстом. Пользователи чаще всего не понимают метафор, которыми дизайнеры обозначают AR;
— Учитывайте контекст: не предлагайте читать текст, если человек должен находиться на расстоянии от устройства. Используйте аудиоинструкции, взаимодействие жестами (взмах или поднятие руки для начала);
— Аудиоинструкции позволяют сосредоточиться на объекте, не перенося взгляд на текстовое описание;
— Подумайте, кому AR-опыт может не подойти, и предупредите таких пользователей. Например, для визуальной примерки теней для век надо снять очки. Некоторые пользователи не могут смотреть в экран без очков;
— Инструкции и варианты взаимодействия лучше давать последовательно, шаг за шагом;
— Убедитесь, что инструкции и элементы управления хорошо видны на разном фоне. Можно использовать плашки со сплошной заливкой;
— Предусмотрите возможность внесения корректировок в объект и получения полезной информации, не выходя из AR-режима. Например, смена цвета, замена на похожий объект, отображение размеров;
— Но всё это должно занимать как можно меньше места на экране, чтобы не мешать изучению объекта и перемещению его по сцене.
In English. #ar
Teletype
Как улучшить юзабилити дополненной реальности в мобильных приложениях
Функции дополненной реальности в мобильных приложениях страдают от проблем, связанных с удобством использования...
👍9🔥2❤1👌1
Роман Черных написал, почему роль бизнес-аналитика устарела.
— Раньше он переводил расплывчатые пожелания бизнеса в технические требования;
— Например, в ответ на запрос «автоматизировать отдел продаж» собирал требования, документировал процессы и создавал спецификации с диаграммами вариантов использования;
— Сейчас недостаточно переводить запросы (фиксировать требования), надо проектировать продукты, которые решают проблемы пользователей и приносят прибыль;
— Этим совместно занимаются разные специалисты от продакта (определяет, что именно делать, например, зачем автоматизировать отдел продаж?) до системного архитектора;
— Бизнес-аналитик может стать продакт-менеджером, если ему ближе рыночный анализ, формирование идеи продукта, стратегии и метрики;
— Либо UX-аналитиком, если ближе исследование поведения пользователей и тестирование гипотез;
— Либо системным аналитиком, если ближе технические детали и понимание того, как работает система.
#analysis
— Раньше он переводил расплывчатые пожелания бизнеса в технические требования;
— Например, в ответ на запрос «автоматизировать отдел продаж» собирал требования, документировал процессы и создавал спецификации с диаграммами вариантов использования;
— Сейчас недостаточно переводить запросы (фиксировать требования), надо проектировать продукты, которые решают проблемы пользователей и приносят прибыль;
— Этим совместно занимаются разные специалисты от продакта (определяет, что именно делать, например, зачем автоматизировать отдел продаж?) до системного архитектора;
— Бизнес-аналитик может стать продакт-менеджером, если ему ближе рыночный анализ, формирование идеи продукта, стратегии и метрики;
— Либо UX-аналитиком, если ближе исследование поведения пользователей и тестирование гипотез;
— Либо системным аналитиком, если ближе технические детали и понимание того, как работает система.
#analysis
Дзен | Статьи
Почему слово «бизнес-аналитик» вдруг стало устаревшим
Статья автора «Русская Школа Сервисного Дизайна» в Дзене ✍: Ещё десять лет назад бизнес-аналитик был незаменимым звеном между заказчиком и IT-командой.
❤14👍9🥴4😁1
Ваня Серебренников написал о применении фреймворков для решения сложных задач.
— Использование фреймворков и инструментов без понимания, зачем они нужны, — карго-культ (так можно легко опознать джуна);
— Вопросы, без ответов на которые задачу не решить: зачем, кто, что, как, когда;
— Отвечать на них можно в любом порядке. Лучше начинать с «Зачем», но Иван часто начинает с «Кто», чтобы понять, у кого спрашивать;
— Каждый фреймворк помогает частично или полностью ответить на один или несколько таких вопросов;
— Например, Mental models отвечает на «Кто наши пользователи?», а Stakeholder map — на «Кто наши стейкхолдеры и как с ними работать»;
— «Зачем» — фильтр для всего, что мы делаем. Аргументы на этом уровне хорошо понимает бизнес. User story map помогает увидеть, на каком этапе взаимодействия находится фича, и определить её приоритет;
— «Что» — что именно надо сделать и что получат пользователи: описания фичей, макеты, Userflows;
— «Кто» — важно не просто понимать, «Кто», но и «Какие они»;
— Карта стейкхолдеров показывает, на какие группы их разделить и как с ними работать: Inform, Show consideration, Keep satisfied, Work together;
— Возможно, артефакты JTBD потребуются только для того, чтобы конкретные участники увидели, что на этот раз всё по-науке, а не на коленке;
— «Как и когда» — в сложных задачах могут появиться вопросы вроде «Как собрать требования» и «Как вообще выстроить процесс». Здесь Scrum, Agile, Design Thinking и так далее;
— Полезные процессы стоит добавлять постепенно. К каким-то изменениям и практикам команда может быть ещё не готова;
— Внедрение идёт проще, если выделить проблему команды или бизнеса и принести одну из практик в качестве решения;
— Берите фреймворки как есть и пробуйте применять. Лучше в тепличных условиях, без дедлайнов и жёстких требований к результату — иначе трудно учиться, рефлексировать и делать выводы;
— Уже после максимального освоения и практического применения со стабильным результатом фреймворк можно переделывать под себя, скрещивать с другими подходами и так далее.
#process
— Использование фреймворков и инструментов без понимания, зачем они нужны, — карго-культ (так можно легко опознать джуна);
— Вопросы, без ответов на которые задачу не решить: зачем, кто, что, как, когда;
— Отвечать на них можно в любом порядке. Лучше начинать с «Зачем», но Иван часто начинает с «Кто», чтобы понять, у кого спрашивать;
— Каждый фреймворк помогает частично или полностью ответить на один или несколько таких вопросов;
— Например, Mental models отвечает на «Кто наши пользователи?», а Stakeholder map — на «Кто наши стейкхолдеры и как с ними работать»;
— «Зачем» — фильтр для всего, что мы делаем. Аргументы на этом уровне хорошо понимает бизнес. User story map помогает увидеть, на каком этапе взаимодействия находится фича, и определить её приоритет;
— «Что» — что именно надо сделать и что получат пользователи: описания фичей, макеты, Userflows;
— «Кто» — важно не просто понимать, «Кто», но и «Какие они»;
— Карта стейкхолдеров показывает, на какие группы их разделить и как с ними работать: Inform, Show consideration, Keep satisfied, Work together;
— Возможно, артефакты JTBD потребуются только для того, чтобы конкретные участники увидели, что на этот раз всё по-науке, а не на коленке;
— «Как и когда» — в сложных задачах могут появиться вопросы вроде «Как собрать требования» и «Как вообще выстроить процесс». Здесь Scrum, Agile, Design Thinking и так далее;
— Полезные процессы стоит добавлять постепенно. К каким-то изменениям и практикам команда может быть ещё не готова;
— Внедрение идёт проще, если выделить проблему команды или бизнеса и принести одну из практик в качестве решения;
— Берите фреймворки как есть и пробуйте применять. Лучше в тепличных условиях, без дедлайнов и жёстких требований к результату — иначе трудно учиться, рефлексировать и делать выводы;
— Уже после максимального освоения и практического применения со стабильным результатом фреймворк можно переделывать под себя, скрещивать с другими подходами и так далее.
#process
Teletype
Сложные и размытые задачки — фреймворки, ч.1
В прошлых постах в тележке мы уже рассмотрели «почему туплю, когда начинаю сложные задачи» и в самых общих чертах — «как приступать...
❤13👍11❤🔥1⚡1🤝1
Юля Кондратьева написала, как помочь пользователю ждать (со ссылками на результаты экспериментов).
— Во время загрузки даже незамысловатый контент повышает время, которое пользователь готов ждать. Загрузки экрана с логотипом ждали на 1 секунду дольше, чем пустого экрана;
— При 10-секундном ожидании анимированный персонаж вместо прогресс-бара уменьшает воспринимаемое время ожидания на 1 секунду, а люди оценивают опыт на 1 балл выше. Но для 5- и 2-секундного ожидания прогресс-бар лучше;
— В развлекательных приложениях лучше работает энергичная анимация (например, персонаж куда-то летит). В полезных — медленная (персонаж расслабленно крутит обруч);
— В цифровой среде ожидание обычно меньше минуты. Лишняя информация о процессе ожидания привлекает к нему ненужное внимание. Поэтому пустой экран может быть лучше лоадера: в тесте из первого абзаца загрузки пустого экрана ждали на 1,5 секунды дольше, чем экрана со спинером;
— Прогресс-бар, быстро заполняющийся до 70% и затем замедляющийся, уменьшает воспринимаемое время ожидания лучше тех, которые заполняются равномерно или ускоряются в конце;
— Attentional Gate Model: счётчик ожидания запускается тогда, когда мы обращаем на него внимание. Чем больше мы уделяем ему внимания, тем дольше кажется событие. Поэтому лучше отвлекать человека от идеи ожидания и не показывать связанные с ней прогресс-бары (если это не длительное ождание).
#loader
— Во время загрузки даже незамысловатый контент повышает время, которое пользователь готов ждать. Загрузки экрана с логотипом ждали на 1 секунду дольше, чем пустого экрана;
— При 10-секундном ожидании анимированный персонаж вместо прогресс-бара уменьшает воспринимаемое время ожидания на 1 секунду, а люди оценивают опыт на 1 балл выше. Но для 5- и 2-секундного ожидания прогресс-бар лучше;
— В развлекательных приложениях лучше работает энергичная анимация (например, персонаж куда-то летит). В полезных — медленная (персонаж расслабленно крутит обруч);
— В цифровой среде ожидание обычно меньше минуты. Лишняя информация о процессе ожидания привлекает к нему ненужное внимание. Поэтому пустой экран может быть лучше лоадера: в тесте из первого абзаца загрузки пустого экрана ждали на 1,5 секунды дольше, чем экрана со спинером;
— Прогресс-бар, быстро заполняющийся до 70% и затем замедляющийся, уменьшает воспринимаемое время ожидания лучше тех, которые заполняются равномерно или ускоряются в конце;
— Attentional Gate Model: счётчик ожидания запускается тогда, когда мы обращаем на него внимание. Чем больше мы уделяем ему внимания, тем дольше кажется событие. Поэтому лучше отвлекать человека от идеи ожидания и не показывать связанные с ней прогресс-бары (если это не длительное ождание).
#loader
Хабр
Как помочь пользователю ждать. Научные исследования
Сервисы сейчас работают достаточно быстро — почти нигде нет прям экранов ожидания, где приходится ждать больше секунды или нескольких. Но иногда все-таки приходится: например, при онбординге, если...
👍41❤🔥9🥰5❤4🔥2
Дмитрий Ваницкий написал, как проектировать, чтобы вызывать и сохранять у пользователей состояние потока.
— Проектирование интерфейса — молодая отрасль. Чтобы не изобретать что-то по второму кругу, можно обратиться к смежным наукам, которые изучают человека, вроде психологии;
— Мозг человека меняется медленно, поэтому его исследования ещё долго будут актуальны;
— Внимание человека ограничено. Из 40к внешних сигналов мозг обрабатывает около 40. Если внимание рассеивается на множество вещей, человек может сильно загрузиться;
— Михай Чиксентмихайи называл состояние потока счастьем через деятельность. Все люди могут в него входить, соблюдая следующие требования;
— Человек должен представлять себе результат работы и то, что он за это получит. Важно: цель должна быть в пределах его возможностей и достаточно сложной, чтобы было интересно. Цели должны эволюционировать с повышением уровня мастерства;
— Он должен знать, как этой цели достичь, владеть необходимыми инструментами и знаниями. Помогает расстановка акцентов, аффордансы, ограничения, в том числе ограничение количества вариантов для выбора, чтобы избежать ступора;
— При проектировании надо опираться на ментальные модели, а модели реализации прятать от пользователей, чтобы ненужные детали не отвлекали;
— Обратная связь должна быть немедленной, чтобы пользователь понимал, совершил он действие или нет и насколько приблизился к цели. При этом она должна быть соразмерной действию;
— Если не получается отказаться от режимов, пользователь должен понимать, в каком режиме находится система;
— Человек должен иметь возможность сконцентрироваться и чувствовать контроль. Помогает визуальная иерархия. Избегайте многозадачности. Система не должна тормозить и долго обрабатывать отдельные операции без подходящих индикаторов прогресса. Должна быть возможность отмены;
— Его личность должна в процессе развиваться, как развивается в играх. Игры отлично вводят в состояние потока.
#psychology
— Проектирование интерфейса — молодая отрасль. Чтобы не изобретать что-то по второму кругу, можно обратиться к смежным наукам, которые изучают человека, вроде психологии;
— Мозг человека меняется медленно, поэтому его исследования ещё долго будут актуальны;
— Внимание человека ограничено. Из 40к внешних сигналов мозг обрабатывает около 40. Если внимание рассеивается на множество вещей, человек может сильно загрузиться;
— Михай Чиксентмихайи называл состояние потока счастьем через деятельность. Все люди могут в него входить, соблюдая следующие требования;
— Человек должен представлять себе результат работы и то, что он за это получит. Важно: цель должна быть в пределах его возможностей и достаточно сложной, чтобы было интересно. Цели должны эволюционировать с повышением уровня мастерства;
— Он должен знать, как этой цели достичь, владеть необходимыми инструментами и знаниями. Помогает расстановка акцентов, аффордансы, ограничения, в том числе ограничение количества вариантов для выбора, чтобы избежать ступора;
— При проектировании надо опираться на ментальные модели, а модели реализации прятать от пользователей, чтобы ненужные детали не отвлекали;
— Обратная связь должна быть немедленной, чтобы пользователь понимал, совершил он действие или нет и насколько приблизился к цели. При этом она должна быть соразмерной действию;
— Если не получается отказаться от режимов, пользователь должен понимать, в каком режиме находится система;
— Человек должен иметь возможность сконцентрироваться и чувствовать контроль. Помогает визуальная иерархия. Избегайте многозадачности. Система не должна тормозить и долго обрабатывать отдельные операции без подходящих индикаторов прогресса. Должна быть возможность отмены;
— Его личность должна в процессе развиваться, как развивается в играх. Игры отлично вводят в состояние потока.
#psychology
Medium
Проектирование потока
Лонгрид о том, что мы можем привнести в UX из современной (и не очень) позитивной психологии
❤19👍13❤🔥2⚡1👏1
Forwarded from Павел Шерер
Давайте поговорим о культе метрик и к чему он может привести.
Если на вопрос «а нахуя» вам отвечали «так показала аналитика» или в своих продуктах вы были вынуждены повышать какую-то нелепую (по вашему мнению) метрику, то этот пост для вас.
За последние 10-20 лет в IT аналитика стала решающим фактором в принятии продуктовых решений. Дашборды, отчёты, графики и схемы — это то, на чём мы строим свои продукты. Это не плохо, данные для того и нужны, чтобы их анализировать.
Но частенько мы даже в мыслях не допускаем, что наши дашборды могут врать. Что одна метрика, возведённая в ранг культа, может если и не похоронить всю компанию, то как минимум сделать противоположное своему назначению.
Давайте я приведу несколько примеров:
Да, там было не всё так просто, но это — большие, публичные компании. Сколько таких проёбов было у компаний помельче?
Следование одной понятной и легко измеримой метрике — это классический пример туннельного зрения. Почти всегда продукт сильно шире одного показателя. Цифры должны служить, а не командовать.
Что делать на практике?
1. Держите пул из 3–5 метрик: рост, удержание, качество, выручка, удовлетворённость и тп. Не выделяйте одну, стройте иерархию. Если нижняя метрика растёт, а верхние нет, то должны возникнуть вопросики.
2. Валидируйте данные. Стройте контрольные отчёты, проверяйте формулы, смотрите срезы. Важно построить процессы таким образом, чтобы каждый показатель подтверждался другими.
3. Ставьте «гвардейцев» — вторые метрики, которые тормозят злоупотребления (например, NPS к Time in App). Это позволит вовремя очнуться, даже если «зависимые» метрики не ведут себя подозрительно.
4. Слушайте пользователей: юзтесты, саппорт, соцсети. Не только цифры в дашбордах, но и реальные отзывы.
Я для себя обычно разбиваю показатели на 3 слоя:
1. North Star (LTV/CAC, валовая маржа). Это то, к чему идёт продукт и компания. На короткой дистанции их толком не посчитаешь.
2. Здоровье продукта сегодня (конверсия оплаты, churn). А вот это как раз можно измерять если и не в моменте, то почти.
3. Пульс системы (5xx ошибки, latency, аптайм). Это чаще технические метрики, от которых зависит качество продукта.
Важно: все эти слои не изолированы, а связаны сквозной аналитикой. Потому что поклонение какой-то одной цифре — это как минимум глупо
Если на вопрос «а нахуя» вам отвечали «так показала аналитика» или в своих продуктах вы были вынуждены повышать какую-то нелепую (по вашему мнению) метрику, то этот пост для вас.
За последние 10-20 лет в IT аналитика стала решающим фактором в принятии продуктовых решений. Дашборды, отчёты, графики и схемы — это то, на чём мы строим свои продукты. Это не плохо, данные для того и нужны, чтобы их анализировать.
Но частенько мы даже в мыслях не допускаем, что наши дашборды могут врать. Что одна метрика, возведённая в ранг культа, может если и не похоронить всю компанию, то как минимум сделать противоположное своему назначению.
Давайте я приведу несколько примеров:
В 2015-2017 Facebook убеждал медиа «переходить на видео», показывая им астрономические показатели Average Watch Time и Video Views. Позже в суде оказалось, что ребятишки малость погорячились (до 900% по данным иска) и Facebook знал об этом больше года. Издатели уволили сотни текстовых редакторов, вложились в видеопродакшн, но получили только просадку по баблу. В итоге Facebook выплатил $40 млн компенсации рекламодателям, а понятие «pivot to video» стало мемом.
В 2010 году соц-новостник Digg решил угодить издателям: в четвёртой версии приоритет отдали автопостам медиа, а не голосам пользователей. Через неделю комьюнити устроило «Quit Digg Day» и дружно съебало на Reddit. Трафик Digg рухнул на 25% за месяц, а к 2012-му — на 90%. Команду урезали, компанию продали за копейки. Метрика «объём партнёрского контента» стала главенствовать, и комьюнити просто вышло из чата.
В 2018 Snapchat решил поднять Time in App, и расхерачил интерфейс, как ты свой палец с заусенцем: разделили чаты и сторис, усложнили навигацию. Пользователи взбунтовались, петицию против редизайна подписали 1.2 млн человек, сервис впервые потерял 3 млн DAU. Акции просели на 20%, и компания врубила заднюю. Я прям вижу, как топы спускают «надо поднять минуты в приложении», а дизайнеры «хуйня вопрос, усложним UX»
Да, там было не всё так просто, но это — большие, публичные компании. Сколько таких проёбов было у компаний помельче?
Следование одной понятной и легко измеримой метрике — это классический пример туннельного зрения. Почти всегда продукт сильно шире одного показателя. Цифры должны служить, а не командовать.
Что делать на практике?
1. Держите пул из 3–5 метрик: рост, удержание, качество, выручка, удовлетворённость и тп. Не выделяйте одну, стройте иерархию. Если нижняя метрика растёт, а верхние нет, то должны возникнуть вопросики.
2. Валидируйте данные. Стройте контрольные отчёты, проверяйте формулы, смотрите срезы. Важно построить процессы таким образом, чтобы каждый показатель подтверждался другими.
3. Ставьте «гвардейцев» — вторые метрики, которые тормозят злоупотребления (например, NPS к Time in App). Это позволит вовремя очнуться, даже если «зависимые» метрики не ведут себя подозрительно.
4. Слушайте пользователей: юзтесты, саппорт, соцсети. Не только цифры в дашбордах, но и реальные отзывы.
Я для себя обычно разбиваю показатели на 3 слоя:
1. North Star (LTV/CAC, валовая маржа). Это то, к чему идёт продукт и компания. На короткой дистанции их толком не посчитаешь.
2. Здоровье продукта сегодня (конверсия оплаты, churn). А вот это как раз можно измерять если и не в моменте, то почти.
3. Пульс системы (5xx ошибки, latency, аптайм). Это чаще технические метрики, от которых зависит качество продукта.
Важно: все эти слои не изолированы, а связаны сквозной аналитикой. Потому что поклонение какой-то одной цифре — это как минимум глупо
4👍36❤17🔥10
Андрей Шапиро написал о придуманной им Карте реализации историй.
— Она развивает практику User story mapping благодаря новому шаблону историй и слоям для экспресс-проектирования;
— Она лаконично выявляет сценарии использования и определяет форму их технической реализации;
— Первая проблема историй: они наводят на одно конкретное решение, которое часто оказывается неверным, так как задача ещё слабо изучена, либо проблема лишь подразумевается и формулируется в виде решения-кандидата;
— Оперировать альтернативами в разработке крайне важно, так как время и деньги ограничены, и непонятно, какое решение уложится в срок и бюджет;
— Вторая проблема: они не описывают предметную область. Эти знания появляются слишком поздно, что нередко приводит к перепроектированию;
— По горизонтали карта состоит из историй, выкладываемых в порядке их следования;
— По вертикали — из 7 смысловых слоёв: цель действия (зачем?), носитель (кто или что выполняет действие), ситуация (контекст, когда происходит действие), способ действия (каким образом что-то делается), объекты оперирования (с чем взаимодействует носитель, что получается в итоге), форма решения (варианты технических решений), структура экранных блоков;
— Реализация сопряжена с реальным миром и всегда вносит коррективы в замысел. Хоть нам и проще говорить о конкретной форме будущего решения («кнопочное мышление»), замысел должен всегда главенствовать;
— В Карте реализации историй мы постепенно спускаемся от чистой функции к реализации процесса и конкретного инструмента или нескольких, обеспечивающих этот процесс;
— Часто у него могут быть разные варианты срабатывания, в зависимости от ситуации;
— Это деятельностные истории. В отличие от пользовательских в них на первом месте цели и механики деятельности, а потребности вовлечённого в деятельность человека — на втором. На схеме носитель расположен сразу под целью лишь для того, чтобы избежать дублирования;
— Без прикидки объектов оперирования с высокой вероятностью потом придётся возвращаться к перепроектированию. Их можно просто перечислить, но лучше разделить на объекты до взаимодействия и после;
— Форм решения на карте может быть множество. Но приоритизировать разработку и планировать релизы с картой удобно не более чем на сейчас и на потом;
— Начать заполнение карты можно с любого слоя. Самый верхний слой смыслов зачастую не удаётся взять с первого раза. Главное, чтобы все слои в конце концов оказались согласованы.
Видео о карте: ВК, Рутуб, Ютуб. #user_story
— Она развивает практику User story mapping благодаря новому шаблону историй и слоям для экспресс-проектирования;
— Она лаконично выявляет сценарии использования и определяет форму их технической реализации;
— Первая проблема историй: они наводят на одно конкретное решение, которое часто оказывается неверным, так как задача ещё слабо изучена, либо проблема лишь подразумевается и формулируется в виде решения-кандидата;
— Оперировать альтернативами в разработке крайне важно, так как время и деньги ограничены, и непонятно, какое решение уложится в срок и бюджет;
— Вторая проблема: они не описывают предметную область. Эти знания появляются слишком поздно, что нередко приводит к перепроектированию;
— По горизонтали карта состоит из историй, выкладываемых в порядке их следования;
— По вертикали — из 7 смысловых слоёв: цель действия (зачем?), носитель (кто или что выполняет действие), ситуация (контекст, когда происходит действие), способ действия (каким образом что-то делается), объекты оперирования (с чем взаимодействует носитель, что получается в итоге), форма решения (варианты технических решений), структура экранных блоков;
— Реализация сопряжена с реальным миром и всегда вносит коррективы в замысел. Хоть нам и проще говорить о конкретной форме будущего решения («кнопочное мышление»), замысел должен всегда главенствовать;
— В Карте реализации историй мы постепенно спускаемся от чистой функции к реализации процесса и конкретного инструмента или нескольких, обеспечивающих этот процесс;
— Часто у него могут быть разные варианты срабатывания, в зависимости от ситуации;
— Это деятельностные истории. В отличие от пользовательских в них на первом месте цели и механики деятельности, а потребности вовлечённого в деятельность человека — на втором. На схеме носитель расположен сразу под целью лишь для того, чтобы избежать дублирования;
— Без прикидки объектов оперирования с высокой вероятностью потом придётся возвращаться к перепроектированию. Их можно просто перечислить, но лучше разделить на объекты до взаимодействия и после;
— Форм решения на карте может быть множество. Но приоритизировать разработку и планировать релизы с картой удобно не более чем на сейчас и на потом;
— Начать заполнение карты можно с любого слоя. Самый верхний слой смыслов зачастую не удаётся взять с первого раза. Главное, чтобы все слои в конце концов оказались согласованы.
Видео о карте: ВК, Рутуб, Ютуб. #user_story
ashapiro.ru
Карта реализации историй
Метод анализа-синтеза требований к цифровым системам и предварительного их проектирования
👍11❤4❤🔥3
Даша Почекуева написала, как дизайнеру влиять на продукт на стратегическом уровне.
— Проблема: постоянный поток небольших рутинных задач, закрывающих боли здесь и сейчас без долгосрочного плана, понимания, куда всё движется;
— Стратегическое мышление у дизайнера — это 1) видеть будущие задачи, 2) фокусироваться не на интерфейсе, а на незакрытых болях, масштабировании, адекватности продукта рынкам и целям, 3) подниматься от макета или сценария на уровень порождаемых рисков и возможностей, 4) не преувеличивать ценность дизайна там, где она невелика, 5) мыслить большими отрезками времени, чем спринт или даже квартал;
— Это надо, если вы долго работаете в продукте (2+ года), видите его системные боли, выходите за границы своей ответственности (делаете концепты, предлагаете что-то, что команда не планировала), думаете, что это надо только вам и качаете навыки презентации и убедительности, чтобы продавать своё видение;
— Не в этих навыках дело. В какой-то момент дизайн-карьеры даже самые классные презентации не так уж сильно повышают шансы продать идею;
— Не надо приносить идеальное решение проблемы (оно не будет идеальным, так как всего предусмотреть нельзя), надо делиться опытом, прикидывать риски и возможности, сильные и слабые стороны, предлагать варианты;
— «Вот наши проблемы, вот наша с тобой экспертиза, давай вместе придумаем, как быть»;
— Ищите партнёров, но не среди своих руководителей или подчинённых, у них о другом голова болит. Подойдут бизнес-заказчики, продакты, CPO (обогатят своим опытом), дизайнеры вашего уровня (облегчат ваш труд);
— Они должны быть заняты долгосрочным развитием продукта и иметь возможность решать, куда двигаться;
— Убедитесь, что у вас похожие устремления, предложите раз в 1–2 недели встречаться для обмена новостями и планами, помогайте своей экспертизой, устраивайте совместные брейнштормы, наблюдайте и впитывайте: какой у партнёра фокус, что ему важно, какими инструментами пользуется;
— Не торопитесь. На создание почвы для партнёрства может уйти и полгода, и год.
#product
— Проблема: постоянный поток небольших рутинных задач, закрывающих боли здесь и сейчас без долгосрочного плана, понимания, куда всё движется;
— Стратегическое мышление у дизайнера — это 1) видеть будущие задачи, 2) фокусироваться не на интерфейсе, а на незакрытых болях, масштабировании, адекватности продукта рынкам и целям, 3) подниматься от макета или сценария на уровень порождаемых рисков и возможностей, 4) не преувеличивать ценность дизайна там, где она невелика, 5) мыслить большими отрезками времени, чем спринт или даже квартал;
— Это надо, если вы долго работаете в продукте (2+ года), видите его системные боли, выходите за границы своей ответственности (делаете концепты, предлагаете что-то, что команда не планировала), думаете, что это надо только вам и качаете навыки презентации и убедительности, чтобы продавать своё видение;
— Не в этих навыках дело. В какой-то момент дизайн-карьеры даже самые классные презентации не так уж сильно повышают шансы продать идею;
— Не надо приносить идеальное решение проблемы (оно не будет идеальным, так как всего предусмотреть нельзя), надо делиться опытом, прикидывать риски и возможности, сильные и слабые стороны, предлагать варианты;
— «Вот наши проблемы, вот наша с тобой экспертиза, давай вместе придумаем, как быть»;
— Ищите партнёров, но не среди своих руководителей или подчинённых, у них о другом голова болит. Подойдут бизнес-заказчики, продакты, CPO (обогатят своим опытом), дизайнеры вашего уровня (облегчат ваш труд);
— Они должны быть заняты долгосрочным развитием продукта и иметь возможность решать, куда двигаться;
— Убедитесь, что у вас похожие устремления, предложите раз в 1–2 недели встречаться для обмена новостями и планами, помогайте своей экспертизой, устраивайте совместные брейнштормы, наблюдайте и впитывайте: какой у партнёра фокус, что ему важно, какими инструментами пользуется;
— Не торопитесь. На создание почвы для партнёрства может уйти и полгода, и год.
#product
Medium
Как продуктовому дизайнеру качать стратегическое мышление
Перед вами большая меланхоличная статья без картинок про софт-скиллы. Никто не обещал, что жизнь дизайнера будет легкой.
❤19👍4
В TypeType написали об OpenType-фичах шрифтов.
— В одной гарнитуре может быть несколько форм одной и той же буквы. Иногда их добавляют ради красоты, иногда с определённой целью. Например, вариант строчной буквы эль «l» с хвостиком полезен в навигации, чтобы её не путали с прописной ай «I»;
— Альтернативы отдельных букв со схожими стилистическими решениями объединяют в стилистические сеты. Применив сет можно, например, превратить нейтральный гротеск в мягкий или поменять форму точки с квадратной на круглую для всех знаков, где она есть;
— Лигатуры — знаки, образованные путём соединения нескольких глифов. Бывают стандартными (например, из практических соображений соединяют fi, fl, ff, ffi, ffl, ft) и дискреционными (могут быть самыми разными, если шрифтовик увидел в этом практический или эстетический смысл);
— Цифры часто бывают в виде дробей, числителей и знаменателей (из них составляются дроби), надстрочных и подстрочных индексов, табулярных цифр (одинаковая ширина у всех цифр), в залитых и пустых кружках, старостильные цифры;
— Почти во всех современных шрифтах есть базовые иконки и другие необычные символы, сочетающиеся со шрифтом. Иногда можно сэкономить на отрисовке нужной графики;
— Сеты локализации (иногда включаются через стилистические сеты). Например, болгарская локализация для кириллицы;
— В Фигме стилистические сеты можно включить через панель Text → Type Settings → Details;
— Список всех фич обычно публикуют в спесимене на сайте, где шрифт продаётся.
Лекция «Скрытые возможности шрифта». #font
— В одной гарнитуре может быть несколько форм одной и той же буквы. Иногда их добавляют ради красоты, иногда с определённой целью. Например, вариант строчной буквы эль «l» с хвостиком полезен в навигации, чтобы её не путали с прописной ай «I»;
— Альтернативы отдельных букв со схожими стилистическими решениями объединяют в стилистические сеты. Применив сет можно, например, превратить нейтральный гротеск в мягкий или поменять форму точки с квадратной на круглую для всех знаков, где она есть;
— Лигатуры — знаки, образованные путём соединения нескольких глифов. Бывают стандартными (например, из практических соображений соединяют fi, fl, ff, ffi, ffl, ft) и дискреционными (могут быть самыми разными, если шрифтовик увидел в этом практический или эстетический смысл);
— Цифры часто бывают в виде дробей, числителей и знаменателей (из них составляются дроби), надстрочных и подстрочных индексов, табулярных цифр (одинаковая ширина у всех цифр), в залитых и пустых кружках, старостильные цифры;
— Почти во всех современных шрифтах есть базовые иконки и другие необычные символы, сочетающиеся со шрифтом. Иногда можно сэкономить на отрисовке нужной графики;
— Сеты локализации (иногда включаются через стилистические сеты). Например, болгарская локализация для кириллицы;
— В Фигме стилистические сеты можно включить через панель Text → Type Settings → Details;
— Список всех фич обычно публикуют в спесимене на сайте, где шрифт продаётся.
Лекция «Скрытые возможности шрифта». #font
dsgners.ru
Функции OpenType: как ими пользоваться? — дизайнерс
В шрифтах заложено очень много интересных возможностей. Однако многие дизайнеры либо вовсе не знают, что эти возможности существуют, либо не понимают, как ими пользоваться. Но на самом деле никто от вас ничего не скрывает: все эти инструменты очень легко…
👍6❤3
Юля Кондратьева написала, как снизить боль от расставания с деньгами во время оплаты (со ссылками на результаты экспериментов).
— Люди с большей вероятностью покупают нездоровую пищу, если платят картой, а не наличными;
— Чем больше человек обращает внимание на отдаваемые деньги, тем сильнее боль от расставания с ними;
— Если цена не является решающим фактором, её делают максимально незаметной в карточке товара. Пример: премиальные бренды одежды;
— Если цена является преимуществом, стоит сделать акцент на ней на этапе выбора, а на этапе покупки (в корзине) — не выпячивать (меньший размер и максимально привычный шрифт);
— Иногда цену крупно показывают после оформления заказа. Для повышения вероятности повторного заказа лучше сделать акцент на выгодах покупки;
— Если покупатели могут покрутить барабан и получить разные скидки с определённой вероятностью, они тратят на 54% больше, чем с обычными фиксированными скидками;
— Формулировка «20% шанс заплатить $40» работает намного лучше, чем «20% шанс на скидку $20»;
— Люди тратят больше (особенно на бесполезные штуки), если чувствуют поддержку социума. И деньги, и социальная поддержка — это безопасность. Можно потратить больше денег, если это компенсируется.
#price
— Люди с большей вероятностью покупают нездоровую пищу, если платят картой, а не наличными;
— Чем больше человек обращает внимание на отдаваемые деньги, тем сильнее боль от расставания с ними;
— Если цена не является решающим фактором, её делают максимально незаметной в карточке товара. Пример: премиальные бренды одежды;
— Если цена является преимуществом, стоит сделать акцент на ней на этапе выбора, а на этапе покупки (в корзине) — не выпячивать (меньший размер и максимально привычный шрифт);
— Иногда цену крупно показывают после оформления заказа. Для повышения вероятности повторного заказа лучше сделать акцент на выгодах покупки;
— Если покупатели могут покрутить барабан и получить разные скидки с определённой вероятностью, они тратят на 54% больше, чем с обычными фиксированными скидками;
— Формулировка «20% шанс заплатить $40» работает намного лучше, чем «20% шанс на скидку $20»;
— Люди тратят больше (особенно на бесполезные штуки), если чувствуют поддержку социума. И деньги, и социальная поддержка — это безопасность. Можно потратить больше денег, если это компенсируется.
#price
Хабр
Боль расставания с деньгами и как дизайнер может на нее повлиять. Исследования
Отдавать свои деньги — неприятно. Для этого ощущения есть специальный термин Pain of Payment или стресс расставания с деньгами. Исследований на эту тему проводят много: все, кому интересно...
👍19❤9👎4
Игорь Штанг написал, почему разряжают слова, набранные прописными буквами.
— В металлическом наборе площадки букв могут максимально прижаться друг в другу, из-за чего буквы просто невозможно поставить ближе. Из-за этого пробел между Р и Д в слове СЕРДЦА может оказаться слишком большим;
— В цифровом наборе такого ограничения нет;
— Проблему с Р и Д можно решить настройкой межбуквенного пробела (этот процесс называется кернингом). Но в случае с Ц и А этому мешает форма букв;
— Из-за таких пар прописной набор принято разряжать, чтобы скрыть неравномерности в межбуквенных пробелах;
— Не всем шрифтам это подходит. Насыщенные и узкие шрифты с небольшими внутрибуквенными просветами выглядят лучше в плотном наборе (с небольшими межбуквенными пробелами).
Копия в Медиуме. #typography
— В металлическом наборе площадки букв могут максимально прижаться друг в другу, из-за чего буквы просто невозможно поставить ближе. Из-за этого пробел между Р и Д в слове СЕРДЦА может оказаться слишком большим;
— В цифровом наборе такого ограничения нет;
— Проблему с Р и Д можно решить настройкой межбуквенного пробела (этот процесс называется кернингом). Но в случае с Ц и А этому мешает форма букв;
— Из-за таких пар прописной набор принято разряжать, чтобы скрыть неравномерности в межбуквенных пробелах;
— Не всем шрифтам это подходит. Насыщенные и узкие шрифты с небольшими внутрибуквенными просветами выглядят лучше в плотном наборе (с небольшими межбуквенными пробелами).
Копия в Медиуме. #typography
Livejournal
Проблемы кернинга на примере одной надписи
У меня на кухне висит советское наглядное пособие по анатомии. Под картинкой заголовок с такими странными межбуквенными расстояниями, что слово СЕР ДЦА разрывается на две части: Я сначала не понял, как так получилось, почему всё настолько неровно поставили.…
❤19👍5❤🔥1🕊1
Женя Арутюнов, Аня Худякова и Света Светликова написали об особенностях восприятия и принципах гештальта с большим количеством примеров.
— При восприятии любой формы мы заполняем пробелы, достраиваем формы до целостного образа, стремимся «закрыть гештальт»;
— Цветовые пятна, регистрируемые сетчаткой глаза, мы воспринимаем как объекты и фон;
— Расположенные рядом объекты формируют группу и ощущаются связанными (Бирман о принципе близости в интерфейсах: раз и два);
— Совместное движение группирует объекты даже сильнее (активно используется в интерфейсах);
— Также мы группируем объекты по визуальному сходству (подобию). Близость и подобие могут конкурировать;
— Объекты в виде непрерывной цепочки образуют устойчивую целостность. Непрерывность сильнее близости;
— Если объекты расположены в форме замкнутой фигуры, это создаёт новую целостность. Разрывы в фигуре будут мысленно достроены. Фигура сильнее фона и частей, из которых она состоит;
— Сюда можно отнести и способность видеть объёмные объекты за счёт светотени и искажений перспективы;
— Как бы ни были сильны эти эффекты, наибольшую роль в интерпретации увиденного играет опыт. Например, способность увидеть мяч вместо 6 пятиугольников;
— Что-то мы научились узнавать не лично, а как вид. Например, видеть лица, живое в неживом (парейдолия). Это повышало шансы выжить;
— Принципы гештальта не получится использовать как композиционный инструмент или метод проектирования. Скорее это способ оценить, что получается.
#psychology
— При восприятии любой формы мы заполняем пробелы, достраиваем формы до целостного образа, стремимся «закрыть гештальт»;
— Цветовые пятна, регистрируемые сетчаткой глаза, мы воспринимаем как объекты и фон;
— Расположенные рядом объекты формируют группу и ощущаются связанными (Бирман о принципе близости в интерфейсах: раз и два);
— Совместное движение группирует объекты даже сильнее (активно используется в интерфейсах);
— Также мы группируем объекты по визуальному сходству (подобию). Близость и подобие могут конкурировать;
— Объекты в виде непрерывной цепочки образуют устойчивую целостность. Непрерывность сильнее близости;
— Если объекты расположены в форме замкнутой фигуры, это создаёт новую целостность. Разрывы в фигуре будут мысленно достроены. Фигура сильнее фона и частей, из которых она состоит;
— Сюда можно отнести и способность видеть объёмные объекты за счёт светотени и искажений перспективы;
— Как бы ни были сильны эти эффекты, наибольшую роль в интерпретации увиденного играет опыт. Например, способность увидеть мяч вместо 6 пятиугольников;
— Что-то мы научились узнавать не лично, а как вид. Например, видеть лица, живое в неживом (парейдолия). Это повышало шансы выжить;
— Принципы гештальта не получится использовать как композиционный инструмент или метод проектирования. Скорее это способ оценить, что получается.
#psychology
Дизайн-бюро «Интуиция»
Принципы гештальта и другие особенности восприятия · Интуиция
Женя Арутюнов, Аня Худякова, Света Светликова
❤10👍6❤🔥2
Виктор Теплов рассказал, как работать с иконками в Фигме. А я немного дополнил из других источников.
— Иконку преобразуйте в векторную форму (flatten);
— Исходник полезно сохранить, чтобы не перерисовывать иконку, если в будущем потребуется её изменить;
— Назовите слой Vector. Это стандартное имя для таких слоёв. Можно удалить текущее название и нажать Enter, Фигма подставит слово Vector;
— Иногда слой называют Shape, чтобы название отражало суть;
— Чтобы цвета не слетали при смене иконок в компонентах: создайте копию слоя Vector, объедините эти 2 слоя (union), появится объединяющий слой с именем Union, удалите копию слоя Vector. Задавайте цвет слою Union;
— Иногда этот слой называют Color, чтобы отразить его суть;
— Если во всех иконках будут аккуратно названные слои Vector, то красить можно и их, цвета слетать не должны. Подход со слоем Union позволяет сохранить цвет, когда внутри иконки один вектор полностью меняется на другой;
— Лучше использовать обычный #000000, а не цветовой токен. Так в макетах и компонентах можно отследить, какие иконки не покрашены;
— Можно выбрать какой-нибудь необычный цвет (например, коричневый), чтобы он бросался в глаза, но не слишком, чтобы не усложнять просмотр иконок в библиотеке;
— Векторный слой иконки должен скейлиться;
— Расположите его внутри квадратного контейнера (например, 24×24 px);
— Называть компоненты иконок лучше по тому, что изображено (например, magnifying_glass), без префикса icon или обозначения размера;
— В поле Denoscription можно записать синонимы, по которым могут искать такое изображение в ассетах (например, search);
— В компоненты вставляйте иконки и создавайте свойство Swap instance с именем icon, выбирайте свои иконки в Preferred values.
#figma #icon #design_system
— Иконку преобразуйте в векторную форму (flatten);
— Исходник полезно сохранить, чтобы не перерисовывать иконку, если в будущем потребуется её изменить;
— Назовите слой Vector. Это стандартное имя для таких слоёв. Можно удалить текущее название и нажать Enter, Фигма подставит слово Vector;
— Иногда слой называют Shape, чтобы название отражало суть;
— Чтобы цвета не слетали при смене иконок в компонентах: создайте копию слоя Vector, объедините эти 2 слоя (union), появится объединяющий слой с именем Union, удалите копию слоя Vector. Задавайте цвет слою Union;
— Иногда этот слой называют Color, чтобы отразить его суть;
— Если во всех иконках будут аккуратно названные слои Vector, то красить можно и их, цвета слетать не должны. Подход со слоем Union позволяет сохранить цвет, когда внутри иконки один вектор полностью меняется на другой;
— Лучше использовать обычный #000000, а не цветовой токен. Так в макетах и компонентах можно отследить, какие иконки не покрашены;
— Можно выбрать какой-нибудь необычный цвет (например, коричневый), чтобы он бросался в глаза, но не слишком, чтобы не усложнять просмотр иконок в библиотеке;
— Векторный слой иконки должен скейлиться;
— Расположите его внутри квадратного контейнера (например, 24×24 px);
— Называть компоненты иконок лучше по тому, что изображено (например, magnifying_glass), без префикса icon или обозначения размера;
— В поле Denoscription можно записать синонимы, по которым могут искать такое изображение в ассетах (например, search);
— В компоненты вставляйте иконки и создавайте свойство Swap instance с именем icon, выбирайте свои иконки в Preferred values.
#figma #icon #design_system
YouTube
Уроки Figma | Пуленепробиваемые иконки. [Фигма]
Рубрика «Быстрые пистоны». Делаем продуктовые иконки в Фигма.
ВАЖНОЕ:
Figma-чат
https://news.1rj.ru/str/figmachat
Моя фигма-страница
https://figma.com/@vandesign
ВАЖНОЕ:
Figma-чат
https://news.1rj.ru/str/figmachat
Моя фигма-страница
https://figma.com/@vandesign
👍28❤16🔥6🥱5❤🔥1🤝1
Наталия Бажан написала, как дизайнеру улучшить взаимодействие с разработчиками.
— Научитесь читать API и сразу его учитывать при проектировании. Это позволит не предлагать того, к чему не готов бекенд, или заранее понимать, когда придётся идти договариваться;
— Передавайте списки данных, необходимых для отображения проработанных вами состояний и кейсов, коллегам, отвечающим за тестовые данные. Сэкономите время разработчикам и скажете себе спасибо на дизайн-ревью;
— Привлекайте тестировщиков и бекендеров к ревью макетов;
— Описывайте даже то, что считаете очевидным. Дефолтное поведение компонентов может отличаться, как и мнение фронта. Не заставляйте его решать, как должен работать интерфейс;
— Расширяйте знания в том, как работает современный веб. Например, как работают серверная и клиентская сортировка, фильтрация, поиск, пагинация, как загружается и обновляется страница, как верстаются таблицы и так далее;
— Обсуждайте кейсы ошибок, предлагайте решения, фиксируйте в своей проектной документации, можно даже ставить задачи по обработке ошибок на бек. Особенно важно, если данные могут поступать из других сервисов или импортироваться из файлов;
— Используйте автолейауты, компоненты, переменные и не детачте инстансы, чтобы не костылить и зря не увеличивать сложность реализации. Подсвечивайте любые отступления от дизайн-системы.
#handoff
— Научитесь читать API и сразу его учитывать при проектировании. Это позволит не предлагать того, к чему не готов бекенд, или заранее понимать, когда придётся идти договариваться;
— Передавайте списки данных, необходимых для отображения проработанных вами состояний и кейсов, коллегам, отвечающим за тестовые данные. Сэкономите время разработчикам и скажете себе спасибо на дизайн-ревью;
— Привлекайте тестировщиков и бекендеров к ревью макетов;
— Описывайте даже то, что считаете очевидным. Дефолтное поведение компонентов может отличаться, как и мнение фронта. Не заставляйте его решать, как должен работать интерфейс;
— Расширяйте знания в том, как работает современный веб. Например, как работают серверная и клиентская сортировка, фильтрация, поиск, пагинация, как загружается и обновляется страница, как верстаются таблицы и так далее;
— Обсуждайте кейсы ошибок, предлагайте решения, фиксируйте в своей проектной документации, можно даже ставить задачи по обработке ошибок на бек. Особенно важно, если данные могут поступать из других сервисов или импортироваться из файлов;
— Используйте автолейауты, компоненты, переменные и не детачте инстансы, чтобы не костылить и зря не увеличивать сложность реализации. Подсвечивайте любые отступления от дизайн-системы.
#handoff
Хабр
Как не бесить фронтендера, если ты юиксер
Кажется, уже каждый дизайнер написал свою статью об этом, а мне все еще есть, что сказать. Я не стану повторяться о вежливом общении и важности сетки в макетах. Эта статья о моем личном UX-подходе в...
❤21👍9😁4
Павел Шерер написал о терминах UX и CX и кто кого включает.
— Они связаны, но UX — фундамент. Если вы улучшите форму оплаты, NPS может не сдвинуться, потому что претензии к колл-центру останутся. И наоборот: идеальный CX-чеклист не спасёт, если кнопка «Оплатить» лагает;
— Дон Норман: «UX — все аспекты взаимодействия конечного пользователя с компанией, её услугами и продуктами»;
— ISO 9241-210:2019: «UX — восприятия и реакции человека, возникающие до, во время и после использования системы»;
— То есть это доставка, колл-центр, утилизация, компенсация за некачественную услугу и вообще всё, что потом назвали CX;
— Customer — тот, кто платит. User — любой, кто взаимодействует. CX-сценарии с платящими клиентами — подмножество более широкого множества UX-сценариев;
— Исторически сервис-дизайн и CJM выросли из UX-исследований;
— В плане методологий почти всё берётся из изначальных UX-практик;
— Кто-то считает, что CX важнее, так как фокусируется на том, что приносит компании деньги, помогает растить LTV. Хороший UX тоже влияет на метрики: снижает churn rate и увеличивает retention, что также влияет на выручку.
#definition #cx
— Они связаны, но UX — фундамент. Если вы улучшите форму оплаты, NPS может не сдвинуться, потому что претензии к колл-центру останутся. И наоборот: идеальный CX-чеклист не спасёт, если кнопка «Оплатить» лагает;
— Дон Норман: «UX — все аспекты взаимодействия конечного пользователя с компанией, её услугами и продуктами»;
— ISO 9241-210:2019: «UX — восприятия и реакции человека, возникающие до, во время и после использования системы»;
— То есть это доставка, колл-центр, утилизация, компенсация за некачественную услугу и вообще всё, что потом назвали CX;
— Customer — тот, кто платит. User — любой, кто взаимодействует. CX-сценарии с платящими клиентами — подмножество более широкого множества UX-сценариев;
— Исторически сервис-дизайн и CJM выросли из UX-исследований;
— В плане методологий почти всё берётся из изначальных UX-практик;
— Кто-то считает, что CX важнее, так как фокусируется на том, что приносит компании деньги, помогает растить LTV. Хороший UX тоже влияет на метрики: снижает churn rate и увеличивает retention, что также влияет на выручку.
#definition #cx
Павел Шерер
UX vs CX: кто кого включает | Павел Шерер
Небольшой гайд для продуктовых команд, руководителей и всех, кто принимает решения об опыте пользователей и клиентов.
❤23🔥6👍4💯1
Forwarded from UX Work
Дизайнеры, если вы в течение года сменили работу, сколько месяцев заняли её поиски?
Anonymous Poll
8%
1 и меньше
5%
2
4%
3
3%
4
1%
5
3%
6
2%
7−9
1%
10−12
4%
Больше 12
70%
Просто посмотреть
🤔12❤3👏2🤣1
Виктория Друзенко написала о тексте плейсхолдера в поле поиска.
— Если это основная функция, можно написать призыв к действию: «Введите запрос»;
— Если лишь часть данных доступна для поиска, перечислите их: «Трек, альбом, исполнитель»;
— Если поиск ограничен определённым разделом, обозначьте его: «Поиск по каталогу»;
— Если к запросам в поле поиска нет жёстких требований, обозначьте направление: «Куда отправимся»;
— Если вариантов поиска много, и пользователь не знает, как можно сформулировать запрос, напишите примеры: «Искать от холестерина, омега 3, Витамин Д»;
— Если нужен минимализм или поиск не основная функция: «Поиск», «Найти».
#search #writing
— Если это основная функция, можно написать призыв к действию: «Введите запрос»;
— Если лишь часть данных доступна для поиска, перечислите их: «Трек, альбом, исполнитель»;
— Если поиск ограничен определённым разделом, обозначьте его: «Поиск по каталогу»;
— Если к запросам в поле поиска нет жёстких требований, обозначьте направление: «Куда отправимся»;
— Если вариантов поиска много, и пользователь не знает, как можно сформулировать запрос, напишите примеры: «Искать от холестерина, омега 3, Витамин Д»;
— Если нужен минимализм или поиск не основная функция: «Поиск», «Найти».
#search #writing
dsgners.ru
Что напишем в строку поиска? — дизайнерс
Задумывался ли ты, когда подписывал плейсхолдер в строке поиска: а правильно ли я это сделал? Есть ли вообще правила, как это должно выглядеть? И вообще, зачем что-то писать, если и так понятно, что это строка поиска? Сейчас разберемся.
❤16👍8💩2🤣1
Рамазан Нурулаев написал о дизайне таблиц для цеха.
— Тонкие шрифты — мимо. Числа должны читаться даже в маске сварщика. Для цифр — моноширинный шрифт;
— Почти всегда нужна тёмная тема;
— Минимум цветов. Новый цвет — только чтобы привлечь внимание к критичным вещам;
— Системная цветовая индикация, которую нельзя изменить: зелёный — всё хорошо, жёлтый — обратить внимание, красный — что-то случилось;
— Есть дополнительные цвета, которые можно назначить выбранным статусам (или переназначить под себя);
— Рекомендации по выбору цвета есть в сторибуке: «фиолетовый для специальных режимов работы»;
— Пользователи попросили добавить легенду во все формы, где есть цветовая индикация;
— Заголовки столбцов были менее контрастными, чем их содержимое, но они плохо считывались. Сделали их контрастнее, а чтобы отделить от цифр, поменяли шрифт;
— Таблицы почти никогда не прокручивают (особенно, по горизонтали), поэтому они должны быть максимально компактными, но не сливаться в кашу;
— 40 px основная высота строки, 56 px — увеличенная, 32 px — компактная. Надо учитывать, что в них могут быть иконки и кнопки;
— Нужна возможность настраивать их под себя: скрывать столбцы, закреплять, менять их порядок;
— Иногда можно заменить заголовки столбцов на более компактные: «Положение плавки» → «Плавка»;
— Чтобы уменьшить визуальный шум, кнопки действий отображаются при наведении на строку. Пользователь примерно понимает, какие действия ему надо совершить;
— Чтобы было понятно, какие ячейки можно редактировать, в них есть кнопка редактирования. Ячейки с отредактированными данными подсвечиваются жёлтым.
#table #industrial
— Тонкие шрифты — мимо. Числа должны читаться даже в маске сварщика. Для цифр — моноширинный шрифт;
— Почти всегда нужна тёмная тема;
— Минимум цветов. Новый цвет — только чтобы привлечь внимание к критичным вещам;
— Системная цветовая индикация, которую нельзя изменить: зелёный — всё хорошо, жёлтый — обратить внимание, красный — что-то случилось;
— Есть дополнительные цвета, которые можно назначить выбранным статусам (или переназначить под себя);
— Рекомендации по выбору цвета есть в сторибуке: «фиолетовый для специальных режимов работы»;
— Пользователи попросили добавить легенду во все формы, где есть цветовая индикация;
— Заголовки столбцов были менее контрастными, чем их содержимое, но они плохо считывались. Сделали их контрастнее, а чтобы отделить от цифр, поменяли шрифт;
— Таблицы почти никогда не прокручивают (особенно, по горизонтали), поэтому они должны быть максимально компактными, но не сливаться в кашу;
— 40 px основная высота строки, 56 px — увеличенная, 32 px — компактная. Надо учитывать, что в них могут быть иконки и кнопки;
— Нужна возможность настраивать их под себя: скрывать столбцы, закреплять, менять их порядок;
— Иногда можно заменить заголовки столбцов на более компактные: «Положение плавки» → «Плавка»;
— Чтобы уменьшить визуальный шум, кнопки действий отображаются при наведении на строку. Пользователь примерно понимает, какие действия ему надо совершить;
— Чтобы было понятно, какие ячейки можно редактировать, в них есть кнопка редактирования. Ячейки с отредактированными данными подсвечиваются жёлтым.
#table #industrial
Хабр
Как мы делали таблицы для производственных интерфейсов
Таблица для цеха отличается от обычной таблицы. Очень сильно: — «Модные» тонкие шрифты — сразу на свалку. Числа должны читаться даже в маске сварщика. — Освещение в цехах адаптировано под специфику...
❤24👍8🔥3❤🔥2
Андрей написал, почему творчество нельзя подменять креативностью.
— Креативные методологии (фреймворки для быстрого создания новых идей) — узкий инструмент с кучей ограничений, и подменять им творчество нельзя;
— Все они работают примерно так: некий объект раскладывается на составляющие → проводится работа с этими частями (что-то убрать, поменять, добавить, набор операций ограничен) → собирается новый объект;
— Их подают как последовательность действий, переключающих мозг на дивергентное мышление, что даже полезно;
— Постфактум можно увидеть, как эти действия привели к созданию каждой успешной идеи, но просто выполняя эти действия нельзя быть уверенным, что они приведут к успешной идее. Успех зависит от кучи других факторов;
— Творчество начинается с повторения, выработки навыков;
— Затем действия складываются в системы: технологии и методологии. Уже не нужна директивность, задачи объединены в последовательности, которыми человек и оперирует;
— Владея несколькими методологиями, можно выбирать более подходящие и комбинировать их. Это профессиональный кругозор;
— Затем становится доступна творческая деятельность: изобретение новых инструментов, подходов, идей. Это работа уровня RnD-отделов компаний;
— Креативные методологии позволяют получить много поверхностных идей, не сильно в них погружаясь. Годится для маркетинга, но в других сферах работает плохо;
— Создаётся иллюзия, что творчество — это легко и быстро. Но это одна из самых тяжёлых деятельностей: на час брейншторма можно потратить больше сил, чем на полный рабочий день;
— Если заниматься этим постоянно в рамках операционной деятельности, можно выгореть;
— Ломается нормальный процесс набора опыта. Люди занимаются чем-то другим вместо расширения профессионального кругозора, изучения предметной области и системных вещей;
— А ведь только это может привести к прорывным идеям, когда большая часть из них уже сгенерирована и реализована, и требования к продуктам уже не такие, как раньше.
#process
— Креативные методологии (фреймворки для быстрого создания новых идей) — узкий инструмент с кучей ограничений, и подменять им творчество нельзя;
— Все они работают примерно так: некий объект раскладывается на составляющие → проводится работа с этими частями (что-то убрать, поменять, добавить, набор операций ограничен) → собирается новый объект;
— Их подают как последовательность действий, переключающих мозг на дивергентное мышление, что даже полезно;
— Постфактум можно увидеть, как эти действия привели к созданию каждой успешной идеи, но просто выполняя эти действия нельзя быть уверенным, что они приведут к успешной идее. Успех зависит от кучи других факторов;
— Творчество начинается с повторения, выработки навыков;
— Затем действия складываются в системы: технологии и методологии. Уже не нужна директивность, задачи объединены в последовательности, которыми человек и оперирует;
— Владея несколькими методологиями, можно выбирать более подходящие и комбинировать их. Это профессиональный кругозор;
— Затем становится доступна творческая деятельность: изобретение новых инструментов, подходов, идей. Это работа уровня RnD-отделов компаний;
— Креативные методологии позволяют получить много поверхностных идей, не сильно в них погружаясь. Годится для маркетинга, но в других сферах работает плохо;
— Создаётся иллюзия, что творчество — это легко и быстро. Но это одна из самых тяжёлых деятельностей: на час брейншторма можно потратить больше сил, чем на полный рабочий день;
— Если заниматься этим постоянно в рамках операционной деятельности, можно выгореть;
— Ломается нормальный процесс набора опыта. Люди занимаются чем-то другим вместо расширения профессионального кругозора, изучения предметной области и системных вещей;
— А ведь только это может привести к прорывным идеям, когда большая часть из них уже сгенерирована и реализована, и требования к продуктам уже не такие, как раньше.
#process
Хабр
Реквием по креативу: как в современном мире подменяется понятие творческой деятельности
Привет, Хабр! Меня зовут Андрей, я редактор в команде спецпроектов МТС Диджитал. Обычно я помогаю коллегам рассказать о своем профессиональном опыте, но сегодня подниму тему креативных технологий, с...
❤19👍6