Как найти баланс между качеством дизайна и скоростью?

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

Чаще всего в основе работы продуктовой команды, особенно в стартапах, лежит один из двух принципов: сделать лучший продукт на рынке или быстро вывести продукт на рынок. С одной стороны, качество, с другой — скорость.

Оба варианта создают проблемы для бизнеса и не позволяют компаниям получить конкурентные преимущества. Краеугольным камнем успешной продуктовой стратегии является умение найти баланс между этими противоречивыми подходами.

Легче сказать «найдите баланс», чем сделать это на практике, поскольку качество и скорость — понятия субъективные. Однако, как человек, который разрабатывал дизайн для многих стартапов, я верю, что правильный баланс существует. Я называю такой подход прагматичным перфекционизмом. В его основе лежат 10 принципов:

1. Поставьте производительность сайта во главу угла

Большинство предпринимателей, с которыми я работал, не ставили веб-производительность на первое место в списке своих бизнес-приоритетов. Зачастую они фокусировались на развитии продукта и бизнеса и могли пренебрегать такими важными факторами, как производительность, доступность и SEO. Однако каждый из этих факторов влияет на рост компании.

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

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

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

2. Возьмите за основу готовую дизайн-систему

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

Вместо этого они могут адаптировать готовую систему, например Material Design от Google, Carbon от IBM или Ant Design от Ant Group, под свои нужды. Дизайнеры и разработчики уже вложили тысячи часов труда в эти успешные системы, поэтому не стоит впустую тратить время и заново проектировать стандартные UI-компоненты.

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

3. Уделяйте внимание деталям

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

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

Для недизайнеров или даже начинающих дизайнеров зацикленность на подобных деталях может показаться излишней. Обратите внимание на онлайн-игру Can't Unsee. Это полезный инструмент для демонстрации UI-нюансов клиентам и другим членам команды. Покажите им несколько примеров, и они сами убедятся, как сильно, казалось бы, незначительные детали влияют на результат.

4. Уделяйте внимание ошибкам и состояниям

Состояния показывают пользователю статус UI-элемента. Они помогают людям двигаться вперед и достигать своих целей.

Стартапы часто фокусируются лишь на успешном безошибочном сценарии (на англ. happy path) и оставляют без внимания потенциальные проблемы. Однако, чтобы предоставить пользователям наилучший опыт, следует продумать следующие состояния (как минимум):

• По умолчанию
• Прогресс/загрузка
• Ошибка
• Успех
• Пустое
• Интерактивные: наведение (hover), нажатие (active), фокус (focus), неактивное состояние (disabled)

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

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

5. Качество изображений должно быть «достаточно хорошим»

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

«Тяжелые» изображения замедляют загрузку страницы (а это пользователь точно заметит 🙃), что сказывается на опыте взаимодействия, конверсии и позиции в поисковой выдаче. 

6. Используйте готовые наборы иконок

Существует множество способов придать продукту индивидуальность. Иконография не входит в их число.

Любой стартап, который вкладывает деньги в разработку полностью уникального набора иконок, тратит их впустую. Вместо этого выберите библиотеку иконок, например Material Symbols от Google. Иногда вам может понадобиться значок, которого нет в готовом наборе, но эффективнее добавить его в существующую библиотеку (это случается не так часто), чем создавать ее с нуля.

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

7. Не стоит мудрить с анимацией

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

Однако в веб-интерфейсах причудливая анимация зачастую является пожирателем времени — она легко удваивает или утраивает время работы над конкретным UI-компонентом. 

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

8. Не беспокойтесь о незначительных различиях в браузере

Веб-браузеры по-разному интерпретируют начертания шрифтов и вертикальные отступы. Каждая операционная система отображает шрифты по-своему, используя собственные методы сглаживания (anti-aliasing). В результате одна и та же страница будет выглядеть немного по-разному в зависимости от браузера и операционной системы пользователя. В большинстве случаев эти несоответствия незначительны, поэтому не стоит тратить ресурсы на то, чтобы сделать страницу на 100% одинаковой во всех браузерах.

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

9. Не нужно оптимизировать дизайн под все возможные размеры экрана

Существует бесконечное множество комбинаций размеров устройств, разрешений экрана и плотности пикселей. Отзывчивый дизайн перестраивает контент в зависимости от размера экрана пользователя. Хотя оптимизировать сайт для различных устройств действительно надо, следует ограничиться несколькими наиболее популярными разрешениями.

Прагматичный подход заключается в создании «резинового» дизайна для 3–6 контрольных точек (точек, в которых сайт будет автоматически перестраиваться для просмотра на экране определенного размера). Ниже вы видите стандартный список контрольных точек, начиная с самого маленького телефона и заканчивая большим монитором.

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

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

10. Метатеги имеют значение

Опыт взаимодействия пользователя с продуктом начинается еще до того, как он попадает на сайт. То, как ссылка на ваш контент отображается в результатах поиска Google, соцсетях или личных сообщениях, может побудить человека кликнуть по ней или, напротив, отказаться от этой идеи.

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

В примере сверху метатеги отсутствуют, поэтому превью ссылок в Google и Twitter выглядят «голыми» и не вызывают желания кликнуть. Напротив, в примере снизу с метатегами мы видим превью и описание, которые показывают, какой контент скрывает ссылка.

К основным метатегам относятся заголовок, тип контента, URL изображения и URL страницы.

Заключение

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

Стартапы часто отдают приоритет скорости и снижению затрат, а не к качеству. Скорость может иметь решающее значение для успеха, если компания стремится завоевать новую нишу, однако большинство рынков уже перенасыщены, а новые рынки насыщаются очень быстро. (Например, после того как ChatGPT стал вирусным, в первом квартале 2023 года было запущено более 150 чат-ботов на основе AI).