Forwarded from Стой под стрелой (Nikita Prokopov)
Почему-то считается, что дизайнеру или программисту круто бы думать об интересах бизнеса, что инженер, который о них думает, ценнее, чем тот, который не думает.
А мне кажется наоборот. У вас уже есть бизнесмен, пусть он о них думает. Зачем компании два бизнесмена, один хороший, другой плохой? Мне кажется, дизайнер должен думать про дизайн, программист — про программы. И целью своей себе ставить сделать хороший дизайн или хорошую программу, а не угодить бизнесу. И вот в их конфликте возникнет некое целое, которое больше частей, их синтез.
Грубо, дизайнера должно заботить, чтобы интерфейс хорошо выглядел и им было удобно пользоваться, а не метрики. Метрики будут заботить бизнес. Если дизайнера будут заботить метрики, и бизнес будут заботить метрики, получится не конфликт и поиск его решения, а повторение и топтание на месте.
Я много раз разговаривал с инженерами, которые жаловались, что бизнес не дает им времени на рефакторинг или сделать нормально. Ну так он и не должен давать! Бизнес интересует бизнес, а вас, как инженера, должно интересовать, как сделать качественно, устойчиво, эффективно. К вам никто никогда снаружи с этим запросом не придет, это должна быть ваша собственная мотивация, ваши собственные ценности, ваши собственные стандарты, понимаете?
И к вам приходят, чтобы вы их продавливали. А бизнес бизнес и без вас сделает.
А мне кажется наоборот. У вас уже есть бизнесмен, пусть он о них думает. Зачем компании два бизнесмена, один хороший, другой плохой? Мне кажется, дизайнер должен думать про дизайн, программист — про программы. И целью своей себе ставить сделать хороший дизайн или хорошую программу, а не угодить бизнесу. И вот в их конфликте возникнет некое целое, которое больше частей, их синтез.
Грубо, дизайнера должно заботить, чтобы интерфейс хорошо выглядел и им было удобно пользоваться, а не метрики. Метрики будут заботить бизнес. Если дизайнера будут заботить метрики, и бизнес будут заботить метрики, получится не конфликт и поиск его решения, а повторение и топтание на месте.
Я много раз разговаривал с инженерами, которые жаловались, что бизнес не дает им времени на рефакторинг или сделать нормально. Ну так он и не должен давать! Бизнес интересует бизнес, а вас, как инженера, должно интересовать, как сделать качественно, устойчиво, эффективно. К вам никто никогда снаружи с этим запросом не придет, это должна быть ваша собственная мотивация, ваши собственные ценности, ваши собственные стандарты, понимаете?
И к вам приходят, чтобы вы их продавливали. А бизнес бизнес и без вас сделает.
👍42👎13🤔10💯10❤8🔥4💩2❤🔥1🖕1
Forwarded from UX Work
Вас уволили/сократили в этом году?
Anonymous Poll
18%
Да
65%
Нет
11%
Я весь этот год не работаю
6%
Я работаю на себя
❤6
Мы с Дмитрием Ваницким поговорили о творчестве и дизайне, и креативности в жизни продуктового дизайнера. В UX Notes был анонс трансляции, теперь можно прочитать отредактированный транскрипт и посмотреть запись. А вот основные тезисы:
— Дизайн, как и другая работа в IT, хорошо оплачивается и достаточно интересен, но для входа требует знаний и навыков. Барьер для джунов сейчас довольно высок, учитывая AI и текущий рынок труда;
— Новички часто ошибочно считают, что дизайнер — креативный гений, занимающийся творчеством и самовыражением, когда вздумается, несколько часов в день;
— Поработав в реальных проектах, понимаешь, что это не так. Бывает, что в проектах самовыражается заказчик;
— Работать 4 часа в день реально — всё остальное время митинги (есть доля шутки). Считается, что дизайнер продуктивен до 6 часов в день — студии закладывают столько в сметы;
— Творчество — создание чего‑то нового, чего не было раньше. Чувственного самовыражения и конкретной задачи в нём может и не быть. И дизайн, и перестановка мебели — творчество;
— В психологии выделяют «самодеятельность», когда человек творит, но только в рамках своего мира. То есть делает перестановку, но не делится своими методами и никак не влияет на домен перестановок;
— Дизайн решает задачу и обычно это процесс проектирования, создания чертежа, по которому впоследствии уже и появится конечный объект;
— Стремление к созданию и любопытство заложены в нас природой и развиты эволюционно. Не страшно, если кого-то в этом ведут низменные мотивы (получение лайков);
— У разных дизайнеров и у разных специализаций свой творческий диапазон. Минимальный уровень свободы — оператор Фигмы;
— При этом нормально, когда 70% времени занимает рутина. А ещё новым может быть не получившийся артефакт, а процесс, благодаря которому он появился;
— Дизайн-процесс (вроде Стэнфордской 5-ступенчатой модели) не сильно отличается от творческого процесса, как его описывает, например, музыкальный продюсер Рик Рубин;
— Описание — лишь тень идеи. Чтобы по‑настоящему оценить, насколько идея хороша, её надо воплотить, насколько это возможно (Рик Рубин). В дизайн-процессе это этап прототипирования;
1/2
— Дизайн, как и другая работа в IT, хорошо оплачивается и достаточно интересен, но для входа требует знаний и навыков. Барьер для джунов сейчас довольно высок, учитывая AI и текущий рынок труда;
— Новички часто ошибочно считают, что дизайнер — креативный гений, занимающийся творчеством и самовыражением, когда вздумается, несколько часов в день;
— Поработав в реальных проектах, понимаешь, что это не так. Бывает, что в проектах самовыражается заказчик;
— Работать 4 часа в день реально — всё остальное время митинги (есть доля шутки). Считается, что дизайнер продуктивен до 6 часов в день — студии закладывают столько в сметы;
— Творчество — создание чего‑то нового, чего не было раньше. Чувственного самовыражения и конкретной задачи в нём может и не быть. И дизайн, и перестановка мебели — творчество;
— В психологии выделяют «самодеятельность», когда человек творит, но только в рамках своего мира. То есть делает перестановку, но не делится своими методами и никак не влияет на домен перестановок;
— Дизайн решает задачу и обычно это процесс проектирования, создания чертежа, по которому впоследствии уже и появится конечный объект;
— Стремление к созданию и любопытство заложены в нас природой и развиты эволюционно. Не страшно, если кого-то в этом ведут низменные мотивы (получение лайков);
— У разных дизайнеров и у разных специализаций свой творческий диапазон. Минимальный уровень свободы — оператор Фигмы;
— При этом нормально, когда 70% времени занимает рутина. А ещё новым может быть не получившийся артефакт, а процесс, благодаря которому он появился;
— Дизайн-процесс (вроде Стэнфордской 5-ступенчатой модели) не сильно отличается от творческого процесса, как его описывает, например, музыкальный продюсер Рик Рубин;
— Описание — лишь тень идеи. Чтобы по‑настоящему оценить, насколько идея хороша, её надо воплотить, насколько это возможно (Рик Рубин). В дизайн-процессе это этап прототипирования;
1/2
Хабр
Разговор о творчестве и дизайне
Привет, меня зовут Антон Григорьев. Мы с Дмитрием Ваницким поговорили о творчестве и дизайне, творчестве в дизайне, креативности в жизни продуктового дизайнера, дизайне творческого процесса, ну вы...
👍11❤7👾3
2/2
— Применение дизайн-мышления в продуктовом дизайне затруднено жёсткими рамками, в которых находится дизайнер: табуретка Нормана, специфика конкретного продукта, видение продакта;
— Самому фреймворку, который продают консалтинговые компании вроде IDEO, не хватает системного мышления;
— Хорошо, когда ограничения есть. Это стимулирует творчество, повышает сложность, что может превратить скучную задачу в нескучную и ввести в состояние потока. Но слишком жёсткие ограничения могут привести к пересыханию творческого ручья;
— Чтобы интерфейс оставался интуитивно понятным, следует придерживаться сложившихся паттернов, помнить о законе Якоба. Излишняя креативность может навредить;
— Но когда понимаешь, что делаешь, паттерны можно нарушить;
— При взаимодействии с произведением искусства возможен катарсис. Во время дизайна: эмоциональный провал из-за клиентского «это совершенно не то», приятное чувство, когда уже почти готово и полируете результат (это ловушка!), удовлетворение от завершения работы, чувство причастности, когда кто-то пользуется результатом вашего труда и хвалит его;
— AI повышает креативность, забирая простые задачи (или помогая их автоматизировать вайбкодингом) и высвобождая человеческие ресурсы для задач посложнее. Может взглянуть на проблему под совершенно другим углом (AI для игры в Го);
— Чтобы прокачать креативность: читайте хорошую художественную литературу, общайтесь с непохожими на вас людьми, «набивайте коробочку» в том числе и не связанными с дизайном знаниями, повышайте планку вкуса;
— Попробуйте увидеть скрытые паттерны, по которым вы выполняете свою работу — свой модус операнди. Определив их, попробуйте нарушить;
— Давайте мозгу время переварить информацию и синтезировать идеи. Утро вечера мудренее, особенно, если вы уже не эффективны и хотите доделать просто чтобы поставить точку;
— Да и вообще работать надо по расписанию, не рассчитывая на появление музы. Но если муза пришла вне расписания, не гоните её;
— Если пришла идея, постарайтесь зафиксировать её полностью. Лучше черновик всей песни, который можно потом довести до ума, чем идеальный отрывок, который может вообще ни к чему потом не подойти (Рик Рубин);
— Результат работы продуктового дизайнера не будет выглядеть таким же креативным, как работа моушен-дизайнера. Но и у него найдутся свои ценители.
Видео, копии в моём блоге и Медиуме. #process
— Применение дизайн-мышления в продуктовом дизайне затруднено жёсткими рамками, в которых находится дизайнер: табуретка Нормана, специфика конкретного продукта, видение продакта;
— Самому фреймворку, который продают консалтинговые компании вроде IDEO, не хватает системного мышления;
— Хорошо, когда ограничения есть. Это стимулирует творчество, повышает сложность, что может превратить скучную задачу в нескучную и ввести в состояние потока. Но слишком жёсткие ограничения могут привести к пересыханию творческого ручья;
— Чтобы интерфейс оставался интуитивно понятным, следует придерживаться сложившихся паттернов, помнить о законе Якоба. Излишняя креативность может навредить;
— Но когда понимаешь, что делаешь, паттерны можно нарушить;
— При взаимодействии с произведением искусства возможен катарсис. Во время дизайна: эмоциональный провал из-за клиентского «это совершенно не то», приятное чувство, когда уже почти готово и полируете результат (это ловушка!), удовлетворение от завершения работы, чувство причастности, когда кто-то пользуется результатом вашего труда и хвалит его;
— AI повышает креативность, забирая простые задачи (или помогая их автоматизировать вайбкодингом) и высвобождая человеческие ресурсы для задач посложнее. Может взглянуть на проблему под совершенно другим углом (AI для игры в Го);
— Чтобы прокачать креативность: читайте хорошую художественную литературу, общайтесь с непохожими на вас людьми, «набивайте коробочку» в том числе и не связанными с дизайном знаниями, повышайте планку вкуса;
— Попробуйте увидеть скрытые паттерны, по которым вы выполняете свою работу — свой модус операнди. Определив их, попробуйте нарушить;
— Давайте мозгу время переварить информацию и синтезировать идеи. Утро вечера мудренее, особенно, если вы уже не эффективны и хотите доделать просто чтобы поставить точку;
— Да и вообще работать надо по расписанию, не рассчитывая на появление музы. Но если муза пришла вне расписания, не гоните её;
— Если пришла идея, постарайтесь зафиксировать её полностью. Лучше черновик всей песни, который можно потом довести до ума, чем идеальный отрывок, который может вообще ни к чему потом не подойти (Рик Рубин);
— Результат работы продуктового дизайнера не будет выглядеть таким же креативным, как работа моушен-дизайнера. Но и у него найдутся свои ценители.
Видео, копии в моём блоге и Медиуме. #process
YouTube
Разговор о творчестве и дизайне
Антон Григорьев с Дмитрием Ваницким поговорили о творчестве и дизайне, творчестве в дизайне, креативности в жизни продуктового дизайнера, дизайне творческого процесса.
Основные тезисы и отредактированный транскрипт: https://habr.com/ru/articles/979342/
…
Основные тезисы и отредактированный транскрипт: https://habr.com/ru/articles/979342/
…
1❤14⚡2👍2🔥1
Forwarded from VanillaTime
Я тут задумался на ночь глядя: каково сейчас только входить в дизайн с самых низов? Сомневаюсь, что это также как начинать игру заново, создавая нового персонажа. Только если на уровне Nightmare.
Давайте честно: ситуация на рынке хреновая. Пока компании пытаются AI-зировать свой штат, найм джунов упал на 13%. И это при том, что значительного прироста продуктивности не наблюдается. Конкуренция дикая — на одну вакансию приходится перегрызть сотню глоток, а требования такие, будто вы должны были родиться сразу помазанником дизайна.
Синьорити-пирамида сплющивается: опытные специалисты растут в тайтлах, а краник со свежей кровью перекрыт. То есть скоро все вырастут в лидов, а нового поколения тютю, нету. Через пару-тройку-пятерку лет рынок взвоет от нехватки синьоров, ибо им неоткуда будет взяться, а прямо сейчас мы в зоне турбулентности.
И я задумался, что бы я делал, если бы сегодня решил стать дизайнером с нуля? Наверное, я бы не ждал милости от рынка, а действовал бы так:
1. Принял решение: оно мне вообще надо?💡
Я бы сел и честно ответил себе — готов ли я пахать как конь, пока не стану полезнее нейросети и тысячи таких же «хочу в IT»? Это больше не прогулка за легкими деньгами. Это марафон на выживание. Либо ты педалируешь до конца, либо тебя раздавит посередине. Третьего не дано.
2. Закопался бы в базу, а не гнался бы за трендами.⭐️
Пока все полируют портфели на Behance (что тоже важно), я бы сконцентрировался на том, чтобы что-то из себя предоставлять. Учил бы базу — вот эти скучные труды, которые типа всем надоели. Читал бы книги, а не короткие статьи-выжимки. А как понять что? Я бы заставил AI составить мне жесткий learning path по фундаментальной теории и практике проектирования. Глубокое понимание психологии и принципов, описанных десятки лет назад, — это то, что отличает дизайнера от «нейронной повторяшки».
3. Послал бы нахер курсы.😡
Если вам нужна внешняя мотивация, куратор и поглаживание по голове, чтобы начать учиться — вы долго не протянете. В нынешних условиях выживают только те, у кого моторчик внутри, в желательно на высокооктановом ракетном топливе. Самообразование — единственный путь к уникальности.
4. Не ждал бы работу, а придумывал её.💭
Я бы перестал слать пустые отклики на вакансии. Я бы искал проблемы вокруг, ставил эксперименты, собирал прототипы и проверял их на людях. Быть «микро-фаундером» своего маленького продукта или фичи — это лучший способ показать, что ты понимаешь, как работает бизнес и чего хочет пользователь, а не просто умеешь красить кнопки.
5. Заводил бы знакомства, а не инвайты.📇
Пустые стуки в LinkedIn — это спам. Я бы шел туда, где говорят профи: смотрел доклады, читал кейсы и писал авторам. Не с просьбой «стань моим ментором», а с конкретными, глубокими вопросами по их решениям. Перенимание живого опыта через диалог — это самый быстрый лифт в индустрии.
Итог: Я ставлю на тех, кто инвестирует в свои мозги сейчас, но до конца дойдут точно не все. Время покажет, кто был прав, но ждать оффера «за красивые глаза» сегодня — это путь в никуда.
Работаем.
Давайте честно: ситуация на рынке хреновая. Пока компании пытаются AI-зировать свой штат, найм джунов упал на 13%. И это при том, что значительного прироста продуктивности не наблюдается. Конкуренция дикая — на одну вакансию приходится перегрызть сотню глоток, а требования такие, будто вы должны были родиться сразу помазанником дизайна.
Синьорити-пирамида сплющивается: опытные специалисты растут в тайтлах, а краник со свежей кровью перекрыт. То есть скоро все вырастут в лидов, а нового поколения тютю, нету. Через пару-тройку-пятерку лет рынок взвоет от нехватки синьоров, ибо им неоткуда будет взяться, а прямо сейчас мы в зоне турбулентности.
И я задумался, что бы я делал, если бы сегодня решил стать дизайнером с нуля? Наверное, я бы не ждал милости от рынка, а действовал бы так:
1. Принял решение: оно мне вообще надо?
Я бы сел и честно ответил себе — готов ли я пахать как конь, пока не стану полезнее нейросети и тысячи таких же «хочу в IT»? Это больше не прогулка за легкими деньгами. Это марафон на выживание. Либо ты педалируешь до конца, либо тебя раздавит посередине. Третьего не дано.
2. Закопался бы в базу, а не гнался бы за трендами.
Пока все полируют портфели на Behance (что тоже важно), я бы сконцентрировался на том, чтобы что-то из себя предоставлять. Учил бы базу — вот эти скучные труды, которые типа всем надоели. Читал бы книги, а не короткие статьи-выжимки. А как понять что? Я бы заставил AI составить мне жесткий learning path по фундаментальной теории и практике проектирования. Глубокое понимание психологии и принципов, описанных десятки лет назад, — это то, что отличает дизайнера от «нейронной повторяшки».
3. Послал бы нахер курсы.
Если вам нужна внешняя мотивация, куратор и поглаживание по голове, чтобы начать учиться — вы долго не протянете. В нынешних условиях выживают только те, у кого моторчик внутри, в желательно на высокооктановом ракетном топливе. Самообразование — единственный путь к уникальности.
4. Не ждал бы работу, а придумывал её.
Я бы перестал слать пустые отклики на вакансии. Я бы искал проблемы вокруг, ставил эксперименты, собирал прототипы и проверял их на людях. Быть «микро-фаундером» своего маленького продукта или фичи — это лучший способ показать, что ты понимаешь, как работает бизнес и чего хочет пользователь, а не просто умеешь красить кнопки.
5. Заводил бы знакомства, а не инвайты.
Пустые стуки в LinkedIn — это спам. Я бы шел туда, где говорят профи: смотрел доклады, читал кейсы и писал авторам. Не с просьбой «стань моим ментором», а с конкретными, глубокими вопросами по их решениям. Перенимание живого опыта через диалог — это самый быстрый лифт в индустрии.
Итог: Я ставлю на тех, кто инвестирует в свои мозги сейчас, но до конца дойдут точно не все. Время покажет, кто был прав, но ждать оффера «за красивые глаза» сегодня — это путь в никуда.
Работаем.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤40🥱8🔥6👨💻5👍4👏2
🎄С Новым годом, друзья!
В этом году опубликовал 126 постов — 201к символов суммарно (1,6к в среднем на пост). Они получили 646к просмотров (5,1к в среднем), 4,2к реакций (33 в среднем), из которых отрицательными были 6%, 9,1к пересылок (72 в среднем).
— Самый длинный пост — тезисы из разговора с Дмитрием Ваницким о творчестве и дизайне (пришлось разбить на 2 поста);
— Самый просматриваемый — как говорить о повышении зарплаты;
— Самый залайканный — репост заметки Вовы Зимина о том, что продуктовые дизайнеры заебали;
— Самый залайканный, если исключить репосты, и одновременно с этим самый смешной — картинка из UX Notes образца 2014 года;
— Самый задислайканный (одновременно с этим самый вовлекающий) — о повышении эффективности работы продуктовых дизайнеров;
— Самый комментируемый — предложение поделиться в комментариях каналом, который может быть интересен читателям UX Notes;
— Самый пересылаемый — гайд для начинающих по Фигме: слои, автолейауты, ограничители, стили, компоненты и варианты.
Собрать статистику, которой нет даже в ТГСтате, помог «Канал нормального фрилансера».
В этом году опубликовал 126 постов — 201к символов суммарно (1,6к в среднем на пост). Они получили 646к просмотров (5,1к в среднем), 4,2к реакций (33 в среднем), из которых отрицательными были 6%, 9,1к пересылок (72 в среднем).
— Самый длинный пост — тезисы из разговора с Дмитрием Ваницким о творчестве и дизайне (пришлось разбить на 2 поста);
— Самый просматриваемый — как говорить о повышении зарплаты;
— Самый залайканный — репост заметки Вовы Зимина о том, что продуктовые дизайнеры заебали;
— Самый залайканный, если исключить репосты, и одновременно с этим самый смешной — картинка из UX Notes образца 2014 года;
— Самый задислайканный (одновременно с этим самый вовлекающий) — о повышении эффективности работы продуктовых дизайнеров;
— Самый комментируемый — предложение поделиться в комментариях каналом, который может быть интересен читателям UX Notes;
— Самый пересылаемый — гайд для начинающих по Фигме: слои, автолейауты, ограничители, стили, компоненты и варианты.
Собрать статистику, которой нет даже в ТГСтате, помог «Канал нормального фрилансера».
Telegram
UX Notes
Мы с Дмитрием Ваницким поговорили о творчестве и дизайне, и креативности в жизни продуктового дизайнера. В UX Notes был анонс трансляции, теперь можно прочитать отредактированный транскрипт и посмотреть запись. А вот основные тезисы:
— Дизайн, как и другая…
— Дизайн, как и другая…
☃10🍾5👍4🔥2🎄1
20 самых популярных постов UX Notes в 2025 году в Телеграме:
1. Маша Русскова поделилась выводами из исследований текста в интерфейсе. +76 (очевидно позитивные реакции минус очевидно негативные)
2. Влад Крят написал об оформлении макетов. +64
3. Михаил Нежник подготовил для начинающих гайд по Фигме: слои, автолейауты, ограничители, стили, компоненты и варианты. +63
4. Юля Кондратьева написала, как помочь пользователю ждать. +61
5. Владимир Павлов написал об обманчивости метрик. +52
6. Вика Лисицына написала, должен ли дизайнер быть немного продактом. +50
7. Влада провалила вайтборд и написала о своих ошибках. +47
8. Виктор Теплов рассказал, как работать с иконками в Фигме. +46
9. Виктория Друзенко написала о прокачке UI. +45
10. Никита Самутин и Елизавета Демченко провели исследование рынка продуктового дизайна и поделились выводами. +45
11. Яна Георгиева написала о налаживании взаимодействия с разработчиками. +44
12. Станислав Хрусталёв прошёлся по ошибкам в отображении рейтинга товаров. +42
13. Илья Бирман написал о замедлении интерфейса. +42
14. Захар Бернадский написал о передаче цветовых токенов разработчикам приложений и базовом наборе токенов. +39
15. Антон из X5 Tech написал о скелетонах. +39
16. Рамазан Нурулаев написал о дизайне таблиц для цеха. +37
17. Илья Бирман написал о чекбоксах. +37
18. Женя Белодед поделился процессом и находками из исследования касс самообслуживания. +37
19. Дмитрий Ваницкий написал, как проектировать, чтобы вызывать и сохранять у пользователей состояние потока. +36
20. Анна Малинина написала об обработке ошибок при заполнении форм. +36
При равной оценке более вовлекающие посты — выше.
1. Маша Русскова поделилась выводами из исследований текста в интерфейсе. +76 (очевидно позитивные реакции минус очевидно негативные)
2. Влад Крят написал об оформлении макетов. +64
3. Михаил Нежник подготовил для начинающих гайд по Фигме: слои, автолейауты, ограничители, стили, компоненты и варианты. +63
4. Юля Кондратьева написала, как помочь пользователю ждать. +61
5. Владимир Павлов написал об обманчивости метрик. +52
6. Вика Лисицына написала, должен ли дизайнер быть немного продактом. +50
7. Влада провалила вайтборд и написала о своих ошибках. +47
8. Виктор Теплов рассказал, как работать с иконками в Фигме. +46
9. Виктория Друзенко написала о прокачке UI. +45
10. Никита Самутин и Елизавета Демченко провели исследование рынка продуктового дизайна и поделились выводами. +45
11. Яна Георгиева написала о налаживании взаимодействия с разработчиками. +44
12. Станислав Хрусталёв прошёлся по ошибкам в отображении рейтинга товаров. +42
13. Илья Бирман написал о замедлении интерфейса. +42
14. Захар Бернадский написал о передаче цветовых токенов разработчикам приложений и базовом наборе токенов. +39
15. Антон из X5 Tech написал о скелетонах. +39
16. Рамазан Нурулаев написал о дизайне таблиц для цеха. +37
17. Илья Бирман написал о чекбоксах. +37
18. Женя Белодед поделился процессом и находками из исследования касс самообслуживания. +37
19. Дмитрий Ваницкий написал, как проектировать, чтобы вызывать и сохранять у пользователей состояние потока. +36
20. Анна Малинина написала об обработке ошибок при заполнении форм. +36
При равной оценке более вовлекающие посты — выше.
Telegram
UX Notes
Маша Русскова поделилась выводами из исследований текста в интерфейсе.
— За одно посещение веб-страницы люди в среднем успевают прочитать не более 28% слов;
— При средней длине предложения в 14 слов читатели понимают 90% написанного. Наш предел — 25 слов;…
— За одно посещение веб-страницы люди в среднем успевают прочитать не более 28% слов;
— При средней длине предложения в 14 слов читатели понимают 90% написанного. Наш предел — 25 слов;…
5❤15👍4🔥2❤🔥1🤝1
Дмитрий Сергушкин написал об окнах подтверждения действий.
— Такое окно прерывает сценарий, чтобы пользователь дополнительно подумал о совершаемом действии и избежал ошибки;
— Это полезно, если действие необратимо, ведёт к серьёзным последствиям (финансовые транзакции) или эффекту домино (влияет на множество связанных объектов), совершается редко (и пользователь не помнит всех последствий) или требует явного согласия;
— В остальных случаях, а также для частых действий его лучше не использовать, чтобы пользователь не стал подтверждать всё на автомате;
— Если возможно, лучше сделать действие обратимым и сразу показывать результат его выполнения, чтобы пользователь мог отреагировать;
— Также можно уменьшить потребность в окнах подтверждения, отделяя серьёзные действия от остальных и разделяя их запуск на несколько шагов;
— В заголовке пишите, что пользователь собирается сделать: «Удалить ваш аккаунт навсегда?»;
— На кнопках — конкретные действия: «Удалить аккаунт», «Оставить аккаунт»;
— Добавьте визуальные подсказки вроде иконки корзины или красного цвета кнопки, подтверждающей деструктивное действие;
— Для критически важных действий можно добавить препятствие вроде поля, в которое надо, например, ввести название удаляемого пространства или слово «Delete»;
— Есть приём «Hold to confirm», когда для подтверждения действия надо нажать на кнопку и удерживать её нажатой;
— Можно показывать окна подтверждения только при обнаружении аномалий вроде необычной суммы транзакции или получателя.
In English. #modal
— Такое окно прерывает сценарий, чтобы пользователь дополнительно подумал о совершаемом действии и избежал ошибки;
— Это полезно, если действие необратимо, ведёт к серьёзным последствиям (финансовые транзакции) или эффекту домино (влияет на множество связанных объектов), совершается редко (и пользователь не помнит всех последствий) или требует явного согласия;
— В остальных случаях, а также для частых действий его лучше не использовать, чтобы пользователь не стал подтверждать всё на автомате;
— Если возможно, лучше сделать действие обратимым и сразу показывать результат его выполнения, чтобы пользователь мог отреагировать;
— Также можно уменьшить потребность в окнах подтверждения, отделяя серьёзные действия от остальных и разделяя их запуск на несколько шагов;
— В заголовке пишите, что пользователь собирается сделать: «Удалить ваш аккаунт навсегда?»;
— На кнопках — конкретные действия: «Удалить аккаунт», «Оставить аккаунт»;
— Добавьте визуальные подсказки вроде иконки корзины или красного цвета кнопки, подтверждающей деструктивное действие;
— Для критически важных действий можно добавить препятствие вроде поля, в которое надо, например, ввести название удаляемого пространства или слово «Delete»;
— Есть приём «Hold to confirm», когда для подтверждения действия надо нажать на кнопку и удерживать её нажатой;
— Можно показывать окна подтверждения только при обнаружении аномалий вроде необычной суммы транзакции или получателя.
In English. #modal
uprock.webflow.io
Проектируем окна подтверждения действий: лучшие практики — читайте на UPROCK
Диалоговые окна подтверждения — больше, чем просто всплывающие окна, это инструмент укрепления доверия и защиты. В статье мы рассмотрим, как проектировать их целенаправленно: когда их применять (а когда нет), как не раздражать пользователей и как создавать…
1👍13❤7🔥2❤🔥1
Игорь написал об адаптации интерфейса android-приложения под увеличенный системный шрифт.
— Кроме размера системного шрифта на размер текста также влияет масштабирование экрана;
— Можно увеличить Display size и тогда, например, квадрат со стороной 48 dp будет отрисовываться не 132 физическими пикселями, а 144 (и станет больше);
— Комбинирование настроек может сделать важную информацию недоступной или ухудшить впечатление от интерфейса. В продукте Игоря 45% пользователей увеличивают текст;
— Текст можно обрезать: в начале, середине или конце. Скрытая часть заменяется многоточием;
— Можно сократить: заменить 99 000 000 на 99 млн. Но это не вариант там, где важна точность;
— Бегущая строка считается антипаттерном и применяется редко, если остальные способы не подходят;
— Перенос строк — через атрибут android:breakStrategy можно указать способ разбивки текста. Важно убедиться, что контейнер с текстом подстраивается под высоту контента;
— Авторазмер текста — текст меняет размер в зависимости от доступного пространства. Можно задать минимальное и максимальное значение, а также шаг изменения;
— Также можно добавить прокрутку внутри контейнера или вовсе использовать динамическую вёрстку, когда расположение элементов зависит от отображаемой информации;
— Приложение может вовсе запрещать увеличивать текст (это, конечно, ухудшает пользовательский опыт), либо делать это в собственных настройках (Телеграм);
— Это менее удобно пользователям и идёт вразрез с рекомендациями Material Design, но даёт разработчикам больше контроля и обеспечивает единообразие на разных устройствах.
#font #accessibility
— Кроме размера системного шрифта на размер текста также влияет масштабирование экрана;
— Можно увеличить Display size и тогда, например, квадрат со стороной 48 dp будет отрисовываться не 132 физическими пикселями, а 144 (и станет больше);
— Комбинирование настроек может сделать важную информацию недоступной или ухудшить впечатление от интерфейса. В продукте Игоря 45% пользователей увеличивают текст;
— Текст можно обрезать: в начале, середине или конце. Скрытая часть заменяется многоточием;
— Можно сократить: заменить 99 000 000 на 99 млн. Но это не вариант там, где важна точность;
— Бегущая строка считается антипаттерном и применяется редко, если остальные способы не подходят;
— Перенос строк — через атрибут android:breakStrategy можно указать способ разбивки текста. Важно убедиться, что контейнер с текстом подстраивается под высоту контента;
— Авторазмер текста — текст меняет размер в зависимости от доступного пространства. Можно задать минимальное и максимальное значение, а также шаг изменения;
— Также можно добавить прокрутку внутри контейнера или вовсе использовать динамическую вёрстку, когда расположение элементов зависит от отображаемой информации;
— Приложение может вовсе запрещать увеличивать текст (это, конечно, ухудшает пользовательский опыт), либо делать это в собственных настройках (Телеграм);
— Это менее удобно пользователям и идёт вразрез с рекомендациями Material Design, но даёт разработчикам больше контроля и обеспечивает единообразие на разных устройствах.
#font #accessibility
Хабр
Мир доступного дизайна: как увеличить шрифт и не сломать UI?
Сегодня мобильными приложениями активно пользуются не только молодёжь, но и представители старших поколений, количество которых непрерывно растёт ( Pew Research Center ). Чаще всего именно эти...
❤8👍2
Светлана Диденко написала о требованиях российских законов к интерфейсам российских веб-сервисов.
— Нельзя использовать иностранные сервисы для авторизации. При входе по номеру телефона допускаются только российские операторы связи;
— Если у вас подписка с ежемесячным списанием, информация об этом должна быть в форме подписки, включая сумму и дату следующего списания;
— Кнопка отмены подписки должна быть такой же заметной, как и форма подписки;
— Если у вас есть поле ввода (подписка на рассылку, онлайн-чат), владелец сайта становится оператором данных и должен иметь политику конфиденциальности;
— В ней должна быть обоснованы все собираемые данные. Спрашиваете в форме дату рождения — обоснуйте, зачем;
— Ссылка на неё должна находиться в одном визуальном блоке с кнопкой отправки формы. Она должна быть доступной даже при открытой визуальной клавиатуре;
— Согласие на обработку персональных данных пользователь должен давать осознанным действием — включив изначально выключенный чекбокс;
— Для каждой цели обработки данных (регистрация, рекламная рассылка) нужен свой чекбокс;
— Текстовая подпись к чекбоксу должна содержать ссылку на согласие;
— Скрипты отслеживания должны активироваться только после нажатия на кнопку «Принять» в попапе, сообщающем о кукисах;
— Этот попап не должен блокировать доступ к основному контенту;
— Реквизиты компании (ИНН, ОГРН, наименование организации) должны быть текстом, чтобы их было легко скопировать для проверки;
— Информация о продавце должна быть в оферте, подвале и на странице с контактами.
#laws
— Нельзя использовать иностранные сервисы для авторизации. При входе по номеру телефона допускаются только российские операторы связи;
— Если у вас подписка с ежемесячным списанием, информация об этом должна быть в форме подписки, включая сумму и дату следующего списания;
— Кнопка отмены подписки должна быть такой же заметной, как и форма подписки;
— Если у вас есть поле ввода (подписка на рассылку, онлайн-чат), владелец сайта становится оператором данных и должен иметь политику конфиденциальности;
— В ней должна быть обоснованы все собираемые данные. Спрашиваете в форме дату рождения — обоснуйте, зачем;
— Ссылка на неё должна находиться в одном визуальном блоке с кнопкой отправки формы. Она должна быть доступной даже при открытой визуальной клавиатуре;
— Согласие на обработку персональных данных пользователь должен давать осознанным действием — включив изначально выключенный чекбокс;
— Для каждой цели обработки данных (регистрация, рекламная рассылка) нужен свой чекбокс;
— Текстовая подпись к чекбоксу должна содержать ссылку на согласие;
— Скрипты отслеживания должны активироваться только после нажатия на кнопку «Принять» в попапе, сообщающем о кукисах;
— Этот попап не должен блокировать доступ к основному контенту;
— Реквизиты компании (ИНН, ОГРН, наименование организации) должны быть текстом, чтобы их было легко скопировать для проверки;
— Информация о продавце должна быть в оферте, подвале и на странице с контактами.
#laws
vc.ru
Legal Design 2026: Новые стандарты интерфейсов и юридическая ответственность дизайнера
Начало 2026 года ознаменовало окончательный переход веб-дизайна из категории визуального искусства в сферу правового регулирования. Вступившие в силу законодательные нормы и завершение переходных периодов по ряду федеральных законов трансформировали требования…
👍23❤12🤡6🖕4🔥2
Новые материалы в @uxwork (кроме вакансий):
— Что делать, чтобы работники-зумеры не уходили из вашей команды;
— Поиск работы, когда ты давно в дизайне и есть управленческие позиции в резюме;
— Основные уроки из книги Криса Восса о переговорах «Договориться не проблема»;
— Поиск работы со стороны нанимающего менеджера.
— Что делать, чтобы работники-зумеры не уходили из вашей команды;
— Поиск работы, когда ты давно в дизайне и есть управленческие позиции в резюме;
— Основные уроки из книги Криса Восса о переговорах «Договориться не проблема»;
— Поиск работы со стороны нанимающего менеджера.
Telegram
UX Work
Амиран Карацев написал, что делать, чтобы работники-зумеры не уходили из вашей команды.
— В основном молодые специалисты сейчас — зумеры. Принято считать, что они не хотят работать. Проблема в том, что именно они (зачастую впервые в жизни) сталкиваются с…
— В основном молодые специалисты сейчас — зумеры. Принято считать, что они не хотят работать. Проблема в том, что именно они (зачастую впервые в жизни) сталкиваются с…
❤4
Александр Овчаренко написал о проектировании физических панелей управления.
— Смотреть на чужие решения на картинках недостаточно, надо взаимодействовать с ними. Трогайте устройства предыдущих поколений, синтезаторы и MIDI-контроллеры в музыкальных магазинах, панели в автомобилях и яхтах. Требуйте от начальства оплаты посещения выставок;
— У каждого элемента есть невидимая часть, находящаяся под поверхностью панели, со своими габаритами и идущими к ней проводами. Это влияет на их расположение;
— Место под поверхностью панели занимает печатная плата, сама панель может крепиться разными способами. Из-за этого могут появиться места, где нельзя размещать контроллеры;
— Габариты часто зависят от внешних факторов. Например, от размера предыдущей версии панели, чтобы можно было одну заменить на другую;
— Компоновка согласно эргономическим и пользовательским требованиям → Совместно с инженерами приближенная к реальности версия;
— Делайте физические прототипы из картона и бумаги или с помощью 3D-принтера, чтобы получить объёмность макета в реальном размере;
— Для оценки выбора положения и размера поворотных ручек подходят любые крышки (от газировки, зубной пасты). Они сделаны так, чтобы было удобно крутить, что лучше любых абстрактных цилиндров;
— Подойдут ручки и колпачки с другого оборудования. Главное, не приклеивать намертво;
— Если панель предполагает наличие типовой клавиатуры или трекбола, в картонной основе можно сделать вырез для них и вставить заподлицо;
— Цена ошибки высока: панель даже из типовых компонентов часто дороже сенсорного экрана с HMI;
— Внимательнее относитесь к крайним случаям использования панели, так как элементы управления статичны;
— Настаивайте на участии в предпроизводственных этапах. Инженеры могут что-то не так понять или отойти от вводных из-за объективных причин (запланированные энкодеры оказались недоступны).
#industrial
— Смотреть на чужие решения на картинках недостаточно, надо взаимодействовать с ними. Трогайте устройства предыдущих поколений, синтезаторы и MIDI-контроллеры в музыкальных магазинах, панели в автомобилях и яхтах. Требуйте от начальства оплаты посещения выставок;
— У каждого элемента есть невидимая часть, находящаяся под поверхностью панели, со своими габаритами и идущими к ней проводами. Это влияет на их расположение;
— Место под поверхностью панели занимает печатная плата, сама панель может крепиться разными способами. Из-за этого могут появиться места, где нельзя размещать контроллеры;
— Габариты часто зависят от внешних факторов. Например, от размера предыдущей версии панели, чтобы можно было одну заменить на другую;
— Компоновка согласно эргономическим и пользовательским требованиям → Совместно с инженерами приближенная к реальности версия;
— Делайте физические прототипы из картона и бумаги или с помощью 3D-принтера, чтобы получить объёмность макета в реальном размере;
— Для оценки выбора положения и размера поворотных ручек подходят любые крышки (от газировки, зубной пасты). Они сделаны так, чтобы было удобно крутить, что лучше любых абстрактных цилиндров;
— Подойдут ручки и колпачки с другого оборудования. Главное, не приклеивать намертво;
— Если панель предполагает наличие типовой клавиатуры или трекбола, в картонной основе можно сделать вырез для них и вставить заподлицо;
— Цена ошибки высока: панель даже из типовых компонентов часто дороже сенсорного экрана с HMI;
— Внимательнее относитесь к крайним случаям использования панели, так как элементы управления статичны;
— Настаивайте на участии в предпроизводственных этапах. Инженеры могут что-то не так понять или отойти от вводных из-за объективных причин (запланированные энкодеры оказались недоступны).
#industrial
❤11👍7🔥1
Анна Труфанова поделилась рекомендациями по дизайну интерфейсов для цеха.
— Тёмная тема — стандарт безопасности, так как не слепит оператора;
— Начертания Light и Regular на цеховых мониторах рассыпаются. Только Medium и Bold;
— Для цифр используйте моноширинный шрифт;
— Интерфейс в цеху — набор датчиков. Оператор должен считывать их за доли секунды, видеть критические показатели периферическим зрением. Для этого контраст делайте не 4,5:1, а 10:1 (ГОСТ Р ИСО 9241-303);
— Чтобы не перегружать пользователя и не приучать его игнорировать сигналы, интерфейс не должен начинать мигать красным при малейшем отклонении параметров. Не все отклонения одинаково критичны (ANSI/ISA-18.2);
— Дублируйте цветовое кодирование формой (ISO 9241), так как у 8% мужчин встречается дальтонизм. Красный треугольник — критическая авария, немедленная остановка. Жёлтый ромб — предупреждение, требуется внимание;
— Важна мышечная память. Не меняйте положения кнопок, особенно если их нажимают в аварийных ситуациях;
— Улучшайте эффективность через сокращение шагов: сохраните кнопку в привычном месте, но превратите 3 клика в 1;
— Всё для оперативного управления размещайте на расстоянии клика;
— Если датчик показывает проблему, интерфейс должен сам подтянуть кнопку действия в зону видимости;
— Располагайте ключевые индикаторы так, чтобы они попадали в естественную траекторию взгляда, а не в слепые зоны экрана.
#industrial
— Тёмная тема — стандарт безопасности, так как не слепит оператора;
— Начертания Light и Regular на цеховых мониторах рассыпаются. Только Medium и Bold;
— Для цифр используйте моноширинный шрифт;
— Интерфейс в цеху — набор датчиков. Оператор должен считывать их за доли секунды, видеть критические показатели периферическим зрением. Для этого контраст делайте не 4,5:1, а 10:1 (ГОСТ Р ИСО 9241-303);
— Чтобы не перегружать пользователя и не приучать его игнорировать сигналы, интерфейс не должен начинать мигать красным при малейшем отклонении параметров. Не все отклонения одинаково критичны (ANSI/ISA-18.2);
— Дублируйте цветовое кодирование формой (ISO 9241), так как у 8% мужчин встречается дальтонизм. Красный треугольник — критическая авария, немедленная остановка. Жёлтый ромб — предупреждение, требуется внимание;
— Важна мышечная память. Не меняйте положения кнопок, особенно если их нажимают в аварийных ситуациях;
— Улучшайте эффективность через сокращение шагов: сохраните кнопку в привычном месте, но превратите 3 клика в 1;
— Всё для оперативного управления размещайте на расстоянии клика;
— Если датчик показывает проблему, интерфейс должен сам подтянуть кнопку действия в зону видимости;
— Располагайте ключевые индикаторы так, чтобы они попадали в естественную траекторию взгляда, а не в слепые зоны экрана.
#industrial
Хабр
Правила выживания дизайнера на заводе: от Figma к ГОСТам
Пока вы спорите о скруглении углов в новой дизайн-системе и попиваете лавандовый раф, где-то в Челябинске ослепленный бликами от раскаленной стали оператор пытается разглядеть ваш элегантный серый...
👍31❤10🔥8⚡1❤🔥1
Саша поделился материалом о списке товаров в интернет-магазине из внутренней базы знаний студии KISLOROD.
— В списке товаров пользователь получает первую информацию о них. Фильтр, сортировка, теги с популярными запросами клиентов, доп. информация при наведении курсора помогают быстрее находить нужное, не перемещаясь на страницу товара;
— Карточка товара — компромисс между желанием показать больше параметров товара (разным людям важно разное при выборе) и уместить больше товаров на странице;
— В ней всегда должны быть универсальные характеристики товара: изображение (несколько переключающихся изображений), название (и тип), цена (и перечёркнутая старая, размер скидки), вариации товара (цвета, размеры, материалы);
— Изображения подбирайте с учётом специфики. Иногда надо показать товар в интерьере, разъёмы крупным планом, содержимое матраса в разрезе;
— В смешанных списках надо отображать тип товара. Название «Тинейджер» не говорит о том, что продаётся комплект детского постельного белья;
— Если товар продаётся упаковкой, для удобства сравнения показывайте также цену за штуку, за килограмм;
— Индивидуальные характеристики: рейтинг, совместимость с другими товарами («подходит для ноутбуков 15,6 дюйма»), размеры, рекомендации (на какой возраст ребёнка рассчитано), особые характеристики (для специфичных товаров), артикул;
— Рейтинг без количества оценок пользователи считают бесполезным. Он полезен в нишах, где сложно совладать с многообразием выбора (электроника, бытовая техника);
— Артикул полезен в нишах, где ищут конкретные модели;
— Где возможно, чтобы не перегружать карточки, заменяйте текст на понятные иконки, не пишите названия характеристик. В карточке бутылки вина понятно, что «0,7 л» — объём бутылки;
— Функция быстрого просмотра — зачастую лишь костыль для магазинов с плохой реализацией списка товаров. Надо кликнуть, дождаться загрузки модального окна. Иногда его принимают за страницу товара (и не находят там нужных параметров);
— Выделяйте в списке просмотренные товары (удобнее продолжить поиск при возвращении к списку товаров) и добавленные в корзину (чтобы найти совместимые товары, не покидая список).
#list
— В списке товаров пользователь получает первую информацию о них. Фильтр, сортировка, теги с популярными запросами клиентов, доп. информация при наведении курсора помогают быстрее находить нужное, не перемещаясь на страницу товара;
— Карточка товара — компромисс между желанием показать больше параметров товара (разным людям важно разное при выборе) и уместить больше товаров на странице;
— В ней всегда должны быть универсальные характеристики товара: изображение (несколько переключающихся изображений), название (и тип), цена (и перечёркнутая старая, размер скидки), вариации товара (цвета, размеры, материалы);
— Изображения подбирайте с учётом специфики. Иногда надо показать товар в интерьере, разъёмы крупным планом, содержимое матраса в разрезе;
— В смешанных списках надо отображать тип товара. Название «Тинейджер» не говорит о том, что продаётся комплект детского постельного белья;
— Если товар продаётся упаковкой, для удобства сравнения показывайте также цену за штуку, за килограмм;
— Индивидуальные характеристики: рейтинг, совместимость с другими товарами («подходит для ноутбуков 15,6 дюйма»), размеры, рекомендации (на какой возраст ребёнка рассчитано), особые характеристики (для специфичных товаров), артикул;
— Рейтинг без количества оценок пользователи считают бесполезным. Он полезен в нишах, где сложно совладать с многообразием выбора (электроника, бытовая техника);
— Артикул полезен в нишах, где ищут конкретные модели;
— Где возможно, чтобы не перегружать карточки, заменяйте текст на понятные иконки, не пишите названия характеристик. В карточке бутылки вина понятно, что «0,7 л» — объём бутылки;
— Функция быстрого просмотра — зачастую лишь костыль для магазинов с плохой реализацией списка товаров. Надо кликнуть, дождаться загрузки модального окна. Иногда его принимают за страницу товара (и не находят там нужных параметров);
— Выделяйте в списке просмотренные товары (удобнее продолжить поиск при возвращении к списку товаров) и добавленные в корзину (чтобы найти совместимые товары, не покидая список).
#list
Хабр
Оформление листинга и превью товаров в интернет-магазине: 7 ключевых правил UX
Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их...
👍11❤6🔥3
Forwarded from Как быть дизайнером
Как показывать визуал в портфолио?
Бывает, смотришь портфолио с продуктовыми кейсами, там внутри гипотезы, тесты, анализ — гора полезной инфы, но вот визуально изменения не радикальные.
Будем честны, редко какая задача в продукте (особенно внутреннем, сервисном или b2b) обладает зрелищным дизайном. Чаще наоборот — постороннему наблюдателю нужно еще наловчиться, чтобы понять, а что здесь визуально изменилось.
А кроме того, непонятно, где заслуги и косяки дизайнера, а где дизайн-система. Может, из неё тянется легаси пятилетней давности — стрёмные тени, лишние дивайдеры, грязноватые цвета, которые дизайнер не убирает, потому что весь продукт надо перевозить на другую версию.
Ну, бывает, все там были.
Для дизайнера загвоздка в том, что собеседующий лид точно будет оценивать визуал. Даже если он нулевой или практически отсутствующий. Даже если речь о продукте, где не требуется классный UI, а надо просто уметь чисто сверстать таблицу или модуль.
Лиду надо понять, что умеет кандидат с ограничениями и без них, к чему у него лежит душа и подойдет ли навык работы с UI в конкретном продукте.
🤩
На такой случай есть универсальный совет: соберите скрины с наиболее удачным и показательным UI на отдельной странице и назовите её «Визуал».
Пусть там не будет юзкейсов и полезного действия — просто скрины. Удачные варианты вёрстки модулей, примеры иконок, которые вы рисовали, концепты, не дошедшие до прода, но демонстрирующие ваши навыки без привязки к легаси-решениям, да и просто красивые маленькие детали.
У каждого продуктового дизайнера найдется хотя бы три-четыре приятных скрина, которыми он гордится (а если пока не находится ни одного, это повод что-то изменить в своей работе). Иногда для единообразия достаточно посадить скрины на однотонные светлые плашки, а иногда можно и без этого — будет уже красиво.
Это ход win-win: и дизайнеру хорошо, и нанимающему лиду понятно, и занимает минимум времени.
Бывает, смотришь портфолио с продуктовыми кейсами, там внутри гипотезы, тесты, анализ — гора полезной инфы, но вот визуально изменения не радикальные.
Будем честны, редко какая задача в продукте (особенно внутреннем, сервисном или b2b) обладает зрелищным дизайном. Чаще наоборот — постороннему наблюдателю нужно еще наловчиться, чтобы понять, а что здесь визуально изменилось.
А кроме того, непонятно, где заслуги и косяки дизайнера, а где дизайн-система. Может, из неё тянется легаси пятилетней давности — стрёмные тени, лишние дивайдеры, грязноватые цвета, которые дизайнер не убирает, потому что весь продукт надо перевозить на другую версию.
Ну, бывает, все там были.
Для дизайнера загвоздка в том, что собеседующий лид точно будет оценивать визуал. Даже если он нулевой или практически отсутствующий. Даже если речь о продукте, где не требуется классный UI, а надо просто уметь чисто сверстать таблицу или модуль.
Лиду надо понять, что умеет кандидат с ограничениями и без них, к чему у него лежит душа и подойдет ли навык работы с UI в конкретном продукте.
На такой случай есть универсальный совет: соберите скрины с наиболее удачным и показательным UI на отдельной странице и назовите её «Визуал».
Пусть там не будет юзкейсов и полезного действия — просто скрины. Удачные варианты вёрстки модулей, примеры иконок, которые вы рисовали, концепты, не дошедшие до прода, но демонстрирующие ваши навыки без привязки к легаси-решениям, да и просто красивые маленькие детали.
У каждого продуктового дизайнера найдется хотя бы три-четыре приятных скрина, которыми он гордится (а если пока не находится ни одного, это повод что-то изменить в своей работе). Иногда для единообразия достаточно посадить скрины на однотонные светлые плашки, а иногда можно и без этого — будет уже красиво.
Это ход win-win: и дизайнеру хорошо, и нанимающему лиду понятно, и занимает минимум времени.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤33👍14
Андрей Богданов написал книгу «Дизайн-стройка. Как создать команду мечты за 90 дней», и вот что там было о ревью макетов лидом и другими дизайнерами:
— Созваниваться с дизайнером и вместе пробегаться по макетам оказалось плохой идеей;
— Если макеты оформлены плохо, дизайнер может их пояснить, но всем остальным придётся иметь дело с непонятным артефактом;
— Непроработанные ветки сценариев, корнер-кейсы, используемые компоненты во время беседы выпадают из фокуса внимания;
— Из-за невозможности как следует подумать рекомендации иногда получаются необдуманными;
— В некоторых компаниях встречается кросс-ревью (дизайн-чек в Альфа-Банке), когда макеты смотрит не лид, а другие дизайнеры (в том числе из других команд);
— Эта практика позволяет разгрузить лида и прокачать навыки ревью у дизайнеров;
— Но она не должна замещать ревью дизайн-лида, так как последний отвечает за качество дизайна в своей команде. Без ревью он теряет связь с продуктом и выпадает из контекста;
— Если будете внедрять кросс-ревью, подумайте, как обеспечить ответственный подход ситуативных ревьюеров и разумный контроль со стороны лида.
#design_check #management #book
— Созваниваться с дизайнером и вместе пробегаться по макетам оказалось плохой идеей;
— Если макеты оформлены плохо, дизайнер может их пояснить, но всем остальным придётся иметь дело с непонятным артефактом;
— Непроработанные ветки сценариев, корнер-кейсы, используемые компоненты во время беседы выпадают из фокуса внимания;
— Из-за невозможности как следует подумать рекомендации иногда получаются необдуманными;
— В некоторых компаниях встречается кросс-ревью (дизайн-чек в Альфа-Банке), когда макеты смотрит не лид, а другие дизайнеры (в том числе из других команд);
— Эта практика позволяет разгрузить лида и прокачать навыки ревью у дизайнеров;
— Но она не должна замещать ревью дизайн-лида, так как последний отвечает за качество дизайна в своей команде. Без ревью он теряет связь с продуктом и выпадает из контекста;
— Если будете внедрять кросс-ревью, подумайте, как обеспечить ответственный подход ситуативных ревьюеров и разумный контроль со стороны лида.
#design_check #management #book
Литрес
Дизайн-стройка. Как создать команду мечты за 90 дней — Андрей Богданов | Литрес
Эта книга — о том, как построить крепкую дизайн-команду. Автор — Андрей Богданов, дизайн-менеджер с опытом работы в МТС Финтех, ВТБ и Сбере — рассказывает, как успешно пройти все этапы создания коман…
👍15❤3❤🔥1
Илья Бирман написал о кнопке «На главную» в пустом состоянии списка.
— К списку актов (и другим подобным разделам) пользователь переходит с помощью обычной навигации приложения;
— Она включает возможность перехода на главный экран и в другие разделы;
— Неправильно менять привычный навигационный паттерн из-за содержания конкретного экрана. Кнопка «На главную» не нужна;
— Если пустой список актов отображается из-за какой-то проблемы, то этот экран фактически — сообщение об ошибке;
— Хорошее сообщение об ошибке должно помогать её решить. В данном случае была бы уместна кнопка «Обновить» или «Запросить заново».
#error #empty_state
— К списку актов (и другим подобным разделам) пользователь переходит с помощью обычной навигации приложения;
— Она включает возможность перехода на главный экран и в другие разделы;
— Неправильно менять привычный навигационный паттерн из-за содержания конкретного экрана. Кнопка «На главную» не нужна;
— Если пустой список актов отображается из-за какой-то проблемы, то этот экран фактически — сообщение об ошибке;
— Хорошее сообщение об ошибке должно помогать её решить. В данном случае была бы уместна кнопка «Обновить» или «Запросить заново».
#error #empty_state
Бюро Горбунова
Кнопка‑заглушка
В чём различие этих двух экранов? Почему один плохой, а другой хороший? Почему один — имитация заботы, а второй — реальная забота о пользователе?
❤19👍4🙏1
Ольга Свистунова написала, как работают UX-редакторы в Госуслугах и каких правил придерживаются.
— Метрики: доля незаконченных заявлений, доля отказов ведомств предоставить услуги, среднее время заполнения заявлений, число обращений в поддержку, процент дизлайков к ответам на частые вопросы, CSI после получения услуг;
— Полезные вопросы: не разъясняет ли текст очевидные вещи, нет ли в нём избыточности и повторов, не потерялся ли смысл после редактуры, не пропал ли нужный для понимания контекст;
— Важно понимать, кто его будет читать. Например, несовершеннолетним пользователям стоит напомнить о получении согласия законного представителя;
— Любой текст подчиняется редполитике. В ней есть словарь терминов, чтобы не путать пользователей синонимами одного и того же понятия;
— Достижению единообразия также способствует коллекция шаблонов. Шаблоны и редполитику верифицирует правительственная комиссия, что помогает убеждать заказчиков: писать надо так, а не иначе;
— Краткость: длинные слова меняют на короткие, отглагольные существительные на глаголы, очищают текст от метафор, эвфемизмов, речевых штампов и вводных слов («наверное», «безусловно»);
— Пишут не в чём ошибка, а как должно быть: «Заполните поле», «Допустимы русские буквы и цифры»;
— Если действия необратимы, пишут, что произойдёт при нажатии на кнопку;
— Сложные юридические, технические и внутренние термины заменяют на понятные пользователю. Потенциально незнакомые аббревиатуры расшифровывают при первом упоминании;
— Ссылки ставят на слова, которые объясняют, куда ссылка приведёт. Например: «Подтверждённую биометрию регистрируют в центрах обслуживания»;
— Находящийся перед глазами текст должен быть понятен без контекста и ранее пройденного пути;
— Текст в кнопках однообразен, чтобы не путать: «Верно» (подтверждение данных), «Закрыть» (закрытие справочных попапов), «Продолжить» (переход к следующему экрану), «На главную»;
— Заголовок должен быть максимально информативен, так как часто пользователь внимательно читает только его. Заголовок должен быть связан по смыслу с кнопкой;
— В первую очередь пишут для большинства. Нет смысла погружать всех в нюансы, которые важны для небольшой категории людей или в нестандартных ситуациях;
— Поэтому можно не искать гендерно независимые формулировки, если услуга рассчитана в основном на женщин или мужчин;
— Фигма-плагин Text Prettier автоматически проставляет неразрывные пробелы, меняет «е» на «ё», "кавычки" на «ёлочки», дефис на тире и наоборот.
#writing
— Метрики: доля незаконченных заявлений, доля отказов ведомств предоставить услуги, среднее время заполнения заявлений, число обращений в поддержку, процент дизлайков к ответам на частые вопросы, CSI после получения услуг;
— Полезные вопросы: не разъясняет ли текст очевидные вещи, нет ли в нём избыточности и повторов, не потерялся ли смысл после редактуры, не пропал ли нужный для понимания контекст;
— Важно понимать, кто его будет читать. Например, несовершеннолетним пользователям стоит напомнить о получении согласия законного представителя;
— Любой текст подчиняется редполитике. В ней есть словарь терминов, чтобы не путать пользователей синонимами одного и того же понятия;
— Достижению единообразия также способствует коллекция шаблонов. Шаблоны и редполитику верифицирует правительственная комиссия, что помогает убеждать заказчиков: писать надо так, а не иначе;
— Краткость: длинные слова меняют на короткие, отглагольные существительные на глаголы, очищают текст от метафор, эвфемизмов, речевых штампов и вводных слов («наверное», «безусловно»);
— Пишут не в чём ошибка, а как должно быть: «Заполните поле», «Допустимы русские буквы и цифры»;
— Если действия необратимы, пишут, что произойдёт при нажатии на кнопку;
— Сложные юридические, технические и внутренние термины заменяют на понятные пользователю. Потенциально незнакомые аббревиатуры расшифровывают при первом упоминании;
— Ссылки ставят на слова, которые объясняют, куда ссылка приведёт. Например: «Подтверждённую биометрию регистрируют в центрах обслуживания»;
— Находящийся перед глазами текст должен быть понятен без контекста и ранее пройденного пути;
— Текст в кнопках однообразен, чтобы не путать: «Верно» (подтверждение данных), «Закрыть» (закрытие справочных попапов), «Продолжить» (переход к следующему экрану), «На главную»;
— Заголовок должен быть максимально информативен, так как часто пользователь внимательно читает только его. Заголовок должен быть связан по смыслу с кнопкой;
— В первую очередь пишут для большинства. Нет смысла погружать всех в нюансы, которые важны для небольшой категории людей или в нестандартных ситуациях;
— Поэтому можно не искать гендерно независимые формулировки, если услуга рассчитана в основном на женщин или мужчин;
— Фигма-плагин Text Prettier автоматически проставляет неразрывные пробелы, меняет «е» на «ё», "кавычки" на «ёлочки», дефис на тире и наоборот.
#writing
Хабр
UX-редактура на Госуслугах. Как мы пишем короткие тексты, чтобы их понимали
Интерфейсный контент на Госуслугах — это тексты в экранах услуг, мобильных приложениях и личном кабинете. Они подчиняются правилам Редполитики Госуслуг для всех остальных текстов: рассылок, лендингов,...
❤18👍7🤡5🔥3👀2❤🔥1👎1
Андрей Шапиро написал книгу о рабочих историях и карте реализации историй.
— Общее представление о них можно получить из опубликованной ранее статьи;
— В книге рассмотрены недостатки User stories, Job stories и некоторых других шаблонов (шаблон вопроса, похоже, используется в Модели информационных ожиданий «Собаки Павловой»);
— Например, они могут наводить на одно конкретное решение, которое часто оказывается неверным, так как задача ещё слабо изучена, либо проблема лишь подразумевается и формулируется в виде решения-кандидата;
— Оперировать альтернативами в разработке крайне важно, так как время и деньги ограничены, и непонятно, какое решение уложится в срок и бюджет;
— Они не описывают предметную область, что нередко приводит к последующему перепроектированию;
— Рабочая история как текстовая модель построена таким образом, чтобы этих недостатков избежать;
— Её состав: цель действия (зачем?), носитель (кто или что выполняет действие), ситуация (контекст, когда происходит действие), способ действия (каким образом что-то делается), объекты оперирования (с чем взаимодействует носитель, что получается в итоге);
— Кроме шаблона истории, инструкции по его заполнению, примеров из многолетней практики и разбора потенциальных ошибок при составлении историй в книге есть даже примеры бесед с заказчиком, в ходе которых история появляется и обрастает деталями;
— Карта реализации историй, подобно User story map, собирает все истории вместе и помогает увидеть всю картину, а также позволяет дополнить истории информацией о возможных формах их реализации (варианты технических решений) и составе блоков соответствующего интерфейса;
— Можно сначала записать «кнопку», которую хочет добавить стейкхолдер, и потом разобраться с её первопричиной и контекстом. Главное, чтобы все слои в конце концов оказались согласованы.
#user_story #book
— Общее представление о них можно получить из опубликованной ранее статьи;
— В книге рассмотрены недостатки User stories, Job stories и некоторых других шаблонов (шаблон вопроса, похоже, используется в Модели информационных ожиданий «Собаки Павловой»);
— Например, они могут наводить на одно конкретное решение, которое часто оказывается неверным, так как задача ещё слабо изучена, либо проблема лишь подразумевается и формулируется в виде решения-кандидата;
— Оперировать альтернативами в разработке крайне важно, так как время и деньги ограничены, и непонятно, какое решение уложится в срок и бюджет;
— Они не описывают предметную область, что нередко приводит к последующему перепроектированию;
— Рабочая история как текстовая модель построена таким образом, чтобы этих недостатков избежать;
— Её состав: цель действия (зачем?), носитель (кто или что выполняет действие), ситуация (контекст, когда происходит действие), способ действия (каким образом что-то делается), объекты оперирования (с чем взаимодействует носитель, что получается в итоге);
— Кроме шаблона истории, инструкции по его заполнению, примеров из многолетней практики и разбора потенциальных ошибок при составлении историй в книге есть даже примеры бесед с заказчиком, в ходе которых история появляется и обрастает деталями;
— Карта реализации историй, подобно User story map, собирает все истории вместе и помогает увидеть всю картину, а также позволяет дополнить истории информацией о возможных формах их реализации (варианты технических решений) и составе блоков соответствующего интерфейса;
— Можно сначала записать «кнопку», которую хочет добавить стейкхолдер, и потом разобраться с её первопричиной и контекстом. Главное, чтобы все слои в конце концов оказались согласованы.
#user_story #book
Литрес
Рабочие истории. Системное проектирование с Картой реализации историй — Андрей Шапиро | Литрес
В книге предложен авторский метод проектирования социотехнических систем, основанный на двух десятилетиях практического опыта. Описанный инструмент помогает выбраться из лабиринта неопределенности и …
❤4👍2❤🔥1
Татьяна Бублик написала об основах продуктовой колористики.
— Модель OKLCH удобнее RGB, так как сложно задавать цвет, меняя количество красного, зелёного и синего;
— Также она поддерживает расширенный набор цветов P3, что актуально для современных устройств, которые поддерживают на 30% больше цветов, чем есть в RGB;
— Стоит придерживаться схемы процентного соотношения цветов в продукте 3-17-80 (или её вариаций), где 3% — бренд-цвет для всех самых главных акцентов, 17% — остальные хроматические цвета, 80% — белый, чёрный и оттенки серого (ахроматические);
— Так акценты не будут теряться в макетах;
— В серый и чёрный можно подмешивать хрому бренд-цвета, чтобы усилить восприятие бренда, сделать их комфортнее и интереснее;
— Лайфхак: делать длинную тоновую растяжку (25–30 цветов). Это даст при любом изменении или масштабировании подобрать нужный тон.
Копия на Dsgners. #color
— Модель OKLCH удобнее RGB, так как сложно задавать цвет, меняя количество красного, зелёного и синего;
— Также она поддерживает расширенный набор цветов P3, что актуально для современных устройств, которые поддерживают на 30% больше цветов, чем есть в RGB;
— Стоит придерживаться схемы процентного соотношения цветов в продукте 3-17-80 (или её вариаций), где 3% — бренд-цвет для всех самых главных акцентов, 17% — остальные хроматические цвета, 80% — белый, чёрный и оттенки серого (ахроматические);
— Так акценты не будут теряться в макетах;
— В серый и чёрный можно подмешивать хрому бренд-цвета, чтобы усилить восприятие бренда, сделать их комфортнее и интереснее;
— Лайфхак: делать длинную тоновую растяжку (25–30 цветов). Это даст при любом изменении или масштабировании подобрать нужный тон.
Копия на Dsgners. #color
Хабр
Продуктовая колористика: основы работы с цветом
Предисловие Это первая часть из микро-цикла статей о продуктовой колористике. Этот цикл пригодится для коллег-дизайнеров младших грейдов, а также для тех дизайнеров, кто хочет узнать больше про...
❤13👍5