UX-кейс для портфолио: как показать решения и результат

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

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

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

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

Рекомендации Nielsen Norman Group по UX-портфолио предлагают показывать проблему, свой вклад и логику работы наряду с визуальным результатом. Подбирайте материалы так, чтобы все эти стороны проекта было легко увидеть.

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

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

Сразу объясните суть работы

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

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

Затем кратко обозначьте рамки: мобильная веб-версия, существующий каталог, одна книга за раз. Если вы работали в команде, точно назовите свой вклад. «Я спроектировал экраны выбора филиала, а исследователь подготовил интервью» сообщает больше, чем «Мы следовали процессу, ориентированному на пользователя». Срок проекта стоит указывать, если он помогает понять условия работы.

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

Отберите материалы, объясняющие изменение дизайна

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

Имеющийся материал	Что читатель должен из него понять
Ранний каркас бронирования	В какой момент отсутствует информация о филиале и выбор становится неясным.
Два переработанных макета	Почему выбор филиала до входа оказался предпочтительнее и что он добавляет на экран.
Последовательность экранов прототипа	Остаются ли выбранная книга и филиал понятными при входе и подтверждении заказа.
Заметки обсуждения или тестирования	Какое конкретное наблюдение привело к изменению и в каких условиях оно получено.

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

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

Подробно разберите один компромисс

Рассмотрим два варианта библиотечного сценария. Вариант А сохраняет страницу книги короткой и предлагает войти до выбора филиала. Вариант Б показывает компактный выбор филиала на странице книги и переносит это значение на этап входа.

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

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

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

Дайте каждому изображению конкретную задачу

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

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

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

Описывайте результат, который подтверждается данными

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

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

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

Сделайте кейс удобным для просмотра и обсуждения

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

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

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