Илона Саркисова написала первую статью из серии о Customer journey map.
— В 1998 году в IDEO по заказу Amtrak пытались понять, как повысить привлекательность поездок по железным дорогам. Возможно, это первое использование термина;
— CJM рассматривает человека как клиента компании и показывает, как тот узнаёт о сервисе, решает им воспользоваться, пользуется, а затем остаётся лояльным (жизненный цикл взаимодействия). Изучение пользовательского интерфейса здесь отходит на второй план;
— Подходит для анализа существующего сервиса и планирования нового;
— Нет смысла строить CJM, если а) человек ничего не покупает и нет взаимодействия по оказанию услуги, б) вы хотите проиллюстрировать только работу пользователя с интерфейсом;
— При построении CJM сначала надо понять, какие у сервиса есть (или должны быть) клиенты и описать персоны. Если их несколько, будет несколько CJM;
— Далее надо выписать точки взаимодействия и проблемы в каждой точке. В CJM можно включать любые элементы, которые помогут в проектировании сервиса;
— Например, можно выделить моменты истины — взаимодействия, в ходе которых клиенты решают, воспользуются они сервисом или нет;
— Также можно зафиксировать поставщиков услуг (кто оказывает сервис и несёт ответственность), эмоции (что клиенты чувствуют в каждой из точек взаимодействия), возможности (как можно улучшить взаимодействие) и так далее;
— CJM помогает увидеть сервис с высоты птичьего полёта, найти способы улучшить обслуживание и придумать новые услуги. Это инструмент на грани продуктового Customer Experience и маркетинга.
#cjm
— В 1998 году в IDEO по заказу Amtrak пытались понять, как повысить привлекательность поездок по железным дорогам. Возможно, это первое использование термина;
— CJM рассматривает человека как клиента компании и показывает, как тот узнаёт о сервисе, решает им воспользоваться, пользуется, а затем остаётся лояльным (жизненный цикл взаимодействия). Изучение пользовательского интерфейса здесь отходит на второй план;
— Подходит для анализа существующего сервиса и планирования нового;
— Нет смысла строить CJM, если а) человек ничего не покупает и нет взаимодействия по оказанию услуги, б) вы хотите проиллюстрировать только работу пользователя с интерфейсом;
— При построении CJM сначала надо понять, какие у сервиса есть (или должны быть) клиенты и описать персоны. Если их несколько, будет несколько CJM;
— Далее надо выписать точки взаимодействия и проблемы в каждой точке. В CJM можно включать любые элементы, которые помогут в проектировании сервиса;
— Например, можно выделить моменты истины — взаимодействия, в ходе которых клиенты решают, воспользуются они сервисом или нет;
— Также можно зафиксировать поставщиков услуг (кто оказывает сервис и несёт ответственность), эмоции (что клиенты чувствуют в каждой из точек взаимодействия), возможности (как можно улучшить взаимодействие) и так далее;
— CJM помогает увидеть сервис с высоты птичьего полёта, найти способы улучшить обслуживание и придумать новые услуги. Это инструмент на грани продуктового Customer Experience и маркетинга.
#cjm
Medium
Customer Journey Map — часть 1
Давайте раз и навсегда разберемся с тем, что такое CJM и почему ее часто применяют неправильно.
Денис Тамбовцев рассказал, как меняется роль дизайнера интерфейсов, если это интерфейс для VR/AR.
— В VR нет плоскости, на которую надо нажать, чтобы рука взяла яблоко. Надо подойти к виртуальному столу и поднять объект своей рукой или контроллером в руке;
— Управление строится вокруг пользователя: его крупной и мелкой моторики, перемещения в пространстве, направления взгляда и голосовых команд;
— В играх интерфейсы можно разделить на а) находящиеся вне игровой сцены и б) находящиеся в пространстве сцены, вплетённые в повествование. В первом случае используется классический игровой HUD: подсказки появляются в центре экрана, шкала здоровья, количество патронов и миникарта находятся в его углах. Во втором случае, чтобы посмотреть направление, персонаж берёт в руки бумажную карту;
— Преимущества второго подхода: а) игрок сильнее фокусируется на игровом мире, б) из-за специфики VR-очков нельзя использовать классический HUD;
— Дизайнер должен не просто спроектировать и отрисовать окно системного меню, а также решить, как вообще отображать меню в виртуальной среде, чтобы не разрушить эффект погружения;
— Например, меню может находиться на запястье виртуальной руки в виде умных часов, проецироваться на голографический стол в конкретной точке сцены, выводиться виртуальным компаньоном пользователя, быть отдельной сценой при выходе из текущей;
— Частично дизайнер берёт на себя то, чем раньше занимались 3D-художники, гейм-дизайнеры и дизайнеры уровней. А значит, он должен понимать, как управлять фокусом пользователя через архитектуру локации, уметь прототипировать 3D-окружение и взаимодействие с ним.
— В VR нет плоскости, на которую надо нажать, чтобы рука взяла яблоко. Надо подойти к виртуальному столу и поднять объект своей рукой или контроллером в руке;
— Управление строится вокруг пользователя: его крупной и мелкой моторики, перемещения в пространстве, направления взгляда и голосовых команд;
— В играх интерфейсы можно разделить на а) находящиеся вне игровой сцены и б) находящиеся в пространстве сцены, вплетённые в повествование. В первом случае используется классический игровой HUD: подсказки появляются в центре экрана, шкала здоровья, количество патронов и миникарта находятся в его углах. Во втором случае, чтобы посмотреть направление, персонаж берёт в руки бумажную карту;
— Преимущества второго подхода: а) игрок сильнее фокусируется на игровом мире, б) из-за специфики VR-очков нельзя использовать классический HUD;
— Дизайнер должен не просто спроектировать и отрисовать окно системного меню, а также решить, как вообще отображать меню в виртуальной среде, чтобы не разрушить эффект погружения;
— Например, меню может находиться на запястье виртуальной руки в виде умных часов, проецироваться на голографический стол в конкретной точке сцены, выводиться виртуальным компаньоном пользователя, быть отдельной сценой при выходе из текущей;
— Частично дизайнер берёт на себя то, чем раньше занимались 3D-художники, гейм-дизайнеры и дизайнеры уровней. А значит, он должен понимать, как управлять фокусом пользователя через архитектуру локации, уметь прототипировать 3D-окружение и взаимодействие с ним.
vc.ru
Вне плоскости экрана. Новые вызовы для дизайнеров интерфейсов — Дизайн на vc.ru
13 ноября состоялась международная конференция WUD@ITMO от Университета ИТМО и UsabilityLab. Креативный директор Modum Lab Денис Тамбовцев рассказал, как развитие иммерсивных технологий — VR/AR, распознавания жестов, голоса и других решений — меняет роль…
В «Собаке Павловой» написали, как собрать UX-портфолио, работая в команде над большими коммерческими проектами.
— В этом случае сложно оценить вклад и навыки отдельного специалиста;
— Без таких проектов портфолио будет неполным, но с ними легко присвоить чужие заслуги;
— Научитесь описывать свою работу текстом: какие проблемы и каким образом решали;
— Расскажите об отдельных мини-интерфейсах, которые вы сделали внутри общих экранов;
— Покажите промежуточные документы и объясните, как их читать;
— Опишите невизуальную часть работы: как собирали информацию, кого интервьюировали, сколько портретов разработали, как тщательно описали пользовательские пути в интерфейсе;
— Попробуйте доделать проект так, как видите его вы. Предупредите, что это концепт, а реальные макеты делали всей командой, и они получились другими;
— Опишите свою часть командной работы: как разделили работу, кто за что отвечал, как принимали решения и показывали макеты клиенту, как ваш вклад повлиял на общие результаты.
#career
— В этом случае сложно оценить вклад и навыки отдельного специалиста;
— Без таких проектов портфолио будет неполным, но с ними легко присвоить чужие заслуги;
— Научитесь описывать свою работу текстом: какие проблемы и каким образом решали;
— Расскажите об отдельных мини-интерфейсах, которые вы сделали внутри общих экранов;
— Покажите промежуточные документы и объясните, как их читать;
— Опишите невизуальную часть работы: как собирали информацию, кого интервьюировали, сколько портретов разработали, как тщательно описали пользовательские пути в интерфейсе;
— Попробуйте доделать проект так, как видите его вы. Предупредите, что это концепт, а реальные макеты делали всей командой, и они получились другими;
— Опишите свою часть командной работы: как разделили работу, кто за что отвечал, как принимали решения и показывали макеты клиенту, как ваш вклад повлиял на общие результаты.
#career
vc.ru
Как собрать UX-портфолио и не обмануть ожидания работодателя? А если еще и все проекты командные? — Карьера на vc.ru
Большие коммерческие проекты часто делают большие команды, и это нормально. В них участвует много человек, каждый выполняет свою роль в зависимости от уровня компетенций и набора навыков. Такие проекты дают опыт командной работы. Но!
Илона Саркисова написала, как применять Customer journey map для проектирования нового сервиса.
— Здесь обычный процесс (анализ клиента → анализ существующего пути → поиск проблем → улучшение) не работает, но можно создать идеальный путь с нуля;
— Начать надо с изучения предметной области: почитать о подобных сервисах в открытых источниках, посмотреть конкурентов и отзывы на них, выписать, что людям нравится и не нравится;
— Кроме интерфейса смотрите на сервис в целом;
— Затем надо выявить потребности бизнеса, технические и другие ограничения, как заказчик представляет работу сервиса. Это можно сделать на встрече с заказчиком;
— Следующий шаг — создание протоперсоны, описания целевой аудитории, основанного на предположениях команды. Так можно сэкономить на исследованиях, но создавать её надо именно командой;
— Валидировать её исследованиями можно на любом последующем этапе;
— Затем надо провести командный CJM-воркшоп, желательно с привлечением представителей целевой аудитории и тех, кто будет отвечать за сервис на разных этапах (от маркетинга до поддержки). Лучше всего работают группы от 5 до 12 человек;
— Задачи воркшопа: а) Спроектировать клиентский путь; б) Найти возможные проблемы и перспективы для развития; в) Придумать, как улучшить взаимодействие;
— Важно разделять, какие элементы CJM основываются на фактах, а какие — на фантазиях, а в конце воркшопа — валидировать CJM по персоне.
Заметка о трёх типах персон. #cjm
— Здесь обычный процесс (анализ клиента → анализ существующего пути → поиск проблем → улучшение) не работает, но можно создать идеальный путь с нуля;
— Начать надо с изучения предметной области: почитать о подобных сервисах в открытых источниках, посмотреть конкурентов и отзывы на них, выписать, что людям нравится и не нравится;
— Кроме интерфейса смотрите на сервис в целом;
— Затем надо выявить потребности бизнеса, технические и другие ограничения, как заказчик представляет работу сервиса. Это можно сделать на встрече с заказчиком;
— Следующий шаг — создание протоперсоны, описания целевой аудитории, основанного на предположениях команды. Так можно сэкономить на исследованиях, но создавать её надо именно командой;
— Валидировать её исследованиями можно на любом последующем этапе;
— Затем надо провести командный CJM-воркшоп, желательно с привлечением представителей целевой аудитории и тех, кто будет отвечать за сервис на разных этапах (от маркетинга до поддержки). Лучше всего работают группы от 5 до 12 человек;
— Задачи воркшопа: а) Спроектировать клиентский путь; б) Найти возможные проблемы и перспективы для развития; в) Придумать, как улучшить взаимодействие;
— Важно разделять, какие элементы CJM основываются на фактах, а какие — на фантазиях, а в конце воркшопа — валидировать CJM по персоне.
Заметка о трёх типах персон. #cjm
Medium
Customer Journey Map — часть 2
Это вторая часть из серии статей про CJM. Посмотрим, как применять CJM для нового сервиса, у которого еще не сформирован “путь покупателя”.
Владимир Бугай написал, как верстать таблички с режимом работы.
— Не пишите «Режим работы» или «График работы», человек увидит числовой интервал на входной двери и всё поймёт;
— Если обязательно должна быть юридическая информация (название компании, ИНН), не пишите её крупно, как некоторые зачем-то делают;
— Полезно написать номер телефона, если дверь окажется закрытой в рабочее время или надо будет пообщаться с кем-то из компании;
— Если на табличке — просто интервал времени без подписи, значит заведение работает все дни в это время;
— Если время работы отличается в какой-то день, пишите его название («Суббота» или «Суббота, воскресенье») и время работы в этот день;
— Если в какой-то день заведение не работает, пишите «Воскресенье — выходной» или «Суббота, воскресенье — выходной»;
— Не надо повторять одинаковое время работы для разных дней, пишите «Понедельник — четверг, воскресенье» и время работы для перечисленных дней;
— Не пишите минуты в верхнем индексе, предлоги «с» и «до», «0» перед единственной цифрой часа;
— Между временем начала и окончания ставьте среднее тире, а между часами и минутами — двоеточие. «00» в минутах можно не писать;
— «Без перерыва на обед» — бесполезная фраза.
#layout
— Не пишите «Режим работы» или «График работы», человек увидит числовой интервал на входной двери и всё поймёт;
— Если обязательно должна быть юридическая информация (название компании, ИНН), не пишите её крупно, как некоторые зачем-то делают;
— Полезно написать номер телефона, если дверь окажется закрытой в рабочее время или надо будет пообщаться с кем-то из компании;
— Если на табличке — просто интервал времени без подписи, значит заведение работает все дни в это время;
— Если время работы отличается в какой-то день, пишите его название («Суббота» или «Суббота, воскресенье») и время работы в этот день;
— Если в какой-то день заведение не работает, пишите «Воскресенье — выходной» или «Суббота, воскресенье — выходной»;
— Не надо повторять одинаковое время работы для разных дней, пишите «Понедельник — четверг, воскресенье» и время работы для перечисленных дней;
— Не пишите минуты в верхнем индексе, предлоги «с» и «до», «0» перед единственной цифрой часа;
— Между временем начала и окончания ставьте среднее тире, а между часами и минутами — двоеточие. «00» в минутах можно не писать;
— «Без перерыва на обед» — бесполезная фраза.
#layout
pereverstal.by
Режим работы. Правила верстки
99% табличек с режимом работы как правило полное говно.
Игорь Штанг написал об алгоритме вёрстки.
— Превращая текст в макет, придерживайтесь последовательности: Содержание → Структура → Конструкция → Стиль;
— Содержание. Прочитайте текст и определитесь с задачей. О содержании надо помнить на всех последующих этапах;
— Структура. Решите, на какие части разделить текст и как расставить акценты. Один и тот же материал можно структурировать по-разному;
— Конструкция — визуальное представление структуры и скелет будущего макета. Одну и ту же структуру можно отобразить с помощью разных конструкций;
— Например, список (набор однородных и равнозначных элементов) можно заверстать: а) в одну строку, б) вертикально, в) по сетке, г) беспорядочно разбросав по странице;
— Стиль — настроение и «вкус» макета. Источник стиля следует искать как в содержании, так и далеко за его пределами. Например, референсом для слайда о бонусной программе может быть страница из американского руководства по воздушному бою 1943 года (смотрите по второй ссылке);
— Опасно перепрыгивать через этапы и менять их местами. Если начать со стиля, можно погрязнуть в оформительстве, и так далее.
Ещё пара примеров. #layout
— Превращая текст в макет, придерживайтесь последовательности: Содержание → Структура → Конструкция → Стиль;
— Содержание. Прочитайте текст и определитесь с задачей. О содержании надо помнить на всех последующих этапах;
— Структура. Решите, на какие части разделить текст и как расставить акценты. Один и тот же материал можно структурировать по-разному;
— Конструкция — визуальное представление структуры и скелет будущего макета. Одну и ту же структуру можно отобразить с помощью разных конструкций;
— Например, список (набор однородных и равнозначных элементов) можно заверстать: а) в одну строку, б) вертикально, в) по сетке, г) беспорядочно разбросав по странице;
— Стиль — настроение и «вкус» макета. Источник стиля следует искать как в содержании, так и далеко за его пределами. Например, референсом для слайда о бонусной программе может быть страница из американского руководства по воздушному бою 1943 года (смотрите по второй ссылке);
— Опасно перепрыгивать через этапы и менять их местами. Если начать со стиля, можно погрязнуть в оформительстве, и так далее.
Ещё пара примеров. #layout
Medium
Алгоритм верстки
Превращая текст в макет, придерживайтесь такой последовательности:
Роман Горбачёв написал об иерархии погружения (с очень понятными примерами).
— Все мы очень хотим начать чтение с левого верхнего угла, если что-то своим размером, цветом, формой, расположением или анимацией не перетягивает наше внимание;
— Мы физически не можем читать два текста одновременно. Мы всё замечаем боковым зрением, но локус внимания (о чём мы активно и целенаправленно думаем) в каждый момент времени — только одна из надписей;
— Иерархия погружения работает так: мы аккуратно разделяем аудиторию и даём каждому важную информацию в нужный момент. Например, сначала человек понимает, что попал в интернет-магазин шпингалетов; если ему это интересно, он может дойти до блока с документацией и даже узнать, что там есть свои хиты;
— Если принцип иерархии погружения нарушен, пользователю становится тяжело игнорировать информацию, которая прямо сейчас не интересна (хиты в разделе с документацией). Возрастает когнитивная нагрузка, и если вознаграждение не слишком велико, мозг отказывается разбираться;
— Проще всего создавать иерархию с помощью размера. Правило: объекты воспринимаются разными, если их визуальная масса отличается минимум в 1,5 раза;
— Возможность создавать иерархию с помощью цвета важна для мобильных сайтов и приложений. На маленьком экране сложно использовать для этого размер и свободное пространство;
— Вся информация должна быть сгруппирована и располагаться в порядке: основная → важные детали → дополнительные детали.
#layout
— Все мы очень хотим начать чтение с левого верхнего угла, если что-то своим размером, цветом, формой, расположением или анимацией не перетягивает наше внимание;
— Мы физически не можем читать два текста одновременно. Мы всё замечаем боковым зрением, но локус внимания (о чём мы активно и целенаправленно думаем) в каждый момент времени — только одна из надписей;
— Иерархия погружения работает так: мы аккуратно разделяем аудиторию и даём каждому важную информацию в нужный момент. Например, сначала человек понимает, что попал в интернет-магазин шпингалетов; если ему это интересно, он может дойти до блока с документацией и даже узнать, что там есть свои хиты;
— Если принцип иерархии погружения нарушен, пользователю становится тяжело игнорировать информацию, которая прямо сейчас не интересна (хиты в разделе с документацией). Возрастает когнитивная нагрузка, и если вознаграждение не слишком велико, мозг отказывается разбираться;
— Проще всего создавать иерархию с помощью размера. Правило: объекты воспринимаются разными, если их визуальная масса отличается минимум в 1,5 раза;
— Возможность создавать иерархию с помощью цвета важна для мобильных сайтов и приложений. На маленьком экране сложно использовать для этого размер и свободное пространство;
— Вся информация должна быть сгруппирована и располагаться в порядке: основная → важные детали → дополнительные детали.
#layout
Хабр
Иерархия погружения: один из самых простых и важных принципов дизайна
Рассказываю о принципе, который поможет заметить и исправить распространённые ошибки в дизайне сайтов и рекламы, даже если вы не дизайнер. Уже много лет по интернету ходят подобные картинки:...
Юля Трусова написала, как работать с пушами, чтобы они меньше раздражали.
— Выбирайте из пользователей тех, кому сообщение реально может быть полезно. Например, пуш о функции «Черновик» в Авито стоит направить тем, кто размещает много объявлений;
— Если пуш может приходить часто, напишите несколько вариантов текста, чтобы он не наскучил;
— Проверяйте сообщения на логичность в разных обстоятельствах. О вакансиях рядом с домом лучше сделать 2 варианта пуша: а) в радиусе 5 км для Москвы и Санкт-Петербурга, б) в радиусе 1 км для всех остальных;
— Не лезьте в жизнь людей. Сообщение от сервиса недвижимости с советом переехать или купить свою квартиру будет звучать грубо, так как сделать это непросто;
— Для каждого сообщения настраивайте кулдаун — время, в течение которого пользователь не получит его повторно. Выбирайте такое время, чтобы не надоесть. Также можно ограничить общее количество сообщений, приходящих от сервиса;
— Используйте в сообщениях переменные, так они станут персональными и более убедительными. Например: «Пользуется спросом. Объявление «1-к. квартира, 47,4 м…» из вашего избранного посмотрели 456 раз за неделю»;
— Проверяйте, что любые значения переменных работают на цель сообщения. Если вместо числа 456 будет 2, пользователь не решит поторопиться с решением по поводу этой квартиры;
— Если несколько одинаковых событий произошли одновременно, присылайте общий пуш;
— Новые эмодзи могут отображаться только в последних версиях систем. Чтобы все пользователи увидели эмодзи, используйте только те, которые появились до 2019 года;
— Используйте знак рубля и неразрывные пробелы.
#push
— Выбирайте из пользователей тех, кому сообщение реально может быть полезно. Например, пуш о функции «Черновик» в Авито стоит направить тем, кто размещает много объявлений;
— Если пуш может приходить часто, напишите несколько вариантов текста, чтобы он не наскучил;
— Проверяйте сообщения на логичность в разных обстоятельствах. О вакансиях рядом с домом лучше сделать 2 варианта пуша: а) в радиусе 5 км для Москвы и Санкт-Петербурга, б) в радиусе 1 км для всех остальных;
— Не лезьте в жизнь людей. Сообщение от сервиса недвижимости с советом переехать или купить свою квартиру будет звучать грубо, так как сделать это непросто;
— Для каждого сообщения настраивайте кулдаун — время, в течение которого пользователь не получит его повторно. Выбирайте такое время, чтобы не надоесть. Также можно ограничить общее количество сообщений, приходящих от сервиса;
— Используйте в сообщениях переменные, так они станут персональными и более убедительными. Например: «Пользуется спросом. Объявление «1-к. квартира, 47,4 м…» из вашего избранного посмотрели 456 раз за неделю»;
— Проверяйте, что любые значения переменных работают на цель сообщения. Если вместо числа 456 будет 2, пользователь не решит поторопиться с решением по поводу этой квартиры;
— Если несколько одинаковых событий произошли одновременно, присылайте общий пуш;
— Новые эмодзи могут отображаться только в последних версиях систем. Чтобы все пользователи увидели эмодзи, используйте только те, которые появились до 2019 года;
— Используйте знак рубля и неразрывные пробелы.
#push
Хабр
Пуши Авито: как сделать самый навязчивый формат не таким раздражающим
Привет! Меня зовут Юля Трусова, я старший UX-редактор в Авито. В этой статье я расскажу о мобильных пушах: какого тона мы придерживаемся, как работаем с техническими ограничениями и о чём думаем,...
Тесс Гадд написала об аккордеонах.
— Вариант, когда в аккордеоне можно открыть только одну секцию одновременно, подходит для форм, которые надо заполнять последовательно;
— Возможность параллельного открытия нескольких секций полезна, когда пользователю не нужно фокусироваться на одной секции и нужен полный контроль. Например, при отображении разных групп параметров фильтрации;
— Согласно исследованию Nielsen Norman Group, чаще всего пользователи ожидают увидеть в аккордеоне иконку шеврона (стрелка, направленная вниз);
— В раскрытой секции стрелка шеврона должна быть направлена вверх;
— Следствие из правила, что не стоит выносить в аккордеон важную информацию: если аккордеон не используется для навигации, по умолчанию все его секции лучше скрывать;
— Часто аккордеон применяют для а) отображения второстепенной информации в карточке товара вроде условий возврата, доставки и размерной таблицы, б) списка часто задаваемых вопросов;
— Заголовок секции и шеврон оба должны быть кнопками, раскрывающими и скрывающими секцию. Не должно быть так, что шеврон раскрывает секцию, а заголовок ведёт на какую-то страницу.
#accordion
— Вариант, когда в аккордеоне можно открыть только одну секцию одновременно, подходит для форм, которые надо заполнять последовательно;
— Возможность параллельного открытия нескольких секций полезна, когда пользователю не нужно фокусироваться на одной секции и нужен полный контроль. Например, при отображении разных групп параметров фильтрации;
— Согласно исследованию Nielsen Norman Group, чаще всего пользователи ожидают увидеть в аккордеоне иконку шеврона (стрелка, направленная вниз);
— В раскрытой секции стрелка шеврона должна быть направлена вверх;
— Следствие из правила, что не стоит выносить в аккордеон важную информацию: если аккордеон не используется для навигации, по умолчанию все его секции лучше скрывать;
— Часто аккордеон применяют для а) отображения второстепенной информации в карточке товара вроде условий возврата, доставки и размерной таблицы, б) списка часто задаваемых вопросов;
— Заголовок секции и шеврон оба должны быть кнопками, раскрывающими и скрывающими секцию. Не должно быть так, что шеврон раскрывает секцию, а заголовок ведёт на какую-то страницу.
#accordion
www.uprock.ru
UI-шпаргалка: как создать функциональный аккордеон — читайте на UPROCK
Хотя аккордеон может показаться простым компонентом, при его создании нужно учитывать множество тонкостей. . читайте полезные статьи о дизайне в блоге UPROCK
Андрей Шапиро написал о схематизации опыта с помощью CJM, Service Blueprint и собственной гибридной нотации.
— Строгой нотации CJM нет. Из-за этого её труднее использовать для синхронизации работы людей с разным уровнем подготовки. Зато инструмент пластичен: карту можно организовать так, как того требует ситуация;
— CJM рассматривает точки контакта (взаимодействия) человека и проектируемой или анализируемой системы;
— Важно различать точки контакта и каналы. Каналы — средства, через которые происходит взаимодействие. Например, «Подтверждение брони» (точка контакта) может происходить в интерфейсе приложения и в электронной почте. Каналы стоит отражать в CJM только если одно и то же взаимодействие возможно в нескольких каналах;
— Информационные слои CJM могут быть любыми. Чаще всего Андрей анализирует в точках контакта действия, возникающие артефакты, барьеры, инсайты действующего лица;
— В табличных CJM каждая строка — информационный слой. Такие CJM можно вести хоть в Гугл Таблицах, за счёт чёткой структуры их легко заполнять на воркшопах, но в них сложно показывать нелинейные сценарии;
— В проволочных CJM точки контакта соединены линиями, удобно показывать ветвления сценария взаимодействия, а информационные слои размещены в виде текстовых блоков рядом с точками контакта;
— С помощью Service Blueprint показывают взаимодействие нескольких действующих лиц и участвующих сервисов;
— На одном уровне показывают видимые клиенту взаимодействия (например: заказ, выдача товара), на другой — скрытые, но участвующие в оказании услуги (комплектация заказа). Дополнительные уровни: артефакты, действия клиента, вспомогательные процессы;
— CJM и SB делят действия одного или нескольких лиц на шаги и привязывают к этим шагам какие-то наборы данных. В CJM шаги отражают путь конкретного героя (клиента). SB охватывает весь процесс формирования ценности для клиента.
#cjm #sb
— Строгой нотации CJM нет. Из-за этого её труднее использовать для синхронизации работы людей с разным уровнем подготовки. Зато инструмент пластичен: карту можно организовать так, как того требует ситуация;
— CJM рассматривает точки контакта (взаимодействия) человека и проектируемой или анализируемой системы;
— Важно различать точки контакта и каналы. Каналы — средства, через которые происходит взаимодействие. Например, «Подтверждение брони» (точка контакта) может происходить в интерфейсе приложения и в электронной почте. Каналы стоит отражать в CJM только если одно и то же взаимодействие возможно в нескольких каналах;
— Информационные слои CJM могут быть любыми. Чаще всего Андрей анализирует в точках контакта действия, возникающие артефакты, барьеры, инсайты действующего лица;
— В табличных CJM каждая строка — информационный слой. Такие CJM можно вести хоть в Гугл Таблицах, за счёт чёткой структуры их легко заполнять на воркшопах, но в них сложно показывать нелинейные сценарии;
— В проволочных CJM точки контакта соединены линиями, удобно показывать ветвления сценария взаимодействия, а информационные слои размещены в виде текстовых блоков рядом с точками контакта;
— С помощью Service Blueprint показывают взаимодействие нескольких действующих лиц и участвующих сервисов;
— На одном уровне показывают видимые клиенту взаимодействия (например: заказ, выдача товара), на другой — скрытые, но участвующие в оказании услуги (комплектация заказа). Дополнительные уровни: артефакты, действия клиента, вспомогательные процессы;
— CJM и SB делят действия одного или нескольких лиц на шаги и привязывают к этим шагам какие-то наборы данных. В CJM шаги отражают путь конкретного героя (клиента). SB охватывает весь процесс формирования ценности для клиента.
#cjm #sb
Medium
Схематизация опыта с CJM и Service Blueprint. Практика гибридной нотации
Инструменты проектирования
В SimbirSoft написали о проектировании форм. Об этом было уже много публикаций, поэтому я выбрал не самые распространённые советы:
6. Если поле заполнено неправильно, выделите его и напишите, что не так и как это исправить. Можно скрывать текст подсказки к полю (который не помог заполнить его правильно) и показывать только текст сообщения об ошибке.
7. Не располагайте в форме ссылки на другие страницы. Пользователь может перейти по ссылке и не вернуться к форме.
8. Не используйте плейсхолдеры без необходимости. Если в плейсхолдере есть полезная для заполнения поля информация, она пропадёт после заполнения, и пользователь не сможет себя перепроверить. Если информация бесполезна, она только помешает отличать заполненные поля от незаполненных.
10. Не используйте раскрывающиеся списки, если выбрать можно всего из трёх вариантов.
12. Подстраивайте размер полей под предполагаемое содержимое.
13. Оставляйте кнопки формы активными. Если пользователь заполнит не все поля, их можно выделить при нажатии на кнопку отправки формы. О неактивных кнопках есть хорошая статья.
#form
6. Если поле заполнено неправильно, выделите его и напишите, что не так и как это исправить. Можно скрывать текст подсказки к полю (который не помог заполнить его правильно) и показывать только текст сообщения об ошибке.
7. Не располагайте в форме ссылки на другие страницы. Пользователь может перейти по ссылке и не вернуться к форме.
8. Не используйте плейсхолдеры без необходимости. Если в плейсхолдере есть полезная для заполнения поля информация, она пропадёт после заполнения, и пользователь не сможет себя перепроверить. Если информация бесполезна, она только помешает отличать заполненные поля от незаполненных.
10. Не используйте раскрывающиеся списки, если выбрать можно всего из трёх вариантов.
12. Подстраивайте размер полей под предполагаемое содержимое.
13. Оставляйте кнопки формы активными. Если пользователь заполнит не все поля, их можно выделить при нажатии на кнопку отправки формы. О неактивных кнопках есть хорошая статья.
#form
vc.ru
14 лайфхаков для дизайна UX-форм — Дизайн на vc.ru
Как не оттолкнуть пользователя и спроектировать в вашем приложении удобную форму для ввода данных? Дизайнеры SimbirSoft поделились советами по созданию UX-форм. Продолжаем серию статей о дизайне, в основе которой наша практика разработки интерфейсов и прототипов…
20 самых популярных постов в 2021 году:
1. Как тестировать User Flow: четыре метода и лайфхак для бесплатного UI-тестирования — статья Кирилла Шерстобитова. Анонс в ВК получил 89 лайков и 71 репост.
2. Пользователям плевать на дизайн: как устроен «хороший UX» на самом деле — статья «Атвинты». 67/65.
3. Прототипирование стартапов — запись моего доклада. 59/71.
4. Фак юикс — конспект доклада Ильи Бирмана. 63/58.
5. Fintech Design Conf 2020 — записи докладов мероприятия. 61/58.
6. Аудит интерфейса: как его проводить и почему это проектирование наоборот — статья «Собаки Павловой». 60/59.
7. Avito Design Talk 2020 — записи докладов мероприятия. 56/59.
8. 15 советов для улучшения UX форм регистрации и входа в систему — перевод статьи Эрика Кеннеди. 56/55.
9. Fintech Design Conf 2021 — записи докладов мероприятия. 50/57.
10. Как выглядит хороший макет — статья Михаила Озорнина. 47/48.
11. Отображение ошибок в интерфейсе (часть 2, часть 3) — статьи Насти Овсянниковой. 49/42.
12. Фиксируем результаты UX-тестирования интерфейса на бегу: экономим время и обходимся без объёмных документов — статья «Собаки Павловой». 49/42.
13. «Я потерял веру в UX»: основатель агентства о том, как корпорации усложняют интерфейсы ради увеличения прибыли — перевод статьи Марка Херста. 48/39.
14. Схематизация опыта с CJM и Service Blueprint: практика гибридной нотации — статья Андрея Шапиро. 52/34.
15. Четыре фазы разработки интерфейса: что обсуждать с заказчиком, когда нет даже картинок — статья Ахнафа Кунакулова и Антона Илларионова. 50/35.
16. Интерфейсные тексты: как дизайнеру начать писать грамотнее — перевод статьи Дэвида Холла. 41/43.
17. Тёмный паттерн: как Яндекс манипулирует пользователями — статья Левана Джамелашвили. 53/31.
18. Информационная архитектура: краткий экскурс — статья Павла Шерера. 43/41.
19. Как создавать полезные для бизнеса дашборды: алгоритм, принципы вёрстки, инструменты, архитектура — статья Романа Бунина. 44/37.
20. M-commerce: 11 нюансов навигации в мобильной версии интернет-магазина — статья KISLORODа. 44/37.
1. Как тестировать User Flow: четыре метода и лайфхак для бесплатного UI-тестирования — статья Кирилла Шерстобитова. Анонс в ВК получил 89 лайков и 71 репост.
2. Пользователям плевать на дизайн: как устроен «хороший UX» на самом деле — статья «Атвинты». 67/65.
3. Прототипирование стартапов — запись моего доклада. 59/71.
4. Фак юикс — конспект доклада Ильи Бирмана. 63/58.
5. Fintech Design Conf 2020 — записи докладов мероприятия. 61/58.
6. Аудит интерфейса: как его проводить и почему это проектирование наоборот — статья «Собаки Павловой». 60/59.
7. Avito Design Talk 2020 — записи докладов мероприятия. 56/59.
8. 15 советов для улучшения UX форм регистрации и входа в систему — перевод статьи Эрика Кеннеди. 56/55.
9. Fintech Design Conf 2021 — записи докладов мероприятия. 50/57.
10. Как выглядит хороший макет — статья Михаила Озорнина. 47/48.
11. Отображение ошибок в интерфейсе (часть 2, часть 3) — статьи Насти Овсянниковой. 49/42.
12. Фиксируем результаты UX-тестирования интерфейса на бегу: экономим время и обходимся без объёмных документов — статья «Собаки Павловой». 49/42.
13. «Я потерял веру в UX»: основатель агентства о том, как корпорации усложняют интерфейсы ради увеличения прибыли — перевод статьи Марка Херста. 48/39.
14. Схематизация опыта с CJM и Service Blueprint: практика гибридной нотации — статья Андрея Шапиро. 52/34.
15. Четыре фазы разработки интерфейса: что обсуждать с заказчиком, когда нет даже картинок — статья Ахнафа Кунакулова и Антона Илларионова. 50/35.
16. Интерфейсные тексты: как дизайнеру начать писать грамотнее — перевод статьи Дэвида Холла. 41/43.
17. Тёмный паттерн: как Яндекс манипулирует пользователями — статья Левана Джамелашвили. 53/31.
18. Информационная архитектура: краткий экскурс — статья Павла Шерера. 43/41.
19. Как создавать полезные для бизнеса дашборды: алгоритм, принципы вёрстки, инструменты, архитектура — статья Романа Бунина. 44/37.
20. M-commerce: 11 нюансов навигации в мобильной версии интернет-магазина — статья KISLORODа. 44/37.
Брайан Миллар написал об экстремальных пользователях.
— Они отличаются от среднего пользователя;
— Они могут показать, как будет вести себя основная масса потребителей через несколько лет, или обладают особыми потребностями, которые не удовлетворяет ни один из существующих продуктов;
— Можно многое узнать, поговорив с продвинутыми пользователями смартфонов, но ещё больше — от тех, кто принципиально ими не пользуется или даже получает информацию из папочек;
— На экстремальных пользователях можно проверить самые прорывные идеи, которые не воспримет обычная фокус-группа;
— Экстремальные пользователи помогут а) увидеть ограничения и узкие места вашего продукта, б) выявить его неочевидные особенности, в) узнать, что вызывает неприятие;
— Опыт таких пользователей поможет улучшить продукт: найти решения, подходящие экстремальным пользователям, и сделать его лучше для обычных пользователей.
Кстати, включил реакции, чтобы следующий топ UX Notes можно было определить на основе лайков и дизлайков в Телеграме, а не лайков в ВК. Но работают они только в последних версиях Телеграма.
— Они отличаются от среднего пользователя;
— Они могут показать, как будет вести себя основная масса потребителей через несколько лет, или обладают особыми потребностями, которые не удовлетворяет ни один из существующих продуктов;
— Можно многое узнать, поговорив с продвинутыми пользователями смартфонов, но ещё больше — от тех, кто принципиально ими не пользуется или даже получает информацию из папочек;
— На экстремальных пользователях можно проверить самые прорывные идеи, которые не воспримет обычная фокус-группа;
— Экстремальные пользователи помогут а) увидеть ограничения и узкие места вашего продукта, б) выявить его неочевидные особенности, в) узнать, что вызывает неприятие;
— Опыт таких пользователей поможет улучшить продукт: найти решения, подходящие экстремальным пользователям, и сделать его лучше для обычных пользователей.
Кстати, включил реакции, чтобы следующий топ UX Notes можно было определить на основе лайков и дизлайков в Телеграме, а не лайков в ВК. Но работают они только в последних версиях Телеграма.
Продуктовый дизайн (UX/UI), брендинг и аналитика
Экстремальные пользователи: ценность метода в развитии продукта
Исследование на тему экстремальных пользователей в дизайн-мышлении: кто это, и как они помогают найти точки для развития продукта.
Антон Жиянов написал о работе с почтовыми адресами.
— Определяйте индекс автоматически. Стоит добавить: если продукт умеет определять индекс по адресу, размещайте сначала поле для ввода адреса, а затем — для ввода индекса;
— Храните адрес вместе с индексом: иногда адреса отличаются только индексом. Например, в Устьянском районе Архангельской области 5 раз встречаются деревни Бережная с разными индексами;
— Храните номер дома как строку, а не число. Иногда новые дома получают номера, начинающиеся с нуля. «Электросталь пр-т Ленина 4» и «Электросталь пр-т Ленина 04» — 2 разных адреса;
— Давайте возможность ввести адрес вручную. Жизнь богаче любого адресного справочника. Если адреса в справочнике нет, предупреждайте о возможной ошибке, человек может просто перепутать номер дома;
— Не делайте поля для ввода улицы или дома обязательными. В России много адресов без улицы или дома;
— Чтобы избежать путаницы, не склеивайте номера домов с литерами. «Звёздный 23З» → «Звёздный 23 лит З», «23Ч» → «23 лит Ч»;
— Автоматически определяйте город: по координатам в приложении или IP-адресу в браузере. Так можно избежать назойливого вопроса о городе при открытии сайта и показать правильную стоимость доставки;
— Если клиент получает заказ на почте, показывайте адрес и часы работы почтового отделения;
— Если заказ доставит курьер, определяйте ближайшее метро.
Смотрите также дополнение в блоге «Дадаты».
— Определяйте индекс автоматически. Стоит добавить: если продукт умеет определять индекс по адресу, размещайте сначала поле для ввода адреса, а затем — для ввода индекса;
— Храните адрес вместе с индексом: иногда адреса отличаются только индексом. Например, в Устьянском районе Архангельской области 5 раз встречаются деревни Бережная с разными индексами;
— Храните номер дома как строку, а не число. Иногда новые дома получают номера, начинающиеся с нуля. «Электросталь пр-т Ленина 4» и «Электросталь пр-т Ленина 04» — 2 разных адреса;
— Давайте возможность ввести адрес вручную. Жизнь богаче любого адресного справочника. Если адреса в справочнике нет, предупреждайте о возможной ошибке, человек может просто перепутать номер дома;
— Не делайте поля для ввода улицы или дома обязательными. В России много адресов без улицы или дома;
— Чтобы избежать путаницы, не склеивайте номера домов с литерами. «Звёздный 23З» → «Звёздный 23 лит З», «23Ч» → «23 лит Ч»;
— Автоматически определяйте город: по координатам в приложении или IP-адресу в браузере. Так можно избежать назойливого вопроса о городе при открытии сайта и показать правильную стоимость доставки;
— Если клиент получает заказ на почте, показывайте адрес и часы работы почтового отделения;
— Если заказ доставит курьер, определяйте ближайшее метро.
Смотрите также дополнение в блоге «Дадаты».
antonz.ru
Почтовые адреса в интерфейсе
6 правил для работы с адресами.
Джаскаран Сингх написал о расположении кнопок «Ок» и «Отмена» в диалоговом окне.
— Плюсы «Ок — Отмена»: логический порядок расположения вариантов (сначала основное, затем дополнительное) совпадает с порядком чтения, если человек читает слева направо; с помощью клавиатуры можно быстрее перейти к кнопке «Ок», которая нужна пользователям чаще;
— Плюсы «Отмена — Ок»: основная кнопка находится там же, где заканчивается движение пользовательского взгляда; «Отмена» возвращает пользователя назад, а «Ок» перемещает дальше, поэтому такое расположение кнопок соответствует логике отображения прошлого слева, а будущего справа;
— Несмотря на плюсы разных вариантов, надо придерживаться стандартов платформы: в Windows «Ок — Отмена», в интерфейсах Apple «Отмена — Ок»;
— Если у вас веб-приложение, узнайте или (если статистики нет) предположите, какая платформа у большинства ваших пользователей;
— Придерживайтесь выбранного порядка расположения кнопок во всех интерфейсах своего продукта.
#layout #button #popup
— Плюсы «Ок — Отмена»: логический порядок расположения вариантов (сначала основное, затем дополнительное) совпадает с порядком чтения, если человек читает слева направо; с помощью клавиатуры можно быстрее перейти к кнопке «Ок», которая нужна пользователям чаще;
— Плюсы «Отмена — Ок»: основная кнопка находится там же, где заканчивается движение пользовательского взгляда; «Отмена» возвращает пользователя назад, а «Ок» перемещает дальше, поэтому такое расположение кнопок соответствует логике отображения прошлого слева, а будущего справа;
— Несмотря на плюсы разных вариантов, надо придерживаться стандартов платформы: в Windows «Ок — Отмена», в интерфейсах Apple «Отмена — Ок»;
— Если у вас веб-приложение, узнайте или (если статистики нет) предположите, какая платформа у большинства ваших пользователей;
— Придерживайтесь выбранного порядка расположения кнопок во всех интерфейсах своего продукта.
#layout #button #popup
UXPUB 🇺🇦 Дизайн-спільнота
ОК-Отмена или Отмена-ОК? Проблема порядка кнопок
Должна ли кнопка «ОК»располагаться до или после кнопки «Отмена»? Следование стандартам платформы важнее, чем оптимизация отдельного диалогового окна
Татьяна Чернявская написала о взаимной супервизии.
— Она позволяет развиваться, когда не помогают обычные практики вроде общения с более опытными коллегами, чтения книг и статей, посещения конференций. Обычно с этим сталкиваются синьоры и лиды, но практика может пригодиться и мидлам;
— Подходит специалистам в разных областях. Например, Татьяна занимается UX-исследованиями;
— Суть взаимной супервизии в том, что два профессионала изучают проекты друг друга и обмениваются обратной связью. От супервизии, практикуемой в психотерапии, отличается тем, что процесс двусторонний;
— Не используется для оценки профессионального уровня участников;
— Помогает получить свежий взгляд на свою работу и найти в чужой практике приёмы, которые захочется взять на вооружение, увидеть знакомые процессы в новом свете, прокачать профессиональную насмотренность, лучше понять применяемые в компании методологии, а также сплотиться с коллегами;
— Проще всего проводить внутри компании (из-за NDA);
— Специалисты должны быть примерно одного уровня, это не наставничество;
— Им должно быть комфортно общаться друг с другом;
— Чтобы получить больше инсайтов, для супервизии лучше выбрать самый сложный, а не лучший из реализованных проектов (задачу);
— Стоит учитывать, что полный цикл супервизии может занять 4–5 часов;
— Оптимально проводить её не чаще раза в квартал, желательно выбирать разные проекты и менять напарников;
— В самом начале супервизии надо выбрать проекты и обговорить, почему выбраны именно они, на что смотреть в ходе супервизии и в каком формате давать обратную связь, чтобы всем было комфортно;
— Изучая проект напарника, стоит отметить его сильные стороны, что получилось хорошо, какие были допущены ошибки, а также приёмы, которые хотелось бы взять на вооружение;
— Затем надо провести встречу и обменяться обратной связью. По предварительной договорённости инсайтами и полученными знаниями (или их частью) можно поделиться с командой;
— Татьяна проводит личную ретроспективу, но благодаря взаимной супервизии увидела недостатки, которые не замечала за собой и которым не придавала значения.
— Она позволяет развиваться, когда не помогают обычные практики вроде общения с более опытными коллегами, чтения книг и статей, посещения конференций. Обычно с этим сталкиваются синьоры и лиды, но практика может пригодиться и мидлам;
— Подходит специалистам в разных областях. Например, Татьяна занимается UX-исследованиями;
— Суть взаимной супервизии в том, что два профессионала изучают проекты друг друга и обмениваются обратной связью. От супервизии, практикуемой в психотерапии, отличается тем, что процесс двусторонний;
— Не используется для оценки профессионального уровня участников;
— Помогает получить свежий взгляд на свою работу и найти в чужой практике приёмы, которые захочется взять на вооружение, увидеть знакомые процессы в новом свете, прокачать профессиональную насмотренность, лучше понять применяемые в компании методологии, а также сплотиться с коллегами;
— Проще всего проводить внутри компании (из-за NDA);
— Специалисты должны быть примерно одного уровня, это не наставничество;
— Им должно быть комфортно общаться друг с другом;
— Чтобы получить больше инсайтов, для супервизии лучше выбрать самый сложный, а не лучший из реализованных проектов (задачу);
— Стоит учитывать, что полный цикл супервизии может занять 4–5 часов;
— Оптимально проводить её не чаще раза в квартал, желательно выбирать разные проекты и менять напарников;
— В самом начале супервизии надо выбрать проекты и обговорить, почему выбраны именно они, на что смотреть в ходе супервизии и в каком формате давать обратную связь, чтобы всем было комфортно;
— Изучая проект напарника, стоит отметить его сильные стороны, что получилось хорошо, какие были допущены ошибки, а также приёмы, которые хотелось бы взять на вооружение;
— Затем надо провести встречу и обменяться обратной связью. По предварительной договорённости инсайтами и полученными знаниями (или их частью) можно поделиться с командой;
— Татьяна проводит личную ретроспективу, но благодаря взаимной супервизии увидела недостатки, которые не замечала за собой и которым не придавала значения.
Хабр
Как развиваться ИТ-специалистам: метод взаимной супервизии
Что делать специалисту, если он хочет активно расти в своей области? Как правило, джунам и мидлам помогают стандартные практики: общение с более опытными коллегами, чтение профессиональных книг и...
Александра Савельева написала для начинающих статью о метриках.
— Метрики дают фактические знания, помогают более осознанно развивать продукт и трезво оценивать эффективность работы дизайнера. Цифры — отличный аргумент в споре;
— Считать их нет смысла, если продуктом пользуется 100 человек, так как каждый такой пользователь сильно влияет на показатели;
— Большое количество «Пользователей в день» или «Заказов в день» не всегда означает успех. Поток новых пользователей может быть вызван рекламой;
— Метрики можно разделить на а) метрики бизнеса (количество пользователей и заказов в день, выручка), которые зависят от сезона, инфляции, мировых трендов и рекламы, б) метрики продукта, которые обычно измеряются в процентах и не зависят от количества пользователей;
— Пример типичной продуктовой метрики — конверсия с одной страницы на другую. Важно знать её для всех магистральных сценариев;
— Важная продуктовая метрика — retention — показывает, какой процент пользователей возвращается в течение выбранного периода времени;
— Выбор периода зависит от продукта. В приложении для знакомств важен ретеншн в короткие периоды, в сервисе для путешествий — от месяца до года, так как большинство путешествует не каждую неделю;
— Дизайнеру лучше ориентироваться на метрики продукта. Выручка и количество пользователей зависят не только от его работы.
— Метрики дают фактические знания, помогают более осознанно развивать продукт и трезво оценивать эффективность работы дизайнера. Цифры — отличный аргумент в споре;
— Считать их нет смысла, если продуктом пользуется 100 человек, так как каждый такой пользователь сильно влияет на показатели;
— Большое количество «Пользователей в день» или «Заказов в день» не всегда означает успех. Поток новых пользователей может быть вызван рекламой;
— Метрики можно разделить на а) метрики бизнеса (количество пользователей и заказов в день, выручка), которые зависят от сезона, инфляции, мировых трендов и рекламы, б) метрики продукта, которые обычно измеряются в процентах и не зависят от количества пользователей;
— Пример типичной продуктовой метрики — конверсия с одной страницы на другую. Важно знать её для всех магистральных сценариев;
— Важная продуктовая метрика — retention — показывает, какой процент пользователей возвращается в течение выбранного периода времени;
— Выбор периода зависит от продукта. В приложении для знакомств важен ретеншн в короткие периоды, в сервисе для путешествий — от месяца до года, так как большинство путешествует не каждую неделю;
— Дизайнеру лучше ориентироваться на метрики продукта. Выручка и количество пользователей зависят не только от его работы.
Medium
Метрики для дизайнера
Метрики — одна из самых важных тем. Изучение этого вопроса является необходимым условием для профессионального роста.
Илья Бирман написал, как подойти к созданию дизайн-системы, чтобы она принесла пользу благодаря систематизации, но не мешала развивать продукт.
— Иногда о создании дизайн-системы задумываются просто из-за моды;
— Сначала соберите в один документ компоненты и стили, которые давно используются в вашем продукте и доказали свою нужность и универсальность. Может оказаться, что это всего несколько кнопок, иконок, стилей текста и один попап;
— Детально проработайте их поведение (с длинным текстом, в тёмном режиме, на маленьком экране). Вместе с разработчиками внедрите везде их эталонную реализацию;
— Если после этого перекрашивание кнопок и замена шрифта во всём продукте занимает больше минуты, к следующему шагу переходить рано;
— Развивайте библиотеку, постепенно переводя продукт с несистемных компонентов на системные. В одном месте есть кнопка с иконкой — добавьте иконки в библиотечные кнопки, тестируйте, внедряйте;
— Заниматься развитием библиотеки самой по себе неэффективно. Развивайте её вместе с продуктом, когда строите в нём что-то новое;
— Может оказаться, что до каких‑то частей продукта систематизация не дойдёт ещё несколько лет. Значит вы просто их не трогаете, потому что они не важные.
— Иногда о создании дизайн-системы задумываются просто из-за моды;
— Сначала соберите в один документ компоненты и стили, которые давно используются в вашем продукте и доказали свою нужность и универсальность. Может оказаться, что это всего несколько кнопок, иконок, стилей текста и один попап;
— Детально проработайте их поведение (с длинным текстом, в тёмном режиме, на маленьком экране). Вместе с разработчиками внедрите везде их эталонную реализацию;
— Если после этого перекрашивание кнопок и замена шрифта во всём продукте занимает больше минуты, к следующему шагу переходить рано;
— Развивайте библиотеку, постепенно переводя продукт с несистемных компонентов на системные. В одном месте есть кнопка с иконкой — добавьте иконки в библиотечные кнопки, тестируйте, внедряйте;
— Заниматься развитием библиотеки самой по себе неэффективно. Развивайте её вместе с продуктом, когда строите в нём что-то новое;
— Может оказаться, что до каких‑то частей продукта систематизация не дойдёт ещё несколько лет. Значит вы просто их не трогаете, потому что они не важные.
Бюро Горбунова
Просят сделать дизайн‑систему
Здравствуйте!
На работе просят сделать дизайн-систему для веб-сервиса. Задача — облегчить жизнь разработчикам и в целом структурировать все компоненты и стили.
Уже гуглил Карбон, Флюент, Спектрум, но это всё системы крупных компаний. Кажется, что их примеры…
На работе просят сделать дизайн-систему для веб-сервиса. Задача — облегчить жизнь разработчикам и в целом структурировать все компоненты и стили.
Уже гуглил Карбон, Флюент, Спектрум, но это всё системы крупных компаний. Кажется, что их примеры…
Станислав Хрусталёв собрал чеклист, как использовать QR-коды для создания позитивного клиентского опыта. Вот часть рекомендаций:
— Если это возможно и уместно, QR-коды использовать стоит, значительная часть людей к технологии готова;
— Сопровождайте код пояснением: что клиент должен сделать и что получит взамен. Также можно уточнить, что для считывания кода надо навести на него камеру телефона (или использовать специальное приложение, как в Ашане);
— Размещайте в QR-кодах лого компании, с брендированием они выглядят профессиональнее;
— Если код будет на офлайновом носителе, при выборе размера учитывайте дистанцию, с которой его будут считывать;
— Размещайте коды на поверхностях, с которыми клиенты не контактируют. Поверхность может начать стираться, и код перестанет работать;
— Убедитесь, что в месте его размещения хороший мобильный интернет или есть вайфай, иначе полезность такого кода устремится к нулю;
— QR-код на десктопной версии сайта может вести на мобильное приложение компании, чтобы пользователь мог легко зайти в магазин приложений со своего телефона (используйте deep linking). Такой же код на мобильной версии сайта вызывает вопросы;
— Чтобы у клиента не рябило в глазах, не размещайте рядом несколько разных кодов для разных целевых действий. Сделайте один код, за которым будет страница с меню из нескольких действий;
— Проверяйте, что целевая страница оптимизирована для просмотра на телефонах.
— Если это возможно и уместно, QR-коды использовать стоит, значительная часть людей к технологии готова;
— Сопровождайте код пояснением: что клиент должен сделать и что получит взамен. Также можно уточнить, что для считывания кода надо навести на него камеру телефона (или использовать специальное приложение, как в Ашане);
— Размещайте в QR-кодах лого компании, с брендированием они выглядят профессиональнее;
— Если код будет на офлайновом носителе, при выборе размера учитывайте дистанцию, с которой его будут считывать;
— Размещайте коды на поверхностях, с которыми клиенты не контактируют. Поверхность может начать стираться, и код перестанет работать;
— Убедитесь, что в месте его размещения хороший мобильный интернет или есть вайфай, иначе полезность такого кода устремится к нулю;
— QR-код на десктопной версии сайта может вести на мобильное приложение компании, чтобы пользователь мог легко зайти в магазин приложений со своего телефона (используйте deep linking). Такой же код на мобильной версии сайта вызывает вопросы;
— Чтобы у клиента не рябило в глазах, не размещайте рядом несколько разных кодов для разных целевых действий. Сделайте один код, за которым будет страница с меню из нескольких действий;
— Проверяйте, что целевая страница оптимизирована для просмотра на телефонах.
Hardclient
Чек-лист по работе с QR-кодами
Лучшие практики и грабли, на которые не стоит наступать
Bang Bang Education опубликовали киноальманах «Лепота» на Ютубе — бесплатно и без регистрации.
3:00 Fuckyou Digital
5:27 CLAN
8:30 Алексей Ивановский
11:05 Оля Панькова, Владимир Шипилов
13:40 Дима Корниенко, Ваня Корниенко
16:50 Макси Шилов
19:40 Алена Лебедева
21:35 Регина Турбина
23:30 Ждан Филиппов
25:45 Владислав Деревянных и «Восход»
28:50 Вова Аюев
32:00 Денис Башев
34:25 Роман Ерохнович
37:00 Mishka Luganski
39:20 Олег Пащенко
41:50 Сергей Гуров
45:35 Electric Red
48:15 Holystick
51:00 Саша Ермоленко
54:00 Александр Загорский
56:50 Антон Горбунов
59:35 Дима Родионов
1:02:00 Sila Sveta
1:04:35 Just Be Nice
1:07:15 Александр Сметанка
1:09:10 Кирилл Глущенко
1:13:00 Жи-Ши
1:15:45 Татьяна Егошина
1:17:50 Сергей Серов, Катерина Терехова
1:20:10 White Russian Studio
1:23:15 ONY
1:25:30 Андрей Зубрилов
1:28:10 Анатолий Беликов
1:32:45 MAGIC CAMP
1:35:20 Антон Шнайдер
1:37:40 Александр Васин и группа «Ижица» (есть отдельное видео)
3:00 Fuckyou Digital
5:27 CLAN
8:30 Алексей Ивановский
11:05 Оля Панькова, Владимир Шипилов
13:40 Дима Корниенко, Ваня Корниенко
16:50 Макси Шилов
19:40 Алена Лебедева
21:35 Регина Турбина
23:30 Ждан Филиппов
25:45 Владислав Деревянных и «Восход»
28:50 Вова Аюев
32:00 Денис Башев
34:25 Роман Ерохнович
37:00 Mishka Luganski
39:20 Олег Пащенко
41:50 Сергей Гуров
45:35 Electric Red
48:15 Holystick
51:00 Саша Ермоленко
54:00 Александр Загорский
56:50 Антон Горбунов
59:35 Дима Родионов
1:02:00 Sila Sveta
1:04:35 Just Be Nice
1:07:15 Александр Сметанка
1:09:10 Кирилл Глущенко
1:13:00 Жи-Ши
1:15:45 Татьяна Егошина
1:17:50 Сергей Серов, Катерина Терехова
1:20:10 White Russian Studio
1:23:15 ONY
1:25:30 Андрей Зубрилов
1:28:10 Анатолий Беликов
1:32:45 MAGIC CAMP
1:35:20 Антон Шнайдер
1:37:40 Александр Васин и группа «Ижица» (есть отдельное видео)
YouTube
«Лепота»: киноальманах об истории русской культуры и дизайна
#дизайн #киноодизайне
Саундтрек, стикеры, игра:
https://bangbangeducation.ru/movie/lepota
Балалайки:
https://bangbangstudio.ru
«Лепота» — это киноальманах об истории русской культуры от появления кириллицы и народных промыслов до конструктивизма, советского…
Саундтрек, стикеры, игра:
https://bangbangeducation.ru/movie/lepota
Балалайки:
https://bangbangstudio.ru
«Лепота» — это киноальманах об истории русской культуры от появления кириллицы и народных промыслов до конструктивизма, советского…
Гонсалу Диас написал, почему надо отказаться от бесконечного скрола.
— Он эффективен для просмотра большого объёма информации с небольших устройств, так как устраняет трение: пользователю не надо ничего нажимать, чтобы получить новый контент;
— Он идеален для соцсетей: контента много, а пользователь не особо вовлечён и ничего конкретного не ищет;
— С ним пользователи могут теряться на сайте, медленнее находить что-то конкретное, им недоступен подвал. Об особенностях бесконечного скрола писали Михаил Букин и Кристиан Холст;
— Но основная проблема заключается в эксплуатации синдрома упущенной выгоды (FoMO), истощении человека стимулами и накоплении ненужного контента;
— Разделение на страницы — наиболее понятный способ организовать информацию, востребованный в электронной коммерции. Количество элементов на каждой странице ограничено, пользователи это понимают и могут оценить объем просмотренного и оставшегося контента, вспомнить, где видели понравившийся товар;
— Размещение в конце списка с контентом кнопки «Загрузить ещё» предполагает, что пользователь не обязательно захочет ещё. Плюс, появляется доступ к подвалу;
— Соцсети должны взять на себя ответственность за информационную перегрузку и уходить от высокоскоростного контента к идеально подобранному персонализированному, анонсы которого пользователь просмотрит в две прокрутки;
— Сейчас, в мире бесконечного количества информации, мы можем разве что следить за своими привычками и использовать ограниченные возможности своего внимания в первую очередь для достижения своих целей.
— Он эффективен для просмотра большого объёма информации с небольших устройств, так как устраняет трение: пользователю не надо ничего нажимать, чтобы получить новый контент;
— Он идеален для соцсетей: контента много, а пользователь не особо вовлечён и ничего конкретного не ищет;
— С ним пользователи могут теряться на сайте, медленнее находить что-то конкретное, им недоступен подвал. Об особенностях бесконечного скрола писали Михаил Букин и Кристиан Холст;
— Но основная проблема заключается в эксплуатации синдрома упущенной выгоды (FoMO), истощении человека стимулами и накоплении ненужного контента;
— Разделение на страницы — наиболее понятный способ организовать информацию, востребованный в электронной коммерции. Количество элементов на каждой странице ограничено, пользователи это понимают и могут оценить объем просмотренного и оставшегося контента, вспомнить, где видели понравившийся товар;
— Размещение в конце списка с контентом кнопки «Загрузить ещё» предполагает, что пользователь не обязательно захочет ещё. Плюс, появляется доступ к подвалу;
— Соцсети должны взять на себя ответственность за информационную перегрузку и уходить от высокоскоростного контента к идеально подобранному персонализированному, анонсы которого пользователь просмотрит в две прокрутки;
— Сейчас, в мире бесконечного количества информации, мы можем разве что следить за своими привычками и использовать ограниченные возможности своего внимания в первую очередь для достижения своих целей.
www.uprock.ru
Давайте поговорим о бесконечной прокрутке — читайте на UPROCK
Мы живем в быстро меняющемся онлайн-мире. : читайте полезные статьи о дизайне в блоге UPROCK