Как родилась идея этой статьи? При тех или иных обстоятельствах в разговорах новички в IT и эксперты задают ряд вопросов: «Что есть дизайн? В чём заключаются основные задачи дизайна? Как выстроить связь между продуктом и аудиторией? Каковы самые базовые правила UX? Как поддержать консистентность в дизайне и коммуникации с пользователем и разработкой? Карл, что с доступностью? Обязан ли продукт быть эстетичным? Как сделать продукт, который покоряет сердца?»

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

Для кого эта статья?

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

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

Кто мы такие? 🤓

Прежде, чем начать, давайте познакомимся.

Айгуль Гамбарова — старший продуктовый дизайнер с опытом работы в студиях, корпорациях и международных стартапах, таких как Sberbank, TOP.co (TON), STON.Fi. Сейчас работаю над цифровым продуктом на стыке Web3 и ESG — в международной команде с офисами в Европе и Азии. В своей работе опираюсь на научный подход, эмпатию и эстетику. Помимо работы в корпорациях, я оказываю услуги аудита, консалтинга и разработки дизайна для компаний в B2C, B2B, FinTech и Crypto-сегментах.

В свободное от работы время веду канал про дизайн AiDi, играю в теннис, провожу хайкинг-ретриты выходного дня в Португалии. Подписывайся на мой инстаграм ai_gamma — буду рада сотрудничеству или коллаборации.

Ирина Сидорова — старший продуктовый дизайнер, ментор, наставник в BBE и амбассадор исследований, специализирующаяся на создании клиентоориентированных продуктов в различных сферах: FinTech, B2B, B2C-сегменте. У меня более 7 лет опыта в дизайне, 5 из которых — в продукте: я работала с МТС, Raiffeisen Capital и с FinTech-стартапами на зарубежном рынке.

Мои суперсилы — это UX, исследования и дизайн-процессы. Живу на Кипре, люблю кошек, хайки и рисовать, веду канал с заметками о работе @d_zinger

Понимание UI, UX и Product design

В 2000-е в Россию приходит интернет за ручку с новой профессией. Это те времена, когда Артемий Лебедев делал web-дизайн, но не знал, как это называется. В то же время в Америке уже вовсю развивается корпорация Apple, которой суждено стать тем мастодонтом, задающим тренды и рождающим спрос у потребителя только своим присутствием на рынке. А вместе с этой корпорацией в историю врывается новая эпоха дизайна, после которой мир не будет прежним. В первую очередь это затрагивает промышленный дизайн и дизайн интерфейса.

Позже web-дизайнеры превратились в UI (User Interface), перекочевали в UX (User Experience), трансформировались в UX/UI, затем сублимировались в Product-дизайнеров, а кульминацией стало появление понятия IxD — Interaction Design. Если вы тоже не успеваете за новыми веяниями, можно ознакомиться с этой статьей. В ней автор «разносит» моду на дифференцирование дисциплин цифрового дизайна, обсуждение дизайнерами дизайнеров, за которым теряется самое главное — донесение ценности, которую эта область может принести обществу.

Entia non sunt multiplicanda praeter necessitatem — «Не следует множить сущности без необходимости».
Сформулированный Уильямом Гамильтоном, профессором логики и метафизики, принцип «Бритвы Оккама», 1852 год

Обратимся к базе:

• UX-дизайн отвечает за то, как интерфейс работает.
• UI-дизайн отвечает за то, как интерфейс выглядит.

Разделять эти два понятия неуместно, ведь одно не может существовать без другого.

Конечная цель всех вышеперечисленных «дисциплин» — создание положительного пользовательского опыта посредством разных подходов и средств. Поэтому всё это можно смело назвать просто: UX-дизайном.

Если сублимировать мнение ведущих экспертов, так или иначе связанных с созданием крутейших продуктов современности — Дона Нормана («Дизайн повседневных вещей»), Якоба Нильсена (Nielsen Norman Group), Брайана Чески (Airbnb), Джонатана Айва (Apple), Джефа Раскина, то UX-design — это проектирование набора правил и способов взаимодействия, благодаря которым пользователь может легко и быстро выполнить свою задачу. Основа хорошего дизайна: чем проще эти правила, тем легче жизнь пользователя.

Кто же такой Product Designer? Это человек-оркестр, который смотрит на продукт шире, чем просто через призму UX. Он не ограничивается только интерфейсами, а участвует во всех этапах: от зарождения идей и кастдевов до запуска MVP или MCP, и дальше — к масштабированию и долгосрочному развитию. Такой дизайнер не разрывается между проектами, а фокусируется на одном продукте, погружаясь в него с головой. Он думает о том, как связать цели бизнеса, задачи команды и потребности пользователей, чтобы создать решение, которое работает на всех уровнях.

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

Семь опорных точек. От функциональности до эмоций

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

Бизнес — как стартовый механизм создания чего-то ценного для общества.

Пользователь — как единица этого самого общества, для которого предназначена ценность.

Дизайн — как инструмент, посредством которого эта ценность доносится до пользователя.

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

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

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

Точка 1. Дизайн решает конкретные задачи

— Слушайте, а куда мы идём?
 — Ну, как ты хотел, идём куда идётся.
 — А куда нам идётся?
 — Туда!
 — Тогда ещё один вопрос: чем «там» лучше, чем, скажем, «там»?
 — Как чем? «Там» — это оттуда, а «там» — это туда⁵.

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

Как это связано с дизайном? Напрямую — дизайн выполняет определённые задачи на разных этапах жизни продукта и зависит от стратегии развития продукта на ближайшие 6–12 месяцев, которые определяют стейкхолдеры, C-level продукта.

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

1. Функциональный (Functionality)

Рассмотрим как пример приложение онлайн-банкинга. Прежде всего, это банк, поэтому на первой ступени — регулирование денежного оборота, посредничество в кредитовании граждан и компаний, переводы денег между клиентами, консультирование, предоставление актуальной информации о работе банка. Без этого функционала продукт будет не нужен рынку.

2. Надёжный (Reliable)

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

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

3. Удобный (Usable)

Дизайн интуитивен и прост в использовании. Продукт последовательно ведёт пользователя, обучает его там, где это необходимо. Быстрые A/B-тесты, работа с метриками станут вашими союзниками в улучшении usability. Какие это могут быть метрики? Happiness, Engagement, Retention, Task effectiveness. Важно выбирать те, что будут значимы в долгосрочной перспективе, чтобы отслеживать их динамику в течение нескольких лет.

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

4. Профессиональный (Proficiency)

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

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

В 2020 году Тинькофф Банк запустил «Инвесткопилку» — фичу, которая изменила подход к управлению финансами. Возможность ежемесячно получать кэшбэк, откладывать небольшие суммы с покупок, автоматически инвестировать их в паевые фонды, получая 4 % на остаток — всё это в рамках одного счёта. Подобного на российском рынке банкинга ещё не было. Для финансово грамотных пользователей это открыло массу возможностей, а Тинькофф стал локомотивом, который несёт всю нишу вперёд.

5. Выдающийся (Significant)

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

В 2023 году британский мультинациональный суперапп Revolut выпустил полностью обновлённую версию приложения и провёл ребрендинг. В основу редизайна приложения легли персонализация, mass adoption и масштабируемость. Набор карточек с видами счетов и группами действий был убран. Теперь в центре внимания пользователя — не набор разных сущностей, а главный счёт пользователя и набор действий с ним. В таббаре теперь все продукты экосистемы: Home (счета пользователя), Invest, Transfers, Crypto, Lifestyle.

А что делать, когда инвесторы требуют быстрых результатов? В этом случае есть дело до стабильности работы? А как же легендарная и беспощадно нефункциональная соковыжималка Филиппа Старка, которая находится в Музее современного искусства?

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

Важно правильно формулировать цель и задачи

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

Как ответить на эти вопросы? Коммуникация в команде. Сузим окно внимания с общего восприятия дизайна до выполнения конкретной задачи в продукте.

Продукт — финтех-приложение для управления семейным бюджетом. Недавно добавленная функция распределения расходов между членами семьи остаётся малоиспользуемой: пользователи не замечают её или не понимают, как она работает. ПМ Лёша приходит с таской к дизайнеру Давиду.

ПМ (Лёша): Привет! Есть проблема: пользователи не понимают, как распределять расходы между членами семьи. Давай сделаем экран с инструкцией, чтобы всё пошагово объяснить.

Дизайнер (Давид): Привет, Лёха! Идея понятная, но зачем нам инструкция? Мы хотим, чтобы они просто поняли, как работает функция, или чтобы они реально начали ею пользоваться?

Лёша: Ну, понятно, что важно, чтобы они начали ей пользоваться.

Давид: Точно. Тогда инструкция — это не главное. Нам нужно направить пользователя сразу к действию.

Лёша: Согласен. И что предлагаешь?

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

1. Если участников нет — при нажатии появится шаг «Добавьте участников».
2. Если участники есть — пользователь сразу попадает в интерфейс распределения.
3. А кнопку «Добавить участника» будем показывать только внутри процесса распределения.

Лёша: Логично. Подсказки добавим?

Давид: А как же! Если участников нет, рядом с кнопкой будет текст: «Чтобы распределить расходы, сначала добавьте участников». Это направит их по сценарию.

Лёша: Без лишних экранов и инструкций мы решили бизнес-цель. Круто!

Давид: Абсолютно верно. Держим в голове принцип Парето: 20 % усилий дают 80 % результата.

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

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

Как понять, что цель достигнута?

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

1. Рост использования функции:

• Процент пользователей, которые начали пользоваться функцией после внесённых изменений.
• Количество сессий, в которых использовалась функция.

2. Увеличение вовлечённости:

• Время, которое пользователи проводят в разделе с функцией распределения.
• Число действий, выполняемых пользователями (например, добавление участников, распределение расходов).

3. Улучшение пользовательского опыта:

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

4. Влияние на бизнес-результаты:

• Снижение оттока пользователей за счёт увеличения их вовлечённости.
• Частичное сокращение стоимости удержания пользователей (CRC) за счёт снижения нагрузки на службу поддержки.
• Повышение коэффициента удержания пользователей (CRR) благодаря более прозрачной и простой коммуникации в интерфейсе.
• Повышение конверсии в платные подписки (если функционал доступен в рамках подписки).

На методах оценки результатов и ответе на вопрос «А что делать, если не удалось достичь цели?» останавливаться не будем. Это отдельная занимательная тема со своими подводными камнями. Возможно, она будет раскрыта в следующих статьях.

Точка 2. Пользователю сразу видна ценность продукта

Время — это деньги, и если внятно сформулировать уникальное торговое предложение (USP — Unique Selling Proposition), сделать на нём акцент во всех средствах внешней коммуникации с пользователем — например, на главной странице продукта, — то результат — лишь вопрос времени (мы не берём во внимание другие факторы влияния).

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

Закон Фиттса: «Время обнаружения цели зависит от расстояния до цели и её размера»

Пользователю требуется всего 50 миллисекунд (то есть 0,05 секунды), чтобы сформировать первое мнение о веб-сайте¹. Очень пугающая статистика, не правда ли?

Согласно другому исследованию Якоба Нильсена и его команды от 2011 года, чтобы удержать внимание пользователя хотя бы на несколько минут, вы должны чётко донести своё ценностное предложение в течение первых 10 секунд. Целых 10 секунд! Уже лучше.

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

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

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

Биржа 1: Pinkychain — The largest onchain marketplace. Buy and sell crypto on Ethereum and 11+ other chains.
Биржа 2: Popswap — Zero-trust cross-chain DEX enabling token swaps between blockchains.

1. Чьё предложение более понятно?

• Pinkychain: простое и доступное описание, которое понятно как новичкам, так и опытным криптотрейдерам.
• Popswap: использует технические термины zero-trust и cross-chain, которые могут быть сложны для восприятия, особенно для менее подготовленного пользователя.

Итог: Уникальное предложение Pinkychain понятнее.

2. Кто лучше доносит ценность для пользователей?

• Pinkychain: Buy and sell crypto on Ethereum and 11+ other chains — чётко доносит ценность: возможность покупать и продавать криптовалюту на множестве блокчейнов.
• Popswap: Enabling token swaps between blockchains — ценность менее очевидна, так как описание содержит технические особенности, а не конкретные выгоды для пользователя. Также сложные, витиеватые формулировки заставляют вчитываться в текст, чтобы вычленить смысл.

Итог: Тут Pinkychain также лидирует.

3. Чьё УТП выглядит более убедительным?

• Pinkychain: делает акцент на масштабе платформы — The largest onchain marketplace, что создаёт образ надёжного продукта, которому доверяет большое количество пользователей.
• Popswap: упоминает zero-trust cross-chain DEX, что понятно для криптоэнтузиастов, однако для широкой аудитории zero-trust, например, звучит скорее отпугивающе (нулевое доверие? к бирже?).

Итог: Выигрывает Pinkychain.

Давайте зафиксируем три принципа:

1. Формулируем чёткое, ёмкое и запоминающееся уникальное предложение, которое напрямую передаёт ценность для пользователя.
2. Используем простой и доступный язык, чтобы смысл был понятен широкой аудитории и не вызывал лишних вопросов.
3. Формулируем нарратив бренда — ощущения, формальность/неформальность общения, эмоции, которые должен испытывать пользователь, взаимодействуя с продуктом. Это неочевидный, но логичный шаг после формулирования USP. Его должен держать в голове и маркетолог, и продакт, и дизайнер, и разработчик.

Как можно передать ценность?

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

А как же социальные триггеры? Продукт становится ещё более ценным, когда он решает не только боль одного человека, но и помогает обществу. Лучший способ добиться вовлечённости — это бренд-активизм. Человеку важно почувствовать свою значимость и вклад в общество. Люди, объединённые одной миссией и общими ценностями, — поезд, который не остановить.

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

Если вам интересно глубже копнуть в сферу маркетинга и понять бизнес ещё лучше, вот список книг, который вам поможет:

1. «Разработка ценностных предложений», Александр Остервальдер, Ив Пинье, Грег Бернарда, Алан Смит.
2. «Позиционирование: битва за умы», Эл Райс, Джек Траут.
3. «Заразительный. Психология сарафанного радио», Йона Бергер.
4. «Стратегия голубого океана», Чан Ким, Рене Моборн.
5. «Ясно, понятно», Максим Ильяхов.

Точка 3. Минимальная когнитивная нагрузка на пользователя

По данным компании DataReportal, люди по всему миру в среднем проводят в интернете около 6 часов 40 минут в день. Из этого времени:

• 2 часа 23 минуты уходят на прокрутку социальных сетей,
• 1 час 25 минут — на потоковую музыку,
• 49 минут — на подкасты.

И самое главное: 3 часа 50 минут мы проводим, глядя в экраны мобильных телефонов.

Уже представили, какое количество информации у нас ежедневно в голове? Ежеминутно? Ежесекундно? Пользователи как минимум запомнят ваш продукт при первом касании, если им будет понятно, что вы им предлагаете.

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

1. Упрощайте интерфейс

Слышали такое выражение: «Простота — высшая ступень искусства»? Вы, наверное, не поверите, но это сказал мастер восточных единоборств Брюс Ли. Согласна, неочевидный пример, но именно он позволяет донести ценность этого свойства во всех сферах деятельности человека. Философы, изобретатели, музыканты, мастера боевых искусств, писатели всего мира сходятся на идее, что простота превосходит сложность, предлагая более ясный путь к истине и пониманию.

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

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

В каком из этих двух продуктов лучше расставлены акценты? Почему? Остановитесь на секунду, попробуйте ответить на эти вопросы — и продолжим.

Первое, что бросается в глаза, — яркий луч Яндекс Музыки. Это центр притяжения, инструмент транслирования идеи бренда, который передаёт эмоции зрителю: такой тёплый, яркий и живой. На кнопку интуитивно хочется нажать. Расставление акцентов — одна из сильных сторон приложения. Кстати, в последней версии ребята добавили «характер» иконкам — теперь они перекликаются с нарративом бренда.

Когда первый раз открываешь приложение Spotify, проходишь онбординг, невольно возникает вопрос: а куда нажать, чтобы продолжить? Не с первой минуты, но ты понимаешь, как дальше с этим работать. Дальше формируется привычка — и остальное дело техники. Однако первые минуты безвозвратно утрачены — не все готовы разбираться.

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

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

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

Закон Теслера: «Для любой системы существует определённая степень сложности, которую нельзя уменьшить». Из книги Дэна Саффера «Проектирование для взаимодействия»

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

«Что такое ментальная модель?» — спросит пытливый читатель. Это идеи, представления, способы понимания, основанные на предыдущем опыте человека, которые влияют на его действия и восприятие. Проще говоря — это то, как мы видим мир.

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

Пользователь ожидает, что отдельно взятый сайт или продукт будет работать так же, как и другие, которые он уже знает. В примере с Яндекс Музыкой и Spotify мы чётко увидели, как бренды не стесняются использовать максимально упрощённый образ плеера, где выделяются два основных действия. У Яндекс Музыки — это добавление в избранное и воспроизведение/пауза, у Spotify — переключение между устройствами и воспроизведение/пауза.

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

Маргарет Дефейтер, британский психолог, профессор психологии развития в Нортумбрийском университете, провела эксперимент, который показал, что дети пяти лет мыслят креативнее и оригинальнее решают поставленные задачи, в отличие от детей старшего возраста (6–7 лет). Почему? Ответ кроется в иммунитете к функциональной фиксированности объектов: у маленьких детей ещё нет чёткого понимания, что из себя представляет тот или иной предмет и как с ним нужно взаимодействовать.

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

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

3. Разбивайте сложные задачи на мелкие этапы

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

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

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

Закон Миллера: «Среднестатистический человек может удерживать в своей рабочей памяти только 7 (плюс-минус 2) элемента». Из статьи Джорджа А. Миллера 1956 года «Магическое число семь»

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

Эффект обеспеченного прогресса: «Люди мотивированы завершать задачи, если видят, что уже достигли прогресса»

Принцип деления на части можно видеть в KYC (Know Your Customer) — например, в онлайн-банкинге, криптокошельках, финансовых биржах. На первом этапе вводим e-mail, на втором создаём пароль, на следующем — даём личные данные с именем, фамилией, страной и адресом и т. д. Если разместить всё многообразие инпутов на одном экране, пользователь испугается и может покинуть чат.

4. Минимизируйте количество вариантов для выбора пользователя

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

Это особенно важно в e-commerce, где избыточное количество аналогичных продуктов может вводить пользователя в ступор, влияя на метрику Check Out Rate. Используя персонализацию (имя, регион, история покупок, их средняя стоимость и т. п.), вы можете формировать уникальные списки рекомендаций или добавить фильтры в виде больших карточек, которые ведут в разные разделы товаров — как это делает ИКЕА.

Закон Хика: «Время, необходимое для принятия решения, увеличивается с увеличением количества и сложности вариантов выбора».
Из статьи Джорджа А. Миллера 1956 года «Магическое число семь»

5. Упрощайте текст

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

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

Главное в сильном тексте — это забота о читателе. Из книги Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай»

Продумывайте копирайт кнопок, а сообщения об ошибках и подсказки делайте краткими и понятными: вместо того чтобы писать в алертах, почему произошла ошибка, указывайте конкретный набор действий, чтобы это исправить. Будучи дизайнером, можно собрать набор правил для текста, сформировать инструкцию и отдать её модели ChatGPT — например, Write For Me.

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

Попробуйте отойти на пару метров и взглянуть на ваш текст глазами пользователя. Сразу понятно, о чём речь? Если да — отлично, вы идёте в верном направлении. Если нет — стоит пересмотреть подход.

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

Точка 4. Внешняя и внутренняя консистентность

«Последовательность — один из самых мощных принципов юзабилити: когда вещи всегда ведут себя одинаково, пользователям не нужно беспокоиться о том, что произойдёт» Якоб Нильсен, доктор физических наук, основатель Nielsen Norman Group

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

1. Консистентность в дизайне

Несколько аспектов, которые стоит учитывать при создании дизайна продукта:

• Дизайн продукта соответствует образу и нарративу бренда.
  Дизайн должен быть не просто красивым, но и поддерживать tone of voice и визуальную идентичность бренда, передавать его ценности и характер.
   — Что, если образа бренда нет, а интерфейс MVP был сделан на коленке для инвесторов?
   — Создавать его самому.
   — И как это сделать?
   — Поискать в среде бренда, создать ментальную карту, поговорить с командой, а если есть комьюнити — можно обратиться к нему (главное — собрать список критериев для образа). Будет классно, если процесс создаст историю.
   — Зачем всё это делать?
   — Образ — сердцевина целого, а визуальные решения (характер шрифта, скругления кнопок, цвета, характер вёрстки и т. п.) — это начинка. Имея на руках костяк, легче принимать дизайн-решения, а приняв — их можно систематизировать, а в дальнейшем — масштабировать. Помимо прочего, сильный образ вызовет эмоции и ассоциации, а значит, потенциальный потребитель лучше его запомнит.

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

Отойдём от образов. Допустим, мы разрабатываем всё то же приложение для управления финансами, но для поколения Z — зумеров. Как это может отразиться в нарративе? Яркая трендовая палитра, игривость в коммуникации, аватары, формат коротких видео и визуальных подсказок (последние уже являются базой в интерфейсах).

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

• Визуальная консистентность
  UI-Kit — всему голова. Это как коробка с ЛЕГО для дизайнера: набор готовых деталей, из которых можно быстро собрать интерфейс. Цветовая палитра, шрифты, кнопки, иконки, картинки, инпуты — всё под рукой, чтобы не выдумывать колесо заново.
  Однако это только детали — собрать «машину» или «замок Хогвартса» целиком без инструкции будет сложнее. Про инструкцию — она же дизайн-система — расскажем ниже.
• Объяснимый дизайн
  Каждое решение — не просто интуиция, а чёткий ответ на тот же вопрос «Зачем?»: оно основано на данных, поддержано логикой и выстроено на принципах, которые можно разобрать и объяснить так, чтобы даже новый человек в команде видел в этом смысл, набор закономерностей и мог продолжать с ним работать.
• Системный подход
  Если UI-Kit является набором деталей, то дизайн-система — это комплексная экосистема, включающая UI-Kit, гайдлайны, правила взаимодействия, документацию, библиотеку кодовых компонентов и подходы к проектированию. Она создаёт единство между дизайном и разработкой, стандартизируя визуальный язык, функциональность и пользовательский опыт продукта. Помните про масштабируемость дизайн-системы, держите это в уме при выборе подхода к её проектированию. Изучите готовые дизайн-системы и их паттерны: Brandguidelines, VK UI, Kontur UI, Eve. Обратите внимание на состояния, комплексный подход и как решается проблема доступности.
• Органичная интеграция новых фичей
  Каждая новая фича или раздел продукта должны быть органично интегрированы в существующий пользовательский путь. Если изменения или новшества временные, они должны быть частью общей стратегии развития продукта — с учётом их адаптации в будущем.
  В качестве примера рассмотрим интеграцию формата сторис в Instagram. Как это было? Появление новой фичи не повлияло на флоу пользователя: «Истории» разместили в верхней части экрана, что не отвлекало от привычного скроллинга ленты.
  Постепенно команда добавляла улучшения: фильтры, GIF-стикеры, опросы и интерактивные элементы. Фича вписалась в общий стиль и стратегию Instagram, став ключевым элементом взаимодействия с платформой.

2. Консистентность в коммуникации дизайна и разработки

Здесь важно одно: синхрон команды дизайна и разработки. Несогласованность, дублирование усилий или непонимание подходов могут стоить времени, ресурсов и нервов. Чтобы избежать неразберихи, важно придерживаться следующих принципов:

• Единый подход к дизайн-системе
  Это касается структуры, нейминга, подхода к созданию дизайн-токенов. Последние выделяют в три типа: глобальные токены, семантические токены и токены для отдельных компонентов — и каждый из них имеет ряд преимуществ и недостатков. Если фронты будут использовать цвет neutral_0, а у вас в стилях он будет называться search_color_background — не будет единой коммуникации. Фиксация даже таких, казалось бы, незначительных моментов обеспечит душевное спокойствие обеих сторон и позволит говорить на одном языке.
• Документация и гайдлайны
  Тут важно убедиться, что разработчики обладают тем же набором знаний о поведении и интерактивности компонентов, что и вы. Для дизайн-системы пропишите структуру для каждой группы компонентов. Какие состояния у чипсов? У кнопок? Из каких элементов собираются инпуты? Учтена ли доступность? Попробуйте собрать универсальный шаблон на базе текущего списка компонентов — это позволит сократить время на создание документации для разработки. У каждого компонента свои особенности. Чтобы ничего не забыть, можно в качестве ориентира использовать чек-лист в конце этой статьи.
• Оформление новых фичей и экранов
  Все ли состояния экранов учтены? Прописаны ли анимации? Как ведут себя новые элементы при взаимодействии с ними? В конце статьи также будет чек-лист для самопроверки и организации дизайн-процесса. Его можно загрузить в свою дизайн-систему как внутренний инструмент для команды и по необходимости перетаскивать в разные макеты.
• Чёткий процесс внедрения измененийЕсли вы обновляете компонент или проектируете новые макеты с учётом новой фичи, разработчики должны быть вовлечены в процесс. Им важно понимать, как изменения повлияют на продукт, и смогут дать фидбэк с учётом технических особенностей.

Помимо изменений в самом продукте, важно учитывать изменения в используемых инструментах. Например, в 2023 году Figma выкатила обновление, в котором появился Dev mode: новые статусы «Готово к разработке», избавление от «мусора» в коде, его структуризация — всё это упростило жизнь разработчикам и позволило дизайнерам лучше отслеживать реализацию. В этом случае полезно пересмотреть дизайн-процесс, приняв во внимание новые возможности.

• Единый источник правды Используйте общий инструмент, например Figma или Storybook, чтобы все работали с актуальной версией дизайн-системы.
• Совместные ревью Регулярные синки для обсуждения новых компонентов и фич помогут устранить недопонимания на раннем этапе. В больших корпорациях этот процесс обычно стандартизирован и проходит раз в неделю под названием Demo, где команды дизайна и разработки делятся новостями и результатами работы.

Что получает бизнес? При соблюдении всех этих условий — повышение перформанса (эффективности) команды разработки.

3. Консистентность в коммуникации с пользователем

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

Рассмотрим ключевые аспекты консистентности в коммуникации:

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

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

Этот пункт особенно важен для таких сложных продуктов, как Fintech и Crypto.

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

Точка 5. Продукт эстетичен и соответствует современным трендам

Что делает продукт эстетичным и современным? Как понять, что дизайн «зашёл»?

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

Оценка продукта всегда строится на двух ощущениях:

— внешнее — визуальное восприятие (эстетика);
 — внутреннее — содержание (функциональность и технологии).

Разберёмся с каждым из них.

Эстетичность — внешнее

Эстетика — это баланс между визуалом и ожиданиями аудитории. Восприятие происходит бессознательно, на основе предыдущего опыта и среды. Работает оно примерно так:

Оценка происходит быстро — до 10 секунд. По данным Канемана, у нас есть два режима обработки информации:

— Система 1 — автоматическая, мгновенная, основанная на опыте;
 — Система 2 — медленная, осознанная, требует усилий.

В оценке дизайна решение принимает Система 1. Она мгновенно сканирует интерфейс и ищет знакомое:

— Я уже видел что-то подобное?
 — Это уместно в этом контексте?
 — Я понимаю, как взаимодействовать?

Если ответы «да» — мозг ставит отметку «красиво» и «понятно».

Эдмунд Берк: «Красота — это обещанное счастье»

Как дизайнер может на это повлиять

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

Работают три базовых принципа:

— Структура: визуальная иерархия, баланс, контраст;
 — Смыслы: лаконичность, грамотный UX-текст, понятная типографика;
 — Узнаваемость: системность, консистентность, предсказуемость.

Качать скилл в базовых принципах можно через анализ и в дизайн-игры, например: Can’t Unsee — игра на внимательность и насмотренность, тестирует базовые понятия иерархии, контраста, выравнивания, типографики и стилей.

Как среда влияет на дизайн

Продукт существует в конкурентной среде. Чтобы не выбиваться из контекста, визуальный стиль должен соответствовать (а лучше — превосходить) ожидания аудитории.

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

Что помогает отследить тренды:

• Платформы: Behance, Dribbble, Awwards, CSS Design Awards, Creative Boom
• Книги — например, «Исследование трендов» Мартина Реймонда
• Google Trends — для анализа локальных и глобальных сдвигов

Современность — внутреннее содержание

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

Новые технологии усиливают продукт: повышают конкурентоспособность и помогают быстрее адаптироваться к изменениям.

Рассмотрим примеры:

• Duolingo в 2023 году внедрил AI для адаптации уроков — удержание выросло на 30 %.
• Revolut использует AI для отслеживания мошенничества — это повысило доверие клиентов.

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

Вот самые популярные:

• Design Thinking: позволяет глубже понять проблемы аудитории и найти творческие решения.
• Jobs to Be Done (JTBD): фокусируется на задачах, которые пользователь пытается выполнить.
• Object-Oriented UX (OOUX): структурирует дизайн вокруг объектов, которые пользователь видит и использует.
• PURE (Pragmatic Usability Rating by Experts): система оценки удобства использования.
• UX-подход и командные связки: тесное сотрудничество дизайнеров, исследователей и UX-райтеров улучшает качество продукта. Согласно данным NNGroup, чёткие и лаконичные тексты могут повысить конверсию продукта на 17 %.

Примеры использования:

• IDEO применяет Design Thinking, создавая инновационные решения для Apple и Ford.
• Airbnb постоянно исследует пользователей — это помогает держать высокий уровень сервиса и лояльности.

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

Точка 6. Продукт закрывает принципы доступности

С какими проблемами сталкиваются пользователи в цифровой среде? Как сделать дизайн доступным?

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

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

• В Европе и США действуют законы и стандарты, которые обязывают компании и госорганы соблюдать требования цифровой доступности.
• В России тоже есть подобные нормы: федеральные законы № 8 и № 419, ГОСТы для цифровых сервисов и рекомендации Центробанка.

С какими трудностями сталкиваются пользователи

Даже временное ограничение может усложнить работу с интерфейсом. Вот три основные проблемы:

• Недоступность информации: пользователь может не видеть изображение или текст из-за особенностей здоровья или низкой контрастности.
• Неудобное управление: кто-то не пользуется мышью или не может держать устройство двумя руками.
• Непонятный интерфейс: запутанные формы или условия сбивают с толку.

Принципы цифровой доступности

Доступный интерфейс удобен не только людям с ограничениями, но и всем остальным. Международные стандарты, например WCAG, делят доступность на три уровня: A (базовый), AA (оптимальный), AAA (расширенный). В работе дизайнеру стоит опираться на четыре принципа:

1. Воспринимаемость — контент можно увидеть, услышать или почувствовать.
2. Управляемость — интерфейс работает с разными способами управления: клавиатура, голос, джойстик.
3. Понятность — всё ясно и просто.
4. Устойчивость — интерфейс остаётся доступным на разных устройствах и версиях продукта.

Вот базовые практики, которые стоит применять для закрытия уровня AA:

• Проверяйте контраст Есть стандарты: 4.5:1 для обычного текста и 3:1 для крупного. Подбирая цвета, шрифты и кегль, проверяйте сочетания на контраст. Инструменты: Contrast, Color Contrast Checker, Use Contrast, Delta-E Calculator
• Делайте адаптивный дизайн Масштаб до 200 % должен сохранять удобство. Это важно для пользователей с нарушением зрения и тех, кто работает с разными платформами.
• Добавляйте альтернативные действия в ключевые сценарии Например, возможность написать вместо звонка или расшифровать голосовое сообщение.
• Комбинируйте способы передачи информации Для важных элементов используйте пиктограмму, подпись и цвет — так сообщение не будет пропущено.
• Не ограничивайте по времени и показывайте шаги Особенно в сложных сценариях. Это помогает людям с ментальными особенностями и тем, кто спешит.
• Работайте с кодом Добавляйте alt-teg для изображений, label для кнопок, размечайте типы контента: текст, кнопка, заголовок, видео. Это облегчает работу со скринридером.
• Обозначайте состояния очевидно Компоненты должны иметь фокус-состояние — это поддерживает альтернативное управление.
• Делайте удобные зоны нажатия Минимум — 44 пикселя. Это важно для пользователей на любых устройствах.
• Пишите просто Используйте понятный язык для подсказок и текстов.

Эти приёмы делают продукт удобным для всех. А регулярная проверка и тестирование позволяют вовремя находить и устранять проблемы.

Как проверить дизайн на доступность

Проверьте интерфейс с помощью инструментов и реальных пользователей:

1. Онлайн-сервисы и плагины:

• Accessibility Insights for Web — автоматическая проверка в браузере.
• Расширение aXe — показывает ошибки в панели разработчика.
• Contrast Checker — для проверки цветовой контрастности.

2. Тест со скринридером: Прослушайте интерфейс, чтобы понять, насколько логично построен контент.

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

Точка 7. Продукт вызывает эмоции

Как сделать продукт запоминающимся? Какой дизайн вызывает отклик?

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

Эмоциональный дизайн — это опыт, который влияет на чувства. Он помогает выделиться среди конкурентов и создать устойчивую связь с пользователем. Интерфейс становится опытом, а опыт — точкой привязанности. Дьявол — в деталях.

Когда уместен эмоциональный дизайн?

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

Без основы в виде надёжности и удобства (уровни Reliable и Usable) никакой образ не спасёт. Эмоции не заменят функциональность — они её усиливают.

3 уровня эмоционального восприятия

1. Интуитивный уровень — первое впечатление. Здесь работает эстетика и визуал. Мы обсуждали его в пункте про эстетичность.
2. Поведенческий уровень — процесс взаимодействия. Если интерфейс логичен и понятен, пользователь получает удовольствие. Об этом шла речь в части о когнитивной нагрузке.
3. Рефлексивный уровень — главное сообщение. Что стоит за продуктом? Как пользователь себя чувствует после взаимодействия? Возникнет ли желание остаться или вернуться? На этом уровне мы и ищем точки эмоционального контакта.

Инструменты эмоционального дизайна

Основные инструменты дизайнера в эмоциональном контакте — это:

• Эстетика и цвет: Визуал вызывает доверие. Цвета, палитры, композиция — всё влияет на восприятие.
• Текст: Слова формируют эмоции. Важны акценты, типографика и ритм.
• Микровзаимодействия: Анимации, звуки, вибрации добавляют отклик.
• Эмпатия: Сторителлинг, метафоры, фото с людьми, иллюстрации — всё, что оживляет продукт.
• Бренд : Визуальный стиль поддерживает единое ощущение и отражает желания пользователя.

Приёмы, усиливающие эффект

Инструменты дизайна можно усилить с помощью приёмов, которые проявляют заботу и внимание к пользователю. Такие детали делают продукт человечным и запоминающимся.

• Персонализация
  Продукт подстраивается под привычки пользователя: показывает актуальное, подсказывает нужное, предлагает вовремя.

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

• Ситуативные взаимодействия
  Напоминания и реакции на контекст создают ощущение участия.

Пример: Яндекс Такси спрашивает, всё ли в порядке, если было резкое торможение. Салоны красоты напоминают о стрижке раз в несколько месяцев — особенно для мужской аудитории, где это часто забывается. Wolt предлагает сыграть в игру на скорость, пока заказ доставляют.

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

Пример: Додо Пицца отправляет забавные пуш-уведомления, которые вызывают улыбку.

• Юмор
  Один из самых простых и действенных способов вызвать эмоцию. Он работает особенно хорошо в неожиданных, но уместных моментах.

Где применять эмоции в продукте?

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

1. Первое впечатление: Важно сразу удивить — вау-эффект формирует отношение с первых секунд.

2. Регулярное использование: Здесь важны комфорт и радость от взаимодействия.

Пример: Raiffeisen Bank показывает тематическую анимацию при совершении платежа, делая обычный перевод особенным.

3. Повторные возвращения: Пользователь ждёт персонального отношения.

Пример: Netflix подбирает рекомендации под вкусы конкретного пользователя.

Как находить эмоциональные точки контакта?

Чтобы усиливать эмоциональную связь, нужно понимать, где пользователь испытывает эмоции. В этом помогут три подхода:

1. Путь пользователя: Найдите моменты успеха, ожидания или сложности — это естественные точки, где можно усилить эмоцию.

Пример: Delivery Club добавил анимацию курьера, чтобы ожидание стало приятным.

2. Обратная связь: Интервью и наблюдения показывают, где пользователь чувствует себя потерянным или раздражённым. Там стоит добавить поддержки и заботы.

3. Аналитика: Поведенческие данные подскажут, где пользователи задерживаются или уходят. Это сигналы — туда можно встроить элементы, которые вовлекут.

Пример: Headspace увидел, что медитации часто бросают на середине, и добавил ободряющие напоминания.

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

Что же в итоге?

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

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

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

Бонус для тех, кто дошёл до конца — дизайн-чек-лист для проектирования продукта

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

Этот список подойдёт как для разработки проекта под заказ, если вы независимый дизайнер, так и для дизайнеров в компаниях и стартапах — на этапе разработки или передачи фич в разработку.

Сохранить «Дизайн-чек-лист» в Figma

Ссылки на источники:

1. Lindgaard, G., Fernandes, G., Dudek, C., & Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression!. Behaviour & Information Technology, 25(2), 115–126. https://www.academia.edu/105192099/Attention_web_designers_You_have_50_milliseconds_to_make_a_good_first_impression_
2. J. Nielsen. How Long Do Users Stay on Web Pages?. Nielsen Norman Group, 2011. https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/.
3. Nunes, J. C., & Drèze, X. (2006). «The Endowed Progress Effect: How Artificial Advancement Increases Effort». Journal of Consumer Research, 32(4), 504–512. https://academic.oup.com/jcr/article-abstract/32/4/504/1787425?redirectedFrom=fulltext.
4. German, T. P., and Defeyter, M. (2000). Immunity to Functional Fixedness in Young Children. Psychonomic Bulletin & Review, 7(4), 707–712. https://link.springer.com/article/10.3758/BF03213010
5. Цитата из фильма Дмитрия Дьяченко «О чём говорят мужчины», 2010г. https://www.kinopoisk.ru/film/468102/?utm_referrer=www.google.com

7 опорных точек в оценке продукта: взгляд со стороны бизнеса, пользователя и дизайна was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Улучшаем дизайн боковой панели

Дизайнерам стоит перестать использовать многоуровневое боковое меню. Группировка большого количества пунктов и подпунктов в небольшом пространстве создаёт визуальный беспорядок. В результате пользователям трудно искать пункты меню.

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

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

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

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

Второй уровень навигации необходимо разместить в верхней части, под заголовком главной страницы. Используйте вкладки для представления каждого подпункта. Когда пользователи будут нажимать на вкладку подпункта, она будет выделяться подчёркиванием, чтобы пользователи понимали, где они находятся. Линейный разделитель выделит строку со вкладками и отделит её от контента.

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

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

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

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

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

Перевод статьи A Better Approach to Multi-Level Sidebar Navigation из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Лучший подход к проектированию многоуровневого бокового меню was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Дизайн, который ускоряет поиск

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

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

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

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

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

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

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

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

Перевод статьи How to Handle Large-Scale Item Groups in a Sidebar из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Как работать с большими группами элементов, расположенными на боковой панели was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Структура раскрывающейся боковой панели

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

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

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

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

Иконки

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

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

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

Проведите красную линию сквозь иконки. Это поможет определить, совпадают ли их центры. Если да, значит, иконки правильно выровнены и симметричны.

Стрелка сворачивания

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

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

Всплывающие подсказки

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

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

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

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

Перевод статьи How to Design a Sidebar That Saves Screen Space из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Как спроектировать боковую панель, которая сэкономит место на экране was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Эти рекомендации в том или ином виде есть почти в каждой книжке по типографике. Моя же скромная заслуга состоит в том, что я собрал их в таблицу — кажется, впервые. Во всех предыдущих руководствах 20 и 21 веков они набирались сплошным текстом, что очень неудобно.

Надо бы сделать из этого плакат, а пока длинный скриншот:

Идет набор на поток 3 августа — 13 сентября, присоединяйтесь: igorshtang.ru/course/verstka

Разбивка на строки и нежелательные переносы was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

Например, список элементов на примере выше можно разделить на три группы. У вас есть «Рабочее пространство» (“Workspace”) с основными элементами для выполнения рабочих задач. Внутри группы «Сообщества» (“Social”) находятся элементы, связанные со взаимодействием с другими людьми. И наконец, группа «Аналитика» (“Analytics”) включает элементы, которые содержат количественные данные.

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

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

Эффект последовательного расположения

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

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

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

Например, в первой группе пункты «Продукты» и «Сделки» пользователи выбирают чаще всего. Если бы они находились в середине списка, людям пришлось бы усердно сканировать меню, чтобы их найти. Вместо этого они могут сразу смотреть на верхнюю и нижнюю части списка, не просматривая середину.

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

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

Перевод статьи How to Group Your Sidebar Items for Better Findability из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Как группировать элементы на боковой панели, чтобы облегчить их поиск was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

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

Однако зачастую эта важная информация находится на разных страницах. Это вынуждает пользователей запоминать её или открывать несколько окон или вкладок. Именно здесь на помощь приходит сравнительная таблица.

Содержание:

Определение

Когда нужна сравнительная таблица

Когда сравнительная таблица не нужна

Типы сравнительных таблиц

Статические сравнительные таблицы

Динамические сравнительные таблицы

Лучшие практики применения сравнительных таблиц

Золотое правило сравнительных таблиц

Определение

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

Базовая сравнительная таблица в самом распространённом виде: каждый товар находится в отдельном столбце, а для каждой характеристики товара выделена отдельная строка

Когда нужна сравнительная таблица

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

• Услуг
• Уровней членства
• Тарифных пакетов
• Функций в приложениях
• Стоимости обучения
• Локаций

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

Правила принятия решений: компенсаторные и некомпенсаторные

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

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

Когда людям приходится выбирать из небольшого набора альтернатив — обычно не более 5–7, они, как правило, принимают компенсаторные решения. То есть они рассматривают индивидуальные преимущества каждого товара и сравнивают их плюсы и минусы по ряду критериев.

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

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

Когда сравнительная таблица не нужна

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

• Не взаимоисключающие
• Простые
• Дешёвые или заменяемые
• Уникальные или их трудно сравнить

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

Не взаимоисключающие

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

❌ amazon.com: Сравнительная таблица для похожих платьев не нужна

✅ amazon.com: Вместо сравнительной таблицы на странице товара с платьем Amazon предлагал быстрый способ добавить к заказу похожее платье

Простые товары

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

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

Дешёвые или заменяемые товары

Если товар или услуга дешёвые или их легко заменить, пользователи, скорее всего, будут рады не тратить много времени на анализ альтернатив. Например, нет смысла сравнивать разные рулоны бумажных полотенец.

❌ jetpens.com: Не имеет смысла сравнивать так много характеристик такого простого и недорогого предмета, как пластиковая ручка

Уникальные товары, которые трудно сравнить

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

Типы сравнительных таблиц

Существует два типа сравнительных таблиц:

• Статические сравнительные таблицы включают заранее выбранные товары и лучше всего подходят для небольших подборок товаров — менее 5.
• Динамические сравнительные таблицы позволяют пользователям самим решать, какие товары они хотят сравнить. Они лучше всего подходят для больших подборок товаров.

Статические сравнительные таблицы

Если есть несколько товаров, которые нужно сравнить, вы можете создавать статические сравнительные таблицы.

Например, в последнем релизе Apple представлены только три модели Apple Watch. Поэтому пользователям, которые пытаются определиться с выбором, Apple предлагает готовую сравнительную таблицу.

✅ apple.com: Поскольку в продаже есть только три модели последних Apple Watch, все три Apple представила в виде сравнительной таблицы

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

При такой реализации сравнительной таблицы можно контролировать отображение информации на странице.

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

✅ apple.com: Убедитесь, что пользователи могут легко найти статическую сравнительную таблицу. Для этого включите ссылку на неё в информационную архитектуру в качестве пункта меню. Apple включила ссылку на статическую сравнительную таблицу во вторичное навигационное меню Apple Watch, рядом со ссылками на различные модели Apple Watch

Динамические сравнительные таблицы

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

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

compare-_-tesla.mp4

✅ tesla.com: На сайте Tesla с помощью динамической таблицы пользователи могли сравнивать различные модели Tesla

Выбор элементов в динамической сравнительной таблице

Есть два популярных способа дать пользователям возможность выбрать, какие элементы добавить в таблицу. Они включают: кнопки «Сравнить» или чекбоксы, а также прямое управление интересующими элементами.

Кнопки «Сравнить» или чекбоксы

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

Чекбоксы (слева, homedepot.com) и кнопки (справа, lowes.com) — два наиболее распространённых способа, которые позволяют пользователям отбирать товары для интерактивной сравнительной таблицы

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

Прямое управление товарами

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

❌ garmin.com: Несмотря на то, что серая прозрачная кнопка сливается с интерфейсом и её не так просто обнаружить, этот пример Garmin не так уж плох. В верхней части каталога находится кнопка «Сравнить». После её активации, нажатие на карточку с товаром позволяет добавить его в сравнительную таблицу и препятствует переходу на страницу с подробной информацией о нём.

Одно из преимуществ такого подхода к выбору — возможность отделить сравнительную страницу от страницы каталога и сделать её визуально чище.

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

Лучшие практики применения сравнительных таблиц

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

Используйте сравнительные таблицы для сравнения не более 5 товаров

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

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

В случае динамических сравнительных таблиц подумайте, будет ли макет изящно масштабироваться до 5 элементов, если у пользователей будет возможность выбирать, какими будут эти 5 элементов. Большинство динамических сравнительных таблиц допускают сравнение только 3–4 элементов. Подумайте, какой объём текста нужно будет включить в описание характеристик, и как это отразится на макете и удобстве восприятия.

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

❌ Динамическая таблица Apple для компьютеров Mac неоправданно ограничивала пользователей в сравнении двух товаров даже при очень больших размерах экрана. Разрешение монитора в примере выше составляет 3008 × 1692

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

Будьте консистентны

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

❌ bestbuy.com: В этой сравнительной таблице представлены характеристики двух разных камер, которые продаёт Best Buy. Характеристик камеры Sony Alpha 7 намного больше. Поддерживать характеристики в актуальном состоянии бывает непросто, особенно когда компании продают множество товаров от разных производителей. Однако если информация обо всех сравниваемых товарах неполная, то её можно вообще не включать в сравнительную таблицу.

❌ smugmug.com: В этой сравнительной таблице подробно описаны возможности четырёх уровней членства в SmugMug. Причём в каждом столбце указано разное значение для характеристики «Реклама и спам»: Zip, Zero, Zilch и Nada. Значения в сравнительных таблицах — не лучшее место для демонстрации индивидуальности сайта. Лучше оставить эти значения эквивалентными и не отвлекать пользователей, пока они ищут различия

Поддерживайте удобство сканирования

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

Придерживайтесь стандартного макета таблицы: предложения располагайте в столбцах, их характеристики — в строках. Названия строк размещайте слева, а названия столбцов — сверху. Консистентно выравнивайте текст в каждом столбце.

❌ williams-sonoma.com: Дизайнеры сайта Williams Sonoma проделали хорошую работу по классификации кастрюль в этой статичной сравнительной таблице. К сожалению, горизонтальные заголовки строк выглядят нестандартно и мешают сканированию. Узкие абзацы в разделе «ОТЛИЧИТЕЛЬНЫЕ ОСОБЕННОСТИ» (DISTINGUISHING FEATURES) неудобны для сканирования и чтения

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

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

✅ В столбцах таблицы FitBit.com галочки окрашены в другой цвет. Это помогает пользователям чётко различать характеристики каждого товара. Такой подход к цветовому кодированию не очень хорошо работает для более сложных значений характеристик, которые невозможно отобразить в виде галочек

✅ На сайте techsmith.com столбцы окрашены в разные цвета, чтобы показать различные возможности программных продуктов, а также платформы, на которых они могут использоваться

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

Закреплённые заголовки столбцов

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

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

Значимые характеристики

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

Старайтесь как можно чаще давать определение незнакомым терминам в контексте и связывать расплывчатые характеристики с чем-то конкретным.

Например, в сравнительной таблице Anker есть характеристики, полезные в контексте сравнения портативных зарядных устройств: ёмкость аккумулятора в mAh, скорость зарядки и вес. Что действительно делает эту сравнительную таблицу хорошей, так это тот факт, что она переводит эти характеристики на понятный для пользователя язык. Ёмкость аккумулятора составляет 3350 мАч, что примерно равно 1,2 заряда iPhone 6. Размер 3,5 x 0,9 x 0,9 дюйма, по размеру сопоставим с тюбиком губной помады. Вес — 2,7 унции, что сопоставимо с весом яйца. Среднестатистическому потребителю трудно представить себе, что такое 2,7 унции, но он наверняка может представить себе вес яйца.

✅ amazon.com: В сравнительной таблице товаров производителя технические характеристики переведены на язык, понятный среднестатистическому потребителю

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

✅ dropbox.com: Всплывающая подсказка, которая появляется при наведении курсора, поясняет значение характеристик и не добавляет на страницу лишний текст

Предоставьте пользователям контроль

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

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

В качестве альтернативы, позвольте пользователям скрывать строки, в которых все товары похожи, и показывайте только различия.

✅ bestbuy.com: В этой сравнительной таблице, выбрав переключатель «Показать различия» (Highlight Differences), пользователи могут легко увидеть различия между товарами, строки которых выделены жёлтым цветом

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

✅ smugmug.com: для быстрого просмотра на сайте SmugMug представлена упрощенная сравнительная таблица с тремя вариантами тарифных планов

smugmug.com: Гораздо более полная сравнительная таблица доступна на другой странице

Упростите сравнение в мобильных интерфейсах

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

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

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

Золотое правило сравнительных таблиц

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

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

Перевод статьи Why You Should Never Split Text Field Inputs из блога nngroup

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Сравнительные таблицы для товаров, услуг и характеристик was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Оптимальные интервалы между пунктами меню

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

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

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

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

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

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

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

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

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

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

Перевод статьи How to Make Any Sidebar Menu Easier to Scan из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Как сделать боковое меню удобным для восприятия was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Полностраничные и компактные окна

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

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

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

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

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

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

Компонент “Slideover”

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

В большинстве приложений обзор данных на странице начинается с отображения дашборда в виде таблицы или карточек. Когда пользователи нажимают кнопку «Просмотреть детали» (“View Details”), с правой стороны страницы выезжает окно.

Страница обзора

Как ускорить просмотр данных

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

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

Окно, выезжающее в режиме slideover, без оверлея

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

Окно, выезжающее в режиме slideover, с оверлеем

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

Поэтому в окне, выезжающем в режиме slideover, рядом с кнопкой «X» должны быть стрелки пагинации. При нажатии на стрелку «вперёд» следует отображать следующий элемент по порядку, а при нажатии на стрелку «назад» пользователь будет возвращаться к предыдущему. Эти кнопки позволят людям последовательно просматривать детали, не закрывая каждый раз окно, выезжающее в режиме slideover.

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

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

Будущее за окнами, выезжающими в режиме slideover

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

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

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

Перевод статьи Why Users View Details Better with Compact Slideovers из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Почему пользователи лучше воспринимают детали через компактные окна, выезжающие в режиме slideover was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

Улучшенный UX на целевой странице

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

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

1. Блок «Первый экран»
2. Блоки «Характеристики»
3. Блок «Призыв к действию»

Блок «Первый экран»

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

• Логотип
• Заголовок
• Описание
• Призыв к действию
• Изображение

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

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

Выравнивание по левому краю VS по центру

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

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

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

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

Блоки «Характеристики»

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

Выравнивание по центру VS по левому краю

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

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

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

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

3 VS 2 колонки

Вы также можете использовать трёхколоночный макет. В таком макете акцент делается на трёх ключевых характеристиках. Иконки хорошо выделяются на фоне. Ниже вы также можете добавить изображение.

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

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

Блок «Призыв к действию»

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

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

Анатомия лендинга

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

Перевод статьи How to Design the Best Layout for a Landing Page из блога UX Movement Newsletter

В нашем Телеграм-канале UX Teddy публикуем так же переводы практических статей из блога UX Movement про проектирование сложных интерфейсов, форм и страниц — подписывайтесь!

Как сделать идеальный дизайн лендинга was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.