Презентация Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company абсолютно бесплатно. Урок-презентация на эту тему содержит всего 52 слайда. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:52 слайда
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:554.50 kB
- Просмотров:137
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Контроль качества интерфейсных решений на всех этапах проектирования и разработки
Юрий Ветров. UI Modeling Company
№2 слайд
Содержание слайда: Цели мастер-класса
Понять, на каких этапах, чем и как проектировщик может помочь продукту и команде разработки.
Узнать о конкретных методах и подходах, которые помогут работать и проверять качество на каждом из этапов.
Опробовать эти методы на практике на примере небольшого тестового проекта.
№3 слайд
Содержание слайда: Обзор процесса проектирования
из чего складывается User Experience, как можно влиять на него, метрики юзабилити, путаница в терминах, продукт и этапы проектирования
Обзор процесса проектирования
из чего складывается User Experience, как можно влиять на него, метрики юзабилити, путаница в терминах, продукт и этапы проектирования
Встраивание проектирования в общий процесс
Разбор кейса
Выводы и наблюдения
№4 слайд
Содержание слайда: Из чего складывается User Experience
Взаимодействие пользователя с продуктом происходит на разных «слоях»:
Возможность выполнения задач с помощью продукта.
Эффективность выполнения задач.
Скорость и качество решения возникающих проблем.
Внешняя эстетика продукта.
Встроенность в экосистему – взаимодействие с другими продуктами и сервисами.
№5 слайд
Содержание слайда: Как можно влиять на User Experience
Воспринимая продукт шире чем просто программу, можно улучшить впечатление от работы с продуктом на всех этапах работы пользователя с ним:
Качество исполнения самого продукта – функциональность, интерфейс, дизайн.
Сопутствующие процессы – покупка, поддержка, модернизация.
Интеграция с другими продуктами – возможность импорта/экспорта данных, подключения надстроек.
№6 слайд
Содержание слайда: Измерение качества интерфейса
Не всегда можно говорить об абстрактном «удобстве», его нужно измерить. Некоторые метрики:
Скорость выполнения операций:
каждой операции в отдельности;
серии действий, необходимых для выполнения задачи.
Легкость и скорость обучения.
Надежность и безопасность работы.
Общая удовлетворенность пользователя.
№7 слайд
Содержание слайда: Как побороть путаницу в терминах
За последние несколько лет в обиход вошла целая серия терминов, касающихся процесса проектирования:
юзабилити, информационная архитектура, user experience, interaction design, accessibility и т.п..
Все они имеют право на жизнь, но обозначают разные вещи – подходы, методики, процессы, наборы качеств.
Главное понимать, каков конечный результат – названия вторичны, хотя и облегчают общение.
№8 слайд
Содержание слайда: Конечный продукт проектирования
Улучшение качества продукта – достижение определенных показателей метрик.
Документация на интерфейс – набор wireframes, дизайн-макетов и сопроводительных документов, интерактивный прототип.
Важны также полнота, понятность, читабельность, непротиворечивость документации, ее своевременная поставка и корректировка
Ранняя проверка концепции продукта, создание материалов для презентаций инвесторам и другим заинтересованным лицам.
№9 слайд
Содержание слайда: Обзор процесса проектирования
Обзор процесса проектирования
Встраивание проектирования в общий процесс
этапы, форматы работы, команда проектирования, методы проверки качества интерфейса
Разбор кейса
Выводы и наблюдения
№10 слайд
Содержание слайда: Этапы проектирования
Можно проверять соответствие концепции, качество документации и самого продукта на каждом из них:
Исследование предметной области и рынка.
Сбор и формирование требований.
Концепция интерфейса и дизайна.
Детализация концепции интерфейса.
Поддержка процесса разработки.
№11 слайд
Содержание слайда: Возможные форматы работы
Проектирование должно предварять разработку, но не оттягивать ее начало:
Полная предварительная проработка интерфейса – сначала полная документация, затем разработка.
Предварительный этап проработки интерфейса, затем – поддержка с проектированием оставшегося.
Создание функционального прототипа, затем его «причесывание» – в конце или по ходу разработки.
Консультации в конце или по ходу разработки.
№12 слайд
Содержание слайда: Команда проектирования
Роли могут совмещаться в одном специалисте или распределены, в зависимости от наличия ресурсов:
Аналитик – исследование предметной области, сбор и формирование требований.
Проектировщик – отрисовка wireframes, проверка и тестирование решений.
Дизайнер – создание дизайн-макетов и сопроводительной графики.
HTML-разработчик – верстка и интеграция дизайна.
№13 слайд
Содержание слайда: Методы проверки качества интерфейса
На каждом из этапов проектирования можно применять серию методов:
Юзабилити-тестирование – наблюдение за пользователями, работающими с продуктом.
Бета-тестирование – запуск предварительной версии и сбор обратной связи от пользователей.
Экспертная оценка – юзабилити-специалист или тестировщик оценивают продукт по чек-листу.
Peer reviews – рекомендации и замечания коллег.
Предварительные исследования.
№14 слайд
Содержание слайда: Обзор процесса проектирования
Обзор процесса проектирования
Встраивание проектирования в общий процесс
Разбор кейса
изучение задачи и аудитории, выбор и проработка концепции, проектирование страниц, дизайн и интерактивный прототип, поддержка разработки
Выводы и наблюдения
№15 слайд
Содержание слайда: Кейс
Сайт компании – производителя компьютерной техники с интернет-магазином и службой поддержки:
Простой, зато понятный и наглядный пример.
Каждый сталкивался с аналогичным и:
понимает, что обычно требуется от них;
помнит, что в них неудобно и чего не хватает;
возможно, участвовал в разработке.
№16 слайд
Содержание слайда: Как будет разбираться кейс?
Проводим этап проектирования.
Проверяем, насколько правильно он прошел.
Вносим изменения в результаты этапа.
№17 слайд
Содержание слайда: Изучение задачи и аудитории
Изучение задачи и аудитории
Выбор концепции и ее проработка
Проектирование страниц
Дизайн и интерактивный прототип
Поддержка разработки
№18 слайд
Содержание слайда: Цели компании
Чего хочет добиться компания созданием сайта:
Доступность информации о компании и продукции в интернете.
Новый канал продажи продукции.
Дополнительный сервис поддержки владельцев продукции.
Упрощение работы с партнерами.
№19 слайд
Содержание слайда: Показатели эффективности по каждой задаче
Чтобы оценивать эффективность выполнения задач, нужно задать им целевые показатели. Например, к концу года:
Объем продаж через сайт – $7млн в месяц.
Количество нерешенных и просроченных обращений в службу поддержки снизить на 20%.
Не менее 5 000 посещений в день с глубиной просмотра страниц не менее 2,5.
№20 слайд
Содержание слайда: Целевая аудитория
Нужно понимать, для каких задач каких людей в первую очередь используется сайт:
Владелец продукции. Обращается в поддержку несколько раз в год – починить [принтер], найти аксессуар или понять, почему не работает функция.
Покупатель. Подбирает подходящий [сканер] для работы с фотографиями. Важно понимать, как обстоит дело с дилерскими и сервисными центрами.
Просто интересующийся. Ищет информацию о компании – общие сведения, структуру или новости.
№21 слайд
Содержание слайда: Ограничения проекта
Ограничения проекта необходимо учитывать при проектировании и выборе подходящего процесса работы:
Бюджет и сроки выполнения проекта. На какое участие проектировщика хватает ресурсов.
Back-Office сайта. Какие ресурсы может выделить клиент для его поддержки и сопровождения.
Технологические решения. Есть ли какие-то ограничения – у команды разработки, клиента, будущих пользователей сайта.
№22 слайд
Содержание слайда: Итоговые документы этапа
Модель предметной области.
Видение проекта.
Описание целевой аудитории (персонажи).
Отчет о конкурентном анализе.
№23 слайд
Содержание слайда: Проверка решений этапа
Консультации и предварительное общение:
представители клиента;
эксперты в предметной области;
потенциальные пользователи.
Предварительные исследования:
маркетинговые исследования;
конкурентный анализ;
проведение фокус-групп с пользователями.
Утверждение собранной информации клиентом.
№24 слайд
Содержание слайда: Изучение задачи и аудитории
Изучение задачи и аудитории
Выбор концепции и ее проработка
Проектирование страниц
Дизайн и интерактивный прототип
Поддержка разработки
№25 слайд
Содержание слайда: Общая концепция интерфейса
Необходимо определить основные принципы, по которым будет строиться интерфейс:
Какая группа пользователей будет ключевой – чьи задачи должны решаться в первую очередь?
Будет ли это единый сайт или группа сайтов, каждый из которых решает свою задачу?
Используем ли мы технологическое решение с ограниченными интерфейсными возможностями?
Какие задачи будет решать пользователь, а какие – система?
№26 слайд
Содержание слайда: Функциональность
Требуется описать всю функциональность, которая будет доступна пользователю:
Что пользователь может делать на сайте – какими функциями он может пользоваться для решения своих задач?
По каким сценариям проходит работа с функциональностью и каковы их особенности?
№27 слайд
Содержание слайда: Структура и навигация
Необходимо описать структуру сайта и то, как пользователь перемещается по нему:
Какие страницы будут на сайте и какова их иерархия?
Какие из них нужно будет подготовить в процессе проектирования, дизайна и создания интерактивного прототипа?
Какие типы навигации будут использоваться для переходов между страницами сайта – меню, «хлебные крошки», теги, еще что-то?
№28 слайд
Содержание слайда: Первые наброски интерфейса
Нужно показать общий вид важнейших страниц сайта:
Какова общая сетка страницы?
Где будут располагаться общие для всех страниц элементы?
Где будут расположены навигационные блоки?
Какие элементы и в каком порядке будут присутствовать на «сайтообразующих» страницах?
№29 слайд
Содержание слайда: Пример чернового wireframe
№30 слайд
Содержание слайда: Итоговые документы этапа
Описание функциональности:
Формализованные или неформализованные Use Cases.
User Stories.
Структура страниц.
Схемы навигации.
Черновые wireframes (структурные схемы страниц).
Перечень создаваемых wireframes, дизайн-макетов и страниц интерактивного прототипа.
№31 слайд
Содержание слайда: Проверка решений этапа
Исследования с привлечением пользователей:
карточная сортировка при проектировании структуры сайта и навигации.
Консультации с коллегами и другими специалистами:
peer reviews;
технические консультации по поводу реализуемости функций;
юзабилити-экспертиза набросков интерфейса.
Утверждение концепции и спецификаций клиентом.
№32 слайд
Содержание слайда: Изучение задачи и аудитории
Изучение задачи и аудитории
Выбор концепции и ее проработка
Проектирование страниц
Дизайн и интерактивный прототип
Поддержка разработки
№33 слайд
Содержание слайда: Отрисовка структурных схем страниц
Ключевой этап работ, определяющий состав и структуру конкретных страниц сайта:
Какие интерактивные элементы содержит страница?
Какая информация будет содержаться на ней?
Как работают конкретные элементы страницы?
Что на странице является наиболее важным, а что – второстепенным?
№34 слайд
Содержание слайда: Итоговые документы этапа
Детальные структурные схемы страниц (wireframes).
№35 слайд
Содержание слайда: Пример детального wireframe
№36 слайд
Содержание слайда: Проверка решений этапа
Тестирование и экспертиза:
юзабилити-тестирование бумажных или электронных версий wireframes;
экспертная оценка интерфейса;
peer reviews.
Консультации:
технические консультации по поводу реализуемости элементов интерфейса.
Утверждение структурных схем интерфейса клиентом.
№37 слайд
Содержание слайда: Изучение задачи и аудитории
Изучение задачи и аудитории
Выбор концепции и ее проработка
Проектирование страниц
Дизайн и интерактивный прототип
Поддержка разработки
№38 слайд
Содержание слайда: Отрисовка дизайн-макетов
Необходимо определить, каким будет внешний вид сайта:
Как будут выглядеть ключевые страницы сайта?
На чем делаются акценты – брендинг, контент, функциональность?
Нужно ли корректировать структурные схемы страниц чтобы они вписались в дизайн?
Будут ли технические сложности при интеграции этого дизайна?
№39 слайд
Содержание слайда: Руководство по оформлению интерфейса
Важно показать принципы построения интерфейса в едином справочном документе:
Перечень и назначение используемых:
пиктограмм, цветов, шрифтов, иллюстраций, лейаутов.
Внешний вид интерактивных элементов и их состояний.
№40 слайд
Содержание слайда: Создание интерактивного прототипа
Интерактивный прототип (в соответствии с дизайном или схематичный) позволяет «вживую» опробовать работу интерфейса:
Как происходят переходы между страницами?
Как работают интерактивные элементы?
Какой контент находится на страницах сайта?
Насколько различается удобство работы в различных средах:
разрешения, браузеры, платформы.
№41 слайд
Содержание слайда: Итоговые документы этапа
Дизайн-макеты страниц.
Руководство по оформлению интерфейса.
Набор сопроводительной графики:
иконки, иллюстрации.
Интерактивный прототип.
№42 слайд
Содержание слайда: Проверка решений этапа
Тестирование и экспертиза:
юзабилити-тестирование интерактивного прототипа и дизайн-макетов;
экспертная оценка дизайн-макетов и прототипа;
peer reviews.
Консультации:
технические консультации по поводу реализуемости элементов интерфейса.
Утверждение концепции дизайна и дизайн-макетов клиентом.
№43 слайд
Содержание слайда: Изучение задачи и аудитории
Изучение задачи и аудитории
Выбор концепции и ее проработка
Проектирование страниц
Дизайн и интерактивный прототип
Поддержка разработки
№44 слайд
Содержание слайда: Решение возникающих несоответствий
В ходе реализации задуманного могут требоваться корректировки интерфейса по разным причинам:
В ходе работы были найдены более оптимальные решения или появилась возможность унификации разных решений.
Техническая реализация отдельных решений невозможна или слишком затратна.
Оказалось, что данные из стороннего источника получить нельзя или их формат отличается от плана.
№45 слайд
Содержание слайда: Проработка новой функциональности
Концепция проекта или планы заказчика могут корректироваться по ходу разработки:
Необходимо спроектировать новую функциональность и интегрировать ее в интерфейс.
Нужно расширить возможности ранее спроектированных функций.
Требуется допроектировать функциональность, которая была отложена на более поздние этапы.
№46 слайд
Содержание слайда: Консультации по внедрению
Необходимо тесное взаимодействие проектировщиков с командой разработки:
Комментарии и объяснения по поводу подготовленной документации.
Оперативные ответы на возникающие у разработчиков вопросы.
Регулярные проверки качества реализации интерфейса и его соответствия задуманному.
Объяснение решений – почему сделано так, а не иначе.
№47 слайд
Содержание слайда: Итоговые документы этапа
Поддержка и обновление ранее созданных документов.
Новые wireframes (структурные схемы страниц).
Новые дизайн-макеты и сопутствующие иллюстрации.
Новые страницы интерактивного прототипа.
№48 слайд
Содержание слайда: Проверка решений этапа
Тестирование и экспертиза:
юзабилити-тестирование работающего сайта;
бета-тестирование:
сбор и изучение мнений пользователей;
сбор и анализ статистики;
тестирование QA-специалистами;
экспертная оценка работающего сайта.
№49 слайд
Содержание слайда: Обзор процесса проектирования
Обзор процесса проектирования
Встраивание проектирования в общий процесс
Разбор кейса
Выводы и наблюдения
чем полезен кейс, выводы
№50 слайд
Содержание слайда: Чем полезен кейс
Кейс достаточно простой, но:
Позволяет примерно показать, на каких точках и как можно влиять на качество принимаемых при проектировании решений.
Хоть он и описывает веб-проект, процесс в целом похож на те что используются для десктопных и мобильных приложений.
№51 слайд
Содержание слайда: Выводы
Есть множество инструментов и методов для проверки качества интерфейса.
Эти инструменты должны использоваться комплексно, на всех этапах процесса.
Использование инструментов от случая к случаю не способно качественно изменить удобство продукта.
№52 слайд
Содержание слайда:
Скачать все slide презентации Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company одним архивом:
