Юля Кондратьева поделилась исследованиями тёмных паттернов из научных статей (компании таким делятся редко).

— 95% исследованных приложений и 97% популярных сайтов содержали тёмные паттерны. Правда, к ним относят и довольно вегетарианские приёмы вроде проставленной по умолчанию галочки;
— Если рядом расположить одинаковые кнопки «Подписаться» и «Отказаться», конверсия будет 16,7%. Если «Подписаться» сделать акцентной — 18,1%. Если под «Подписаться» написать «Рекомендовано» — 20,1%. Если «Отказаться» заменить на ссылку «Другие опции» — 23,6%;
— Если информацию о стоимости после истечения бесплатного месяца написать мелким серым цветом в сноске, конверсия становится 30,1% (без этого — 14,8%). Если добавить социальные доказательства — 22,1%. Если использовать манипулятивную формулировку на кнопке отказа — 19,6%. Если ограничивать время и создавать ажиотаж — 14,3%;
— Тёмные паттерны сильнее влияли на респондентов с худшим образованием;
— Удлинение флоу отказа повысило конверсию с 11,7% до 25,8% (+2 шага) и 41,9% (+6 шагов, похожий был в Яндекс Плюсе). При этом оценка готовности повторить опыт снизилась всего с 4,46 баллов до 4,11 и 3,97 из 7;
— Пользователи посчитали интернет-магазин с целым набором тёмных паттернов более надоедливым по сравнению с магазином без них: 3,44 балла против 2,34 из 5. А также хуже соблюдающим свои обещания (3,26 против 3,55, −5,8%) и менее вызывающим доверия (3,07 против 3,42, −7,5%);
— В одном исследовании дизайнеры опознали меньше половины тёмных паттернов. Не разбираясь, можно неосознанно использовать их в своей работе;
— Многие научные работы посвящены автоматическому отслеживанию тёмных паттернов. Возможно, когда-нибудь браузеры станут предупреждать о них при посещении сайтов или поисковые системы учитывать их наличие при ранжировании сайтов.

#dark_patterns #conversion

Александр Мачуговский написал, как сообщать пользователю о пустых обязательных полях формы.

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

#error #form

Елена Сеченых написала о тёмной теме в письмах.

— Нет единых правил инвертирования в разных почтовых сервисах и даже разных приложениях одного и того же сервиса;
— 4 варианта поведения: ничего не делать (большинство десктопных клиентов, веб-версии Gmail и Яндекс Почты); инвертировать светлые письма и не трогать тёмные; инвертировать и туда и обратно (Gmail на iOS); позволять управлять отображением с помощью медиазапросов (Apple Mail на macOS и iOS, Mail Ru на мобильных и в веб-интерфейсе);
— Подбирайте палитру, чтобы автоматически выбираемые почтовиками инверсные версии цветов оставались контрастными. Лучше не использовать жёлтый — по факту остаётся светлым и становится чуть более грязным;
— Изображения автоматически не инвертируются. Можно использовать картинки с прозрачным фоном. В этом случае может понадобиться светлая обводка, которой не будет видно в светлой теме, но которая выделит графику в тёмной (например, чёрный логотип, если брендбук не запрещает);
— Не забудьте про фоновые изображения. Они не инвертируются и находящийся поверх них текст может потерять контраст;
— Если почтовик умеет обрабатывать медиазапросы, можно просто подготовить отдельное изображение;
— Обязательно проверьте отображение письма в андроид-приложениях Яндекса, Mail Ru, Gmail, а также в Gmail на iOS;
— Есть сервисы для тестирования писем: Email on Acid, Litmus, но они не работают с Яндексом. Фреймворк для вёрстки Ampier показывает и классическую инверсию, и вариацию Gmail на iOS.

#email #dark_theme

Владимир Гайдадей написал об управлении интерфейсом одним пальцем.

— Существующие решения: режим одной руки (активируется свайпом вниз в нижней части экрана), когда верхняя часть интерфейса смещается в центр экрана. Так можно дотянуться до кнопки «Назад» в левом верхнем углу;
— Режим одной руки на экранной клавиатуре уменьшает её, позволяя дотянуться до всех букв большим пальцем;
— Кажется, они не особо популярны, так как проще перехватить телефон или использовать вторую руку. И они не учитывают, что палец может находиться не у нижней части телефона;
— Samsung, Xiaomi умеют уменьшить весь интерфейс под диагональ в 4 дюйма (можно настроить) и расположить в правом нижнем углу экрана;
— Обычно скрол останавливается, когда нижняя часть прокручиваемого контента достигает нижней стороны экрана или верхняя часть — верхней стороны;
— Можно реализовать длинный скрол — останавливать его, когда нижняя часть контента достигает верхней стороны экрана или верхняя часть — нижней. Так элемент, на который пользователь хочет нажать, можно проскролить в любую часть экрана, где бы ни находился палец;
— С одним пальцем пользователю остаются свайпы и тапы (одинарные, двойные и так далее);
— Свайп вправо можно оставить под возвращение назад, кроме главного экрана, где с ним может быть связано другое действие;
— Свайп влево в этой концепции подойдёт для вызова меню с действиями, которое также обладает длинным скролом.

#mobile

Артур Валиуллин написал о дизайнерских синках.

— Ежедневные синки помогают синхронизировать команду, следить за качеством, растить дизайнеров и чаще проводить ревью;
— Обратная связь, взгляд со стороны нужны постоянно, а не только тогда, когда их попросили;
— Синки оперативнее канбан-доски показывают сдвигающиеся сроки и ситуации, когда продакт решил изменить ранее согласованный сценарий;
— Все знают, над чем работают коллеги;
— Дизайнеры учатся друг у друга;
— Виден текущий уровень дизайнеров: кто готов переходить на новый грейд, обучать новичков, кому не хватает компетенций;
— Достаточно одного часа, если в команде 7–10 человек;
— Если недельные спринты с началом в понедельник, проверять статусы задач можно во вторник и четверг;
— Это скорее групповой менторинг, когда команда помогает находить решения;
— Не все активно вовлекаются. Точечно спрашивайте мнения тех, кто не участвует;
— Вопрос «Если ли вопросы или темы для обсуждения?» в конце формирует доверие в команде. Плюс иногда вопросы появляются;
— Придумывайте ритуалы, например, в понедельник спросить «Как ваши выходные?».

#management

Павел Шерер написал о страхе неопределённости в начале проекта.

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

#process

Вика Шаханина написала о проектировании настройки повторяющегося события в календаре.

— Чтобы не изобретать велосипед, можно изучить существующие решения. Настройка повторяющихся событий есть в нативных календарях в iOS и Android;
— Прежде, чем слепо копировать аналог (если решения разные, надо ещё разобраться, какое достойно копирования), полезно протестировать его на респондентах;
— Тестировать iOS и Android-календарь стоит как на пользователях соответствующей системы (календарь им привычен), так и на пользователях альтернативной;
— Трудности с созданием события, повторяющегося каждые 3 месяца, возникли в Андроиде;
— Чтобы задать характер повтора, надо было нажать на поле «Не повторяется» с двумя стрелками по кругу. Не все догадались на него нажать для настройки повторения (проблема индикатора состояния и команды);
— В самой настройке повтора был заголовок «Повторяется раз в», поле для ввода цифры и селектор с несклоняемыми «день, неделя, месяц, год». Последнее затруднило понимание. Один респондент поставил повтор каждые 4 года, думая, что повтор будет 4 раза в год;
— В итоге выбрали решение из iOS с добавлением склоняемой подсказки о текущей настройке: «Каждые 2 недели», «Каждые 3 месяца».

#form #time

Исследователи из ВК рассказали о немодерируемых исследованиях.

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

#research #unmoderated

Кинерет Ифра написала о пустых состояниях.

— 1. Пользователь не создал то, что должно отображаться на экране. Например, не добавил товаров в избранное;
— В заголовке напишите, чего он ещё не сделал: «Вы ещё не добавили ничего в избранное». В тексте добавьте мотивации: «Сохраните товар, который привлёк ваше внимание, чтобы вернуться к нему потом». Кнопка может вести на первый шаг в нужном направлении, например: «Посмотреть бестселлеры»;
— 2. Пользователь не сделал чего-то, что приводит к появлению здесь данных. Пустое состояние не сильно отличается от первого. В тексте стоит объяснить, как наполняется этот экран: «После того как пригласите пользователей, вы сможете отслеживать здесь их активность»;
— 3. Пользователь всё сделал, но для появления данных нужно время. Предложите вернуться позже и объясните, как работает система: «Нужны 24 часа после старта рекламной кампании, чтобы собрать достоверные данные»;
— 4. Пользователь всё удалил, и это часть рабочего процесса, например, пустой инбокс или список задач. Похоже на первый тип, но в этом случае стандартное пустое состояние будет выглядеть неуместно. Можно похвалить пользователя за продуктивность;
— 5. Содержимое экрана недоступно из-за выбранного тарифа. Кроме отображения кнопки перехода на нужный тариф (или начала бесплатного периода) стоит написать о ценности, как именно функция может быть полезна;
— 6. Ничего не найдено без фильтров. Возьмите ответственность на себя: «Мы не нашли то, чего вы искали». Предложите исправить или изменить введённый текст, покажите результаты поиска по похожим запросам, предложите расширенный поиск, предложите сообщить, когда появится то, чего пользователь искал;
— 7. Ничего не найдено с фильтрами. Предложите убрать некоторые фильтры, покажите то, что почти подходит, предложите сообщить, когда появится.

In English. #empty_state #writing

В RetailRocket написали об а/б-тестировании.

— Хороший источник — книга «Доверительное а/б-тестирование»;
— Большая проблема — отсутствие а/а-тестов, когда оба сегмента пользователей видят один и тот же контент;
— Значимые различия между сегментами в таком тесте показывают, что есть проблемы с делением трафика, недостаточностью данных (мало пользователей) или аномалиями. В этом случае а/б-тест запускать бессмысленно;
— Пример аномалии с метрикой «средняя выручка на пользователя» — покупатели с суммой заказа, в разы превышающей остальные заказы. Можно использовать метрики, менее чувствительные к аномалиям;
— Важная процедура — оценка мощности метрики, вероятности, что она значимо изменится в ответ на тестируемое изменение (достаточно 80%);
— Например, метрика «средняя выручка на пользователя» показывает пользу от блока с рекомендациями в денежном выражении, но её мощность ниже, чем у «среднее количество просмотренных карточек товаров» или «конверсия в пользователя с корзиной»;
— При краткосрочном тестировании пользу в деньгах можно не увидеть, если клиент добавит товар в корзину, а вернётся к покупке уже после окончания теста;
— Мощность также зависит от окружения. Чтобы проверить влияние блока с рекомендациями, лучше убрать с этой страницы другие инструменты, решающие ту же задачу. Также если блок находится на странице слишком низко, его влияние тоже будет ниже;
— Важно понимать, на что влияет тестируемая функциональность. Блок рекомендаций может увеличить количество покупателей, но ARPPU при этом может даже уменьшиться, если часть из них купит что-то по мелочи;
— Влияние на разные группы пользователей может отличаться. Блок рекомендаций для новых пользователей может влиять на конверсию, а для старых — на средний чек;
— Чаще всего не получится обойтись одним тестом;
— Оценить полезность инструмента можно и без а/б-теста. Можно проанализировать количество товаров с атрибутом «найдено с помощью системы рекомендаций».

#ab_testing

Аврора Харли написала о принципе общей области.

— Это один из гештальт-принципов, согласно которому элементы внутри границы воспринимаются как группа и имеют общие характеристики и функции;
— Границу формируют рамкой или фоном;
— Помогает быстро понять структуру интерфейса, какие элементы связаны между собой;
— Контрастным фоном на сайтах часто выделяют закреплённое сверху меню и большой футер со ссылками;
— Общую область часто используют в аккордеонах, чтобы сгруппировать содержимое раскрытой секции;
— Это более сильный способ группировки, чем близость или сходство. Подходит, когда надо сгруппировать разные типы элементов и нельзя регулировать отступы. Или когда уже задействованы другие способы, например, в таблице близостью группируются столбцы;
— Чрезмерное использование фонов и рамок создаёт визуальный шум. Иногда полезно убрать лишние рамки и подложки;
— Блоки с контрастным фоном во всю ширину окна могут вызывать ложное ощущение футера на странице, из-за чего пользователи могут закончить прокручивать страницу;
— Прежде, чем добавить рамки и фон, подумайте, необходимы ли они для понимания группировки элементов?

In English. #layout

Вот это, блин, реально полезный UX!

Дмитрий Якушин написал о дизайн-токенах.

— Набор дизайн-токенов позволяет сделать визуально согласованный и при этом гибкий дизайн (легко поменять один оттенок на другой);
— Дизайн-токен — псевдоним определённого значения той или иной переменной: цвета, шрифта, размера элемента, тени, отступа, скругления;
— Цвет #677178 можно назвать color-grey-600 и использовать в макетах так, а можно создать токены color-text-secondary и color-component-badge-bg-neutral, которые будут ссылаться на color-grey-600;
— В тёмной теме color-text-secondary может ссылаться на другой цвет, что упрощает создание макетов для других тем;
— Говорящие названия упрощают их использование, особенно новыми участниками команды;
— Есть черновая версия стандарта дизайн-токенов от W3C;
— В составном токене (миксине) может быть больше одной переменной. Например, в токене типографики: название шрифта, кегль, высота строки, межбуквенный интервал;
— color-green-600 — глобальная переменная (примитив, палитра, референсный токен) с абстрактным названием без контекста. Число обычно отражает количество света в цвете;
— color-text-success — дизайн-токен, который ссылается на переменную color-green-600 и имеет контекст использования: для текстовых сообщений об успехе;
— Есть компонентные токены, которые относятся к конкретным компонентам, например, color-component-badge-bg-info для фона информационного бейджика;
— Распространены стили названия: color_text_primary для веба, сolorToken.textPrimary для мобильных платформ;
— Полная структура названия: префикс, группа (color), тип (text, component), элемент (badge), модификатор (background), вариант (info), состояние (hover);
— Некоторых частей может не быть: если токен не относится к компоненту, если к проекту не подключено нескольких библиотек с токенами (прификс их идентифицирует);
— В именах токенов размеров лучше не использовать цифры, чтобы не было путаницы с фактическими значениями: xx-small, x-small, small, medium, large, x-large, xx-large;
— Категории: colors, font family, font size, line height, border color, grid, border radius, spacing, box shadow, duration/transition, shadows, z-index, size.

Канал Дмитрия. #figma #design_system

Илья Кретов написал об интерфейсном тексте и типографике. Некоторые советы:

— Сокращайте использование кавычек. Например, названия разделов можно писать с заглавной буквы или выделять полужирным начертанием: «Ищите треки в разделе Коллекция»;
— Разделяйте узким пробелом разряды числа, сумму и знак рубля, числа и среднее тире в диапазоне;
— Чтобы написать −25%, используйте знак минуса (а не дефис) и не отделяйте его от числа пробелом;
— Написанный только заглавными буквами текст слишком эмоционален, кричит. Лучше использовать его максимум в кнопках или бейджах;
— Связывайте текст кнопки с заголовком: «Подключить услугу? [Подключить]». Если любите Conversational Design, когда вместо «Подключить» пишут «Да, хочу!», убедитесь, чтобы кнопка была рядом с заголовком, иначе смысл может потеряться;
— Пишите эмоционально нейтрально: «Вы не можете продолжить без регистрации» → «Для продолжения необходимо авторизоваться»;
— Учитывайте адаптивность. Самая важная информация должна вмещаться на самые маленькие экраны;
— Текст на экране должен быть понятен без контекста. Лучше строить его на именительном падеже: «Какого настроения соберём плейлист? [Весёлого] [Грустного]» → «Под какое настроение соберём плейлист? [Весёлое] [Грустное]».

Копия статьи на VC. #writing #typography

Евгения Береснева написала о разделе с часто задаваемыми вопросами (FAQ).

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

#writing #support

Кэлвин Френч-Оуэн написал о категориях пользователей и учёте их потребностей при планировании продукта.

— Продукт должен быть удобным покупателю, быть удобным пользователю не обязательно. Можно ориентироваться на практиков (покупатели и пользователи в одном лице) и руководителей (покупатели и отчасти пользователи);
— Продавать практикам помогает эстетика и хороший UX. Возможность совместного использования ускоряет распространение знания о продукте между специалистами;
— Руководителям важнее всего отчётность: насколько эффективно работают подчинённые, есть ли проблемы;
— Также им важна стандартизация. Когда все работают одинаково, повышается безопасность, можно экономить на масштабах. Нужна настройка ролей и доступов с учётом корпоративной иерархии, сложная модель данных, позволяющая настроить продукт под требования конкретного покупателя;
— Узнайте, что нужно тому, кто принимает решение о покупке. Продаёте начальникам отделов? Насколько им важен отполированный интерфейс для обычных специалистов?
— Если продукт покупают руководители, вкладывайтесь в отчётность, интеграции с почтой и Слаком, ежемесячные сводки;
— Если практики — в инвайты, вход через волшебные ссылки и G Suite, самообслуживание, автоматический биллинг, объединение пользователей. Устраните все барьеры при регистрации.

In English. #product

Станислав Хрусталёв написал о входе в приложение по номеру телефона.

— Объедините вход и регистрацию. При вводе номера проверяйте, есть ли такой пользователь, и ведите на нужный сценарий;
— Вынесите ввод номера на отдельный экран. Не смешивайте с другими элементами неавторизованной зоны, чтобы не размывать фокус;
— Заголовок формы должен быть достаточно большим и содержать призыв к действию;
— Добавьте пояснение, что произойдёт дальше («Отправим сообщение с кодом»), чтобы управлять ожиданиями пользователя. Можно подчеркнуть ответственное отношение к приватности («Обещаем хранить его в тайне») или скорость входа («Займёт всего минуту»);
— Не дублируйте заголовок в плейсхолдере поля. Покажите в нём формат номера телефона, чтобы смысл поля был понятен с первого взгляда. Цифры лучше показать нулями или девятками;
— Активируйте поле автоматически при открытии экрана, отображайте цифровую раскладку клавиатуры (без возможности её поменять);
— Если принимаете только российские номера, +7 можно отобазить по умолчанию;
— Если пользователь вышел, но не удалил приложение, его номер можно сохранить и предложить при повторном входе. Если удалил приложение, номер можно запомнить по Device ID;
— Поле ввода можно промаркировать как phone number, чтобы пользователь мог подставить сохранённый на устройстве номер;
— Чтобы снизить количество ошибок, форматируйте введённый номер и ограничивайте количество символов (в зависимости от кода страны);
— При удалении номера по символам, автоматически удаляйте символы форматирования;
— Переходить к подтверждению лучше по нажатию на кнопку. Разместите её в нижней части экрана, не перекрывайте клавиатурой. Иногда кнопку «Получить код» размещают в кастомизированном меню над клавиатурой;
— Код по смс удобнее звонка, так как с автоподстановкой его можно ввести одним нажатием. Пуш ещё удобнее — приложение само может его обработать;
— На экране подтверждения стоит написать, что смс отправлено (и на какой номер). Но это сообщение должно быть визуально вторичным;
— Отправитель смс — название бренда. Код — в начале сообщения, чтобы не надо было его открывать. В текст добавьте пояснение, что это за код и что его не надо никому сообщать;
— Проверять код можно автоматически при вводе нужного количества символов.

#log_in #sign_up

Кейт Моран и Тейлор Дайкс написали о сравнительных таблицах.

— Когда альтернатив множество, выбирая товар, люди ориентируются на одну основную характеристику. С этим помогают фильтры. Когда товаров 5–7, люди учитывают достоинства каждого конкретного варианта. Здесь хорошо работают сравнительные таблицы;
— Если вы предлагаете не более 5 альтернатив (модели Apple Watch, варианты подписки), подойдёт статическая таблица. В ней можно контролировать отображение информации, редактировать формулировки;
— В динамической таблице пользователь сам выбирает, какие товары сравнить;
— Если в ней может оказаться больше 5 вариантов, предусмотрите способы сократить количество, например, добавив фильтры;
— Главная проблема динамической таблицы — неполнота данных о параметрах товаров;
— Стандартная компоновка: столбцы для товаров, строки для параметров;
— Фиксируйте заголовки столбцов при прокрутке;
— Связывайте абстрактные значения параметров с чем-то понятным: аккумулятор на 3350 мАч — хватит 1,2 раза зарядить iPhone 6;
— Объясняйте термины и непонятные параметры. Можно добавить всплывающие подсказки и ссылки на статьи;
— Если параметров много, дайте пользователю возможность управлять отображением: прятать отдельные группы параметров в аккордеон, отображать только отличающиеся параметры. В статические таблицы можно добавить краткий и полный вариант отображения;
— Сравнительные таблицы неэффективны, если варианты не взаимоисключающие (вместо сравнения двух платьев лучше оба добавить в корзину), простые (мало параметров), дешёвые или заменяемые (нет смысла тратить время на изучение таблицы), уникальные и трудно сравниваемые (разные параметры).

In English. #ecommerce #table

Роб МакКоган написал о влиянии типографики на восприятие и поведение.

— Более контрастный цвет повышает разборчивость текста и делает его более убедительным;
— Более сложный для восприятия шрифт (Brush Script против Arial) усложняет чтение и стимулирует критичное отношение к написанному, что помогает заметить подвох. Если таким набрано задание, оценка времени его выполнения будет больше (в эксперименте — почти в 2 раза);
— Есть ассоциативная связь между словами и формой. Слово «Кики» — угловатая форма, «Буба» — обтекаемая. Используя подходящую или неподходящую форму, можно создать гармонию или конфликт;
— Когда шрифт соответствует смыслу, такой текст читают быстрее. Например, Truck и шрифт Impact, Flower и шрифт Snell Roundhand;
— Если типографика оптимизирована, человек меньше устаёт и лучше потом решает задачи на сообразительность;
— При рецензировании научных материалов положительные оценки чаще получали статьи с иллюстрациями, подготовленными графическими дизайнерами (а не учёными).

In English. #typography

Никита Самутин написал, как тимлиду справиться с потоком дел и повысить свою ценность в компании.

— Бронируйте в своём календаре время для планирования дня, работы над текущими задачами, обеда, ответов на вопросы. Добавляйте не конкретные задачи, а фокусы — группы задач, на которых надо фокусироваться;
— Если поступил срочный вопрос, оцените его неотложность. Лучше накопить вопросы и ответить на все в конце дня в запланированный для этого временной слот. Либо сразу запланировать встречу, если тема объёмная;
— На встречах ведите заметки, так вы лучше всё запомните и повысите свою значимость. Тимлиду важно держать обещания, помнить о правках и вопросах, чтобы команда ему доверяла, поэтому фиксируйте всё, что должно быть сделано: правки, новые задачи, встречи;
— Не стесняйтесь попросить о паузе, чтобы записать важный комментарий. Если информации много (идёт погружение в новый продукт или процесс, по которому нет документации), записывайте встречи на аудио и видео;
— Со временем аргументы по принятым решениям забываются. Чтобы не уходить потом на новый круг обсуждения, в макеты или задачу добавляйте комментарии по неочевидным решениям, скриншоты обсуждений, ссылки на ветки в Слаке;
— Записывайте все сделанные задачи и полученные результаты. В идеале, в виде изменившихся метрик. Это поможет рассказать о сделанном во время регулярной оценки сотрудников и в портфолио;
— Если компания большая, спросите других лидов, какие лайфхаки используют они.

#management

Иван Вербов написал о стилистике в дизайне интерфейсов.

— Любой дизайн состоит из не привлекающих внимания составляющих (их можно назвать инь) и ярких, притягивающих внимание и вовлекающих (ян);
— Дизайн в стиле инь свойственен дизайн-системе, шаблонам структуры страниц, принципам навигации, анатомии и поведению стандартных элементов (где располагать кнопку «Подтвердить» в формах), принципам наполнения контентом (когда ставить точки в конце предложений);
— Такой дизайн прост, предсказуем и, как следствие, интуитивно понятен. Это оркестр на фоне солирующей скрипки. Такой интерфейс решает задачу, но выглядит скучно;
— Ян свойственен специально созданным для продукта элементам (вроде иконок) и специфичным компонентам (виджеты, графики), а также его уникальным функциям;
— Он отлично работает, представляя уникальные функции продукта в маркетинговых материалах;
— Если перебрать с ян, интерфейс станет сложнее для восприятия. Обязательно обсуждайте такие решения с коллегами и тестируйте;
— Отдельные элементы ян после многочисленного повторения могут стабилизироваться и проникнуть в инь-элементы. Например, поля и селекты могут быть стилизованы иконками, паттерн «включил и настроил» распространиться на все формы проекта.

#style