Дизайн без боли: как не сделать говно

Потому что "красиво" не значит "удобно"

Ты джун-дизайнер, который пришел на новую работу, и не знает че делать? уставший бекендер, на которого вдруг взвалили фигму? основатель стартапа, у когорого и девопс, и фронтенд, и тестирование в одно рыло?

вилькоммен

1. Че они от меня хотят?

TLDR: разберись, что вообще надо сделать, прежде чем двигать прямоугольники туда-сюда.

Вопросы, которые стоит задать тем, кто тебе платит:

1. Про проект: Пойми общую картину

• Какая главная цель этого проекта?
• Кто наша целевая аудитория?
• Какие проблемы мы решаем для пользователей?
• Как проект связан с бизнес-целями компании?
• На какие метрики или KPI мы ориентируемся?

2. Про пользователей: Кто они вообще такие?

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

3. Про контент: Что мы вообще показываем?

• Какой контент уже есть? Его точно можно использовать?
• Есть ли требования к текстам, картинкам или видео?
• У нас есть брендбук или дизайн-система?
• Какие фичи или элементы точно должны быть?

4. Про ограничения: Чего нельзя?

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

⚡ Лайфхак: если мозг вскипает, спроси просто:

1. Зачем мы это делаем?
2. Для кого это?
3. Когда нужно сдать?

2. Подглядывай за пользователями (но вежливо)

...потому что "мне так кажется" — это не стратегия

TLDR: не гадай, а узнай, что нужно людям.

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

Больше никаких предположений.
Больше никакого "ну вроде красиво".

1. Учись замечать говно до того, как его сделаешь: Посмотри, как другие решают похожие задачи. Разбери, что работает, а что нет.

   • Листай крутые сайты и приложения (ex: Dribble)
   • Разбирай чужие дизайны:
     • Почему это работает?
     • Почему этот макет кажется мне удобным?
     • Какие там паттерны: отступы, выравнивание, иерархия шрифтов?

2. Собирай фидбэк:

   • Опросы (закинь ссылку на опрос и готовься задалбывать коллег напоминаниями.)
   • Разговоры с людьми. Да-да, придётся говорить, ты, интроверт. Никто не прочитает твои мысли.

Бонус: спрашивай "почему" пять раз

Пользователь говорит: "Эта фича неудобная." Ок.

Почему?

"Её сложно найти." Почему?

"Она спрятана в меню." Почему?

"Меню перегружено." Почему?

"Потому что мы добавили туда всё, что просили." ПОЧЕМУ?!**

Настоящая проблема почти никогда не на поверхности.

2.1 Про опросики

Окей, ты уже тихонько подглядел за пользователями (не как маньяк, а как заботливый дизайнер), покопался в дизайнах конкурентов и, возможно, так глубоко утонул в аналитике, что начал задумываться: "А туда ли я вообще свернул в жизни?" Хватит думать, пора действовать. Время собирать нормальный фидбэк.

Опросы — самый простой способ узнать, что реально думают пользователи. Но есть подвох: если сделать опрос через жопу, получишь такую же бесполезную гору мусорных данных. А плохие данные ведут к плохому дизайну. Ну, а плохой дизайн ведёт к выгоранию и стыду на демо. Так что будем умнее.

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

🤔 Зачем нам Kano Model?

Потому что не все фичи одинаково полезны.

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

Вместо того чтобы гадать и строить догадки, Кано чётко разруливает: вот это — мастхэв, вот это — "вау, круто!", а вот это — "да кому оно вообще надо?".

Удобно? Ещё бы!

🌻 5 категорий модели Кано

1. Обязательные фичи (Must-Have Features)

• Пользователи ожидают, что они будут. Без них даже запускать продукт смысла особо нет.
• Если они есть — никто даже не заметит (потому что это и так должно быть).

Пример: банковское приложение без отображения баланса. Кто тебя так?

Цель: Не облажайся.

2. Рабочие фичи (One-Dimensional Features)

• Чем лучше работают, тем довольнее юзер.
• Чем хуже работают, тем больше горит.

Пример: скорость загрузки, автономность смартфона.

Цель: Оптимизируй до упора.

3. Вау-фичи (Attractive Features)

• Никто их не ждёт, но когда они есть — это ВАУ.
• Нет — никто не заметит. Есть — юзеры кайфуют.

Пример: фильтры в Instagram на старте.

Цель: Время от времени балуй пользователей. Но аккуратно.

4. Пофиг-фичи (Indifferent Features)

• Есть — норм. Нет — тоже норм.
• Ни плюсов, ни минусов.

Пример: возможность менять форму кнопок.

Цель: Не трать время зря.

5. Бесячие фичи (Undesirable Features)

• Эти фичи реально раздражают.
• Чем больше таких штук — тем хуже.

Пример: автозапуск видео со звуком, всплывающие окна.

Цель: Выкидывай в топку.

🌻 Как работает Кано на практике

Допустим, ты делаешь простое приложение для заметок:

• Must-Have: сохранение и редактирование заметок.
• One-Dimensional: синхронизация между устройствами (чем быстрее — тем лучше).
• Attractive: AI-подсказки для организации заметок.
• Indifferent: смена цвета фона заметок.
• Undesirable: обязательная регистрация, чтобы просто посмотреть заметки (чел...)

2.2. Пошаговая инструкция

Шаг 1: Составь список фич для анализа (не больше 5 за раз)

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

⚡ Лайфхак: Начни с самых спорных или рискованных фич. Пусть юзеры помогут расставить приоритеты.

---

Шаг 2: Задай правильные вопросы (позитивные и негативные)

Для каждой фичи задай два вопроса — один про наличие фичи, другой про её отсутствие. У каждого вопроса должно быть 5 вариантов ответа:

✅ ДА:

Как бы ты отнёсся к тому, что эта фича есть в продукте?

• Мне это очень нравится.
• Я ожидал(а), что эта фича будет.
• Мне всё равно.
• Мне не нравится эта фича, но я могу с этим смириться.
• Мне это категорически не нравится.

❌ НЕТ:

Как бы ты отнёсся к тому, что этой фичи нет в продукте?

• Мне это очень нравится.
• Я ожидал(а), что этой фичи не будет.
• Мне всё равно.
• Мне не нравится, что этой фичи нет, но я могу это терпеть.
• Мне это категорически не нравится.

⚡ Итог: Ответы покажут, к какой категории по модели Кано относится фича:

• Attractive — вау-эффект.
• One-dimensional — чем лучше, тем лучше.
• Must-have — обязательная.
• Indifferent — всем пофиг.
• Undesirable — бесячая.

❗ Важно правильно формулировать вопросы! ❗
Позитивный и негативный вопросы должны касаться одной и той же фичи.

Ошибка:

• Вопросы звучат по-разному, и юзер думает, что это две разные фичи.
• В итоге кто-то может ответить, что ему нравится, что фича есть, и нравится, что её нет.
• Такой опрос можно сразу выбросить и переделать.

⚡ Лайфхак: Всегда перечитывай свои вопросы перед отправкой, чтобы избежать абсурдных ответов.

---

Шаг 3: Составь опрос

Создай чёткий и лаконичный опросник.

• Вопросы должны быть понятными и конкретными.
• Не усложняй — никто не будет разбираться в твоих загадках.
• Сделай его быстрым: 5–10 минут максимум.

⚡ Лайфхак: Если опрос занимает больше 10 минут — ты уже облажался.

---

Шаг 4: Напиши вступительное сообщение

Окей, ты собрал крутой опрос. Теперь осталось уговорить людей его пройти. И вот тут многие сыпятся: скидывают ссылку в чат и думают, что кто-то сразу кинется отвечать. Спойлер: нет. Люди заняты, у них свои задачи, а твой опрос — это ещё одна "важная" ссылка в их списке.

Так что вот план, как написать письмо, чтобы его не проигнорили:

1. Объясни, зачем это вообще нужно
Не пиши "Пройдите опрос". Люди не обязаны это делать. Объясни, почему их ответы важны.

❌ "Привет, заполни, пж, опрос."

✅ _"Хей! Мы улучшаем наш продукт и твой фидбэк реально может повлиять на изменения. Поможешь?"

2. Покажи, что это не займёт тыщу лет
Люди боятся опросов на 100 вопросов. Успокой их.

❌ "Пройди опрос (займёт немного времени)"

✅ "Всего 3 минуты твоего времени — а пользы нам на месяц!"

3. Сделай нормальный call-to-action
Кнопка "Заполнить" — это уныло. Подбодри человека.

❌ "Пройти опрос"

✅ "Оставь пару мыслей и спаси проект!"

✅ "Нажми сюда и сделай мир чуточку лучше"

4. Благодари, даже если тебя пошлют
Фидбэк — это подарок, даже если он жёсткий. Покажи, что ты ценишь каждое мнение.

❌ "Окей, спасибо"

✅ "Спасибо, ты топ! Без твоего фидбэка нам не вытянуть"

✅ "Ты лучший! Если что — зови на кофе, я должен тебе теперь"

5. Дай понять, что это не в стол
Люди часто думают, что их ответы просто пропадут. Убедись, что это не так.

❌ "Мы соберём ваши ответы"

✅ "Каждое мнение реально повлияет на продукт. Мы не шутим. Результаты покажем команде!"

---

Шаг 5: Раскидай опрос всем, кроме бабушки (хотя... и ей можно)

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

• Учитывай возраст, опыт, устройство, на котором они работают. Пусть отвечают и джуны, и сеньоры, и тот чувак, который до сих пор в Internet Explorer сидит. Телефон, планшет, ноут — пусть тестят на чём угодно. Да хоть на утюге, если получится.
• Чем разнообразнее ответы, тем точнее ты поймёшь, что реально нужно. Твои друзья тебя похвалят, а незнакомцы укажут на косяки. Вот где истина!

Не ограничивайся одним каналом. Закинь опрос в чаты, рассылку, в телегу, на стену бывшему. Чем шире сеть — тем больше рыбы наловишь.

---

Шаг 6: Думай головой!

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

• Обязательная (Must-have): без неё пользователи будут беситься.
• Рабочая (One-dimensional): чем лучше работает, тем довольнее пользователь.
• "Вау"-фича (Attractive): не ожидали, но приятно удивлены.

⚡ Ошибка: "О, за эту фичу проголосовало больше всего людей — надо делать!"

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

---

Шаг 7: Анализируй результаты

Собери ответы в таблицу и разбей фичи по категориям:

• Basic (Must-have) — обязательная.
• Competitive (One-dimensional) — рабочая.
• Attractive (Delighter) — вау-эффект.
• Neutral (Indifferent) — пофиг.
• Undesirable (Reverse) — бесячая.

---

Шаг 8. Подсчёт количества ответов

Цель: Убедиться, что ты не строишь выводы на трёх ответах от мамы, друга и своего кота. Количество данных должно быть достаточно, чтобы результаты имели хоть какой-то смысл (модель Кано работает на количественных данных).

Есть несколько способов понять, к какой категории относится фича:

НА ОСНОВЕ КОЛИЧЕСТВА ОТВЕТОВ (Дискретный анализ)

• Считаешь, сколько людей выбрало каждый вариант ответа для конкретной фичи.
• Если большинство ответило "Ожидаю" → Must-have (не сделаешь — будут орать).
• Если много "Чем лучше, тем круче" → One-dimensional (качество рулит).
• Много "Вау, не ожидал(а), но кайф" → Attractive (не ждали, но приятно).

НА ОСНОВЕ РАСПРЕДЕЛЕНИЯ ОТВЕТОВ (Непрерывный анализ)

• Тут ты уже не просто считаешь, а смотришь на соотношение разных типов ответов.
• Например, если кто-то выбрал "Нравится", но при этом "Ожидал бы, что этого нет" — фича сомнительная.
• Этот способ требует больше времени и мозгов (и об этом я расскажу как-нибудь потом ).

Важно: Чем больше ответов, тем надёжнее выводы. Опрос из трёх человек — это не исследование. Доверяй цифрам, а не чуйке.

---

Шаг 9. Приоритизация фич по формуле успешного продукта

• 50% Обязательные фичи (Must-have) — базовый функционал, без которого продукт не взлетит.
• 30% Рабочие фичи (One-dimensional) — чем лучше работают, тем больше кайфа.
• 20% Вау-фичи (Attractive) — приятные сюрпризы, которые вызывают восторг.

---

Шаг 10. Определи типы пользователей по их ответам

Понять, кто как реагирует на разные фичи, — это ключ к успешному продукту.

• Early Adopters / Early Majority — те, кто считает фичи Must-have или One-dimensional. Они хотят, чтобы всё работало чётко и стабильно.
• Late Majority — те, кому заходят Attractive фичи. Им важно, чтобы продукт был не только полезным, но и удобным/красивым.
• Non-adopters — те, кто считает фичи Indifferent или Undesirable. Скорее всего, этот продукт им просто не нужен.

Лайфхак: Разные сегменты пользователей требуют разного подхода. Не пытайся угодить всем сразу — сначала закрой базовые потребности активных юзеров.

Пример:

• Твои early adopters хотят стабильности и скорости → качай core-функционал.
• Late majority любят красивый интерфейс → добавь приятные мелочи.
• Остальные? Ну… не твоя целевая. И не парься.

3. Художник от слова "худо"

Шаг 1. Ни сы

TLDR: вывали все идеи на бумагу. Любые. Даже кривые.

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

Сделай несколько вариантов. Один макет — не вариант. Крути, верти, двигай кнопки, меняй расположение блоков. Если пользователь не может пройти от точки A до точки B без нервного тика — переделывай.

И ПЛИЗ, покажи кому-нибудь. Если человек смотрит на твой скетч и спрашивает: «Это что вообще такое?» — поздравляю, ты только что спас себя от бессмысленной разработки.

---

Шаг 2. Сначала скелет, потом шкура

TLDR: Сделай каркас, а не музей современного искусства.

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

Без фанатизма. Никаких градиентов, теней и блестящих кнопок. Только серые блоки, текст-заглушки и скелет интерфейса. Вайрфрейм — это не про красоту, это про логику.

Задай себе пару вопросов:

• Поймёт ли юзер, куда жать, или понадобится инструкция на 5 страниц?
• Всё ли логично, или ты сам заблудился в своём шедевре?

Посмотри на макет свежим взглядом. Если сам не можешь разобраться, юзер сбежит с криками.

---

Шаг 3. Красиво, но не в ущерб смыслу

TLDR: добавляй визуал, но не забывай, зачем ты тут.

Наконец-то можно навести марафет! Но не надо вываливать на экран все цвета радуги. Дизайн — это не детский рисунок. Каждое решение должно помогать пользователю, а не мешать.

• Подбери нормальную палитру, от которой не вытекают глаза.
• Шрифты должны читаться. Comic Sans? Даже не думай.
• Иконки, картинки — можно. Анимации — чуть-чуть. Но только если это помогает, а не для красоты.

Золотое правило: если элемент не помогает юзеру — он нахрен не нужен.

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

4. Дай знакомым повод сказать, что ты криворукий

TLDR: если бабушка не справится — переделывай

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

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

Позориться можно вживую перед всем отделом (демо) или перед определенным кругом подопытных (юзабилити стади):

4.1 Демо, после которого не захочется жить в лесу

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

Не распыляйся: Не надо показывать ВСЁ подряд.
- Сосредоточься на ключевых сценариях и функциях, по которым нужен фидбэк.
- Не лезь в мелочи, если кнопка "назад" работает криво.

Объясняй "почему":
- Не просто показывай, что ты сделал, но и зачем ты это сделал.
- Контекст важен: почему именно такой паттерн? Почему такой цвет?

Задавай конкретные вопросы:
- «Насколько понятен этот сценарий?»
- «Что здесь сбивает с толку или чего не хватает?»
- «Какая часть самая/наименее полезная?»

Проси честность:
- Дай понять, что тебе нужна конструктивная критика, а не вежливое покивание.
- Скажи прямо: «Не надо меня жалеть, скажите, где говно!»

Записывай, а не обижайся:
- Фиксируй всё, что говорят.
- Не спорь. Не оправдывайся. Просто слушай.

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

4.2. Как провести юзабилити-тест

TLDR: посмотри, как реальные люди юзают твой продукт, и найди, где они залипают.

Юзабилити-тест — это не когда ты показываешь макет и говоришь: "Ну вот, тут кнопка, тут текст, всё же понятно, да?" Это когда ты молча смотришь, как человек блуждает по твоему интерфейсу, страдает, тыкает не туда и матерится про себя.

Ты материшься про себя.
СБУшник, следящий за вами, материться про себя...

...ну вы поняли

Четко реши, что тестируешь: Не лезь сразу во всё подряд. Выбери пару ключевых фич или сценариев.

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

Дай задачу, а не инструкцию:
- Плохо: «Нажми на синюю кнопку».
- Хорошо: «Попробуй войти в аккаунт».

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

Записывай всё: Снимай экран (с разрешения) или делай заметки. Обращай внимание на паузы и моменты, где человек тупит или бесится.

Спрашивай открыто:
- «Что ты ожидал увидеть здесь?»
- «Что было непонятно?»
- «Как бы ты объяснил это другу?»

Ищи повторяющиеся косяки: Один человек затупил — бывает. Трое затупили — значит, косяк в дизайне.

Не забудь про доступность: Если твой дизайн работает только для людей с идеальным зрением и мышкой с DPI как у киберкотлеты, значит, ты уже облажался. Протесть интерфейс с экранными дикторами, проверь контрастность текста, убедись, что твоя бабуля сможет им пользоваться и не кинет кружку в стену.

Скажи спасибо: Поблагодари за время. Можешь угостить кофе или печенькой.

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

Пользователи не будут читать инструкции и уж точно не станут писать в поддержку. Они просто закроют твоё приложение и забудут о нём как о страшном сне.

Как удобно записывать результаты:

Я лично веду Excel-табличку с вот такими колонками:

• Колонка A — Задача, которую выполняет участник.
• Колонка B — Путь кликов или последовательность действий.
• Колонка C — Наблюдения за поведением, эмоциями и трудностями.
• Колонка D — Прямые цитаты участников (чтобы потом не додумывать за них).
• Колонка E — Оценка сложности выполнения задачи.

Полезные штуки для дизайна:

Инструменты:

1. Dribbble — Красивые дизайны для вдохновения.
2. Coolors — Генератор цветовых палитр.
3. Colors Visualizer — Тест цветов в интерфейсе.
4. Color Contrast Checker — Проверка контрастности.
5. Material UI Icons — Иконки для интерфейсов.

---

Для прокачки скилсета:

1. Google UX Design Course (Coursera) — База по UX-дизайну.
2. Refactoring UI — Полезные советы по интерфейсам.
3. The Non-Designer’s Design Book — Книга про основы дизайна.

...а теперь пойди займись делом. И контрастность проверь.

<3