Урок 3. Дизайн–процесс и методы UX–дизайнера

Модуль 1. Введение в UX/UI дизайн.
Бесплатный курс по UX/UI дизайну с нуля для новичка

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

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

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

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

Кто такой UX–дизайнер?

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

Какую принципиальную задачу решает UX–дизайнер?

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

Почему UX-дизайнер должен уметь и любить общаться?

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

  • Работа с командой и стейкхолдерами. UX–дизайнер не работает в вакууме: он постоянно контактирует с менеджерами, разработчиками, заказчиками и иногда даже с инвесторами.
  • Сбор информации от пользователей. Большая часть UX-исследований предполагает общение в различных форматах – интервью, опросы и так далее.
  • Защита идей. Чтобы команда поддержала предложенные дизайн-решения, нужно четко объяснять их ценность и полезность, “продавать” свою идею.

Все это делает общение критически важным навыком для успешного UX–дизайнера. Это относится к самым важным софт-скиллам. Если вам трудно общаться, то это может стать проблемой.

Что такое дизайн мышления или дизайн-процесс?

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

Этапы дизайна мышления

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

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

Этапы дизайн-процесса и что такое дизайн-активности?

Рассмотрим все этапы дизайн-процесса и посмотрим, какие активности чаще применяются на каждом этапе.

Дизайн-активности или дизайн-исследования – это комплекс практик, методов, техник и инструментов, которые помогают дизайнеру на разных этапах дизайн-процесса: от глубокого изучения потребностей и поведения пользователей до генерации идей, построения прототипов и их тестирования. Это могут быть как простые техники (скетчинг, зарисовки на бумаге или короткие интервью), так и специализированные цифровые платформы (Figma, Axure и др.). Главное, что все они направлены на более глубокое понимание проблемы и создание действенного решения.

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

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

Этап 1 (Obsereve або Empathize). Наблюдение или сопереживание (эмпатия). Как понять, чем живет пользователь?

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

Исследование предметной области (Domain Research)

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

Когда применяется? Когда дизайнер не понимает предметную область и ему нужно разобраться в деталях. Например, вы разрабатываете веб-приложение для учета собственного инвестиционного портфеля. Необходимо разобраться, какие бывают классы активов, как они взаимодействуют друг с другом, влияют на риски и доходность. Овладеть финансовыми метриками: ROI, IRR, P/E, дивидендная доходность. И это лишь небольшая часть знаний, которые необходимо иметь в этой области. Искать информацию можно как в поисковых системах, так и в финансовых книгах, на форумах, у конкурентов (аналогичные уже имеющиеся продукты) и т.д.

Результат. Глубокое понимание контекста, в котором будет существовать продукт. Позволяет вам общаться со специалистами из этой сферы (заказчики, разработчики, пользователи).

Исследование предметной области

Примеры применения и полученная выгода

  • Разрабатывая приложение для заказа клининговых услуг (уборки), просмотрела отзывы в App Store у конкурентов, где пользователи жаловались на то, что не видят содержимое моющих средств. Теперь в нашем интерфейсе есть детали о каждом средстве и возможность выбрать «эко»-опцию.
  • Когда делала мобильное приложение для бухгалтерского учета, я изучила базовые нормы налогового законодательства и параллельно читала комментарии частных предпринимателей в соцсетях, которые часто терялись между счетами. В итоге мы упростили интерфейс: создали отдельный раздел для налоговых платежей с автоматическими напоминаниями о сроках.

Интервью с пользователями (User Interview)

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

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

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

Интервью с пользователями

Примеры применения и полученная польза

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

Наблюдение (Field Studies)

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

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

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

Полевые наблюдения

Примеры применения и полученная польза

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

Этап 2. Определение проблем (Define). Какие у пользователя задачи и цели?

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

Формулирование проблемы (Problem Statement)

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

Когда применяется? После проведения интервью с пользователями, наблюдений, исследования предмета и анализа всего этого должна сложиться общая картинка. На ее основе проводится эта активность.

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

Формулирование проблемы

Примеры определенных проблем

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

Пользовательские истории (User Stories)

Что это? Краткое описание ценности, которую продукт предоставляет пользователю (в формате «Я как [роль пользователя] хочу [действие], чтобы [польза]»). Лаконичный формат позволяет описывать как общие задачи продукта, так и небольшие функции. Такие истории часто используют не только дизайнеры, но и менеджеры и продуктовые владельцы.

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

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

Пользовательские истории

Примеры пользовательских историй

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

Персони (User Personas)

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

Когда применяется? После сбора достаточного количества данных и когда понятно, что пользователей можно отнести к одной или нескольким категориям, с присущими только им особенностями. И хотя это очень популярный метод, иногда UX-дизайнеры отказываются от использования персон в пользу, например, Jobs to Be Done. Этот подход описывает не пользователей, а конкретные задачи. Вот вам несколько примеров.

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

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

Персони

Примеры персон

  • Денис, 21 год, студент ИТ-факультета
    Мотивации: учиться новым технологиям, повышать уровень навыков для будущей работы
    Потребности: удобные курсы с реальными кейсами, обсуждение задач с менторами
    Боли: несистематизированная информация, отсутствие практического применения теории
  • Марьяна, 56 лет, преподаватель истории
    Мотивации: сделать обучение интересным для учеников, использовать современные методы
    Потребности: платформа со структурированным материалом, возможность добавлять интерактивные задания
    Боли: чрезмерная техническая сложность, неспособность быстро адаптировать контент
  • Макс, 34 года, менеджер по продажам
    Мотивации: увеличить объем сделок, быстро получать свежие данные о клиентах
    Потребности: CRM с простым интерфейсом, быстрый доступ к контактам и истории взаимодействия
    Боли: неструктурированные списки клиентов, дублирование или потеря данных

Мапування шляху користувача (Journey Mapping, Customer Journey Map)

Що це? Схематичне зображення шляху, який проходить користувач під час взаємодії з продуктом, сервісом чи компанією. CJM допомагає зрозуміти досвід користувача, його емоції, потреби та болі на кожному етапі. Головна мета цієї карти — виявити проблеми, що виникають у користувачів, та знайти способи їх вирішення, щоб покращити загальне враження від продукту.

Відображає ключові точки контакту користувача з продуктом у вигляді покрокової таблиці, а також емоційні стани та дії, які користувач здійснює на кожному етапі. Карта може також включати дані про контекст, цілі користувача та бар'єри, які заважають досягненню цих цілей.

Коли застосовується? Коли необхідно побачити, де в ланцюжку взаємодій користувач стикається з бар’єрами або емоційними піками. Це дослідження дозволяє дуже детально пропрацювати, що саме робить людина, коли намагається вирішити свою проблему. Якщо розробляється продукт для декількох персон, наприклад, викладач і студент, то у нас буде декілька шляхів для кожної ролі. У складних випадках може бути декілька подорожей навіть для однієї ролі.

Результат. Перелік “точок дотику” (touchpoints), болю та можливостей для покращень.

Карта путешествия клиента

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

  1. Шаг: Выбор ресторана
    Действие: Пользователь просматривает список ресторанов в приложении.
    Эмоция: Ожидание.
    Боль: Неполная информация о меню.
  2. Шаг: Выбор блюд
    Действие: Пользователь добавляет блюда в корзину.
    Эмоция: Удовлетворение.
    Боль: Отсутствие фотографий блюд.
  3. Шаг: Оплата и подтверждение
    Действие: Пользователь вводит данные карты и ожидает доставку.
    Эмоция: Волнение.
    Боль: Долгое время ожидания.

Этап 3. Генерация идей (Ideate)

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

Как мы можем…? (How Might We)

Что это? Метод постановки креативных вопросов, которые помогают найти инновационные решения для конкретных проблем. Фраза "How might we" создает позитивный настрой и стимулирует генерацию идей, подчеркивая возможность достижения результата. Например, вместо утверждения "Пользователи не могут быстро найти нужную функцию", можно сформулировать вопрос: "Как мы можем сделать доступ к функции быстрым и удобным для пользователей?" Этот метод помогает команде сфокусироваться на поиске вариантов и расширяет рамки мышления.

Когда применяется? После того, как проблему четко определено.

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

Как мы можем?

Примеры HMW-вопросов и полученных идей

  1. Приложение для изучения иностранных языков

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

    Примеры решений:

    • «Квестовые» уроки с уровнями сложности: пользователь зарабатывает баллы или монеты, переходит на более высокие уровни, открывает бонусные задания.
    • Групповые чаты / вызовы с друзьями, где каждый получает задание дня и может сравнивать результаты.
    • Автоматическое определение уровня на основе результатов тестов, чтобы вызовы всегда были «чуть сложнее» текущих навыков.
  2. Сервис доставки сбалансированной еды

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

    Примеры решений:

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

    HMW: Как мы можем помочь пользователям наладить здоровые финансовые привычки, сделав контроль расходов и сбережений простым и даже интересным?

    Примеры решений:

    • Автоматическое распределение расходов по категориям (продукты, транспорт, развлечения) с инфографикой в реальном времени.
    • «Финансовые челленджи»: вызовы на тему «Сэкономить 10% от дохода» или «Тратить меньше на кофе».
    • Советы и подсказки искусственного интеллекта: приложение анализирует паттерны расходов и предлагает полезные привычки (например, оплачивать счета вовремя).

Брейнстормінг (Brainstorming)

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

Когда применяется? В начале этапа генерации идей.

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

Мозговой штурм

Примеры идей, полученных во время мозгового штурма

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

Скетчинг (Sketching)

Что это? Быстрое визуальное фиксирование идей на бумаге или в цифровом виде. В UX-дизайне скетчинг используется для быстрого изображения интерфейсов, структур страниц или ключевых функций продукта. Главная цель — не создать идеальный дизайн, а передать концепцию и обеспечить основу для обсуждения в команде или с клиентами. Скетчинг помогает быстро исследовать различные варианты, снижая затраты времени и ресурсов на сложные макеты. Это простой, но эффективный инструмент для начальных этапов дизайна, который способствует креативности и совместному принятию решений.

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

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

Скетчинг

Этап 4. Прототипирование (Prototype)

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

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

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

Юзер флоу (User Flow)

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

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

Результат. Четкая структура переходов между экранами продукта.

Task flow на папері

Вайрфреймы (Wireframes)

Что это? Макеты экранов, которые показывают расположение основных элементов интерфейса (кнопок, полей формы, расположения изображений и так далее). Существуют Lo-fidelity (низкой детализации) – упрощенные схемы, Hi-fidelity (высокой детализации) – уже похожие на конечный дизайн.

Когда применяется? Lo-fi – в начале, чтобы быстро тестировать идеи; Hi-fi – когда логика уже отшлифована.

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

Task flow на папері

Интерактивные прототипы (Interactive Prototypes)

Что это? Кликабельные макеты, созданные в Figma, Protopie, Axure и т.д., которые имитируют настоящий приложение или сайт. Такой прототип можно запустить на компьютере или смартфоне. Он будет работать как настоящий сайт или приложение. Но на самом деле он очень ограничен в функционале.

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

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

Интерактивный прототип

Этап 5. Тестирование (Test). Проверяем, что работает

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

Партизанское тестирование (Guerilla Testing)

Что это? Быстрый и неформальный метод проверки прототипов или дизайна «на ходу» с случайными людьми (часто в местах большого скопления, как-то кафе, торговые центры и т.д.). Это могут быть как бумажные прототипы, когда вы показываете скетчи на бумаге и спрашиваете, что сделал бы пользователь для решения поставленной задачи, так и интерактивные прототипы в Figma.

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

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

Партизанское тестирование

Юзабіліті тестування (Usability Testing)

Что это? Usability-тестирование (юзабіліті) или проверка эргономичности – это исследование, чтобы проверить, насколько удобно использовать интерфейс для выполнения конкретного задания. Такие тесты выполняются на реальных людях с использованием интерактивных прототипов или на готовых продуктах.

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

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

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

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

Результат. Список проблем и таблица с метриками по эффективности решения задач пользователя. А также рекомендации по улучшению.

Юзабилити тестирование

При необходимости повторить

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

Концепция двойного алмаза

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

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

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

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

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

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

Типичный день UX–дизайнера

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

Домашнее задание

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

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

Чат недоступен для граждан россии.

Будем практиковаться делать пользовательские интервью с первого этапа дизайн-процесса (наблюдение). Для начала нужно выбрать тему проекта, над которым мы будем работать. Это вымышленный продукт, но представьте, что вы будете работать над ним UX–дизайнером. А вот и список, выбирайте что вам больше нравится (или можете придумать собственный продукт):

  • Мобильное приложение для фитнеса. Отслеживание тренировок, планирование питания, мотивационные напоминания.
  • Сервис по доставке готовой еды. Различные рационы, подписки, персонализированные рекомендации.
  • Приложение для планирования бюджета (финансов). Расходы, сбережения, дневники расходов, напоминания о платежах.
  • Приложение для изучения иностранных языков. Ежедневные уроки, геймификация, социальные взаимодействия между пользователями.
  • Онлайн-платформа для поиска репетиторов или курсов. Рейтинг преподавателей, расписание занятий, отзывы, поиск по специализациям.
  • Приложение для заботы о психологическом здоровье. Медитации, советы по снятию стресса, дневник настроения.

Чудово! Теперь вам нужно составить список из 5–8 основных вопросов, которые вы будете задавать потенциальным пользователям. Вот несколько советов, как это правильно сделать:

  • Формулируйте открытые вопросы. Открытый вопрос поощряет респондента рассказать детали, примеры, истории. Например, вместо «Удобно ли вам пользоваться таким сервисом?» спросите: «Расскажите, как вы обычно выполняете это действие?».
  • Фокусируйтесь на прошлом опыте и реальных сценариях. Избегайте вопросов наподобие «А что, если...?». Вместо этого спрашивайте о том, что пользователь уже делал или делает сейчас. Пример: «Вспомните последний раз, когда вы записывались в спортзал. Как это происходило?».
  • Избегайте наводящих вопросов. Например, не стоит спрашивать: «Вы, наверное, любите делать покупки онлайн, правда?». Вместо этого лучше: «Расскажите о своем опыте покупок онлайн. Чем это отличается от офлайн-покупок?».
  • Ставьте уточняющие вопросы. Если пользователь отвечает коротко, обязательно уточните: «Что именно было сложным в этом процессе?», «Почему вы приняли такое решение?»
  • Структурируйте интервью.. Представьтесь, расскажите о себе и цели интервью. Сначала спрашивайте что-то общее («Какие приложения/программы вы чаще всего используете и почему?»). Затем переходите к конкретным сценариям, связанным с вашим продуктом/идеей. В конце поблагодарите за уделенное время и объясните, почему это важно.

Примеры вопросов:

  • Расскажите, как вы сейчас следите за своими финансами/физической формой/питанием?
  • Какие основные трудности возникают в этом процессе?
  • Что побуждает вас продолжать или, наоборот, помешало бы пользоваться приложением?

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

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

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

Выводы

Приветствую! Вы только что преодолели один из самых сложных, но в то же время самых увлекательных уроков курса. Теперь вы представляете, что значит быть UX-дизайнером в реальной жизни — со всеми новыми терминами, вызовами и открытиями. Не забывайте, что без практики любая теория теряет смысл, так что изучайте материал и обязательно выполните домашнее задание. Впереди — еще больше увлекательных тем, прежде чем мы перейдем к Figma. Обещаю, дальше будет еще интереснее!

Подписывайтесь на меня в Instagram @frusia.pro, чтобы не пропустить анонсы новых уроков и получать полезные советы для UX/UI дизайнеров, в частности о создании портфолио и поиске работы. В ленте на вас ждет множество практических постов, которые помогут вам совершенствоваться в дизайне каждый день. Присоединяйтесь и развивайте свою профессиональную мастерство вместе со мной!

Пройти тест

Чтобы урок был засчитан как пройденный, вам нужно правильно ответить на 80% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.

Пройти тест

Оставьте комментарий

Поставьте ползунок в фиолетовую зону

Комментарии

скажена черепашкаUkraine flag підтримує ЗСУ 7 ноября 2023 14:53  
Цікаве завдання. Дякую за таку круту можливість прокачати нові навички і побачити себе з іншого боку.

https://www.figma.com/file/nvSYfkq63m2kn0QDaZHriK/%D0%9D%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-%D1%83-Frusia.Pro?type=design&node-id=0-1&mode=design&t=iFwMGBcfNgKScjtH-0

Коментар frusia.pro:

Залишила коментарі до усіх завдань у фігмі, переглянете. Якщо коротко – добре справились з усіма завданнями, треба лише виправити деякі нюанси.

Валентина18 ноября 2022 22:55  
Дякую за роз'яснення. Побувала на уроках 1,2,3. Працювала по уроку 6. Вийшла на маленькі результати.
Сама собі ставлю запитання, а у Вас отримую відповідь. Це велике задоволення. В уроці 3 сподобалось: прототип,
Figma і прототип, адаптивний дизайн,види графіки.
ВарвараUkraine flag підтримує ЗСУ 15 октября 2022 22:43  
Завдання 1-2
https://www.figma.com/file/NptFdbyeF77wJ79xFR2xUH/1-2-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-3-%D1%83%D1%80%D0%BE%D0%BA?node-id=0%3A1

Завдання 3-4
https://www.figma.com/file/QIwTSpFf9pMvfRDCs0z1Rp/UX%2FUI-Frusia?node-id=0%3A1

Коментар frusia.pro:

Завдання 1-2.Дуже класно, що ви самі дійшли до того, щоб використати FigJam для проектування флоу. Все дуже зрозуміло, молодець.

Завдання 3-4. Вилка. Вайрфрейми також зробили правильно. Переходьте до наступного уроку!

Yuliya LepenkoUkraine flag підтримує ЗСУ 3 сентября 2022 15:13  
https://excalidraw.com/#json=Kxc7EBhd7Nq04Wn5E3VKs,Ft976jzReSZDNXVmZCTF1g

Коментар frusia.pro:

Завдання 1. Відмальовка таскфлоу для двох сценаріїв. Ви обрали інтернет-магазин та правильно відобразили кожен із сценаріїв. Супер!

Завдання 2. Таскфлоу з новою функцією. Тут також все добре та дуже цікава функція.

Завдання 3. Вайрфлоу для перших двох сценаріїв. Все чудово, єдиний момент, що напевно в другому сценарії (другий екран), де результати пошуку зазвичай не демонструють банер категорії, а просто виводять знайдені товари.

Завдання 4. Вайрфлоу для нового сценарію. Все правильно, відповідає вашому таскфлоу. Так тримати!

Окремо хочу похвалити вас за те, що використали дуже зручний та підходящий онлайн-інструмент для створення флоут та вайрфреймів.

Дана Ч.Ukraine flag підтримує ЗСУ 19 августа 2022 21:44  
https://drive.google.com/drive/folders/18jSb5FgUgUYsPHQMJIUBCUV-h-amH8L-?usp=sharing

Коментар frusia.pro:

Те що я змогла зрозуміти зі скрінів, бо надіюсь ви не образитесь, але вони місцями незрозумілі, це те, що ви почали свій флоу із гугла, а потім перейшли на інший сайт. Правильне виконання цього завдання передбачає, що ми розробляємо флоу тільки для одного сайту. Тобто або це мав бути гугл (і при переході на інші сайти, його флоу закінчується), або вже сторонній сайт (з фільмами). Спробуйте перобити завдання, згідно цих умов.

Вікторія Грищенко Ukraine flag підтримує ЗСУ 5 июля 2022 12:35  
Добрий день! Дякую за відповідь, все виправила!)

https://drive.google.com/drive/folders/1PqXad4A9UNY-tcR38-ZKVqWErnXcIe-G

Коментар frusia.pro:

Добрий день!

Тепер все правильно, чудово попрацювали! Сміливо переходьте до наступного уроку

Вікторія ГрищенкоUkraine flag підтримує ЗСУ 4 июля 2022 13:39  
Добрий день!

https://drive.google.com/drive/folders/1PqXad4A9UNY-tcR38-ZKVqWErnXcIe-G

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Створити таскфлоу для двох сценаріїв. Бачу сценарій відправки листа та налаштування двофакторної авторизації. У першому сценарії після входу йде два однакових шляхи для відправки листа, які дублюються. Достатньо від прямокутника «Підтвердження номеру телефону» провести стрілочку до лівого прямокутника «Створення листа». А два прямокутника праворуч забрати. Також, зверніть увагу, що прямокутник «Ввід усіх данних» – не є окремим екраном. Це дія, яка виконується на екрані «Створити обліковий запис». Тому треба прибрати прямокутник «Ввід усіх данних», а під прямокутником «Створити обліковий запис» додати текстове пояснення «Користувач вводить усі данні та клікає "Створити"». Так само треба зробити для решти дій, які ви позначили прямокутниками, адже ними позначаються лише екрани.

Аналогічна ситуація з другим сценарієм. Тобто прямокутниками позначаються тільки окремі сторінки, а те що там робить користувач описується текстовим блоком під прямокутником.

Завдання 2. Створити таскфлоу нової функції. Дуже класна ідея. Тут треба виправити по аналогії з першим завданням. Також, якщо користувач не зареєстрований, то треба додати екран «Логін». По решті все супер!

Завдання 3. Створити вайрфлоу для сценаріїв з першого завдання. Все добре, бачу екрани для сценаріїв першого завдання. Можна ще додати текстові пояснення, що саме робить користувач на кожному екрані.

Завдання 4. Створити вайрфлоу для нової функції. Все супер, молодець!

Чудово попрацювали, але треба допрацювати завдання 1-3. Чекаю на виправлення

Yana UsachovaUkraine flag підтримує ЗСУ 30 июня 2022 11:20  
Добрий день, дякую за зауваження, все виправила
https://www.figma.com/file/7Z0xbW946RwE9dSnzxWM9q/Untitled?node-id=0%3A1

Коментар frusia.pro:

Привіт! Тепер все супер, рухайтесь до наступного уроку

Марія СUkraine flag підтримує ЗСУ 29 июня 2022 23:56  
https://www.figma.com/file/dWGWKQPPPZULkadAnpuvMX/Frusia?node-id=0%3A1

Коментар frusia.pro:

Привіт!

Завдання 1. Створити таскфлоу для двох сценаріїв. Бачу два сценарії: відтворення треку і створення плейлиста. Все добре, але є одне зауваження. Зверніть увагу, що прямокутник «Вибір композиції» – це дія, а не окрема сторінка. Дія виконується на екрані «Улюблені». Тому треба під цим прямокутником додати текстове пояснення «Користувач клікає на композицію», а відповідний прямокутник «Вибір композиції» видалити.

Схожа ситуація з другим сценарієм. Під прямокутником «Списки відтворення» можна додати текстовий блок з описом, що саме має зробити користувач «Користувач клікає на посилання "Новий список відтворення"». Наступна сторінка таскфлоу буде називатись «Новий список відтворення» (як у вайрфлоу) з текстовим поясненням під ним «Користувач вводить назву списку, опис і доступність ».

Тобто прямокутниками позначаються тільки окремі сторінки, а те що там робить користувач описується текстовим блоком під прямокутником.

Завдання 2. Створити таскфлоу нової функції. Тут треба виправити по аналогії з першим завданяям. «Редагувати список» – «Редагування списку». Про додавання обкладинки написати коментар.

Завдання 3. Створити вайрфлоу для сценаріїв з першого завдання. Дуже добре, видно як користувач має взаємодіяти з елементами інтерфейсу. Було б добре ще розділити кожен екран в окремий фрейм, а не все в одному. А також додати текстові пояснення.

Завдання 4. Створити вайрфлоу для нової функції. Все добре, тут ті самі зауваження, що і в попередньому завданні.

В цілому все добре, але вам треба зробити правки

Yana UsachovaUkraine flag підтримує ЗСУ 29 июня 2022 15:19  
Добрий день
https://www.figma.com/file/7Z0xbW946RwE9dSnzxWM9q/Untitled?node-id=0%3A1

Коментар frusia.pro:

Добрий день!

Завдання 1. Створити таскфлоу для двох типових сценаріїв. Бачу навіть три сценарії: логін, реєстрація, відправка листа. Схоже, що ви не в тому місці підписали текстовий блок «так», він має йти після блоку «реєстрація». Адже, якщо користувач зареєстрований, то він вводить логін і пароль.

Завдання 2. Створити таскфлоу для нової функції. Бачу функцію для налаштування нотифікацій про нові листи. Тут аналогічний коментар про текстовий блок «так», як у першому завданні.

Завдання 3-4. Створити вайрфлоу для першого і другого завдання. Все добре, але є важливе зауваження. Прямокутники з перехрестям позначають малюнки й фото, а ви використовуєте їх для позначення кнопок. Також, не треба використовувати заокруглення або інші ефекти у вайрфреймах, це зайве на ранніх етапах.

Чекаю на виправлення 3-4 завдання

Ірина С.Ukraine flag підтримує ЗСУ 15 июня 2022 12:07  
Доброго дня! Надсилаю ДЗ по 3 уроку.

https://www.figma.com/file/pMDcTmxGrUkgCfO9SVfUxv/Homework?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Намалювати таскфлоу для двох сценаріїв. Дуже добре, все вірно! Можу порадити використовувати коротші назви екранів. Декілька прикладів:

  • Вікно можливих результатів на головній сторінці → Результати пошуку;
  • вспливає вікно, що підтверджує оформлення підписки → Підтвердження підписки;
  • відкривається вікно з можливими варіантами сповіщень → Налаштування сповіщень.

Завдання 2. Намалювати таскфлоу для нової функції. Правильно.

Завдання 3. Намалювати вайрфлоу для сценаріїв з першого завдання. Все вірно, молодець! Щоб показати, з якими елементами взаємодіє користувач можна використовувати аннотації, дивіться приклад в коментарях нижче. Але ваш спосіб з тінью теж зрозумілий.

Завдання 4. Намалювати вайрфлоу для нової функції. Цікаве втілення потенційно корисної ідеї. Все правильно.

Ви добре засвоїли матеріал, переходьте до четвертого уроку

Анна СмірноваUkraine flag підтримує ЗСУ 4 июня 2022 11:52  
Доброго дня!
Надсилаю своє ДЗ, зробила усе в одному файлі в фігмі)

https://www.figma.com/file/WZYUghaAiaHMwQ0a1957Md/UI%2FUX-Home-work?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Намалювати таскфлоу для двох сценаріїв. Бачу сценарій закріплення файлу і відправки листа у Gmail. Все добре.

Завдання 2. Намалювати таскфлоу для нової функції. Бачу сценарій для відправки повідомлення групі людей. Також правильно.

Завдання 3. Відмалювати вайрфлоу для сценаріїв першого завдання. Все добре. Можна ще підписати кнопки, з якими йде взаємодія користувача. Наприклад, у вашому випадку Compose, Send.

Завдання 4. Відмалювати вайрфлоу для нової функції з другого завдання. Дуже добре, молодець! Мені все зрозуміло.

Гарно попрацювали, молодець, що одразу в Figma почали! Рухайтесь далі

Юля К.Ukraine flag підтримує ЗСУ 3 июня 2022 15:58  
https://docs.google.com/document/d/1OUykeygDiUWXkY5t4Y-bJsUV-9x04V5fnS4evpoShP8/edit?usp=sharing

Коментар frusia.pro:

Добрий вечір!

Завдання 1. Намалювати таскфлоу для двох сценаріїв. Бачу два сценарії: 1) покупка проїздного 2) складання маршруту. Все правильно.

Завдання 2. Намалювати таскфлоу нової функції. Бачу сценарій для налаштування зовнішнього вигляду дошок, на які підписаний користувач у Pinterest. Теж правильно.

Завдання 3. Намалювати вайрфлоу для сценаріїв з першого завдання. Все добре, бачу екрани для двох сценаріїв.

Завдання 3. Намалювати вайрфлоу для нової функції з другого завдання. Бачу, що налаштування фіда розмістились в окремій вкладці (остання праворуч) налаштувань. Було б ще добре показати, що ж там за налаштування з'являються після кліку на Edit

У вас добре виходить, переходьте до наступного уроку

КатеринаUkraine flag підтримує ЗСУ 19 мая 2022 17:31  
https://www.figma.com/file/r1faw1qKIosOlIaxbw9np0/Untitled?node-id=0%3A1

Добрый вечер!
Внесла правки)

Коментар frusia.pro:

Доброго дня!

Завдання 1. Ви додали пояснення до екранів, все супер.

Завдання 3. Також ви додали екран оформлення замовлення з оплатою, чудово.

Дуже добре, рухайтесь до четвертого уроку

БогданаUkraine flag підтримує ЗСУ 19 мая 2022 07:38  
Вітаю!
Дяка за чудовий урок і цікаве д/з ;)

Завдання 1-2. Скористалась FigmaJam для відмальовки блок-схем.
https://www.figma.com/file/fyKZq6WInoJ3zLK59XjNyS/%D0%94%D0%97-%E2%84%963-Frusya?node-id=2%3A414

Завдання 3-4. Маю надію, що правильно зрозуміла логіку малювання вайрфлоу.
https://www.figma.com/file/R2GcgT9WcgRm1jolF5lBA9/%D0%B4%D0%B7-4-(3-4)?node-id=0%3A1

Мирного дня!

Коментар frusia.pro:

Привіт! Будь ласка

Завдання 1-4. Чудово попрацювали! Все правильно. Декілька рекомендацій до вайрфреймів:

  • Уникайте кольорових фігур і дотримуйтесь чорно-білої гамми;
  • якщо потрібно виділити якийсь елемент, то використовуйте анотації. Просто числом (починаючи з 1) на фоні кольорового кружка відмічайте елемент, про який хочете розказати. Під вайрфреймом ставите такий самий кружок і додаєте пояснення. Ось приклад:Приклад аннотацій до вайрфреймів

Продовжуйте навчання

МаргаритаUkraine flag підтримує ЗСУ 18 мая 2022 19:52  
Доброго вечора! Зробила правки, перевірте, будь ласка.

Завдання 1-2:
https://www.figma.com/file/E37DssBVZ6FWvHSHHBEkhM/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-1%2C-2.?node-id=0%3A1

Завдання 3-4:
https://www.figma.com/file/IIs2yFFB24Y9ozdShQ3xB5/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-3%2C-4.

Коментар frusia.pro:

Привіт!

Завдання 1-4. Дуже добре, тепер все правильно, переходьте до наступного уроку

МаргаритаUkraine flag підтримує ЗСУ 17 мая 2022 20:30  
Доброго вечора! Зробила виправлення у завданнях, дублюю.

Завдання 1-2:
https://www.figma.com/file/E37DssBVZ6FWvHSHHBEkhM/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-1%2C-2.?node-id=0%3A1

Завдання 2-3:
https://www.figma.com/file/IIs2yFFB24Y9ozdShQ3xB5/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-3%2C-4.?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір! Вже набагато краще, але є ще пару моментів.

Завдання 1. Прямокутник «Зареєструватись» відповідає за дію, тому його можна видалити і додати підпис до екрану «Реєстрація» (за бажанням, наприклад: користувач клацає кнопку «Зареєструватись»). Решта правильно.

Завдання 2. Все правильно.

Завдання 3-4. По списку:

  • Зробіть кружки для анотацій одним кольором;
  • додайте у третьому завданні на другому екрані зліва текст для двох анотацій (жовтий і зелений);
  • замініть фіолетовий і червоний кольори у вайрфреймах на чорнобілі;
  • змініть текст анотацій на іншу форму. Було: Слід навести мишку на будь-який товар, тоді з'явиться віконце. Має бути: Коли користувач наводить курсор на товар, з'являється віконце.

Рухаємось у правильному напрямку, чекаю виправлення

МаргаритаUkraine flag підтримує ЗСУ 17 мая 2022 11:08  
Доброго дня! Дублюю завдання.

Завдання 1-2:
https://www.figma.com/file/E37DssBVZ6FWvHSHHBEkhM/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-1%2C-2.?node-id=0%3A1

Завдання 3-4:
https://www.figma.com/file/IIs2yFFB24Y9ozdShQ3xB5/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-3%2C-4.

Коментар frusia.pro:

Добрий день!

Завдання 1. Пам'ятаємо, що у таск флоу прямокутниками позначаються екрани, а дії підписуються текстом біля стрілочок (переходів між екранами) або під прямокутниками. Тому деякі прямокутники треба прибрати, а саме: купити, оформити замовлення, забули пароль, увійти. І додати відповідні текстові пояснення. Також деяким екранам можна дати більш зрозумілу назву: нагадати → відновлення паролю, обраний товар → деталі товару, вхід до кабінету → логін.

Завдання 2. Аналогічно деякі дії треба замінити текстовими поясненнями, а саме: подивитись на моделі. Також назва останнього прямокутника схожа дію, хоча це по суті екран, тому треба перейменувати: протестувати обраний товар → тестування товару на 3d моделі обличчя.

Завдання 3. Все добре, але щоб було ідеально, до екранів краще зробити пояснення через анотації замість ліній. Тобто малюємо кружечок і вписуємо номер в місці вайрфрейму, де потрібне пояснення. Далі такий же кружечок ставимо під вайрфреймом і додаємо текстове пояснення справа. Це дозволить нам прибрати лінії. Виглядати це має приблизно так:

Приклад аннотацій до вайрфреймів

Завдання 4. На останньому екрані напевно не треба кнопки протестувати товар. Адже ми вже його переглядаємо на моделі.

Гарно попрацювали (ще і одразу у Figma), чекаю на виправлення

КатеринаUkraine flag підтримує ЗСУ 14 мая 2022 18:30  
https://www.figma.com/file/r1faw1qKIosOlIaxbw9np0/Untitled?node-id=0%3A1

Доброй ночи
Ответ на третье задание

Коментар frusia.pro:

Добрий день!

Завдання 1. Бачу сценарій реєстрації і авторизації. Є декілька незначиних моментів, які було б добре виправити:

  • Початковим екраном я б зробила головну сторінку, а не привітання. На жаль, ви не вказали повну адресу сайту, можливо там дійсно якийсь екран привітання;
  • екрани введення даних та логін і пароль я б видалила, а замість них доповнила б коментар під екранами авторизації й реєстрації відповідно, тому що по суті ми заповнюємо данні на тих самих екранах.

Завдання 2. Бачу сценарій замовлення друкованої книги, все правильно.

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

Завдання 4. По цьому завданню не бачу ваєрфреймів, точніше лише кабінет користувача, але так як багато тексту замінено на Lorem ipsum, то мало що зрозуміло. Було б добре допрацювати пару ваєрфреймів і спробувати додати такі екрани:

  • Оформлення замовлення;
  • оплата покупки.

Також хочу похвалити за те, що почали працювати одразу у Фігмі. Виконайте правки і можна переходити до наступних уроків

Світлана 14 мая 2022 17:48  
Велике дякую за можливість навчання :)
https://www.figma.com/file/JDL8m3w1i3C6cZUSCasHDi/%D0%A3%D1%80%D0%BE%D0%BA-%E2%84%963?node-id=1%3A17

Через великий наплив охочих проходити курс я роблю перевірку домашніх завдань платною. 30$ (по поточному курсу), 10% перекажу ЗСУ. За один донат перевірю домашки до усіх уроків.

За реквізитами пишіть в дірект Інстаграму @frusia.pro

Аліна12 мая 2022 08:22  
Добрий день) Допрацювала завдання по Wireframes. Зкидаю посилання знов: https://www.figma.com/file/kMqt2HB0uLfBckslagcTd5/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B4%D0%BE-%D1%83%D1%80%D0%BE%D0%BA%D1%83-3?node-id=0%3A1

Коментар frusia.pro:

Добрий день!

Завдання 1-2. Завантаження забрали, супер.

Завдання 3. Бачу екран з деталями товару, все добре.

Завдання 4. Дуже добре, вже видно як додавати групи і назначати їм фільми.

Стало набагато краще, переходьте до наступного уроку

Дар'я11 мая 2022 13:17  
Доброго дня
це було хард, поки не дуже зрозуміло як налаштувати свої руки для роботи з Figma. Цікаво, ваєр флоу малюють від руки, чи більшість все ж використовує "UI kit"
Надихаючись попередніми роботами, вийшли ось такі роботи:
1. https://www.figma.com/file/gQBVwZKxfVPXpx76Uyo791/1-%2F2-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F?node-id=0%3A1
2.https://www.figma.com/file/Wk0gSOPkLzjbDTrBPqtCfX/3-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F%2F4-%D0%B7%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F?node-id=0%3A1

Коментар frusia.pro:

Добрий день, так, починати дуже важко, але головне не зупинятись і продовжувати практикуватись. Ваєр флоу малюють від руки на папері або на дошці маркером (частіше коли працюють командою, наприклад на воркшопі). Також часто використовують і готові набори компонентів для Figma (як ви вказали UI Kit). Існують і спеціалізовані програми для цього, наприклад, Balsamiq Wireframes. Кожен з цих варіантів має право на життя, я частіше роблю ваєрфрейми в Figma.

Завдання 1. Бачу два сценарії: перегляд новин і серіалу, а також анонси нових серій, що вийдуть незабаром. Все добре.

Завдання 2. Є нова функція по визначенню типу шкіри і стану волосся. Правильно.

Завдання 3. Все добре, але я би дала відступи між екранами, тому що вони зливаються і виглядають як одна довга сторінка. Також було б добре замінити деякі тексти, наприклад, "Special Feature" на назву серіалу. Я так розумію, що ви використали якийсь готовий набір, бо бачу компоненти. Дуже добре!

Завдання 4. Тут ви дали відступи між екранами, чудово. Тексти також поправила б у списку рекомендацій.

Гарно попрацювали, продовжуйте навчання

Аліна10 мая 2022 17:00  
Добрий день)
Ось моя робота: https://www.figma.com/file/kMqt2HB0uLfBckslagcTd5/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B4%D0%BE-%D1%83%D1%80%D0%BE%D0%BA%D1%83-3?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір

Завдання 1. Супер, бачу два сценарії для покупки і входу/реєстарції.

Завдання 2. Схоже на можливість групувати фільми по категоріям. Тільки ви не вказали, що це за сайт. Вказувати момент завантаження сайту не потрібно, тому блоки «Відкриття сайту» можна видалити для обох перших завдань.

Завдання 3. Все добре. Але для повноти картини я би ще додала екран з деталями обраного товару. Також замість «Обрати товар» можна написати «Деталі товару».

Завдання 4. Тут ще треба домалювати декілька екранів, які є у таск флоу але відсутні у вайрфлоу: сторінка фільму, список переглянутих фільмів, створення нової групи.

Будь ласка допрацюйте вказані моменти і напишіть мені знову, щоб я доперевірила цю домашку.

Ангеліна8 мая 2022 19:58  
https://www.figma.com/file/BdnN7wxtHTeBqtPOtrrPst/Untitled?node-id=0%3A1 https://www.figma.com/file/nBjT3B7RcZicdD9XP0QwmR/Untitled?node-id=0%3A1

Коментар frusia.pro:

Завдання 1. Бачу декілька сценаріїв користувача для сайту UaSerial, все вірно.

Завдання 2. Є новий флоу для перегляду своїх замовлень для якогось сайту, нажаль ви не вказали назву. Можу припустити, що це щось типу Розетки.

Завдання 3. Все добре, але схоже, що ви пропустили екран логіну.

Завдання 4. Правильно.

В цілому все ок, добре попрацювали, переходьте до наступного уроку

Aліна5 мая 2022 16:50  
1,2, https://www.figma.com/file/zppRoSu3qqKz5AXRvJ5RK6/Untitled?node-id=2%3A279

3,4 https://www.figma.com/file/ymcooWEcMhr61oYGfezM95/Untitled?node-id=4%3A151

Коментар frusia.pro:

Добрий вечір

Завдання 1. Бачу навіть три сценарії: оформлення замовлення, реєстрація і логін. Все правильно.

Завдання 2. Ви обрали досить складний новий функціонал по створенню власного дизайну. Молодець.

Завдання 3. Ви дуже старались і можливо зараз це виглядає не дуже акуратно, але головне передати суть екранів і у вас це вийшло добре.

Завдання 4. Тут трохи не вистачає елементів інтерфейсу, які дозволили б створити власний дизайн, ви просто позначили область. Але є іконка скрепки і можу здогадатись, що ви хотіли додати можливість завантажити власне зображення і нанести на нього якість додаткові графічні елементи, наприклад, текст. Це хороша задумка.

Гарно виконали усі завдання, молодець! Переходьте до наступного уроку.

Вероніка5 мая 2022 14:27  
Добрий день! Дуже дякую Вам за можливість вивчати все це у вільному доступі, Ваші пояснення чудові і дуже зрозумілі, завдання робити дуже цікаво!
Дякую, якщо зможете подивитись та прокоментувати завдання)) Цікаво почути Вашу думку. Я трошки відійшла від завдання і замість якоїсь нової функції на сайті зробила шось типу доповнення як Ютуб Мьюзік у Ютуба)

https://www.figma.com/file/Gv661ICkCkQEbDCqFOfNhP/%D0%97%D0%B0%D0%B2%D0%B4%D0%B0%D0%BD%D0%BD%D1%8F-1-4?node-id=8%3A742

Там завдання 1, 3 та 2,4 в різних pages за одним посиланням)

Коментар frusia.pro:

Добрий день, будь ласка, дякую вам за відгук

Завдання 1 і 3. Дуже гарно зроблено, ще і одразу у Фігмі та в одному файлі. Все правильно, у мене тільки зауваження до пошуку. Я не бачу сторінки з результатами пошуку у третьому завданні.

Завдання 2-4. Дуже добре! Навіть повторили стилістику Youtube Music.

Домалюйте екран у третьому завданні і переходьте до наступного уроку

Alona Hur29 апреля 2022 19:09  
Добрий вечір. Дякую за Ваш курс, надзвичайно цікаво та корисно і заздалегідь дякую, за перевірку домашніх завдань!
Завдання 1, 2 - https://www.figma.com/file/NwBZHqL7hkyZ6xhijoBn4U/ДЗ-3.-Завдання-1%2C-2.?node-id=0%3A1
Завдання 3, 4 - https://www.figma.com/file/EBDMtkJTwc34vjXVI1PH8p/ДЗ-3.-Завдання-3%2C-4.?node-id=0%3A1

Коментар frusia.pro:

Добрий вечір, будь ласка

Завдання 1-2. Дуже добре справились, ще і використали FigJam, який добре підходить для подібних задач.

Завдання 3-4. Все супер! Для останнього завдання я би ще додала список локацій, клацаючи по яким можна отримати уявлення про усі кімнати.

Молодець! Переходьте до наступного уроку.

Іра28 апреля 2022 17:24  
Завчасно дякую за перевірку та фідбек - https://excalidraw.com/#json=JPoct0mmCSGLPWC0Kq6pl,8UmJPF81Ed8RulVHQ1c01g

Коментар frusia.pro:

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

Эльвира16 февраля 2022 00:48  
Люба, большое спасибо за урок! Это была сложная катка)
Пользуясь опытом предшественников выполнена на excalidraw.com
https://excalidraw.com/#json=A0KYSOrjIWQtGsIyzCC0B,4wcArO92HVvmh136EnxVMQ

Комментарий frusia.pro:

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

Дарья12 февраля 2022 03:35  
Домашнее задание https://cloud.mail.ru/public/HLTi/GCDuPph2D

Комментарий frusia.pro:

Все отлично, вы очень понятно отобразили и таск-флоу, и вайрфреймы, но есть небольшая ошибка. "Просмотр ленты" – это действие, а не экран. Нужно оставить просто квадратик "Лента", а то, что её можно просматривать и так понятно.

Лилия19 января 2022 12:54  
Домашнее задание
Добавила ссылку на сервис и если не работает, то гугл ссылка
https://excalidraw.com/#json=kqTb-yxwl_JxNtQWKXRUQ,Wd3XY685ZY2votFNfbfuPg
https://drive.google.com/drive/folders/1hfUyG3PvJkKwq40isnRQORJhOnJFRn8g?usp=sharing

Комментарий frusia.pro:

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

Диана4 ноября 2021 12:13  
Спасибо за обратную связь, добавила экраны
https://drive.google.com/drive/folders/1v3UW0u8T0GfDctGSRY11lbTtG4YXHh-H?usp=sharing

Комментарий frusia.pro:

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

Диана3 ноября 2021 15:18  
Вот корректная ссылка:
https://drive.google.com/drive/folders/1v3UW0u8T0GfDctGSRY11lbTtG4YXHh-H?usp=sharing

Комментарий frusia.pro:

Задание 1-2.

Хорошо и акуратно выполнили задание, молодец!

Задание 3–4.

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

Диана3 ноября 2021 15:16  
Посмотрите пожалуйста, очень жду Вашу обратную связь
https://drive.google.com/file/d/1BhNf64898tp7vSD-0ny4iZxnaDnws5fg/view?usp=sharing
Люба Фурсеева20 октября 2021 13:21  
Валерия, здравствуйте, в ближайшее время проверю
Валерия20 октября 2021 10:47  
Люба, добрый день.
Отправила Вам мое ДЗ в Инстаграм)
Машка)7 сентября 2021 16:47  
Проверьте пожалуйста :
1, 2 задания https://www.figma.com/file/8WBjJBpPMOHONoYeQHjFkm/Untitled?node-id=0%3A1
3,4 задания https://www.figma.com/file/ILCBhNDc72IsXgUWuzmUSs/Untitled?node-id=0%3A1

Комментарий frusia.pro:

Задание 1-2.

Очень понравилось ваше оформление, всё довольно понятно выглядит, молодец! Нашла несколько ошибок: (1) Вот этот путь http://joxi.net/KAgVjl5TNJXqW2 должен идти линейно. Даже если вы будете разбивать заполнение информации по шагах на разные экраны, все равно нужно чтобы каждый из них шел один за другим и в конечном итоге привел к успешному оформлению заказа. Та же ошибка в задании с новой функцией. (2) Видимо забыли подписать шаг "нет" http://joxi.ru/KAxkaPphvQ1la2

Задание 3–4.

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

Полина12 августа 2021 22:03  
Добрый вечер!
https://drive.google.com/drive/u/2/folders/15NEzwTB819MoswZXrByFKSh6XuGjl01q
Поправила ссылку из предыдущего сообщения, вроде должно работать:)

Комментарий frusia.pro:

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

Полина7 августа 2021 18:02  
Здравствуйте!)
Прошу проверьте мою домашку)
https://drive.google.com/drive/folders/15NEzwTB819MoswZXrByFKSh6XuGjl01q?usp=sharing

Комментарий frusia.pro:

Здравствуйте , пожалуйста откройте доступ по ссылке, потому что сейчас пишет You need access.

Люба Фурсеева7 июля 2021 16:15  
Aika, здравствуйте, хорошо, скоро перепроверю и отпишу вам
Aika7 июля 2021 14:54  
Люба,здравствуйте,отправила вам задания ДЗ№3. повторно,исправленные
Люба Фурсеева29 июня 2021 11:53  
Айка, хорошо, ждите ответ в Инстаграм в ближайщее время
Айка29 июня 2021 09:21  
Здравствуйте,Люба,таск флоу и вайр флоу фото отправила вам в инстаграм
Александр25 апреля 2021 18:21  
Добрый день, проверьте пожалуйста.
1 - 2 задание - https://drive.google.com/file/d/1cE_Xz-h5up5aw0A4nuc5gAcoF9Jrdf63/view?usp=sharing
3 задание - https://drive.google.com/file/d/1SBtnZLPnWPxQhvzE8udFVzZKYygpaQuZ/view?usp=sharing
4 задание - https://drive.google.com/file/d/130EE10nisp5ZNTboY24Otqb4UbKsZTkp/view?usp=sharing

Комментарий frusia.pro:

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

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

Сергей9 февраля 2021 18:08  
1. https://drive.google.com/file/d/1_eOo_ylddOikia03RM9nnVJXvKR4_JS2/view?usp=sharing
https://drive.google.com/file/d/1XuzCSSgRKW6jKCTpb4BzQk9HU82b_abE/view?usp=sharing
2.https://drive.google.com/file/d/1XCj_hg9jskBUmRti8DzZRURSUyEB89YD/view?usp=sharing
3.https://drive.google.com/file/d/1TKgE1Kv_09EDSlOgcGiNy_zuIx4VXz30/view?usp=sharing
https://drive.google.com/file/d/15dhQIsTeB7MPwsbUmo5kjpKfL5C0GX4H/view?usp=sharing
https://drive.google.com/file/d/1_JF0r5gP4OnnG8OCQ74OECvY22JO8Ve9/view?usp=sharing
4.https://drive.google.com/file/d/16wzYApkfnvW63S5dqL69p-9W10uMjBAa/view?usp=sharing

Комментарий frusia.pro:

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

Oksana4 декабря 2020 12:29  
Проверьте, пожалуйста:
https://drive.google.com/file/d/1HR41Pz_BINPMuJBZmD3fNnSpRG5k0mvk/view?usp=sharing
https://drive.google.com/file/d/1dN4ZIE7uFC36nlnZz3ZbQ8r95EUevnSm/view?usp=sharing

Комментарий frusia.pro:

Задание 1.

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

Задание 2.

Вижу новую функцию для сравнения товаров внутри категории, отлично.

Задание 3–4.

К сожалению, по первой ссылке получаю сообщение "Sorry, the file you have requested does not exist". Подозреваю, что тут были решения по остальным заданиям. Пожалуйста, загрузите файл еще раз и предоставьте рабочую ссылку.

Анастасия1 декабря 2020 01:33  
Не понимаю, как так вышло, что снова не открыла доступ.

Доступ открыла
https://drive.google.com/file/d/1QlGlhGhk0G-nAH34kk2GXJxWksVaJVo0/view?usp=sharing

Комментарий frusia.pro:

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

Анастасия30 ноября 2020 12:25  
Переделала первых два задания:
https://drive.google.com/file/d/1QlGlhGhk0G-nAH34kk2GXJxWksVaJVo0/view?usp=sharing

Комментарий frusia.pro:

Откройте пожалуйста доступ по ссылке.

Анастасия9 ноября 2020 16:47  
Открыла доступ по ссылкам
1) https://drive.google.com/file/d/1BhNf64898tp7vSD-0ny4iZxnaDnws5fg/view?usp=sharing
2) https://drive.google.com/file/d/1v0XVOZbpZ9LWK8R9Un9E_gtyS01WYgeq/view?usp=sharing
3) https://drive.google.com/file/d/1XRdkkMfIbnXIQrHSra7BaHDTziEv7GDG/view?usp=sharing
4) https://drive.google.com/file/d/1mo7ZJHAR8aCIQt8i9iCkMDO3bsraU1eq/view?usp=sharing

Комментарий frusia.pro:

Задания 1–2

Вы немного недопоняли принцип построения таскфлоу. В каждый отдельный квадрат мы выносим экран, который дальше будет отображен в вайрфлоу. А вы в свою очередь просто описали путь пользователя, его действия, а не экраны. Чтобы было понятнее я распишу как должно было выглядеть первое задание. 5 квадратов, в том же порядке: (1) поиск на главной странице, (2) результаты поиска, (3) страница товара, (4) корзина, (5) чекаут. Закрытие/открытие сайта вообще не упоминается, это понятно "по умолчанию".

Задания 3–4

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

Анастасия4 ноября 2020 15:20  
1) https://drive.google.com/file/d/1BhNf64898tp7vSD-0ny4iZxnaDnws5fg/view?usp=sharing
2) https://drive.google.com/file/d/1v0XVOZbpZ9LWK8R9Un9E_gtyS01WYgeq/view?usp=sharing
3) https://drive.google.com/file/d/1XRdkkMfIbnXIQrHSra7BaHDTziEv7GDG/view?usp=sharing
4) https://drive.google.com/file/d/1mo7ZJHAR8aCIQt8i9iCkMDO3bsraU1eq/view?usp=sharing

Откройте пожалуйста доступ к этим ссылкам. Сделать это можно в настройках, когда "шарите" ссылку.

Люба Фурсеева14 сентября 2020 23:00  
darya, пожалуйста. Отправляйте картинки мне в директ в Instagram @frusia.pro, проверю.
darya14 сентября 2020 22:56  
Люба, спасибо вам за урок! но отправить сюда картинки не получается совсем :(
darya14 сентября 2020 22:41  
задание 1
/Users/dasha/Downloads/photo_2020-09-14 22.38.48.jpeg
Люба Фурсеева24 августа 2020 23:40  
Lana, проверила и ответила. Переходите к следующему уроку
Lana24 августа 2020 13:23  
Отправила задание 3 в директ, пожалуйста проверьте
sergo21 апреля 2020 15:36  

1, 2 текфлоу на одном фото Ответ на домашнее задание 1 и 2 от Sergo

3. Вайрфлов на первое задание Ответ на домашнее задание 3 от Sergo

4. Вайрфлов на 2 задание с новой функцией Ответ на домашнее задание 4 от Sergo

Комментарий frusia.pro: Это домашнее задание отправили в директ в Инстаграм и согласились опубликовать его.

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

Задания 1–2

Вы вынесли функции «поставить лайк», «оставить комментарий» и новую «тайминг» в отдельные квадраты. Это неправильно.

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

Функция «поделиться» спорная, так как вызывает дополнительное всплывающее окно. Поэтому её можно вынести в отдельный элемент таскфлоу (или расписать текстом).

Задания 3–4

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

sergo13 апреля 2020 18:44  
Таскфлов и вайрфлов нарисовал, фото скинул вам в инстаграм.

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