Александр Овчаренко написал, как получить максимум из внезапной возможности поговорить с пользователями сложных систем в реальных условиях.
— Доступ к объектам часто ограничен: они могут быть закрыты для посторонних (операционная, центр управления с контурами безопасности) или находиться далеко (в море, в шахте), а также у них мало пользователей;
— Посещать их полезно, даже если это не полевое исследование. Повышается мотивация (видно, для чего мы работаем) и снижают барьеры отчуждения (свой продукт мы ставим в центр, но в реальности это не так);
— Можно узнать, как продукт используют в реальных условиях, познакомиться с контекстом, наладить отношения с пользователями для дальнейших исследований, задать не дающие покоя вопросы, обучить коллег;
— Собеседники могут думать, что дизайнер решает чисто косметические задачи. При согласовании визита лучше назваться продуктовыми экспертами, аналитиками, эргономистами и обозначить цель: получение обратной связи для улучшения продукта;
— Если это первый опыт, узнайте, к чему готовиться (непривычно сильная качка на судне, отсутствие доступа к розеткам). Спросите сервисных инженеров;
— Знайте предметную область, не ограничиваясь своим продуктом. Пройдите курсы, которые проходят операторы, возьмите опытного товарища. Ваш собеседник на работе. Если кто-то его отвлекает, задаёт глупые вопросы и не понимает ответов, зачем ему это надо?
— При начальстве люди иногда не говорят всего, что хотели бы. Можно отвести человека в сторону (в курилку) и пообщаться тет-а-тет;
— В сложных системах не бывает такого, чтобы пользователям всё нравилось. Если кто-то так говорит, надо копать глубже;
— «Ребята, мне совершенно не интересно, в чём наш продукт хорош, мне интересно, что вам не нравится, и ужасно интересно, что вы ненавидите»;
— Вы общаетесь с человеком. Важно человеком оставаться: не защищать продукт, не зачитывать вопросы по скрипту, быть готовым что-то настроить и объяснить в продукте;
— Донимать врачей вопросами в конце смены — плохая идея;
— Помните об этикете: попросите разрешения на съёмку, не носите кружку над приборами (а лучше вообще держать руки за спиной), уточните, сколько времени у вас есть, и не стоит ли сделать перерыв;
— Не выделяйтесь внешне. В больнице наденьте белый халат, чтобы пялящийся в ноутбук хипстер не нервировал пациентов;
— Если вы закончили, но покинуть объект не можете (судно в море), узнайте, что вам можно и нельзя делать. Например, если вы официально член экипажа на пассажирском судне, никакого дьюти-фри.
#industrial #research
— Доступ к объектам часто ограничен: они могут быть закрыты для посторонних (операционная, центр управления с контурами безопасности) или находиться далеко (в море, в шахте), а также у них мало пользователей;
— Посещать их полезно, даже если это не полевое исследование. Повышается мотивация (видно, для чего мы работаем) и снижают барьеры отчуждения (свой продукт мы ставим в центр, но в реальности это не так);
— Можно узнать, как продукт используют в реальных условиях, познакомиться с контекстом, наладить отношения с пользователями для дальнейших исследований, задать не дающие покоя вопросы, обучить коллег;
— Собеседники могут думать, что дизайнер решает чисто косметические задачи. При согласовании визита лучше назваться продуктовыми экспертами, аналитиками, эргономистами и обозначить цель: получение обратной связи для улучшения продукта;
— Если это первый опыт, узнайте, к чему готовиться (непривычно сильная качка на судне, отсутствие доступа к розеткам). Спросите сервисных инженеров;
— Знайте предметную область, не ограничиваясь своим продуктом. Пройдите курсы, которые проходят операторы, возьмите опытного товарища. Ваш собеседник на работе. Если кто-то его отвлекает, задаёт глупые вопросы и не понимает ответов, зачем ему это надо?
— При начальстве люди иногда не говорят всего, что хотели бы. Можно отвести человека в сторону (в курилку) и пообщаться тет-а-тет;
— В сложных системах не бывает такого, чтобы пользователям всё нравилось. Если кто-то так говорит, надо копать глубже;
— «Ребята, мне совершенно не интересно, в чём наш продукт хорош, мне интересно, что вам не нравится, и ужасно интересно, что вы ненавидите»;
— Вы общаетесь с человеком. Важно человеком оставаться: не защищать продукт, не зачитывать вопросы по скрипту, быть готовым что-то настроить и объяснить в продукте;
— Донимать врачей вопросами в конце смены — плохая идея;
— Помните об этикете: попросите разрешения на съёмку, не носите кружку над приборами (а лучше вообще держать руки за спиной), уточните, сколько времени у вас есть, и не стоит ли сделать перерыв;
— Не выделяйтесь внешне. В больнице наденьте белый халат, чтобы пялящийся в ноутбук хипстер не нервировал пациентов;
— Если вы закончили, но покинуть объект не можете (судно в море), узнайте, что вам можно и нельзя делать. Например, если вы официально член экипажа на пассажирском судне, никакого дьюти-фри.
#industrial #research
❤14👍5🔥3❤🔥2
Александр Горчаков поделил команды на 4 типа по уровню стабильности и вызовов и написал, что делать лидерам таких команд.
— Процветают команды (1-й тип) с высоким уровнем стабильности и вызовов;
— Стабильность дают процессы, инструменты для решения задач (принципы, политики, гайды), прозрачное планирование, понятные механики развития команды и влияния на компанию (и внешний мир), разделяемая командой культура взаимодействия, а также лидер, выполняющий обязательства и отстаивающий интересы команды;
— Чем больше стабильности, тем больше команда уверена в завтрашнем дне и тем больше сил тратит именно на задачи;
— Нужна правильная оценка зрелости команды. Performance review повышает стабильность. Но его рано добавлять в стартапе на 5 человек без понятной бизнес-модели;
— Важен баланс. Без должного уровня вызовов стабильность приводит к бюрократии и скуке (2-й тип);
— Вызовы выводят из зоны комфорта, позволяют прокачаться;
— Чтобы избежать скуки при высоком уровне стабильности задача лидера — создавать вызовы и условия для их появления, объяснять их пользу команде;
— Вызовы: сложная задача, новая роль, компетенция или зона ответственности дизайнера, амбициозная цель, усложнённый режим работы;
— Например, задачу по добавлению столбца в таблицу можно предложить сделать с помощью специального компонента. Он позволит быстро делать подобное в будущем, а дизайнер прокачается в сборке компонентов;
— Вызовы без контроля и низкий уровень стабильности приводят к выгоранию (3-й тип);
— В этом случае можно начать с малого: начать планировать задачи, бронировать время дизайнеров на неделю вперёд, разделить людей по компетенциям, начать отстаивать интересы команды;
— В случае стагнации (4-й тип, низкий уровень стабильности и вызовов) кроме перечисленного выше надо ещё продать команде и бизнесу идею дополнительной работы.
#management
— Процветают команды (1-й тип) с высоким уровнем стабильности и вызовов;
— Стабильность дают процессы, инструменты для решения задач (принципы, политики, гайды), прозрачное планирование, понятные механики развития команды и влияния на компанию (и внешний мир), разделяемая командой культура взаимодействия, а также лидер, выполняющий обязательства и отстаивающий интересы команды;
— Чем больше стабильности, тем больше команда уверена в завтрашнем дне и тем больше сил тратит именно на задачи;
— Нужна правильная оценка зрелости команды. Performance review повышает стабильность. Но его рано добавлять в стартапе на 5 человек без понятной бизнес-модели;
— Важен баланс. Без должного уровня вызовов стабильность приводит к бюрократии и скуке (2-й тип);
— Вызовы выводят из зоны комфорта, позволяют прокачаться;
— Чтобы избежать скуки при высоком уровне стабильности задача лидера — создавать вызовы и условия для их появления, объяснять их пользу команде;
— Вызовы: сложная задача, новая роль, компетенция или зона ответственности дизайнера, амбициозная цель, усложнённый режим работы;
— Например, задачу по добавлению столбца в таблицу можно предложить сделать с помощью специального компонента. Он позволит быстро делать подобное в будущем, а дизайнер прокачается в сборке компонентов;
— Вызовы без контроля и низкий уровень стабильности приводят к выгоранию (3-й тип);
— В этом случае можно начать с малого: начать планировать задачи, бронировать время дизайнеров на неделю вперёд, разделить людей по компетенциям, начать отстаивать интересы команды;
— В случае стагнации (4-й тип, низкий уровень стабильности и вызовов) кроме перечисленного выше надо ещё продать команде и бизнесу идею дополнительной работы.
#management
Хабр
Вызовы и стабильность команды
Вызовы и стабильность команды Привет! Меня зовут Александр Горчаков, я руковожу дизайн командой в Voximplant. В рамках корпоративного блога Вокса, теперь мы иногда будем писать статьи об опыте работы...
👍13❤3
Борис Юзефпольский поделился лайфхаками, как провести интервью и восстановиться после.
— Исследователи в середине дня оказываются выжатыми, если утром общались с пользователями. Устают все независимо от опыта;
— Само социальное взаимодействие создаёт высокую когнитивную нагрузку;
— Плюс при проведении исследований надо не переврать термины, учесть разницу в культуре и возрасте (особенно с детьми), работать с негативно настроенными респондентами;
— Поведение, которое кажется неуважительным, в некоторых регионах может быть нормой. В Юго-Восточной Азии участники могут подключаться на интервью откуда угодно (с улицы, со скутера), даже если заранее попросить найти тихое место;
— В плане смолтока надо смотреть на конкретного человека: с кем-то надо сначала поговорить о погоде, кто-то настроен перейти сразу к делу;
— Каждый ответ резюмируйте со словами «Правильно ли я понял, что…». Бывает, что понял неправильно, и респондент поправляет. Он также может вспомнить детали, которые забыл упомянуть ранее;
— Управление тишиной — полезный навык. Нередко именно в паузах респонденты, чтобы не чувствовать неловкости, говорят больше, чем в плотной беседе;
— Если респонденты ведут себя грубо или снисходительно, помогает фокусироваться на содержании ответов, держаться за структуру и улыбаться — это обезоруживает и выводит из защитной позиции;
— В международных исследованиях, когда респонденты могут говорить непонятно или с акцентом, сразу скажите, что вы можете иногда останавливаться и переспрашивать;
— Часто интервью воспринимают как что-то, что невозможно отменить. Особенно если рекрутинг был сложным. Но если вы истощены, отмените или позовите исследователя на замену, иначе пользы от интервью будет мало;
— У всех свой максимум интервью в день, длительность сессий и пауз между ними. Пробуйте разные форматы, чтобы найти комфортные вам;
— Если страдаете, не терпите и не молчите. Обсудите с коллегами, поделитесь усталостью, спросите, как они с ней справляются. Может быть, выяснится, что что-то делать вообще не обязательно или можно делегировать;
— Ходите на интервью к опытным коллегам и смотрите записи, подмечайте удачные ходы.
#research #interview
— Исследователи в середине дня оказываются выжатыми, если утром общались с пользователями. Устают все независимо от опыта;
— Само социальное взаимодействие создаёт высокую когнитивную нагрузку;
— Плюс при проведении исследований надо не переврать термины, учесть разницу в культуре и возрасте (особенно с детьми), работать с негативно настроенными респондентами;
— Поведение, которое кажется неуважительным, в некоторых регионах может быть нормой. В Юго-Восточной Азии участники могут подключаться на интервью откуда угодно (с улицы, со скутера), даже если заранее попросить найти тихое место;
— В плане смолтока надо смотреть на конкретного человека: с кем-то надо сначала поговорить о погоде, кто-то настроен перейти сразу к делу;
— Каждый ответ резюмируйте со словами «Правильно ли я понял, что…». Бывает, что понял неправильно, и респондент поправляет. Он также может вспомнить детали, которые забыл упомянуть ранее;
— Управление тишиной — полезный навык. Нередко именно в паузах респонденты, чтобы не чувствовать неловкости, говорят больше, чем в плотной беседе;
— Если респонденты ведут себя грубо или снисходительно, помогает фокусироваться на содержании ответов, держаться за структуру и улыбаться — это обезоруживает и выводит из защитной позиции;
— В международных исследованиях, когда респонденты могут говорить непонятно или с акцентом, сразу скажите, что вы можете иногда останавливаться и переспрашивать;
— Часто интервью воспринимают как что-то, что невозможно отменить. Особенно если рекрутинг был сложным. Но если вы истощены, отмените или позовите исследователя на замену, иначе пользы от интервью будет мало;
— У всех свой максимум интервью в день, длительность сессий и пауз между ними. Пробуйте разные форматы, чтобы найти комфортные вам;
— Если страдаете, не терпите и не молчите. Обсудите с коллегами, поделитесь усталостью, спросите, как они с ней справляются. Может быть, выяснится, что что-то делать вообще не обязательно или можно делегировать;
— Ходите на интервью к опытным коллегам и смотрите записи, подмечайте удачные ходы.
#research #interview
Хабр
Ресурс исследователя: как проводить интервью и не поехать кукUXой
Подробный чек-лист исследователя — в конце статьи. Сохраняйте, чтобы проводить интервью эффективно и с заботой о себе. Всем привет. Меня зовут Борис Юзефпольский, я Head of UX Research в Островке. У...
👍18❤15❤🔥1👎1
Михаил Руденко написал о формулировании ценностного предложения.
— Ценность — абстрактное понятие. Ценностное предложение — стратегия заключения сделки с клиентом;
— Также оно помогает продакту, продавцу, маркетологу и специалисту по клиентскому опыту договориться, синхронизироваться, заложить основу для своей работы и существенно повысить качество продуктовых гипотез;
— Может состоять из нескольких взаимосвязанных компонентов, перечисленных ниже;
— 1. Клиентский сегмент. Нет продукта, который потребляет каждый человек на земле с самого рождения до смерти. Более универсальным может быть базовый продукт (такие дорого не продать) или кастомизируемый (такие дорого создавать);
— Описание клиентского сегмента должно позволять выделять таких людей благодаря данным из открытых источников;
— 2. Ключевой мотивационный конфликт. Если человек относится к целевому сегменту, ему может быть не нужен продукт прямо сейчас. Надо выделить событие, вызывающее «поисковое поведение», осознание клиентом конфликта между драйвером и барьером;
— 3. Артефакт — за счёт какого набора товаров, услуг и информации может быть разрешён конфликт. Клиент должен понимать артефакт или его составляющие на уровне категорий;
— 4. Атрибуты артефакта — характеристики конкретного экземпляра артефакта, которые позволяют сравнивать его с другими;
— 5. Ценовые условия — цена (скидки, кешбеки и бонусы) или любой другой вклад покупателя (бесплатно в обмен на просмотр рекламы);
— 6. Условия обмена — как будет происходить процесс обмена («утром деньги, вечером стулья», скорость доставки) и гарантии (обратный обмен, расторжение сделки, «бесплатно, если не доставим за час»);
— 7. Атрибуты компании — свойства самого продавца (бренд, «50 лет на рынке»);
— 8. Ценность — символический смысл обмена: во имя власти, любви, комфорта, эстетики, превосходства и так далее;
— 9. Аргументы — сообщение о связи хотя бы двух компонентов ценностного предложения. Например: «Компания X производит матрасы с Y года» — артефакт и атрибут компании. «Зубная паста X для детей от 3 до 6 лет укрепляет зубы и снижает риск кариеса» — артефакт, сегмент и конфликт.
#product
— Ценность — абстрактное понятие. Ценностное предложение — стратегия заключения сделки с клиентом;
— Также оно помогает продакту, продавцу, маркетологу и специалисту по клиентскому опыту договориться, синхронизироваться, заложить основу для своей работы и существенно повысить качество продуктовых гипотез;
— Может состоять из нескольких взаимосвязанных компонентов, перечисленных ниже;
— 1. Клиентский сегмент. Нет продукта, который потребляет каждый человек на земле с самого рождения до смерти. Более универсальным может быть базовый продукт (такие дорого не продать) или кастомизируемый (такие дорого создавать);
— Описание клиентского сегмента должно позволять выделять таких людей благодаря данным из открытых источников;
— 2. Ключевой мотивационный конфликт. Если человек относится к целевому сегменту, ему может быть не нужен продукт прямо сейчас. Надо выделить событие, вызывающее «поисковое поведение», осознание клиентом конфликта между драйвером и барьером;
— 3. Артефакт — за счёт какого набора товаров, услуг и информации может быть разрешён конфликт. Клиент должен понимать артефакт или его составляющие на уровне категорий;
— 4. Атрибуты артефакта — характеристики конкретного экземпляра артефакта, которые позволяют сравнивать его с другими;
— 5. Ценовые условия — цена (скидки, кешбеки и бонусы) или любой другой вклад покупателя (бесплатно в обмен на просмотр рекламы);
— 6. Условия обмена — как будет происходить процесс обмена («утром деньги, вечером стулья», скорость доставки) и гарантии (обратный обмен, расторжение сделки, «бесплатно, если не доставим за час»);
— 7. Атрибуты компании — свойства самого продавца (бренд, «50 лет на рынке»);
— 8. Ценность — символический смысл обмена: во имя власти, любви, комфорта, эстетики, превосходства и так далее;
— 9. Аргументы — сообщение о связи хотя бы двух компонентов ценностного предложения. Например: «Компания X производит матрасы с Y года» — артефакт и атрибут компании. «Зубная паста X для детей от 3 до 6 лет укрепляет зубы и снижает риск кариеса» — артефакт, сегмент и конфликт.
#product
Блог ОКБ Понедельник
Архитектоника ценностного предложения
В любом успешном продукте скрыта архитектоника ценности – сложная система взаимосвязанных элементов, которые вместе дают нечто большее, чем просто сумму характеристик.
❤5👍3👎2
Вика Лисицына написала, должен ли дизайнер ~~уметь кодить~~ быть немного продактом.
— Дизайнеры всё чаще берут на себя функции продактов, так как хотят большего влияния, а границы ответственности в agile-командах размыты. Плюс HRы постоянно спрашивают о работе с метриками;
— Разбираться в бизнес-метриках, стратегии продукта и нюансах технической реализации полезно, но не надо делать это вместо специалистов;
— Снизится качество и дизайна и продуктовых решений;
— Кто-то должен в команде быть самым эмпатичным, мыслить сценариями, лучше всех создавать красивые (страдает в первую очередь) и интуитивно понятные интерфейсы. А самое главное — мечтать, предлагать революционные решения, откладывая технические и бизнес-ограничения на потом;
— Задачи продакта не так просты: стратегическое планирование и роадмап (с учётом доступных ресурсов и бизнес-планов), глубокий анализ рынка и конкурентов, интерпретация метрик и постоянный перевод с технического на бизнес-язык и наоборот;
— Дизайнер может взять на себя эти задачи, если продакта нет или он не справляется или это ранние стадии стартапа, происходит смена ролей в команде, принимается критическое решение, влияющее на пользовательский опыт (надо стать адвокатом пользователя);
— Но лучше чётко определять зоны ответственности, развивать культуру уважения к специалистам, сохранять кругозор и при этом развивать экспертизу в своей области.
#product
— Дизайнеры всё чаще берут на себя функции продактов, так как хотят большего влияния, а границы ответственности в agile-командах размыты. Плюс HRы постоянно спрашивают о работе с метриками;
— Разбираться в бизнес-метриках, стратегии продукта и нюансах технической реализации полезно, но не надо делать это вместо специалистов;
— Снизится качество и дизайна и продуктовых решений;
— Кто-то должен в команде быть самым эмпатичным, мыслить сценариями, лучше всех создавать красивые (страдает в первую очередь) и интуитивно понятные интерфейсы. А самое главное — мечтать, предлагать революционные решения, откладывая технические и бизнес-ограничения на потом;
— Задачи продакта не так просты: стратегическое планирование и роадмап (с учётом доступных ресурсов и бизнес-планов), глубокий анализ рынка и конкурентов, интерпретация метрик и постоянный перевод с технического на бизнес-язык и наоборот;
— Дизайнер может взять на себя эти задачи, если продакта нет или он не справляется или это ранние стадии стартапа, происходит смена ролей в команде, принимается критическое решение, влияющее на пользовательский опыт (надо стать адвокатом пользователя);
— Но лучше чётко определять зоны ответственности, развивать культуру уважения к специалистам, сохранять кругозор и при этом развивать экспертизу в своей области.
#product
Оди. О дизайне
Дизайнеры должны перестать быть продакт-менеджерами и вернуться к дизайну — Оди. О дизайне
Размышления о том, чего не хватает дизайнерам и почему им нужно вернуть себе дизайнерские лавры вместо того, чтобы быть посредственными продакт-менеджерами.
❤37❤🔥6👍6👌1
Кейт Каплан написала об иконке бургера.
— Люди привыкли к ней за 10 лет и понимают, что это меню или список категорий;
— Узнают даже модифицированную иконку (две линии вместо трёх, в рамке, с добавлением чего-нибудь к линиям), но в этом случае важно, чтобы она находилась в привычном месте (левый верхний угол на сайте);
— Новая проблема: пользователи стали видеть бургер в других похожих иконках с тремя горизонтальными линиями (ненумерованный список, настройка параметров), особенно если они оказываются в местах, ассоциирующихся с навигацией;
— Чтобы гарантировать узнавание иконки бургера, добавьте ей текстовую подпись;
— Также можно предусмотреть дополнительные способы навигации: поиск, навигация в подвале, ссылки на связанные материалы;
— Если нет необходимости скрывать меню, не скрывайте его.
In English. #icon
— Люди привыкли к ней за 10 лет и понимают, что это меню или список категорий;
— Узнают даже модифицированную иконку (две линии вместо трёх, в рамке, с добавлением чего-нибудь к линиям), но в этом случае важно, чтобы она находилась в привычном месте (левый верхний угол на сайте);
— Новая проблема: пользователи стали видеть бургер в других похожих иконках с тремя горизонтальными линиями (ненумерованный список, настройка параметров), особенно если они оказываются в местах, ассоциирующихся с навигацией;
— Чтобы гарантировать узнавание иконки бургера, добавьте ей текстовую подпись;
— Также можно предусмотреть дополнительные способы навигации: поиск, навигация в подвале, ссылки на связанные материалы;
— Если нет необходимости скрывать меню, не скрывайте его.
In English. #icon
www.uprock.ru
Гамбургер-меню: последние исследования и лучшие практики — читайте на UPROCK
Немногие иконки вызывали столько же споров, как иконка гамбургера 🍔. Сегодня гамбургер-меню являются более привычным паттерном, чем 10 лет назад, тем не менее, отдельные риски по-прежнему сохраняются. . читайте полезные статьи о дизайне в блоге UPROCK
❤4💩4👍3🤔1
Михаил Малевич написал, как повысить конверсию первого экрана лендинга (hero section).
— Он определяет первое впечатление. Его задача — не разжечь любопытство или заинтриговать, а за 8 секунд убедить пользователя, что он нашёл то, что нужно;
— Задача остальных экранов — развеять возможные сомнения;
— Начните с низкодетализированного вайрфрейма с тщательно проработанным текстом и типографикой;
— Протестируйте несколько формулировок на целевой аудитории: насколько им понятен текст и интересен предлагаемый продукт;
— Только после этого стоит подумать, как визуализировать то, о чём говорится в тексте;
— Чаще всего изображение с человеком работает лучше, так как возникает эмоциональная связь с героем;
— Если берёте картинку с фотостоков, максимально её модифицируйте, чтобы она не показалась знакомой. Можно перекрасить одежду в цвета бренда и так далее (с ИИ это сейчас элементарно);
— Сюжет должен быть связан с продуктом: предлагаете зарабатывать, пропуская меньше звонков, — пусть герой разговаривает по телефону и отображается метка об успешной обработке звонка;
— Направьте взгляд героя в сторону кнопки с призывом к действию;
— Для дорогих и трудных в настройке продуктов можно добавить вторую кнопку, по которой можно узнать больше информации;
— Добавьте социальное доказательство. Например, количество довольных клиентов.
In English. #landing #conversion
— Он определяет первое впечатление. Его задача — не разжечь любопытство или заинтриговать, а за 8 секунд убедить пользователя, что он нашёл то, что нужно;
— Задача остальных экранов — развеять возможные сомнения;
— Начните с низкодетализированного вайрфрейма с тщательно проработанным текстом и типографикой;
— Протестируйте несколько формулировок на целевой аудитории: насколько им понятен текст и интересен предлагаемый продукт;
— Только после этого стоит подумать, как визуализировать то, о чём говорится в тексте;
— Чаще всего изображение с человеком работает лучше, так как возникает эмоциональная связь с героем;
— Если берёте картинку с фотостоков, максимально её модифицируйте, чтобы она не показалась знакомой. Можно перекрасить одежду в цвета бренда и так далее (с ИИ это сейчас элементарно);
— Сюжет должен быть связан с продуктом: предлагаете зарабатывать, пропуская меньше звонков, — пусть герой разговаривает по телефону и отображается метка об успешной обработке звонка;
— Направьте взгляд героя в сторону кнопки с призывом к действию;
— Для дорогих и трудных в настройке продуктов можно добавить вторую кнопку, по которой можно узнать больше информации;
— Добавьте социальное доказательство. Например, количество довольных клиентов.
In English. #landing #conversion
uprock.webflow.io
Как спроектировать первый экран, который обеспечивает конверсию — читайте на UPROCK
Первый экран или hero section — это первое, что видят ваши потенциальные клиенты. Это то, что определяет их первое впечатление. И это то, что на 90% должно убедить их совершить целевое действие. Как же спроектировать эффективный первый экран, обеспечивающий…
👍14❤5❤🔥3
Тимур Габбасов написал, как ускорить дизайн-ревью.
— Дизайн-ревью (дизайнеры смотрят макеты коллег и предлагают улучшения) позволяет переопыляться, делиться хорошими решениями и держать планку;
— В Точке ревью появилось с новой дизайн-системой и подходом к продуктам. Занимались им дизайнеры ДС, тщательно проверявшие отступы, названия слоёв, продуктовую логику и соответствие гайдам и не пускавшие в работу макеты с замечаниями;
— Когда дизайнеров стало больше 50, процесс забуксовал, а знания концентрировались у ревьюеров и не распространялись по компании;
— Подключили опытных продуктовых дизайнеров с насмотренностью и вниманием к деталям. Дизайнеров ДС стали звать, только если появлялись новые компоненты или были спорные моменты по ДС;
— В помощь к основному ревьюеру стали привлекать помощников, что прокачивало обратную связь и насмотренность;
— Начали фиксировать паттерны: загрузка файлов, уведомления, пустые состояния и так далее;
— Поменяли процесс, чтобы любой дизайнер мог добавить компонент или паттерн. Дизайнерам ДС достаточно было лишь утвердить результат;
— Ввели 2 уровня ревью. Полное — для новичков и сложных кейсов с новыми компонентами. Упрощённое — для опытных дизайнеров и кейсов, собранных на паттернах;
— Стали использовать стандартные комментарии в Фигме;
— Задачи по ревью перевели в таск-трекер. При смене статуса: автоматическое создание треда, тегание нужных людей, что делает процесс прозрачнее;
— О появлении новой задачи на ревью оповещает бот, что позволяет оперативнее её распределить и подхватить;
— Стали делить замечания по важности. Критичные (ошибки, кастом без обоснования, нарушения UX) — без их исправления задача дальше не идёт. На подумать — всё остальное;
— Всё это оптимизировало отдельные составляющие процесса, но бутылочное горлышко сохранилось;
— В итоге децентрализировали процесс: ревью перенесли внутрь небольших кросс-продуктовых команд дизайнеров, объединённых лидером, который занимается развитием команды;
— Он оценивает сложность кейса и назначает ревьюеров из группы (им может стать каждый), обучает, контролирует, при необходимости делает финальный чек;
— Дизайнеров ДС и экспертов подключают, если есть вопросы к паттернам, компонентам или продуктовой логике;
— Договорились брать задачи по ревью сразу, если нет своих горящих. Кейс на ревью ближе к релизу, а значит, важнее;
— Подготовили чеклисты, как подготовить кейс к ревью, как правильно ревьюить, чтобы помогать, а не «душнить по мелочам»;
— Стали собирать аналитику по скорости ревью (теперь 2–3 дня).
#review
— Дизайн-ревью (дизайнеры смотрят макеты коллег и предлагают улучшения) позволяет переопыляться, делиться хорошими решениями и держать планку;
— В Точке ревью появилось с новой дизайн-системой и подходом к продуктам. Занимались им дизайнеры ДС, тщательно проверявшие отступы, названия слоёв, продуктовую логику и соответствие гайдам и не пускавшие в работу макеты с замечаниями;
— Когда дизайнеров стало больше 50, процесс забуксовал, а знания концентрировались у ревьюеров и не распространялись по компании;
— Подключили опытных продуктовых дизайнеров с насмотренностью и вниманием к деталям. Дизайнеров ДС стали звать, только если появлялись новые компоненты или были спорные моменты по ДС;
— В помощь к основному ревьюеру стали привлекать помощников, что прокачивало обратную связь и насмотренность;
— Начали фиксировать паттерны: загрузка файлов, уведомления, пустые состояния и так далее;
— Поменяли процесс, чтобы любой дизайнер мог добавить компонент или паттерн. Дизайнерам ДС достаточно было лишь утвердить результат;
— Ввели 2 уровня ревью. Полное — для новичков и сложных кейсов с новыми компонентами. Упрощённое — для опытных дизайнеров и кейсов, собранных на паттернах;
— Стали использовать стандартные комментарии в Фигме;
— Задачи по ревью перевели в таск-трекер. При смене статуса: автоматическое создание треда, тегание нужных людей, что делает процесс прозрачнее;
— О появлении новой задачи на ревью оповещает бот, что позволяет оперативнее её распределить и подхватить;
— Стали делить замечания по важности. Критичные (ошибки, кастом без обоснования, нарушения UX) — без их исправления задача дальше не идёт. На подумать — всё остальное;
— Всё это оптимизировало отдельные составляющие процесса, но бутылочное горлышко сохранилось;
— В итоге децентрализировали процесс: ревью перенесли внутрь небольших кросс-продуктовых команд дизайнеров, объединённых лидером, который занимается развитием команды;
— Он оценивает сложность кейса и назначает ревьюеров из группы (им может стать каждый), обучает, контролирует, при необходимости делает финальный чек;
— Дизайнеров ДС и экспертов подключают, если есть вопросы к паттернам, компонентам или продуктовой логике;
— Договорились брать задачи по ревью сразу, если нет своих горящих. Кейс на ревью ближе к релизу, а значит, важнее;
— Подготовили чеклисты, как подготовить кейс к ревью, как правильно ревьюить, чтобы помогать, а не «душнить по мелочам»;
— Стали собирать аналитику по скорости ревью (теперь 2–3 дня).
#review
Хабр
Как мы переделали дизайн-ревью: от узкого горлышка к масштабируемой системе
В Точка Банк нет арт-директоров или лидов, которые принимают финальные решения по дизайну. Мы верим, что сильный дизайн рождается в совместной работе, а не в «указах сверху». Чтобы сохранять...
1❤19👍7🔥5
Эдвард Скотт написал о частых ошибках в дизайне страницы товара в интернет-магазинах.
— Люди часто не находят (27% респондентов) информацию о товаре, если она спрятана в горизонтальных вкладках. Лучше отображать её в секциях, одну под другой. Если секции сворачиваются, их не замечают всего 8%;
— Добавьте изображения, позволяющие визуально оценить размер товара. Например: фото предмета в руке;
— Добавьте изображения товара, опубликованные покупателями в соцсетях. Они покажут товар в деле и добавят социальных доказательств;
— Дайте возможность добавить товар в избранное без регистрации и входа. Люди могут использовать избранное для сохранения и последующего сравнения понравившихся товаров и могут не хотеть сразу делиться своим имейлом;
— Если товар можно купить в упаковках разного объёма, показывайте цену за единицу объёма (например, за кг). Человек может неправильно прикинуть стоимость при сравнении и отказаться от выгодного предложения;
— В блоке «Купить» показывайте общую стоимость заказа с налогами, доставкой, платой за негабаритный товар. Если есть варианты доставки, показывайте минимальную общую стоимость;
— Ссылку на политику возврата разместите на видном месте, так как возвраты — источник беспокойства при покупке в интернете;
— Отобразите возможность оформления покупки как подарка: накладная без цены, подарочная упаковка. Особенно, если в магазине часто заказывают что-то в подарок;
— Группируйте технические характеристики товаров, если их больше 20, снабжайте группы заголовками;
— Приводите параметры товаров от разных поставщиков к единому формату (например, все размеры в метрической системе);
— Объясняйте непонятные термины в характеристиках, например, в тултипе при наведении на термин;
— Позволяйте перемещаться по отзывам, пролистывая изображения в них. Отзывы с картинками дают более объективное и полное представление о товарах.
In English. #ecommerce #product_page
— Люди часто не находят (27% респондентов) информацию о товаре, если она спрятана в горизонтальных вкладках. Лучше отображать её в секциях, одну под другой. Если секции сворачиваются, их не замечают всего 8%;
— Добавьте изображения, позволяющие визуально оценить размер товара. Например: фото предмета в руке;
— Добавьте изображения товара, опубликованные покупателями в соцсетях. Они покажут товар в деле и добавят социальных доказательств;
— Дайте возможность добавить товар в избранное без регистрации и входа. Люди могут использовать избранное для сохранения и последующего сравнения понравившихся товаров и могут не хотеть сразу делиться своим имейлом;
— Если товар можно купить в упаковках разного объёма, показывайте цену за единицу объёма (например, за кг). Человек может неправильно прикинуть стоимость при сравнении и отказаться от выгодного предложения;
— В блоке «Купить» показывайте общую стоимость заказа с налогами, доставкой, платой за негабаритный товар. Если есть варианты доставки, показывайте минимальную общую стоимость;
— Ссылку на политику возврата разместите на видном месте, так как возвраты — источник беспокойства при покупке в интернете;
— Отобразите возможность оформления покупки как подарка: накладная без цены, подарочная упаковка. Особенно, если в магазине часто заказывают что-то в подарок;
— Группируйте технические характеристики товаров, если их больше 20, снабжайте группы заголовками;
— Приводите параметры товаров от разных поставщиков к единому формату (например, все размеры в метрической системе);
— Объясняйте непонятные термины в характеристиках, например, в тултипе при наведении на термин;
— Позволяйте перемещаться по отзывам, пролистывая изображения в них. Отзывы с картинками дают более объективное и полное представление о товарах.
In English. #ecommerce #product_page
www.uprock.ru
UX страницы товара: 15 ошибок и лучших практик — читайте на UPROCK
Страница товара — центральный элемент опыта совершения покупок онлайн, который напрямую влияет на решения пользователей. Поэтому крайне важно, чтобы такие страницы были удобными и эффективными.. читайте полезные статьи о дизайне в блоге UPROCK
👍14❤3❤🔥2
Дарья Хуторянская написала, как защищать дизайн-решения перед командой.
— Вопрос о релевантности решения (почему именно так решаем задачу) обычно появляется задолго до презентации макетов команде. Но бывает всякое;
— Сошлитесь на результаты предыдущих этапов дизайн-процесса (генерация решений, оценка и выбор подходящего). Например: на результаты обсуждения диапазона возможных решений с командой. Да, имеет смысл это фиксировать;
— В идеале обосновывать конкретные дизайн-решения проведёнными исследованиями;
— Но если их не было, можно опираться на стандарты. Например: эвристики, гайдлайны 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