25252
Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Адам Григорян рассказал о презентации дизайна.
— У вас должен быть сценарий, но будьте готовы к тому, что всё пойдёт не так. Научитесь проще к этому относиться;
— Презентация — это когда вы показываете, а клиент вершит судьбу дизайна. Назовите презентацию обсуждением, чтобы выровнять ваши позиции;
— Объясните, чего вы хотите по итогам презентации. С этим пониманием клиент сильнее вовлекается в то, что вы говорите. «Вам нужно изучить наши материалы и дать обратную связь до послезавтра»;
— Разрешите перебивать в любой момент. Активное слушание, переходящее в беседу сильнее вовлекает и действительно превращает презентацию в обсуждение;
— Научитесь работать с позитивной обратной связью, когда клиент всем доволен и хвалит вас;
— Нет задачи понравиться своим внешним видом, голосом или манерой говорить. Покажите, что вы сделали и как это решает поставленную задачу. Часто этого достаточно, чтобы расположить к себе;
— Не поддакивайте. Соглашайтесь, когда клиент прав, и не соглашайтесь, когда не прав. Иначе вы становитесь его руками, а руки стоят дёшево;
— Учитывайте все замечания клиента. Если вы пропустите отдельные замечания, вам будут меньше доверять, вы потеряете репутацию подрядчика, которого заботит судьба продукта.
А ещё Адам рекомендует находить ошибки в макетах во время презентации и исправлять их на виду у клиента, чтобы показать своё стремление делать продукт лучше и подчеркнуть, что это не презентация, а совместный творческий процесс. Что скажете?
Видео. #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
Как дизайнеру почувствовать себя профи?
Первый способ — получить повышение.
Второй — расширить компетенции. Чем больше у вас навыков, тем вы увереннее и дороже на рынке труда. А ваши проекты в портфолио — более ответственные и внушительные.
Если вам подходят эти способы — приходите на курс Практикума по созданию мобильных приложений. Вы научитесь делать приложения не только для смартфонов, но и для TV, умных часов и других платформ. А в конце положите большой проект в портфолио.
Курс можно совмещать с работой: он идёт 3 месяца, а заниматься нужно максимум по 10 часов в неделю. Заново изучать базовую теорию и Figma не придётся — фокус только на том, что действительно пригодится в работе.
Что будет на курсе:
• Углубленное прототипирование, дизайн-системы, гайдлайны iOS и Android.
• Удобная теория в онлайн-тренажёре, который доступен 24/7.
• Практика на большом проекте на протяжении всего обучения.
• Преподаватель-сеньор, который проверяет проект каждые две недели. Ему можно задать вопросы напрямую — в чате.
Записывайтесь на курс и прокачивайтесь в дизайне.
Эмиль Аминев написал о повышении конверсии в чекауте.
— Не стоит сокращать всё, что возможно (на своё экспертное усмотрение), чтобы форма стала короче;
— Поговорите с пользователями, предложите пройти чекаут и прокомментировать, что удобно, что нет;
— Поле для ввода промокода оставьте достаточно заметным. Люди скорее откажутся от покупки, не найдя возможности ввести промокод, чем передумают покупать, отправившись на его поиски;
— Людям важно знать, из чего складывается итоговая цена, даже если это 7 строк (стоимость товаров, размер скидки, сборка, доставка);
— Не прячьте это под ? или i. Как сказал Бирман, уже 30 лет известно, что никто на них не нажимает;
— Людям приятно видеть, сколько получилось сэкономить за счёт промокода;
— Можно изменить выбор доставки с выпадающего списка на карусель, чтобы даты и время были видны без дополнительных нажатий;
— Сгруппируйте поля по смысловым блокам: адрес, контакты, условия сборки и доставки, оплата. Возможность видеть всю информацию и контролировать процесс заказа важнее скорости прохождения чекаута;
— Создайте короткую версию чекаута для повторных заказов, когда все данные уже есть, но их можно изменить.
#ecommerce #checkout
Павел Шечков написал о методе экспертной оценки интерфейса PURE.
— Расшифровывается как Pragmatic Usability Rating by Experts;
— Помогает проверить существующие сценарии и сделать их менее сложными. Можно использовать для сравнения с предыдущими версиями сценария и с решениями конкурентов;
— Оценки экспертов усредняются, чтобы итоговые цифры стали объективнее;
— Учитывается время до точки входа в сценарий и время на прохождение сценария. Чем дольше, тем больше баллов. О схеме перевода секунд в баллы надо договориться;
— Лучше оценивать не макеты, а тестовую сборку или хотя бы прототип с эмуляцией времени отклика системы. Так время прохождения сценария будет ближе к правде;
— В сценарии считаются все нажатия кроме ввода данных с клавиатуры, а также все скролы. За каждое нажатие и скрол — балл;
— Если есть затруднения с выполнением действия (есть когнитивная нагрузка, нужны усилия, но пользователи справляются) — 2 балла и жёлтая отметка;
— Если шаг выполнить трудно (высокая когнитивная нагрузка, вызывает смятение, часть пользователей может не справиться) — 3 балла и красная отметка;
— Если есть хотя бы одна жёлтая или красная отметка, весь сценарий окрашивается в этот цвет;
— Сценарий получает от эксперта цвет и сумму баллов. Чем больше баллов, тем сценарий сложнее. В красном сценарии надо исправлять шаги с красными отметками.
Статья Кристиана Рорера из Nielsen Norman Group о PURE (in English). Канал Павла. #research #expert_valuation
Евгений Трифонов написал о feature creep.
— Это процесс излишнего добавления фич, когда получается переусложнённый продукт с кучей малозначимых возможностей, которые только путают людей;
— Философия UNIX: пусть каждая программа хорошо выполняет одну задачу. Для выполнения новой задачи начинайте с нуля, а не усложняйте старые программы добавлением новых фич;
— Причины feature creep: 1) Считается, что добавлять — хорошо; 2) Негативный эффект не заметен сразу, а накапливается со временем; 3) Новые фичи проще продать начальству; 4) Люди, работающие над продуктом, хорошо его знают, меню для них выглядит понятным, а функции — нужными; 5) Обычно пользователи просят добавить фич, а не убрать; 6) Новые фичи проще продать аудитории;
— Чтобы что-то с этим сделать, надо сначала признать существование проблемы и начать о ней говорить;
— Регулярно спрашивайте себя, не хрень ли я делаю;
— Осознайте, что количество фич, которые можно впихнуть в продукт — тоже ограниченный ресурс. Не надо им бездумно расшвыриваться;
— Проверяйте, как продукт выглядит для нового пользователя. Смотрите, как он его использует, чтобы сломать своё «проклятие знания»;
— Измеряйте, какими фичами насколько активно пользуются;
— Задумывайтесь, если бы фича была платной, стал бы кто-то платить за неё;
— Если продукт используют более чем для одной задачи, точно ли это должен быть один продукт, а не несколько разных;
— Важно уметь говорить «нет». Многим проще что-то добавить в продукт, чем объяснить, почему этого делать не надо.
Канал Евгения. #product
Полина Захарова-Щукина рассказала о повышении эффективности онбординга в сложный продукт, в котором много инструментов и возможностей для использования.
— Их онбординг был в формате гайда из 8 шагов для новых пользователей, который помогал с базовой настройкой инструментов и получением первой пользы;
— Персонализируйте онбординг. Можно при регистрации уточнить, какую из предложенных задач хочет решить пользователь. Регистрация станет длиннее, но такой вопрос может даже повысить конверсию, убеждая, что продукт действительно подходит. После этого покажите более короткий гайд, заточенный под выбранную задачу;
— Определите, в какой момент пользователь осознаёт ценность предлагаемого инструмента (aha-момент) и становится готов заплатить. Онбординг должен привести пользователя к aha-моменту раньше, чем закончится бесплатный пробный период;
— Сначала проведите онбординги вручную, чтобы получить обратную связь, выявить барьеры и так далее;
— Подберите подходящие инструменты онбординга. Кроме гайда могут подойти всплывающие подсказки (с помощью сервиса UserGuiding), готовые шаблоны для разных задач, разделы в базе знаний;
— Пользователям может быть сложно выбрать из множества шаблонов. Можно сделать квиз (на Typeform) с вопросами, которые помогут подобрать подходящий шаблон;
— Ссылки на инструменты, которые не решают указанную при регистрации задачу, можно заблокировать, пока не наступит связанное с aha-моментом событие. Чтобы пользователи не плутали по интерфейсу и не отвлекались;
— В базу знаний можно добавить информацию не только по отдельным инструментам, но и по задачам, например, «Увеличить конверсию сайта в заявку».
#onboarding
Как дизайнеру почувствовать себя профи?
Первый способ — получить повышение.
Второй — расширить компетенции. Чем больше у вас навыков, тем вы увереннее и дороже на рынке труда. А ваши проекты в портфолио — более ответственные и внушительные.
Если вам подходят эти способы — приходите на курс Практикума по созданию мобильных приложений. Вы научитесь делать приложения не только для смартфонов, но и для 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
Дана Спиридонова написала об интерфейсном тексте на примере мессенджеров.
— Добавляйте разъяснения. В мессенджерах много функций, в том числе тех, с которыми пользователи раньше не сталкивались. Например, Телеграм объясняет, что включение автоудаления сообщений не коснётся сообщений, отправленных до включения функции;
— Будьте краткими. Особенно, если пользователь может читать текст параллельно с выполнением основной задачи — например, настраивать микрофон во время важного созвона;
— Дополняйте текстом неоднозначные иконки. Для десктопных интерфейсов предусмотрите подсказки при наведении курсора. Иногда иконку и вовсе можно заменить текстом;
— Смотрите, какой текст используется в аналогичных продуктах, чтобы пользователям было легко найти нужную функцию;
— Объясняйте вашу специфику. Например, в разных мессенджерах «группы» могут работать по-разному и давать разные возможности участникам и администраторам. Об особенностях ваших групп можно рассказывать при их создании;
— Не будьте слишком серьёзными. Люди проводят в мессенджерах много времени. Будет здорово, если даже корпоративный мессенджер будет иногда давать повод улыбнуться и перевести дух — милой картинкой или дружелюбным текстом;
— Но при этом важно не использовать специфический сленг, не шутить в сообщениях об ошибках, помнить о главной цели экрана.
#writing
Станислав Хрусталёв написал о строке поиска в мобильных интернет-магазинах.
— Чаще всего она находится в верхней части экрана или фиксируется там при скроле;
— Поиск — хороший кандидат в список быстрых действий приложения;
— Если каталог не сложный, строку поиска можно показывать после нажатия на кнопку. Общепринятая метафора — лупа;
— В поле поиска стоит разместить плейсхолдер, чтобы облегчить понимание его функции. Например, можно перечислить типы запросов, задать вопрос («Что вы ищете?»), упомянуть название компании («Найти в СберМаркете»), подсветить широту ассортимента, показать примеры конкретных запросов (в этом случае их стоит динамически менять);
— Плейсхолдер должен полностью умещаться в поле;
— При активации строки поиска избегайте сильного изменения её дизайна;
— Активированный поиск отображайте в полноэкранном формате с подсказками в виде актуальных (последних, популярных) запросов, уточнений текущего запроса, категорий, брендов, товаров;
— Также там могут быть непродуктовые подсказки вроде ссылок «Наши магазины», «Оплата»;
— Подсказки разных типов лучше не смешивать. Сгруппировать их можно заголовками, иконками, подписями (текст «Бренд», название вышестоящей категории), вкладками;
— Избегайте ложной персонализации, когда пользователь только зарегистрировался, а магазин уже показывает товары, «рекомендованные для вас»;
— При поиске учитывайте связи. Например, при поиске «джинсы» показывайте бренды, в ассортименте которых есть это слово. Можно показывать подходящие товары («адаптеры для iphone»). В аптеках — искать по симптомам;
— Показывайте количество найденных товаров: вообще и в категориях;
— В статье ещё много рекомендаций по взаимодействию со списком подсказок, истории поиска, пустым состояниям и так далее.
Канал Станислава. #search #ecommerce
Визуализация данных нужна, чтобы понятно визуализировать данные любой сложности и создавать интерактивные инфографики, которые помогут быстрее подавать концепции и станут эффективным бизнес-инструментом для заказчика.
После трёх месяцев курса продуктовый и графический дизайнер:
• сможет создавать интерактивную инфографику и управленческие дашборды;
• сможет представлять сложные данные без ошибок;
• добавит в резюме Tableau, DataLens и Datawrapper.
На всех этапах вас будет сопровождать команда специалистов: мы не дадим просесть по учёбе и поможем выкроить время на образование. Вы будете практиковаться на реальных кейсах и положите в портфолио работающие проекты. После обучения. 69% студентов Яндекс Практикума уже работают по специальности.
Подробнее о курсе: https://practicum.yandex.ru/datavis-and-bi-tools/
UX Notes оказались на 3-м месте в списке источников информации для продуктовых дизайнеров, согласно свежему исследованию DevCrowd!
Хороший повод сказать спасибо всем читателям и, конечно же, авторам публикуемых материалов. Спасибо вам!
Дизайнеру проще расти в карьере, когда прокачаны не только основные рабочие навыки, но и горизонтальные.
Усильте свой скиллсет на курсах Яндекс Практикума:
◾️ Дизайн мобильных и кросс-платформенных приложений — чтобы поработать с мобильными паттернами и создать интерфейсы для умных часов, телевизоров и планшетов.
◾️ Продуктовый подход — чтобы вырасти в дизайнера продукта и больше влиять на бизнес.
◾️ Коммерческая иллюстрация — чтобы рисовать иллюстрации для своих проектов и задач.
◾️ UX-исследования — чтобы лучше понимать пользователей, проводить интервью и опираться на данные в своих дизайн-решениях.
На курсах работают эксперты из Яндекс, Сбера, Циана и Тинькофф, а проекты основаны на реальных задачах от юнитов Яндекса и других компаний.
→ Выбирайте курс, чтобы сделать свой дизайн мощнее
Иван Вендров написал о тирании маржинального пользователя.
— Часто продуктовые компании заинтересованы в привлечении большого количества пользователей, в том числе и тех, кому продукт малополезен;
— Потому что их можно монетизировать за счёт рекламы. Или потому что нужен сетевой эффект;
— Такие компании смотрят на DAU. С одной стороны, продукт с высоким DAU — продукт, которым многие хотят пользоваться;
— С другой, компания фокусируется на пользователях, которые могут этот показатель увеличить (маржинальные пользователи);
— Если не привлечь внимания такого пользователя яркой картинкой или интригующим заголовком, он легко переключается обратно на ТикТок;
— Нетолерантен к сложности интерфейса, использует только большой палец, которым можно скролить. Добавление настроек ленты или кнопки «Показывать меньше такого» под контентом приводит его в гнев, так как занимает место яркого интригующего контента;
— Маржинальный пользователь — не всегда конкретный человек, иногда это состояние разума, и все когда-то бывали в таком состоянии;
— Популярные цифровые продукты часто спроектированы так, чтобы этим пользоваться. И продукты, которые становятся популярными, меняются в этом направлении.
In English. #product