Вячеслав Андреев написал об адаптации мобильного браузера под ТВ.
— В среднем телевизоре железо слабее, чем в среднем телефоне. Придётся отказаться от анимаций и некоторых функций вроде вкладок (каждая вкладка требует памяти и вычислительной мощности);
— Стоит адаптировать UI-ресурсы с учётом других разрешений экранов, чтобы интерфейс не выглядел размытым;
— С телевизором человек использует пульт, поэтому лучше отказаться от лишних меню и оставить главное — поисковую строку;
— В навигации между несвязанными сайтами поможет история посещённых сайтов и блок с избранными сайтами;
— Из меню стоит убрать всё, чем не удобно пользоваться на ТВ, и оставить: Назад, Домашняя страница, Обновить, Добавить в избранное, Изменить адрес сайта;
— Пользователю надо понимать, какой элемент сейчас выделен (что произойдёт при нажатии «Ок» на пульте), но такого состояния может не быть на устройствах с сенсорным экраном. И выделение элементов может работать не на всех сайтах. Решение: курсор, который можно перемещать по экрану;
— Для курсора может потребоваться отдельный режим скролинга;
— С пульта неудобно вводить текст, поэтому стоит добавить голосовой ввод с микрофона на пульте. И особенно полезны подсказки при вводе.
#tv
— В среднем телевизоре железо слабее, чем в среднем телефоне. Придётся отказаться от анимаций и некоторых функций вроде вкладок (каждая вкладка требует памяти и вычислительной мощности);
— Стоит адаптировать UI-ресурсы с учётом других разрешений экранов, чтобы интерфейс не выглядел размытым;
— С телевизором человек использует пульт, поэтому лучше отказаться от лишних меню и оставить главное — поисковую строку;
— В навигации между несвязанными сайтами поможет история посещённых сайтов и блок с избранными сайтами;
— Из меню стоит убрать всё, чем не удобно пользоваться на ТВ, и оставить: Назад, Домашняя страница, Обновить, Добавить в избранное, Изменить адрес сайта;
— Пользователю надо понимать, какой элемент сейчас выделен (что произойдёт при нажатии «Ок» на пульте), но такого состояния может не быть на устройствах с сенсорным экраном. И выделение элементов может работать не на всех сайтах. Решение: курсор, который можно перемещать по экрану;
— Для курсора может потребоваться отдельный режим скролинга;
— С пульта неудобно вводить текст, поэтому стоит добавить голосовой ввод с микрофона на пульте. И особенно полезны подсказки при вводе.
#tv
Хабр
Из микро в макро: как адаптировать мобильное приложение под ТВ-платформу
Рано или поздно Android-разработчику станет любопытно попробовать новые платформы. Устройств с этой ОС много — есть из чего выбрать. Например, сейчас набирает популярность разработка под умные...
👍7❤3🤡1
Катя Григорьева написала о влиянии визуальной привлекательности на удобство использования.
— Позитивная эмоциональная реакция на привлекательный интерфейс делает людей терпимее к небольшим неудобствам при взаимодействии (но только небольшим);
— Они могут оценивать удобство интерфейса выше, чем на самом деле. Это мешает увидеть часть проблем на пользовательском тестировании;
— Исследование Центра дизайна Hitachi в 1995 году показало сильное влияние эстетики на людей, даже если они оценивают функциональность системы;
— Можно немного снизить разрыв между опытом респондентов и тем, какие они дают оценки;
— Респонденты не должны давать свои оценки под давлением. Убеждайте, что это полезно. Давайте возможность комментировать, задавая открытые вопросы, но не давите, если им нечего сказать. Молчание — важная составляющая в общении исследователя и респондента;
— Они не должны хотеть порадовать вас. Подчёркивайте, что не вы разрабатываете этот дизайн и негативные комментарии вас не расстроят. И старайтесь эмоционально не реагировать;
— Направляйте респондентов за пределы визуального слоя. Используйте расплывчатые формулировки вроде «Есть ли у вас комментарии о том, насколько легко или сложно было найти эту информацию?»;
— Можно вернуть респондента на шаг, показавшийся особенно сложным, и попросить описать, что здесь произошло.
#user_testing
— Позитивная эмоциональная реакция на привлекательный интерфейс делает людей терпимее к небольшим неудобствам при взаимодействии (но только небольшим);
— Они могут оценивать удобство интерфейса выше, чем на самом деле. Это мешает увидеть часть проблем на пользовательском тестировании;
— Исследование Центра дизайна Hitachi в 1995 году показало сильное влияние эстетики на людей, даже если они оценивают функциональность системы;
— Можно немного снизить разрыв между опытом респондентов и тем, какие они дают оценки;
— Респонденты не должны давать свои оценки под давлением. Убеждайте, что это полезно. Давайте возможность комментировать, задавая открытые вопросы, но не давите, если им нечего сказать. Молчание — важная составляющая в общении исследователя и респондента;
— Они не должны хотеть порадовать вас. Подчёркивайте, что не вы разрабатываете этот дизайн и негативные комментарии вас не расстроят. И старайтесь эмоционально не реагировать;
— Направляйте респондентов за пределы визуального слоя. Используйте расплывчатые формулировки вроде «Есть ли у вас комментарии о том, насколько легко или сложно было найти эту информацию?»;
— Можно вернуть респондента на шаг, показавшийся особенно сложным, и попросить описать, что здесь произошло.
#user_testing
dsgners.ru
Как визуал влияет на UX: эффект эстетики и удобства использования — дизайнерс
Привет, эта статья — первая из серии переводов статей, посвящённых теме UX. Мы рассмотрим основные принципы, которые помогают лучшим из лучших дизайнеров создавать удобные и понятные интерфейсы. Поехали!
👍23❤6
Тарик Шебл написал, почему лучше начинать дизайн с оттенков серого.
— Такой дизайн быстрее создавать (поиск подходящих цветов требует времени) и править (при перемещении элементов и изменении их размеров реже возникают конфликты);
— При обсуждении такого дизайна люди не отвлекаются на цвета, которые вызывают разные ассоциации, и фокусируются на обсуждении структуры и компоновки;
— Цвет — не самая важная составляющая дизайна. Дизайн должен работать ещё до добавления цвета;
— Дизайн должен быть функциональным в любом цвете. Цвет может измениться из-за пользовательских настроек, нового фирменного стиля, а также восприниматься иначе из-за нарушений зрения.
In English. #color
— Такой дизайн быстрее создавать (поиск подходящих цветов требует времени) и править (при перемещении элементов и изменении их размеров реже возникают конфликты);
— При обсуждении такого дизайна люди не отвлекаются на цвета, которые вызывают разные ассоциации, и фокусируются на обсуждении структуры и компоновки;
— Цвет — не самая важная составляющая дизайна. Дизайн должен работать ещё до добавления цвета;
— Дизайн должен быть функциональным в любом цвете. Цвет может измениться из-за пользовательских настроек, нового фирменного стиля, а также восприниматься иначе из-за нарушений зрения.
In English. #color
www.uprock.ru
Почему всегда нужно начинать с дизайна в серых оттенках? — читайте на UPROCK
Многие дизайнеры привыкли с самого начала создавать макеты в цвете. Но что если спроектировать интерфейс в оттенках серого и лишь на завершающем этапе добавить цвета? Сегодня мы разберем 10 преимуществ такого подхода и узнаем, почему он может сделать ваш…
👍55❤3👎2
Ким Салазар написала о разнице между UX и CX.
— Уровни взаимодействия человека с компанией: 1) Одиночное взаимодействие, 2) Путешествие, 3) Отношения;
— Обычно UX-дизайнеры фокусируются на одиночном взаимодействии в цифровых каналах (реже — в офлайновых);
— Путешествие — это цепочка одиночных взаимодействий, возможно, в разных каналах. Например, заказ на сайте, подтверждение по телефону и электронной почте, получение товара от курьера;
— Здесь важно обеспечить бесшовные переходы между каналами и единство внешнего вида и голоса компании;
— Отношения — это вся совокупность путешествий и одиночных взаимодействий во время поиска, заказа, потребления товаров и услуг компании и дальнейшего взаимодействия (вроде ремонта и утилизации товаров);
— Для хорошего опыта на уровне отношений недостаточно хорошего опыта в каждом отдельном путешествии;
— Нужна координация между разными отделами компании, предвосхищение потребностей клиента, коммуникация с учётом всего предыдущего взаимодействия с ним;
— UX и CX по сути означают одно и то же. Важно стремиться улучшать опыт на всех уровнях взаимодействия, понимать, на какой уровень вы можете влиять, и договориться с командой о терминах, чтобы не было путаницы.
In English. #definition #cx
— Уровни взаимодействия человека с компанией: 1) Одиночное взаимодействие, 2) Путешествие, 3) Отношения;
— Обычно UX-дизайнеры фокусируются на одиночном взаимодействии в цифровых каналах (реже — в офлайновых);
— Путешествие — это цепочка одиночных взаимодействий, возможно, в разных каналах. Например, заказ на сайте, подтверждение по телефону и электронной почте, получение товара от курьера;
— Здесь важно обеспечить бесшовные переходы между каналами и единство внешнего вида и голоса компании;
— Отношения — это вся совокупность путешествий и одиночных взаимодействий во время поиска, заказа, потребления товаров и услуг компании и дальнейшего взаимодействия (вроде ремонта и утилизации товаров);
— Для хорошего опыта на уровне отношений недостаточно хорошего опыта в каждом отдельном путешествии;
— Нужна координация между разными отделами компании, предвосхищение потребностей клиента, коммуникация с учётом всего предыдущего взаимодействия с ним;
— UX и CX по сути означают одно и то же. Важно стремиться улучшать опыт на всех уровнях взаимодействия, понимать, на какой уровень вы можете влиять, и договориться с командой о терминах, чтобы не было путаницы.
In English. #definition #cx
Teletype
В чём разница между UX и CX? Конспект статьи NN/g
Конспект статьи Nielsen Norman Group
👍26❤4
Станислав Хрусталёв написал о сортировке товаров в интернет-магазине.
— Размещают кнопку сортировки обычно рядом с фильтрами, так как элементы близки по смыслу;
— Её можно фиксировать при прокрутке или скрывать и снова отображать при скроле вверх;
— Если сортировка настраивается в фильтре, чтобы пользователи её нашли, можно написать на кнопке «Сортировка и фильтры»;
— Релевантная иконка: разнонаправленные стрелки или отсортированные линии разной длины. Порядок линий в иконке должен соответствовать текущему направлению сортировки;
— Чтобы было понятно, как сейчас упорядочен список и направление сортировки, лучше это подписать. Например, «Сначала дорогие»;
— По умолчанию показывайте по несколько популярных и релевантных товаров из ключевых подкатегорий, чтобы было видно разнообразие;
— Варианты сортировки лучше отображать в шторке, чтобы все они были достаточно крупными и нажимались без прокрутки;
— Их стоит упорядочить по популярности, при необходимости пояснить («По рейтингу — сначала товары с высокими оценками»), выделить текущую сортировку;
— Не добавляйте бессмысленные варианты сортировки вроде «Сначала товары с меньшей скидкой»;
— При нажатии на вариант сразу применяйте сортировку: закрывайте шторку, обновляйте список товаров, прокручивайте его в начало;
— При выборе активного варианта сортировки, достаточно просто закрыть шторку;
— Если направление сортировки не подписано, добавьте бейдж к иконке сортировки, чтобы показать, что она отличается от варианта по умолчанию.
#sorting #ecommerce
— Размещают кнопку сортировки обычно рядом с фильтрами, так как элементы близки по смыслу;
— Её можно фиксировать при прокрутке или скрывать и снова отображать при скроле вверх;
— Если сортировка настраивается в фильтре, чтобы пользователи её нашли, можно написать на кнопке «Сортировка и фильтры»;
— Релевантная иконка: разнонаправленные стрелки или отсортированные линии разной длины. Порядок линий в иконке должен соответствовать текущему направлению сортировки;
— Чтобы было понятно, как сейчас упорядочен список и направление сортировки, лучше это подписать. Например, «Сначала дорогие»;
— По умолчанию показывайте по несколько популярных и релевантных товаров из ключевых подкатегорий, чтобы было видно разнообразие;
— Варианты сортировки лучше отображать в шторке, чтобы все они были достаточно крупными и нажимались без прокрутки;
— Их стоит упорядочить по популярности, при необходимости пояснить («По рейтингу — сначала товары с высокими оценками»), выделить текущую сортировку;
— Не добавляйте бессмысленные варианты сортировки вроде «Сначала товары с меньшей скидкой»;
— При нажатии на вариант сразу применяйте сортировку: закрывайте шторку, обновляйте список товаров, прокручивайте его в начало;
— При выборе активного варианта сортировки, достаточно просто закрыть шторку;
— Если направление сортировки не подписано, добавьте бейдж к иконке сортировки, чтобы показать, что она отличается от варианта по умолчанию.
#sorting #ecommerce
Hardclient
Проектируем сортировку листинга в приложении: 116 гайдлайнов
Лучшие практики UX/UI в мобильном e-commerce
👍23❤4🔥2
Стас Мельников написал о некоторых паттернах, повышающих доступность сайтов.
— Автофокус — автоматическая фокусировка на первом поле, которое пользователь должен заполнить в форме;
— Если главная задача страницы — заполнение формы, автофокус помогает пользователям сразу ей заняться. Особенно полезно тем, кто использует только клавиатуру или скринридер. Не нужно проходить через шапку и навигацию страницы;
— Но важно учитывать контекст. Если незрячий пользователь перешёл к форме со стороннего ресурса, скорее всего, он захочет изучить, куда попал и прочитать хотя бы шапку;
— Skip link — ссылка «Перейти к основному содержимому» — самый первый элемент страницы, отображается тем, кто для перемещения по странице использует клавишу Tab или скринридер, позволяет пропустить шапку с навигацией и перейти к основному содержимому страницы;
— Кнопка «Наверх» — ссылка, которая приводит в меню, аналог клавиши PageUp. С её помощью удобно просматривать одну страницу за другой;
— Но важно, чтобы в коде она располагалась в конце блока с основным содержимым страницы.
#accessibility #navigation
— Автофокус — автоматическая фокусировка на первом поле, которое пользователь должен заполнить в форме;
— Если главная задача страницы — заполнение формы, автофокус помогает пользователям сразу ей заняться. Особенно полезно тем, кто использует только клавиатуру или скринридер. Не нужно проходить через шапку и навигацию страницы;
— Но важно учитывать контекст. Если незрячий пользователь перешёл к форме со стороннего ресурса, скорее всего, он захочет изучить, куда попал и прочитать хотя бы шапку;
— Skip link — ссылка «Перейти к основному содержимому» — самый первый элемент страницы, отображается тем, кто для перемещения по странице использует клавишу Tab или скринридер, позволяет пропустить шапку с навигацией и перейти к основному содержимому страницы;
— Кнопка «Наверх» — ссылка, которая приводит в меню, аналог клавиши PageUp. С её помощью удобно просматривать одну страницу за другой;
— Но важно, чтобы в коде она располагалась в конце блока с основным содержимым страницы.
#accessibility #navigation
Хабр
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 2
Я продолжаю рассказывать, как HTML и CSS могут улучшить или ухудшить доступность интерфейсов. В своём рассказе я использую свой опыт и моего незрячего знакомого Ильи. В этой статье будет: атрибут...
👍11❤1👎1🤯1
Forwarded from Егор Камелев | Канал нормального фрилансера | Проектирование интерфейсов, UX-дизайн, аналитика, проектная документация
«Чем толще техническая документация — тем лучше»
Одно из моих ранних заблуждений. Я даже не знаю, откуда это пошло. Наверное, со школьных и университетских времён, когда нужно было обязательно написать сочинение больше, чем на три страницы или реферат не меньше, чем на десять. При этом никого не волновало, если я мог раскрыть тему в меньшем объёме.
В технической документации объём будет интересовать только людей, связанных с бюрократическими процессами, но никак не разработчиков, которым с ней работать.
Поэтому первое, что я сделал в своих функциональных спецификациях, — избавился от 10% объёма, просто отказавшись от вводных слов типа:
— В этом разделе находятся следующие элементы
— Меню навигации состоит из
— Карточка товара включает в себя следующие составляющие
— Ссылка ведёт в раздел такой-то
Их я просто вычеркнул. Теперь после заголовка с названием раздела я без лишних вводных слов перечислял, из каких элементов он состоит.
Второе — вынес повторяющиеся описания в отдельные разделы. К сожалению, я не нашёл в ворде функции, похожей на мастера в Axure или компоненты в Фигме. Поэтому, по-старинке, в начале документа описывал сквозные элементы, а затем ссылался на них.
Например, в начале ФС у меня есть раздел «шапка», где я подробно расписываю все её составные части и состояния. И после этого уже не описываю её в рамках каждой отдельной страницы. Я просто в начале документа пишу, что шапка и подвал присутствуют на каждой странице, если иное не указано в ФС.
Или карточка товара в списке. Она может встречаться и на странице «Каталог», и в блоке «Сопутствующие товары» отдельного товара, и в блоке «Вы недавно смотрели» над подвалом, и в блоке «Не забудьте купить» на странице добавления товара в корзину. Вместо того, чтобы описывать её каждый раз во всех этих местах, я описываю её однажды в начале документа, а затем ссылаюсь на это описание.
Третье — описываю логику поведения и значения по умолчанию для отдельных сущностей, а в описании конкретной страницы уточняю только те, которые будут специфичны для неё. Взять, например, любую форму для отправки данных. В начале документа у меня есть полторы страницы текста «Общие принципы работы форм», где рассказано обо всех мелких нюансах: в каком поле курсор по умолчанию, где отображаются сообщения об ошибках, как происходит валидация, как блокируется кнопка отправки после нажатия (чтобы предотвратить случайное повторное нажатие) и так далее.
А когда дело доходит до конкретной формы на конкретной странице, я уже не описываю повторно все эти вещи, а уделяю внимание уникальным моментам: составу полей, ограничению по вводимым данным, типам ошибок.
Таким же образом я описываю общие принципы работы ссылок, языковых версий интерфейса, «печенек», модальных окон и прочих сквозных элементов.
Суммарно эти оптимизации привели к тому, что мои функциональные спецификации заметно «похудели», при этом не теряя полноты описания. Вместе с ними без следа исчез и подход «Чем толще техническая документация — тем лучше». ФС должна быть ровно такой толщины, которая позволяет минимальным количеством текста максимально описать систему.
Этот же принцип перекочевал и в функциональные требования, и в договоры, и в отчёты, в общем, в любые документы, которые я создаю для других людей.
Одно из моих ранних заблуждений. Я даже не знаю, откуда это пошло. Наверное, со школьных и университетских времён, когда нужно было обязательно написать сочинение больше, чем на три страницы или реферат не меньше, чем на десять. При этом никого не волновало, если я мог раскрыть тему в меньшем объёме.
В технической документации объём будет интересовать только людей, связанных с бюрократическими процессами, но никак не разработчиков, которым с ней работать.
Поэтому первое, что я сделал в своих функциональных спецификациях, — избавился от 10% объёма, просто отказавшись от вводных слов типа:
— В этом разделе находятся следующие элементы
— Меню навигации состоит из
— Карточка товара включает в себя следующие составляющие
— Ссылка ведёт в раздел такой-то
Их я просто вычеркнул. Теперь после заголовка с названием раздела я без лишних вводных слов перечислял, из каких элементов он состоит.
Второе — вынес повторяющиеся описания в отдельные разделы. К сожалению, я не нашёл в ворде функции, похожей на мастера в Axure или компоненты в Фигме. Поэтому, по-старинке, в начале документа описывал сквозные элементы, а затем ссылался на них.
Например, в начале ФС у меня есть раздел «шапка», где я подробно расписываю все её составные части и состояния. И после этого уже не описываю её в рамках каждой отдельной страницы. Я просто в начале документа пишу, что шапка и подвал присутствуют на каждой странице, если иное не указано в ФС.
Или карточка товара в списке. Она может встречаться и на странице «Каталог», и в блоке «Сопутствующие товары» отдельного товара, и в блоке «Вы недавно смотрели» над подвалом, и в блоке «Не забудьте купить» на странице добавления товара в корзину. Вместо того, чтобы описывать её каждый раз во всех этих местах, я описываю её однажды в начале документа, а затем ссылаюсь на это описание.
Третье — описываю логику поведения и значения по умолчанию для отдельных сущностей, а в описании конкретной страницы уточняю только те, которые будут специфичны для неё. Взять, например, любую форму для отправки данных. В начале документа у меня есть полторы страницы текста «Общие принципы работы форм», где рассказано обо всех мелких нюансах: в каком поле курсор по умолчанию, где отображаются сообщения об ошибках, как происходит валидация, как блокируется кнопка отправки после нажатия (чтобы предотвратить случайное повторное нажатие) и так далее.
А когда дело доходит до конкретной формы на конкретной странице, я уже не описываю повторно все эти вещи, а уделяю внимание уникальным моментам: составу полей, ограничению по вводимым данным, типам ошибок.
Таким же образом я описываю общие принципы работы ссылок, языковых версий интерфейса, «печенек», модальных окон и прочих сквозных элементов.
Суммарно эти оптимизации привели к тому, что мои функциональные спецификации заметно «похудели», при этом не теряя полноты описания. Вместе с ними без следа исчез и подход «Чем толще техническая документация — тем лучше». ФС должна быть ровно такой толщины, которая позволяет минимальным количеством текста максимально описать систему.
Этот же принцип перекочевал и в функциональные требования, и в договоры, и в отчёты, в общем, в любые документы, которые я создаю для других людей.
👍41🔥8❤1
Влад Попович написал о загрузчиках файлов.
— Дайте возможность как перетащить файл, так и выбрать в системном меню (удобно, если надо выбрать несколько файлов). Людям могут быть привычны разные способы выбора файлов для загрузки;
— Проработайте состояние для области загрузки, когда над ней находится перетаскиваемый файл. Кроме визуального изменения можно показать текст «Добавить 1 файл»;
— Также стоит изменить курсор с перетаскиваемым файлом (например, на курсор с плюсом);
— Отображайте прогресс загрузки файла, а если он не может быть загружен — причину («Файл не может превышать 5 МБ»);
— По возможности делайте загрузку немодальной, чтобы пользователь мог продолжить работу, пока файлы загружается;
— Часто панель с информацией о загрузке размещают в правом нижнем углу;
— Убедитесь, что она не перекрывает важный контент. Если перекрывает и файлы могут загружаться долго, проработайте состояние, когда эта панель свёрнута.
#uploading
— Дайте возможность как перетащить файл, так и выбрать в системном меню (удобно, если надо выбрать несколько файлов). Людям могут быть привычны разные способы выбора файлов для загрузки;
— Проработайте состояние для области загрузки, когда над ней находится перетаскиваемый файл. Кроме визуального изменения можно показать текст «Добавить 1 файл»;
— Также стоит изменить курсор с перетаскиваемым файлом (например, на курсор с плюсом);
— Отображайте прогресс загрузки файла, а если он не может быть загружен — причину («Файл не может превышать 5 МБ»);
— По возможности делайте загрузку немодальной, чтобы пользователь мог продолжить работу, пока файлы загружается;
— Часто панель с информацией о загрузке размещают в правом нижнем углу;
— Убедитесь, что она не перекрывает важный контент. Если перекрывает и файлы могут загружаться долго, проработайте состояние, когда эта панель свёрнута.
#uploading
Хабр
Проектирование загрузчика файлов
Всем привет! Меня зовут Влад, я работаю дизайнером в компании SC.Soft. Проектирую сложные интерфейсы для телеком-индустрии. В этой статье я поделюсь опытом в проектировании загрузчика файлов. Расскажу...
👍25🔥3🦄1
Роман Камушкин написал о хлебных крошках.
— Обычно они начинаются со ссылки на главную страницу;
— Если ширины экрана не хватает, можно показать несколько последних ссылок, а в начале разместить контрол для отображения меню со списком всех ссылок более высокого уровня;
— Также сократить хлебные крошки можно в середине, заменив 2 и более ссылок на троеточие, нажатие на которое открывает меню с ними;
— Можно обрезать текст в ссылках и показывать его целиком в тултипе, чтобы все элементы хлебных крошек были примерно одной ширины;
— Чтобы уведомить человека о событии, произошедшем на более высоком уровне, рядом с соответствующей ссылкой можно показать бейдж;
— Если хлебные крошки формируются на основании применённых фильтров, а не пользовательского пути или иерархии каталога, можно показать крестик для удаления этого параметра из фильтра;
— При наведении на ссылку можно показать меню с дополнительными действиями, например, ссылками для перехода на соседние страницы того же уровня (горизонтальная навигация).
In English. #breadcrumbs
— Обычно они начинаются со ссылки на главную страницу;
— Если ширины экрана не хватает, можно показать несколько последних ссылок, а в начале разместить контрол для отображения меню со списком всех ссылок более высокого уровня;
— Также сократить хлебные крошки можно в середине, заменив 2 и более ссылок на троеточие, нажатие на которое открывает меню с ними;
— Можно обрезать текст в ссылках и показывать его целиком в тултипе, чтобы все элементы хлебных крошек были примерно одной ширины;
— Чтобы уведомить человека о событии, произошедшем на более высоком уровне, рядом с соответствующей ссылкой можно показать бейдж;
— Если хлебные крошки формируются на основании применённых фильтров, а не пользовательского пути или иерархии каталога, можно показать крестик для удаления этого параметра из фильтра;
— При наведении на ссылку можно показать меню с дополнительными действиями, например, ссылками для перехода на соседние страницы того же уровня (горизонтальная навигация).
In English. #breadcrumbs
Teletype
22 совета и гайдлайна по дизайну «хлебных крошек»
Туториал по созданию «хлебных крошек» в UI/UX-дизайне. В статье мы рассмотрим анатомию, структуру и примеры применения компонентов...
👍24❤5🔥3👏1
Адам Григорян рассказал о презентации дизайна.
— У вас должен быть сценарий, но будьте готовы к тому, что всё пойдёт не так. Научитесь проще к этому относиться;
— Презентация — это когда вы показываете, а клиент вершит судьбу дизайна. Назовите презентацию обсуждением, чтобы выровнять ваши позиции;
— Объясните, чего вы хотите по итогам презентации. С этим пониманием клиент сильнее вовлекается в то, что вы говорите. «Вам нужно изучить наши материалы и дать обратную связь до послезавтра»;
— Разрешите перебивать в любой момент. Активное слушание, переходящее в беседу сильнее вовлекает и действительно превращает презентацию в обсуждение;
— Научитесь работать с позитивной обратной связью, когда клиент всем доволен и хвалит вас;
— Нет задачи понравиться своим внешним видом, голосом или манерой говорить. Покажите, что вы сделали и как это решает поставленную задачу. Часто этого достаточно, чтобы расположить к себе;
— Не поддакивайте. Соглашайтесь, когда клиент прав, и не соглашайтесь, когда не прав. Иначе вы становитесь его руками, а руки стоят дёшево;
— Учитывайте все замечания клиента. Если вы пропустите отдельные замечания, вам будут меньше доверять, вы потеряете репутацию подрядчика, которого заботит судьба продукта.
А ещё Адам рекомендует находить ошибки в макетах во время презентации и исправлять их на виду у клиента, чтобы показать своё стремление делать продукт лучше и подчеркнуть, что это не презентация, а совместный творческий процесс. Что скажете?
Видео. #presentation
— У вас должен быть сценарий, но будьте готовы к тому, что всё пойдёт не так. Научитесь проще к этому относиться;
— Презентация — это когда вы показываете, а клиент вершит судьбу дизайна. Назовите презентацию обсуждением, чтобы выровнять ваши позиции;
— Объясните, чего вы хотите по итогам презентации. С этим пониманием клиент сильнее вовлекается в то, что вы говорите. «Вам нужно изучить наши материалы и дать обратную связь до послезавтра»;
— Разрешите перебивать в любой момент. Активное слушание, переходящее в беседу сильнее вовлекает и действительно превращает презентацию в обсуждение;
— Научитесь работать с позитивной обратной связью, когда клиент всем доволен и хвалит вас;
— Нет задачи понравиться своим внешним видом, голосом или манерой говорить. Покажите, что вы сделали и как это решает поставленную задачу. Часто этого достаточно, чтобы расположить к себе;
— Не поддакивайте. Соглашайтесь, когда клиент прав, и не соглашайтесь, когда не прав. Иначе вы становитесь его руками, а руки стоят дёшево;
— Учитывайте все замечания клиента. Если вы пропустите отдельные замечания, вам будут меньше доверять, вы потеряете репутацию подрядчика, которого заботит судьба продукта.
А ещё Адам рекомендует находить ошибки в макетах во время презентации и исправлять их на виду у клиента, чтобы показать своё стремление делать продукт лучше и подчеркнуть, что это не презентация, а совместный творческий процесс. Что скажете?
Видео. #presentation
Оди. О дизайне
Тезисы из лекции «Как убедительно презентовать дизайн, продукт, идею, что угодно» — Оди. О дизайне
Недавно CX-дизайнер Адам Григорян выступал с лекцией на мероприятии, которое организовали ребята из Dprofie. Там он делился собственным опытом презентации дизайна крупным клиентам, в том числе Внуково, Internorm, ХК «Спартак» и Ростелеком Лекция длится около…
👍34❤10🔥4
Саша Терещенко написал об интерфейсе чат-ботов.
— Предлагайте варианты ответа, так как набирать текст сложнее и не всегда понятно, на какие вопросы готов ответить чат-бот;
— Форматируйте текст, насколько это позволяют ограничения интерфейса. Абзац текста можно отправить отдельным сообщением;
— Добавляйте разные способы отображения контента: диаграммы и графики (в том числе интерактивные), код;
— Показывайте, что система работает. Например, можно отображать информацию по мере её формирования. Это лучше, чем прогресс-бар или лоадер;
— Подстраивайтесь под привычные форматы взаимодействия. Например, взаимодействие с MidJourney построено на интерфейсе Discord;
— Помогайте пользователям формулировать более точные вопросы, исходя из контекста диалога (люди не всегда точно формулируют свои запросы);
— Давайте возможность вернуться в диалоге на шаг назад и запустить параллельную ветку диалога;
— Давайте отрегулировать характеристики ответа, например, сделать его более спокойным или юмористическим.
#ai #chat
— Предлагайте варианты ответа, так как набирать текст сложнее и не всегда понятно, на какие вопросы готов ответить чат-бот;
— Форматируйте текст, насколько это позволяют ограничения интерфейса. Абзац текста можно отправить отдельным сообщением;
— Добавляйте разные способы отображения контента: диаграммы и графики (в том числе интерактивные), код;
— Показывайте, что система работает. Например, можно отображать информацию по мере её формирования. Это лучше, чем прогресс-бар или лоадер;
— Подстраивайтесь под привычные форматы взаимодействия. Например, взаимодействие с MidJourney построено на интерфейсе Discord;
— Помогайте пользователям формулировать более точные вопросы, исходя из контекста диалога (люди не всегда точно формулируют свои запросы);
— Давайте возможность вернуться в диалоге на шаг назад и запустить параллельную ветку диалога;
— Давайте отрегулировать характеристики ответа, например, сделать его более спокойным или юмористическим.
#ai #chat
Хабр
Что не так с интерфейсами чат-ботов
Привет, Хабр! Меня зовут Саша Терещенко, продуктовый дизайнер, и я хочу сказать пару слов про то, что интерфейсы текстовых чат-ботов можно делать сильно лучше. Если приложить голову. Чатовые...
👍18🔥7🕊1
Полина Старцева и Анастасия Белокобыльская написали о тёмных паттернах.
— Они существовали и до интернета. Выкладка молока с истекающим сроком годности на первый ряд — тоже тёмный паттерн;
— В 2021-м в Принстонском университете выделили основные направления тёмных паттернов: 1) Изменение пространства решений; 2) Манипуляция информацией;
— 1. Изменение пространства решений — визуальные акценты и сообщения, которые влияют на то, как человек воспринимает информацию;
— Например, асиммертия: выделение невыгодного пользователю действия праймари кнопкой; проставление по умолчанию ненужных ему флагов; использование стыдящих пользователя формулировок для невыгоднях бизнесу опций;
— Ограничения: усложнение процесса отписки;
— Сегрегация клиентов: разные цены на одно и то же для людей из разных регионов;
— Тайный механизм: подталкивание к покупке низкой ценой в месяц и выставление счёта за год; подписка на бесплатный пробный период с обязательным вводом номера карты;
— 2. Манипуляция информацией — визуальное скрытие (в стоимость включена страховка, а информация об этом и выключатель спрятаны в шторке) и искажение информации (фейковые таймеры обратного отсчёта);
— Тёмные паттерны в среднем увеличивают прибыль на 20%. В 2019-м их использовали 11% исследованных торговых площадок;
— Почему не стоит: рост прибыли теряется в долгосрочной перспективе. 32% пользователей готовы уйти после единичного негативного опыта, 59% после повторного;
— И ещё «Как вас обманывают» — популярная тема публикаций и обсуждений, манипуляции повышают количество возвратов и нагрузку на саппорт, 38% пользователей оставляют отзывы с низкими оценками после негативного опыта;
— Плюс местами есть законодательные ограничения, а некоторые компании декларируют ценности, не допускающие тёмных паттернов.
#dark_patterns
— Они существовали и до интернета. Выкладка молока с истекающим сроком годности на первый ряд — тоже тёмный паттерн;
— В 2021-м в Принстонском университете выделили основные направления тёмных паттернов: 1) Изменение пространства решений; 2) Манипуляция информацией;
— 1. Изменение пространства решений — визуальные акценты и сообщения, которые влияют на то, как человек воспринимает информацию;
— Например, асиммертия: выделение невыгодного пользователю действия праймари кнопкой; проставление по умолчанию ненужных ему флагов; использование стыдящих пользователя формулировок для невыгоднях бизнесу опций;
— Ограничения: усложнение процесса отписки;
— Сегрегация клиентов: разные цены на одно и то же для людей из разных регионов;
— Тайный механизм: подталкивание к покупке низкой ценой в месяц и выставление счёта за год; подписка на бесплатный пробный период с обязательным вводом номера карты;
— 2. Манипуляция информацией — визуальное скрытие (в стоимость включена страховка, а информация об этом и выключатель спрятаны в шторке) и искажение информации (фейковые таймеры обратного отсчёта);
— Тёмные паттерны в среднем увеличивают прибыль на 20%. В 2019-м их использовали 11% исследованных торговых площадок;
— Почему не стоит: рост прибыли теряется в долгосрочной перспективе. 32% пользователей готовы уйти после единичного негативного опыта, 59% после повторного;
— И ещё «Как вас обманывают» — популярная тема публикаций и обсуждений, манипуляции повышают количество возвратов и нагрузку на саппорт, 38% пользователей оставляют отзывы с низкими оценками после негативного опыта;
— Плюс местами есть законодательные ограничения, а некоторые компании декларируют ценности, не допускающие тёмных паттернов.
#dark_patterns
Skillbox
Тёмные паттерны в интерфейсах: отменить, изменить, удалить
Эксперт объясняет, почему манипуляции в дизайне и флоу — это плохо для бизнеса.
👍33❤7🔥7
В PROFSOFT написали о роли анимации в интерфейсе.
— Анимацией можно выделить ключевые элементы интерфейса;
— Анимация перемещения между разделами помогает построить ментальную модель: как организована структура приложения, как по нему перемещаться;
— Обратная связь и прогресс обработки запроса показывают, что система отреагировала и работает, а также сколько продлится процесс;
— Предварительный просмотр: анимация при перетаскивании элементов в списке позволяет увидеть результат перемещения и избежать ошибок;
— Анимация позволяет плавнее и естественнее изменять состояния элементов;
— Визуальная подсказка: анимация при наведении курсора на кнопку показывает, что на неё можно нажать.
#animation
— Анимацией можно выделить ключевые элементы интерфейса;
— Анимация перемещения между разделами помогает построить ментальную модель: как организована структура приложения, как по нему перемещаться;
— Обратная связь и прогресс обработки запроса показывают, что система отреагировала и работает, а также сколько продлится процесс;
— Предварительный просмотр: анимация при перетаскивании элементов в списке позволяет увидеть результат перемещения и избежать ошибок;
— Анимация позволяет плавнее и естественнее изменять состояния элементов;
— Визуальная подсказка: анимация при наведении курсора на кнопку показывает, что на неё можно нажать.
#animation
vc.ru
Как анимация в интерфейсе помогает пользователю — Дизайн на vc.ru
На сегодняшний день анимация встречается почти в каждом интерфейсе, будь то сайт или мобильное приложение. Она играет ключевую роль в создании привлекательной и интуитивно понятной пользовательской среды.
🔥18👍5💯3👏2👎1🤩1
Пользователь Хабра xenon написал, как дизайн формы восстановления доступа к Госуслугам помогает злоумышленникам и что с этим можно сделать.
— Хакер звонит и представляется сотрудником мобильного оператора. Просит подтвердить через Госуслуги личность владельца номера телефона и получает от жертвы код из смс;
— С кодом он захватывает профиль жертвы на Госуслугах и прямо по телефону сообщает об этом;
— Пароль жертвы больше не подходит. На экране восстановления пароля отображается сообщение о заморозке учётной записи из-за подозрительной активности и номер телефона для экстренной связи;
— Фишка в том, что это не системное сообщение, а текст контрольного вопроса, который прописал хакер, войдя в профиль жертвы. Жертва доверяет этому номеру, и после звонка по нему начинается основной развод;
— Вывод: даже сайт без технических уязвимостей можно использовать для атаки на пользователя методом социальной инженерии;
— Стоит проанализировать пользовательский путь в ситуации, когда доступом к его профилю завладел хакер. Особенно, если ваш сервис критически важен;
— Конкретно в этом случае на странице восстановления доступа можно выделить, что отображается именно контрольный вопрос, а его текст оформить так, чтобы он выглядел менее системным и более пользовательским;
— Не прячьте официальный номер телефона (хотя бы в рамках этого пользовательского пути). Например, чтобы найти его на Госуслугах, надо сделать очень много кликов;
— Также можно ввести ограничения для текста пользовательского контрольного вопроса.
#log_in
— Хакер звонит и представляется сотрудником мобильного оператора. Просит подтвердить через Госуслуги личность владельца номера телефона и получает от жертвы код из смс;
— С кодом он захватывает профиль жертвы на Госуслугах и прямо по телефону сообщает об этом;
— Пароль жертвы больше не подходит. На экране восстановления пароля отображается сообщение о заморозке учётной записи из-за подозрительной активности и номер телефона для экстренной связи;
— Фишка в том, что это не системное сообщение, а текст контрольного вопроса, который прописал хакер, войдя в профиль жертвы. Жертва доверяет этому номеру, и после звонка по нему начинается основной развод;
— Вывод: даже сайт без технических уязвимостей можно использовать для атаки на пользователя методом социальной инженерии;
— Стоит проанализировать пользовательский путь в ситуации, когда доступом к его профилю завладел хакер. Особенно, если ваш сервис критически важен;
— Конкретно в этом случае на странице восстановления доступа можно выделить, что отображается именно контрольный вопрос, а его текст оформить так, чтобы он выглядел менее системным и более пользовательским;
— Не прячьте официальный номер телефона (хотя бы в рамках этого пользовательского пути). Например, чтобы найти его на Госуслугах, надо сделать очень много кликов;
— Также можно ввести ограничения для текста пользовательского контрольного вопроса.
#log_in
Хабр
Может ли быть уязвимость в дизайне, контенте и CSS и разбор такой уязвимости(?) на Госуслугах
Кажется, что уязвимость - штука техническая, но на Госуслугах есть интересная комбинация уязвимостей (ну или, скажем, черт, особенностей) в сфере CSS, дизайна, юзабилити, которые мошенники используют...
👍13🔥5❤4
Forwarded from Кушедов, что ты сделал? | Сервисы для образования
Моя работа – объяснять непонятное понятно.
Что такое ингибиторы обратного захвата серотонина, как летают ракеты с тепловым наведением, почему небо голубое, что такое гитфлоу – почти все, что я понимаю хорошо, я могу объяснить за пару минут. Я никогда этому не учился, у меня это получается интуитивно, но чаще всего я могу подсказать коллегам, как сделать объяснение понятным:
1. Опираться на штуки, которые знакомы каждому
2. Раскладывать по маленьким шагам или простым частям
3. Приводить подробные примеры
4. Раскладывать любое явление как взаимодействие акторов, у которых есть цель или проблема
И самое главное:
5. Подключать эмоции, делая примеры максимально упоротыми!!!
Что такое ингибиторы обратного захвата серотонина, как летают ракеты с тепловым наведением, почему небо голубое, что такое гитфлоу – почти все, что я понимаю хорошо, я могу объяснить за пару минут. Я никогда этому не учился, у меня это получается интуитивно, но чаще всего я могу подсказать коллегам, как сделать объяснение понятным:
1. Опираться на штуки, которые знакомы каждому
2. Раскладывать по маленьким шагам или простым частям
3. Приводить подробные примеры
4. Раскладывать любое явление как взаимодействие акторов, у которых есть цель или проблема
И самое главное:
5. Подключать эмоции, делая примеры максимально упоротыми!!!
👍27❤7🤔3
Виктория Гордеева написала о борьбе с сетевыми эффектами при проведении а/б-тестов.
— Сетевой эффект — влияние одного участника эксперимента на другого;
— Например, идёт тест изменения, которое должно повысить количество отправляемых сообщений. Пользователи из экспериментальной группы начинают активнее писать пользователям из контрольной группы, а те отвечают. Метрики меняются в обеих группах, и оценивать результаты а/б-теста становится сложно;
— С этим можно бороться: 1. Сравнивать метрики до и после изменения. Но на показатели могут повлиять внешние факторы вроде погоды;
— 2. Сравнивать разные натуральные кластеры пользователей, образовавшиеся естественным путём, например, людей из разных стран. Но они могут сильно отличаться поведенчески или быть слабо замкнутыми (пользователи из Беларуси и России часто взаимодействуют);
— 3. Сравнивать обычные кластеры. Но разные модели кластеризации дают разные результаты выборок, сценарий тестов нельзя унифицировать и применять всегда, результаты старых и новых тестов будут несопоставимыми;
— 4. Сравнивать эго-кластеры. Кластер формируют эго-вершины и альтер-вершины, которые связаны с эго-вершиной и взаимодействуют с ней;
— Эго-вершина должна подходить под критерии эксперимента;
— Кластер строится на основе графа взаимодействий, например, графа дружб, сообщений и так далее (надо подходить творчески);
— Минусы: не подходит для долгосрочных экспериментов, нужна большая аудитория, не подходит для тестирования изменений, направленных на расширение графа;
— Параметр Ignored vertices degree — отсечение эго-вершин, у которых альтер-вершин больше заданного предела. Такие эго-вершины повышают алгоритмическую нагрузку, плюс их альтер-вершины нельзя включать в другие кластеры.
#ab_testing
— Сетевой эффект — влияние одного участника эксперимента на другого;
— Например, идёт тест изменения, которое должно повысить количество отправляемых сообщений. Пользователи из экспериментальной группы начинают активнее писать пользователям из контрольной группы, а те отвечают. Метрики меняются в обеих группах, и оценивать результаты а/б-теста становится сложно;
— С этим можно бороться: 1. Сравнивать метрики до и после изменения. Но на показатели могут повлиять внешние факторы вроде погоды;
— 2. Сравнивать разные натуральные кластеры пользователей, образовавшиеся естественным путём, например, людей из разных стран. Но они могут сильно отличаться поведенчески или быть слабо замкнутыми (пользователи из Беларуси и России часто взаимодействуют);
— 3. Сравнивать обычные кластеры. Но разные модели кластеризации дают разные результаты выборок, сценарий тестов нельзя унифицировать и применять всегда, результаты старых и новых тестов будут несопоставимыми;
— 4. Сравнивать эго-кластеры. Кластер формируют эго-вершины и альтер-вершины, которые связаны с эго-вершиной и взаимодействуют с ней;
— Эго-вершина должна подходить под критерии эксперимента;
— Кластер строится на основе графа взаимодействий, например, графа дружб, сообщений и так далее (надо подходить творчески);
— Минусы: не подходит для долгосрочных экспериментов, нужна большая аудитория, не подходит для тестирования изменений, направленных на расширение графа;
— Параметр Ignored vertices degree — отсечение эго-вершин, у которых альтер-вершин больше заданного предела. Такие эго-вершины повышают алгоритмическую нагрузку, плюс их альтер-вершины нельзя включать в другие кластеры.
#ab_testing
Хабр
Как Одноклассники борются с сетевыми эффектами в A/B-экспериментах
Всем привет! На связи снова отдел продуктовой аналитики Одноклассников. Меня зовут Виктория Гордеева, я руковожу этим отделом, и сегодня я бы хотела поделиться нашими болями при проведении...
👍4🔥1
Ксения Толокнова и Игорь Долгов написали о диалоговых окнах, выдвижных панелях и снекбарах с тостами.
— Диалоговое окно (попап, Alert в iOS, Dialog в Android) — модальное окно, которое появляется поверх контента, чтобы предупредить пользователя, запросить подтверждения действия;
— Выдвижная панель (Sheet в iOS, Bottom sheet в Android) — оверлей, который привязан к нижнему краю экрана и отображает дополнительную информацию или действия;
— Снекбары и тосты — всплывающие сообщения с коротким текстом (в iOS не описан, но активно используется);
— Выдвижная панель может занимать весь экран или его часть, иметь фиксированную высоту или не иметь её, а также быть немодальной (форматирование текста в Заметках в iOS или информация об объекте в Google Maps);
— Закрыть её можно по-разному. Кнопкой (×) лучше закрывать полноэкранную панель. Если она занимает часть экрана, достаточно свайпера, кнопкой закрытия будет вся затемнённая область;
— Свайпер-стрелка подскажет, что панель можно увеличить или уменьшить относительно текущего размера;
— Выдвижные панели нужны, чтобы пользователь выполнил простую задачу (несложный сценарий) или получил справочную информацию, не теряя контекста;
— Используйте диалоговые окна, когда без реакции пользователя продвижение по сценарию невозможно, когда предстоит необратимое удаление важной информации или выход из сценария с потерей прогресса;
— Material Design рекомендует размещать тосты и снекбары в нижней части экрана, но это не всегда оптимально. Учитывайте контекст. В Инстаграме тост с советом о лайке двойным тапом отображается поверх фото, так как на нём сосредоточено внимание пользователя;
— Отображайте их в качестве обратной связи или чтобы привлечь внимание, не вырывая пользователя из контекста.
In English. #popup
— Диалоговое окно (попап, Alert в iOS, Dialog в Android) — модальное окно, которое появляется поверх контента, чтобы предупредить пользователя, запросить подтверждения действия;
— Выдвижная панель (Sheet в iOS, Bottom sheet в Android) — оверлей, который привязан к нижнему краю экрана и отображает дополнительную информацию или действия;
— Снекбары и тосты — всплывающие сообщения с коротким текстом (в iOS не описан, но активно используется);
— Выдвижная панель может занимать весь экран или его часть, иметь фиксированную высоту или не иметь её, а также быть немодальной (форматирование текста в Заметках в iOS или информация об объекте в Google Maps);
— Закрыть её можно по-разному. Кнопкой (×) лучше закрывать полноэкранную панель. Если она занимает часть экрана, достаточно свайпера, кнопкой закрытия будет вся затемнённая область;
— Свайпер-стрелка подскажет, что панель можно увеличить или уменьшить относительно текущего размера;
— Выдвижные панели нужны, чтобы пользователь выполнил простую задачу (несложный сценарий) или получил справочную информацию, не теряя контекста;
— Используйте диалоговые окна, когда без реакции пользователя продвижение по сценарию невозможно, когда предстоит необратимое удаление важной информации или выход из сценария с потерей прогресса;
— Material Design рекомендует размещать тосты и снекбары в нижней части экрана, но это не всегда оптимально. Учитывайте контекст. В Инстаграме тост с советом о лайке двойным тапом отображается поверх фото, так как на нём сосредоточено внимание пользователя;
— Отображайте их в качестве обратной связи или чтобы привлечь внимание, не вырывая пользователя из контекста.
In English. #popup
www.uprock.ru
Диалоговые окна, выдвижные панели и снэкбары — что выбрать дизайнеру? — читайте на UPROCK
Разбираем популярные паттерны.. читайте полезные статьи о дизайне в блоге UPROCK
👍24❤13
Опубликовали видео с Alfa Design Meetup #1:
1. Вячеслав Киржаев, Альфа-Банк — AI в руках дизайнера цифровых продуктов: приёмы и техники для повышения эффективности
2. Кирилл Викентьев, Альфа-Банк — Скайнет на страже пользовательских ценностей: как мы используем AI в командах роста
3. Ольга Петроченко, Альфа-Банк — Почему я так придираюсь к вёрстке: на что дизайнеры часто не обращают внимание при вёрстке макетов, и как этого избежать
4. Геннадий Мохов, mos.ru — Чем занят дизайн-директор: фреймворки, подходы и ритуалы при управлении командой любого масштаба
#ai #figma #layout #management
1. Вячеслав Киржаев, Альфа-Банк — AI в руках дизайнера цифровых продуктов: приёмы и техники для повышения эффективности
2. Кирилл Викентьев, Альфа-Банк — Скайнет на страже пользовательских ценностей: как мы используем AI в командах роста
3. Ольга Петроченко, Альфа-Банк — Почему я так придираюсь к вёрстке: на что дизайнеры часто не обращают внимание при вёрстке макетов, и как этого избежать
4. Геннадий Мохов, mos.ru — Чем занят дизайн-директор: фреймворки, подходы и ритуалы при управлении командой любого масштаба
#ai #figma #layout #management
YouTube
AI в руках дизайнера цифровых продуктов | Вячеслав Киржаев, Альфа-Банк
На митапе поделимся способами использования AI-инструментов, которые помогут сделать вашу работу более эффективной.
Спикер: Вячеслав Киржаев, Начальник управления продуктового дизайна для физических лиц в Альфа-Банке
Спикер: Вячеслав Киржаев, Начальник управления продуктового дизайна для физических лиц в Альфа-Банке
🔥24👍5❤3
Константин Сахнов написал о проектировании экономики F2P-игр (free-to-play).
— Это такие игры, играть в которые можно бесплатно;
— Их главная особенность — экономическая модель, основанная на дефиците, то есть ресурсов игроки получают меньше нужного;
— Это связано с необходимостью монетизации (через донаты);
— Для привлечения игроков в F2P-игры работает только прямая закупка рекламного трафика;
— CPI (Cost Per Install) — стоимость одной установки, то есть одного игрока. Для многих игр составляет 2–3 доллара;
— PU (Paying Users) — доля платящей аудитории в активной. Зависит от жанра игры и платформы (на iOS платят чуть больше), в среднем 1,5–2%;
— Чтобы окупить рекламу, каждый платящий игрок в среднем должен задонатить 143 доллара с учётом комиссии платформы (30%);
— Как этого добиться: мотивировать платить чаще, платить больше за раз, играть дольше;
— Первые два пункта сводятся к метрике ARPPU (Average Revenue per Paying User) — средняя месячная выручка с платящего игрока;
— Третий — к Retention. Уже для первого дня он редко превышает 50%, для месяца — 10%;
— ROI (Return on Investment) должен быть больше 0. На практике редко учитывают стоимость создания игры. Важна окупаемость маркетинга (ROMI);
— Sticky Factor — отношение ежедневной активной аудитории к месячной (DAU/MAU), то есть как часто игрок заходит в игру;
— Зная целевые метрики, можно вычислить нужное значение ARPPU, а затем — спроектировать экономику игры так, чтобы в ней был примерно такой дефицит ресурсов;
— Лучше создавать большую монетизационную глубину, чтобы в игру можно было донатить и 10 долларов и миллион, а не пытаться получить 200 долларов с каждого платящего игрока.
#metrics #game
— Это такие игры, играть в которые можно бесплатно;
— Их главная особенность — экономическая модель, основанная на дефиците, то есть ресурсов игроки получают меньше нужного;
— Это связано с необходимостью монетизации (через донаты);
— Для привлечения игроков в F2P-игры работает только прямая закупка рекламного трафика;
— CPI (Cost Per Install) — стоимость одной установки, то есть одного игрока. Для многих игр составляет 2–3 доллара;
— PU (Paying Users) — доля платящей аудитории в активной. Зависит от жанра игры и платформы (на iOS платят чуть больше), в среднем 1,5–2%;
— Чтобы окупить рекламу, каждый платящий игрок в среднем должен задонатить 143 доллара с учётом комиссии платформы (30%);
— Как этого добиться: мотивировать платить чаще, платить больше за раз, играть дольше;
— Первые два пункта сводятся к метрике ARPPU (Average Revenue per Paying User) — средняя месячная выручка с платящего игрока;
— Третий — к Retention. Уже для первого дня он редко превышает 50%, для месяца — 10%;
— ROI (Return on Investment) должен быть больше 0. На практике редко учитывают стоимость создания игры. Важна окупаемость маркетинга (ROMI);
— Sticky Factor — отношение ежедневной активной аудитории к месячной (DAU/MAU), то есть как часто игрок заходит в игру;
— Зная целевые метрики, можно вычислить нужное значение ARPPU, а затем — спроектировать экономику игры так, чтобы в ней был примерно такой дефицит ресурсов;
— Лучше создавать большую монетизационную глубину, чтобы в игру можно было донатить и 10 долларов и миллион, а не пытаться получить 200 долларов с каждого платящего игрока.
#metrics #game
Хабр
Проектирование экономики F2P игр на основе продуктовых метрик
Несмотря на то, что универсального алгоритма проектирования игровой экономики сформулировать не получится: уж слишком разные механики в разных играх, - мы можем попробовать сформулировать один из...
👍11
Слава Шестопалов написал об ограничениях дизайн-воркшопов.
— С помощью воркшопа нельзя создать ценность из ничего. Они лишь структурируют, обогащают и согласовывают то, что уже есть в головах участников;
— Приглашайте тех, кому есть чем поделиться. Воркшоп должен быть связан с компетенциями команды. Нет смысла звать разработчиков на воркшоп по созданию карты эмпатии;
— Попросите инициатора описать идеальный результат встречи и попытайтесь понять, пытается он решить проблему или навязать своё решение. Во втором случае участвовать не надо;
— Прибегайте к воркшопам, только если проблема может быть решена совместными усилиями команды, и надо взглянуть на неё с разных сторон;
— Нужен определённый уровень доверия, открытости и равенства. Воркшопы малоэффективны, если в стране, компании или социальной группе большая дистанция между начальником и подчинёнными, сильные патриархальные традиции, важнее сохранить лицо, крайний индивидуализм, социально-экономическое неравенство.
In English. #process
— С помощью воркшопа нельзя создать ценность из ничего. Они лишь структурируют, обогащают и согласовывают то, что уже есть в головах участников;
— Приглашайте тех, кому есть чем поделиться. Воркшоп должен быть связан с компетенциями команды. Нет смысла звать разработчиков на воркшоп по созданию карты эмпатии;
— Попросите инициатора описать идеальный результат встречи и попытайтесь понять, пытается он решить проблему или навязать своё решение. Во втором случае участвовать не надо;
— Прибегайте к воркшопам, только если проблема может быть решена совместными усилиями команды, и надо взглянуть на неё с разных сторон;
— Нужен определённый уровень доверия, открытости и равенства. Воркшопы малоэффективны, если в стране, компании или социальной группе большая дистанция между начальником и подчинёнными, сильные патриархальные традиции, важнее сохранить лицо, крайний индивидуализм, социально-экономическое неравенство.
In English. #process
www.uprock.ru
Дизайн-воркшопы: 3 ловушки и способы их избежать — читайте на UPROCK
Дизайн-воркшопы — встречи, которые предполагают активное взаимодействие участников. Да, зачастую этот метод действительно эффективен: члены команды обмениваются опытом и совместно находят решение, однако он не универсален.. читайте полезные статьи о дизайне…
🔥9👍3❤2