Данил Ковчий рассказал о своём подходе к дизайну, создании логотипа Яндекс Еды, работах для Яндекс Такси и Таксометра, логистического продукта DMS, Emex.

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

Саша Окунев написал о проведении первичной встречи по продуктовой задаче.

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

Егор Красноперов рассказал о роли дизайн-менеджера.

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

Майкл Виллар написал о контекстных меню.

— Они открываются нажатием на правую кнопку мыши (чаще всего) или кнопку контекстного меню;
— Если есть место, левый верхний угол меню располагается под курсором или кнопкой контекстного меню. Если места снизу нет, меню можно отобразить над ними или сместить;
— При отображении меню полезно выделять объект, с которым оно связано. Будет понятно, в отношении чего будет выполнено то или иное действие;
— Добавьте возможность перейти к пункту меню, напечатав начало или часть его названия. Обычно в этом случае выделяется первый подходящий пункт;
— Добавьте навигацию по пунктам с помощью клавиш «Вверх», «Вниз», «Влево» (закрыть подменю), «Вправо» (открыть подменю), «Ввод» (выбрать пункт), Esc (закрыть меню);
— Можно закольцевать переход между пунктами, чтобы нажатие «Вниз» позволяло переходить от последнего пункта к первому;
— Если пользователь выбрал пункт, перед закрытием меню полезно показывать обратную связь о том, что пункт был выбран, а не просто меню закрылось. В macOS выбранный пункт мигает;
— Группируйте похожие или связанные друг с другом пункты;
— Отключайте недоступные пункты. Так меню будут выглядеть одинаково, и пользователи будут знать, что действие возможно в другом контексте;
— Отображайте сочетания клавиш для пунктов;
— Добавляйте «…» к названию пункта, если после его выбора пользователю придётся вводить данные;
— Анимация появления и скрытия контекстного меню и его подменю может снизить скорость работы с ним;
— Используйте «безопасный треугольник», чтобы подменю не скрывалось, пока пользователь ведёт к нему курсор от связанного пункта меню.

Илья Бирман посоветовал, как интернет-магазин может рассказать о скором расширении ассортимента.

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

В Markswebb написали, как научить держателей кредиток правильно ими пользоваться и мотивировать к покупкам.

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

Оксана Киселёва написала о чекбоксах и радиокнопках.

— Радиокнопки используют для списков из двух и более взаимоисключающих вариантов, когда можно выбрать только один;
— Чекбоксы — когда можно выбрать несколько вариантов или не выбрать ни одного;
— Списки вариантов располагайте вертикально, так их легче просматривать;
— Текстовую подпись размещайте рядом с селектором (квадратным у чекбокса, круглым у радиокнопки), так понятнее, к чему она относится;
— Избегайте отрицания в подписи (если вы, конечно, не адепт тёмных паттернов): «Не присылать оповещения» → «Присылать оповещения». Иногда группа из 2 радиокнопок может быть понятнее одного чекбокса;
— В группе радиокнопок один из вариантов должен быть выбран по умолчанию;
— Нажатие и на селектор и на подпись должно приводить к выбору варианта;
— Нажатие на чекбокс или радиокнопку должно приводить к выбору варианта, а не выполнению действия (для действий используют кнопки);
— Сделанный с помощью чекбоксов и радиокнопок выбор сохраняйте не автоматически, а после подтверждения пользователем (нажатие на кнопку «Сохранить» или «Применить»).

#checkbox #radio_button

Лена Нексман написала об ошибках в анимации сайтов и приложений.

— Добавление анимации туда, где она не нужна. Например, где важен максимально быстрый отклик системы или железо слишком слабое, из-за чего всё тормозит;
— Слишком медленная анимация. Если анимация длится дольше 250 миллисекунд, подумайте, действительно ли она нужна, можно ли её ускорить и как часто пользователи будут её видеть;
— Анимация часто повторяется. Нет смысла анимировать добавление товара в корзину в приложении гипермаркета, где пользователь добавляет много товаров за сеанс;
— Превращение сайта или приложения в мультфильм, когда анимированы вообще все взаимодействия;
— Отображение бесконечного спиннера вместо прогресс-бара, когда время выполнения запроса известно;
— Полное отсутствие анимации. Она добавляет обратной связи и может принести пользователю дополнительное удовольствие от взаимодействия с продуктом.

Кейт Моран написала об основных диаграммах для визуализации результатов пользовательских исследований.

— Перед созданием диаграммы определите цель: что должен понять смотрящий на неё человек;
— Цифры бессмысленны без контекста. Процент завершённых покупок составляет 24% — это хорошо или плохо? Сколько было в прошлом году? Сколько у других продуктов?
— Контекст лучше всего показывают столбчатые (гистограммы), линейные и точечные диаграммы. В других типах диаграмм надо визуально оценивать углы, площади и объёмы, что сложно. Различия между представленными значениями легче всего понять из гистограмм;
— На парной гистограмме можно сравнить два ряда данных. Например, процент завершённых покупок для нескольких продуктов в прошлом и этом году. Столбцы сравниваемых параметров должны стоять рядом. Иногда вместо парной диаграммы может подойти обычная гистограмма, показывающая значение дельты (процент этого года минус процент прошлого);
— Горизонтальная гистограмма — хороший вариант, если подписи к столбцам оказались слишком длинными;
— Гистограмма с накоплением — популярный вариант, но не все её секции удобно сравнивать с соседними диаграммами (у части секций не будет одинаковой начальной точки); на ней не показать доверительные интервалы, важные для надёжного сравнения. В целом она сложна для понимания и входит в число диаграмм с высоким уровнем ошибок, лучше её не использовать;
— Линейная диаграмма лучше гистограммы подходит, чтобы показать тенденцию изменения данных со временем. Точки на ней должны показывать моменты получения данных;
— Диаграмма рассеяния (как линейная, но точки не связаны линиями) хорошо показывает взаимосвязь между двумя переменными.

Игорь Штанг опубликовал раздел о многостраничных изданиях из брендбука NASA 1976 года, который тянет на маленький учебник вёрстки, и поделился наблюдениями.

— Страницы объединены горизонтальными связями. Почти в каждой сетке есть колонки, но далеко не в каждой есть этажи. Из-за этого вертикальные связи обычно возникают сами собой, а о горизонтальных приходится думать специально. Многостраничник без крепких горизонталей часто выглядит как разрозненный набор страниц, а не единая композиция;
— Большой воздух зашит в макет заранее. Часто дизайнеры вспоминают о воздухе в последний момент, когда весь макет уже полностью забит материалом. Лучше решить эту проблему заранее и заложить свободное пространство ещё на этапе эскизов;
— Иллюстрации на развороте контрастны по размеру. Разница в размере картинок моментально организует композицию: из однородной каши получается визуальная иерархия. Если размеры всё-таки вышли одинаковыми, стоит развести картинки по тону: контурный чертёж на белом фоне против тёмного прямоугольника.

Джон Эгеланд написал о реализации в Дискорде подсветки элементов, получивших фокус.

— Шорткаты позволяли переключать каналы, перемещаться по полям форм, открывать поиск и быстрый переключатель. Нужна была возможность полноценной работы с продуктом с помощью одной лишь клавиатуры;
— Сложнее всего было реализовать подсветку элемента, получившего фокус;
— Решение с псевдоклассом :focus и свойством outline в большом проекте ломается: обводка обрезается в контейнере со стилем overflow-hidden, не совпадает с радиусом скругления отдельных элементов, искажается маржинами и падингами;
— В итоге нашли масштабируемое решение, работающее «из коробки». JavaScript, React, подробнее в статье;
— Оно позволяет отследить фокус на отдельном элементе, а подсветить весь включающий его контейнер. Полезно, например, когда в чекбоксе можно нажать и на селектор и на текст, но фокус получает только селектор;
— Покрывает ситуации, когда элементы частично закрыты или прокручены за пределы экрана;
— Позволяет задать любой радиус скругления для обводки (в частности, это нужно, чтобы он совпадал с радиусом скругления элемента или компонента);
— Относительные сложности с подсветкой двигающегося или трансформирующегося элемента (обводка иногда запаздывает), что важно, так как анимаций в интерфейсах становится больше. А также — с изменением цвета обводки в зависимости от цвета фона (решение есть, но некрасивое и неэффективное).

Михаил Греков составил топ популярных недостатков в интерфейсах b2b-продуктов.

— Отсутствие разрядов в числах. 100000 → 100 000;
— Склонения с числами. «Найдено 21 результатов»;
— Сортировка списков. Разработчики любят сортировать рандомно или по ID;
— Не сообщают об ограничениях для текстовых полей. Пользователь вводит много текста и удивляется, что сохранилось не всё;
— Не сохраняют состояния. Пользователь что-то фильтрует, сортирует, изменяет размеры столбцов, но любая перезагрузка возвращает всё в состояние по умолчанию;
— Открывают модальные окна для редактирования любой мелочи;
— Все настройки в формате Да/Нет;
— Не делают никаких маркеров отправки запроса;
— Позволяют редактировать всё подряд, даже если есть взаимоисключающая логика, а все проблемы вываливают на пользователя при попытке сохранения.

Андрей Шапиро написал об отображении ошибок в асинхронном вебе.

— Проблемные ситуации возникают, когда не удалось выполнить запрос а) отвечающий за часть интерфейса, б) ставящий под угрозу работу всего приложения;
— Если пользователь не может повлиять на ситуацию, ему достаточно знать, что действие не сработало. Средства мониторинга должны автоматически отправлять техническим специалистам детали;
— Даже если информация об ошибке пришла моментально, стоит показывать состояние обработки запроса и после паузы в 300–600 миллисекунд возвращать интерфейс в предыдущее состояние;
— Сообщать о неудаче лучше в пределах элемента, группы или формы и не использовать для этого всплывающее сообщение вроде снекбара;
— Круто переиспользовать для этого существующие элементы, например, покачать полем для ввода пароля (если пароль неверный) или анимировать кнопку вместо отображения отдельной крутилки;
— При повторе действия надо скрывать сообщение о предыдущей неудаче.

Вида Чжан написала об использовании пространственной логики при проектировании интерфейса.

— В реальном мире людям необходимо знать, где они находятся, как сюда попали и как отсюда выбраться. Для навигации по цифровым продуктам это тоже полезно знать;
— Для создания пространственной логики можно использовать метафоры из реального мира. Например, открытие папки в iOS — это приближение физической коробки, позволяющее рассмотреть, что внутри;
— Не стоит игнорировать сложившиеся чисто цифровые паттерны вроде появления нового экрана справа после нажатия на ячейку таблицы;
— Продумайте пространственную логику для всех экранов продукта. Если новый экран появляется справа, значит, экран с таблицей оказывается слева. Экран уведомлений iOS находится поверх всех остальных экранов — это подчёркивают размытым отображением находящегося ниже контента;
— Бесшовная анимация очень помогает. В iOS анимация открытия и закрытия приложения связывает приложение с его иконкой.

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

Энтони Ценг написал о структуре экрана настроек.

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

In English.

Джейк Рич поделился советами о проектировании больших и сложных продуктов с нуля.

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

In English.

Николай Морев написал о повышении доступности iOS-приложений (на примере Яндекс Go).

— Недостаточно разово разметить интерфейс для скринридера. Без системного подхода в развивающемся продукте такие доработки неизбежно деградируют;
— Учёт требований доступности увеличивает трудозатраты примерно на 10%;
— Что можно сделать быстро: а) подписать элементы, состоящие из картинки; б) объединить связанные элементы; в) добавить признак «Кнопка» элементам, на которые можно нажать;
— В приложении могут быть тупики, из которых нельзя выйти с помощью VoiceOver. Оказавшийся в тупике пользователь обычно закрывает приложение и запоминает этот сценарий, чтобы больше не попасться;
— Тупик может появиться из-за не поддерживаемых VoiceOver способов взаимодействия. Например, когда экран выбора адресов закрывается только свайпом. Какие-то экраны из-за этого, наоборот, невозможно открыть;
— Для борьбы с тупиками на все экраны можно добавить: а) кнопки закрытия; б) стандартный звук открытия нового экрана; в) стандартный для VoiceOver жест закрытия экрана «зигзаг двумя пальцами»;
— Для экранов, открываемых только свайпом, можно добавить дополнительные способы открытия. Например, экран с карточками в Яндекс Go полностью раскрывается свайпом вверх. Для VoiceOver он раскрывается автоматически, когда фокус достигает последней видимой карточки и пользователь пытается пройти дальше;
— Если элемент, обновляющийся каждые несколько секунд (через сколько минут приедет такси), находится в фокусе, каждое обновление скринридер будет зачитывать. Чтобы он не частил, можно добавить признак updatesFrequently;
— Если обновившийся элемент не в фокусе, важное изменение можно объявить с помощью announcement;
— Когда происходит выбор варианта из горизонтального списка (например, из списка тарифов), хорошо подходит элемент adjustable, позволяющий легко переключаться между вариантами вертикальным свайпом;
— Чтобы скринридер не принимал число вроде 1812 за год, можно добавить в него разделители разрядов. Скринридер не озвучивает разделители, соответствующие пользовательской локали (в русской это запятая).

Станислав Хрусталёв написал о лучших практиках в работе поисковой строки в интернет-магазинах. Вот некоторые из них:

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

Энтони Ценг написал, как снизить когнитивную нагрузку при работе с похожими кнопками.

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

In English. #cognitive_load #button

В «Собаке Павловой» написали о специфике проектирования медицинских интерфейсов.

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

Ксения Стернина рассказала, что международные компании ценят в UX-специалистах.

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

#career