🗊Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company

Категория: Дизайн
Нажмите для полного просмотра!
Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №1Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №2Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №3Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №4Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №5Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №6Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №7Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №8Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №9Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №10Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №11Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №12Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №13Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №14Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №15Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №16Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №17Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №18Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №19Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №20Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №21Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №22Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №23Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №24Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №25Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №26Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №27Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №28Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №29Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №30Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №31Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №32Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №33Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №34Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №35Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №36Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №37Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №38Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №39Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №40Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №41Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №42Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №43Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №44Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №45Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №46Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №47Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №48Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №49Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №50Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №51Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №52
Скачать

Содержание ▲

Вы можете ознакомиться и скачать Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company. Презентация содержит 52 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company
Описание слайда:
Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company

Слайд 2


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

Слайд 3


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

Слайд 4


Из чего складывается User Experience Взаимодействие пользователя с продуктом происходит на разных «слоях»: Возможность выполнения задач с помощью продукта. Эффективность выполнения задач. Скорость и качество решения возникающих проблем. Внешняя эстетика продукта. Встроенность в экосистему – взаимодействие с другими продуктами и сервисами.
Описание слайда:
Из чего складывается User Experience Взаимодействие пользователя с продуктом происходит на разных «слоях»: Возможность выполнения задач с помощью продукта. Эффективность выполнения задач. Скорость и качество решения возникающих проблем. Внешняя эстетика продукта. Встроенность в экосистему – взаимодействие с другими продуктами и сервисами.

Слайд 5


Как можно влиять на User Experience Воспринимая продукт шире чем просто программу, можно улучшить впечатление от работы с продуктом на всех этапах работы пользователя с ним: Качество исполнения самого продукта – функциональность, интерфейс, дизайн. Сопутствующие процессы – покупка, поддержка, модернизация. Интеграция с другими продуктами – возможность импорта/экспорта данных, подключения надстроек.
Описание слайда:
Как можно влиять на User Experience Воспринимая продукт шире чем просто программу, можно улучшить впечатление от работы с продуктом на всех этапах работы пользователя с ним: Качество исполнения самого продукта – функциональность, интерфейс, дизайн. Сопутствующие процессы – покупка, поддержка, модернизация. Интеграция с другими продуктами – возможность импорта/экспорта данных, подключения надстроек.

Слайд 6


Измерение качества интерфейса Не всегда можно говорить об абстрактном «удобстве», его нужно измерить. Некоторые метрики: Скорость выполнения операций: каждой операции в отдельности; серии действий, необходимых для выполнения задачи. Легкость и скорость обучения. Надежность и безопасность работы. Общая удовлетворенность пользователя.
Описание слайда:
Измерение качества интерфейса Не всегда можно говорить об абстрактном «удобстве», его нужно измерить. Некоторые метрики: Скорость выполнения операций: каждой операции в отдельности; серии действий, необходимых для выполнения задачи. Легкость и скорость обучения. Надежность и безопасность работы. Общая удовлетворенность пользователя.

Слайд 7


Как побороть путаницу в терминах За последние несколько лет в обиход вошла целая серия терминов, касающихся процесса проектирования: юзабилити, информационная архитектура, user experience, interaction design, accessibility и т.п.. Все они имеют право на жизнь, но обозначают разные вещи – подходы, методики, процессы, наборы качеств. Главное понимать, каков конечный результат – названия вторичны, хотя и облегчают общение.
Описание слайда:
Как побороть путаницу в терминах За последние несколько лет в обиход вошла целая серия терминов, касающихся процесса проектирования: юзабилити, информационная архитектура, user experience, interaction design, accessibility и т.п.. Все они имеют право на жизнь, но обозначают разные вещи – подходы, методики, процессы, наборы качеств. Главное понимать, каков конечный результат – названия вторичны, хотя и облегчают общение.

Слайд 8


Конечный продукт проектирования Улучшение качества продукта – достижение определенных показателей метрик. Документация на интерфейс – набор wireframes, дизайн-макетов и сопроводительных документов, интерактивный прототип. Важны также полнота, понятность, читабельность, непротиворечивость документации, ее своевременная поставка и корректировка Ранняя проверка концепции продукта, создание материалов для презентаций инвесторам и другим заинтересованным лицам.
Описание слайда:
Конечный продукт проектирования Улучшение качества продукта – достижение определенных показателей метрик. Документация на интерфейс – набор wireframes, дизайн-макетов и сопроводительных документов, интерактивный прототип. Важны также полнота, понятность, читабельность, непротиворечивость документации, ее своевременная поставка и корректировка Ранняя проверка концепции продукта, создание материалов для презентаций инвесторам и другим заинтересованным лицам.

Слайд 9


Обзор процесса проектирования Обзор процесса проектирования Встраивание проектирования в общий процесс этапы, форматы работы, команда проектирования, методы проверки качества интерфейса Разбор кейса Выводы и наблюдения
Описание слайда:
Обзор процесса проектирования Обзор процесса проектирования Встраивание проектирования в общий процесс этапы, форматы работы, команда проектирования, методы проверки качества интерфейса Разбор кейса Выводы и наблюдения

Слайд 10


Этапы проектирования Можно проверять соответствие концепции, качество документации и самого продукта на каждом из них: Исследование предметной области и рынка. Сбор и формирование требований. Концепция интерфейса и дизайна. Детализация концепции интерфейса. Поддержка процесса разработки.
Описание слайда:
Этапы проектирования Можно проверять соответствие концепции, качество документации и самого продукта на каждом из них: Исследование предметной области и рынка. Сбор и формирование требований. Концепция интерфейса и дизайна. Детализация концепции интерфейса. Поддержка процесса разработки.

Слайд 11


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

Слайд 12


Команда проектирования Роли могут совмещаться в одном специалисте или распределены, в зависимости от наличия ресурсов: Аналитик – исследование предметной области, сбор и формирование требований. Проектировщик – отрисовка wireframes, проверка и тестирование решений. Дизайнер – создание дизайн-макетов и сопроводительной графики. HTML-разработчик – верстка и интеграция дизайна.
Описание слайда:
Команда проектирования Роли могут совмещаться в одном специалисте или распределены, в зависимости от наличия ресурсов: Аналитик – исследование предметной области, сбор и формирование требований. Проектировщик – отрисовка wireframes, проверка и тестирование решений. Дизайнер – создание дизайн-макетов и сопроводительной графики. HTML-разработчик – верстка и интеграция дизайна.

Слайд 13


Методы проверки качества интерфейса На каждом из этапов проектирования можно применять серию методов: Юзабилити-тестирование – наблюдение за пользователями, работающими с продуктом. Бета-тестирование – запуск предварительной версии и сбор обратной связи от пользователей. Экспертная оценка – юзабилити-специалист или тестировщик оценивают продукт по чек-листу. Peer reviews – рекомендации и замечания коллег. Предварительные исследования.
Описание слайда:
Методы проверки качества интерфейса На каждом из этапов проектирования можно применять серию методов: Юзабилити-тестирование – наблюдение за пользователями, работающими с продуктом. Бета-тестирование – запуск предварительной версии и сбор обратной связи от пользователей. Экспертная оценка – юзабилити-специалист или тестировщик оценивают продукт по чек-листу. Peer reviews – рекомендации и замечания коллег. Предварительные исследования.

Слайд 14


Обзор процесса проектирования Обзор процесса проектирования Встраивание проектирования в общий процесс Разбор кейса изучение задачи и аудитории, выбор и проработка концепции, проектирование страниц, дизайн и интерактивный прототип, поддержка разработки Выводы и наблюдения
Описание слайда:
Обзор процесса проектирования Обзор процесса проектирования Встраивание проектирования в общий процесс Разбор кейса изучение задачи и аудитории, выбор и проработка концепции, проектирование страниц, дизайн и интерактивный прототип, поддержка разработки Выводы и наблюдения

Слайд 15


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

Слайд 16


Как будет разбираться кейс? Проводим этап проектирования. Проверяем, насколько правильно он прошел. Вносим изменения в результаты этапа.
Описание слайда:
Как будет разбираться кейс? Проводим этап проектирования. Проверяем, насколько правильно он прошел. Вносим изменения в результаты этапа.

Слайд 17


Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки
Описание слайда:
Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки

Слайд 18


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

Слайд 19


Показатели эффективности по каждой задаче Чтобы оценивать эффективность выполнения задач, нужно задать им целевые показатели. Например, к концу года: Объем продаж через сайт – $7млн в месяц. Количество нерешенных и просроченных обращений в службу поддержки снизить на 20%. Не менее 5 000 посещений в день с глубиной просмотра страниц не менее 2,5.
Описание слайда:
Показатели эффективности по каждой задаче Чтобы оценивать эффективность выполнения задач, нужно задать им целевые показатели. Например, к концу года: Объем продаж через сайт – $7млн в месяц. Количество нерешенных и просроченных обращений в службу поддержки снизить на 20%. Не менее 5 000 посещений в день с глубиной просмотра страниц не менее 2,5.

Слайд 20


Целевая аудитория Нужно понимать, для каких задач каких людей в первую очередь используется сайт: Владелец продукции. Обращается в поддержку несколько раз в год – починить [принтер], найти аксессуар или понять, почему не работает функция. Покупатель. Подбирает подходящий [сканер] для работы с фотографиями. Важно понимать, как обстоит дело с дилерскими и сервисными центрами. Просто интересующийся. Ищет информацию о компании – общие сведения, структуру или новости.
Описание слайда:
Целевая аудитория Нужно понимать, для каких задач каких людей в первую очередь используется сайт: Владелец продукции. Обращается в поддержку несколько раз в год – починить [принтер], найти аксессуар или понять, почему не работает функция. Покупатель. Подбирает подходящий [сканер] для работы с фотографиями. Важно понимать, как обстоит дело с дилерскими и сервисными центрами. Просто интересующийся. Ищет информацию о компании – общие сведения, структуру или новости.

Слайд 21


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

Слайд 22


Итоговые документы этапа Модель предметной области. Видение проекта. Описание целевой аудитории (персонажи). Отчет о конкурентном анализе.
Описание слайда:
Итоговые документы этапа Модель предметной области. Видение проекта. Описание целевой аудитории (персонажи). Отчет о конкурентном анализе.

Слайд 23


Проверка решений этапа Консультации и предварительное общение: представители клиента; эксперты в предметной области; потенциальные пользователи. Предварительные исследования: маркетинговые исследования; конкурентный анализ; проведение фокус-групп с пользователями. Утверждение собранной информации клиентом.
Описание слайда:
Проверка решений этапа Консультации и предварительное общение: представители клиента; эксперты в предметной области; потенциальные пользователи. Предварительные исследования: маркетинговые исследования; конкурентный анализ; проведение фокус-групп с пользователями. Утверждение собранной информации клиентом.

Слайд 24


Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки
Описание слайда:
Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки

Слайд 25


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

Слайд 26


Функциональность Требуется описать всю функциональность, которая будет доступна пользователю: Что пользователь может делать на сайте – какими функциями он может пользоваться для решения своих задач? По каким сценариям проходит работа с функциональностью и каковы их особенности?
Описание слайда:
Функциональность Требуется описать всю функциональность, которая будет доступна пользователю: Что пользователь может делать на сайте – какими функциями он может пользоваться для решения своих задач? По каким сценариям проходит работа с функциональностью и каковы их особенности?

Слайд 27


Структура и навигация Необходимо описать структуру сайта и то, как пользователь перемещается по нему: Какие страницы будут на сайте и какова их иерархия? Какие из них нужно будет подготовить в процессе проектирования, дизайна и создания интерактивного прототипа? Какие типы навигации будут использоваться для переходов между страницами сайта – меню, «хлебные крошки», теги, еще что-то?
Описание слайда:
Структура и навигация Необходимо описать структуру сайта и то, как пользователь перемещается по нему: Какие страницы будут на сайте и какова их иерархия? Какие из них нужно будет подготовить в процессе проектирования, дизайна и создания интерактивного прототипа? Какие типы навигации будут использоваться для переходов между страницами сайта – меню, «хлебные крошки», теги, еще что-то?

Слайд 28


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

Слайд 29


Пример чернового wireframe
Описание слайда:
Пример чернового wireframe

Слайд 30


Итоговые документы этапа Описание функциональности: Формализованные или неформализованные Use Cases. User Stories. Структура страниц. Схемы навигации. Черновые wireframes (структурные схемы страниц). Перечень создаваемых wireframes, дизайн-макетов и страниц интерактивного прототипа.
Описание слайда:
Итоговые документы этапа Описание функциональности: Формализованные или неформализованные Use Cases. User Stories. Структура страниц. Схемы навигации. Черновые wireframes (структурные схемы страниц). Перечень создаваемых wireframes, дизайн-макетов и страниц интерактивного прототипа.

Слайд 31


Проверка решений этапа Исследования с привлечением пользователей: карточная сортировка при проектировании структуры сайта и навигации. Консультации с коллегами и другими специалистами: peer reviews; технические консультации по поводу реализуемости функций; юзабилити-экспертиза набросков интерфейса. Утверждение концепции и спецификаций клиентом.
Описание слайда:
Проверка решений этапа Исследования с привлечением пользователей: карточная сортировка при проектировании структуры сайта и навигации. Консультации с коллегами и другими специалистами: peer reviews; технические консультации по поводу реализуемости функций; юзабилити-экспертиза набросков интерфейса. Утверждение концепции и спецификаций клиентом.

Слайд 32


Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки
Описание слайда:
Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки

Слайд 33


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

Слайд 34


Итоговые документы этапа Детальные структурные схемы страниц (wireframes).
Описание слайда:
Итоговые документы этапа Детальные структурные схемы страниц (wireframes).

Слайд 35


Пример детального wireframe
Описание слайда:
Пример детального wireframe

Слайд 36


Проверка решений этапа Тестирование и экспертиза: юзабилити-тестирование бумажных или электронных версий wireframes; экспертная оценка интерфейса; peer reviews. Консультации: технические консультации по поводу реализуемости элементов интерфейса. Утверждение структурных схем интерфейса клиентом.
Описание слайда:
Проверка решений этапа Тестирование и экспертиза: юзабилити-тестирование бумажных или электронных версий wireframes; экспертная оценка интерфейса; peer reviews. Консультации: технические консультации по поводу реализуемости элементов интерфейса. Утверждение структурных схем интерфейса клиентом.

Слайд 37


Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки
Описание слайда:
Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки

Слайд 38


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

Слайд 39


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

Слайд 40


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

Слайд 41


Итоговые документы этапа Дизайн-макеты страниц. Руководство по оформлению интерфейса. Набор сопроводительной графики: иконки, иллюстрации. Интерактивный прототип.
Описание слайда:
Итоговые документы этапа Дизайн-макеты страниц. Руководство по оформлению интерфейса. Набор сопроводительной графики: иконки, иллюстрации. Интерактивный прототип.

Слайд 42


Проверка решений этапа Тестирование и экспертиза: юзабилити-тестирование интерактивного прототипа и дизайн-макетов; экспертная оценка дизайн-макетов и прототипа; peer reviews. Консультации: технические консультации по поводу реализуемости элементов интерфейса. Утверждение концепции дизайна и дизайн-макетов клиентом.
Описание слайда:
Проверка решений этапа Тестирование и экспертиза: юзабилити-тестирование интерактивного прототипа и дизайн-макетов; экспертная оценка дизайн-макетов и прототипа; peer reviews. Консультации: технические консультации по поводу реализуемости элементов интерфейса. Утверждение концепции дизайна и дизайн-макетов клиентом.

Слайд 43


Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки
Описание слайда:
Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки

Слайд 44


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

Слайд 45


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

Слайд 46


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

Слайд 47


Итоговые документы этапа Поддержка и обновление ранее созданных документов. Новые wireframes (структурные схемы страниц). Новые дизайн-макеты и сопутствующие иллюстрации. Новые страницы интерактивного прототипа.
Описание слайда:
Итоговые документы этапа Поддержка и обновление ранее созданных документов. Новые wireframes (структурные схемы страниц). Новые дизайн-макеты и сопутствующие иллюстрации. Новые страницы интерактивного прототипа.

Слайд 48


Проверка решений этапа Тестирование и экспертиза: юзабилити-тестирование работающего сайта; бета-тестирование: сбор и изучение мнений пользователей; сбор и анализ статистики; тестирование QA-специалистами; экспертная оценка работающего сайта.
Описание слайда:
Проверка решений этапа Тестирование и экспертиза: юзабилити-тестирование работающего сайта; бета-тестирование: сбор и изучение мнений пользователей; сбор и анализ статистики; тестирование QA-специалистами; экспертная оценка работающего сайта.

Слайд 49


Обзор процесса проектирования Обзор процесса проектирования Встраивание проектирования в общий процесс Разбор кейса Выводы и наблюдения чем полезен кейс, выводы
Описание слайда:
Обзор процесса проектирования Обзор процесса проектирования Встраивание проектирования в общий процесс Разбор кейса Выводы и наблюдения чем полезен кейс, выводы

Слайд 50


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

Слайд 51


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

Слайд 52


Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company, слайд №52
Описание слайда:

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию