Саадия Минхас написала о нижней панели вкладок (tab bar).

— До неё легко дотянуться большим пальцем;
— На десктопе используется редко — на больших экранах её сложнее заметить;
— Включает 3−5 пунктов, ведущих на разделы верхнего уровня. Если разделов больше 5, можно добавить пункт More;
— Если используете нестандартные иконки, каждый пункт лучше сопроводить подписью;
— Если решили раскрасить иконки, не используйте слишком много цветов;
— Подписи: располагаются под иконками, короткие, без переноса на вторую строку, обрезания многоточием, уменьшения кегля, чтобы уместить текст;
— В альбомной ориентации телефона подписи можно разместить справа от иконок, чтобы заполнить пространство и освободить место для контента;
— Кроме цвета активный пункт можно выделить подложкой, точкой или полоской, заливкой контурной иконки;
— У пункта может быть индикатор, который показывает состояние контента в разделе, например, что там есть что-то новое. Счётчик показывает количество таких элементов в разделе;
— Не стоит делать неактивными или скрывать пункты, если внутри нет контента (вроде пустой корзины).

In English. #tab_bar

Анастасия Вихарева написала о повышении доступности интерфейса.

— Правильная последовательность заголовков (h1 → h2 → h3) помогает пользователям скринридеров ориентироваться на странице;
— Оптимальная длина строки — 60 символов. На клавиатуре Брайля можно разместить максимум 66 символов;
— Ссылки делайте частью текста, а не вставляйте просто как https://www…, так как скринридер такие ссылки читает посимвольно;
— Порядок расположения текста, связанного с текстовым полем: лейбл, хинт, текст ошибки, плейсхолдер;
— Не забывайте о сфокусированных состояниях для элементов интерфейса;
— В опросе после списка вариантов ответа желательно ставить кнопку «Продолжить», чтобы слепой пользователь понял, где заканчивается список;
— При открытии всплывающего окна автофокус — на заголовок.

#accessibility

В «Инферит Клаудмастер» написали об этапах создания дизайн-системы и проблемах, с которыми столкнулись.

— 1. Планирование и приоритизация: разделение процесса на этапы; анализ существующих компонентов и выявление зависимостей между ними; приоритизация задач дизайнерами и построение плана работ;
— 2. Утверждение семантики и шаблонов для оформления в Фигме: система нейминга токенов, состояний, вариантов, иконок и компонентов в Фигме и на фронте; шаблоны для создания документации; система статусов компонентов для определения готовности к публикации и разработке;
— 3. Стандартизация построения интерфейса: внедрение дизайн-токенов; определение стандартов для сетки, отступов, скруглений, типографики и цветов;
— 4. Шаблон чейнджлога об изменении компонентов дизайн-системы и внедрении новых;
— 5. Разработка страниц с компонентами: демонстрация компонентов, описание правил использования;
— 6. Изменение компонентов в продукте (итеративный процесс): выбор компонентов для разработки в спринте; тестирование и ревью; внедрение обновлённых компонентов в продукт; оценка эффективности и влияния на пользовательский опыт;
— Одна из проблем: не разделили компоненты на более простые атомы и молекулы, из-за чего они стали слишком сложными, а их состояния избыточными.

#design_system

Ольга Дубинина написала, как сделать тосты (снекбары) заметнее.

— Это всплывающее сообщение, появляющееся в ответ на действие пользователя в интерфейсе;
— Оно должно быть контрастно фону. Если использовать фирменный цвет, сообщение может потеряться в интерфейсе. Не забудьте проверить контраст в тёмной теме;
— Не делайте текст слишком мелким, пользователям с плохим зрением будет трудно его прочитать. Тост появляется на время, нет смысла делать его слишком мелким, чтобы сэкономить место на экране;
— Чтобы смысл сообщения считывался быстро, используйте статусные цвета: зелёный для позитивной обратной связи, красный для негативной;
— Ради людей с дальтонизмом статус стоит дублировать иконками: галочка для позитивного сообщения, ! или × для негативного;
— Позитивный символ можно подчеркнуть скруглённой успокаивающей формой (включить в круг), негативный — угловатой (включить в треугольник).

#toast

Хотите получать более точные данные от респондентов в своих исследованиях?

Узнайте, как как избежать уклончивых ответов с помощью методов, предложенных Ксенией Черкасовой, старшим исследователем в Авито. Разберитесь с защитными реакциями участников и сделайте интервью более эффективными. Подробности по ссылке.

Реклама. ООО «Авито Тех».

Станислав Хрусталёв написал об избранном в мобильных приложениях интернет-магазинов.

— Если в нём ничего нет, не показывайте грустный смайлик. Добавление товаров — не задача, не сожалейте, что она не выполнена;
— Если объясняете, как добавлять товары в избранное, покажите конкретную иконку (обычно это сердечко или закладка). Иногда показывают анимацию с нажатием;
— Из пустого избранного чаще всего предлагают перейти в каталог (или в конкретные разделы, если их немного). Альтернативы: поиск, главный экран, скидки и акции, заказы (если есть у пользователя), связь с консультантом;
— В списке товаров кнопка добавления в избранное чаще всего в правом верхнем углу карточки. На экране товара — под фото, иногда её фиксируют в нижней части экрана рядом с кнопкой корзины;
— Переход в избранное — в таббаре. Если функций много, может стать частью профиля. Если ассортимент небольшой — частью каталога. Дополнительно его можно разместить в меню быстрых действий;
— Если в избранном не пусто, отображайте метку, как вариант — с количеством товаров;
— Добавление в избранное — доступно без входа в приложение;
— Иногда кроме товаров добавлять можно бренды, образы, полезный контент, магазины, параметры поиска;
— Нажатие на кнопку можно сопровождать лёгкой вибрацией устройства, а также подтверждать всплывающим сообщением (тостом);
— Если в избранном есть разные списки, не заставляйте сразу выбирать, куда именно добавить товар. Ozon ненавязчиво предлагает сделать это в тосте;
— В списке товаров в избранном лучше закрепить заголовок, чтобы пользователь понимал, что просматривает. Можно показать количество товаров;
— Интересные фильтры: в наличии и не в наличии (упрощает навигацию, помогает управлять ожиданиями), товары, на которые цена снизилась;
— Если товар закончился, можно сразу в карточке предложить посмотреть похожие;
— Многие предлагают разделение избранного на пользовательские списки. Полезна возможность добавить товар в несколько списков сразу;
— В избранном можно предложить разрешить пуши, чтобы узнать о снижении цены;
— После перемещения товара в корзину не удаляйте его из избранного автоматически;
— Не забудьте о возможности быстро очистить избранное.

#favorites

В Хабре подвели итоги конкурса «Технотекст 2023», и вот какие статьи победили в категории «Дизайн»:

— Как работать с нейросетью Midjourney, чтобы получать желаемый результат (простой уровень, читать 8 минут);
— Переменные и условия: как быстро сделать в Фигме нелинейный прототип (средний, 5 минут). Уже была в UX Notes раньше;
— Figma to Frontend: как мы автоматически синхронизируем дизайн и код (средний, 7 минут).

Команда B2C Customer Сare ищет опытного увлеченного UX-исследователя, который поможет сформировать культуру исследований в зрелой data-driven команде.

Мы занимается обслуживанием клиентов – создаем рабочие места для сотрудников и сценарии голосового IVR для клиентов.

Чем предстоит заниматься:

✅ проводить исследования полного цикла от брифа до работы с результатами
✅ следить за развитием индустрии: проводить бенчмарки ботов, анализировать AI-тренды
✅ участвовать в кросс-командных исследовательских проектах кластера.

Ждем профессионалов с опытом выстраивания взаимодействия в команде и организации непрерывного процесса исследований.

Предлагаем гибридный график работы, комфортный офис Сбербанк Agile Home, расширенный ДМС с первого дня и льготные условия по ипотеке с выгодой до 4%.

Откликайтесь по ссылке.

Ксения Толокнова написала о навигации в мобильных приложениях.

— Ограничения таббара: все сценарии приложения приходится раскладывать в 3–5 условных папок; бывает непросто придумать короткие и понятные названия разделов;
— Эффект размытия сложно реализовать в Андроиде, поэтому таббар в одном и том же приложении на разных платформах может отличаться. Пример — Revolut;
— Где отображается: 1) только на основных экранах, 2) на основных и внутренних экранах, 3) на внутренних экранах при прокрутке вверх;
— Первый вариант выбирают, например, мессенджеры, чтобы не отвлекать пользователя от открытого чата;
— Во втором случае таббар не отображается только тогда, когда что-то открыто поверх: полноэкранные модальные окна (например, просмотр видео), шторки, экранные клавиатуры;
— Такая навигация запоминает положение пользователя в разделе. Если из выбранной в разделе Fitness+ тренировки перейти в Summary, нажатие на Fitness+ вернёт к тренировке. Повторное нажатие на Fitness+ откроет главный экран раздела;
— Применяется реже и для приложений со сложной структурой разделов;
— Третий тип больше подходит для контентных лент и статей. Фейсбук вообще комбинирует варианты 2 и 3;
— Интересные решения, которые легко реализовать: градиентный фон с прозрачностью, если есть только тёмная тема (Spotify), выделение центральной иконки, по нажатию на которую поднимается шторка с основными действиями в приложении (Binance);
— Sidebar для навигации рекомендуют использовать в мобильных приложениях с 5 и более разделами или с 2 и более уровнями иерархии в навигации. Но в iOS это будет кастомная разработка;
— В приложениях с большой базой информации часто используют навигацию через поиск. Этот вид навигации редко является единственным, но часто бывает ключевым;
— Top bar (Top app bar в Андроиде) важен для навигации, так как позволяет разместить кнопку для возвращения назад или открытия сайдбара и иконки дополнительных действий (в гайдлайнах Material Design рекомендуют до 3);
— В Андроиде заголовок текущего экрана располагают близко к кнопке «Назад». Люди, которые раньше использовали iOS, могут думать, что это название предыдущего экрана.

#navigation #tab_bar

Маргарита Хохлова рассказала об улучшении продукта с помощью текста.

— Дизайнеры делятся примерами смешных и изобретательных кнопок в интерфейсе, но и обычный скучный текст может влиять на метрики и улучшать продукт;
— Текст надо тестировать. Не весь, но важный вроде названия новой услуги. Он может нравиться редактору и всей команде, но на практике не сработать: сами пользователи не знают, от чего зависят их решения;
— Для этого придётся настроить процесс, чтобы работа над текстом стала его неотъемлемой частью и можно было отслеживать метрики;
— Текст может выручить, если нет ресурсов разработки. Костыльные, временные решения в тексте — это нормально. В книгах по UX-редактуре пишут, что если сценарий кривой, его надо возвращать на доработку, а не писать текст. В жизни всё немного иначе;
— Начните поиск решения продуктовой задачи с вопроса «Можно ли эту проблему решить текстом?». Как правило, можно;
— Пользователи читают текст в интерфейсе и даже принимают на его основе решения. Иногда исправить проблему можно словами, что-то пользователю объяснив;
— Например, подсказать не оставлять запросы потенциальных клиентов без ответа, даже если это отказ («Даже отказ лучше молчания»), и что частота ответов влияет на позицию в поиске;
— Только писать надо о том, что важно пользователю. Это очевидно, но об этом часто забывают.

Канал Маргариты. #writing

Опубликовали видео с Alfa Design Meetup #2:

1. Женя Филатов, Звук — За гранью

2. Григорий Ковалев, Альфа-Банк — Волшебный чемоданчик

3. Татьяна Юдина, Альфа-Банк — Найм в дизайн-команду

4. Олег Мереуца, Альфа-Банк — Синдром самозванца: как с ним жить

Открыт набор на мини-курс для тех, кто хочет развиваться в цифровом дизайне! Всего за 5 дней вы освоите Figma, научитесь создавать интересные анимированные макеты и поймёте, как тестировать их на пользователях.
Регистрация: https://epic.st/g3JX7V?erid=2Vtzqucsem4

Чем полезен мини-курс:

— Сделаете проект для портфолио — интерфейс сайта и приложения
— Узнаете, почему UX/UI-дизайнеры так нужны IT-компаниям, и поймёте, почему им так много платят
— Познакомитесь с Figma — самой востребованной программой UX-дизайнера
— Получите большой список источников, которые помогут быть в курсе трендов индустрии
— Поймёте, какие навыки нужны UX/UI-дизайнеру, чтобы быстрее расти в доходах
— Сможете задать вопросы опытному дизайнеру

🎉 Каждый день за прохождение этапа вы будете получать полезный бонус!

Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

Игорь Штанг написал об однородности списка.

— Идеальный список должен быть однородным по смыслу и грамматике;
— Смысл: собирать вместе нужно логически связанные вещи;
— Грамматика: формулировать пункты нужно однотипно, по крайней мере, ведущие слова в каждом пункте должны быть выражены одной частью речи в одной форме;
— Пример списка: «Типичные ошибки и проблемы: позволять себе проваливаться в эмоции (главное слово — глагол), самогаллюцинирование (существительное), не держать концентрацию (гл. с отрицанием), нет процесса (сущ. с отрицанием)»;
— Если заменить главные слова на глаголы, по возможности без отрицания: «Типичные ошибки и проблемы: позволять себе проваливаться в эмоции, галлюцинировать в одиночку, терять концентрацию, подолгу не обнаруживать отсутствия процесса»;
— Теперь заголовок и пункты списка можно прочитать одним предложением, и оно будет согласованным;
— Но иногда удобно объединить в один список разные вещи, чтобы не плодить лишних сущностей и лишнего оформления.

Канал Игоря. Копии материалов в ЖЖ Игоря: первая часть, вторая. #writing #layout

Тезисы из книги Скотта Беркуна «Дизайн всего». Книжка небольшая, на один вечер.

— У всего, что сделал человек, есть дизайн. Если он решил «обойтись без дизайна», то дизайн у вещи будет, но, скорее всего, плохой;
— Чтобы вещь была удобной, её надо такой спроектировать. Для этого нужны ресурсы и воля заказчика, который нанимает дизайнеров;
— Именно они задаются вопросом, как улучшить вещь для конкретных пользователей с конкретными потребностями (задачами);
— Без ответа на этот вопрос другие участники команды, создающей вещь, могут преследовать разные, иногда противоположные цели. А дизайн — это командная работа;
— Ответов может быть множество. Не стоит искать их в размышлениях, надо идти к потенциальным пользователям: говорить с ними, наблюдать, испытывать прототипы;
— Чтобы добиться высокого качества, надо исследовать множество идей, сравнивать их, разработать критерии оценки;
— Сколько дизайнеров нужно, чтобы вкрутить лампочку? А почему именно лампочку? Можно перепроектировать комнату или изменить режим дня, чтобы искусственный свет не требовался;
— Умение сформулировать проблему не менее важно, чем сами дизайнерские навыки;
— Стиль — это сообщение, даже если это отсутствие какого-либо стиля. Иногда определиться с ним надо как можно раньше, так как это решение влияет на все остальные (например, при создании спортивного автомобиля);
— Человек куда менее рационален, чем мы предполагаем. Надо изучать психологию, так как подходящие дизайн-решения могут казаться нелогичными (например, кнопки-плацебо);
— Думать о том, как вещь работает, — значит учитывать всё: для чего она нужна, какую роль сыграет в чьей-нибудь жизни, как повлияет на мир;
— Плюс планового устаревания — это технологический прогресс. Но надо помнить: «Мы не наследуем землю у предков — мы берем её взаймы у детей» (Уэнделл Берри);
— За каждое улучшение кто-то должен заплатить: покупатель, компания или государство. Успех дизайна зависит в том числе от способности дизайнера продать идею заказчику. Подушки безопасности — круто, но +$750 к цене машины;
— Процесс поиска решения — это цикл «Узнавать → Создавать». Исследования в области дизайна очень важны, поэтому и стали отдельной профессией;
— Команда, состоящая из не похожих друг на друга людей, позволит посмотреть на вещь под разными углами ещё до исследования и сделать дизайн инклюзивнее;
— Настоящий дизайн учитывает технические, организационные, финансовые, законодательные и прочие ограничения. Компромисс — одна из центральных концепций в дизайне;
— Хороший дизайн не заставляет пользователя думать (например, предлагает узнать, а не вспомнить), снижает количество ошибок, уменьшает серьёзность последствий, помогает пользователю сохранять состояние потока при выполнении задачи;
— Чем больше инструкций, тем хуже дизайн. Нет ничего плохого в добавлении функций, если они не усложняют использование вещи. Но иногда нужна продуманная сложность (в кабине самолёта);
— Посмотрите на создаваемую вещь в контексте;
— Подумайте, кому сейчас или в будущем может навредить ваш дизайн и как можно этого избежать? Готовы ли вы выйти на сцену перед своими клиентами и рассказать, как ваш продукт влияет на их поведение и выбор?

#book