25231
Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Опубликовали видео с Alfa Design Meetup 23 ноября 2023 года:
1. Вячеслав Киржаев, Альфа-Банк — AI в руках дизайнера цифровых продуктов: приёмы и техники для повышения эффективности
2. Кирилл Викентьев, Альфа-Банк — Скайнет на страже пользовательских ценностей: как мы используем AI в командах роста
3. Ольга Петроченко, Альфа-Банк — Почему я так придираюсь к вёрстке: на что дизайнеры часто не обращают внимание при вёрстке макетов, и как этого избежать
4. Геннадий Мохов, mos.ru — Чем занят дизайн-директор: фреймворки, подходы и ритуалы при управлении командой любого масштаба
#ai #figma #layout #management
Самое полное исследование рынка продуктовых дизайнеров на русском языке!
Продуктовые дизайнеры: их жизнь, работа и перспективы – всё это в первом крупном исследовании от Авито и DevCrowd. Опросив 646 дизайнеров, исследователи презентуют результаты, благодаря которым можно узнать где живут, как работают и чего хотят в своей карьере представители современной digital-профессии.
Несколько ключевых наблюдений:
• Гендерный [дис]баланс: в целом оба пола представлены поровну, но новички в основном женщины, а в руководящих должностях — преобладание мужчин.
• Авито, Ozon, Тинькофф и Aviasales и Яндекс в топе самых желаемых компаний для работы, основные предпочтения соискателей – интересные задачи и сильная команда.
• Половина дизайнеров готова сменить работу в поисках повышения дохода и профессионального роста.
• 74% работают в российских компаниях, при поиске нового места лишь 16% категорически не хотят работать с Россией.
• Дизайнеры стремятся развиваться в смежных областях: проведение исследований и разработка стратегии.
Полные результаты исследования вы найдете по ссылке, там еще много интересного: портрет продуктового дизайнера, особенности профессии и главные навыки для нее, а также релокация, удалёнка, кумиры и авторитеты в профессии.
Реклама.ООО "КЕХ ЕКОММЕРЦ" ИНН 7710668349 erid: 2SDnjcVy5h2
Моя работа – объяснять непонятное понятно.
Что такое ингибиторы обратного захвата серотонина, как летают ракеты с тепловым наведением, почему небо голубое, что такое гитфлоу – почти все, что я понимаю хорошо, я могу объяснить за пару минут. Я никогда этому не учился, у меня это получается интуитивно, но чаще всего я могу подсказать коллегам, как сделать объяснение понятным:
1. Опираться на штуки, которые знакомы каждому
2. Раскладывать по маленьким шагам или простым частям
3. Приводить подробные примеры
4. Раскладывать любое явление как взаимодействие акторов, у которых есть цель или проблема
И самое главное:
5. Подключать эмоции, делая примеры максимально упоротыми!!!
Тинькофф Журнал проводит исследование про зарплаты в дизайне. Так что если вы делаете логотипы, сайты и другие рекламные продукты — расскажите Т—Ж о своем опыте, а потом Журнал проанализирует, за какие навыки платят больше, где лучше условия работы и что волнует сообщество дизайнеров.
Опрос анонимный и займет всего 5-7 минут. В конце опроса вас будет ждать подарок — промокод на любой курс Учебника Т—Ж!
Поучаствовать можно тут.
АО «Тинькофф Банк», ИНН 7710140679
Полина Старцева и Анастасия Белокобыльская написали о тёмных паттернах.
— Они существовали и до интернета. Выкладка молока с истекающим сроком годности на первый ряд — тоже тёмный паттерн;
— В 2021-м в Принстонском университете выделили основные направления тёмных паттернов: 1) Изменение пространства решений; 2) Манипуляция информацией;
— 1. Изменение пространства решений — визуальные акценты и сообщения, которые влияют на то, как человек воспринимает информацию;
— Например, асиммертия: выделение невыгодного пользователю действия праймари кнопкой; проставление по умолчанию ненужных ему флагов; использование стыдящих пользователя формулировок для невыгоднях бизнесу опций;
— Ограничения: усложнение процесса отписки;
— Сегрегация клиентов: разные цены на одно и то же для людей из разных регионов;
— Тайный механизм: подталкивание к покупке низкой ценой в месяц и выставление счёта за год; подписка на бесплатный пробный период с обязательным вводом номера карты;
— 2. Манипуляция информацией — визуальное скрытие (в стоимость включена страховка, а информация об этом и выключатель спрятаны в шторке) и искажение информации (фейковые таймеры обратного отсчёта);
— Тёмные паттерны в среднем увеличивают прибыль на 20%. В 2019-м их использовали 11% исследованных торговых площадок;
— Почему не стоит: рост прибыли теряется в долгосрочной перспективе. 32% пользователей готовы уйти после единичного негативного опыта, 59% после повторного;
— И ещё «Как вас обманывают» — популярная тема публикаций и обсуждений, манипуляции повышают количество возвратов и нагрузку на саппорт, 38% пользователей оставляют отзывы с низкими оценками после негативного опыта;
— Плюс местами есть законодательные ограничения, а некоторые компании декларируют ценности, не допускающие тёмных паттернов.
#dark_patterns
Саша Терещенко написал об интерфейсе чат-ботов.
— Предлагайте варианты ответа, так как набирать текст сложнее и не всегда понятно, на какие вопросы готов ответить чат-бот;
— Форматируйте текст, насколько это позволяют ограничения интерфейса. Абзац текста можно отправить отдельным сообщением;
— Добавляйте разные способы отображения контента: диаграммы и графики (в том числе интерактивные), код;
— Показывайте, что система работает. Например, можно отображать информацию по мере её формирования. Это лучше, чем прогресс-бар или лоадер;
— Подстраивайтесь под привычные форматы взаимодействия. Например, взаимодействие с MidJourney построено на интерфейсе Discord;
— Помогайте пользователям формулировать более точные вопросы, исходя из контекста диалога (люди не всегда точно формулируют свои запросы);
— Давайте возможность вернуться в диалоге на шаг назад и запустить параллельную ветку диалога;
— Давайте отрегулировать характеристики ответа, например, сделать его более спокойным или юмористическим.
#ai #chat
Как дизайнеру почувствовать себя профи?
Первый способ — получить повышение.
Второй — расширить компетенции. Чем больше у вас навыков, тем вы увереннее и дороже на рынке труда. А ваши проекты в портфолио — более ответственные и внушительные.
Если вам подходят эти способы — приходите на курс Практикума по созданию мобильных приложений. Вы научитесь делать приложения не только для смартфонов, но и для TV, умных часов и других платформ. А в конце положите большой проект в портфолио.
Курс можно совмещать с работой: он идёт 3 месяца, а заниматься нужно максимум по 10 часов в неделю. Заново изучать базовую теорию и Figma не придётся — фокус только на том, что действительно пригодится в работе.
Что будет на курсе:
• Углубленное прототипирование, дизайн-системы, гайдлайны iOS и Android.
• Удобная теория в онлайн-тренажёре, который доступен 24/7.
• Практика на большом проекте на протяжении всего обучения.
• Преподаватель-сеньор, который проверяет проект каждые две недели. Ему можно задать вопросы напрямую — в чате.
•
Запишитесь на курс до 30 ноября и получите промокод со скидкой 20%. Пусть Чёрная Пятница станет поводом сделать карьерный рывок!
Влад Попович написал о загрузчиках файлов.
— Дайте возможность как перетащить файл, так и выбрать в системном меню (удобно, если надо выбрать несколько файлов). Людям могут быть привычны разные способы выбора файлов для загрузки;
— Проработайте состояние для области загрузки, когда над ней находится перетаскиваемый файл. Кроме визуального изменения можно показать текст «Добавить 1 файл»;
— Также стоит изменить курсор с перетаскиваемым файлом (например, на курсор с плюсом);
— Отображайте прогресс загрузки файла, а если он не может быть загружен — причину («Файл не может превышать 5 МБ»);
— По возможности делайте загрузку немодальной, чтобы пользователь мог продолжить работу, пока файлы загружается;
— Часто панель с информацией о загрузке размещают в правом нижнем углу;
— Убедитесь, что она не перекрывает важный контент. Если перекрывает и файлы могут загружаться долго, проработайте состояние, когда эта панель свёрнута.
#uploading
«Чем толще техническая документация — тем лучше»
Одно из моих ранних заблуждений. Я даже не знаю, откуда это пошло. Наверное, со школьных и университетских времён, когда нужно было обязательно написать сочинение больше, чем на три страницы или реферат не меньше, чем на десять. При этом никого не волновало, если я мог раскрыть тему в меньшем объёме.
В технической документации объём будет интересовать только людей, связанных с бюрократическими процессами, но никак не разработчиков, которым с ней работать.
Поэтому первое, что я сделал в своих функциональных спецификациях, — избавился от 10% объёма, просто отказавшись от вводных слов типа:
— В этом разделе находятся следующие элементы
— Меню навигации состоит из
— Карточка товара включает в себя следующие составляющие
— Ссылка ведёт в раздел такой-то
Их я просто вычеркнул. Теперь после заголовка с названием раздела я без лишних вводных слов перечислял, из каких элементов он состоит.
Второе — вынес повторяющиеся описания в отдельные разделы. К сожалению, я не нашёл в ворде функции, похожей на мастера в Axure или компоненты в Фигме. Поэтому, по-старинке, в начале документа описывал сквозные элементы, а затем ссылался на них.
Например, в начале ФС у меня есть раздел «шапка», где я подробно расписываю все её составные части и состояния. И после этого уже не описываю её в рамках каждой отдельной страницы. Я просто в начале документа пишу, что шапка и подвал присутствуют на каждой странице, если иное не указано в ФС.
Или карточка товара в списке. Она может встречаться и на странице «Каталог», и в блоке «Сопутствующие товары» отдельного товара, и в блоке «Вы недавно смотрели» над подвалом, и в блоке «Не забудьте купить» на странице добавления товара в корзину. Вместо того, чтобы описывать её каждый раз во всех этих местах, я описываю её однажды в начале документа, а затем ссылаюсь на это описание.
Третье — описываю логику поведения и значения по умолчанию для отдельных сущностей, а в описании конкретной страницы уточняю только те, которые будут специфичны для неё. Взять, например, любую форму для отправки данных. В начале документа у меня есть полторы страницы текста «Общие принципы работы форм», где рассказано обо всех мелких нюансах: в каком поле курсор по умолчанию, где отображаются сообщения об ошибках, как происходит валидация, как блокируется кнопка отправки после нажатия (чтобы предотвратить случайное повторное нажатие) и так далее.
А когда дело доходит до конкретной формы на конкретной странице, я уже не описываю повторно все эти вещи, а уделяю внимание уникальным моментам: составу полей, ограничению по вводимым данным, типам ошибок.
Таким же образом я описываю общие принципы работы ссылок, языковых версий интерфейса, «печенек», модальных окон и прочих сквозных элементов.
Суммарно эти оптимизации привели к тому, что мои функциональные спецификации заметно «похудели», при этом не теряя полноты описания. Вместе с ними без следа исчез и подход «Чем толще техническая документация — тем лучше». ФС должна быть ровно такой толщины, которая позволяет минимальным количеством текста максимально описать систему.
Этот же принцип перекочевал и в функциональные требования, и в договоры, и в отчёты, в общем, в любые документы, которые я создаю для других людей.
Станислав Хрусталёв написал о сортировке товаров в интернет-магазине.
— Размещают кнопку сортировки обычно рядом с фильтрами, так как элементы близки по смыслу;
— Её можно фиксировать при прокрутке или скрывать и снова отображать при скроле вверх;
— Если сортировка настраивается в фильтре, чтобы пользователи её нашли, можно написать на кнопке «Сортировка и фильтры»;
— Релевантная иконка: разнонаправленные стрелки или отсортированные линии разной длины. Порядок линий в иконке должен соответствовать текущему направлению сортировки;
— Чтобы было понятно, как сейчас упорядочен список и направление сортировки, лучше это подписать. Например, «Сначала дорогие»;
— По умолчанию показывайте по несколько популярных и релевантных товаров из ключевых подкатегорий, чтобы было видно разнообразие;
— Варианты сортировки лучше отображать в шторке, чтобы все они были достаточно крупными и нажимались без прокрутки;
— Их стоит упорядочить по популярности, при необходимости пояснить («По рейтингу — сначала товары с высокими оценками»), выделить текущую сортировку;
— Не добавляйте бессмысленные варианты сортировки вроде «Сначала товары с меньшей скидкой»;
— При нажатии на вариант сразу применяйте сортировку: закрывайте шторку, обновляйте список товаров, прокручивайте его в начало;
— При выборе активного варианта сортировки, достаточно просто закрыть шторку;
— Если направление сортировки не подписано, добавьте бейдж к иконке сортировки, чтобы показать, что она отличается от варианта по умолчанию.
Канал Станислава. #sorting #ecommerce
Тарик Шебл написал, почему лучше начинать дизайн с оттенков серого.
— Такой дизайн быстрее создавать (поиск подходящих цветов требует времени) и править (при перемещении элементов и изменении их размеров реже возникают конфликты);
— При обсуждении такого дизайна люди не отвлекаются на цвета, которые вызывают разные ассоциации, и фокусируются на обсуждении структуры и компоновки;
— Цвет — не самая важная составляющая дизайна. Дизайн должен работать ещё до добавления цвета;
— Дизайн должен быть функциональным в любом цвете. Цвет может измениться из-за пользовательских настроек, нового фирменного стиля, а также восприниматься иначе из-за нарушений зрения.
In English. #color
Вячеслав Андреев написал об адаптации мобильного браузера под ТВ.
— В среднем телевизоре железо слабее, чем в среднем телефоне. Придётся отказаться от анимаций и некоторых функций вроде вкладок (каждая вкладка требует памяти и вычислительной мощности);
— Стоит адаптировать UI-ресурсы с учётом других разрешений экранов, чтобы интерфейс не выглядел размытым;
— С телевизором человек использует пульт, поэтому лучше отказаться от лишних меню и оставить главное — поисковую строку;
— В навигации между несвязанными сайтами поможет история посещённых сайтов и блок с избранными сайтами;
— Из меню стоит убрать всё, чем не удобно пользоваться на ТВ, и оставить: Назад, Домашняя страница, Обновить, Добавить в избранное, Изменить адрес сайта;
— Пользователю надо понимать, какой элемент сейчас выделен (что произойдёт при нажатии «Ок» на пульте), но такого состояния может не быть на устройствах с сенсорным экраном. И выделение элементов может работать не на всех сайтах. Решение: курсор, который можно перемещать по экрану;
— Для курсора может потребоваться отдельный режим скролинга;
— С пульта неудобно вводить текст, поэтому стоит добавить голосовой ввод с микрофона на пульте. И особенно полезны подсказки при вводе.
#tv
Самхита Танкала написала о каркасных экранах (skeleton screen).
— Они заполняют экран на время загрузки, имитируя его внешний вид;
— Применяются при загрузке всей страницы целиком, а не отдельных её блоков;
— Наиболее распространённый вариант — имитация структуры страницы и её контента серыми прямоугольниками. Помогает сформировать ожидания от структуры страницы;
— Они могут быть анимированными (мерцание, движение слева направо, постепенное появление элементов) и таким образом показывать, что загрузка идёт, и сокращать воспринимаемое время загрузки;
— Каркасные экраны снижают когнитивную нагрузку, не показывая пользователю пустой экран со спинером. Переход к новому экрану с контентом становится более плавным;
— Их лучше использовать, когда загрузка занимает от 2 до 10 секунд. Меньше — будет мельтешение. Больше — нужен прогресс-бар.
In English. #loader
Аида Пачева написала о новом подходе к адаптивности сайтов.
— Оптимального вьюпорта нет, значит, адаптивность должна быть гибкой;
— Но это не значит, что надо больше брейкпоинтов и под все рисовать макеты;
— С помощью контейнерных запросов и min(), max() и clamp() можно делать адаптивными отдельные компоненты;
— При этом для каждого компонента проработать надо только те состояния, которые ему нужны. Некоторым надо совсем немного;
— Например, хедеру может хватить двух состояний: 1) Навигация свёрнута в бургере; 2) Навигация развёрнута. Место для неё появляется с ширины в 995 px;
— «Шампуров [брейкпоинтов] стало больше, но суммарное количество шашлчыков на них [состояний компонентов] — меньше»;
— Если компоненты готовы измениться на близких значениях ширины (995 и 1000 px), стоит их синхронизировать;
— Чтобы независимые компоненты сходились вместе по вертикальным направляющим, помогут глобальные правила для сетки и шрифтовых стилей для конкретных диапазонов брейкпоинтов;
— Адаптивность может быть многоуровневой. При изменении ширины вьюпорта может перестраиваться блок с карточками, а уже при изменении ширины карточки в этом бллоке — перестраиваться её содержимое.
Канал Аиды. #adaptive
Артём Плаксин написал о доступности изображений.
— Альтернативный текст нужен фотографиям, стикерам и смайликам, логотипам, дополняющим статью изображениям;
— Не нужен иконкам списков, декоративным иконкам вроде телефона рядом с номером телефона или конверта рядом с адресом электронной почты, декоративным изображениям и картинкам с подписями;
— В этом случае атрибут alt оставляйте пустым;
— Для тега svg добавляйте атрибут aria-hidden="true";
— Альтернативный текст к картинке должен кратко описывать изображение. Например: «Люди сидят на диванчиках и работают за ноутбуками»;
— Желательно уложиться в 80 символов, использовать простые предложения, начинать с заглавной буквы и не ставить точку в конце, не упоминать роль элемента: изображение, графика, иконка;
— Можно указать категорию изображения: фотография, логотип, скриншот.
#accessability #graphics
Ксения Толокнова и Игорь Долгов написали о диалоговых окнах, выдвижных панелях и снекбарах с тостами.
— Диалоговое окно (попап, Alert в iOS, Dialog в Android) — модальное окно, которое появляется поверх контента, чтобы предупредить пользователя, запросить подтверждения действия;
— Выдвижная панель (Sheet в iOS, Bottom sheet в Android) — оверлей, который привязан к нижнему краю экрана и отображает дополнительную информацию или действия;
— Снекбары и тосты — всплывающие сообщения с коротким текстом (в iOS не описан, но активно используется);
— Выдвижная панель может занимать весь экран или его часть, иметь фиксированную высоту или не иметь её, а также быть немодальной (форматирование текста в Заметках в iOS или информация об объекте в Google Maps);
— Закрыть её можно по-разному. Кнопкой (×) лучше закрывать полноэкранную панель. Если она занимает часть экрана, достаточно свайпера, кнопкой закрытия будет вся затемнённая область;
— Свайпер-стрелка подскажет, что панель можно увеличить или уменьшить относительно текущего размера;
— Выдвижные панели нужны, чтобы пользователь выполнил простую задачу (несложный сценарий) или получил справочную информацию, не теряя контекста;
— Используйте диалоговые окна, когда без реакции пользователя продвижение по сценарию невозможно, когда предстоит необратимое удаление важной информации или выход из сценария с потерей прогресса;
— Material Design рекомендует размещать тосты и снекбары в нижней части экрана, но это не всегда оптимально. Учитывайте контекст. В Инстаграме тост с советом о лайке двойным тапом отображается поверх фото, так как на нём сосредоточено внимание пользователя;
— Отображайте их в качестве обратной связи или чтобы привлечь внимание, не вырывая пользователя из контекста.
In English. #popup
Виктория Гордеева написала о борьбе с сетевыми эффектами при проведении а/б-тестов.
— Сетевой эффект — влияние одного участника эксперимента на другого;
— Например, идёт тест изменения, которое должно повысить количество отправляемых сообщений. Пользователи из экспериментальной группы начинают активнее писать пользователям из контрольной группы, а те отвечают. Метрики меняются в обеих группах, и оценивать результаты а/б-теста становится сложно;
— С этим можно бороться: 1. Сравнивать метрики до и после изменения. Но на показатели могут повлиять внешние факторы вроде погоды;
— 2. Сравнивать разные натуральные кластеры пользователей, образовавшиеся естественным путём, например, людей из разных стран. Но они могут сильно отличаться поведенчески или быть слабо замкнутыми (пользователи из Беларуси и России часто взаимодействуют);
— 3. Сравнивать обычные кластеры. Но разные модели кластеризации дают разные результаты выборок, сценарий тестов нельзя унифицировать и применять всегда, результаты старых и новых тестов будут несопоставимыми;
— 4. Сравнивать эго-кластеры. Кластер формируют эго-вершины и альтер-вершины, которые связаны с эго-вершиной и взаимодействуют с ней;
— Эго-вершина должна подходить под критерии эксперимента;
— Кластер строится на основе графа взаимодействий, например, графа дружб, сообщений и так далее (надо подходить творчески);
— Минусы: не подходит для долгосрочных экспериментов, нужна большая аудитория, не подходит для тестирования изменений, направленных на расширение графа;
— Параметр Ignored vertices degree — отсечение эго-вершин, у которых альтер-вершин больше заданного предела. Такие эго-вершины повышают алгоритмическую нагрузку, плюс их альтер-вершины нельзя включать в другие кластеры.
#user_testing #unmoderated
Пользователь Хабра xenon написал, как дизайн формы восстановления доступа к Госуслугам помогает злоумышленникам и что с этим можно сделать.
— Хакер звонит и представляется сотрудником мобильного оператора. Просит подтвердить через Госуслуги личность владельца номера телефона и получает от жертвы код из смс;
— С кодом он захватывает профиль жертвы на Госуслугах и прямо по телефону сообщает об этом;
— Пароль жертвы больше не подходит. На экране восстановления пароля отображается сообщение о заморозке учётной записи из-за подозрительной активности и номер телефона для экстренной связи;
— Фишка в том, что это не системное сообщение, а текст контрольного вопроса, который прописал хакер, войдя в профиль жертвы. Жертва доверяет этому номеру, и после звонка по нему начинается основной развод;
— Вывод: даже сайт без технических уязвимостей можно использовать для атаки на пользователя методом социальной инженерии;
— Стоит проанализировать пользовательский путь в ситуации, когда доступом к его профилю завладел хакер. Особенно, если ваш сервис критически важен;
— Конкретно в этом случае на странице восстановления доступа можно выделить, что отображается именно контрольный вопрос, а его текст оформить так, чтобы он выглядел менее системным и более пользовательским;
— Не прячьте официальный номер телефона (хотя бы в рамках этого пользовательского пути). Например, чтобы найти его на Госуслугах, надо сделать очень много кликов;
— Также можно ввести ограничения для текста пользовательского контрольного вопроса.
#log_in
В PROFSOFT написали о роли анимации в интерфейсе.
— Анимацией можно выделить ключевые элементы интерфейса;
— Анимация перемещения между разделами помогает построить ментальную модель: как организована структура приложения, как по нему перемещаться;
— Обратная связь и прогресс обработки запроса показывают, что система отреагировала и работает, а также сколько продлится процесс;
— Предварительный просмотр: анимация при перетаскивании элементов в списке позволяет увидеть результат перемещения и избежать ошибок;
— Анимация позволяет плавнее и естественнее изменять состояния элементов;
— Визуальная подсказка: анимация при наведении курсора на кнопку показывает, что на неё можно нажать.
#animation
Канал Лёши Арефьева об управлении IT-продуктами: @alexcouncil. Метрики, инструменты и полезные материалы на околопродуктовые темы.
Подборка интересных постов:
— Как из стартаперской команды сделать продуктовую;
— История Фигмы как продукта;
— Что делать, когда исследований овердохрена;
— Проектный менеджмент для самых маленьких;
— Продуктовая метрика CAC — сколько стоит клиент.
Если интересно, подписывайтесь — @alexcouncil
Реклама. ИНН 503242310240 Erid: LjN8KbfWh
Адам Григорян рассказал о презентации дизайна.
— У вас должен быть сценарий, но будьте готовы к тому, что всё пойдёт не так. Научитесь проще к этому относиться;
— Презентация — это когда вы показываете, а клиент вершит судьбу дизайна. Назовите презентацию обсуждением, чтобы выровнять ваши позиции;
— Объясните, чего вы хотите по итогам презентации. С этим пониманием клиент сильнее вовлекается в то, что вы говорите. «Вам нужно изучить наши материалы и дать обратную связь до послезавтра»;
— Разрешите перебивать в любой момент. Активное слушание, переходящее в беседу сильнее вовлекает и действительно превращает презентацию в обсуждение;
— Научитесь работать с позитивной обратной связью, когда клиент всем доволен и хвалит вас;
— Нет задачи понравиться своим внешним видом, голосом или манерой говорить. Покажите, что вы сделали и как это решает поставленную задачу. Часто этого достаточно, чтобы расположить к себе;
— Не поддакивайте. Соглашайтесь, когда клиент прав, и не соглашайтесь, когда не прав. Иначе вы становитесь его руками, а руки стоят дёшево;
— Учитывайте все замечания клиента. Если вы пропустите отдельные замечания, вам будут меньше доверять, вы потеряете репутацию подрядчика, которого заботит судьба продукта.
А ещё Адам рекомендует находить ошибки в макетах во время презентации и исправлять их на виду у клиента, чтобы показать своё стремление делать продукт лучше и подчеркнуть, что это не презентация, а совместный творческий процесс. Что скажете?
Видео. #presentation
Роман Камушкен написал uxteddy/JenThwcebeP">о хлебных крошках.
— Обычно они начинаются со ссылки на главную страницу;
— Если ширины экрана не хватает, можно показать несколько последних ссылок, а в начале разместить контрол для отображения меню со списком всех ссылок более высокого уровня;
— Также сократить хлебные крошки можно в середине, заменив 2 и более ссылок на троеточие, нажатие на которое открывает меню с ними;
— Можно обрезать текст в ссылках и показывать его целиком в тултипе, чтобы все элементы хлебных крошек были примерно одной ширины;
— Чтобы уведомить человека о событии, произошедшем на более высоком уровне, рядом с соответствующей ссылкой можно показать бейдж;
— Если хлебные крошки формируются на основании применённых фильтров, а не пользовательского пути или иерархии каталога, можно показать крестик для удаления этого параметра из фильтра;
— При наведении на ссылку можно показать меню с дополнительными действиями, например, ссылками для перехода на соседние страницы того же уровня (горизонтальная навигация).
In English. #breadcrumbs
Стать сотрудником Яндекса быстрее и проще, чем кажется. Участвуйте в днях быстрого найма: пройдите несколько секций собеседования и получите офер за несколько дней.
Ближайшее мероприятие:
• 20-24 ноября — Fast Track для продуктовых дизайнеров, офер за неделю в команду HR Tech.
Зарегистрироваться
Реклама. ООО "Яндекс". erid: 2VtzqxjeTYb
Стас Мельников написал о некоторых паттернах, повышающих доступность сайтов.
— Автофокус — автоматическая фокусировка на первом поле, которое пользователь должен заполнить в форме;
— Если главная задача страницы — заполнение формы, автофокус помогает пользователям сразу ей заняться. Особенно полезно тем, кто использует только клавиатуру или скринридер. Не нужно проходить через шапку и навигацию страницы;
— Но важно учитывать контекст. Если незрячий пользователь перешёл к форме со стороннего ресурса, скорее всего, он захочет изучить, куда попал и прочитать хотя бы шапку;
— Skip link — ссылка «Перейти к основному содержимому» — самый первый элемент страницы, отображается тем, кто для перемещения по странице использует клавишу Tab или скринридер, позволяет пропустить шапку с навигацией и перейти к основному содержимому страницы;
— Кнопка «Наверх» — ссылка, которая приводит в меню, аналог клавиши PageUp. С её помощью удобно просматривать одну страницу за другой;
— Но важно, чтобы в коде она располагалась в конце блока с основным содержимым страницы.
#accessibility #navigation
Ким Салазар написала marfitsin/ux-vs-cx">о разнице между UX и CX.
— Уровни взаимодействия человека с компанией: 1) Одиночное взаимодействие, 2) Путешествие, 3) Отношения;
— Обычно UX-дизайнеры фокусируются на одиночном взаимодействии в цифровых каналах (реже — в офлайновых);
— Путешествие — это цепочка одиночных взаимодействий, возможно, в разных каналах. Например, заказ на сайте, подтверждение по телефону и электронной почте, получение товара от курьера;
— Здесь важно обеспечить бесшовные переходы между каналами и единство внешнего вида и голоса компании;
— Отношения — это вся совокупность путешествий и одиночных взаимодействий во время поиска, заказа, потребления товаров и услуг компании и дальнейшего взаимодействия (вроде ремонта и утилизации товаров);
— Для хорошего опыта на уровне отношений недостаточно хорошего опыта в каждом отдельном путешествии;
— Нужна координация между разными отделами компании, предвосхищение потребностей клиента, коммуникация с учётом всего предыдущего взаимодействия с ним;
— UX и CX по сути означают одно и то же. Важно стремиться улучшать опыт на всех уровнях взаимодействия, понимать, на какой уровень вы можете влиять, и договориться с командой о терминах, чтобы не было путаницы.
In English. #definition #cx
Катя Григорьева написала о влиянии визуальной привлекательности на удобство использования.
— Позитивная эмоциональная реакция на привлекательный интерфейс делает людей терпимее к небольшим неудобствам при взаимодействии (но только небольшим);
— Они могут оценивать удобство интерфейса выше, чем на самом деле. Это мешает увидеть часть проблем на пользовательском тестировании;
— Исследование Центра дизайна Hitachi в 1995 году показало сильное влияние эстетики на людей, даже если они оценивают функциональность системы;
— Можно немного снизить разрыв между опытом респондентов и тем, какие они дают оценки;
— Респонденты не должны давать свои оценки под давлением. Убеждайте, что это полезно. Давайте возможность комментировать, задавая открытые вопросы, но не давите, если им нечего сказать. Молчание — важная составляющая в общении исследователя и респондента;
— Они не должны хотеть порадовать вас. Подчёркивайте, что не вы разрабатываете этот дизайн и негативные комментарии вас не расстроят. И старайтесь эмоционально не реагировать;
— Направляйте респондентов за пределы визуального слоя. Используйте расплывчатые формулировки вроде «Есть ли у вас комментарии о том, насколько легко или сложно было найти эту информацию?»;
— Можно вернуть респондента на шаг, показавшийся особенно сложным, и попросить описать, что здесь произошло.
Канал Кати. #user_testing
🗓 19 октября, 18:30
📌 Selectel UX & Research Meetup#2. Про карьеру и исследования
Ребята из @SelectelCareers проводят митап для UX-специалистов, где вместе с коллегами из Авито обсудят направления роста дизайнеров и помогут составить индивидуальный план развития. Расскажут об исследованиях и о том, как сделать их проведение полезным и ценным для продуктовых команд.
Основные темы:
◽️ Кто есть кто в UX: роли и направления развития специалистов по пользовательскому опыту
◽️ Составляем план развития для UX-дизайнера
◽️ Как не проводить исследования ради исследований и применять результаты в работе
◽️ Редакторская таблица мер и весов: как в Авито научились измерять текст
Регистрируйтесь на мероприятие. Все участники получат запись и смогут принять участие в розыгрыше приза за лучший вопрос 🦖
Приглашаем в офис Selectel всех, кто в Санкт‑Петербурге: https://slc.tl/vbn1c
Или подключайтесь онлайн: https://slc.tl/9fbmg
Реклама ООО «Селектел» erid 2Vtzqv8BHdE
В Сбербанке подготовили гайд о двух адаптированных вариантах языка: ясном и простом.
— Они нужны людям, которым сложно читать и понимать обычные тексты;
— Понятен текст или нет, нельзя судить по себе. Все читатели разные по возрасту, образованию, жизненному опыту, интеллекту;
— Ясный язык — адаптированный национальный язык для людей с трудностями восприятия информации. Как правило, нужен для передачи информации, важной для обеспечения безопасности или расширения доступности;
— Он нужен для людей с недостаточно развитыми навыками чтения и понимания прочитанного: а) с ментальной инвалидностью; б) особенностями интеллектуального и эмоционального развития; в) возрастными нарушениями; г) иностранцев;
— Использовать его на всякий случай не стоит: писать на нём непросто и аудитории, понимающей простой язык, он может показаться слишком упрощённым;
— Простой язык — адаптированный язык для более массовой аудитории, коммуникации всех со всеми на любые темы;
— Например, он может помочь учащимся старших классов при вступлении во взрослую жизнь, когда нужно разобраться в условиях заключаемых договоров;
— Общие правила: 1) Ориентироваться на потребности и особенности читателя; 2) Учитывать его картину мира; 3) Не использовать абстрактные понятия, безличные конструкции, узкую терминологию, иностранные и многозначные слова, аббревиатуры;
— Также в гайде: как написать и проиллюстрировать текст на простом и ясном языках, практика применения, рекомендации команде и организациям.
#accessibility #writing
Avito Design Talk #9 – для UX-исследователей, продактов и дизайнеров!
📅 24 октября в 18:00
🌐 Онлайн
В программе мероприятия – четыре выступления от ведущих исследователей Авито, которые разберут реальные кейсы и расскажут, как определять топ USP при запуске нового продукта, как организовывать работу с хранилищем данных и работать с многочисленными пользовательскими запросами.
О чем будем говорить?
• Демократизация исследований в Авито: почему исследователи становятся лишними? Расскажут Екатерина Васильева и Никита Савченко.
• От хаоса к порядку: Юлия Шефтелевич поделится, как с помощью UX Research Backlog настроить системную отработку пользовательских запросов.
• Когда клиент требует новую фичу: опыт Дианы Нурекеевой в B2B-разработке.
• Как выбрать топ USP с помощью TURF-анализа: мастер-класс от Светланы Байтимеровой и Евгении Синегубовой.
Не упускайте возможность улучшить навыки продуктовых исследований вместе с профессионалами из команды Авито!
Принять участие в митапе: ссылка.
Алжанбек Шахнавазов написал, как проверить текст, презентующий ваш продукт.
— Замените своё название на название конкурента. Хороший текст перестанет быть актуальным. Если текст подходит конкурентам, значит, это белый шум, который клиенты слышат отовсюду;
— Сформулируйте противопоставление вашему преимуществу. Если оно как преимущество начинает звучать абсурдно, исходное преимущество тоже так себе. «Айфоны по очень низким ценам» → «Айфоны по очень высоким ценам» (абсурдное преимущество);
— Не упоминайте преимущества явно, пусть читатели выведут их самостоятельно. Пишите: «Перед продажей проверяем каждое устройство по 5 параметрам». Читатель думает: «Им точно не всё равно на качество».
#writing