UX Notes

Булат Хазимуратов покритиковал эмоциональный дизайн.

— Его считают высшей ступенью в пирамиде дизайна, но до сих пор нет методики его создания. Дизайнеры просто добавляют анимации, эффекты, выразительную графику, маскотов, игры и приколы;
— Любой дизайн вызывает эмоции. Не все они яркие и позитивные. Бывают негативные, нейтральные, сложные;
— Не только дизайн продукта их вызывает, но и, например, поведение сотрудника компании;
— Чтобы порадовать пользователя, дополнительные выразительные приёмы не обязательны;
— Дон Норман ввёл термин в книге «Эмоциональный дизайн». Он писал, что дизайн — это и функциональность, и удобство объекта, и эмоции, которые он вызывает у человека;
— Он не предлагал проектировать эмоции, веселить пользователей специальными выразительными приёмами, делать интерфейс дружелюбнее;
— Он предлагал понимать и учитывать эмоции при проектировании, не ограничиваться рациональностью и эргономикой (обычное дело для 90-х, когда вышла его книга);
— Человек воспринимает взаимодействие на интуитивном уровне (нравится ли то, что видит), поведенческом (насколько удобен и приятен процесс), рефлексивном (правильный ли это выбор, насколько мне подходит) → столпы дизайна: эстетика, эргономика, психология;
— Эмоции — субъективное переживание отношения человека к окружающему миру и себе. Они основываются на опыте и помогают понимать, как действовать;
— Выделяют эмоциональные процессы (по мере увеличения их длительности): аффект, эмоция, чувство, настроение. Дизайнерские приёмы обычно вызывают аффекты, но не что-то более длительное;
— Базовые эмоции по Плутчику: восторг, восхищение, ужас, изумление, гнев, отвращение, горе, настороженность. Есть градации (гнев → злость → досада) и промежуточные эмоции (гнев и отвращение → презрение);
— Аарон Уолтер предложил пирамиду потребностей пользователя: функционально → надёжно → удобно → эмоционально. Но у нас нет потребности в эмоциях, мы испытываем их на каждой ступени пирамиды;
— Эмоции можно разделить по потребностям. Например, есть акизитивные эмоции, связанные с потребностью в накоплении и собирательстве. Чем пытаться вызывать эмоции, лучше делать продукты, удовлетворяющие порой неочевидные потребности, не перечисленные в пирамиде Маслоу;
— Планировать нам помогает информационно-речевая картина мира, формирующаяся с опытом. Цифровые продукты упрощают эту картину: с кредитным калькулятором можно не вникать в условия и формулы. Резкие редизайны разрушают часть картины, вызывают стресс. Небольшой объём новой информации вызывает интерес;
— Чтобы лучше разбираться в эмоциях, изучайте работу влияющих на их формирование нейромедиаторов;
— Идея делать продукты понятнее, отзывчивее, человечнее не нова. Потребности в стабильности, эстетике, новой информации, смысле свойственны людям;
— Есть компании, продукты которых часто приводят в качестве примера эмоционального дизайна. Это восприятие строится не на дизайне продуктов, а на культуре и бренде компаний. Дизайн им соответствует. Причём культура и бренд проникают не только в интерфейс, но и в остальные процессы на уровне корпоративной культуры;
— У Додо получается эмоциональный дизайн, так как в основе лежит бренд с прописанной бренд-платформой. Можно описать бренд как человека с ценностями, характером и убеждениями, прописать контекст пользователей, характеристики целевой аудитории и чем компания отличается от конкурентов;
— Эмоции — не цель, а следствие хорошего проектирования. Они возникают из согласованности бренда и поведения компании. Интерфейс не может этого создать — только поддержать. Ориентируйтесь не на эффекты, а на чувства.

Новые материалы в @uxwork (кроме вакансий):

— Как опытный руководитель проектов в крупной компании видит текущую ситуацию с наймом на IT-рынке;
— Актуальные требования к продуктовым дизайнерам в бигтехе и компаниях поменьше (на основе анализа 100 вакансий);
— Как распределять задачи на день, чтобы снизить когнитивную нагрузку.

В Фигме появились слоты.

— Это области в компонентах, позволяющие вставить любое содержимое в инстансы этих компонентов;
— Они упрощают компоненты со списками элементов внутри вроде аккордеонов, меню и дропдаунов. В них можно размещать любое количество элементов (не надо заранее закладывать какой-то максимум) и легко менять их порядок;
— Проще работать с компонентами с высокой вариативностью содержимого. В компоненте карточки можно задать стиль подложки и заголовка, расположение контролов, а её содержимое — добавлять через слот;
— Алексей Бычков записал видео о слотах;
— В блоге Фигмы [English] также предлагают использовать их для работы с лейаутом страниц: фиксировать в компоненте меню, хедер и футер, а содержимым конкретной страницы управлять через слот;
— Забавно, что они противопоставляют слоты детачу или созданию сложных многовариантных компонентов. Раньше такую же задачу решали добавлением dummy-компонентов и их свапом в инстансах на локальные компоненты с нужным контентом. Но со слотами, конечно, удобнее;
— Консультант по дизайн-системам Нейтан Кёртис написал, как внедрять слоты в библиотеку компонентов [English];
— Как понять, где слоты будут полезны, какие компоненты снабжать слотами первыми (где чаще всего детач), какие настройки применять (без контента, с контентом, списком предпочитаемых компонентов и без него);
— Правила лейаута слотов: не задавать цвет, обводку, скругление углов, паддинги. Паддинги лучше задавать в контейнерах, в которых будут располагаться слоты. Слот должен отвечать за лейаут, направление, отступы между элементами и изменение размеров.

#figma #design_system

Алиса Колядова поделилась мыслями о проектировании таблиц.

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

#table

Настройка количества товаров с мусоркой

Иногда встречается такой дизайн элемента для настройки количества товаров в корзине, где вместо минуса рисуют мусорку — мол, товар уже удалится, а не просто уменьшится количество.

Сначала это кажется логичным, ведь уменьшение количества и удаление — разные вещи, и выглядеть должны по-разному. Возможно, кто-то из дизайнеров в этом видит возможность дополнительно предупредить об удалении. Наверное, кому-то просто кажется остроумной такая динамичность.

Но вообще-то хорошо бы, чтобы при уменьшении количества до нуля, товар не удалялся сразу: у пользователя должно быть право на ошибку и возможность вернуть товар обратно. Если же удаление товара неотменяемое, то превращение минуса в мусорку не поможет предотвратить ошибку; тогда надо дисейблить минус, а кнопку удаления ставить отдельно. Что касается остроумности, то это только в голове дизайнера мусорка — частный случай минуса для одного значения, но для пользователя изначально никакого минуса нет, а есть лишь эта мусорка, ведь обычно количество будет «1 шт.».

Короче, не рекомендую так делать. Элемент хуже узнаётся, ощущается нестабильным и не решает никакой задачи.

Станислав Хрусталёв написал об интересных решениях ВкусВилла в списке товаров и корзине.

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

#cart #list #ecommerce

Таня Двенадцатова написала о прожарке.

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

#design_check

Светлана Диденко написала об эвристиках Бена Шнейдермана для проектирования интерактивных систем.

— Последовательность: элементы с одинаковым смыслом выглядят одинаково. Такую систему проще поддерживать, она становится предсказуемой, поэтому пользователи быстрее справляются с задачами и реже обращаются в поддержку;
— Информирование о том, что произошло, происходит и произойдёт. Пользователи меньше переживают и могут скорректировать свои действия;
— Снижение вероятности совершения ошибки: подсказки о форматах, ограничение опасных действий;
— Возможность отмены действия снижает страх ошибки и ускоряет обучение;
— Снижение нагрузки на память позволяет сосредоточиться на задаче и прилагать меньше когнитивных усилий: подсказки, автозаполнение, сохранение фильтров, отображение текущих параметров;
— Поддержка разных уровней опыта: структура, подсказки и последовательные шаги для новичков, горячие клавиши, шаблоны, массовые действия для опытных;
— Мгновенная обратная связь: каждое действие пользователя сопровождается откликом системы. Это ускоряет работу и уменьшает количество повторных действий;
— Ориентация на пользовательские задачи, а не на структуру данных или внутренние процессы. Пользовательский сценарий определяет логику экранов, набор действий и состав элементов.

#heuristic

Татьяна Бублик написала об основах продуктовой колористики.

— Модель OKLCH удобнее RGB, так как сложно задавать цвет, меняя количество красного, зелёного и синего;
— Также она поддерживает расширенный набор цветов P3, что актуально для современных устройств, которые поддерживают на 30% больше цветов, чем есть в RGB;
— Стоит придерживаться схемы процентного соотношения цветов в продукте 3-17-80 (или её вариаций), где 3% — бренд-цвет для всех самых главных акцентов, 17% — остальные хроматические цвета, 80% — белый, чёрный и оттенки серого (ахроматические);
— Так акценты не будут теряться в макетах;
— В серый и чёрный можно подмешивать хрому бренд-цвета, чтобы усилить восприятие бренда, сделать их комфортнее и интереснее;
— Лайфхак: делать длинную тоновую растяжку (25–30 цветов). Это даст при любом изменении или масштабировании подобрать нужный тон.

Копия на Dsgners. #color

Андрей Шапиро написал книгу о рабочих историях и карте реализации историй.

— Общее представление о них можно получить из опубликованной ранее статьи;
— В книге рассмотрены недостатки User stories, Job stories и некоторых других шаблонов (шаблон вопроса, похоже, используется в Модели информационных ожиданий «Собаки Павловой»);
— Например, они могут наводить на одно конкретное решение, которое часто оказывается неверным, так как задача ещё слабо изучена, либо проблема лишь подразумевается и формулируется в виде решения-кандидата;
— Оперировать альтернативами в разработке крайне важно, так как время и деньги ограничены, и непонятно, какое решение уложится в срок и бюджет;
— Они не описывают предметную область, что нередко приводит к последующему перепроектированию;
— Рабочая история как текстовая модель построена таким образом, чтобы этих недостатков избежать;
— Её состав: цель действия (зачем?), носитель (кто или что выполняет действие), ситуация (контекст, когда происходит действие), способ действия (каким образом что-то делается), объекты оперирования (с чем взаимодействует носитель, что получается в итоге);
— Кроме шаблона истории, инструкции по его заполнению, примеров из многолетней практики и разбора потенциальных ошибок при составлении историй в книге есть даже примеры бесед с заказчиком, в ходе которых история появляется и обрастает деталями;
— Карта реализации историй, подобно User story map, собирает все истории вместе и помогает увидеть всю картину, а также позволяет дополнить истории информацией о возможных формах их реализации (варианты технических решений) и составе блоков соответствующего интерфейса;
— Можно сначала записать «кнопку», которую хочет добавить стейкхолдер, и потом разобраться с её первопричиной и контекстом. Главное, чтобы все слои в конце концов оказались согласованы.

#user_story #book

Ольга Свистунова написала, как работают UX-редакторы в Госуслугах и каких правил придерживаются.

— Метрики: доля незаконченных заявлений, доля отказов ведомств предоставить услуги, среднее время заполнения заявлений, число обращений в поддержку, процент дизлайков к ответам на частые вопросы, CSI после получения услуг;
— Полезные вопросы: не разъясняет ли текст очевидные вещи, нет ли в нём избыточности и повторов, не потерялся ли смысл после редактуры, не пропал ли нужный для понимания контекст;
— Важно понимать, кто его будет читать. Например, несовершеннолетним пользователям стоит напомнить о получении согласия законного представителя;
— Любой текст подчиняется редполитике. В ней есть словарь терминов, чтобы не путать пользователей синонимами одного и того же понятия;
— Достижению единообразия также способствует коллекция шаблонов. Шаблоны и редполитику верифицирует правительственная комиссия, что помогает убеждать заказчиков: писать надо так, а не иначе;
— Краткость: длинные слова меняют на короткие, отглагольные существительные на глаголы, очищают текст от метафор, эвфемизмов, речевых штампов и вводных слов («наверное», «безусловно»);
— Пишут не в чём ошибка, а как должно быть: «Заполните поле», «Допустимы русские буквы и цифры»;
— Если действия необратимы, пишут, что произойдёт при нажатии на кнопку;
— Сложные юридические, технические и внутренние термины заменяют на понятные пользователю. Потенциально незнакомые аббревиатуры расшифровывают при первом упоминании;
— Ссылки ставят на слова, которые объясняют, куда ссылка приведёт. Например: «Подтверждённую биометрию регистрируют в центрах обслуживания»;
— Находящийся перед глазами текст должен быть понятен без контекста и ранее пройденного пути;
— Текст в кнопках однообразен, чтобы не путать: «Верно» (подтверждение данных), «Закрыть» (закрытие справочных попапов), «Продолжить» (переход к следующему экрану), «На главную»;
— Заголовок должен быть максимально информативен, так как часто пользователь внимательно читает только его. Заголовок должен быть связан по смыслу с кнопкой;
— В первую очередь пишут для большинства. Нет смысла погружать всех в нюансы, которые важны для небольшой категории людей или в нестандартных ситуациях;
— Поэтому можно не искать гендерно независимые формулировки, если услуга рассчитана в основном на женщин или мужчин;
— Фигма-плагин Text Prettier автоматически проставляет неразрывные пробелы, меняет «е» на «ё», "кавычки" на «ёлочки», дефис на тире и наоборот.

#writing

Илья Бирман написал о кнопке «На главную» в пустом состоянии списка.

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

#error #empty_state

Андрей Богданов написал книгу «Дизайн-стройка. Как создать команду мечты за 90 дней», и вот что там было о ревью макетов лидом и другими дизайнерами:

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

#design_check #management #book

Как показывать визуал в портфолио?

Бывает, смотришь портфолио с продуктовыми кейсами, там внутри гипотезы, тесты, анализ — гора полезной инфы, но вот визуально изменения не радикальные.

Будем честны, редко какая задача в продукте (особенно внутреннем, сервисном или b2b) обладает зрелищным дизайном. Чаще наоборот — постороннему наблюдателю нужно еще наловчиться, чтобы понять, а что здесь визуально изменилось.

А кроме того, непонятно, где заслуги и косяки дизайнера, а где дизайн-система. Может, из неё тянется легаси пятилетней давности — стрёмные тени, лишние дивайдеры, грязноватые цвета, которые дизайнер не убирает, потому что весь продукт надо перевозить на другую версию.

Ну, бывает, все там были.

Для дизайнера загвоздка в том, что собеседующий лид точно будет оценивать визуал. Даже если он нулевой или практически отсутствующий. Даже если речь о продукте, где не требуется классный UI, а надо просто уметь чисто сверстать таблицу или модуль.

Лиду надо понять, что умеет кандидат с ограничениями и без них, к чему у него лежит душа и подойдет ли навык работы с UI в конкретном продукте.

🤩

На такой случай есть универсальный совет: соберите скрины с наиболее удачным и показательным UI на отдельной странице и назовите её «Визуал».

Пусть там не будет юзкейсов и полезного действия — просто скрины. Удачные варианты вёрстки модулей, примеры иконок, которые вы рисовали, концепты, не дошедшие до прода, но демонстрирующие ваши навыки без привязки к легаси-решениям, да и просто красивые маленькие детали.

У каждого продуктового дизайнера найдется хотя бы три-четыре приятных скрина, которыми он гордится (а если пока не находится ни одного, это повод что-то изменить в своей работе). Иногда для единообразия достаточно посадить скрины на однотонные светлые плашки, а иногда можно и без этого — будет уже красиво.

Это ход win-win: и дизайнеру хорошо, и нанимающему лиду понятно, и занимает минимум времени.

Саша поделился материалом о списке товаров в интернет-магазине из внутренней базы знаний студии KISLOROD.

— В списке товаров пользователь получает первую информацию о них. Фильтр, сортировка, теги с популярными запросами клиентов, доп. информация при наведении курсора помогают быстрее находить нужное, не перемещаясь на страницу товара;
— Карточка товара — компромисс между желанием показать больше параметров товара (разным людям важно разное при выборе) и уместить больше товаров на странице;
— В ней всегда должны быть универсальные характеристики товара: изображение (несколько переключающихся изображений), название (и тип), цена (и перечёркнутая старая, размер скидки), вариации товара (цвета, размеры, материалы);
— Изображения подбирайте с учётом специфики. Иногда надо показать товар в интерьере, разъёмы крупным планом, содержимое матраса в разрезе;
— В смешанных списках надо отображать тип товара. Название «Тинейджер» не говорит о том, что продаётся комплект детского постельного белья;
— Если товар продаётся упаковкой, для удобства сравнения показывайте также цену за штуку, за килограмм;
— Индивидуальные характеристики: рейтинг, совместимость с другими товарами («подходит для ноутбуков 15,6 дюйма»), размеры, рекомендации (на какой возраст ребёнка рассчитано), особые характеристики (для специфичных товаров), артикул;
— Рейтинг без количества оценок пользователи считают бесполезным. Он полезен в нишах, где сложно совладать с многообразием выбора (электроника, бытовая техника);
— Артикул полезен в нишах, где ищут конкретные модели;
— Где возможно, чтобы не перегружать карточки, заменяйте текст на понятные иконки, не пишите названия характеристик. В карточке бутылки вина понятно, что «0,7 л» — объём бутылки;
— Функция быстрого просмотра — зачастую лишь костыль для магазинов с плохой реализацией списка товаров. Надо кликнуть, дождаться загрузки модального окна. Иногда его принимают за страницу товара (и не находят там нужных параметров);
— Выделяйте в списке просмотренные товары (удобнее продолжить поиск при возвращении к списку товаров) и добавленные в корзину (чтобы найти совместимые товары, не покидая список).

#list

Анна Труфанова поделилась рекомендациями по дизайну интерфейсов для цеха.

— Тёмная тема — стандарт безопасности, так как не слепит оператора;
— Начертания Light и Regular на цеховых мониторах рассыпаются. Только Medium и Bold;
— Для цифр используйте моноширинный шрифт;
— Интерфейс в цеху — набор датчиков. Оператор должен считывать их за доли секунды, видеть критические показатели периферическим зрением. Для этого контраст делайте не 4,5:1, а 10:1 (ГОСТ Р ИСО 9241-303);
— Чтобы не перегружать пользователя и не приучать его игнорировать сигналы, интерфейс не должен начинать мигать красным при малейшем отклонении параметров. Не все отклонения одинаково критичны (ANSI/ISA-18.2);
— Дублируйте цветовое кодирование формой (ISO 9241), так как у 8% мужчин встречается дальтонизм. Красный треугольник — критическая авария, немедленная остановка. Жёлтый ромб — предупреждение, требуется внимание;
— Важна мышечная память. Не меняйте положения кнопок, особенно если их нажимают в аварийных ситуациях;
— Улучшайте эффективность через сокращение шагов: сохраните кнопку в привычном месте, но превратите 3 клика в 1;
— Всё для оперативного управления размещайте на расстоянии клика;
— Если датчик показывает проблему, интерфейс должен сам подтянуть кнопку действия в зону видимости;
— Располагайте ключевые индикаторы так, чтобы они попадали в естественную траекторию взгляда, а не в слепые зоны экрана.

#industrial

Александр Овчаренко написал о проектировании физических панелей управления.

— Смотреть на чужие решения на картинках недостаточно, надо взаимодействовать с ними. Трогайте устройства предыдущих поколений, синтезаторы и MIDI-контроллеры в музыкальных магазинах, панели в автомобилях и яхтах. Требуйте от начальства оплаты посещения выставок;
— У каждого элемента есть невидимая часть, находящаяся под поверхностью панели, со своими габаритами и идущими к ней проводами. Это влияет на их расположение;
— Место под поверхностью панели занимает печатная плата, сама панель может крепиться разными способами. Из-за этого могут появиться места, где нельзя размещать контроллеры;
— Габариты часто зависят от внешних факторов. Например, от размера предыдущей версии панели, чтобы можно было одну заменить на другую;
— Компоновка согласно эргономическим и пользовательским требованиям → Совместно с инженерами приближенная к реальности версия;
— Делайте физические прототипы из картона и бумаги или с помощью 3D-принтера, чтобы получить объёмность макета в реальном размере;
— Для оценки выбора положения и размера поворотных ручек подходят любые крышки (от газировки, зубной пасты). Они сделаны так, чтобы было удобно крутить, что лучше любых абстрактных цилиндров;
— Подойдут ручки и колпачки с другого оборудования. Главное, не приклеивать намертво;
— Если панель предполагает наличие типовой клавиатуры или трекбола, в картонной основе можно сделать вырез для них и вставить заподлицо;
— Цена ошибки высока: панель даже из типовых компонентов часто дороже сенсорного экрана с HMI;
— Внимательнее относитесь к крайним случаям использования панели, так как элементы управления статичны;
— Настаивайте на участии в предпроизводственных этапах. Инженеры могут что-то не так понять или отойти от вводных из-за объективных причин (запланированные энкодеры оказались недоступны).

#industrial

Новые материалы в @uxwork (кроме вакансий):

— Что делать, чтобы работники-зумеры не уходили из вашей команды;
— Поиск работы, когда ты давно в дизайне и есть управленческие позиции в резюме;
— Основные уроки из книги Криса Восса о переговорах «Договориться не проблема»;
— Поиск работы, взгляд со стороны нанимающего менеджера.

Светлана Диденко написала о требованиях российских законов к интерфейсам российских веб-сервисов.

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

#laws

Игорь написал об адаптации интерфейса android-приложения под увеличенный системный шрифт.

— Кроме размера системного шрифта на размер текста также влияет масштабирование экрана;
— Можно увеличить Display size и тогда, например, квадрат со стороной 48 dp будет отрисовываться не 132 физическими пикселями, а 144 (и станет больше);
— Комбинирование настроек может сделать важную информацию недоступной или ухудшить впечатление от интерфейса. В продукте Игоря 45% пользователей увеличивают текст;
— Текст можно обрезать: в начале, середине или конце. Скрытая часть заменяется многоточием;
— Можно сократить: заменить 99 000 000 на 99 млн. Но это не вариант там, где важна точность;
— Бегущая строка считается антипаттерном и применяется редко, если остальные способы не подходят;
— Перенос строк — через атрибут android:breakStrategy можно указать способ разбивки текста. Важно убедиться, что контейнер с текстом подстраивается под высоту контента;
— Авторазмер текста — текст меняет размер в зависимости от доступного пространства. Можно задать минимальное и максимальное значение, а также шаг изменения;
— Также можно добавить прокрутку внутри контейнера или вовсе использовать динамическую вёрстку, когда расположение элементов зависит от отображаемой информации;
— Приложение может вовсе запрещать увеличивать текст (это, конечно, ухудшает пользовательский опыт), либо делать это в собственных настройках (Телеграм);
— Это менее удобно пользователям и идёт вразрез с рекомендациями Material Design, но даёт разработчикам больше контроля и обеспечивает единообразие на разных устройствах.

#font #accessibility