Дарья Хуторянская написала, как защищать дизайн-решения перед командой.
— Вопрос о релевантности решения (почему именно так решаем задачу) обычно появляется задолго до презентации макетов команде. Но бывает всякое;
— Сошлитесь на результаты предыдущих этапов дизайн-процесса (генерация решений, оценка и выбор подходящего). Например: на результаты обсуждения диапазона возможных решений с командой. Да, имеет смысл это фиксировать;
— В идеале обосновывать конкретные дизайн-решения проведёнными исследованиями;
— Но если их не было, можно опираться на стандарты. Например: эвристики, гайдлайны Apple и Material Design, вашу дизайн-систему, стандарты доступности;
— Хорошо использовать их не только для защиты, но и для самопроверки перед презентацией решения команде;
— Также можно опираться на гештальт-принципы — психологические законы, описывающие, как люди воспринимают и группируют визуальную информацию;
— Ссылаясь на конкурентов, стоит включать критическое мышление. Мы не знаем, насколько конкретное дизайн-решение привело конкурента к успеху. Возможно, всё благодаря широкому ассортименту и быстрой доставке;
— В какой-то момент появится возможность ссылаться на собственную экспертизу. Но для этого нужно накопить опыт и в дизайне, и в сфере продукта.
#presentation
— Вопрос о релевантности решения (почему именно так решаем задачу) обычно появляется задолго до презентации макетов команде. Но бывает всякое;
— Сошлитесь на результаты предыдущих этапов дизайн-процесса (генерация решений, оценка и выбор подходящего). Например: на результаты обсуждения диапазона возможных решений с командой. Да, имеет смысл это фиксировать;
— В идеале обосновывать конкретные дизайн-решения проведёнными исследованиями;
— Но если их не было, можно опираться на стандарты. Например: эвристики, гайдлайны Apple и Material Design, вашу дизайн-систему, стандарты доступности;
— Хорошо использовать их не только для защиты, но и для самопроверки перед презентацией решения команде;
— Также можно опираться на гештальт-принципы — психологические законы, описывающие, как люди воспринимают и группируют визуальную информацию;
— Ссылаясь на конкурентов, стоит включать критическое мышление. Мы не знаем, насколько конкретное дизайн-решение привело конкурента к успеху. Возможно, всё благодаря широкому ассортименту и быстрой доставке;
— В какой-то момент появится возможность ссылаться на собственную экспертизу. Но для этого нужно накопить опыт и в дизайне, и в сфере продукта.
#presentation
Хабр
«Мне кажется, так неудобно» — как аргументировать дизайн-решение без исследований и конфликтов
Привет, Хабр! Наверное, каждый дизайнер или проектировщик сталкивался с ситуацией, когда другие точно знали «как лучше сделать». Например, приходишь на командную встречу, показываешь решение, чтобы...
❤22👍5❤🔥2
Forwarded from Френч-пресс (Anton Grigorev)
DevCrowd выпустили новое исследование продуктовых дизайнеров. UX Notes снова на 3-м месте в списке русскоязычных источников информации по продуктовому дизайну.
2024 · 4-е место
2023 · 3-е место
2024 · 4-е место
2023 · 3-е место
❤34👍11👏10👎1
Если вы ведёте канал, который может быть интересен читателям UX Notes, поделитесь им в комментариях. Напишите, чем он хорош и почему стоит на него подписаться. И ставьте лайки анонсам классных каналов, чтобы больше людей обратило на них внимание.
Кто знает, вдруг это поможет как-то обновить упомянутый выше список источников информации о продуктовом дизайне.
#media
Кто знает, вдруг это поможет как-то обновить упомянутый выше список источников информации о продуктовом дизайне.
#media
❤17👍5
Алексей Самохин рассказал о кросс-сейле и апсейле в интерфейсе.
— Кросс-сейл — перекрёстные продажи, добавление других товаров к основному (обычно, намного дешевле основного), например, аксессуаров;
— Апсейл — увеличение стоимости покупки: доплатить и взять больший объём;
— Они увеличивают средний чек и общую выручку, помогают клиенту купить всё в одном месте (вспомнить, что нужно что-то ещё) и повышают удержание, делая предложение комплексным;
— Это не тёмные паттерны, если не делать так специально;
— Основные проблемы кросс-сейла: нерелевантность предлагаемого (таким обычно не страдают специализированные сервисы вроде доставки еды) и попытка впихнуть на один экран всё («Добавьте также», «С этим товаром покупают», «Может что-нибудь ещё?»). Один блок на экран;
— Придётся тестировать разные блоки и искать баланс между растущим чеком и раздражением пользователя;
— В приложении Бургер Кинга 6 кросс- и апсейл экранов на пользовательский путь;
— 1. Шторка кастомизации выбранного бургера (апсейл). Дополнительные ингредиенты — с аппетитными изображениями. Убрать лишнее — без картинок ради сохранения акцента. Кастомизация повышает удовлетворение;
— 2. Предложение комбо (кросс-сейл) — после добавления бургера в корзину, чтобы было время спокойно определиться с бургером. Видно, что комбо выгоднее, чем покупать товары по отдельности. Клиент получает комплексное предложение;
— Среднее и большое комбо стоят ненамного дороже, чтобы клиент склонился к варианту подороже;
— 3–5. Экраны выбора закуски, картофеля и напитка с кнопкой «Пропустить» и крестиком, чтобы легко отказаться;
— Когда люди кладут товар в корзину, они ожидают перехода в меню. Три дополнительных экрана немного напрягают, но для бизнеса работают;
— Они в целом не противоречат логике заказа еды в фастфуде. Органично сделать то же самое (трижды предложить ещё какие-то услуги) в медицинском приложении намного сложнее;
— 6. Предложение добавить что-то ещё в корзине. После корзины люди перестают воспринимать апсейл и кросс-сейл;
— Кросс-сейл можно встраивать в функциональность. Например, предлагать платную подписку для доступа к расширенным фильтрам;
— Но не надо ставить ничего такого на экраны с критически важными действиями, например, оплаты и подтверждения заказа;
— Как считать эффективность: средний чек, конверсия в оплату товара из апсейла, возврат на инвестиции в разработку функциональности, уровень отказов (помогает понять, раздражает ли механика клиентов).
#cart #upselling #cross_selling
— Кросс-сейл — перекрёстные продажи, добавление других товаров к основному (обычно, намного дешевле основного), например, аксессуаров;
— Апсейл — увеличение стоимости покупки: доплатить и взять больший объём;
— Они увеличивают средний чек и общую выручку, помогают клиенту купить всё в одном месте (вспомнить, что нужно что-то ещё) и повышают удержание, делая предложение комплексным;
— Это не тёмные паттерны, если не делать так специально;
— Основные проблемы кросс-сейла: нерелевантность предлагаемого (таким обычно не страдают специализированные сервисы вроде доставки еды) и попытка впихнуть на один экран всё («Добавьте также», «С этим товаром покупают», «Может что-нибудь ещё?»). Один блок на экран;
— Придётся тестировать разные блоки и искать баланс между растущим чеком и раздражением пользователя;
— В приложении Бургер Кинга 6 кросс- и апсейл экранов на пользовательский путь;
— 1. Шторка кастомизации выбранного бургера (апсейл). Дополнительные ингредиенты — с аппетитными изображениями. Убрать лишнее — без картинок ради сохранения акцента. Кастомизация повышает удовлетворение;
— 2. Предложение комбо (кросс-сейл) — после добавления бургера в корзину, чтобы было время спокойно определиться с бургером. Видно, что комбо выгоднее, чем покупать товары по отдельности. Клиент получает комплексное предложение;
— Среднее и большое комбо стоят ненамного дороже, чтобы клиент склонился к варианту подороже;
— 3–5. Экраны выбора закуски, картофеля и напитка с кнопкой «Пропустить» и крестиком, чтобы легко отказаться;
— Когда люди кладут товар в корзину, они ожидают перехода в меню. Три дополнительных экрана немного напрягают, но для бизнеса работают;
— Они в целом не противоречат логике заказа еды в фастфуде. Органично сделать то же самое (трижды предложить ещё какие-то услуги) в медицинском приложении намного сложнее;
— 6. Предложение добавить что-то ещё в корзине. После корзины люди перестают воспринимать апсейл и кросс-сейл;
— Кросс-сейл можно встраивать в функциональность. Например, предлагать платную подписку для доступа к расширенным фильтрам;
— Но не надо ставить ничего такого на экраны с критически важными действиями, например, оплаты и подтверждения заказа;
— Как считать эффективность: средний чек, конверсия в оплату товара из апсейла, возврат на инвестиции в разработку функциональности, уровень отказов (помогает понять, раздражает ли механика клиентов).
#cart #upselling #cross_selling
Хабр
Возьми картошку! И соус! Гайд как делать нормальные, не бесящие кросс-продажи на примере Burger King
«Возьмите картошку и колу», — говорит пользователям баннер перед кнопкой «Оформить заказ». Он мешает и раздражает, хотя должен побуждать купить больше. Что делать, если именно вы отвечаете за баннеры...
❤16👍5👏2
Forwarded from Как быть дизайнером
Как развить толерантность к неопределенности?
Иногда можно услышать совет: если хочешь стать крутым спецом и развиваться в профессии выше миддла, качай толератность к неопределённости. Чем она выше, тем выше твоя ценность.
В этом есть доля правды.
Легко заменить человека, живущего по строгому регламенту в упорядоченных процессах с чётким конвейером, где не требуется ни смекалки, ни гибкости, а результат предсказуем. В любой момент нанимаешь любого другого, садишь в настроенные процессы, и система едет дальше безо всякого ущерба.
Гораздо сложнее заменить того, кто действует в условиях неопределённости: быстро ориентируется при переменах, сам принимает решения, строит процесс своими руками и вывозит без регламента, не ломая дров. Потеря таких кадров болезненна для бизнеса, с рынка нанять сложно, а изнутри выращивать долго и дорого.
🤩
Логично, что с ростом скиллов миддлам жизненно важно перейти из первой категории во вторую.
Как это делать? Только на практике:
— учиться подстраиваться под меняющийся мир и отходить от регламентов,
— переставать полагаться на лида,
— не требовать везде и всегда хороших процессов,
— экспериментировать и ставить себя в дискомфортные условия.
🤩
Так бы я ответила лет пять назад.
В ту пору я была сеньором в продукте и недавним арт-диром из агентства, и мне казалось, что моя главная суперсила — умение вывозить в любой ситуации.
А те, кто не вывозит, просто не сеньоры. Им надо дрессировать себя так же, как дрессирую себя я — идти работать со сложными заказчиками, в чистое поле, на целину, где всё нужно строить самим и желательно в мороз, и чтобы вокруг выли волки.
Умопомешательство выглядит так:
🤩 Ресурсов нет, а работы на десятерых? Ну и что, вывезем всё в одиночку — мы же сеньоры.
🤩 Релизный цикл в продукте не работает? Ничего, что-нибудь придумаем.
🤩 Команда круглосуточно ругается? Ну, в спорах рождается истина.
🤩 Продакт мудак? Да какая разница, нам же не детей вместе крестить.
🤩 Союзников в изменениях нет? Да ладно, я же сеньор — и одна справлюсь.
Только через годик-другой до меня дошло, что это порочная логика. Она полезна для карьеры на краткосроке, потому что даёт разовый бесценный опыт, как не надо жить. Но в перспективе ведёт к крайне низкому КПД и имеет непомерную цену.
Цена — качество жизни: каждый божий день ты на войне, которую сама выбрала. Если бы вокруг тебя не выли волки и не крепчал мороз, ты бы уже свернула горы, а так месяцами бодаешься за самую мелкую, не стоящую споров ерунду, ходишь к психологу и лечишь выгорание.
🤩
Противоядие от умопомешательства очень простое: прежде чем бросаться качать в себе толерантность к неопределённости, надо понять, чем эта неопределённость вызвана.
Если неопределённость продиктована спецификой продукта, это может быть крутым профессиональным вызовом. Например, идёт перестройка рынка, и нужно придумать новый подход, отличный от конкурентов. Как — никто не знает. Это — полезная неопределённость, прокачиваться в таких условиях просто шик, а дискомфорт — на пользу.
А вот если неопределенность означает, что всё зависит от левой пятки руководителя, который сегодня встал не с той ноги, и никто не знает, что он дальше учудит, или пять бизнес-заказчиков не могут друг с другом договориться, или вся команда сидит на минном поле и боится шаг вправо-влево сделать — то нафиг вырабатывать к этому толерантность. Надо бежать.
Иногда можно услышать совет: если хочешь стать крутым спецом и развиваться в профессии выше миддла, качай толератность к неопределённости. Чем она выше, тем выше твоя ценность.
В этом есть доля правды.
Легко заменить человека, живущего по строгому регламенту в упорядоченных процессах с чётким конвейером, где не требуется ни смекалки, ни гибкости, а результат предсказуем. В любой момент нанимаешь любого другого, садишь в настроенные процессы, и система едет дальше безо всякого ущерба.
Гораздо сложнее заменить того, кто действует в условиях неопределённости: быстро ориентируется при переменах, сам принимает решения, строит процесс своими руками и вывозит без регламента, не ломая дров. Потеря таких кадров болезненна для бизнеса, с рынка нанять сложно, а изнутри выращивать долго и дорого.
Логично, что с ростом скиллов миддлам жизненно важно перейти из первой категории во вторую.
Как это делать? Только на практике:
— учиться подстраиваться под меняющийся мир и отходить от регламентов,
— переставать полагаться на лида,
— не требовать везде и всегда хороших процессов,
— экспериментировать и ставить себя в дискомфортные условия.
Так бы я ответила лет пять назад.
В ту пору я была сеньором в продукте и недавним арт-диром из агентства, и мне казалось, что моя главная суперсила — умение вывозить в любой ситуации.
А те, кто не вывозит, просто не сеньоры. Им надо дрессировать себя так же, как дрессирую себя я — идти работать со сложными заказчиками, в чистое поле, на целину, где всё нужно строить самим и желательно в мороз, и чтобы вокруг выли волки.
Умопомешательство выглядит так:
Только через годик-другой до меня дошло, что это порочная логика. Она полезна для карьеры на краткосроке, потому что даёт разовый бесценный опыт, как не надо жить. Но в перспективе ведёт к крайне низкому КПД и имеет непомерную цену.
Цена — качество жизни: каждый божий день ты на войне, которую сама выбрала. Если бы вокруг тебя не выли волки и не крепчал мороз, ты бы уже свернула горы, а так месяцами бодаешься за самую мелкую, не стоящую споров ерунду, ходишь к психологу и лечишь выгорание.
Противоядие от умопомешательства очень простое: прежде чем бросаться качать в себе толерантность к неопределённости, надо понять, чем эта неопределённость вызвана.
Если неопределённость продиктована спецификой продукта, это может быть крутым профессиональным вызовом. Например, идёт перестройка рынка, и нужно придумать новый подход, отличный от конкурентов. Как — никто не знает. Это — полезная неопределённость, прокачиваться в таких условиях просто шик, а дискомфорт — на пользу.
А вот если неопределенность означает, что всё зависит от левой пятки руководителя, который сегодня встал не с той ноги, и никто не знает, что он дальше учудит, или пять бизнес-заказчиков не могут друг с другом договориться, или вся команда сидит на минном поле и боится шаг вправо-влево сделать — то нафиг вырабатывать к этому толерантность. Надо бежать.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤74💯17👍12🥰2👎1
Александр Щеблыкин рассказал о RTL-адаптации интерфейса и показал, как её упростить с помощью переменных в Фигме.
— Написание слов может отличаться в разных диалектах. Например, «Назад» пишется по-разному в Саудовской Аравии и ОАЭ с Оманом;
— Если на английском написан целый абзац, стандартно выровненный по левому краю, его не выравнивают по правому краю в RTL-режиме;
— А вот отдельный пункт ненумерованного списка, даже если он на английском, стоит выровнять как и все остальные пункты;
— Изображения отражать не надо, но композицию с картинками и текстом надо адаптировать под направление чтения. То есть если в LTR текст был слева, а картинка справа, в RTL они поменяются местами;
— Размер текста и межстрочное расстояние для компенсации увеличивают на 10%, так как арабский текст визуально меньше;
— Числа, записанные и западно-арабскими, и восточно-арабскими цифрами, читают слева направо;
— Знак вопроса пишется зеркально, отличаются и другие знаки препинания. Но появились они 100 лет назад, и на арабском спокойно можно выражаться без них;
— Отражают иконки, отображающие текст или направление чтения (есть пример и с отражённой иконкой с текстово-графической композицией), а также движение вперёд и назад;
— Не отражают иконки, изображающие реальные объекты, а также логотипы и универсальные символы вроде знака «✓»;
— В дизайн-системе переменная RTL переключает интерфейс на арабский;
— Есть переменные EN Only и AR Only, которые позволяют не усложнять простые компоненты. Например, хлебных крошках могут лежать «шеврон вправо» и «шеврон влево», связанные с переменными EN Only и AR Only так, что одновременно отображаться будет только один шеврон;
— Есть отдельные коллекции иконок для RTL, так как автоматическое отражение работает не всегда;
— Также в Фигме в виде переменных есть словарь — набор переводов на английском, русском и арабском, когда-либо использовавшихся в проекте.
#localization #figma
— Написание слов может отличаться в разных диалектах. Например, «Назад» пишется по-разному в Саудовской Аравии и ОАЭ с Оманом;
— Если на английском написан целый абзац, стандартно выровненный по левому краю, его не выравнивают по правому краю в RTL-режиме;
— А вот отдельный пункт ненумерованного списка, даже если он на английском, стоит выровнять как и все остальные пункты;
— Изображения отражать не надо, но композицию с картинками и текстом надо адаптировать под направление чтения. То есть если в LTR текст был слева, а картинка справа, в RTL они поменяются местами;
— Размер текста и межстрочное расстояние для компенсации увеличивают на 10%, так как арабский текст визуально меньше;
— Числа, записанные и западно-арабскими, и восточно-арабскими цифрами, читают слева направо;
— Знак вопроса пишется зеркально, отличаются и другие знаки препинания. Но появились они 100 лет назад, и на арабском спокойно можно выражаться без них;
— Отражают иконки, отображающие текст или направление чтения (есть пример и с отражённой иконкой с текстово-графической композицией), а также движение вперёд и назад;
— Не отражают иконки, изображающие реальные объекты, а также логотипы и универсальные символы вроде знака «✓»;
— В дизайн-системе переменная RTL переключает интерфейс на арабский;
— Есть переменные EN Only и AR Only, которые позволяют не усложнять простые компоненты. Например, хлебных крошках могут лежать «шеврон вправо» и «шеврон влево», связанные с переменными EN Only и AR Only так, что одновременно отображаться будет только один шеврон;
— Есть отдельные коллекции иконок для RTL, так как автоматическое отражение работает не всегда;
— Также в Фигме в виде переменных есть словарь — набор переводов на английском, русском и арабском, когда-либо использовавшихся в проекте.
#localization #figma
Хабр
Как прийти к мультиязычной дизайн-системе и выучить арабский
Я — Александр Щеблыкин, дизайнер. Уже 6 лет создаю, проектирую и развиваю цифровые продукты. В команде 2ГИС Платформа я работал над картоцентричными сценариями и навигационными интерфейсами для...
🔥7❤1
Новые материалы в @uxwork (кроме вакансий):
— Как повысить эффективность встреч;
— Как быстрее из джуна вырасти в синьора;
— Зачем делать тестовые так, чтобы они запоминались.
— Как повысить эффективность встреч;
— Как быстрее из джуна вырасти в синьора;
— Зачем делать тестовые так, чтобы они запоминались.
Telegram
UX Work
Алексей написал, как повысить эффективность встреч.
— Ситуация усугубилась в пандемию, когда коллеги перестали видеться вживую и стали созваниваться по любым мелочам;
— Созвоны вторгаются в рабочий процесс, вытягивают энергию (особенно с камерами) и оставляют…
— Ситуация усугубилась в пандемию, когда коллеги перестали видеться вживую и стали созваниваться по любым мелочам;
— Созвоны вторгаются в рабочий процесс, вытягивают энергию (особенно с камерами) и оставляют…
❤4
Илья Бирман написал о переключателях (segmented control) и выпадающих списках (select).
— Переключатель предназначен для выбора одного из нескольких вариантов. Варианты объединены в горизонтальный контейнер (важный признак взаимоисключающего выбора), и один из них выбран;
— В отличие от радиогруппы, переключатель может не только быть элементом формы, но и приводить к моментальному действию (например, переключению темы оформления);
— Чтобы варианты поместились в одну строку, подробности можно перенести в подпись. Например, вместо «Автоматически в зависимости от устройства ввода» можно написать «Авто», и при выборе этого варианта в подписи отображать «В зависимости от устройства ввода»;
— Варианты могут быть равной ширины или подстраиваться под длину текста;
— Если их всего 2, иногда непонятно, какой выбран. Проблема решается графическим оформлением;
— Выбранный вариант не реагирует на наведение и нажатие. При выборе варианты не должны менять порядок;
— На узких экранах иногда предусматривают появление горизонтальной прокрутки, но лучше заменить переключатель на выпадающий список;
— Выпадающий список тоже предназначен для выбора одного из нескольких вариантов. Он выглядит как поле со стрелкой, указывающей на возможность выбора;
— Список вариантов обычно появляется под полем, но положение может меняться с учётом свободного на экране места;
— По ширине он должен быть не меньше исходного поля и может быть больше, чтобы уместить длинные варианты;
— Если не хватает высоты экрана, в списке может появиться вертикальная прокрутка;
— Выпадающий список даёт компактность, но усложняет выбор: требуется действие, даже чтобы увидеть список вариантов;
— В отличие от радиогруппы и переключателя, он допускает использование незаполненного состояния — один из вариантов может быть пустой строкой. Он может быть выбран по умолчанию.
#segmented_control #select
— Переключатель предназначен для выбора одного из нескольких вариантов. Варианты объединены в горизонтальный контейнер (важный признак взаимоисключающего выбора), и один из них выбран;
— В отличие от радиогруппы, переключатель может не только быть элементом формы, но и приводить к моментальному действию (например, переключению темы оформления);
— Чтобы варианты поместились в одну строку, подробности можно перенести в подпись. Например, вместо «Автоматически в зависимости от устройства ввода» можно написать «Авто», и при выборе этого варианта в подписи отображать «В зависимости от устройства ввода»;
— Варианты могут быть равной ширины или подстраиваться под длину текста;
— Если их всего 2, иногда непонятно, какой выбран. Проблема решается графическим оформлением;
— Выбранный вариант не реагирует на наведение и нажатие. При выборе варианты не должны менять порядок;
— На узких экранах иногда предусматривают появление горизонтальной прокрутки, но лучше заменить переключатель на выпадающий список;
— Выпадающий список тоже предназначен для выбора одного из нескольких вариантов. Он выглядит как поле со стрелкой, указывающей на возможность выбора;
— Список вариантов обычно появляется под полем, но положение может меняться с учётом свободного на экране места;
— По ширине он должен быть не меньше исходного поля и может быть больше, чтобы уместить длинные варианты;
— Если не хватает высоты экрана, в списке может появиться вертикальная прокрутка;
— Выпадающий список даёт компактность, но усложняет выбор: требуется действие, даже чтобы увидеть список вариантов;
— В отличие от радиогруппы и переключателя, он допускает использование незаполненного состояния — один из вариантов может быть пустой строкой. Он может быть выбран по умолчанию.
#segmented_control #select
Бюро Горбунова
Расскажите о переключателях и выпадающих списках
Расскажите о переключателях и выпадающих списках
❤22👍2
Виктория Филиппова написала об улучшении доступности интерфейса для пользователей с дальтонизмом.
— Людям с дейтеранопией (не отличают зелёный от красного и оранжевого) неудобен фильтр товаров по цвету в виде цветных кружочков. Можно добавить текстовые подписи и использовать более контрастные оттенки;
— График изменения цены красят зелёным (цена увеличилась) или красным (уменьшилась). Можно добавить текстовые подписи, иконки, символизирующие движение вверх или вниз, а также использовать цвета, отличающиеся не только оттенком, но и яркостью;
— Для людей с протанопией (могут видеть одинаково светло-красный и светло-зелёный) красный можно сделать более оранжевым, зелёный — более голубым, чтобы они сильнее отличались;
— Не стоит использовать только цвет для передачи важной информации;
— Например, невыполненные пункты в списке требований к паролю лучше выделять не только красным цветом, но и иконкой крестика (или, наоборот, выполненные — не только зелёным, но и галочкой).
#color #accessibility
— Людям с дейтеранопией (не отличают зелёный от красного и оранжевого) неудобен фильтр товаров по цвету в виде цветных кружочков. Можно добавить текстовые подписи и использовать более контрастные оттенки;
— График изменения цены красят зелёным (цена увеличилась) или красным (уменьшилась). Можно добавить текстовые подписи, иконки, символизирующие движение вверх или вниз, а также использовать цвета, отличающиеся не только оттенком, но и яркостью;
— Для людей с протанопией (могут видеть одинаково светло-красный и светло-зелёный) красный можно сделать более оранжевым, зелёный — более голубым, чтобы они сильнее отличались;
— Не стоит использовать только цвет для передачи важной информации;
— Например, невыполненные пункты в списке требований к паролю лучше выделять не только красным цветом, но и иконкой крестика (или, наоборот, выполненные — не только зелёным, но и галочкой).
#color #accessibility
Хабр
Как улучшить цветовую доступность для пользователей с дальтонизмом
Цвет — это неотъемлемая часть нашей повседневной жизни: он помогает нам ориентироваться, принимать решения и воспринимать информацию. Однако для миллионов людей по всему миру восприятие цвета...
❤23👍3
Forwarded from Кнопочка
Цифры, а не слова
Наверняка вы слышали, что числа от нуля до десяти лучше писать словами, а всё, что больше, — цифрами. В одном из моих любимых журналов Journal of Consumer Research вышла статья с описанием 5 исследований, которые доказывают, что цифры всегда работают лучше. Дальше — коротко про несколько из них.
1. Цифры повышают CTR
Исследователи сделали два креатива и запустили социальную рекламу. В одном креативе использовали цифры: у 1 из 5 американцев развивается рак кожи к пенсионному возрасту. В другом — слова: у одного из пяти американцев…
Результат: у креатива с цифрами CTR 1,97%, со словами — 1,02%. Эксперимент повторили с креативами для бренда одежды. Там тоже победили цифры.
2. Цифры вызывают больше доверия
400 участникам эксперимента сказали, что они тестируют два новых батончика. Один из которых производит компания с сомнительной репутацией. Дальше участникам показали сайты товаров. На одном было написано, что батончик содержит 10 граммов белка. На втором — десять граммов. Потом участники сообщали о намерении купить батончик по шкале от 0 до 7.
Результат: батончик с хорошей репутацией хотели купить примерно одинаково, независимо от того, как были написаны числа. А вот батончику с сомнительной репутацией цифры очень помогли — его хотели купить на 3,5 против 2,7 для варианта со словами.
Наверняка вы слышали, что числа от нуля до десяти лучше писать словами, а всё, что больше, — цифрами. В одном из моих любимых журналов Journal of Consumer Research вышла статья с описанием 5 исследований, которые доказывают, что цифры всегда работают лучше. Дальше — коротко про несколько из них.
1. Цифры повышают CTR
Исследователи сделали два креатива и запустили социальную рекламу. В одном креативе использовали цифры: у 1 из 5 американцев развивается рак кожи к пенсионному возрасту. В другом — слова: у одного из пяти американцев…
Результат: у креатива с цифрами CTR 1,97%, со словами — 1,02%. Эксперимент повторили с креативами для бренда одежды. Там тоже победили цифры.
2. Цифры вызывают больше доверия
400 участникам эксперимента сказали, что они тестируют два новых батончика. Один из которых производит компания с сомнительной репутацией. Дальше участникам показали сайты товаров. На одном было написано, что батончик содержит 10 граммов белка. На втором — десять граммов. Потом участники сообщали о намерении купить батончик по шкале от 0 до 7.
Результат: батончик с хорошей репутацией хотели купить примерно одинаково, независимо от того, как были написаны числа. А вот батончику с сомнительной репутацией цифры очень помогли — его хотели купить на 3,5 против 2,7 для варианта со словами.
❤28👍8
Forwarded from Плавучая редакция
Пользователь не виноват
#микросовет
Полезное правило: если есть хотя бы небольшой шанс, что проблема не в пользователе — значит, он не виноват. По умолчанию.
Вы не завершили оплату
↓
Оплата прервалась
(может быть сбой соединения или кнопка не работала?)
Вы указали неправильный адрес доставки
↓
Такого адреса ещё не знаем :(
(может быть адрес верный, просто нет в базе? или дело в формате?)
👉Прямота это неплохо, но обвинений лучше избегать, особенно несправедливых.
#микросовет
Полезное правило: если есть хотя бы небольшой шанс, что проблема не в пользователе — значит, он не виноват. По умолчанию.
Вы не завершили оплату
↓
Оплата прервалась
Вы указали неправильный адрес доставки
↓
Такого адреса ещё не знаем :(
👉Прямота это неплохо, но обвинений лучше избегать, особенно несправедливых.
❤57👍12
Александр Горчаков написал об отложенном дизайн-ревью.
— Внедряя ревью, команда больше всего боялась появления бутылочного горлышка. Процесс модифицировали;
— После того как фичу проверил тестировщик, дизайнер должен провести ревью в течение 24 часов;
— Если не успел или есть острая бизнес-необходимость ускориться: контроль качества осуществляет продакт, создаётся задача для отложенного дизайн-ревью с дизайнером как исполнителем;
— Её делают в текущем или следующем спринте с высоким приоритетом;
— По таким задачам собирают статистику и рассматривают каждый случай;
— Такой предохранительный механизм упрощает внедрение ревью и позволяет команде привыкнуть не пропускать этот шаг, повысив общее качество процессов;
— Любой взятый со стороны процесс без адаптации под компанию обычно неработоспособен;
— Также нужен план его внедрения — образ идеального и неидеального результата, понимание рисков во время внедрения, план на несколько итераций вперёд для повышения выживаемости процесса.
#review
— Внедряя ревью, команда больше всего боялась появления бутылочного горлышка. Процесс модифицировали;
— После того как фичу проверил тестировщик, дизайнер должен провести ревью в течение 24 часов;
— Если не успел или есть острая бизнес-необходимость ускориться: контроль качества осуществляет продакт, создаётся задача для отложенного дизайн-ревью с дизайнером как исполнителем;
— Её делают в текущем или следующем спринте с высоким приоритетом;
— По таким задачам собирают статистику и рассматривают каждый случай;
— Такой предохранительный механизм упрощает внедрение ревью и позволяет команде привыкнуть не пропускать этот шаг, повысив общее качество процессов;
— Любой взятый со стороны процесс без адаптации под компанию обычно неработоспособен;
— Также нужен план его внедрения — образ идеального и неидеального результата, понимание рисков во время внедрения, план на несколько итераций вперёд для повышения выживаемости процесса.
#review
Хабр
Микропроцессы и пост дизайн ревью
Микропроцессы и пост дизайн ревью Процессы как продукты Процессы команды — по сути её внутренние продукты. А хорошие процессы обладают всеми признаками, присущими успешному продукту. Признаки хорошего...
👍12❤3
В KISLOROD написали, как когнитивные искажения используются в электронной коммерции и цифровых продуктах.
— Эффект эстетичности: люди склонны воспринимать красивый дизайн как более удобный. Но работает это только для небольших недочётов;
— Эффект приманки: если к 2 равнозначным вариантам добавить 3-й, заметно проигрывающий одному из них, люди чаще выбирают выигрывающий на его фоне вариант;
— Например, можно добавить чуть лучший, но намного более дорогой вариант, чтобы склонить к среднему по цене варианту;
— Эффект каскада доступной информации: чем чаще повторяется утверждение, тем сильнее становится вера в него. Так работает массовая реклама;
— Эффект победителя: люди склонны перенимать поведение, которого придерживается множество других людей. Это конформизм и желание быть частью общества. В электронной коммерции его используют социальные доказательства: отзывы и оценки;
— Эффект обратного победителя: люди избегают определённого поведения, если считают, что так поступает масса других людей;
— Пример одновременного действия этих эффектов: люди стремятся вместе со всеми купить новую модель айфона и при этом не покупают андроид, чтобы не быть «как все»;
— Эффект якоря: на оценки и суждения человека влияет первоначальная информация;
— Например, стоимость дорогих товаров, которые оказались в начале списка при сортировке «от дорогих к дешёвым», или обычная цена при наличии немного более низкой цены по карте покупателя;
— Эффект предпочтения статус-кво: люди желают, чтобы всё оставалось примерно тем же самым. Поэтому они плохо воспринимают революционные редизайны;
— Эффект неприятия потерь: люди воспринимают потерю более чем в 2 раза сильнее, чем приобретение того же самого. Потерять 500 рублей неприятнее, чем найти 1000. Или не получить то, на получение чего уже настроился;
— Используется в бесплатных пробных версиях и акциях 3 по цене 2: даже если 3-я единица товара не нужна, отказаться от неё тяжело;
— Эффект фрейминга: подача информации влияет на её восприятие;
— Например, автодилеры пишут не «скидка», а «выгода». Скидка 5000 рублей выглядит весомее, чем 5%, даже если это одна и та же скидка. Но если цена товара небольшая, лучше работают проценты;
— Эффект авторитета: люди больше верят оценкам авторитетных фигур (врачам, людям в униформе). На эффект рассчитаны рекомендации экспертов в описании товаров.
#psychology #ecommerce
— Эффект эстетичности: люди склонны воспринимать красивый дизайн как более удобный. Но работает это только для небольших недочётов;
— Эффект приманки: если к 2 равнозначным вариантам добавить 3-й, заметно проигрывающий одному из них, люди чаще выбирают выигрывающий на его фоне вариант;
— Например, можно добавить чуть лучший, но намного более дорогой вариант, чтобы склонить к среднему по цене варианту;
— Эффект каскада доступной информации: чем чаще повторяется утверждение, тем сильнее становится вера в него. Так работает массовая реклама;
— Эффект победителя: люди склонны перенимать поведение, которого придерживается множество других людей. Это конформизм и желание быть частью общества. В электронной коммерции его используют социальные доказательства: отзывы и оценки;
— Эффект обратного победителя: люди избегают определённого поведения, если считают, что так поступает масса других людей;
— Пример одновременного действия этих эффектов: люди стремятся вместе со всеми купить новую модель айфона и при этом не покупают андроид, чтобы не быть «как все»;
— Эффект якоря: на оценки и суждения человека влияет первоначальная информация;
— Например, стоимость дорогих товаров, которые оказались в начале списка при сортировке «от дорогих к дешёвым», или обычная цена при наличии немного более низкой цены по карте покупателя;
— Эффект предпочтения статус-кво: люди желают, чтобы всё оставалось примерно тем же самым. Поэтому они плохо воспринимают революционные редизайны;
— Эффект неприятия потерь: люди воспринимают потерю более чем в 2 раза сильнее, чем приобретение того же самого. Потерять 500 рублей неприятнее, чем найти 1000. Или не получить то, на получение чего уже настроился;
— Используется в бесплатных пробных версиях и акциях 3 по цене 2: даже если 3-я единица товара не нужна, отказаться от неё тяжело;
— Эффект фрейминга: подача информации влияет на её восприятие;
— Например, автодилеры пишут не «скидка», а «выгода». Скидка 5000 рублей выглядит весомее, чем 5%, даже если это одна и та же скидка. Но если цена товара небольшая, лучше работают проценты;
— Эффект авторитета: люди больше верят оценкам авторитетных фигур (врачам, людям в униформе). На эффект рассчитаны рекомендации экспертов в описании товаров.
#psychology #ecommerce
dsgners.ru
Как Apple, IKEA и другие бренды водят нас за нос: когнитивные искажения на практике — дизайнерс
Всем привет! С вами команда KISLOROD. Мы занимаемся разработкой и развитием интернет-магазинов.
❤15👍8
Соня Соуза написала о странице с нулевыми результатами поиска в интернет-магазине.
— В нулевых результатах поиска пользователи редко обращают внимание на советы вроде «Проверьте поисковый запрос на ошибки или попробуйте использовать более общие слова», так как непонятно, какое слово написано неправильно, и какие альтернативные формулировки подойдут;
— Покажите одну или несколько категорий, связанных с поисковым запросом. Если «Красные зимние куртки» не найдены, покажите ссылку на более широкую категорию «Куртки». В идеале — с применённым фильтром «Зима»;
— Предложите ввести похожий поисковый запрос, по которому есть ненулевые результаты. Например: исходный запрос без какого-то одного слова или его более простая формулировка;
— Если есть только один такой похожий запрос, можно сразу применить его, уведомив, что по исходному запросу ничего не найдено;
— Можно предложить товары, основываясь на пользовательской истории просмотров или персональных рекомендациях;
— Покажите контактные данные и ссылку на чат или справочные ресурсы;
— Покажите ссылки на популярные категории товаров, а также список популярных товаров, чтобы переключить внимание с неудачи на возможность новых открытий. Если подписать «Сейчас в тренде» или «Бестселлеры», это выступит социальным доказательством.
In English. #search #empty_state
— В нулевых результатах поиска пользователи редко обращают внимание на советы вроде «Проверьте поисковый запрос на ошибки или попробуйте использовать более общие слова», так как непонятно, какое слово написано неправильно, и какие альтернативные формулировки подойдут;
— Покажите одну или несколько категорий, связанных с поисковым запросом. Если «Красные зимние куртки» не найдены, покажите ссылку на более широкую категорию «Куртки». В идеале — с применённым фильтром «Зима»;
— Предложите ввести похожий поисковый запрос, по которому есть ненулевые результаты. Например: исходный запрос без какого-то одного слова или его более простая формулировка;
— Если есть только один такой похожий запрос, можно сразу применить его, уведомив, что по исходному запросу ничего не найдено;
— Можно предложить товары, основываясь на пользовательской истории просмотров или персональных рекомендациях;
— Покажите контактные данные и ссылку на чат или справочные ресурсы;
— Покажите ссылки на популярные категории товаров, а также список популярных товаров, чтобы переключить внимание с неудачи на возможность новых открытий. Если подписать «Сейчас в тренде» или «Бестселлеры», это выступит социальным доказательством.
In English. #search #empty_state
uprock.webflow.io
Ничего не найдено: как правильно проектировать «тупиковые» страницы — читайте на UPROCK
Сегодня мы рассмотрим 5 эффективных стратегий, которые помогут сохранить вовлеченность пользователей и вернуть их к выполнению основной задачи после неудачного поиска.. читайте полезные статьи о дизайне в блоге UPROCK
❤10👍5
Елена Плинер написала, как подключаться к задачам с высокой степенью неопределённости, работая попроектно.
— С неполными вводными на старте минимально нужно 40 часов, чтобы заложить основу будущего проекта;
— Даже работая по схеме Time and materials клиент хочет знать примерный срок, бюджет и что он получит;
— Сначала надо собрать и систематизировать вводные (от 5 часов): презентации и текстовые описания, внутренние документы, скриншоты, фото с доски, наброски от руки и так далее;
— Иногда вводные приходят в созвонах, переписках и голосовых, что требует дополнительной обработки и структурирования;
— Может появиться список недостающей информации (метрики, списки конкурентов), а также нераскрытых или двусмысленных описаний, которые требуют конкретизации;
— В итоге получится структурированный список вводных, ссылок на документы, описание проекта (цель, задачи, целевая аудитория, контекст, заявленные проблемы), глоссарий;
— Удобно собрать всё в одном месте, например на FigJam-доске;
— Туда же можно добавить саммари по созвонам, кто за что отвечает в команде заказчика, план проекта, который потом дополнится ссылками на артефакты и их статусами, отчёт о потраченном на проект времени;
— Анализ занимает от 20 часов и зависит от количества и полноты вводных, числа ролей и ключевых сущностей, сложности бизнес-логики, а также желаемого набора артефактов (не все они нужны заказчикам);
— Сильно влияет степень вовлечённости заказчика — как быстро он отвечает на вопросы;
— Артефакты: описание функциональности (возможности и зависимости), схемы бизнес-процессов (последовательность операций, перемещение и обработка данных, граница между онлайном и офлайном), описание пользовательских ролей (чем занимаются, как принимают решения и взаимодействуют друг с другом), сущностей (ключевые объекты, их свойства, связи с другими объектами), сценарии (user stories), список внешних процессов, матрица «Роль × действие × сущность» и базовые правила доступа (CRUDL);
— В процессе анализа фиксируются ключевые требования к интерфейсу, предварительные предложения и решения по дизайну, появляются вопросы;
— Ответы на некоторые вопросы могут требовать времени. Чтобы не тормозить процесс, иногда можно договориться с командой о временных гипотетических ответах;
— Проектирование занимает от 15 часов (зависит от количества сценариев и ролей) и опционально. Артефакты: информационная архитектура (карта экранов), юзерфлоу, опционально мокапы и вайрфреймы.
#process #analysis
— С неполными вводными на старте минимально нужно 40 часов, чтобы заложить основу будущего проекта;
— Даже работая по схеме Time and materials клиент хочет знать примерный срок, бюджет и что он получит;
— Сначала надо собрать и систематизировать вводные (от 5 часов): презентации и текстовые описания, внутренние документы, скриншоты, фото с доски, наброски от руки и так далее;
— Иногда вводные приходят в созвонах, переписках и голосовых, что требует дополнительной обработки и структурирования;
— Может появиться список недостающей информации (метрики, списки конкурентов), а также нераскрытых или двусмысленных описаний, которые требуют конкретизации;
— В итоге получится структурированный список вводных, ссылок на документы, описание проекта (цель, задачи, целевая аудитория, контекст, заявленные проблемы), глоссарий;
— Удобно собрать всё в одном месте, например на FigJam-доске;
— Туда же можно добавить саммари по созвонам, кто за что отвечает в команде заказчика, план проекта, который потом дополнится ссылками на артефакты и их статусами, отчёт о потраченном на проект времени;
— Анализ занимает от 20 часов и зависит от количества и полноты вводных, числа ролей и ключевых сущностей, сложности бизнес-логики, а также желаемого набора артефактов (не все они нужны заказчикам);
— Сильно влияет степень вовлечённости заказчика — как быстро он отвечает на вопросы;
— Артефакты: описание функциональности (возможности и зависимости), схемы бизнес-процессов (последовательность операций, перемещение и обработка данных, граница между онлайном и офлайном), описание пользовательских ролей (чем занимаются, как принимают решения и взаимодействуют друг с другом), сущностей (ключевые объекты, их свойства, связи с другими объектами), сценарии (user stories), список внешних процессов, матрица «Роль × действие × сущность» и базовые правила доступа (CRUDL);
— В процессе анализа фиксируются ключевые требования к интерфейсу, предварительные предложения и решения по дизайну, появляются вопросы;
— Ответы на некоторые вопросы могут требовать времени. Чтобы не тормозить процесс, иногда можно договориться с командой о временных гипотетических ответах;
— Проектирование занимает от 15 часов (зависит от количества сценариев и ролей) и опционально. Артефакты: информационная архитектура (карта экранов), юзерфлоу, опционально мокапы и вайрфреймы.
#process #analysis
Хабр
Первые 40 часов UX/UI‑дизайна: как я собираю вводные и формирую основу интерфейса
Меня зовут Лена Плинер. Я занимаюсь UX/UI-дизайном CRM, ERP, SaaS‑платформ и сервисов, веб‑ и мобильных приложений. Сотрудничаю с заказчиками и командами как попроектный дизайнер. Контекст Я работаю...
❤11👍6🔥5
Фёдор Погуляев написал, как генерировать прототипы мобильных приложений на основе макетов в Фигме.
— Понадобится Node.js, Expo, Git и редактор кода Cursor;
— Expo даёт набор инструментов для создания кроссплатформенных приложений (мобайл и веб) на базе React Native;
— Прототип можно запускать через Expo Go на телефоне как обычное приложение (на любой операционной системе) с нативным поведением, виброоткликом, гироскопом и так далее;
— Git нужен для сохранения всей истории изменений файлов проекта. Полезно при вайбкодинге, так как Курсор может откатить изменения только в пределах одного контекстного окна;
— У Курсора есть Rules and Memories, где можно указать место хранения SVG-ассетов и выбранную библиотеку для анимации (например, React Reanimated). Правила могут распространяться на конкретный проект Project Rules и на все проекты User Rules;
— Пропишите в правилах, что приложение будет в связке React Native и Expo. Возьмите в Фигме personal access token и укажите его в настройках MCP. Так Курсор сможет ходить в Фигму за макетами;
— Если не работаете с дизайн-системой, потратьте время на нормальное именование элементов в Фигме. Так можно будет обращаться к конкретным элементам, а ИИ даже сможет предугадывать ваши желания при создании прототипа;
— Создайте шаблонный проект приложения со стандартной структурой, сбросьте шаблон, чтобы получить чистый проект;
— Начать эксперименты лучше с файла index.tsx, который отвечает за главную страницу;
— Скопируйте в чат ссылку на фрейм главной страницы в Фигме и скажите использовать функцию get_code (команда изучить структуру фрейма), чтобы ИИ воссоздал макет в коде;
— Так можно проверять решения без разработчиков, лучше разобраться в терминологии и логике кода.
#ai #prototype #mobile
— Понадобится Node.js, Expo, Git и редактор кода Cursor;
— Expo даёт набор инструментов для создания кроссплатформенных приложений (мобайл и веб) на базе React Native;
— Прототип можно запускать через Expo Go на телефоне как обычное приложение (на любой операционной системе) с нативным поведением, виброоткликом, гироскопом и так далее;
— Git нужен для сохранения всей истории изменений файлов проекта. Полезно при вайбкодинге, так как Курсор может откатить изменения только в пределах одного контекстного окна;
— У Курсора есть Rules and Memories, где можно указать место хранения SVG-ассетов и выбранную библиотеку для анимации (например, React Reanimated). Правила могут распространяться на конкретный проект Project Rules и на все проекты User Rules;
— Пропишите в правилах, что приложение будет в связке React Native и Expo. Возьмите в Фигме personal access token и укажите его в настройках MCP. Так Курсор сможет ходить в Фигму за макетами;
— Если не работаете с дизайн-системой, потратьте время на нормальное именование элементов в Фигме. Так можно будет обращаться к конкретным элементам, а ИИ даже сможет предугадывать ваши желания при создании прототипа;
— Создайте шаблонный проект приложения со стандартной структурой, сбросьте шаблон, чтобы получить чистый проект;
— Начать эксперименты лучше с файла index.tsx, который отвечает за главную страницу;
— Скопируйте в чат ссылку на фрейм главной страницы в Фигме и скажите использовать функцию get_code (команда изучить структуру фрейма), чтобы ИИ воссоздал макет в коде;
— Так можно проверять решения без разработчиков, лучше разобраться в терминологии и логике кода.
#ai #prototype #mobile
dsgners.ru
Соединяешь экраны в Figma стрелками? Есть способ поинтереснее. — дизайнерс
Приветствую. Меня зовут Фёдор, я цифровой дизайнер в Notamedia. Мне очень нравятся мобильные платформы, и поэтому за дизайн приложений я всегда сажусь с энтузиазмом. Но когда дело доходит до демонстрации… Увы, прототипы в Figma мало что позволяют.
👍18❤4
Дима Мохамад тоже написал о Chrome DevTools, можно немного дополнить статью Юрия Герыша.
— Во вкладке Elements можно выделить конкретный элемент кода страницы и увидеть отступы;
— Они бывают внутренними (paddings) — отступы между содержимым элемента и его границами (например, между текстом внутри карточки и её краями) — и внешними (margins) — отступы до соседних элементов, например, между разными карточками;
— Так на дизайн-ревью можно точно сказать фронт-разработчику, какой отступ сейчас в коде и каким он должен быть;
— Через DevTools можно скачивать изображения, защищённые от скачивания через «Сохранить как…»;
— Для этого во вкладке Network в фильтре надо выбрать Img, обновить страницу, в появившемся списке всех загрузившихся изображений найти нужное, нажать правой кнопкой мыши и выбрать «Save image as…»;
— В статье есть понятные иллюстрации и инструкции, как найти и включить разные функции вроде Styles, Computed, Responsive Design Mode и так далее.
#chrome_devtools
— Во вкладке Elements можно выделить конкретный элемент кода страницы и увидеть отступы;
— Они бывают внутренними (paddings) — отступы между содержимым элемента и его границами (например, между текстом внутри карточки и её краями) — и внешними (margins) — отступы до соседних элементов, например, между разными карточками;
— Так на дизайн-ревью можно точно сказать фронт-разработчику, какой отступ сейчас в коде и каким он должен быть;
— Через DevTools можно скачивать изображения, защищённые от скачивания через «Сохранить как…»;
— Для этого во вкладке Network в фильтре надо выбрать Img, обновить страницу, в появившемся списке всех загрузившихся изображений найти нужное, нажать правой кнопкой мыши и выбрать «Save image as…»;
— В статье есть понятные иллюстрации и инструкции, как найти и включить разные функции вроде Styles, Computed, Responsive Design Mode и так далее.
#chrome_devtools
Хабр
DevTools для дизайнера. Быстрый старт
Привет! Я Дима — дизайнер в Voximplant, занимаюсь нашим сайтом. В работе я часто использую инструменты разработчика — и не только в задачах связанных с сайтом, поэтому решил подготовить...
❤7👍3
Forwarded from UX Work
Амиран Карацев написал, что делать, чтобы работники-зумеры не уходили из вашей команды.
— В основном молодые специалисты сейчас — зумеры. Принято считать, что они не хотят работать. Проблема в том, что именно они (зачастую впервые в жизни) сталкиваются с сильно просевшим за последние годы управленческим дизайном;
— Они стремятся к гибкости (удалённый и гибридный формат, большая автономия, фриланс) и благополучию (снижение стресса, забота о себе, работа на себя, а не мерседес для акционера);
— Их лояльность работодателю не безусловна, а зависит от среды: отношения в команде, соблюдение личных границ, возможность развиваться, забота со стороны компании, ясность ожиданий;
— Универсалии труда — понятные цели, забота и развитие — важны всем независимо от возраста и системно провалены. Процессы надо адаптировать под контекст компании, а не просто брать «из мемов» (пример с адаптацией дизайн-ревью);
— Решение проблемы с онбордингом: список ролей в компании, шаблоны артефактов, чеклисты, чтобы понимать, как выглядит хороший результат, фидбек через 30, 60 и 90 дней испытательного срока;
— Метрики: Time-to-Value новичка, NPS онбординга, доля задач без эскалаций до руководителя за 30, 60, 90 дней;
— Ритуалы, которые не улучшают координацию или качество решений, надо отменять или проводить асинхронно (как повысить эффективность встреч). Иначе они превращаются в прокси-контроль, вызывают усталость и недоверие процессам;
— Метрики: доля снятых блокеров за спринт, удовлетворённость митингами, MTTR по инцидентам;
— Возврат в офисы снижает гибкость, повышает стресс. Решение: решать в офисе сложные синхронные задачи, проводить плановые парные ревью, живые разборы и сессии наставничества, когда присутствие = рост;
— Конструируйте гибрид: автономия в обмен на прозрачные требования к результатам и времени реакции в каналах связи;
— Если работодатель делегирует результат вместо задач, важна ясность ожиданий и доступность ресурсов. Тогда будет расти ответственность и скорость. Если этого нет, появляется микроменеджмент и выгорание;
— Для повышения ясности опишите дерево ценности: бизнес-метрика → результат работы команды → задачи и критерии их хорошего выполнения;
— Нормируйте нагрузку и убирайте скрытую работу, на 1:1 спрашивайте о нагрузке, достаточности ресурсов, рисках и как сотрудник себя чувствует;
— Обеспечивайте доступ к поддержке ментального здоровья, снижайте стигматизацию через явные политики и обучение лидеров;
— Учитывайте рыночные ожидания по гибкости и льготам, чтобы не терять их просто потому, что конкуренты предлагают ×2.
#management
— В основном молодые специалисты сейчас — зумеры. Принято считать, что они не хотят работать. Проблема в том, что именно они (зачастую впервые в жизни) сталкиваются с сильно просевшим за последние годы управленческим дизайном;
— Они стремятся к гибкости (удалённый и гибридный формат, большая автономия, фриланс) и благополучию (снижение стресса, забота о себе, работа на себя, а не мерседес для акционера);
— Их лояльность работодателю не безусловна, а зависит от среды: отношения в команде, соблюдение личных границ, возможность развиваться, забота со стороны компании, ясность ожиданий;
— Универсалии труда — понятные цели, забота и развитие — важны всем независимо от возраста и системно провалены. Процессы надо адаптировать под контекст компании, а не просто брать «из мемов» (пример с адаптацией дизайн-ревью);
— Решение проблемы с онбордингом: список ролей в компании, шаблоны артефактов, чеклисты, чтобы понимать, как выглядит хороший результат, фидбек через 30, 60 и 90 дней испытательного срока;
— Метрики: Time-to-Value новичка, NPS онбординга, доля задач без эскалаций до руководителя за 30, 60, 90 дней;
— Ритуалы, которые не улучшают координацию или качество решений, надо отменять или проводить асинхронно (как повысить эффективность встреч). Иначе они превращаются в прокси-контроль, вызывают усталость и недоверие процессам;
— Метрики: доля снятых блокеров за спринт, удовлетворённость митингами, MTTR по инцидентам;
— Возврат в офисы снижает гибкость, повышает стресс. Решение: решать в офисе сложные синхронные задачи, проводить плановые парные ревью, живые разборы и сессии наставничества, когда присутствие = рост;
— Конструируйте гибрид: автономия в обмен на прозрачные требования к результатам и времени реакции в каналах связи;
— Если работодатель делегирует результат вместо задач, важна ясность ожиданий и доступность ресурсов. Тогда будет расти ответственность и скорость. Если этого нет, появляется микроменеджмент и выгорание;
— Для повышения ясности опишите дерево ценности: бизнес-метрика → результат работы команды → задачи и критерии их хорошего выполнения;
— Нормируйте нагрузку и убирайте скрытую работу, на 1:1 спрашивайте о нагрузке, достаточности ресурсов, рисках и как сотрудник себя чувствует;
— Обеспечивайте доступ к поддержке ментального здоровья, снижайте стигматизацию через явные политики и обучение лидеров;
— Учитывайте рыночные ожидания по гибкости и льготам, чтобы не терять их просто потому, что конкуренты предлагают ×2.
#management
Хабр
Я зумер, и вот почему мы не хотим работать (и что с этим делать)
Где-то раз в месяц на Хабре выходит статья о том, какие зумеры ленивые, неисполнительные, необязательные и не возвращающиеся с обедов. В комментариях хабравчане хватаются за «и вот к ним перейдет наше...
❤20😁9👍3🔥1
Виктория Филиппова написала о возрастной маркировке.
— Это отметки вроде 6+, 12+. Они указывают, с какого возраста рекомендуется просмотр контента, участие в мероприятии или использование предмета;
— В России, согласно федеральному закону 436-ФЗ, маркировка должна быть на афише, объявлении или билете и занимать не менее 5% их площади;
— Роскомнадзор и суды считают афишей любой публичный визуальный элемент, который информирует о событии и побуждает к просмотру, участию или покупке билета. То есть это и баннер, и карточка события на сайте;
— Отметка должна быть заметной, то есть её нельзя прятать внутри текстового описания мероприятия или размещать в углу страницы без видимой связи с событием;
— Если на странице мероприятия есть и его описание, и постер, для полного соответствия закону маркировка должна быть и в описании, и на постере (да, получается дублирование);
— В статье есть примеры маркировки на Яндекс Афише, Афише, МТС Live, Кинопоиске, Кассире, Киномониторе, а также на иностранных ресурсах;
— Брать пример с конкурентов не всегда хорошая идея, так как они могут закон не соблюдать, беря на себя риск;
— Не стоит делать маркировку настолько незаметной, насколько позволяет закон. Это полезная информация о мероприятии, которая должна быть доступна наравне с прочей информацией. Благодаря ней родители могут понять, что подходит их детям (особенно актуально для родителей малышей), и сделать правильный выбор.
#laws #entertainment
— Это отметки вроде 6+, 12+. Они указывают, с какого возраста рекомендуется просмотр контента, участие в мероприятии или использование предмета;
— В России, согласно федеральному закону 436-ФЗ, маркировка должна быть на афише, объявлении или билете и занимать не менее 5% их площади;
— Роскомнадзор и суды считают афишей любой публичный визуальный элемент, который информирует о событии и побуждает к просмотру, участию или покупке билета. То есть это и баннер, и карточка события на сайте;
— Отметка должна быть заметной, то есть её нельзя прятать внутри текстового описания мероприятия или размещать в углу страницы без видимой связи с событием;
— Если на странице мероприятия есть и его описание, и постер, для полного соответствия закону маркировка должна быть и в описании, и на постере (да, получается дублирование);
— В статье есть примеры маркировки на Яндекс Афише, Афише, МТС Live, Кинопоиске, Кассире, Киномониторе, а также на иностранных ресурсах;
— Брать пример с конкурентов не всегда хорошая идея, так как они могут закон не соблюдать, беря на себя риск;
— Не стоит делать маркировку настолько незаметной, насколько позволяет закон. Это полезная информация о мероприятии, которая должна быть доступна наравне с прочей информацией. Благодаря ней родители могут понять, что подходит их детям (особенно актуально для родителей малышей), и сделать правильный выбор.
#laws #entertainment
Хабр
«5% заботы: почему возрастной бейдж — это тоже про UX»
Встречались ли вы с бейджем 16+, 18+ и думали, зачем он тут? Такие значки мы часто видим на афишах спектаклей, фильмах, играх, книгах и даже в онлайн-магазинах. Это возрастная маркировка — система...
👍15❤6
Павел Шерер написал о подходе к приоритизации PoDPR.
— Формула: (Pain ÷ Difficulty) × Probability × Reversibility;
— Боль — выраженность проблемы для пользователя или бизнеса. Сложность — стоимость реализации. Чем больше боль и меньше затраты на её устранение, тем лучше;
— Probability — насколько вероятно, что изменение даст целевой результат. Должно основываться не на вере, а на данных, экспериментах и обратной связи;
— Reversibility — насколько легко откатить решение при провале. Чем выше обратимость, тем смелее можно проверять гипотезы;
— Формула прямо наказывает дорогостоящие, слабообратимые и плохо подтверждённые затеи;
— В статье есть критика других способов приоритизации (MoSCoW, RICE, ICE, Kano Model, WSJF, Value vs Effort Matrix, User Story Mapping, Impact Mapping) и советы, как дополнить их с помощью PoDPR;
— PoDPR не задумывался как жёсткая формула, его сила в способности адаптироваться под контекст компании;
— Например, если важно считать охват новых фич, как в RICE, то Pain можно разложить на Severity (серьёзность проблемы) × Frequency (частота возникновения) × Reach (охват);
— Если критично время, можно добавить аналог Time Criticality из WSJF. PoDPR = (Pain ÷ Difficulty) × Probability × Reversibility × Urgency;
— Если важно учесть масштаб возможного ущерба — коэффициент Blast Radius;
— Если важно выбирать устойчивые и лёгкие в поддержке решения (для платформенных изменений) — коэффициент Sustainability;
— Добавляя коэффициенты, важно задокументировать, кто оценивает, какие источники данных используются, какие артефакты должны подтверждать оценки;
— Возможные значения коэффициентов фиксируются в шкалах с описанием и примерами, какое значение выбирать. Например, для оценки Urgency должны быть конкретные критерии: срок до дедлайна, сезонность, ограниченность окна возможностей;
— Изменения в шкалах допустимы не чаще, чем раз в квартал, чтобы не превращать формулу в инструмент для политических игр.
#prioritization
— Формула: (Pain ÷ Difficulty) × Probability × Reversibility;
— Боль — выраженность проблемы для пользователя или бизнеса. Сложность — стоимость реализации. Чем больше боль и меньше затраты на её устранение, тем лучше;
— Probability — насколько вероятно, что изменение даст целевой результат. Должно основываться не на вере, а на данных, экспериментах и обратной связи;
— Reversibility — насколько легко откатить решение при провале. Чем выше обратимость, тем смелее можно проверять гипотезы;
— Формула прямо наказывает дорогостоящие, слабообратимые и плохо подтверждённые затеи;
— В статье есть критика других способов приоритизации (MoSCoW, RICE, ICE, Kano Model, WSJF, Value vs Effort Matrix, User Story Mapping, Impact Mapping) и советы, как дополнить их с помощью PoDPR;
— PoDPR не задумывался как жёсткая формула, его сила в способности адаптироваться под контекст компании;
— Например, если важно считать охват новых фич, как в RICE, то Pain можно разложить на Severity (серьёзность проблемы) × Frequency (частота возникновения) × Reach (охват);
— Если критично время, можно добавить аналог Time Criticality из WSJF. PoDPR = (Pain ÷ Difficulty) × Probability × Reversibility × Urgency;
— Если важно учесть масштаб возможного ущерба — коэффициент Blast Radius;
— Если важно выбирать устойчивые и лёгкие в поддержке решения (для платформенных изменений) — коэффициент Sustainability;
— Добавляя коэффициенты, важно задокументировать, кто оценивает, какие источники данных используются, какие артефакты должны подтверждать оценки;
— Возможные значения коэффициентов фиксируются в шкалах с описанием и примерами, какое значение выбирать. Например, для оценки Urgency должны быть конкретные критерии: срок до дедлайна, сезонность, ограниченность окна возможностей;
— Изменения в шкалах допустимы не чаще, чем раз в квартал, чтобы не превращать формулу в инструмент для политических игр.
#prioritization
Павел Шерер
PoDPR или зачем нам ещё одна формула приоритизации | Павел Шерер
Потому что не каждая умеет считать риски. PoDPR помогает выбрать задачи, где боль реальна, вероятность подтверждена, а откат безопасен.
5❤10👍9🔥2
Дмитрий Подлужный написал о проектировании интерфейсов интерактивных экранов.
— Надо понимать размеры экрана, для которого проектируете. В идеале — иметь доступ к устройству. Если доступа нет, создайте макет в натуральную величину;
— Важную роль играет расположение экрана: на какой высоте, под каким углом он находится, каким будет освещение;
— Вертикальные экраны требуют явного обозначения интерактивности. Например, с помощью подсказки «Нажмите, чтобы начать»;
— Наклонённые экраны сразу воспринимаются как интерактивные. А разные их участки доступнее, чем на вертикальных экранах;
— Размещайте элементы управления в легкодоступных зонах;
— Контент и навигация (интерактивные элементы) должны заметно отличаться визуально;
— Обеспечьте заметный отклик на действия пользователя;
— С большим экраном естественнее взаимодействовать ладонью или несколькими пальцами, а не только кончиком одного пальца;
— Минимизируйте количество нажатий, ручного ввода текста и других действий, требующих высокой точности;
— Двигать рукой утомительнее, особенно если она остаётся на весу;
— Избегайте утомительных действий вроде долгой прокрутки, частого перетаскивания объектов;
— Зоны клика должны быть больше самих элементов, особенно если пользователь смотрит на них под углом;
— Экраны большие, но пользователь находится близко к ним, на расстоянии вытянутой руки, и его поле зрения ограничено;
— Не разбрасывайте элементы по экрану, чтобы не заставлять человека поворачивать голову. Это утомляет;
— Используйте анимацию, чтобы привлечь внимание к определённым элементам;
— Дайте возможность перемещать экранную клавиатуру в удобное место на экране;
— Автоматически возвращайте экран в исходное состояние, если он долгое время не используется, чтобы следующему пользователю было удобно начать взаимодействие.
#interactive_display
— Надо понимать размеры экрана, для которого проектируете. В идеале — иметь доступ к устройству. Если доступа нет, создайте макет в натуральную величину;
— Важную роль играет расположение экрана: на какой высоте, под каким углом он находится, каким будет освещение;
— Вертикальные экраны требуют явного обозначения интерактивности. Например, с помощью подсказки «Нажмите, чтобы начать»;
— Наклонённые экраны сразу воспринимаются как интерактивные. А разные их участки доступнее, чем на вертикальных экранах;
— Размещайте элементы управления в легкодоступных зонах;
— Контент и навигация (интерактивные элементы) должны заметно отличаться визуально;
— Обеспечьте заметный отклик на действия пользователя;
— С большим экраном естественнее взаимодействовать ладонью или несколькими пальцами, а не только кончиком одного пальца;
— Минимизируйте количество нажатий, ручного ввода текста и других действий, требующих высокой точности;
— Двигать рукой утомительнее, особенно если она остаётся на весу;
— Избегайте утомительных действий вроде долгой прокрутки, частого перетаскивания объектов;
— Зоны клика должны быть больше самих элементов, особенно если пользователь смотрит на них под углом;
— Экраны большие, но пользователь находится близко к ним, на расстоянии вытянутой руки, и его поле зрения ограничено;
— Не разбрасывайте элементы по экрану, чтобы не заставлять человека поворачивать голову. Это утомляет;
— Используйте анимацию, чтобы привлечь внимание к определённым элементам;
— Дайте возможность перемещать экранную клавиатуру в удобное место на экране;
— Автоматически возвращайте экран в исходное состояние, если он долгое время не используется, чтобы следующему пользователю было удобно начать взаимодействие.
#interactive_display
Хабр
Проектирование для интерактивных экранов
Я работаю в области проектирования интерфейсов уже давно и недавно столкнулся с возможностью поработать над проектированием интерфейсов для интерактивных экранов. Основная задача экранов — это...
👍13❤3