25223
Чат читателей: @uxnoteschat В соцсетях: vk.com/ux_notes и fb.com/uxnotes Вакансии: @uxwork Автор: @zGrav Est. 2016. Реклама на канале: https://uxnotes.ru/ads
Вячеслав Андреев написал об адаптации мобильного браузера под ТВ.
— В среднем телевизоре железо слабее, чем в среднем телефоне. Придётся отказаться от анимаций и некоторых функций вроде вкладок (каждая вкладка требует памяти и вычислительной мощности);
— Стоит адаптировать 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
Мы знаем как в эпоху горящих дедлайнов ценно время и комфорт. Если вы тоже придерживаетесь этих двух вещей, советуем присмотреться к осенней новинке — TECNO MEGABOOK S1.
Это один из самых легких 15,6-дюймовых ноутбуков и весом всего 1.3 кг. Мощный аккумулятор выдержит активный график встреч и до 13 часов сохранит вам мобильность на одном заряде.
Дисплей с разрешением 3.2K и 120 Гц представит живую картинку, что подойдёт для работы с графикой, а шесть громких динамиков с технологией DTS X: Ultra дополнят отличным звуком и позволят насладиться контентом в полной форме.
Характеристики топового исполнения ноутбука на процессоре Intel i7 сможете найти тут https://bit.ly/3LuCcBS
Решения на процессоре Intel i5 сможете найти тут https://bit.ly/45XrKex
Вы сможете отлично сэкономить в период с 11.09 по 11.10 действует скидка по промокоду MEGATECNO.
Это почти 12 000 рублей, на которые можно дополнить экосистему и взять еще и смартфон от TECNO
Реклама. TECNO Mobile Limited Erid: Kra23sSxK
Повышение зарплаты
Не часто вижу информацию о том, как правильно просить повышение зарплаты, зато знаю много знакомых, которые очень стесняются этого вопроса и для них поднять разговор со своим руководителем о повышении — целое испытание. На самом деле причиной этих переживаний является то, как именно чаще всего люди подходят к данной задаче. Так как я руковожу дизайнерами, я часто бываю в роли того, к кому приходят с таким запросом, поэтому хотел бы подсветить то, что нужно и не нужно делать.
Главная ошибка, с которой я встречался во всех компаниях, где руководил дизайнерами — просить повышение без объяснений. Чаще всего я встречал два предлога: 1) я давно работаю в компании, поэтому хочу повышение; 2) в другой компании платят больше. Я не буду обесценивать эти два пункта, они безусловно заслуживают внимания и нужно понять, почему человек, который работает долгий период времени не получил никакого повышения, однако этих причин недостаточно для того, чтобы повысить вам зарплату. Чтобы получить заветное повышение, нужно аргументировать его. Важно понять, какую пользу вы успели принести за период вашей работы, если польза значительна, то и у бизнеса вряд ли возникнут вопросы к вашей просьбе. Здесь многие начинают панику, кажется, будто бы пол года улучшал продукт, рисовал новые экраны, фичи, а по итогу и вспомнить нечего. На этот случай есть хорошее решение — поставьте встречу с вашим продуктовым менеджером, предупредив, что вы хотели бы узнать о том, какие достижения достигла команда, например, за полгода. Скорее всего у каждого менеджера есть эти данные и он будет рад поделиться ими с вами. Узнайте, как изменились метрики, как изменился продукт и то, как на это повлияли лично вы. Попытайтесь выделить из полученной информации 2-3 достижения, в которых особенно велик ваш вклад. Например, если вы улучшали форму регистрации, то посмотрите на то, как изменилась конверсия и, если они увеличилась, то это хороший повод рассказать об этом.
Ваша задача посмотреть на себя со стороны бизнеса. В компании есть другие сотрудники, многие из которых также стремятся к повышению, но повышение получают только те, кто приносит вклад и умеет об этом рассказать.
Дизайн-вторники — серия разговоров Яндекс Практикума о дизайне с известными экспертами из отрасли.
В этот раз мы пригласили Александра Аверина, ведущего дизайнера Яндекс Маркета. В компании он отвечает за приложение для продавцов. Именно о нём и пойдёт речь — о том, как команда внедрила большое обновление.
→ Бесплатно, 19 сентября в 19:00 Мск
Вы узнаете:
— как выглядела MVP-версия приложения;
— как команда исследовала, чего именно хотят продавцы;
— какие принципы дизайна легли в основу новых интерфейсов;
— как увидеть на цифрах, что ваш дизайн работает.
→ Зарегистрируйтесь на Дизайн-вторник
#реклама
Сакральный вопрос на собеседовании
Редкий пост о работе (надо ведь и о ней когда-то писать). В последние три месяца с тех пор, как снова стала лидом, опять побеседую продуктовых дизайнеров.
При регулярном потоке кандидатов и собесов начинаешь видеть срез по индустрии. Наблюдение порождает поток рефлексии. У Тинькофф довольно жёсткий отбор — несколько направлений и этапов, тестовые задания, отлаженный процесс. Из-за этого начинающих ребят видишь редко (только в рамках стажёрских программ), но видишь много миддлов и сеньоров. У этой группы самым показательным индикатором для меня становятся вопросы: опытный дизайнер лучше всего раскрывается, не когда рассказывает о себе (ведь навык самопрезентации может быть развит по-разному — есть очень крутые ребята, которые просто не умеют зрелищно показать свою работу), а когда задаёт вопросы работодателю и потенциальной команде.
Есть один вопрос, который я даже у сеньоров слышу нечасто и удивляюсь, почему. Спрашивают про процессы, про вакансии, про специфику продукта, но почти никто не задаётся вопросом: а в чём здесь вызов?
Вот я опытный специалист, много лет потратил на дизайн и теперь собираюсь инвестировать в новый проект ещё одну солидную часть своей жизни. Я буду каждый день много часов его изучать, дорабатывать, генерить и проверять гипотезы. Так какие конкретно проблемы мне предстоит решать? В чём трудность этой работы и почему вам для неё нужен сеньор? Каких результатов предстоит добиться, в чём вызов, зажигает ли он меня или я выгорю нафиг через полгода?
Вопрос простой, но на нём столько всего завязано: и интерес к работе, и этапы развития продукта, и планирование, и целеполагания. Когда задаёшь этот вопрос, узнаёшь очень много о команде, с которой предстоит иметь дело, о навыках, которых тебе может не хватить, о стадии развития продукта.
Допустим, говорят: продукт молодой, нужно срочно выпустить MVP, посмотреть результаты и пойти дальше. Окей: это означает, что ты как дизайнер столкнёшься с серьёзными техническими ограничениями и жёсткими сроками, у тебя не будет базы пользователей, но зато сможешь в режиме стартапа придумать всё с нуля, вдохнуть жизнь в что-то принципиально новое. Кого-то эта работа зажигает, а кого-то, наоборот, страшно демотивирует.
Или обратная история: говорят, что продукт очень зрелый, существует много лет без дизайнера, и теперь его надо поставить на продуктовые рельсы и наладить весь процесс системного улучшения пользовательского опыта. Это уже совершенно иной вызов — придётся разбираться с легаси, смириться с долгим циклом реализации, но при этом есть возможность опереться на пользовательскую базу, проводить много исследований и мелких доработок, поэтапно, медленно и существенно подкачать метрики.
А бывает, что вызова вообще нет: сиди и делай рутину по отлаженным процессам в команде из десяти других дизайнеров, каждый из которых отвечает за очень маленькую часть интерфейса. Сиди шелкопрядом и пряди свою тонкую нить, но дальше не пустят. Узнав об этом, ты можешь порадоваться спокойствию и порядку, если на прошлой работе сильно устал от хаоса. А можешь, напротив, обнаружить, что вообще не подходишь для этой вакансии — у тебя энергия и амбиции кипят, хочется движа, а тут полный штиль.
Но не спросишь — не узнаешь. И поразительно, как мало людей спрашивает. Сначала я списывала это на стеснение: людям на собеседовании сложно поменяться ролями, сложно перестать продавать себя и потребовать от работодателя продать им вакансию. Это понятно в отношении неопытных ребят — я и сама на ранних этапах карьеры куда угодно бы пошла и ничего такого бы не спросила, чтобы не показаться наглой. Но ведь ребята с опытом 5, 7, 10 лет уже прошли огонь, воду и медные трубы, за них часто сами работодатели конкурируют, соревнуясь между несколькими офферами, а всё равно вопрос про вызов почти не звучит. А если звучит — это праздник, сразу узнаёшь единомышленника. Уже думаю: может, микро-статью написать об этом — почему не стыдно спрашивать на собеседовании про вызов.
Коллеги, идем?
22 сентября Тинькофф проведет #FFDD2D Design Conf — прозрачную конфу о дизайне в продуктовых компаниях.
Спикеры расскажут о будущем дизайна, неидеальных процессах и работе с бренд-медиа. После докладов — афтепати с диджеями, напитками и разговорами по душам.
Конференция будет проходить онлайн. Регистрация открыта до 19 сентября. Торопитесь, пока есть места:https://u.tinkoff.ru/conf-design.2023
АО «Тинькофф Банк», ИНН 7710140679, erid:2Vtzqvpangp
🗓 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
Илья Бирман написал о ещё одном методе проектирования интерфейса — потоке данных.
— Он помогает избавиться от лишних экранов и шагов;
— С точки зрения ТРИЗа, идеальный интерфейс — это интерфейс, которого нет, но его функция выполняется;
— Об интерфейсе можно думать как о посреднике в потоке данных, которые текут между людьми и машинами;
— Например, человек собирается в поездку и хочет узнать погоду в месте назначения. Интерфейс помогает запросу человека попасть в машину и отобразить нужную информацию. Отсюда получаем интерфейс: поле ввода города, и рядом — погода в нём;
— Интерфейс оператора пультовой охраны: оператор должен получить какие-то данные о сработавшей сигнализации, что-то сделать с ними, что машина сделать не может, принять решения, и отправить данные обратно в систему;
— Метод подойдёт, когда речь о конвейерном, транзакционном взаимодействии, когда процесс работы не слишком творческий;
— Но всё же всегда полезно думать не модулями и не «бизнес-сущностями», а сценарием и ролью интерфейса в нём.
Канал Ильи. #process
Анастасия Ланцева из UXART написала о контрастности.
— WCAG допускает 2 уровня хорошего контраста: достаточный (АА) и повышенный (ААА);
— АА: от 4,5 для основного текста, от 3 для крупного больше 24 px или жирного больше 18 px;
— ААА: от 7 для основного текста, от 4,5 для крупного или жирного;
— Для элементов, которые не надо читать: от 3;
— Самый светлый цвет в 21 раз ярче самого тёмного. Яркость измеряется от 0 до 1, чтобы не делить на ноль, поделили 1,05 на 0,05 и получили 21. Порог контрастной чувствительности глаза — 0,02;
— Стандарт WCAG рекомендует придерживаться уровня АА, если нет особых требований, придерживаться уровня ААА не обязательно;
— Слишком высокая контрастность может вызывать усталость глаз, повышенную утомляемость, способствовать приступам эпилепсии, создавать визуальные искажения (вспомните визуальные иллюзии с контрастными объектами). Близорукость усиливает эти эффекты;
— Такая контрастность подойдёт промосайтам, с которыми пользователь не взаимодействует долго;
— Вычисляется по значениям RGB, но в реальности на неё влияет тип экрана (TN-матрица понижает контраст), освещение и свойства шрифтов (слишком тонкие линии менее контрастны);
— Текущий алгоритм некорректно оценивает некоторые цветовые пары и в целом не учитывает а) размер цветного элемента, б) где фон, а где текст. В WCAG 3.0 обещают новый алгоритм (APCA);
— Контрастность растёт нелинейно. Для чёрного цвета первая половина цветовой шкалы даёт 4 пункта контрастности, а вторая — 17.
Кстати, в эту субботу, 23 сентября, начнётся новый поток курса Валерии Курмак о цифровой доступности. Я сам прошёл его прошлым летом, и могу рекомендовать.
Курс помогает сформировать комплексное понимание того, как создавать доступные цифровые продукты с точки зрения дизайна и разработки, как тестировать доступность в вебе, iOS- и Android-приложениях.
Занятия ведут специалисты, которые давно занимаются доступностью (не так давно я упоминал инструмент Миши Рубанова для разметки макетов для скринридеров), а также люди с инвалидностью. Незрячий или слабовидящий человек протестирует и даст обратную связь по вашей курсовой работе.
Канал UXART. #color #accessibility
Илья Бирман написал о методе предложений.
— Это метод дизайна веб-страниц;
— Суть в том, чтобы сначала ограничиться в дизайне единственным инструментом — предложениями (текстом);
— Определите конкретные тезисы, которые вы сказали бы пользователю, если бы стояли с ним рядом;
— Например: «Светодиодные лампы выгоднее, хоть и дороже ламп накаливания». Следующими предложениями будет ответ на вопрос «Как?» и демонстрация, сколько человек сэкономит;
— Если не получается сделать страницу в виде текста из предложений, значит, вы не понимаете, что и зачем хотите сказать;
— Совместимо с методом прогрессивного джипега: первая версия дизайна готова уже за полчаса. Дальше её можно улучшать.
Канал Ильи. #process
Якоб Нильсен написал о новой третьей парадигме пользовательского интерфейса.
— 1. Пакетная обработка. Точкой контакта были перфокарты. С их помощью пользователь задавал набор инструкций для компьютера, с которыми работал центр обработки данных. Результат приходил через некоторое время (например, на следующий день) в виде распечаток;
— 2. Взаимодействие на основе команд. Происходит через командные строки, полноэкранные текстовые терминалы, графические интерфейсы. После выполнения каждой команды пользователь может оценить ситуацию и изменить последующие команды. Он может не знать точного пути к цели и корректировать свои действия после ответов системы;
— 3. Результаты на основе запроса. Пользователь сообщает системе не какие команды надо выполнить, а какой результат хочет получить (генеративный AI);
— Это сложно назвать взаимодействием, так как нет очерёдности и постепенного продвижения вперёд. Постепенная доработка полученного результата — форма взаимодействия, которая работает сейчас неидеально;
— Когда пользователь не знает, как именно выполнена та или иная операция, сложнее выявить и устранить проблемы. Скорее всего, AI-системы будут иметь гибридный пользовательский интерфейс;
— Клики и касания — важный аспект взаимодействия с пользователем, от которого не стоит отказываться. Заполнить длинную форму, общаясь с ботом (даже очень умным), всё ещё слишком сложно.
#ai
Юля Гранкина написала о виджетах.
— Виджет может поднять DAU приложения. Он привлекает внимание на домашнем экране. Упрощённое взаимодействие повышает лояльность продукту;
— Создавая виджет, надо определить основную функцию приложения;
— Виджеты включают 1) важную информацию, которую можно узнать, не открывая приложения, вроде погоды, 2) элементы управления основным приложением вроде музыкального проигрывателя, 3) коллекции потенциально интересного контента вроде фильмов в онлайн-кинотеатре;
— Данные о пользовательских финансах лучше не выносить в виджет;
— В виджетах разных форматов стоит использовать одни и те же размеры шрифтов и менять только объём информации;
— Актуальные размеры для iOS можно посмотреть в Human Interface Guidelines. В Андроиде размеры виджетов завязаны на размер ячейки, в которую вписывается иконка и название приложения;
— Можно предлагать пользователям варианты виджета с разной функциональностью;
— Стоит проработать пустое состояние, чтобы оно мотивировало сделать то, что приведёт к заполнению виджета. Можно и просто показывать коллекции контента или связанную с приложением статистику;
— Увеличение шрифта в системе на виджеты тоже влияет. Проверяйте, какой максимум текста может поместиться;
— Практика показывает, что минимальное время для смены контента на виджете — от 5 минут на iOS до 15 на Андроиде;
— В iOS нажатие на виджет открывает приложение. Если его размер превышает Small, можно добавить разные области нажатия. В Андроиде возможно более сложное взаимодействие с виджетом.
#widget #mobile
Станислав Дайнеко написал о трёх поколениях интерфейсов.
— 1. Статичные интерфейсы. Физическая кнопка не перемещается по устройству и связана с конкретной функцией;
— 2. Зависимые от контекста. Появляются физические кнопки, которые не перемещаются по устройству, но в разном контексте могут отвечать за разные действия. Например: а) физические кнопки в банкоматах, подписи к которым отображаются на экране, б) софт-кнопки в мобильных телефонах;
— 3. Динамические. Кнопки переехали на экран, их положение на экране и функции меняются динамически;
— Концепция динамических интерфейсов появилась уже в персональных компьютерах, но не была распространена широко. Навык «уверенного использования ПК» вполне себе был преимуществом;
— Пожилым людям может быть сложно разобраться в современных массовых интерфейсах, так как прошло уже два концептуальных перехода.
#olds