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

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

При написании данной статьи я использую классификацию ключевых ценностей проектирования взаимодействия из академического курса Human-Computer Interaction (CS408), преподающегося в таких университетах как Стэнфорд и MIT. Этот курс обучает основам UX-дизайна и помогает понять, как психологические особенности человека влияют на восприятие интерфейсов. Более подробно ценности хорошего интерфейса описаны в выдержавшей уже четыре издания книге «Интерфейс. Основы проектирования взаимодействия» Алана Купера, Роберта Реймана, Дэвида Кронина и Кристофера Носсела. Советую прочитать эту книгу, если вы хотите глубже разобраться в том, как устроен процесс проектирования удобных, эффективных и ориентированных на потребности пользователя интерфейсов.

Если вам понравится моя статья, приглашаю подписаться на мой телеграм-канал: @alexgriss, где я пишу о технологиях, продуктовой разработке, лидерстве и ценностях в работе.

Итак, ценности хорошего интерфейса включают в себя:

• Этичность — это предусмотрительность и желание помочь;

• Целенаправленность — полезность и удобство использования;

• Прагматичность — жизнеспособность, осуществимость;

• Элегантность — эффективность и эмоциональный отклик.

Давайте рассмотрим каждую из четырёх ценностей:

Этичность

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

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

Чтобы интерфейс можно было назвать этичным, он должен соответствовать двум принципам:

Не вредить

Этот принцип требует глубокого понимания аудитории, знания основ эргономики и грамотного использования ресурсов. Сюда входят рекомендации:

• оказывать поддержку продуктам даже после прекращения стадии активного развития (sustainability);

• придерживаться рационального подхода: «работает — не трогай»;

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

Улучшать жизнь пользователя

Этот принцип выражается в построении процесса непрерывного совершенствования взаимодействия пользователя с системой. Такой процесс включает в себя:

• углубление взаимопонимания — пользователя с продуктом, с другими пользователями, с самим собой;

• повышение эффективности — интерфейс позволяет пользователю решать его задачи всё проще и удобнее;

• совершенствование информационного обмена — увеличение доступности и качества коммуникации;

• сокращение социально-культурных трений — обеспечение психологически безопасной и инклюзивной среды;

• улучшение равенства — финансового, социального, юридического.

На этичность интерфейса может влиять не только проектировщик, продакт-овнер и дизайнер, но и разработчик. Вот мои рекомендации, как фронтенд-разработчик может способствовать формированию этичного интерфейса:

• следить за доступностью (a11y) — использовать проверенные решения для реализации форм с поддержкой технологий доступности, не игнорировать фокус, навигацию с клавиатуры, прописывать необходимые ARIA-атрибуты;

• делать поведение предсказуемым и стабильным — следить за метриками Core Web Vitals (особенно CLS, чтобы предотвращать «скачки» интерфейса), проверять элементы на переполнение контентом, давать ясную обратную связь в интерактивных сценариях (загрузка, ошибки, успех) и т.д.

• обращать внимание на безопасность — не хранить чувствительные данные в локальном хранилище, следить за уязвимостями в коде сторонних библиотек и т.д.;

• не пропускать обнаруженные баги, даже если их автор кто-то другой — не обязательно их фиксить, но можно сказать про них тестировщику или самому завести таску;

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

• помнить, что вы создаёте не просто интерфейс — вы строите реальное средство взаимодействия между человеком и системой.

Целенаправленность и прагматичность

Хороший интерфейс, каким бы этичным он ни был, не может существовать в вакууме: он создаётся для того, чтобы учитывать реальные цели и ограничения пользователей. Но если его невозможно реализовать или он не приносит прибыли — в нём нет смысла. И наоборот: если интерфейс отвечает только целям бизнеса, но неудобен для пользователей, он тоже будет бесполезен.

Поэтому две ключевые ценности интерфейса — целенаправленность и прагматичность — всегда идут рядом:

Целенаправленность отвечает за смысл: что должен делать интерфейс и для кого.
Прагматичность — за осуществимость: насколько это выполнимо, устойчиво и выгодно.

Эти вопросы важно задавать не один раз в начале, а снова и снова — в процессе диалога между бизнесом, продуктовой командой и разработкой.

Конечно, у каждой стороны будет свой взгляд на эти вопросы:

• продукт фокусируется на пользовательских задачах, целях и ценностях;

• бизнес — на прибыли, сроках, ресурсах и рисках;

• разработка принимает оба потока и реализует решение, которое отвечает целям пользователей и учитывает реальность рынка.

Если одна сторона не будет учитывать другие точки зрения — начнутся перекосы. Думаю, многим знакомы ситуации, когда:

• бизнес торопит, не вникая в сложность реализации;

• продакт приносит сценарий, который требует слишком много ресурсов;

• разработка делает «как сказали», не предупредив о возможных рисках.

Чтобы избежать подобных конфликтов, важно одновременно учитывать и целенаправленность, и прагматичность. Эти ценности работают в паре: одна отвечает за смысл, другая — за осуществимость. Перекос в любую сторону может навредить.

Ниже я собрал ряд тезисов и примеров, которые помогают глубже разобраться в балансе между ними. Некоторые из них вдохновлены книгой «Интерфейс. Основы проектирования взаимодействия», к другим же я пришёл в процессе реальной разработки.

Целенаправленность

Цели пользователя ≠ цели бизнеса

Важно различать цели пользователя и заказчика продукта. Например, владелец интернет-магазина хочет, чтобы клиент купил как можно больше товаров и вернулся ещё. Клиенту же важно найти нужный товар и оформить заказ без лишней возни. Целенаправленный интерфейс в первую очередь помогает тому, кто им непосредственно пользуется.

Интерфейс должен говорить на языке пользователя

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

ЦИнтерфейс должен быть понятным

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

Прагматичность

Сделанное важнее задуманного

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

Вложения в архитектуру окупятся

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

Интерфейс должен быть устойчивым

Прагматичный интерфейс жизнеспособен в реальной среде: на слабом устройстве, при плохом интернете и даже в офлайне. Если он ломается при нестандартном использовании, он теряет свою ценность, даже будучи формально реализованным.

Элегантность

Мы часто используем слово «элегантный» как синоним слова «красивый». Но элегантность не просто про красоту, она в первую очередь про сдержанность и аккуратность. В элегантном интерфейсе нет ничего лишнего, что может отвлекать пользователя от решения его задачи. Он дружелюбен к пользователю, не перегружен деталями, внутренне целостен и учитывает контекст и состояние пользователя.

Давайте рассмотрим ключевые принципы, которые помогают создавать элегантные интерфейсы:

Элегантный интерфейс — это всегда эффективный интерфейс

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

• анимации в интерфейсе подчеркивают обратный отклик или обращают внимание на что-то существенно важное;

• типографика поддерживает семантику элементов: разные шрифты или стили текста подчеркивают структуру иерхархии или функциональные различия;

• цвет и форма элементов сообщают смысл и соответствуют ожиданиям: зелёная кнопка — продолжить, красная — отменить, подчёркнутый текст — ссылка.

Элегантный интерфейс гармоничен и ощущается как единое целое

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

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

Помню, как в одном проекте один и тот же компонент все называли по-разному: чекбокс, радиокнопка, комбобокс и даже «крыжик». Чтобы понять, о чём речь, приходилось каждый раз уточнять, какое поведение компонента имеется в виду. В итоге я составил словарь компонентов: с чёткими названиями и примерами поведения. Это позволило говорить на одном языке внутри команды и упростило постановку задач.

Элегантный интерфейс учитывает состояние пользователя

Далеко не всегда пользователь сосредоточен и внимателен — он может быть в состоянии стресса или усталости. Хороший интерфейс всегда предлагает наиболее очевидный и естественный путь решения задачи и прощает ошибки.

Создавая интерфейс, разработчики должны быть осторожны с нововведениями. Интерфейс не должен постоянно вынуждать пользователя переучиваться: даже улучшения могут вызывать раздражение, если они ломают привычные сценарии. Пользователь ценит стабильность, это подтверждает и вывод известного специалиста в области поведенческой экономики Дэна Ариели:

Расстройство от потери сильнее удовольствия от приобретения.

Подведём итог, хороший интерфейс:

• не вредит и стремится помочь пользователю в решении их задач;

• полезен и удобен, помогает достигать конкретных целей;

• жизнеспособен и устойчив, приносит прибыль и продолжает работать в разных условиях;

• эффективен, интуитивен понятен и вызывает позитивный эмоциональный отклик.

Я написал эту серию постов, чтобы пригласить вас к осмысленной работе над интерфейсами. Если вы проектируете продукт, разрабатываете дизайн или пишете код — попробуйте задать себе вопрос: насколько то, что я делаю, этично, целенаправленно, прагматично и элегантно?

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