UX/UI-дизайн цифровых продуктов
Все объяснения, задачи и лабораторная в одном месте.
Можно сохранить страницу в PDF через печать браузера. Для печати разборы ответов раскрываются автоматически.
1. Проблема, аудитория и research plan
Объяснение
Дизайн начинается с задачи человека и условий её выполнения. Research question должен влиять на решение. Предположения команды отделяют от наблюдений пользователей.
Задача для самостоятельного решения
Как исследовать низкое завершение регистрации?
Показать разбор ответа
Определить этап потери, наблюдать прохождение и выяснить препятствие. Вопрос «нравится ли форма» не объясняет, почему задача не завершается.
2. Интервью, наблюдение и synthesis
Объяснение
Интервью о прошлом поведении надёжнее обещания будущего. Наводящий вопрос подсказывает желаемый ответ. Synthesis группирует наблюдения с сохранением доказательств и различий между участниками.
Задача для самостоятельного решения
Чем заменить «вам была бы удобна наша новая функция»?
Показать разбор ответа
Попросить описать последний случай решения задачи, действия, трудности и обходные пути. Конкретный опыт даёт проверяемые факты.
3. User flow и information architecture
Объяснение
User flow описывает шаги и развилки, information architecture — организацию содержания. Хорошая структура соответствует задачам пользователя, а не внутренним отделам компании.
Задача для самостоятельного решения
Где разместить настройки темы?
Показать разбор ответа
В предсказуемых пользовательских настройках с доступом из общей навигации. Проверить, что человек находит их без знания архитектуры приложения.
4. Wireframes и interactive prototype
Объяснение
Wireframe проверяет структуру, prototype — поведение переходов. Детальность выбирают по исследовательскому вопросу. Красивый статичный экран не проверяет сценарий ошибки или возврата назад.
Задача для самостоятельного решения
Какие состояния нужны прототипу оплаты?
Показать разбор ответа
Ввод, обработка, успех, отказ, повтор и восстановление. Только счастливый путь скрывает важную часть опыта.
5. Visual hierarchy и design tokens
Объяснение
Иерархия создаётся размером, контрастом, расстоянием и группировкой. Design tokens задают смысл цветов и отступов. Один и тот же статус должен иметь согласованное представление в разных темах.
Задача для самостоятельного решения
Почему нельзя использовать один синий для любого элемента?
Показать разбор ответа
Действие, ссылка, фон и информация имеют разные роли и требования контраста. Семантические токены позволяют менять акцент, сохраняя читаемость.
6. Usability test, accessibility и handoff
Объяснение
Usability test измеряет выполнение задачи и причины затруднений. Модератор не должен объяснять интерфейс до попытки. Handoff включает состояния и правила, а не только изображение экрана.
Задача для самостоятельного решения
Как проверить оглавление курса?
Показать разбор ответа
Дать задачу найти конкретный урок и продолжить обучение, наблюдать путь и ошибки. Успех после подсказки модератора фиксируется отдельно.
Лабораторная работа
Подготовка
Бумага или инструмент прототипирования; готовый продукт не нужен.
Учебный пример
Задача: найти урок и продолжить обучение.
Сценарий: каталог -> поиск -> курс -> текущий урок -> следующая практика.
Ошибка: запрос ничего не нашёл.
Восстановление: изменить запрос или сбросить фильтр.
Проверка: пользователь выполняет сценарий без подсказки.Как работает пример и что ожидать
Сценарий связывает несколько экранов и включает отрицательную ветвь. Прототип должен показывать, где находится прогресс и что произойдёт после действия. Красивый каталог без понятного продолжения обучения не выполняет эту задачу.
Итоговая работа
Проведите интервью о последнем опыте обучения, создайте flow, wireframe и интерактивный прототип. Проверьте клавиатуру и крупный текст. Запишите затруднения тестовых участников и обоснуйте каждое изменение наблюдением.
Проверка результата
1. Опишите исходные данные и условия запуска, чтобы другой человек мог повторить работу.
2. Приложите результат обычного сценария и сравните его с ожидаемым.
3. Проверьте неверный вход, граничный случай и отказ зависимости, если она есть.
4. Объясните выбранное решение и известное ограничение.
5. Сохраните исправления после самопроверки вместе с примером, который раньше не работал.
Как оценить работу
По каждому пункту поставьте 0 (не выполнено), 1 (выполнено с пробелами) или 2 (результат воспроизводим и объяснён). Если обязательный сценарий не работает, вернитесь к нему независимо от общей суммы. Это рубрика самопроверки: сайт не исполняет присланный код и не выдаёт автоматическую оценку проекта.