UX/UI-дизайн: что это и как оценить работу дизайнера

UX помогает выполнить задачу, UI делает её понятной на экране

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

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

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

Что дизайнеру нужно узнать до макетов

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

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

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

Структура строится вокруг вопросов клиента

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

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

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

Прототип дешевле исправлять до оформления

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

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

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

Читаемость важнее декоративной сложности

Оформление помогает различать главное и второстепенное. Заголовки, интервалы и контраст дают человеку ориентиры раньше, чем он прочитает весь текст, поэтому спор о красоте полезно переводить в вопрос: видно ли важное условие и можно ли различить действие среди остальных элементов. Слишком светлая подпись может выглядеть изящно в презентации, но потеряться на телефоне. Для обычного текста уровень AA в WCAG предусматривает контраст не менее 4,5:1.

Для крупного текста тот же критерий допускает 3:1. Здесь стандарт служит проверяемым ориентиром доступности, а обещать соответствие всего сайта WCAG по одному измерению нельзя.

Размер области нажатия тоже оценивают отдельно от размера значка. В критерии WCAG 2.5.8 базовый минимум составляет 24 на 24 CSS-пикселя, с перечисленными в документе исключениями. Для основной кнопки обращения я выберу просторную область нажатия: аккуратная маленькая надпись хуже, если по ней трудно попасть пальцем. В макете также нужны видимые состояния фокуса и ошибки, иначе внешний вид не объяснит человеку, что произошло после действия.

Наблюдение помогает отличить гипотезу от причины

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

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

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

Принимать нужно состояния и действия

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

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

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

Короткая формулировка, с которой начнётся работа

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

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

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