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