UI/UX дизайн в Стамбуле и Figma-to-code

Мера хорошего интерфейса — нагрузка решений

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

Самый ясный пример — конфигураторы товара. В кейсе Castor Coffee инструмент персонализации сознательно оставлен узким: один товар, полная ширина, небольшое число осмысленных выборов. Цель — не безграничная свобода, а хороший результат за несколько кликов. С ростом числа опций конверсия таких инструментов падает.

Интерфейсы, работающие под давлением

Самый трудный экзамен дизайн сдаёт не за спокойным столом, а под давлением: экран кассы в час пик, панель, на которую повар смотрит с полутора метров с занятыми руками, список, которым курьер пользуется одной рукой. Это не эстетическая, а рефлекторная задача.

• Число касаний — мера. Самое частое действие — за минимум шагов; самая частая ошибка — откат одним касанием.
• Цвет — единственный сигнал, понятный без чтения. Опоздание помечается цветом, а не текстом.
• Подтверждения сокращаются. Подтверждать нужно только необратимое.
• Экран не должен мерцать. Полная перерисовка списка при каждом обновлении заставляет персонал перестать читать экран — именно из-за этой мелочи панели бросают.

Кейс Sisa Atelier POS и заметка об архитектуре POS разбирают эти решения подробно.

Figma-to-code: система, а не картинки

Когда файл дизайна передают как набор картинок, разработка превращается в догадки: этот отступ 16 или 20, какой это серый, что происходит при нажатии? Продукт постепенно расходится с дизайном.

• Токены дизайна: цвет, типографическая шкала и отступы как именованные переменные, переносимые в код один в один.
• Компоненты и состояния: обычное, наведение, нажатие, отключено, загрузка и ошибка для каждого компонента. Пропущенное состояние — это состояние, которое придумает разработчик.
• Пустые экраны и ошибки: «пока ничего нет» и «что-то пошло не так» проектируются. Иначе пользователь встречает непродуманный экран в самый уязвимый момент.
• Точки перелома: поведение на мобильном, планшете и десктопе описывается; «сделайте адаптивно» — не спецификация.

Доступность не добавляется потом

• Контраст — светло-серое по светло-серому нечитаемо на телефоне под солнцем, для всех.
• Размер зоны нажатия — элементы для пальца должны быть достаточно крупными.
• Навигация с клавиатуры — порядок табуляции и видимость фокуса должны работать в формах и окнах.
• Используйте компоненты платформы — элемент dialog вместо самописного модального окна бесплатно даёт поддержку клавиатуры и экранных читалок. В кейсе Nest Worldwide окна проектов построены именно так.